@import"https://fonts.googleapis.com/css2?family=Allerta&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:#f0f4f8;font-family:Segoe UI,sans-serif;color:#333;overflow-x:hidden;line-height:1.6;font-size:16px}ul{list-style:none}button{border:none;background:none;cursor:pointer}.container{max-width:1200px;margin:0 auto;padding:1rem}h1,h2,h3,h4,h5,h6{line-height:1.2}@media (max-width: 768px){body{font-size:15px}.container{padding:.75rem}}@media (max-width: 480px){body{font-size:14px}.container{padding:.5rem}}html{height:100%;width:100%;margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito Sans,sans-serif;font-weight:400;font-style:normal;margin:0;padding:0}.app-container{display:flex;height:98%;background-color:#e1eeff;color:#333;padding:20px;overflow-y:hidden;background:#e1eeff}.main-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;background-color:#fff;align-items:stretch;min-height:100%;border-top-right-radius:50px;border-bottom-right-radius:50px}.content-sections{display:flex;flex-direction:row;width:100%;flex:1;align-items:stretch;gap:30px}@media (max-width: 1024px){.app-container{flex-direction:column;padding:5px;border-radius:0}.main-content{overflow-y:auto;border-radius:0}.content-sections{flex-direction:column;align-items:center;gap:40px}}@media (max-width: 768px){.app-container{padding:0}.content-sections{gap:35px}}@media (max-width: 480px){.app-container{padding:0}.content-sections{gap:30px}}.header{display:flex;justify-content:space-between;gap:30px;align-items:stretch;padding-left:0;padding-right:0}.header-left,.header-right{display:flex;align-items:center;width:auto;flex:1 1 50%;padding-top:0;padding-bottom:0;min-height:0}.header-left{justify-content:flex-start;gap:10px;padding:40px 0 0 40px;background-color:#fff;border-top-left-radius:0}.header-right{justify-content:flex-end;gap:10px;padding:40px 40px 0 0;background-color:#eef2f5;border-top-right-radius:0}.search-wrapper{display:flex;align-items:center;border:1px solid #ccc;padding:15px;border-radius:8px;background-color:#fff;flex:1;height:auto;min-width:150px}.search-bar{border:none;background:transparent;margin-left:8px;outline:none;width:100%}.bell-icon{padding:8px;width:48px;height:48px;fill:#0a2176;border:1px solid #ccc;border-radius:8px;cursor:pointer}.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background-color:#e1eeff}.add-btn{padding:6px 8px;background-color:#0a2176;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:15px}.menu-toggle-btn{display:none;background:none;border:none;cursor:pointer;margin-left:10px;padding:5px;align-items:center;justify-content:center}@media (max-width: 600px){.header{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;gap:20px;padding:0;overflow-x:auto;width:100%}.header-left,.header-right{width:auto;padding-top:20px;padding-bottom:20px;flex-direction:row;align-items:center;gap:5px;flex:1 1 50%;min-height:0}.header-left{max-width:none;justify-content:space-between;min-width:150px;background-color:#fff;padding-left:10px;padding-right:0;border-top-left-radius:0}.header-right{justify-content:flex-end;max-width:none;gap:3px;background-color:#fff;border-top-right-radius:0;min-width:80px;padding-left:0;padding-right:15px}.search-wrapper{flex:1;min-width:100px;height:auto;padding:12px 15px;background-color:#fff}.search-bar{font-size:13px}.avatar{width:28px;height:28px;background-color:#e1eeff;margin-right:10px}.add-btn{padding:3px 5px;font-size:12px;background-color:#1f6ed5;margin-right:0}.bell-icon{padding:8px;width:38px;height:38px;fill:#0a2176}.menu-toggle-btn{display:flex;margin-right:0}}@media (max-width: 400px){.header{padding:10px;gap:20px}.header-left,.header-right{padding-top:0;padding-bottom:0}.header-left{max-width:none;min-width:100px;padding-left:0;padding-right:0}.header-right{max-width:none;min-width:60px;gap:2px;padding-left:0;padding-right:10px}.search-wrapper{min-width:80px;padding:10px 12px;height:auto}.bell-icon{padding:6px;width:28px;height:28px;fill:#0a2176}.menu-toggle-btn{margin-left:5px}}.dashboard-overview{display:flex;justify-content:space-between;align-items:center}.overviewtitle{padding-left:0;font-size:32px;color:#0a2176;font-weight:700}.week-dropdown{cursor:pointer;display:flex;align-items:center;gap:6px;font-size:16px;padding:6px 10px;border-radius:6px;color:#0a2176}.downarrow{font-size:14px;padding:6px 0 0}@media (max-width: 600px){.dashboard-overview{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;padding:0}.overviewtitle{padding-left:10px;font-size:24px;white-space:nowrap}.week-dropdown{padding:4px 8px;font-size:14px;white-space:nowrap;margin-left:auto}}.anatomy-section{background-color:#eef2f5;border-radius:8px;padding:1px;height:auto;width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;color:#0a2176;position:relative}.anatomy-img{width:90%;height:auto;display:block;padding-left:0;max-height:500px}.health-indicator{position:absolute;padding:2px 5px;border-radius:8px;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;z-index:2;cursor:pointer;transition:background-color .3s ease}.health-indicator:hover{filter:brightness(1.1)}.health-indicator[data-type=text]{background-color:var(--indicator-color)}.zoom-icon{position:absolute;top:15px;right:15px;color:#0a2176;cursor:pointer;z-index:3;padding:5px;transition:transform .2s ease-in-out}.zoom-icon:hover{transform:scale(1.1)}@media (max-width: 768px){.anatomy-section{max-width:300px;height:auto;padding:1px 10px;border-radius:8px}.anatomy-img{max-height:550px;width:90%}.health-indicator{padding:1px 4px;font-size:12px}.zoom-icon{top:10px;right:10px;font-size:18px}}@media (max-width: 480px){.anatomy-section{max-width:calc(100% - 20px);padding:10px;border-radius:8px}.anatomy-img{padding-left:0;max-height:500px;width:85%}.health-indicator{padding:5px 25px;font-size:10px;margin-left:2px}.zoom-icon{top:5px;right:5px;font-size:16px}}@media (min-width: 481px){.anatomy-section{flex-direction:row}.health-indicator-list{width:50%}}@media (max-width: 1024px){.anatomy-section{height:auto;width:100%;max-width:350px;margin:0 auto}}.health-cards{display:flex;gap:24px;align-items:flex-start;padding:0;justify-content:flex-start;flex-direction:column;color:#0a2176;flex-wrap:wrap}.health-card{background:#eef2f5;padding:10px;border-radius:8px;box-shadow:0 1px 4px #0000001a;min-height:140px;min-width:150px;max-width:300px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.health-card h3{margin-bottom:6px}.health-card .date{font-weight:700;margin-bottom:12px;font-size:14px;color:#d3d3d3;padding-top:5px}.status-bar-wrapper{background-color:#fff;border-radius:10px;height:8px;width:100%;overflow:hidden;margin:0}.status-bar-fill{height:100%;border-radius:10px;transition:width .4s ease-in-out}@media (max-width: 768px){.health-cards{gap:20px;flex:none;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;width:100%;max-width:none;margin:0 auto;padding:1px 10px}.health-card{flex:none;width:100%;max-width:none;min-width:auto;min-height:140px;padding:20px;margin:0 auto}}@media (max-width: 480px){.health-cards{flex-direction:column;padding:10px;gap:10px;max-width:none;margin:0 auto}.health-card{padding:18px;width:100%;min-width:auto;min-height:120px;max-width:none}}.activity-feed{background:#eef2f5;padding:20px;border-radius:10px;box-shadow:0 1px 5px #0000001a}.activity-header{background:#eef2f5;padding:15px;display:flex;justify-content:space-between;align-items:center;color:#0a2176;flex-shrink:0}.bar-chart{display:flex;gap:40px;align-items:flex-end;height:auto;min-height:250px;padding-left:0;overflow-x:auto;white-space:nowrap;flex-grow:1;justify-content:center;margin:0 auto}.bar{width:14px;min-width:14px;background-color:#007bff;border-radius:4px 4px 0 0;transition:height .3s ease}.weekday-label{margin-top:5px;font-size:12px;color:#444;color:#0a2176}.bar-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:20px;flex-shrink:0}@media (max-width: 768px){.bar-chart{gap:40px;padding-left:0;height:auto;min-height:200px}.bar{width:8px;min-width:8px}.weekday-label{margin-top:3px;font-size:11px}}@media (max-width: 480px){.bar-chart{gap:30px;padding-left:0;height:auto;min-height:200px}.bar{width:6px;min-width:6px}.weekday-label{margin-top:2px;font-size:10px}}.middle-section{display:flex;flex-direction:column;box-sizing:border-box;width:100%;padding:20px 0 20px 20px}.middle-main{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0;margin-top:15px}.top-grid-section{display:flex;flex-wrap:wrap;gap:30px;position:relative;flex:0 0 auto;justify-content:center;padding-bottom:40px}.anatomy-health-wrap{display:flex;flex-direction:row;gap:0px;padding-left:0;position:relative;flex:1;max-width:650px;background-color:#eef2f5;border-radius:8px;flex-wrap:wrap;justify-content:center}.detail-dropdown{position:absolute;bottom:20px;right:20px;cursor:pointer;display:flex;align-items:center;padding:8px 0;border-radius:6px;color:#0a2176;width:auto;text-align:right;justify-content:flex-end;background-color:transparent}.rightarrow{font-size:18px}.activities{padding:30px 0 90px;flex-shrink:0;width:100%;flex-grow:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}@media (max-width: 1024px){.middle-main{min-height:0;margin-top:10px}.top-grid-section{flex-direction:column;align-items:stretch;flex:0 1 auto;padding-bottom:30px;gap:20px}.anatomy-health-wrap{flex-direction:column;gap:0px;padding-left:0;width:100%;max-width:400px;margin:0 auto;border-radius:8px}.middle-section{padding:0}.activities{padding:30px 20px 10px;flex-grow:1;min-height:0}.detail-dropdown{bottom:20px;right:20px}}@media (max-width: 768px){.middle-section{padding:0}.middle-main{min-height:0;margin-top:0}.anatomy-health-wrap{padding-left:0;gap:0px;max-width:350px;margin:0 auto;border-radius:8px}.top-grid-section{align-items:stretch;padding-bottom:30px;gap:10px;flex:0 1 auto}.activities{padding:20px 15px 10px;flex-grow:1;min-height:0}.detail-dropdown{bottom:20px;right:20px}}@media (max-width: 480px){.top-grid-section{display:flex;flex-direction:column;flex:0 1 auto;align-items:stretch;padding-bottom:20px;gap:5px}.anatomy-health-wrap{flex-direction:column;gap:0px;padding-left:0;max-width:calc(100% - 40px);margin:0 auto;border-radius:8px}.activities{padding:15px 10px 5px;flex-grow:1;min-height:0}.middle-section{padding:0}.middle-main{min-height:0;margin-top:0}.detail-dropdown{bottom:-15px;right:20px}}.calendar-section{padding:5px;flex:0 1 auto;display:flex;flex-direction:column;min-height:0}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-left:15px;flex-shrink:0}.nav-buttons{display:flex;gap:10px}.nav-arrow{background:none;border:none;font-size:24px;color:#0a2176;cursor:pointer;padding:4px;transition:transform .2s ease-in-out}.nav-arrow:hover{transform:scale(1.4);color:#0a2176}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-bottom:30px;padding-left:0;overflow-x:hidden;row-gap:10px}.calendar-day-header{font-weight:700;text-align:center;background-color:#eef2f5;padding:8px;border-radius:4px;font-size:13px}.calendar-date-cell{text-align:center;font-size:26px;font-weight:700;padding:10px 0;background-color:#eef2f5;border-radius:4px;color:#0a2176}.calendar-time-cell.booked{background-color:#ffcdd2;color:#b71c1c;font-weight:700}.appointment-cards{margin-top:30px;display:flex;flex-direction:row;flex-wrap:nowrap;gap:16px;padding:10px 15px;color:#0a2176;flex-grow:1;overflow-x:auto;justify-content:flex-start;align-items:flex-start;min-height:0}.appt-card{border-radius:6px;padding:12px;background-color:#fff;box-shadow:0 2px 4px #0000000d;color:#0a2176;flex:1;min-width:150px;max-width:none}.appt-card h4{margin:0 0 8px}.calendar-time-cell{text-align:center;font-size:14px;background-color:#eef2f5;padding:8px;border-radius:10px;cursor:pointer;transition:.2s ease-in-out}.calendar-time-cell:hover{background-color:#0a2176;color:#fff}.calendar-time-cell.booked{background-color:#ffcdd2;color:#b71c1c;font-weight:700;cursor:not-allowed}.calendar-time-cell.selected{background-color:#0a2176;border:2px solid #0a2176;font-weight:700;color:#fff}@media (max-width: 768px){.calendar-header{margin-bottom:10px;padding-left:10px}.calendar-grid{margin-bottom:20px;row-gap:8px}.calendar-day-header{padding:8px;font-size:12px}.calendar-date-cell{font-size:22px;padding:8px 0}.calendar-time-cell{font-size:13px;padding:5px}.appointment-cards{margin-top:15px;gap:10px;padding:5px 10px}.appt-card{padding:10px;flex:1;min-width:120px;max-width:none}}@media (max-width: 480px){h2{font-size:1.2rem}.calendar-header{margin-bottom:8px;padding-left:5px}.calendar-grid{margin-bottom:15px;row-gap:5px}.calendar-day-header{padding:6px;font-size:11px}.calendar-date-cell{font-size:20px;padding:6px 0}.calendar-time-cell{font-size:12px;padding:4px}.appointment-cards{margin-top:10px;gap:8px;padding:5px}.appt-card{padding:8px;flex:1;min-width:100px;max-width:none}}.upcoming-section{background:#eef2f5;padding:0 5px 0 20px;flex-grow:1;display:flex;flex-direction:column;min-height:170px;margin-top:20px}.upcoming-section h2{margin-bottom:20px}.day-group{margin-bottom:0;flex-shrink:0}.day-group h3{margin-bottom:10px;color:#0a2176}.appointments{display:flex;gap:20px;flex-wrap:wrap;background:#eef2f5;padding:0 0 20px;border-radius:10px;flex-grow:1;justify-content:flex-start;min-height:0}.title{font-weight:700}.appt-card{display:flex;flex-direction:column;background:#e1eeff;align-items:flex-start;padding:10px 15px;border-radius:20px;min-width:160px}.title{font-weight:700;font-size:16px;margin:10px}.time{color:#0a2176;font-size:16px;margin:10px}.icon{margin-right:6px;color:#0a2176}.right-section-combined{background-color:#eef2f5;display:flex;flex-direction:column;box-sizing:border-box;padding:20px 20px 150px;width:100%;min-height:100%;height:auto;max-width:none;flex-shrink:0;flex:1 1 50%;gap:20px;color:#0a2176;flex-grow:1}.calendar-and-schedule>*{background:#eef2f5}@media (max-width: 1024px){.right-section-combined{padding:15px 15px 25px;max-width:100%;flex-shrink:1;flex:1 1 100%;gap:15px;min-height:100%;height:auto;border-radius:0}}@media (max-width: 768px){.right-section-combined{padding:15px 15px 25px;gap:15px;min-height:100%;height:auto;border-radius:0}}@media (max-width: 480px){.right-section-combined{padding:10px 10px 20px;gap:15px;min-height:100%;height:auto;border-radius:0}}.main-container{display:flex;flex-direction:row;width:100%;min-height:100vh}.middle-section,.right-section{flex:1 1 50%;height:100vh;box-sizing:border-box}@media (max-width: 768px){.main-container{flex-direction:column}.middle-section,.right-section{flex:1 1 100%;height:auto}}.sidebar{display:flex;flex-direction:column;align-items:flex-start;width:300px;padding-left:60px;background-color:#eef2f5;box-shadow:2px 0 5px #0003;overflow:auto;border-radius:50px 0 0 50px;transition:all .3s ease}.sidebar-title{margin:10px 0;font-weight:700}.nav-link{display:flex;align-items:center;padding:12px 0;cursor:pointer;transition:background .2s ease;border-radius:10px}.nav-link:hover{background-color:#eef2f5;color:#0a2176;font-weight:700;font-size:18px}.nav-link:hover *{color:#0a2176}.nav-link .icon{margin-left:0;margin-right:20px;display:flex;align-items:center;justify-content:center}.sidebar-content{flex-grow:10;padding-top:50px}.sidebar-bottom{flex-grow:5;width:90%;padding-bottom:50px}.logo{padding-bottom:30px;font-size:30px;font-weight:700}.logo:before{content:"Health";color:#00fffb}.label-title{font-weight:700;font-size:15px;color:#d3d3d3}.icon,.label{color:#696969}@media (max-width: 768px){.sidebar{position:fixed;top:0;left:-100%;height:100vh;width:210px;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:20px;border-radius:0;box-shadow:2px 0 5px #0000004d;background-color:#eef2f5;z-index:1000;transition:left .3s ease-in-out;overflow-y:auto}.sidebar.is-open{left:0}.sidebar-content,.sidebar-bottom{padding-top:0;flex-direction:column;display:flex;flex-wrap:nowrap;gap:10px;flex-grow:0;flex-shrink:0;width:100%}.sidebar-content{margin-bottom:15px}.sidebar-bottom{margin-top:15px;align-self:stretch;width:100%;padding-bottom:0}.nav-link{padding:10px 15px;width:100%;justify-content:flex-start}.logo{font-size:24px;padding-bottom:20px}.logo:before{content:"HealthCare."}.label-title{display:block;font-size:16px;margin-bottom:10px;color:gray}}@media (max-width: 480px){.sidebar{width:200px;padding:15px}}