.siddbarContainer{height:100vh;background-color:#fff}.logo{border-bottom:3px solid #bebebe;padding:24px}.navs{color:#0d62ff}.navs ul{list-style-type:none;height:300px;width:12rem;margin:auto}.navs ul li{margin:20px 0;cursor:pointer;padding:8px 16px;transition:background-color .3s ease}.navs ul li:hover{background-color:#f1f1f1}.navs ul li.selected{background-color:#0d62ff;color:#fff;font-weight:700;border-radius:5px}.container{display:flex;flex-direction:row;text-align:center}.sidebar{border:2px solid red;flex:0.75 1}.dashboard{border:2px solid #058f23;flex:3.25 1}.dashboard-header{background-image:linear-gradient(90deg,#043d96,#0c58e6,#80a9ff);color:#fff;font-style:normal;text-transform:capitalize;text-align:left;padding:20px}.dashboard-content{background-color:#e7efff;height:100vh;padding:20px}.mgraphs{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px;gap:24px;text-align:start}.mgraph1,.mgraph2,.mgraph3,.mgraph4{height:140px;flex:1 1;background-color:#fff;border-radius:10px;box-shadow:0 4px 4px 0 #1878f240;padding:12px;display:flex;flex-direction:column;justify-content:space-between}.mgraph1-heading,.mgraph2-heading,.mgraph3-heading,.mgraph4-heading{flex:1 1}.mgraph1-content,.mgraph2-content,.mgraph3-content,.mgraph4-content{flex:2 1;display:flex;flex-direction:row;justify-content:space-between}.mgraph1-numbers,.mgraph2-numbers,.mgraph3-numbers,.mgraph4-numbers{display:flex;flex-direction:column;justify-content:space-evenly}.bar-chart{display:flex;flex-direction:row;justify-content:space-between;gap:20px}.barGraph,.pieChart{height:-moz-fit-content;height:fit-content;background-color:#fff;border-radius:10px;box-shadow:0 4px 4px 0 #1878f240}.pieChart{flex:1.5 1;display:flex;flex-direction:column;justify-content:space-between;text-align:start;padding:12px}.chapters{display:flex;flex-direction:row;justify-content:space-around}.chapters div{margin:5px 0}.barGraph{flex:2.5 1;flex-direction:column}.barGraph,.barHeading{display:flex;justify-content:space-between}.barHeading{flex-direction:row;padding:12px;gap:10px}.bar{height:392px}@media (max-width:768px){.container{flex-direction:column}.dashboard,.sidebar{flex:1 1}}