/* Import
---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.css');
@import url('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.1.0/mapbox-gl-geocoder.css');

body { background: #fff; margin: 0; padding: 0; font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-size: 16px; line-height: 26px; color: #212a3d; }
* { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; width: auto; max-width: 100%; }
a,
a:hover,
a:focus { text-decoration: none; outline: none; border: none; }
.container { width: 100%; max-width: 1200px; /*padding: 0 30px;*/ padding: 0; margin: 0 auto; }
h1,
h2,
h3,
h4,
h5,
h6 { font-family: "Montserrat", sans-serif; font-weight: 700; }

/* Header
---------------------------- */
header { background: #1967AC; padding: 15px 0; }
header .logo { width: 150px; display: block; margin: 0 auto; }

/* Content
---------------------------- */
.secContent { /*padding: 40px 0;*/ padding: 0; }
.secContent h2.secTitle { font-weight: 700; font-size: 36px; line-height: 1.3em; color: #1967AC; text-align: center; margin: 0 0 30px; padding: 0; }
.secContent .formRow { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin: 0 0 20px; }
.secContent .formCol { flex: 1; }
.secContent .formFooter { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.secContent label { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; color: #1967AF; display: block; margin: 0 0 5px; }
.secContent input[type="text"],
.secContent input[type="email"],
.secContent input[type="tel"],
.secContent textarea,
.secContent select { width: 100%; height: auto; padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 4px; font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; color: rgba(33, 42, 61, 1); }
.secContent input[type="text"]::placeholder,
.secContent input[type="email"]::placeholder,
.secContent input[type="tel"]::placeholder,
.secContent textarea::placeholder,
.secContent select::placeholder { color: rgba(33, 42, 61, 0.7); }
.secContent input[type="text"]:focus,
.secContent input[type="email"]:focus,
.secContent input[type="tel"]:focus,
.secContent textarea:focus,
.secContent select:focus { outline: none; border-color: rgba(25, 103, 175, 0.4); }
.secContent input[type="submit"],
.secContent button[type="submit"] { background: #59B04D; border: none; border-radius: 4px ; display: table; width: 100%; margin: 0; padding: 10px; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; line-height: 26px; color: #fff; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.secContent input[type="submit"]:hover,
.secContent button[type="submit"]:hover { background: #1967AC; color: #fff; }
.secContent .mapboxgl-ctrl-geocoder { width: 100%; max-width: 100%; min-width: inherit; box-shadow: none; }
.secContent input.mapboxgl-ctrl-geocoder--input { padding: 10px 30px 10px 35px; }
.secContent .mapboxgl-ctrl-geocoder--icon-search { top: 10px; left: 10px; width: 20px; height: 20px; }
.secContent .mapboxgl-ctrl-geocoder--icon-close { margin: 0; }
.secContent .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * { top: 12px; right: 10px; }

/* Loader
---------------------------- */
#loaderOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.96); display: flex; align-items: center; justify-content: center; z-index: 9999; }
#loaderOverlay .spinner { width: 60px; height: 60px; border: 6px solid #F1F6F8; border-top: 6px solid #1967AC; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Layout 
---------------------------- */
.rowApt { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 25px; }
.rowApt+.rowApt { margin-top: 30px; }
.colApt { border: 1px solid #D1DFEA; position: relative; }
.colAptForm { padding: 15px; width: 300px }
.colAptCld,
.colAptDetail { padding: 0; width: calc(100% - 325px); }
.formWrap { position: relative; }
.formWrap+.formWrap { margin-top: 20px; }

/* Slots Grid
---------------------------- */
.dateHeaderRow,
.locationContainer { display: flex; flex-direction: row; flex-wrap: wrap; }
.locationContainer { border-top: 1px solid #D1DFEA;}
.dateHeaderRow .dateHeaderCell { width: 15%; padding: 10px; min-height: 62px; transition: all 0.5s ease; }
.dateHeaderRow .dateHeaderCell+.dateHeaderCell { border-left: 1px solid #D1DFEA; }
.dateHeaderRow .dateHeaderCell:nth-child(even) { background: #f1f6f8; }
.dateHeaderRow .dateHeaderCell h5 { font-weight: 600; font-size: 13px; line-height: 18px; color: #1967AC; text-align: center; margin: 0; }
.dateHeaderRow .dateHeaderCell h5 b { font-weight: 700; font-size: 16px; line-height: 24px; display: block; }
.dateHeaderRow .dateHeaderCell.emptyCell,
.locationContainer .headLoc { width: 25%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; padding: 10px; min-height: 62px; transition: all 0.5s ease; }
.locationContainer .headLoc h4 { font-weight: 500; font-size: 13px; line-height: 17px; color: #1967AC; }
.locationContainer .headLoc b { font-weight: 700; font-size: 16px; line-height: 24px; display: block; }
.locationContainer .headLoc .distanceLoc { font-weight: 500; font-size: 12px; line-height: 24px; }
.locationContainer .dateNloc { display: flex; }
.locationContainer .dateNloc { width: 75%; display: flex; flex-direction: row; flex-wrap: wrap; }
.locationContainer .slotsApt { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; width: 20%; border-left: 1px solid #D1DFEA; padding: 10px; min-height: 62px; transition: all 0.5s ease; }
.locationContainer .slotsApt:nth-child(odd) { background: #f1f6f8; }
.locationContainer .slotsApt span { background: #59B04D; border: 1px solid #59B04D; border-radius: 3px; font-weight: 500; font-size: 12px; line-height: 18px; color: #fff; text-align: center; width: calc(50% - 2.5px); padding: 5px 0; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.locationContainer .slotsApt span:hover{ background: #fff; color: #000; }
.locationContainer .slotsApt span:nth-child(n + 3) { margin-top: 5px; }
.locationContainer .slotsApt.slotsNot { width: 100%; align-items: center; align-content: center; justify-content: center; font-weight: 500; font-size: 12px; line-height: 18px; color: #6c889f; text-align: center; opacity: 0.75; }
.locationContainer .slotsMore { font-weight: 600; font-size: 12px; line-height: 16px; color: #1967AC; text-align: center; display: block; margin: 7px auto 0; cursor: pointer; border-bottom: 1.5px solid transparent; }
.locationContainer .slotsMore:hover { border-color: #1967AC; }
.dateHeaderRow.stickyInside { position: fixed; top: 0; z-index: 999; background: #fff; border: 1px solid #D1DFEA; border-top: none; left: 0; width: auto; min-width: 0; }

/* Show all locations
---------------------------- */
.showAllBtn { background: #59B04D; border: 1px solid #fff; border-radius: 3px; width: 100%; margin: 0; padding: 10px; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 12px; line-height: 20px; color: #fff; cursor: pointer; }

/* Calendar Navigation
---------------------------- */
.navBatch { position: absolute; top: 16px; width: 24px; height: 24px; z-index: 999; transform: none; opacity: 0.8; background: none; border: none; margin: 0; padding: 0; cursor: pointer; }
.navBatch svg { width: 100%; height: 100%; }
.navBatch:hover { opacity: 1; }
.navBatch.disabled,
.navBatch.disabled:hover { opacity: 0; cursor: none; z-index: -1; }
.navBatch.previousBatch { left: 25%; }
.navBatch.nextBatch { right: 0; }

/* Appointment Details
---------------------------- */
#divApt2 { display: none; }
.colAptForm h2 { font-size: 24px; line-height: 34px; margin-bottom: 10px; color: #1967ac; }
.colApt .timerApt { background: #f1f6f8; border-radius: 4px; padding: 20px; text-align: center; margin: 5px; }
.timerApt h4 { font-size: 18px; line-height: 28px; margin: 0 auto 20px; padding: 0 0 0 35px; color: #ff4500; position: relative; display: table; }
.timerApt h4 img { width: 28px; height: 28px; position: absolute; top: 0; left: 0; }
.timerApt .btnApt { background: #EA5F38; border: none; border-radius: 4px; display: table; margin: 0 auto; padding: 10px 30px; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px; line-height: 24px; color: #fff; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.timerApt .btnApt:hover { background: #1967AC; color: #fff; }
.contApt { padding: 30px 5px; text-align: center; }
.contApt h3{ font-weight: 500; font-size: 24px; line-height: 34px; color: #1967ac; margin: 0 0 20px; }
.contApt p { font-weight: 600; font-size: 14px; line-height: 20px; color: #1967ac; margin: 0 auto; padding: 0 0 0 25px; position: relative; display: table; }
.contApt p img { position: absolute; top: 0; left: 0; width: 20px; height: 20px; }
.contApt p+p { margin-top: 10px; }

/* Footer
---------------------------- */
footer { background: #1967AC; padding: 15px 0; font-size: 16px; line-height: 26px; color: #fff; text-align: center; }

/* Responsive
---------------------------- */
@media only screen and (max-width: 1200px) {
	.rowApt { gap: 20px; }
	.colAptForm { width: 260px; }
	.colAptCld,
	.colAptDetail { width: calc(100% - 280px); }
	.dateHeaderRow .dateHeaderCell.emptyCell,
	.locationContainer .headLoc { flex-direction: column; justify-content: start; gap: 5px; }
}
@media only screen and (max-width: 992px) {
	.secContent .formRow,
	.rowApt { flex-direction: column; }
	.colAptForm,
	.colAptCld,
	.colAptDetail { width: 100%; }
}
@media only screen and (max-width: 768px) {
	.dateHeaderRow .dateHeaderCell.emptyCell { display: none; }
	.dateHeaderRow .dateHeaderCell { width: 20%; }
	.dateHeaderRow .dateHeaderCell+.dateHeaderCell { border-left: none; }
	.dateHeaderRow .dateHeaderCell+.dateHeaderCell+.dateHeaderCell { border-left: 1px solid #D1DFEA; }
	.navBatch.previousBatch { left: 0; }
	.locationContainer { flex-direction: column; }
	.locationContainer .headLoc,
	.locationContainer .dateNloc { width: 100%; }
	.locationContainer .dateNloc { border-top: 1px solid #D1DFEA; }
	.locationContainer .headLoc { gap: 0; align-items: center; align-content: center;}
	.locationContainer .headLoc h4 { width: 100%; text-align: center; }
	.locationContainer .headLoc h4 b { display: inline-block; margin-right: 5px; }
	.locationContainer .headLoc .distanceLoc { line-height: 20px; }
}
@media only screen and (max-width: 640px) {
	/*.container { padding: 0 20px; }*/
	.locationContainer .slotsApt span { width: 100%; }
	.locationContainer .slotsApt span:nth-child(n + 2) { margin-top: 5px; }
	.dateHeaderRow .dateHeaderCell h5 { font-size: 12px; }
	.dateHeaderRow .dateHeaderCell h5 b { font-size: 14px; }
	.navBatch{ top: 12px; width: 20px; height: 20px; }
}
@media only screen and (max-width: 480px) {
	/*.container { padding: 0 15px; }*/
}