@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

:root {
    --color-primary:#004aad;/*#7380ec;*/
    --color-danger:#ff1a1a; /*#ff7782;*/
    --color-success:#00e600; /*#41f1b6;*/
    --color-warning:#ff8e55;
    --color-white:#fff;
    --color-info-dark:#7d8da1;
    --color-info-light:#dce1eb;
    --color-dark:#363949;
    --color-light:rgba(132,139,200,0.18);
    --color-primary-variant:#111e88;
    --color-dark-variant:#677483;
    --color-background:#f0f0f5/*#f6f6f9*/;
    --color-background-inverse:#181a1e;
    --color-nav-l1:#e2e3f0;
    --color-nav-l2:#bacade;
    --logo-filter:brightness(50%);
    --border-radius-1:0.4rem;
    --border-radius-2:0.8rem;
    --border-radius-3:1.2rem;
    --card-border-radius:2rem;
    --card-padding:1.8rem;
    --padding-1:1.2rem;
    --padding-2:1.5rem;
    --padding-3:1rem;
    --box-shadow:0 1rem 1.5rem var(--color-light);
    --btn-shadow:0.3rem 0.6rem 0.6rem var(--color-light);
    --flt-shadow:0.7rem 1rem 1.6rem var(--color-background-inverse);
    --color-cb-white:#fefefe;
    --color-cb-blue1:#1f80c4;
    --color-cb-blue2:#3555cd;
    --color-cb-blue3:#004aad;
    --color-cb-black:#000000;
    --color-cb-blue:#004aad;
}

.dark-theme-variables{
    --color-warning:#ffbb55;
    --color-background:#181a1e;
    --color-background-inverse:#f6f6f9;
    --color-white:#202528;
    --color-dark:#edeffd;
    --color-dark-variant:#a3bdcc;
    --color-light:rgba(0,0,0,0.4);
    --color-nav-l1:#111922;
    --color-nav-l2:#000000;
    --logo-filter:brightness(250%);
    --box-shadow:0 1rem 1.5rem var(--color-light);
    --btn-shadow:0.3rem 0.6rem 0.6rem var(--color-light);
    --color-cb-blue:#1f80c4;
}

* {margin:0;padding:0;outline:0;border:0;appearance:none;text-decoration:none;list-style:none;box-sizing:border-box;}
html {overflow:hidden;overscroll-behavior:none;font-size:16px !important;}
body{width:100vw;height:100vh;font-family:Montserrat,sans-serif;font-size:100%;background:var(--color-background);overflow-x:hidden;color:var(--color-dark);}

#watermark-main {position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;display:flex;justify-content:center;align-items:center;height:-webkit-fill-available;}
#watermark-main img {width:100%;max-width:100vw;height:auto;opacity:0.4;}
/*#watermark-nav {position:fixed;bottom:8;left:4;width:100%;max-width:10rem;height:auto;z-index:-1}*/
img#watermark-nav {position:fixed;bottom:8px;left:4px;width:100%;max-width:10rem;opacity:0.4;z-index:-1}

header {width:100vw;position:fixed;top:0;left:0;height:3.6rem;background-color:var(--color-white);vertical-align:middle;display:flex;z-index:9;padding:1rem 2rem;-webkit-user-select:none/* Safari */;-ms-user-select:none/* IE 10 and IE 11 */;user-select:none/* Standard syntax */;}
header .left {text-align:left;cursor:pointer;flex-basis:10rem;}
header .left .logo {display:flex;gap:0.8rem;}
header .left .logo img {width:2rem;height:2rem;filter:var(--logo-filter);}
header .left .logonofilter {display:flex;gap:0.8rem;}
header .left .logonofilter img {width:2rem;height:2rem;}
header .headinfo {text-align:left;flex:1;cursor:pointer;}
header .right {display:flex;justify-content:flex-end;justify-content:space-between;width:22rem}
header .right .theme-toggler {background:var(--color-light);display:flex;justify-content:space-between;align-items:center;height:1.6rem;width:4.2rem;cursor:pointer;border-radius:var(--border-radius-1);}
header .right .theme-toggler span {font-size:1.2rem;width:50%;height:100%;display:flex;align-items:center;justify-content:center;padding-top:1px;}
header .right .theme-toggler span.active {background:var(--color-primary);color:white;border-radius:var(--border-radius-1);}
header .right .profile {display:flex;cursor:pointer;}

header #headchse {position:fixed;top:4rem;left:15rem;background-color:var(--color-white);padding:var(--card-padding);box-shadow:var(--flt-shadow);border-radius:var(--border-radius-3);transition:all 300ms ease;}
header #headchse p {cursor:pointer;padding:0.3rem;font-size:1rem;}
header #headchse p:hover {color:var(--color-cb-blue);}
header #headchse p.active {color:var(--color-dark);font-weight:600;}

nav {width:14rem;position:fixed;top:3.6rem;left:0;height:calc(100vh - 3.6rem);display:flex;flex-direction:column;padding-top:1rem;height:-webkit-fill-available;}
/*nav {background-image:url("/assets/img/logo-bestcareline-400.png");background-repeat:no-repeat;background-attachment:fixed;background-position:bottom left;background-size:14em;}*/
nav h3 {font-weight:500; font-size:1rem;}
nav h4 {font-weight:400;}
nav ul {list-style:none;}
nav ul li {display:flex;color:var(--color-info-dark);margin-left:2rem;gap:1rem;align-items:center;position:relative;height:2.5rem;transition:all 300ms ease;}
nav ul li span{font-size:1.6rem;transition:all 250ms ease}
nav ul li.logOut{/*position:absolute;bottom:2rem;width:100%;*/margin-top:2rem;}
nav ul li.active{background:var(--color-light);color:var(--color-primary);margin-left:0;}
nav ul li.active:before{content:"";width:6px;height:100%;background:var(--color-primary);}
nav ul li.active span{color:var(--color-primary);margin-left:calc(1rem - 3px);}
nav ul li.active.l1{background:var(--color-nav-l1);}
nav ul li.active.l2{background:var(--color-nav-l2);}
nav ul li:hover {color:var(--color-primary);cursor:pointer;}
nav ul li:hover span{margin-left:1rem;}
nav ul li:hover .hovermenu {display:block;transition:all 300ms ease;}
nav .message-count{background:var(--color-danger);color:var(--color-white);padding:2px 10px;font-size:11px;border-radius:var(--border-radius-1);}

#pageselect {text-align:center;display:flex;margin:1rem auto;justify-content:space-around;}
#pageselect .pagesel {display:inline-flex;align-items:center;gap:0.3rem;color:var(--color-primary);cursor:pointer;}
#pageselect .pagesel:hover {color:var(--color-primary-variant);transition:all 300ms ease;}
#pageselect .pagesel .material-symbols-sharp {font-size:1em;font-weight:600;position:relative;top:1px;}

section {width:calc(100% - 14rem);display:flex;flex-direction:row-reverse;align-items:stretch;margin:0;padding-top:3.6rem;padding-bottom:3rem;margin-left:14rem;height:-webkit-fill-available;}
/*section #watermark {position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;display:flex;justify-content:center;align-items:center;height:-webkit-fill-available;}*/
/*section {background-image:url("/assets/img/logo-icomply-1298.png");background-repeat:no-repeat;background-attachment:fixed;background-position:center;background-size:auto;}*/
section aside {flex-basis:14rem;position:relative;padding-top:1rem;text-align:center;/*border-left:1px dashed var(--color-white);*/margin-right:1rem;}
section aside div#stay {position:sticky;top:74px;}
/*section aside #stay {position:sticky;top:74;}*/
/*aside div#stay {position:sticky;top:74;}*/

section .item {background:var(--color-white);display:flex;flex-direction:column;align-items:center;gap:0.5rem;margin-bottom:0.7rem;padding:1.4rem var(--card-padding);border-radius:var(--border-radius-3);box-shadow:var(--box-shadow);transition:all 300ms ease;}
section .item:hover {box-shadow:none;}
section .item .right {display:flex;justify-content:space-between;align-items:start;margin:0;width:100%;}

section article {width:100%;padding-top:1rem;text-align:center;}
.navi {display:flex;justify-content:center;flex-wrap:wrap;}
.navi > div {background:var(--color-white);padding:var(--card-padding);border-radius:var(--card-border-radius);margin:1rem 1rem;box-shadow:var(--box-shadow);transition:all 300ms ease;cursor:pointer;}
.navi > div:hover{box-shadow:none;}
.navi > div.active {background:var(--color-light);box-shadow:none;transition:all 300ms ease;cursor:pointer;}
.navi > div span {padding:0.5rem;border-radius:50%;font-size:2rem;margin-right:1rem;}
.navi > div .middle {display:flex;align-items:center;justify-content:space-between;}

section .block {margin:2rem 1rem 1rem;}
section .block a {text-align:center;display:block;margin:1rem auto;color:var(--color-primary);cursor:pointer;}
section .block h2 {margin-bottom:0.8rem;}
section .block table {background:var(--color-white);width:100%;border-radius:var(--card-border-radius);padding:var(--card-padding);text-align:left;box-shadow:var(--box-shadow);transition:all 300ms ease;}
section .block table:hover {box-shadow:none;}
section table thead th {height:2.8rem;border:0;color:var(--color-dark-variant);text-align:left;-webkit-user-select:none/* Safari */;-ms-user-select:none/* IE 10 and IE 11 */;user-select:none/* Standard syntax */;}
section table tbody th {height:2.8rem;border:0;color:var(--color-dark-variant);text-align:left;-webkit-user-select:none/* Safari */;-ms-user-select:none/* IE 10 and IE 11 */;user-select:none/* Standard syntax */;}
section table tbody td {height:2.8rem;color:var(--color-dark-variant);}
section table tbody tr:last-child td {border:none;}

table.list tbody td {border-bottom:1px solid var(--color-light);}

/* doctors page */
#doctorsPage header .wrapper {max-width:500px;width:100%;margin:0 auto;display:flex;justify-content:space-between;}
#doctorsPage header .wrapper .left .logo {display:flex;gap:0.8rem;}
#doctorsPage header .wrapper .right {display:flex;justify-content:flex-end;width:5rem}

#article {max-width:500px;width:100%;padding-top:3.6rem;padding-bottom:3rem;text-align:center;margin:0 auto;-webkit-user-select:none/* Safari */;-ms-user-select:none/* IE 10 and IE 11 */;user-select:none/* Standard syntax */;}
#article .profile .info {display:block;cursor:pointer;width:fit-content;margin:auto;}
#article #display {width:100%;padding-top:1rem;text-align:center;}
#article #display table {background:var(--color-white);width:calc(100% - 2rem);border-radius:var(--card-border-radius);padding:var(--card-padding);text-align:center;box-shadow:var(--box-shadow);margin:0 auto;transition:all 300ms ease;}
#article #display table:hover {box-shadow:none;}
#article #display table tbody th {border:0;color:var(--color-dark-variant);text-align:left;}
#article #display table tbody td {color:var(--color-dark-variant);}
#article #display table tbody tr:last-child td {border:none;}
#article #footer {width:100%;margin:5rem auto 1rem;}
#article #footer .logOut {display:block;cursor:pointer;width:fit-content;margin:auto;}

footer {/*width:100vw;height:4rem;position:sticky;bottom:0;left:0;cursor:pointer;*/display:none;margin-bottom:64px}

/* random singles */
.selectable {cursor:pointer;}
.notselect {-webkit-user-select:none/* Safari */;-ms-user-select:none/* IE 10 and IE 11 */;user-select:none/* Standard syntax */;}
.trselect:hover {background:var(--color-info-light);cursor:pointer;}
.trhlight:hover {background:var(--color-info-light);}
.required {color:var(--color-danger);}
.nodisplay {display:none;}
.nomargin {margin:0;}
.margin0a {margin:0 auto;}
.margin-tb {margin:0.5rem 0;}
.padding-8px {padding:8px;}

/* backgrounf colors */
.bg-primary{background:var(--color-primary);}
.bg-success{background:var(--color-success);}
.bg-warning{background:var(--color-warning);}
.bg-danger{background:var(--color-danger);}
.bg-col-wht{background-color:#ffffff;}
.bg-col-blk{background-color:#000000;}
.bg-col-org{background-color:#ff6600;}
.bg-col-ylw{background-color:#ffff00;}
.bg-col-blu{background-color:#0000ff;}
.bg-col-grn{background-color:#008000;}
.bg-col-red{background-color:#ff0000;}
.bg-col-prp{background-color:#800080;}
.bg-col-gry{background-color:#808080;}
.bg-col-slv{background-color:#c0c0c0;}
.bg-col-brn{background-color:#a52a2a;}
.bg-col-pnk{background-color:#ffc0cb;}
.bg-col-cyn{background-color:#00ffff;}
.bg-col-mgn{background-color:#ff00ff;}
.bg-col-lbl{background-color:#add8e6;}
.bg-col-lgr{background-color:#90ee90;}
.bg-col-lrd{background-color:#ff4500;}

.fnt-col-blk{color:#000000;}


/* text colors */
a{color:var(--color-dark);}
b{color:var(--color-dark);}
p{color:var(--color-dark-variant);}
.txt-primary{color:var(--color-primary)}
.txt-danger{color:var(--color-danger)}
.txt-success{color:var(--color-success)}
.txt-warning{color:var(--color-warning)}
.txt-muted {color:var(--color-info-dark)}
.txt-wht{color:var(--color-white);}
.cb-blue{color:var(--color-cb-blue)}

/* text sizes */
h1{font-weight:800;font-size:1.8rem;}
h2{font-size:1.4rem;}
h3{font-size:1.2rem;}
h4{font-size:0.8rem;}
h5{font-size:0.77rem;}
small{font-size:0.75rem;}

/* text styles */
.text-cancel {text-decoration: line-through;}
.txt-bold {font-weight:600;}
.txt-heavy {font-weight:800;}
.txt-upc {text-transform:uppercase;}
.txt-lwc {text-transform:lowercase;}

/* borders */
.border-none {border:none}
.border-bottom {border-bottom:1px solid var(--color-light);}
.border-solid-danger {border:1px solid var(--color-danger)}
.border-solid-success {border:1px solid var(--color-success)}
.border-solid-info {border:3px solid var(--color-info-dark)}
.border-dashed-primary {border:2px dashed var(--color-primary)}
.border-card-noshadow {border:1px solid var(--color-dark-variant);border-radius:var(--border-radius-2);margin:0.5rem;}

/* alignment */
.txt-lhs {text-align:left;}
.txt-rhs {text-align:right;}
.txt-ctr {text-align:center;}

/* icons */
.material-symbols-sharp {font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}
.fs12 {font-size:12px;}
.fs14 {font-size:14px;}
.fs20 {font-size:20px;}
.fs24 {font-size:24px;}
.fs32 {font-size:32px;}
.fs40 {font-size:40px;}

/* spaces */
.h64 {height:64px}
.h32 {height:32px}
.h16 {height:16px;}
.h8  {height:8px;}
.h1em {height:1rem;}
.trhi {height:2.8rem;}
.trmd {height:2.1rem;}
.trml {height:1.8rem;}
.trlo {height:1.4rem;}
.trsp {height:0.5rem;}

.h100p {height:100%;}
.h80p {height:80%;}

.w100p {width:100%}
.w80p {width:80%;}
.w60p {width:60%;}
.w40p {width:40%;}
.w30p {width:30%;}
.w20p {width:20%;}

/* inputs */
input.input {background:var(--color-light);border-radius:var(--border-radius-1);padding:0.5rem;color:var(--color-dark);}
input.field {width:calc(100% - 2rem);background:var(--color-light);border-radius:var(--border-radius-1);padding:0.5rem;color:var(--color-dark);margin:0.5rem 1rem;}
select.field {width:calc(100% - 2rem);background:var(--color-light);border-radius:var(--border-radius-1);padding:0.5rem;color:var(--color-dark);margin:0.5rem 1rem;}
textarea.field {width:calc(100% - 2rem);background:var(--color-light);border-radius:var(--border-radius-1);padding:0.5rem;color:var(--color-dark);margin:0.5rem 1rem;resize:none;height:60px;}

input.form {background:var(--color-light);border-radius:var(--border-radius-1);color:var(--color-dark);padding:0.5rem;margin:0.5rem 1rem;}

/* buttons */
.btn25p {width:25%;display:inline-block}
.btn40p {width:40%;display:inline-block}

.btnRed {cursor:pointer;background-color:var(--color-background);color:var(--color-danger);padding:0.8rem 1.6rem;border:1px dashed var(--color-danger);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;margin:0 16px;}
.btnRed:hover {background-color:var(--color-background);color:var(--color-danger);border:1px solid var(--color-danger);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;}
.btnRed:active, .btnRed.active {background-color:var(--color-light);color:var(--color-danger);border:1px solid var(--color-danger);border-radius:var(--border-radius-1);box-shadow:none;transition:all 300ms ease;}

.btnGrn {cursor:pointer;background-color:var(--color-background);color:var(--color-success);padding:0.8rem 1.6rem;border:1px dashed var(--color-success);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;margin:0 16px;}
.btnGrn:hover {background-color:var(--color-background);color:var(--color-success);border:2px solid var(--color-success);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;}
.btnGrn:active, .btnGrn.active {background-color:var(--color-light);color:var(--color-success);border:2px solid var(--color-success);border-radius:var(--border-radius-1);box-shadow:none;transition:all 300ms ease;}

.btnBlu {cursor:pointer;background-color:var(--color-background);color:var(--color-cb-blue);padding:0.8rem 1.6rem;border:1px dashed var(--color-cb-blue);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;margin:0 16px;}
.btnBlu:hover {background-color:var(--color-background);color:var(--color-cb-blue);border:2px solid var(--color-cb-blue);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;}
.btnBlu:active, .btnBlu.active {background-color:var(--color-light);color:var(--color-cb-blue);border:2px solid var(--color-cb-blue);border-radius:var(--border-radius-1);box-shadow:none;transition:all 300ms ease;}

.btnDrk {cursor:pointer;background-color:var(--color-background);color:var(--color-dark-variant);text-align:center;padding:0.8rem 0.8rem;border:1px dashed var(--color-dark-variant);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;margin:0.5rem 1rem;}
.btnDrk:hover {border:1px solid var(--color-dark-variant);}
.btnDrk:active, .btnDrk.active {background-color:var(--color-light);border:1px solid var(--color-dark-variant);box-shadow:none;}

.btnPri {cursor:pointer;background-color:var(--color-background);color:var(--color-primary);padding:0.8rem 1.6rem;border:1px dashed var(--color-primary);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;margin:0.5rem 1rem;}
.btnPri:hover {background-color:var(--color-primary);color:var(--color-background);border:1px solid var(--color-background);box-shadow:var(--btn-shadow);}
.btnPri:active, .btnPri.active {background-color:var(--color-light);color:var(--color-primary);border:1px solid var(--color-primary);box-shadow:none;}

.btnPriC {cursor:pointer;background-color:var(--color-background);color:var(--color-primary);padding:0.8rem 1.6rem;border:1px dashed var(--color-primary);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;margin:0.5rem auto;}
.btnPriC:hover {background-color:var(--color-primary);color:var(--color-background);border:1px solid var(--color-background);box-shadow:var(--btn-shadow);}
.btnPriC:active, .btnPriC.active {background-color:var(--color-light);color:var(--color-primary);border:1px solid var(--color-primary);box-shadow:none;}


/* file upload */
.upload-area {border:2px dashed var(--color-dark-variant);border-radius:var(--border-radius-1);padding:24px;margin:auto;text-align:center;cursor:pointer;height:4rem;transition:all 300ms ease;}
.upload-area.dragover {background-color:var(--color-info-light);transition:all 300ms ease;}
/*.preview-container {display:flex;flex-wrap: wrap; gap: 10px; margin:1rem auto 0;}*/
.preview-container {display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:1rem;margin-top:1rem;}
/*.preview-item {position: relative; width: 150px;}*/
.preview-item {display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid #ccc;border-radius:6px;padding:8px;}
/*.preview-item img {width:100%;border-radius:5px;}*/
.preview-item img {border-radius:4px;border:1px solid #ddd;width:100%;max-width:300px;height:200px;object-fit:cover;}
.preview-desc {width:100%;max-width:300px;background:var(--color-light);border-radius:var(--border-radius-1);padding:0.5rem 1rem;color:var(--color-dark);}
.preview-dele {background-color:var(--color-background);color:var(--color-danger);padding:0.2rem 1rem;border:2px dashed var(--color-danger);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;margin:0.5rem;}
.preview-dele:hover {background-color:var(--color-background);color:var(--color-danger);border:2px solid var(--color-danger);border-radius:var(--border-radius-1);box-shadow:var(--btn-shadow);transition:all 300ms ease;}
.preview-dele:active, .preview-dele.active {background-color:var(--color-light);color:var(--color-danger);border:2px solid var(--color-danger);border-radius:var(--border-radius-1);box-shadow:none;transition:all 300ms ease;}


/* loader */
.loader {
    margin: auto;
    border: 8px solid var(--color-background); /* Light grey */
    border-top: 8px solid var(--color-primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spins 1.5s linear infinite;
    z-index:99999;
}
@keyframes spins {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@media screen and (max-width: 1280px){
    nav {width:5.6rem}
    nav ul li h3{display:none;}
    nav ul li:hover h3{display:block;position:absolute;left:100%;top:0;background:var(--color-white);padding:0.5rem 1rem;border-radius:var(--border-radius-1);box-shadow:var(--box-shadow);white-space:nowrap;z-index:10;}
    section {width:calc(100% - 5.6rem);margin-left:5.6rem;}
    /*section {flex-direction:column;align-items:center;}*/
    /*section aside {flex-basis:auto;right:auto;width:100%;text-align:center;}*/
}

@media screen and (max-width: 768px){
    header .left .logo h2 {display:none;}
    /*nav ul li h3{display:none;}*/
    /*nav {width:5.6rem}*/
    /*section {width:calc(100% - 5.6rem);margin-left:5.6rem;}*/
    section {flex-direction:column;align-items:center;}
    section aside {flex-basis:auto;right:auto;width:100%;text-align:center;}
}

@media screen and (max-width: 600px){
    /*img#watermark-nav { display:none;}*/
    header .right .profile {display:none;}
    header .right {display:flex;flex:1;justify-content:flex-end;}
    nav {display:none;}
    section {width:100vw;margin-left:0;}
    section aside {margin-right:0;}
    footer {display:block;width:100vw;text-align:center;padding:16px;cursor:pointer;}
}