A.white { text-decoration: none; color : #FFFFFF  }
A.white:hover { color : yellow }

A { text-decoration: none; color : #0000FF  }
A:hover { text-decoration:underline; }


h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	padding: 2px;
	margin-bottom: 10px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #666666;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #003366;
	border-bottom: thin dotted #003366;
	padding: 2px;
	margin-bottom: 0px;
	clear: left;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000066;
	border-top: none;
	border-right: none;
	border-bottom: 1px dotted #0099FF;
	border-left: none;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 5px;
}

#container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-bottom: 0px;
}
#container #header
 {
	width: 100%;
	float: left;
	height: 80px;
	margin-bottom: 5px;
}
#container #header img {
	float: left;
}
#container  #header  #callnow {
	float: right;
	text-align: left;
	background-image: url(/pics/icon-phone.png);
	background-repeat: no-repeat;
	background-position: 185px 0px;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #1C009B;
	position: relative;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #1C009B;
	width: 240px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #1C009B;
	margin-bottom: 10px;
}
#container #header #callnow #title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #A40000;
	font-weight: bold;
	clear: left;
	float: left;
	width: 170px;
	padding: 3px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FF0000;
}
#container #header #callnow #contact {
	font-weight: bold;
	color: #000000;
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin-left: 10px;
	float: left;
	clear: left;
}

#container #header #callnow #number {
	font-weight: bold;
	color: #FFFFFF;
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	background-color: #1C009B;
	padding: 5px;
	clear: left;
	float: left;
	width: 226px;
	text-align: center;
	margin-left: 2px;
	margin-bottom: 2px;
}


#container #header #systemdate {
	float: right;
	clear: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#container #centre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#container #centre #sectionleftside {
	position: relative;
	clear: left;
	float: left;

}
#searchbox {
	float: left;
	position: relative;
	text-align: left;
	background-color: #DABFAE;
	background-image: url(/pics/icon-search-locum.jpg);
	background-repeat: no-repeat;
	background-position: 5px bottom;
}
#searchbox #title {
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #D1B09C;
}
#searchbox #date_search {
	position: absolute;
	left: 24px;
	top: 39px;
}
#searchbox #date_search th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-align: left;
	padding-right: 5px;
	color: #FFFFFF;
}
#searchbox #date_search td {
	padding: 3px;
	text-align: left;
}
#searchbox #date_search .dateselect {
	font-size: 10px;
}
#searchbox #date_search #AREA_CODE {
	font-size: 11px;
}
#searchbox #date_search #BRANCH_TYPE {
	font-size: 11px;
}

#searchbox #btnSearch {
	position: absolute;
	left: 124px;
	top: 147px;
}
#loginbox {
	float: left;
	clear: left;
	position: relative;
	margin-top: 10px;
	background-color: #4F99D3;
	background-image: url(/pics/icon-doctor.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	border: 1px solid black;
}
#loginbox #title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 5px;
	background-color: #3F8ECF;
}

#loginbox a {
	color: #FFFFFF;
}
#loginbox #logindetails {
	position: absolute;
	left: 26px;
	top: 41px;
}
#container  #centre  #sectionleftside #loginbox #logindetails th {
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-align: left;
	width: 70px;
	padding: 3px;
}
#container  #centre  #sectionleftside #loginbox #logindetails td {
	padding: 3px;
}
#container  #centre  #sectionleftside #loginbox #logindetails #username {
	width: 100px;
}
#container  #centre  #sectionleftside #loginbox #logindetails #passw {
	width: 100px;
}
#loginbox #btnLogin {
	position: absolute;
	left: 164px;
	top: 111px;
}
#loginbox #newregister {
	position: absolute;
	left: 71px;
	top: 160px;
	font-size: 12px;
	font-weight: bold;
	width: 167px;
}
#loginbox #forgotpass {
	position: absolute;
	left: 71px;
	top: 140px;
	width: 121px;
}

.adsbox {
	float: left;
	height: 200px;
	width: 250px;
	clear: left;
	position: relative;
	margin-top: 10px;
	border: 1px solid black;
}

#container #centre #sectionleftside .lefttitle {
	clear: left;
	float: left;
	margin-top: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000066;
	width: 250px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;
}


#container #centre #sectionleftside .banner {
	width: 250px;
	clear: left;
	float: left;
	margin-top: 10px;
	text-align: center;
}







#sectionrightside {
	float: left;
	width: 70%;
	position: relative;
}

#memberbox {
	float: left;
	position: relative;
	width: 540px;
	background-color: #4F9AD4;
	margin-left: 10px;
	margin-bottom: 10px;
	background-image: url(/pics/icon-doctor.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#memberbox  #memberlink  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFCC;
	width: 530px;
	padding: 5px;
	margin: 0px;
	background-color: #2B76AE;
	clear: both;
	float: right;
}
#memberbox   #memberlink   li      {
	float: right;
	list-style-type: none;
	list-style-image: none;
}
#memberbox   #memberlink   li   a  {
	color: #FFFFCC;
	text-decoration: underline;
	font-weight: bold;
	padding: 5px;
}
#memberbox    #memberlink    li    a:hover  {
	text-decoration: underline;
	color: #FFFFFF;
	background-color: #205984;
}

#memberbox  #accountdetails {
	width: 520px;
	position: relative;
	float: left;
	padding-right: 10px;
	padding-left: 10px;
	margin-top: 10px;
	padding-bottom: 10px;
}

#memberbox #accountdetails #accountname {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}
#memberbox  #accountdetails  #docpic    {
	float: right;
	width: 150px;
}
#memberbox  #accountdetails  #docpic  img    {
	border: 2px solid #000066;
}


#memberbox    #accountdetails    #otherinfo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	float: left;
	margin-top: 5px;
	margin-bottom: 10px;
	clear: left;
	position: relative;
}
#memberbox #accountdetails #otherinfo th {
	width: 70px;
	text-align: left;
	font-weight: normal;
	font-size: 11px;
	color: #D8E9F5;
}
#memberbox #accountdetails #otherinfo td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
}
#memberbox  #accountdetails  #otherinfo  td  a    {
	color: #FFFFFF;
}



#sectioncenter {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: auto;
	width: 540px;
	float: left;
	position: relative;
	margin-bottom: 10px;
	margin-left: 10px;
}
.rowoff {
	background-color:#FFFFFF;
	height:20px;
}
.rowon {
	background-color:#DDFFDD;
	height:20px;
}

#timer {
}
#messagesection {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid #000000;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #999999;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
}
#infosection {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid #CCCCCC;
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF;
	padding: 2px;
	margin-top: 15px;
	margin-bottom: 15px;
	float: left;
}
#timer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #666666;
	margin-top: 20px;
	clear: left;
	float: left;
}



#footer {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	margin-bottom: 5px;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #4E7BB2;
	font-weight: bold;
	text-align: center;
	float: left;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #00FFFF;
	border-right-color: #00FFFF;
	border-bottom-color: #00FFFF;
	border-left-color: #00FFFF;
	padding-top: 10px;
}

#searchparameter {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #CCCCCC;
}
#locumsearch {
	width: 540px;
}
#locumsearch th {
	height: 30px;
	color: #FFFFFF;
	background-image: url(/pics/listheader.jpg);
	background-position: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
}
#locumsearch .topleft {
	background-image: url(/pics/listheader.jpg);
	background-position: left;
}
#locumsearch .topright {
	background-image: url(/pics/listheader.jpg);
	background-position: right;
	text-align: left;
}
#locumsearch td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	vertical-align: top;
	text-align: center;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}
#locumsearch .dayname {
	width: 80px;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
#locumsearch .date {
	width: 80px;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
}
#locumsearch .time {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #0033CC;
}
#locumsearch .arrow {
	text-align: right;
	vertical-align: top;
	padding-top: 15px;
}
#locumsearch .dur {
	width: 80px;
	font-size: 14px;
	font-weight: bold;
	color: #0033CC;
	font-family: Arial, Helvetica, sans-serif;
}
#locumsearch .clinic {
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}
#locumsearch .address {
	font-size: 10px;
	text-align: left;
	color: #666666;
}
#locumsearch .area {
	text-align: left;
	margin-top: 5px;
}
#locumsearch .type {
	text-align: left;
}
#locumsearch .memberbutton {
	text-align: left;
	margin-top: 5px;
}
#locumsearch .memberbutton a {
	text-decoration: underline;
}
#notfound {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 10px;
}

/* Modern slot search results */
.locum-results {
	width: 100%;
}

#searchparameter.search-summary {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	color: #20323a;
	font-size: 13px;
	line-height: 1.45;
}

.search-summary-copy {
	min-width: 0;
}

.search-summary-label {
	flex: 0 0 auto;
	padding: 4px 8px;
	border-radius: 999px;
	background: #e7f7f8;
	color: #006b76;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
}

.locum-results-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
	padding: 0 2px;
	color: #60727a;
	font-size: 12px;
	font-weight: bold;
}

.locum-results-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	margin-right: 6px;
	border-radius: 999px;
	background: #006b76;
	color: #ffffff;
}

.locum-results-sort {
	color: #60727a;
	font-size: 11px;
	text-transform: uppercase;
}

#locumsearch {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
}

#locumsearch th {
	height: auto;
	padding: 9px 10px;
	background: #65777f;
	background-image: none;
	color: #ffffff;
	font-size: 12px;
	line-height: 1.2;
}

#locumsearch th:first-child {
	border-radius: 8px 0 0 8px;
}

#locumsearch th:last-child {
	border-radius: 0 8px 8px 0;
}

#locumsearch tr.slot-row {
	background: #ffffff;
	box-shadow: 0 8px 22px rgba(22, 48, 61, 0.08);
}

#locumsearch tr.slot-row td {
	padding: 12px 10px;
	border-top: 1px solid #dbe6ea;
	border-bottom: 1px solid #dbe6ea;
	background: #ffffff;
	color: #20323a;
	font-size: 12px;
	vertical-align: top;
}

#locumsearch tr.slot-row td:first-child {
	border-left: 1px solid #dbe6ea;
	border-radius: 8px 0 0 8px;
}

#locumsearch tr.slot-row td:last-child {
	border-right: 1px solid #dbe6ea;
	border-radius: 0 8px 8px 0;
}

#locumsearch .slot-date-line {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

#locumsearch .dayname,
#locumsearch .date {
	width: auto;
	color: #20323a;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.25;
}

#locumsearch .time {
	margin-top: 8px;
	color: #006b76;
	font-size: 15px;
	line-height: 1.2;
}

#locumsearch .arrow {
	width: 28px;
	padding-right: 0;
	padding-left: 0;
	color: #6f8f29;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

#locumsearch .arrow span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #eef7dc;
}

#locumsearch .slot-duration {
	width: 88px;
	text-align: center;
}

#locumsearch .dur {
	display: block;
	width: auto;
	color: #006b76;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.1;
}

#locumsearch .duration-unit {
	display: block;
	margin-top: 2px;
	color: #60727a;
	font-size: 11px;
}

#locumsearch .clinic {
	float: none;
	width: auto;
	color: #20323a;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.25;
}

#locumsearch .address {
	float: none;
	margin-top: 4px;
	color: #60727a;
	font-size: 11px;
	line-height: 1.35;
}

#locumsearch .slot-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

#locumsearch .slot-meta span {
	display: inline-flex;
	padding: 3px 7px;
	border-radius: 999px;
	background: #eef4f7;
	color: #20323a;
	font-size: 11px;
}

#locumsearch .memberbutton {
	margin-top: 10px;
	text-align: left;
}

#locumsearch .memberbutton a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 7px 10px;
	border-radius: 6px;
	background: #006b76;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#locumsearch .memberbutton a:hover,
#locumsearch .memberbutton a:focus {
	background: #004f57;
	color: #ffffff;
}

.locum-empty-state {
	display: grid;
	gap: 4px;
	margin-top: 14px;
	padding: 18px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	color: #20323a;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.06);
}

.locum-empty-state strong {
	color: #20323a;
	font-size: 15px;
}

.locum-empty-state span {
	color: #60727a;
	font-size: 13px;
	font-weight: normal;
}

.locum-empty-state-warning {
	border-color: #e3d7a4;
	background: #fff9df;
}

/* Front page banner and urgent locums */
#mainbanner .splide__slide {
	background: #ffffff;
}

#mainbanner .splide__slide img {
	display: block;
	width: 100%;
	height: auto;
}

#mainbanner .splide__arrow {
	border: 1px solid #d5e4e8;
	background: rgba(255, 255, 255, 0.92);
	opacity: 1;
}

#mainbanner .splide__pagination {
	bottom: 10px;
}

#mainbanner .splide__pagination__page.is-active {
	background: #006b76;
}

.urgent-locum {
	margin-top: 16px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.08);
	overflow: hidden;
}

.urgent-locum-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	border-bottom: 1px solid #dbe6ea;
	background: #ffffff;
}

.urgent-locum-kicker {
	display: inline-flex;
	margin-bottom: 4px;
	color: #006b76;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.urgent-locum-header h2 {
	margin: 0;
	color: #20323a;
	font-size: 20px;
	line-height: 1.2;
}

.urgent-locum-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #e7f7f8;
	color: #006b76;
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
}

.urgent-locum-filters {
	display: grid;
	grid-template-columns: auto minmax(150px, 1fr) auto minmax(150px, 1fr);
	gap: 10px;
	align-items: center;
	padding: 14px 18px;
	border-bottom: 1px solid #dbe6ea;
	background: #f7fafb;
}

.urgent-locum-filters label {
	color: #60727a;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

.urgent-locum-filters select {
	width: 100%;
	min-height: 38px;
	border: 1px solid #c9d7dc;
	border-radius: 6px;
	background: #ffffff;
	color: #20323a;
	font-size: 14px;
}

#urgentlocumlist {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

#urgentlocumlist th {
	height: auto;
	padding: 10px;
	background: #65777f;
	background-image: none;
	color: #ffffff;
	font-size: 12px;
	line-height: 1.2;
	text-align: left;
}

#urgentlocumlist th:first-child {
	padding-left: 18px;
}

#urgentlocumlist th:last-child {
	padding-right: 18px;
	text-align: right;
}

#urgentlocumlist td {
	padding: 14px 10px;
	border-bottom: 1px solid #eef4f7;
	background: #ffffff;
	color: #20323a;
	font-size: 12px;
	vertical-align: middle;
}

#urgentlocumlist td:first-child {
	padding-left: 18px;
}

#urgentlocumlist td:last-child {
	padding-right: 18px;
}

#urgentlocumlist .day {
	color: #006b76;
	font-size: 22px;
	font-weight: bold;
	line-height: 1;
}

#urgentlocumlist .month,
#urgentlocumlist .dayname {
	color: #60727a;
	font-size: 12px;
	font-weight: bold;
}

#urgentlocumlist .time {
	margin-top: 4px;
	color: #006b76;
	font-size: 15px;
	font-weight: bold;
}

#urgentlocumlist .dur {
	color: #006b76;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}

#urgentlocumlist .clinicpic {
	float: left;
	width: 54px;
	height: 42px;
	margin-right: 10px;
	border: 1px solid #dbe6ea;
	border-radius: 6px;
	background: #eef4f7;
	overflow: hidden;
}

#urgentlocumlist .clinicpic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#urgentlocumlist .clinic {
	float: none;
	width: auto;
	color: #20323a;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.25;
}

#urgentlocumlist .clinic a {
	color: #20323a;
	text-decoration: none;
}

#urgentlocumlist .clinic a:hover,
#urgentlocumlist .clinic a:focus {
	color: #006b76;
	text-decoration: underline;
}

#urgentlocumlist .area {
	float: none;
	margin-top: 4px;
	color: #60727a;
	font-size: 11px;
}

#urgentlocumlist .urgent-type {
	color: #20323a;
	font-weight: bold;
}

#urgentlocumlist .urgent-action {
	text-align: right;
}

#urgentlocumlist .btnViewSlot {
	min-height: 34px;
	padding: 8px 11px;
	border: 0;
	border-radius: 6px;
	background: #006b76;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}

#urgentlocumlist .btnViewSlot:hover,
#urgentlocumlist .btnViewSlot:focus {
	background: #004f57;
}

/* Modern locum slot details */
.slot-detail {
	width: 100%;
	color: #20323a;
}

.slot-detail-card {
	display: grid;
	grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
	gap: 0;
	margin-bottom: 14px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.08);
	overflow: hidden;
}

.slot-detail-media {
	min-height: 230px;
	background: #e7f7f8;
}

.slot-detail-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slot-detail-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 22px;
}

.slot-detail-kicker {
	width: fit-content;
	margin-bottom: 10px;
	padding: 4px 9px;
	border-radius: 999px;
	background: #e7f7f8;
	color: #006b76;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.slot-detail-content h1 {
	margin: 0;
	color: #20323a;
	font-size: 24px;
	line-height: 1.18;
}

.slot-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.slot-detail-tags span {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 9px;
	border-radius: 999px;
	background: #eef4f7;
	color: #20323a;
	font-size: 12px;
	font-weight: bold;
}

.slot-detail-timebar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.slot-detail-timebar div {
	min-width: 0;
	padding: 12px;
	border: 1px solid #dbe6ea;
	border-radius: 8px;
	background: #f7fafb;
}

.slot-detail-timebar span,
.slot-detail-panel dt {
	display: block;
	margin-bottom: 4px;
	color: #60727a;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
}

.slot-detail-timebar strong {
	display: block;
	color: #006b76;
	font-size: 17px;
	line-height: 1.2;
}

.slot-detail-timebar em {
	display: block;
	margin-top: 2px;
	color: #60727a;
	font-size: 12px;
	font-style: normal;
}

.slot-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
	gap: 14px;
}

.slot-detail-panel {
	padding: 18px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.06);
}

.slot-detail-panel h2 {
	margin: 0 0 14px;
	color: #20323a;
	font-size: 16px;
	line-height: 1.25;
}

.slot-detail-panel dl {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 10px 14px;
	margin: 0;
}

.slot-detail-panel dt {
	margin: 0;
}

.slot-detail-panel dd {
	min-width: 0;
	margin: 0;
	color: #20323a;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
}

.slot-map-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin-top: 16px;
	padding: 9px 12px;
	border-radius: 6px;
	background: #eef7dc;
	color: #3f6410;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

.slot-map-link:hover,
.slot-map-link:focus {
	background: #dcedbd;
	color: #2f4f08;
}

.slot-action-bar,
#buttonsection.slot-action-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: 14px;
	padding: 14px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.06);
}

#buttonsection.slot-action-bar input {
	min-height: 42px;
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
}

#buttonsection.slot-action-bar #btnBack {
	float: none;
	background: #eef4f7;
	color: #20323a;
}

#buttonsection.slot-action-bar #btnBook {
	background: #006b76;
	color: #ffffff;
}

#buttonsection.slot-action-bar #btnBook:hover,
#buttonsection.slot-action-bar #btnBook:focus {
	background: #004f57;
}

.slot-notice,
#bookingstatus.slot-notice,
#pleaseregister.slot-notice {
	width: 100%;
	margin-top: 14px;
	padding: 16px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	color: #20323a;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.45;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.06);
}

.slot-notice-pending,
.slot-notice-warning {
	border-color: #e3d7a4;
	background: #fff9df;
}

.slot-notice-approved {
	border-color: #9ccfb4;
	background: #eaf8f0;
}

.slot-login-notice {
	border-color: #b8dbe0;
	background: #e7f7f8;
}

.slot-notice-actions {
	margin-top: 12px;
	text-align: right;
}

.slot-notice a {
	color: #006b76;
}

.book_id {
	color: #006b76;
	font-size: 22px;
	font-weight: bold;
}

/* Shared content card */
.content-card {
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.08);
	overflow: hidden;
}

.content-card-header {
	padding: 22px;
	border-bottom: 1px solid #dbe6ea;
	background: #ffffff;
}

.content-kicker {
	display: inline-flex;
	margin-bottom: 8px;
	padding: 4px 9px;
	border-radius: 999px;
	background: #e7f7f8;
	color: #006b76;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.content-card #title {
	margin: 0;
	color: #20323a;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.2;
}

.content-card #guide,
.content-card #result {
	margin-top: 8px;
	color: #60727a;
	font-size: 14px;
	line-height: 1.45;
}

.content-form {
	display: grid;
	gap: 8px;
	padding: 20px 22px;
}

.content-form label {
	color: #20323a;
	font-size: 13px;
	font-weight: bold;
}

.content-form input {
	width: 100%;
	min-height: 44px;
	border: 1px solid #c9d7dc;
	border-radius: 6px;
	background: #ffffff;
	color: #20323a;
	font-size: 15px;
	padding: 10px 12px;
}

.content-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 22px 22px;
}

.content-actions #btnRegister,
.content-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	background: #006b76;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}

.content-actions #btnRegister:hover,
.content-actions #btnRegister:focus,
.content-button:hover,
.content-button:focus {
	background: #004f57;
	color: #ffffff;
}

.content-actions a:not(.content-button) {
	color: #60727a;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

.content-actions a:not(.content-button):hover,
.content-actions a:not(.content-button):focus {
	color: #006b76;
	text-decoration: underline;
}

.content-result-success .content-kicker {
	background: #eaf8f0;
	color: #2f764d;
}

.content-result-warning .content-kicker {
	background: #fff9df;
	color: #806100;
}

/* Privacy policy */
.policy-card {
	max-width: 860px;
}

.policy-header {
	background: #f7fafb;
}

.policy-card .last-updated {
	display: inline-flex;
	margin: 12px 0 0;
	padding: 5px 9px;
	border-radius: 999px;
	background: #eef4f7;
	color: #60727a;
	font-size: 12px;
	font-weight: bold;
}

.policy-summary {
	max-width: 680px;
	margin: 14px 0 0;
	color: #60727a;
	font-size: 15px;
	line-height: 1.5;
}

.policy-body {
	padding: 24px 28px 30px;
	color: #20323a;
	font-size: 14px;
	line-height: 1.65;
}

.policy-body h2 {
	margin: 28px 0 10px;
	padding-top: 18px;
	border-top: 1px solid #eef4f7;
	color: #006b76;
	font-size: 18px;
	line-height: 1.25;
}

.policy-body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.policy-body h3 {
	margin: 20px 0 8px;
	color: #20323a;
	font-size: 15px;
	line-height: 1.3;
}

.policy-body p {
	margin: 0 0 12px;
}

.policy-body ul {
	margin: 8px 0 16px;
	padding-left: 22px;
}

.policy-body li {
	margin-bottom: 6px;
}

.policy-body em {
	color: #60727a;
}

.policy-body strong {
	color: #20323a;
}
#downloadapp_notice {
	font-size: 1.4em;
	font-weight: bold;
	color: #ffffff;
	background-color: #000066;
	padding : 20px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Professional responsive shell */
* {
	box-sizing: border-box;
}

html {
	background: #eef4f7;
}

body {
	margin: 0;
	background: #eef4f7;
	color: #20323a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.45;
}

a {
	color: #006b76;
}

a:hover,
a:focus {
	color: #004f57;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 2px solid #00a3ad;
	outline-offset: 2px;
}

#container {
	width: 100%;
	max-width: 1160px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 0 20px 24px;
	background: transparent;
}

#container #header {
	float: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	height: auto;
	min-height: 96px;
	margin: 0 0 22px;
	padding: 18px 0;
	position: relative;
}

#container #header .brand-logo {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	height: 100px;
	overflow: hidden;
}

#container #header img {
	float: none;
	max-width: 380px;
	width: 100%;
	height: auto;
}

#container #header #callnow {
	float: none;
	width: auto;
	min-width: 280px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	background-image: none;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.08);
}

#container #header #callnow #title,
#container #header #callnow #contact,
#container #header #callnow #number {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#container #header #callnow #title {
	color: #006b76;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#container #header #callnow #contact {
	margin-top: 4px;
	color: #20323a;
	font-size: 15px;
}

#container #header #callnow #number {
	margin-top: 6px;
	color: #004f57;
	font-size: 16px;
	text-align: left;
}

#container #header #callnow #number a {
	color: #004f57;
	text-decoration: none;
}

#container #header #callnow #number .whatsapp-link {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	vertical-align: middle;
}

#container #header #callnow #number img.whatsapp-icon {
	display: block;
	float: none;
	width: 20px;
	max-width: none;
	height: 20px;
}

.mainnav-toggle,
.mainnav-toggle-button {
	display: none;
}

#mainnav {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	gap: 8px;
	margin: -6px 0 0;
	padding: 8px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.06);
}

#mainnav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 9px 13px;
	border-radius: 6px;
	color: #20323a;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

#mainnav a:hover,
#mainnav a:focus {
	background: #e7f7f8;
	color: #006b76;
}

#mainnav a.active {
	background: #006b76;
	color: #ffffff;
}

#container #centre {
	display: grid;
	grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
	gap: 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

#container #centre #sectionleftside,
#sectionrightside,
#sectioncenter {
	float: none;
	position: relative;
	width: auto;
	min-width: 0;
}

#container #centre #sectionleftside {
	grid-column: 1;
}

#sectionrightside {
	grid-column: 2;
}

.leftbox {
	float: none;
	clear: none;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0 0 16px;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	background-image: none;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.08);
	overflow: hidden;
}

.leftbox-title {
	float: none;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 0;
	background: #006b76;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
}

#searchbox #date_search {
	position: static;
	width: calc(100% - 28px);
	margin: 14px;
	padding: 0;
	border-collapse: collapse;
}

#searchbox #date_search th {
	width: 76px;
	padding: 5px 8px 5px 0;
	color: #20323a;
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	vertical-align: middle;
}

#searchbox #date_search td {
	width: auto;
	padding: 5px 0;
	color: #20323a;
	text-align: left;
	vertical-align: middle;
}

#searchbox select,
#loginbox input {
	width: 100%;
	max-width: 100%;
	min-height: 38px;
	border: 1px solid #c9d7dc;
	border-radius: 6px;
	background: #ffffff;
	color: #20323a;
	font-size: 14px;
}

#searchbox #date_search tr:first-child td {
	display: grid;
	grid-template-columns: 48px minmax(54px, 1fr) 64px;
	gap: 4px;
}

#searchbox #DATE_DAY,
#searchbox #DATE_MONTH,
#searchbox #DATE_YEAR {
	width: 100%;
	min-width: 0;
}

#searchbox #btnSearch {
	position: static;
	display: block;
	width: calc(100% - 104px);
	min-height: 42px;
	margin: 2px 14px 14px 90px;
	border: 0;
	border-radius: 6px;
	background: #006b76;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}

#searchbox #btnSearch:hover,
#searchbox #btnSearch:focus {
	background: #004f57;
}

#loginbox #logindetails {
	position: static;
	width: calc(100% - 28px);
	margin: 14px;
	padding: 0;
	border-collapse: collapse;
}

#container #centre #sectionleftside #loginbox #logindetails th,
#container #centre #sectionleftside #loginbox #logindetails td {
	padding: 5px 0;
	vertical-align: middle;
}

#container #centre #sectionleftside #loginbox #logindetails th {
	width: 76px;
	padding-right: 8px;
	color: #20323a;
	font-size: 13px;
	font-weight: bold;
}

#container #centre #sectionleftside #loginbox #logindetails td {
	padding-left: 8px;
}

#container #centre #sectionleftside #loginbox #logindetails #username,
#container #centre #sectionleftside #loginbox #logindetails #passw {
	width: 100%;
}

#loginbox #btnLogin {
	position: static;
	display: block;
	width: calc(100% - 104px);
	min-height: 42px;
	margin: 2px 14px 12px 90px;
	border: 0;
	border-radius: 6px;
	background: #006b76;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}

#loginbox #btnLogin:hover,
#loginbox #btnLogin:focus {
	background: #004f57;
}

#loginbox #forgotpass,
#loginbox #newregister {
	position: static;
	width: auto;
	padding: 0 14px 10px 90px;
	font-size: 13px;
	font-weight: bold;
}

#loginbox #newregister {
	padding-bottom: 16px;
}

#loginbox #forgotpass a,
#loginbox #newregister a {
	color: #006b76;
	text-decoration: none;
}

#loginbox #forgotpass a:hover,
#loginbox #forgotpass a:focus,
#loginbox #newregister a:hover,
#loginbox #newregister a:focus {
	color: #004f57;
	text-decoration: underline;
}

#doclocumapp #downloadapp_notice {
	margin: 0;
	padding: 18px 14px 8px;
	background: transparent;
	color: #20323a;
	font-size: 18px;
	line-height: 1.35;
}

#doclocumapp #newregister {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: auto;
	padding: 8px 14px 16px;
}

#doclocumapp #newregister a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 172px;
	height: 52px;
	padding: 0;
	border-radius: 7px;
	background: #000000;
	overflow: hidden;
	text-decoration: none;
}

#doclocumapp #newregister a:hover,
#doclocumapp #newregister a:focus {
	box-shadow: 0 0 0 2px #00a3ad;
}

#doclocumapp #newregister img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: fill;
}

.leftbox .banner {
	float: none;
	width: 100%;
	margin: 0;
	padding: 12px;
	text-align: center;
}

.leftbox .banner img {
	max-width: 100%;
	height: auto;
	border: 0;
}

#memberbox {
	float: none;
	width: 100%;
	margin: 0 0 18px;
	border-radius: 8px;
	overflow: hidden;
}

#memberbox #memberlink {
	float: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}

#memberbox #memberlink li {
	float: none;
}

#memberbox #accountdetails {
	float: none;
	width: 100%;
}

#sectioncenter {
	width: 100%;
	margin: 0;
}

#mainbanner,
.extrabanner {
	float: none;
	width: 100%;
	margin-left: auto;
	border: 1px solid #d5e4e8;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 10px 28px rgba(22, 48, 61, 0.08);
}

#mainbanner img,
.extrabanner img {
	max-width: 100%;
	height: auto;
}

#urgentlocumlist,
#locumsearch {
	width: 100%;
}

#footer {
	width: 100%;
	max-width: 1160px;
	margin: 20px auto 0;
	padding: 18px 20px 28px;
	color: #65777f;
	font-size: 13px;
	text-align: center;
}

@media screen and (max-width: 860px) {
	html,
	body {
		width: 100%;
		overflow-x: hidden;
	}

	#container {
		max-width: none;
		width: 100vw;
		margin: 0;
		padding: 0 0 20px;
	}

	#container #header {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0;
		width: 100%;
		margin: 0;
		min-height: 0;
		padding: 8px 14px 10px;
	}

	#container #header .brand-logo {
		flex: 1 1 auto;
		height: auto;
		max-width: calc(100% - 58px);
		min-height: 0;
	}

	#container #header img {
		max-width: 230px;
	}

	#container #header #callnow {
		flex: 1 0 100%;
		order: 3;
		width: 100%;
		min-width: 0;
		margin-top: 10px;
	}

	.mainnav-toggle {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}

	.mainnav-toggle-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		position: relative;
		border: 1px solid #c8dde2;
		border-radius: 8px;
		background: #ffffff;
		box-shadow: 0 8px 20px rgba(22, 48, 61, 0.08);
		cursor: pointer;
	}

	.mainnav-toggle:focus + .mainnav-toggle-button {
		outline: 2px solid #00a3ad;
		outline-offset: 2px;
	}

	.mainnav-toggle-button span {
		position: absolute;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: #006b76;
		transition: transform 0.18s ease, opacity 0.18s ease;
	}

	.mainnav-toggle-button span:nth-child(1) {
		transform: translateY(-6px);
	}

	.mainnav-toggle-button span:nth-child(3) {
		transform: translateY(6px);
	}

	.mainnav-toggle:checked + .mainnav-toggle-button span:nth-child(1) {
		transform: rotate(45deg);
	}

	.mainnav-toggle:checked + .mainnav-toggle-button span:nth-child(2) {
		opacity: 0;
	}

	.mainnav-toggle:checked + .mainnav-toggle-button span:nth-child(3) {
		transform: rotate(-45deg);
	}

	#mainnav {
		display: none;
		position: absolute;
		top: 56px;
		right: 14px;
		z-index: 50;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 4px;
		width: min(280px, calc(100vw - 28px));
		margin: 0;
		padding: 8px;
		border: 1px solid #c8dde2;
		border-radius: 8px;
		box-shadow: 0 18px 36px rgba(22, 48, 61, 0.18);
	}

	.mainnav-toggle:checked ~ #mainnav {
		display: flex;
	}

	#mainnav a {
		justify-content: flex-start;
		width: 100%;
		min-height: 42px;
		padding: 10px 12px;
		font-size: 13px;
	}

	#container #centre {
		display: flex;
		flex-direction: column;
		grid-template-columns: 1fr;
		gap: 0;
		width: 100%;
	}

	#container #centre #sectionleftside,
	#sectionrightside {
		grid-column: 1;
		width: 100%;
	}

	#sectionrightside {
		order: 1;
	}

	#container #centre #sectionleftside {
		order: 2;
	}

	.leftbox,
	#mainbanner,
	.extrabanner,
	#memberbox {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	#sectioncenter {
		width: 100%;
		margin: 0;
	}

	#searchparameter.search-summary {
		flex-direction: column;
		gap: 8px;
		margin: 0 14px;
		border-right: 0;
		border-left: 0;
		border-radius: 8px;
	}

	.locum-results-toolbar {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
		margin: 12px 14px 4px;
		padding: 0;
	}

	.locum-empty-state {
		margin: 12px 14px 0;
	}

	.urgent-locum {
		margin: 14px;
		border-radius: 8px;
	}

	.urgent-locum-header {
		align-items: flex-start;
		flex-direction: column;
		padding: 14px;
	}

	.urgent-locum-filters {
		grid-template-columns: 1fr;
		padding: 14px;
	}

	#urgentlocumlist,
	#urgentlocumlist tbody,
	#urgentlocumlist tr,
	#urgentlocumlist td {
		display: block;
		width: 100%;
	}

	#urgentlocumlist tr:first-child {
		display: none;
	}

	#urgentlocumlist tr.urgent-slot-row {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		align-items: stretch;
		gap: 0;
		margin: 12px 14px;
		border: 1px solid #dbe6ea;
		border-radius: 8px;
		background: #ffffff;
		overflow: hidden;
	}

	#urgentlocumlist tr.urgent-slot-row td {
		width: auto;
		min-width: 0;
		border: 0;
		padding: 12px;
	}

	#urgentlocumlist .urgent-date {
		grid-row: 1 / span 5;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		align-self: stretch;
		border-right: 1px solid #eef4f7;
		background: #f7fafb;
		text-align: center;
	}

	#urgentlocumlist .urgent-time,
	#urgentlocumlist .urgent-duration,
	#urgentlocumlist .urgent-clinic,
	#urgentlocumlist .urgent-type,
	#urgentlocumlist .urgent-action {
		grid-column: 2;
	}

	#urgentlocumlist .urgent-duration,
	#urgentlocumlist .urgent-type {
		text-align: left;
	}

	#urgentlocumlist .urgent-clinic,
	#urgentlocumlist .urgent-type,
	#urgentlocumlist .urgent-action {
		border-top: 1px solid #eef4f7;
	}

	#urgentlocumlist .urgent-clinic {
		display: grid;
		grid-template-columns: 54px minmax(0, 1fr);
		column-gap: 10px;
		align-items: center;
	}

	#urgentlocumlist .urgent-clinic .clinicpic {
		grid-row: 1 / span 2;
		margin-right: 0;
	}

	#urgentlocumlist .urgent-clinic .clinic,
	#urgentlocumlist .urgent-clinic .area {
		grid-column: 2;
		min-width: 0;
	}

	#urgentlocumlist .urgent-action {
		text-align: left;
	}

	#urgentlocumlist .btnViewSlot {
		width: 100%;
	}

	#locumsearch,
	#locumsearch tbody,
	#locumsearch tr,
	#locumsearch td {
		display: block;
		width: 100%;
	}

	#locumsearch {
		border-spacing: 0;
		padding: 0;
	}

	#locumsearch tr:first-child {
		display: none;
	}

	#locumsearch tr.slot-row {
		display: grid;
		grid-template-columns: 1fr 34px 1fr;
		gap: 0;
		margin: 10px 14px;
		border-top: 1px solid #dbe6ea;
		border-bottom: 1px solid #dbe6ea;
		box-shadow: none;
	}

	#locumsearch tr.slot-row td {
		border: 0;
		border-radius: 0;
		padding: 10px 12px;
	}

	#locumsearch tr.slot-row td:first-child,
	#locumsearch tr.slot-row td:last-child {
		border: 0;
		border-radius: 0;
	}

	#locumsearch .slot-time-from {
		grid-column: 1;
	}

	#locumsearch .arrow {
		grid-column: 2;
		align-self: center;
		width: 34px;
		padding: 0;
	}

	#locumsearch .slot-time-until {
		grid-column: 3;
	}

	#locumsearch .slot-duration {
		grid-column: 1 / 4;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		width: 100%;
		border-top: 1px solid #eef4f7;
		background: #f7fafb;
		text-align: left;
	}

	#locumsearch .slot-duration::before {
		content: attr(data-label);
		color: #60727a;
		font-size: 12px;
		font-weight: bold;
	}

	#locumsearch .dur {
		display: inline;
		font-size: 17px;
	}

	#locumsearch .duration-unit {
		display: inline;
		margin-left: 4px;
	}

	#locumsearch .slot-clinic {
		grid-column: 1 / 4;
		border-top: 1px solid #eef4f7;
	}

	#locumsearch .memberbutton a {
		justify-content: center;
		width: 100%;
	}

	.slot-detail {
		padding: 0 14px;
	}

	.slot-detail-card,
	.slot-detail-grid {
		grid-template-columns: 1fr;
	}

	.slot-detail-card {
		margin-top: 0;
	}

	.slot-detail-media {
		min-height: 190px;
		max-height: 260px;
	}

	.slot-detail-content {
		padding: 18px;
	}

	.slot-detail-content h1 {
		font-size: 21px;
	}

	.slot-detail-timebar {
		grid-template-columns: 1fr;
	}

	.slot-detail-panel {
		padding: 16px;
	}

	.slot-detail-panel dl {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.slot-detail-panel dd {
		margin-bottom: 8px;
	}

	.slot-action-bar,
	#buttonsection.slot-action-bar {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	#buttonsection.slot-action-bar input {
		width: 100%;
	}

	.slot-notice-actions {
		text-align: left;
	}

	.content-card {
		margin: 10px 14px;
		width: auto;
	}

	.content-card-header,
	.content-form,
	.content-actions {
		padding-right: 16px;
		padding-left: 16px;
	}

	.content-card #title {
		font-size: 21px;
	}

	.content-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.content-actions #btnRegister,
	.content-button {
		width: 100%;
	}

	.policy-card {
		margin-top: 10px;
	}

	.policy-summary {
		font-size: 14px;
	}

	.policy-body {
		padding: 20px 16px 24px;
		font-size: 14px;
		line-height: 1.6;
	}

	.policy-body h2 {
		margin-top: 24px;
		font-size: 17px;
	}

	.policy-body h3 {
		font-size: 14px;
	}
}

@media screen and (max-width: 560px) {
	body {
		font-size: 15px;
	}

	#container #header img {
		max-width: 250px;
	}

	#doclocumapp #newregister {
		flex-direction: column;
	}
	
	#loginbox #newregister {
		flex-direction: column;
	}

	#memberbox #memberlink {
		flex-direction: column;
	}

	#memberbox #memberlink li a {
		display: block;
	}
}