@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
:root{--sa-primary:#26A9E0;--sa-primary-dark:#11a1de;--sa-primary-light:#EAF7FC;--sa-primary-light-bg:#edf8ff;--sa-secondary:#4FE765;--sa-secondary-dark:#00C19D;--sa-secondary-light:#EEFDF0;--sa-danger:#DD282B;--sa-danger-dark:#dd282b;--sa-danger-light:#FCE5E9;--sa-success:#4FE765;--sa-success-dark:#00C19D;--sa-success-light:#EEFDF0;--sa-success-light-new:#E0F9F4;--sa-warning:#ebc052;--sa-warning-dark:#FFC14F;--sa-warning-light:#FFF9ED;--sa-info:#26A9E0; --sa-info-dark: #DFEFFF; --sa-info-light: #F8FBFF;--sa-disabled:#F4F9FF;--sa-light:#FFF;--sa-dark:#000;--sa-transparent:transparent;--sa-static:static;--sa-relative:relative;--sa-absolute:absolute;--sa-fixed:fixed;--sa-border-solid:1px solid;--sa-border-dashed:1px dashed;--sa-center:center;--sa-left:left;--sa-right:right;--sa-stretch:stretch;--sa-middle :middle;--sa-uppercase:uppercase;--sa-underline:underline;--sa-pointer:pointer;--sa-none:none;--sa-d-i-flex:inline-flex;--sa-flex-end:flex-end;--sa-flex-start:flex-start;--sa-wrap:wrap;--sa-space-between:space-between;--sa-d-flex:flex;--sa-d-block:block;--sa-d-i-block:inline-block;--sa-pixel:2px;--sa-width-percent:0%;--sa-percent:2%;--sa-o-hidden:hidden;}
html,body {-webkit-text-size-adjust: none;height:calc(var(--sa-percent)* 50);min-height:calc(var(--sa-percent)* 50); outline: none; margin: 0; padding: 0;overflow: var(--sa-o-hidden); overflow-y: auto; font-size: 14px; background: var(--sa-light); color:var(--sa-dark);font-family: var(--font-family);line-height: 1.6; direction: ltr;scroll-behavior: smooth}html.iphoneBrowser, body.iphoneBrowser,#app { -webkit-overflow-scrolling: touch; overflow-y:auto;height:calc(var(--sa-percent)* 50)}body{position:var(--sa-relative);-webkit-touch-callout: none; -webkit-tap-highlight-color: var(--sa-transparent);font-family: "Open Sans", system-ui;outline: 0;}* {-webkit-box-sizing: border-box;box-sizing: border-box}h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0;}
button,.truncate,input {font-family: var(--font-family);outline: none}figure {margin: 0;padding: 0}label, input {transition: all 0.2s;touch-action: manipulation}input, select{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;cursor: pointer;}img.map, map area{ outline: none!important; }* { outline: none !important; } .map-container:focus, .map-container:active, .marker:focus, .marker:active { outline: none !important; box-shadow: none !important; }.gm-style img { outline: none !important; } .gm-style iframe { outline: none !important; }
dl,ol,ul{margin:0;padding: 0;list-style:none}a:focus, a:active {outline: medium none}p {margin: calc(var(--sa-pixel)* 2 + 1px) 0}
 .app { display: flex; flex-direction: column; height: 100vh; } 
.sa-header { background-color: var(--sa-light); padding: 1rem; display: flex; align-items: flex-start; box-shadow: 0 0px 10px 0 rgb(0 0 0 / 10%);border-bottom: 1px solid #ddd;}.sa-logo {width: 80px;} .sa-brand { height: 40px; } .filters { display: flex; gap: 1rem; }.sa-nav {width: calc(100% - 330px);display: flex;align-items: center;gap: 20px;flex-wrap: wrap;}.sa-nav-info {display: inline-flex;align-items: center; gap: 20px;}
.sa-content {width: 100%;display: flex;height: 100%}.sa-filter-tab {width: 300px;border-right: 1px solid #ddd;height: 100%;background-color: var(--sa-light);padding: 20px;}.sa-map{width: calc(100% - 300px);padding: 10px;position: relative;}.sa-map-view{width: 100%;height: 100%;overflow: hidden;border-radius: 15px;box-shadow: 0 0 10px #00000018;border: 1px solid #FFF;}.sa-sidebar { bottom: 20px; width: 450px; background-color: #FFF;border-radius: 15px;box-shadow: 0 0 10px #10101028; position: absolute; top: 20px; right: 20px;overflow: hidden;z-index: 99; }.sa-sidebar-header{padding: 16px 30px;font-size: 16px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);font-weight: bold;display: flex; align-items: center; justify-content: space-between;flex-wrap: wrap;}.sa-side-scroll {padding: 20px 30px; -webkit-overflow-scrolling: touch; max-height: 100%; box-sizing: border-box;height: 100%;}.sa-apt-det {background-color: #F1F9FF;padding: 10px;border-radius: 8px;display: flex; flex-direction: column; gap:10px}.sa-col {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}.sa-col p {width: 50%;}.sa-col p+p {display: inline-flex;justify-content: flex-end;align-items: center;gap: 3px;}.sa-link,.sa-col strong {color: #000; font-weight: bold;display: inline-block; text-decoration: none;}.sa-col span,.sa-apt-det p span {display: block; color: #000;}.sa-apt-det p,.sa-col p {color: #646464;margin: 0;}.sa-apt-det p strong~span {display: inline-block;}.sa-apt-det .sa-blu-txt {color: #0099FF;}.sa-apt-det p strong {color: #000;}.sa-apt-det .sa-col {margin-bottom: 0;}.sa-nat {display: flex;align-items: center;gap:10px}.sa-btn-trans {background: transparent; height: fit-content; line-height: normal; border: none;margin: 0;padding: 0;}.sa-assign {background-color: #E7FFEF;padding: 10px 16px;color: #0AB445;border-radius: 50px;font-size: 14px;}
.sa-form {display: flex;gap: 10px;flex-wrap: wrap;}.sa-form-group { position: var(--sa-relative); display: var(--sa-d-block);margin-bottom: 20px; }.sa-form-icon { position: var(--sa-absolute); right: 15px; top: 12px; pointer-events: none; cursor: var(--sa-pointer); color: var(--sa-dark);width: 20px;height: 20px;}
.sa-form-control {background: var(--sa-light); height: calc(var(--sa-pixel)* 22); line-height: calc(var(--sa-pixel)* 22); color: var(--sa-dark); border: var(--sa-border-solid) #ccc; padding: 0 35px 0 15px; width: calc(var(--sa-percent)* 50); border-radius: calc(var(--sa-pixel)* 3); -webkit-box-sizing: border-box; box-sizing: border-box;white-space: normal; text-overflow: ellipsis;width: 100%;}.sa-form .sa-form-control {width: 220px;}
.sa-btn{display: var(--sa-d-i-block);font-weight:400;color:#212529;text-align:var(--sa-center);vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--sa-transparent);border: var(--sa-border-solid) var(--sa-transparent);padding:0 15px;line-height:44px;height:44px;border-radius:calc(var(--sa-pixel)*3);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:var(--sa-pointer);transition: background 0.8s}.sa-btn:hover{color:#212529;text-decoration:none;outline: none}.sa-btn.focus,input:focus,select:focus{outline:0}
.sa-btn-primary{color:var(--sa-light);background-color:var(--sa-primary)}.sa-btn-primary:hover{color:var(--sa-light);background:var(--sa-primary-dark)}.sa-btn-primary.disabled,.sa-btn-primary:disabled{color:var(--sa-light);background:#c2c9e1;border-color:#c2c9e1; cursor: not-allowed}.sa-btn-block {width: 100%;display: block;}
.sa-btn-primary-light{color:var(--sa-primary);background-color:var(--sa-primary-light)}.sa-btn-primary-light:hover{color:var(--sa-light);background:var(--sa-primary)}
.sa-auth{width: 250px;display: flex;gap: 10px;align-items: center;justify-content: flex-end;padding-top: 9px;}.sa-auth figure {width: 32px;height: 32px;border-radius: 100%;background-color: var(--sa-disabled);overflow: hidden;margin: 0;}.sa-auth figure img {object-fit: cover;width: 100%;}.sa-logout {color: var(--sa-primary);cursor: pointer;}
.date-picker-container { position: relative; display: flex;gap: 10px;width: 100%; } .date-picker-wrapper { display: inline-block; } .date-picker-popper { z-index: 9999; } .react-datepicker { font-family: Arial, sans-serif; border-radius: 4px; border: 1px solid #ccc;width: 100%;z-index: 99; } .react-datepicker__header { background-color: #f0f0f0; border-bottom: 1px solid #ccc; border-top-left-radius: 4px; border-top-right-radius: 4px; padding-top: 8px; } .react-datepicker__day--selected { background-color: #4285f4; color: white; } .react-datepicker__day:hover { background-color: #e6e6e6; }.sa-nav .sa-form-group {margin-bottom: 0;}.react-datepicker__month-container {width: 100%;}.sa-male {color: #0085FF;}.sa-female {color: #EF008F;}
label {color: #999;font-size: calc(var(--sa-pixel)* 6 + 1px);}.sa-dt-pkr {position: absolute; left: 0; width: 100%; right: 0;}.sa-none {display: var(--sa-none);}.gm-style-iw .gm-style-iw-chr,.gm-style .gm-style-iw-tc {display: none !important;}.gm-style-iw-d {padding: 0 !important;font-weight: bold;overflow:unset!important;text-shadow: 1px 1px 0px rgb(255 255 255 / 100%);}.gm-style .gm-style-iw-c {box-shadow: none!important;background: transparent!important;padding: 0!important;}
/*login styles start here*/
.sa-login-page { background-color: #deeef5; height: 100vh;display: flex;justify-content: center;}
.sa-login {margin: auto;position: relative;display: var(--sa-d-flex); align-items: var(--sa-center);background: var(--sa-light);width: 50%; border-radius: 0.5rem;padding: 50px;gap: 50px;}.sa-login-left,.sa-login-right {width: 50%;}.sa-login-right {text-align: center;}.sa-text-danger {color: var(--sa-danger);}.sa-text-center {text-align: center;}
.sa-exclusive {margin: 40px 0;font-weight: 400;}
.sa-d-block {display: block;}.sa-user-img {margin: 0 auto 20px auto;}.sa-d-f-center {display: flex;align-items: center;}
/*login styles end here*/
/* loader styles start here */
.sa-loader{z-index: 102; position: var(--sa-fixed); top: 0; left: 0; right: 0; bottom: -1px; background: rgba(0, 0, 0, 0.5); margin: auto;display: flex; align-items: center; justify-content: center;}
.sa-loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.sa-loading-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--sa-primary); border-radius: 50%; animation: sa-spin 1s linear infinite; margin-bottom: 15px; }
@keyframes sa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* loader styles end here */
.sa-close-icon {width: 26px;height: 26px;cursor: pointer;}.sa-mb-15 {margin-bottom: 15px;} .sa-filter {display: none;} .sa-login .sa-form-control {width: 100%;}.sa-select-status {position: absolute; left: 0; right: -30px; top: 50px; background-color: var(--sa-light); border: 1px solid #767676;box-shadow:0 3px 4px #0000002b;overflow: auto;z-index: 9;max-height: 300px;overflow: auto;}.sa-select-status li {padding:3px 15px;cursor: pointer;position: relative;display: flex; align-items: center; gap: 10px;}.sa-select-status li:hover {background-color:#1967D2;color: var(--sa-light);}.sa-select-status li.sa-active svg {position: absolute;right: 10px;top: 4px;color: var(--sa-primary);width: 20px;height: 20px;}.sa-status-bg {width: 10px;height: 10px;background: var(--sa-primary-light);border-radius: 2px;}
input::placeholder {color: #000;}.sa-no-apt {display: flex;align-items: center;justify-content: center;height: 100%;font-size: 24px;font-weight: bold;flex-direction: column;}.sa-no-apt img {width: 600px;margin-bottom: 20px;}
/*checkbox styles start here*/
[type="checkbox"]:not(:checked) + label:after,[type="radio"]:not(:checked) + label:after {opacity: 0;transform: scale(0)}[type="checkbox"]:not(:checked), [type="checkbox"]:checked,[type="radio"]:not(:checked), [type="radio"]:checked  {position:var(--sa-absolute);left: -9999px}[type="checkbox"]:checked + label,[type="checkbox"]:not(:checked) + label {display: var(--sa-d-i-block); padding-left: 28px; position:var(--sa-relative); z-index: 1; font-size: calc(var(--sa-pixel)* 7); color: var(--sa-dark);line-height:18px;cursor: var(--sa-pointer)}[type="checkbox"]:disabled:not(:checked) + label:before, [type="checkbox"]:disabled:checked + label:before {box-shadow: none;border-color: var(--sa-info-dark);background-color: var(--sa-light)}[type="checkbox"]:disabled:checked + label:after {color: #999}[type="checkbox"]:disabled + label {color: #4D6F93; cursor: not-allowed}[type="checkbox"]:not(:checked) + label:before,[type="checkbox"]:checked + label:before {content: '';position:var(--sa-absolute);left: 0;top: 0;width: 16px;border: var(--sa-border-solid) #CCCCCC;height: 16px;background: var(--sa-transparent);z-index: 1;border-radius:calc(var(--sa-pixel)* 2)}[type="checkbox"]:checked + label:before {border-color:var(--sa-primary);background-color: var(--sa-primary)}[type="checkbox"]:checked + label:after {z-index: 1;left: 6px;top: 2px;position:var(--sa-absolute);content: '';border: solid var(--sa-light); height: calc(var(--sa-pixel)* 5);width: 4px; border-width: 0 2px 2px 0;transform: rotate(45deg)}[type="checkbox"]:not(:checked) + label:hover:before, [type="checkbox"]:checked + label:hover:before{border:var(--sa-border-solid) var(--sa-primary)}
/*checkbox styles end here*/
.sa-tech-list.sa-tech-infowindow{position: absolute; left: 0; right: 0; top: 44px; z-index: 1000; margin-bottom: 0; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #e2e2e2; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 8px 10px;}
.sa-tech-list {display: flex;flex-direction: column;position: relative; max-height: 300px; overflow: auto;margin-bottom: 20px;background: #fbfbfb;border-radius: 0 0 10px 10px;padding: 10px;}.sa-tech-list li {padding:10px 0;cursor: pointer;position: relative;border-bottom: 1px solid #e2e2e2;}.sa-tech-list li.sa-active{color: var(--sa-primary);}.sa-tech-list li.sa-active svg{stroke: var(--sa-success-dark);}.sa-tech-list li span {width: 90%;display: inline-flex;flex-direction: column;}.sa-tech-list li:last-child{border-bottom: none;}.sa-tech-list li span small {display: block;color: #999;}.sa-tech-list li span small i {color: var(--sa-primary);font-style: normal;font-weight: bold;margin-left: 5px;}
.sa-appoint {background: var(--sa-primary-light); margin: -20px -20px 20px; padding: 20px; font-size: 1.125rem;}.sa-appoint-no {color: var(--sa-primary);}.sa-flex {display: flex;}.sa-align-center {align-items: center;}.sa-gap-5 {gap: 5px;}.sa-appoint-vac {background: var(--sa-success-light);}
.sa-apt-det .sa-select-tech {display: flex;justify-content: space-between;width: 100%;}
.sa-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; } .sa-modal { background: #fff; padding: 24px; border-radius: 8px;width: 500px; max-height: 90dvh; box-shadow: 0 2px 8px rgba(0,0,0,0.2); position: relative;overflow-y: auto;} .sa-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 1.5rem; cursor: pointer; }.sa-modal-buttons { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.sa-primary-text {color: var(--sa-primary);}.sa-btn-sm {padding: 0 10px;line-height: 30px;height: 30px;font-size: 0.875rem;}

.sa-reschedult-btn{display: flex;align-items: center;gap: 10px;flex-wrap: wrap;margin:10px 0;}.sa-reschedult-btn .sa-form-group{width: calc(100%/2 - (1 - 1/2)*10px);margin-bottom: 0;}.sa-w50{width: 50%;}.sa-w100{width: 100%;}
.time-slot-wrapper {margin: 20px 0;} .time-slot-wrapper h3 { font-size: 16px; font-weight: 600; color: #111;font-weight: bold;} .time-slot-list { display: flex;flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0;overflow: hidden;overflow-x: auto;} .time-slot-item { text-align: center; border: 1px solid #0ea5e9; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: #0ea5e9; cursor: pointer; transition: all 0.25s ease; background: #fff; user-select: none;width:calc(100%/5 - (1 - 1/5)*12px);} .time-slot-item:hover { background: #e0f7fa; } .time-slot-item.active { background: #0ea5e9; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.sa-reshedule-submit{text-align: right;}.sa-mb10{margin-bottom:10px;}
.sa-update-btn{display: flex;justify-content: flex-end;align-items: center;gap: 10px;}
.sa-success-container { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .sa-check-tick { background-color: #0CE26A; border-radius: 50%; width: 62px; height: 62px; line-height: 85px; } .sa-check-icon { color: #fff; border-radius: 50%; width: 32px; height: 32px; } .sa-success-message { text-align: center; margin-top: 10px; } .sa-success-message h5 { margin: 0; font-size: 16px; color: #333; }
.sa-success-message span{display: block;}

/* Filter panel card styles (no JSX change; scoped to parent) */
.sa-filter-tab-v2{display: flex;flex-direction: column;gap: 20px;overflow-y: auto;}.sa-filter-tab-v2 .sa-appoint{margin: 0;}.sa-filter-tab .sa-appoint { background: #f8f9fa; padding: 16px; border-radius: 6px; border-left: 4px solid #0099ff; flex-shrink: 0;}.sa-filter-tab .sa-appoint.sa-appoint-vac { border-left-color: #28a745; }
.sa-filter-tab .sa-appoint .sa-appoint-no { color: #222; font-weight: 700; font-size: 1.75rem; line-height: 1; margin-right: 8px; }.sa-filter-tab .sa-appoint.sa-appoint-vac { background: var(--sa-success-light); }.sa-filter-tab .sa-appoint.sa-appoint-vac::before { background: var(--sa-success-dark); }
/* Filter panel section label improvements */
.sa-filter-tab label { display: block; font-weight: 600; color: #444; font-size: 0.9375rem; line-height: 1.2; margin: 10px 0 6px; }
/* Align dropdown chevron when label exists (label + input + icon order) */
.sa-filter-tab .sa-form-group label + .sa-form-control + .sa-form-icon { top: 35px; }.sa-filter-tab .sa-form-icon{top: 35px;}
/* Position dropdown panel below input when label is present */
.sa-filter-tab .sa-form-group label + .sa-form-control ~ .sa-tech-infowindow { top: calc(100% + 6px); }
.sa-error-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.sa-error-message { color: var(--sa-danger); font-size: 14px; margin-bottom: 15px; }
.sa-no-results { text-align: center; padding: 20px; color: #999; font-style: italic; }.sa-update-success{display: flex ; align-items: center; justify-content: center; margin-bottom: 20px; font-weight: 600;}.sa-form-group.sa-price-details{margin-bottom: 0;}
/*Toast Message styles start here*/
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; pointer-events: none; } /* Toast style */ .custom-toast { background-color: #4BB543; color: white; padding: 16px 24px; margin-top: 10px; border-radius: 6px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); opacity: 0; transform: translateY(-20px); animation: fadeInUp 0.5s forwards, fadeOut 0.5s forwards 2.5s; font-family: "Open Sans", system-ui; font-size: 14px; font-weight: 500; min-width: 300px; pointer-events: auto; position: relative; } .custom-toast.error { background-color: #DD282B; } .custom-toast.success { background-color: #4BB543; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { to { opacity: 0; transform: translateY(-20px); } }
.sa-pt-group {border-radius: 8px; background-color: #FFF; padding: 10px;margin-bottom: 5px;}.sa-pt-group p {margin: 0;}
/*Toggle Switch styles start here*/
.sa-toggle-wrapper { display: flex; align-items: center; gap: 10px;background-color: #eefdf0;padding: 0 15px;border-radius: 6px;height: 44px;line-height: 44px;cursor: pointer;}.sa-toggle-label { font-size: 14px; font-weight: 500; color: #333; }.sa-toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; cursor: pointer; }
.sa-toggle-switch input { opacity: 0; width: 0; height: 0; }.sa-toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 24px; transition: background-color 0.3s; cursor: pointer; }
.sa-toggle-slider-circle { position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: left 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }.sa-toggle-switch input:checked + .sa-toggle-slider { background-color: #4caf50; }.sa-toggle-switch input:checked + .sa-toggle-slider .sa-toggle-slider-circle { left: 28px; }
/*Toggle Switch styles end here*/
.sa-nav-toggle{display: flex;align-items: center;gap: 10px;}

.sa-p20{padding: 20px;}

/* Details Modal scoped theme */
.sa-details-modal{ width: 450px;max-height:max-content; border-radius: 16px; background: #ffffff; padding: 0; overflow: hidden; display:flex; flex-direction:column; } .sa-details-modal .sa-side-scroll{ padding:20px; flex:1; overflow:auto; scrollbar-width: thin; scrollbar-color: #c7d7e6 transparent;margin-top: -20px;}  .sa-details-modal .sa-close{ top: 8px; right: 8px; left: auto; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; border: 1px solid #e3e7ee; background: #fff; display: flex; align-items: center; justify-content: center; } .sa-details-modal .sa-close-icon{ color: #111; width: 20px; height: 20px; } .sa-details-modal p label{ display: block; font-size: 12px; margin-bottom: -2px; color: #646464;} .sa-details-modal a{ color: #0ea5e9; text-decoration: none; } .sa-details-modal a:hover{ text-decoration: underline; } .sa-details-modal .sa-btn.sa-btn-primary{ display:block; width:100%;margin-top: 20px;font-weight: 500;} .sa-details-modal .sa-btn.sa-btn-primary-light{ display:block; width:100%; height:46px; line-height:46px; border-radius:10px; background:#ff5c5c; color:#fff; border-color:#ff5c5c; } .sa-details-modal .sa-btn.sa-btn-primary-light:hover{ background:#ef4444; } /* Scrollbar aesthetics */ .sa-details-modal .sa-side-scroll::-webkit-scrollbar{ width: 8px; } .sa-details-modal .sa-side-scroll::-webkit-scrollbar-track{ background: transparent; } .sa-details-modal .sa-side-scroll::-webkit-scrollbar-thumb{ background: #c7d7e6; border-radius: 8px; } .sa-details-modal .sa-pt-group{ background: transparent; border: 0; box-shadow: none;border-radius:10px;margin: 0;} .sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(1) p strong{ display:none; }
 .sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(1) p{ margin: 0 0 2px 0; font-size:16px; font-weight:700; color:#0f172a; } .sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(2) p strong{ display:none; } .sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(2) p{ margin: 0 0 10px 0; color:#64748b; } .sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(2){ padding-bottom:12px; border-bottom:1px solid #eceff3; margin-bottom:12px; } .sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(3) p{ display:flex; align-items:center; justify-content:space-between;} .sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(3) p strong{ text-transform: uppercase; letter-spacing:.02em; color:#0f172a; } .sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(3) .sa-primary-text{ background:#eaf5ff; color:#0a84d6; border:1px solid #d6eafd; padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; }
.sa-details-modal .sa-side-scroll > .sa-pt-group:nth-of-type(3) .sa-appt-pill{ white-space: nowrap; }.sa-pt-group.sa-info-item label{color: #646464;}
/* New helpers for DetailsModal */
.sa-details-modal .sa-info-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0; } .sa-details-modal .sa-info-item{ margin: 0; padding: 0;color: #000;font-weight: 500;} .sa-details-modal .sa-appt-pill{ background:#E3F2FD; color:#0099FF;padding:6px 12px; border-radius:50px; font-weight:500; font-size:14px; } .sa-details-modal .sa-text-muted{ color:#94a3b8; } .sa-doctor-tech{display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #E7E7E7;padding: 5px 0 20px;}.sa-d-block{display: block;}.sa-fw600{font-weight: 600;}.sa-fw400{font-weight: 400;}
.sa-d-flex{display: flex;}
/* Status/State badges */
.sa-badge-success{ background:#e8f7ee; color:#16a34a; border:1px solid #b7e4cc; padding:4px 10px; border-radius:999px; font-weight:600; font-size:12px; display:inline-block; }
/* Section and card visuals for details */
.sa-section{ background:#f1f8ff; border:1px solid #e3f0ff; padding:12px; border-radius:10px; margin:12px 0; }
.sa-card{ background:#fff; border:1px solid #e9eef5; border-radius:10px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; }
.sa-head-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.sa-head-row .sa-id{ font-weight:700; color:#0f172a; }
.sa-head-row .sa-patients-pill{ background:#eaf5ff; color:#0a84d6; border:1px solid #d6eafd; padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; }
.sa-kv{ margin:6px 0; }
.sa-kv label{ display:block; font-size:12px; color:#64748b; margin-bottom:-2px; }
.sa-cta{ margin-top:12px; }
/* Layout helper */
.sa-justify-between{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
/* Nationality flag pill */
.sa-flag-pill{ background:#e7f7ef; color:#059669; border:1px solid #c6f0dc; padding:4px 8px; border-radius:6px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
/* Calculating view (distance mode) */
.sa-details-modal h4{ position: sticky; top: 0; z-index: 2;padding: 20px 30px; background:#fff; display:flex; align-items:center; justify-content:space-between;box-shadow:0px 2px 12px 0px #00000014;font-weight: 800;}
.sa-details-modal .sa-calc{ text-align: left; }.sa-details-modal .sa-calc-from{ display:flex; gap:10px; align-items:flex-start}.sa-details-modal .sa-calc-label{ color:#646464;font-weight: 500; }.sa-details-modal .sa-calc-identity{ display:flex; flex-direction:column; gap:2px; }
.sa-details-modal .sa-calc-name{ font-weight:700; color:#0f172a; }.sa-details-modal .sa-calc-role{ color:#64748b; font-size: 13px; } .sa-details-modal .sa-calc-divider{ height:1px; background:#eceff3; margin:20px 0; }
.sa-details-modal .sa-calc-marker{ display:flex; align-items:center; gap:10px; color:#6b7280;margin-top: 20px;}.sa-details-modal .sa-calc-marker-icon{ color:#0ea5e9; font-size: 16px; line-height: 1; }.sa-calc-marker-text { color: #646464; }.sa-calc-marker-icon{width: 18px; height: 25px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;}
.sa-details-modal .sa-calc-instruction{ color:#1B76D3;border:0; background:transparent; margin-top: 10px;font-weight: 500;}.sa-sidebarV2 a{ color:#0099FF; text-decoration: none; }.sa-sidebarV2 a:hover{ text-decoration: underline; }
/* Make inline labels (e.g., in "User Location:") consistently muted */
.sa-sidebarV2 p > strong{ color:#94a3b8; }
/* MarkerLabel InfoWindow (scoped, non-invasive) */
.sa-marker-iw { max-width: 340px;background-color: #fff; padding:15px; border-radius: 12px 12px 0 0; box-shadow:0px 4px 5px 0px #0000003D; min-width: 180px; overflow-y: auto; max-height: 300px; }.sa-marker-iw::-webkit-scrollbar{ width: 6px; }.sa-marker-iw::-webkit-scrollbar-thumb{ background:#d7e6f4; border-radius: 6px; }.sa-marker-iw img{cursor: pointer; position: absolute; right: 15px; top: 15px; width: 15px;}.sa-iw-apt {border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 15px;}.sa-iw-apt:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: none;}.sa-iw-header{display: flex; gap: 8px;align-items: flex-start ;flex-direction: column; font-weight: 700; color: #0f172a; margin-bottom: 10px; padding-right: 24px;padding-left: 24px;}.sa-iw-title::before {content: ''; width: 15px; height: 15px; border-radius: 50%; background: #E5F3FF; flex-shrink: 0; position: absolute;left: -24px;top: 0; display: inline-block;border: 1px solid #0385FF;} .sa-iw-title::after { content: ''; position: absolute; top: 5.5px; left: -18.5px; width: 6px; height: 6px; border-radius: 50%; background: #0054A2; }.sa-iw-title{font-weight: 600; color: #1B76D3; font-size: 12px;position: relative;}.sa-iw-sub{color:#48DA7B;font-weight: 500;display: flex;gap:5px;margin-bottom: 5px;}.sa-iw-time{color: #646464;}.sa-iw-id-text{cursor: pointer;}.sa-iw-metrics{display: flex ; justify-content: space-between; gap: 10px; background:#E5F3FF;border-radius: 8px; padding: 20px 20px; margin: 15px 0;color: "#0f172a";font-size: 18px;}.sa-iw-pt {color: #94a3b8; font-size: 12px; margin: 10px 0 8px}.sa-iw-pt-name {font-size: 13px;color: #0f172a;font-weight: 600;margin: 0 0 8px 0}.sa-iw-gender {font-weight: 400;margin-left: 5px}.sa-iw-service a{text-decoration: unset;color: #0099FF;}.sa-iw-service{margin-bottom: 8px;font-size: 12px;color: #0099FF;}.sa-practitioner-iw img { position: absolute; right: 12px; top: 17px;cursor: pointer;}

/*Responsive*/
@media (max-width: 640px){
    .sa-details-modal .sa-info-grid{ grid-template-columns: 1fr; }
}
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px){
}

@media only screen and (min-width: 1601px) and (max-device-width: 1660px){
    .sa-form .sa-form-control {width: 206px;}.sa-login {width: 60%;}
}
@media only screen and (min-width: 1441px) and (max-device-width: 1600px){
    .sa-header {flex-wrap: wrap;}.sidebar {top: 130px;}.sa-form .sa-form-control {width: 230px;}
}
@media only screen and (min-width: 1280px) and (max-device-width: 1440px){
    .sa-form .sa-form-control {width: 200px;}   
}
@media only screen and (min-width: 1153px) and (max-device-width: 1279px){
    .sa-form .sa-form-control {width: 250px;}.sa-no-apt{font-size: 20px;}.sa-no-apt img {width: 400px;}
}
@media only screen and (min-width: 769px) and (max-width: 1152px)  {
    .sa-form .sa-form-control {width: 212px;}.sa-no-apt{font-size: 18px;}.sa-no-apt img {width: 300px;}
}
@media only screen and (max-width: 1280px){.sa-login {width: 90%;}}
@media only screen and (max-width: 1279px){.sidebar {top: 190px;}}
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px){
    .sa-header,.sa-nav {flex-direction: column;}
    .sa-logo,.sa-nav,.sa-form-control,.sa-login-left, .sa-login-right,.sa-form .sa-form-control,.sa-map {width: 100%;}.sa-nav,.sa-auth {display: none;margin-top: 15px;}.sa-nav.active,.sa-auth.active{display: flex;width: 100%;}.sa-login {flex-wrap: wrap;height: auto;gap: 0;padding: 20px;width: 90%;}.sa-exclusive {text-align: center;}.sidebar {top: 74px;}.sa-no-apt{font-size: 18px;}.sa-no-apt img {width: 300px;}
    .sa-form {width: 100%;flex-direction: column;}  .sa-filter {display: block;position: absolute; right: 15px; top: 15px; border-radius: 6px; padding: 6px 20px; background: var(--sa-primary); color: #FFF;}.sa-mob-none {display: none;}
    .sa-filter-tab {width: 100%;height: auto;border-right: none;border-bottom: 1px solid #ddd;}.sa-content {flex-direction: column;}.sa-map{height: 100%;}.sa-sidebar {left: 40px;width: auto;right: 20px;}
}