*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background-color:#e3edf9;color:#333;font-family:Poppins,sans-serif;overflow-x:hidden}#app-container{display:flex;height:calc(100vh - 2rem);max-height:100vh;background-color:#fff;overflow:hidden;border-radius:2rem;margin:1rem;padding:.5rem;box-sizing:border-box;box-shadow:0 0 5px #413f3f31}.sidebar-container,#sidebar{flex-basis:20%;flex-shrink:0;background-color:#fff;overflow-y:auto}.dashboard-main-container{flex-basis:80%;flex-grow:1;display:flex;flex-direction:column;overflow:hidden}@media (max-width: 600px){#app-container{flex-direction:column}.sidebar-container{width:100%;flex-basis:auto;flex-shrink:0;overflow-y:auto}.dashboard-main-container{flex:1;overflow:auto}}#sidebar{background-color:#f6faff;border-radius:2rem 0 0 2rem;height:100%;padding:1rem;display:flex;align-items:center;flex-direction:column;overflow:hidden}.logo{color:#28d7e5}.logo span{color:#3a34a3}.nav-section{margin-top:2rem;display:flex;flex-direction:column;width:100%;height:100%;padding-left:4rem}.nav-section ul li{list-style:none;font-size:20px;margin-top:.5rem}.nav-section ul li a{text-decoration:none;font-size:1.2rem;color:red;display:flex;align-items:center;gap:15px;color:#b0b2b6;padding:5px 0}.nav-link:hover{color:#3a34a3}.nav-link.active{color:#3a34a3;background-color:transparent}.section-title{font-size:1rem!important;color:#d4d6d9;flex:flex 1;font-weight:500}#settings{margin-top:2rem;display:flex;justify-content:flex-end}.menu-open,.menu-close{display:none}@media (min-width: 601px) and (max-width: 1024px){.nav-section{padding:.6rem}.nav-section ul li a{font-size:1rem}}@media (max-width: 600px){.nav-section{visibility:hidden}#sidebar{flex-direction:row;align-items:flex-start;height:3rem;border-radius:4rem;position:relative}.logo{margin-top:-.9rem;font-size:1.8rem}.menu-open{display:block;position:absolute;right:1rem;font-size:1.2rem;color:#3a34a3}}#dashboard-main-content{display:flex;width:100%;height:100%;position:relative}.left{width:50%;padding-top:4rem;margin:1rem}.right{background-color:#f6faff;width:50%;border-radius:0 2rem 2rem 0;padding:4rem 1rem}@media (min-width: 601px) and (max-width: 1024px){.left{width:100%;padding:4rem 1rem}.right{width:100%;padding:2rem 1rem;margin:0;border-radius:1rem}#dashboard-main-content{flex-direction:column;overflow-y:scroll}}@media (max-width: 600px){#dashboard-main-content{flex-direction:column}.left{padding:1.5rem 1rem;width:100%}.right{padding-top:2rem;width:100%}}#header{position:absolute;width:calc(100% - 4rem);margin:1rem 2rem;display:flex;align-items:center;justify-content:space-between}.search-bar{display:flex;align-items:center;border-radius:10px;padding:.8rem 1rem;gap:1rem;width:50%;margin-right:1.5rem;box-shadow:0 0 8px #0000000d}.search-icon,.notification-icon{font-size:18px;color:#3a34a3;cursor:pointer}.search-box{flex:1;border:none;outline:none;font-size:15px;background:transparent;color:#2b2d42}.user-account{width:50%;display:flex;align-items:center;justify-content:flex-end;gap:1rem}.user-svg{width:40px;height:40px;background-color:#01e3f1;border-radius:10%;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.user-svg img{width:25px}.add-icon{font-size:45px;color:#3a34a3;cursor:pointer}@media (max-width: 600px){.search-bar{width:auto}.search-box{width:5rem}}#dashboard-overview{height:70%;padding:.5rem 1rem}.dashboard-title{display:flex;align-items:center;justify-content:space-between;color:#3a34a3}.dashboard-title h2{font-size:1.3rem}.dashboard-title h5{font-size:.8rem;font-weight:600;cursor:pointer}#dashboard-main{display:flex;justify-content:space-between;padding:.5rem 1rem}.dashboard-bottom{display:flex;align-items:center;justify-content:flex-end;color:#3a34a3;margin:-.8rem .2rem;gap:.2rem;cursor:pointer;flex-wrap:wrap}@media (max-width: 600px){.dashboard-title{width:100%;display:flex;justify-content:space-between}#dashboard-overview{margin-top:2rem;height:auto}#dashboard-main{flex-direction:column}}#anatomy-section{height:100%;background-color:#f6faff;width:50%;display:flex;align-items:center;justify-content:center;border-radius:1.5rem;position:relative}#human-anatomy-image{height:50vh}.magnifying-glass{position:absolute;top:1rem;right:1rem;color:#b9bbbf;font-size:1.2rem;cursor:pointer}.body-scanner{width:35px;height:40px;position:absolute;overflow:hidden}.heart{left:48%;top:20%}.leg{left:39%;bottom:30%}.scanning-text{background-color:#3932ad;position:absolute;height:2rem;width:7rem;display:flex;justify-content:center;align-items:center;font-size:.6rem;border-radius:.6rem;padding:0 .2rem;color:#f5f5f5c6;gap:.3rem;box-shadow:0 0 2px #000}.healty-heart{left:62%;top:20%}.healty-heart img{height:1.2rem}.healty-leg{background-color:#28d7e5;color:#3a34a3;left:-5%;bottom:30%}.healty-leg img{height:1.2rem}.corner{position:absolute;width:10px;height:10px;border:3px solid #3a34a3}.top-left{top:0;left:0;border-right:none;border-bottom:none;border-radius:8px 0 0}.top-right{top:0;right:0;border-left:none;border-bottom:none;border-radius:0 8px 0 0}.bottom-left{bottom:0;left:0;border-right:none;border-top:none;border-radius:0 0 0 8px}.bottom-right{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 8px}.scanner-line{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(to right,transparent,#3a34a3,transparent);animation:scanLine 2s linear infinite}@keyframes scanLine{0%{top:0}to{top:100%}}@media screen and (max-width: 1024px){#anatomy-section{width:100%;height:auto;padding:1rem;margin-top:1rem;flex-direction:column;border-radius:1rem}#human-anatomy-image{height:40vh}.scanning-text{font-size:.55rem;width:6rem;height:1.8rem}.healty-heart img,.healty-leg img{height:1rem}.healty-heart{left:58%;top:22%}.healty-leg{left:21%}.heart{left:50%;top:22%}.leg{left:44%;bottom:30%}.body-scanner{width:30px;height:35px}.corner{width:8px;height:8px;border-width:2px}.scanner-line{height:2px}}@media (max-width: 600px){#anatomy-section{width:100%;height:auto;padding:1rem;margin-top:1rem;flex-direction:column;align-items:center;border-radius:1rem}#human-anatomy-image{height:40vh}.magnifying-glass{font-size:1rem;top:.5rem;right:.5rem}.scanning-text{font-size:.5rem;width:5.5rem;height:1.5rem;padding:0 .2rem;gap:.2rem}.healty-heart img,.healty-leg img{height:.9rem}.healty-heart{left:60%;top:25%}.healty-leg{left:4%}.heart{left:50%;top:25%}.leg{left:40%;bottom:30%}.body-scanner{width:20px;height:25px}.corner{width:6px;height:6px;border-width:2px}.scanner-line{height:2px}}#health-cards{width:50%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1rem}.health-card{width:180px;padding:1rem;border-radius:1rem;background-color:#f8f9fd;box-shadow:0 0 .5rem #0000000d}.card-header{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}.card-icon{width:2rem;height:2rem;object-fit:contain}.card-title{font-size:1.2rem;font-weight:600;color:#161146}.card-date{font-size:.8rem;color:#999;margin-bottom:.5rem}.progress-bar{height:.5rem;background-color:#e0e0e0;border-radius:1rem;overflow:hidden}.progress-fill{height:100%;border-radius:1rem}.progress-fill.green{background-color:#7ed2c3}.progress-fill.red{background-color:#ff7d5e}@media (max-width: 600px){#health-cards{width:100%;margin-top:2rem}}.container{display:flex;justify-content:center;align-items:center;width:calc(100% - 2);padding:.5rem 1rem;height:10rem;margin-top:1.5rem}.card{background-color:#f6faff;padding:0 1.25rem;border-radius:1rem;box-shadow:0 .5rem 1.5rem #0000000d;width:100%;height:100%;position:relative}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-1rem}.title{font-size:1rem;font-weight:700;color:#1e1e2f}.subtitle{font-size:.75rem;color:#b0b2b6}.chart{display:flex;gap:1.975rem;align-items:flex-end;height:6.25rem}.day{display:flex;flex-direction:column;align-items:center}.bars{display:flex;flex-direction:row;gap:.475rem;align-items:flex-end}.bar{width:.25rem;border-radius:.125rem}.gray{background-color:#e0e0e0}.blue{background-color:#3b3486}.teal{background-color:#00cfc8}.split-bar{display:flex;flex-direction:column;align-items:center}.weekdays{display:flex;margin-top:.125rem;padding-left:.625rem;width:max-content;gap:3.5rem}.day-label-activity{text-align:center;font-size:.75rem;color:#b0b2b6}@media (min-width: 601px) and (max-width: 1024px){.container{margin-top:3rem}}@media (max-width: 600px){.container{margin-top:2rem;width:100%;flex-direction:column;height:auto}.chart{display:flex;flex-direction:column;gap:0;align-items:center;margin-top:1rem}.weekdays{flex-direction:column;margin-top:-6rem;gap:1.8rem;margin-bottom:.4rem;margin-left:1.5rem}.day{rotate:90deg;margin:-1.5rem}.bars{gap:.2rem}}.calendar-container{background-color:#f8f9fd;padding:1rem;border-radius:1rem;width:100%}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.month-title{font-weight:600;color:#161146;font-size:1rem}.nav-icons{display:flex;gap:.5rem;font-size:1rem;color:#161146;cursor:pointer}.calendar-grid{display:flex;justify-content:space-between;align-items:flex-start}.calendar-day{display:flex;flex-direction:column;align-items:center;width:12%}.day-name{font-size:.9rem;color:#161146;padding:.3rem 0;font-weight:500}.day-number{font-size:1rem;font-weight:800;color:#161146;margin-bottom:.5rem}.appointments{display:flex;flex-direction:column;gap:.5rem}.time-slot{font-size:.75rem;color:#161146;padding:.2rem .6rem;border-radius:1rem;font-weight:500;display:flex;justify-content:center}.time-slot.highlighted{background-color:#3932ad;color:#fff}.active{background-color:#4e6efd0d;border-radius:1rem}.faded{color:#ccc;opacity:.5}.faded .time-slot .active{width:100px}.appointment-details-container{display:flex;gap:1rem;margin-bottom:1rem}.appointment-card{display:flex;justify-content:space-between;align-items:flex-start;padding:1rem;border-radius:1rem;width:100%;max-width:280px;box-shadow:0 2px 8px #0000000d}.appointment-card.blue{background:#3932ad;color:#fff}.blue .title{color:#fff}.appointment-card.light{background:#dce4fa;color:#161146}.card-text{display:flex;flex-direction:column;gap:.2rem}.title{margin:.5rem 0rem;font-size:.9rem;font-weight:600}.time{margin:0;font-size:.85rem;opacity:.9}.doctor{margin:0;font-size:.8rem;opacity:.7}.card-icon{width:24px;height:24px;object-fit:contain;margin-left:.75rem}@media (max-width: 600px){.calendar-grid{overflow-x:auto;gap:1rem}.calendar-day{min-width:5rem;flex:0 0 auto}.appointment-details-container{margin-top:1rem;flex-direction:column;justify-content:center;align-items:center}}.schedule-title{font-size:1rem;font-weight:600;color:#161146;margin-bottom:1rem}.day-section{margin-bottom:.5rem}.day-label{font-size:.9rem;font-weight:500;color:#555;margin-bottom:.75rem}.card-row{display:flex;gap:1rem;flex-wrap:wrap}@media (max-width: 600px){.card-row{justify-content:center}}.simple-appointment-card{display:flex;justify-content:space-between;align-items:center;background-color:#dce4fa;border-radius:1rem;padding:.8rem 1rem;margin-bottom:.75rem;min-width:220px;max-width:280px;box-shadow:0 2px 6px #0000000a}.icon{width:20px;height:20px;object-fit:contain}.appointment-info{display:flex;flex-direction:column;gap:.25rem}.appointment-title{font-size:.9rem;font-weight:600;color:#161146;padding-bottom:.5rem;margin:0}.appointment-time{font-size:.8rem;color:#555;margin:0}.appointment-icon{font-size:1.25rem;margin-left:1rem;margin-top:-1.2rem}@media (min-width: 601px) and (max-width: 1024px){.simple-appointment-card{flex-wrap:wrap;width:50%}}@media (max-width: 600px){.simple-appointment-card{width:100%;align-items:center}}