body{margin:0;padding:0;box-sizing:border-box}.layoutContainer{display:flex}.layoutMenu{flex:1;padding:5px 20px}.layoutOtulet{flex:6;padding:5px 20px}.layout{background-color:#2a3447;color:#fff}.light{background-color:#fff;color:#000}.bigchart{width:100%;height:240px;max-width:100%;overflow-y:hidden}.title{margin-left:10px;margin-bottom:10px}.summary{padding:10px;border:1px solid gray;border-radius:10px;height:max-content;margin-bottom:20px}.summary-title,.summary-data{padding:0;margin:0;text-align:center}.topbox .title{font-size:24px;font-weight:700}.topbox ul{list-style:none;margin:0;padding:0}.topbox .usercontainer{display:flex;align-items:center;justify-content:space-between;gap:15px}.topbox .usercontainer .user{display:flex;gap:15px}.topbox .usercontainer .img{width:30px;height:30px;border-radius:50%;object-fit:cover}.topbox .usercontainer .userInfo{display:flex;flex-direction:column;margin:0;padding:0}.topbox .usercontainer .userInfo span{display:block;font-size:14px}.home{display:grid;grid-column:auto!important;grid-row:auto!important;grid-template-columns:1fr;grid-template-areas:"box7" "box3" "box1a" "box1b"}.box{border:1px solid #384256;padding:10px;border-radius:10px;margin:10px}.box7{grid-area:box7}.box3{grid-area:box3;margin-top:30px}.box1.box1a{grid-area:box1a}.box1.box1b{grid-area:box1b}@media screen and (min-width: 680px) and (max-width: 1023px){.home{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"box7 box7" "box3 box3" "box1a box1b";grid-auto-rows:minmax(130px,auto);gap:20px;width:100%}.box7{grid-area:box7;width:100%}.box3{grid-area:box3;width:100%;display:flex;align-items:center;justify-content:center;gap:20px}.box1.box1a{grid-area:box1a;width:100%}.box1.box1b{grid-area:box1b;width:100%}.box{margin:5px;padding:10px;box-sizing:border-box}}@media screen and (min-width: 1024px){.home{display:grid;grid-template-areas:none;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(130px,auto);height:87.5vh}.box{border:1px solid #384256;padding:15px;border-radius:10px;margin:10px;height:max-content}.box7{grid-column:1/-1;grid-row:1}.box1.box1a{grid-column:1;grid-row:2;margin-top:50px}.box3{display:flex;grid-column:2/span 2;grid-row:2;align-items:center;justify-content:center;gap:20px}.box1.box1b{grid-column:4;grid-row:2;margin-top:50px}}.navbar{padding:5px 20px}.navbar .navbarContainer{height:50px;width:100%;display:flex;align-items:center;justify-content:space-between}.navbar .navbarContainer .logoContainer .title{display:none}.navbar .navbarContainer .menu{display:flex;align-items:center;gap:20px}.navbar .navbarContainer .menu .menuOptions{padding:5px 10px;border:1px solid #384256;border-radius:10px;text-decoration:none;color:inherit}.navbar .navbarContainer .menu .active{background-color:red}.navbar .navbarContainer .logoContainer{display:flex;align-items:center;gap:20px}.navbar .navbarContainer .img{width:30px;height:30px;object-fit:cover;background-color:transparent}.navbar .navbarContainer .optionsContainer{display:flex;align-items:center;gap:10px}.navbar .navbarContainer .optionsContainer .profileContainer{display:none}@media screen and (min-width: 680px){.navbar .navbarContainer .logoContainer .title{display:block;margin:0;padding:0}}@media screen and (min-width: 1024px){.navbar .navbarContainer .optionsContainer .profileContainer{display:none}}@media screen and (min-width: 1024px) and (min-width: 1024px){.navbar .navbarContainer .optionsContainer .profileContainer{display:flex;align-items:center;gap:10px}.navbar .navbarContainer .optionsContainer .profileContainer .badgeContainer{width:30px;height:30px;border-radius:50%;position:relative}.navbar .navbarContainer .optionsContainer .profileContainer .badge{display:flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background-color:red;position:absolute;top:-7px;right:-4px;font-size:12px;font-weight:700}.navbar .navbarContainer .optionsContainer .profileContainer .userContainer{display:flex;align-items:center;gap:20px}.navbar .navbarContainer .optionsContainer .profileContainer .userContainer .userImg{width:30px;height:30px;object-fit:cover;border-radius:50%}}.theme{cursor:pointer;width:35px;gap:5px;display:flex;align-items:center;border:1px solid white;border-radius:20px;padding:2px;position:relative}.theme .icon-sun{font-size:16px;color:#ff0}.theme .icon-moon{font-size:14px}.theme .ball{width:15px;height:15px;border-radius:50%;background-color:#222b3c;border:1px solid white;position:absolute;left:1px;bottom:1;z-index:9;transition:all .2s ease-in}.theme .dark{transform:translate(19px);right:1px}.themelight{border:1px solid black}.footerContainer{padding:5px 20px}.footer{height:30px;display:flex;align-items:center;justify-content:space-between}.cont{display:flex;align-items:center;gap:10px}.filterBar{display:flex;align-items:center;justify-content:space-between}.filterBar .filterBar-title{font-size:16px;font-weight:700;margin-bottom:10px}.filterBar .filterBar-select{padding:7px;border:none;margin-bottom:10px}.filterBar .filterBar-select:focus{outline:none}.filterBar .filterBar-btn{border:none;border-radius:5px;padding:7px;margin-left:3px}.filterBar .filterBar-active{background-color:red;color:#fff}.i-card .i-period{display:flex;align-items:center;gap:20px}.i-card .btn-container{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.i-card .btn-container .btn{display:flex;align-items:center;justify-content:center;width:50px;padding:10px 15px;background-color:red;color:#fff;text-decoration:none;cursor:pointer;border-radius:5px}.snapshots{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto)}.snapshots .box{border:1px solid #384256;padding:15px;border-radius:10px;margin:10px}.snapshots .box1,.snapshots .box4{grid-column:span 1;grid-row:span 3}.snapshots .box7{grid-column:span 2;grid-row:span 2}.snapshot-periods{display:flex;align-items:center;gap:20px;font-size:12px}.chartBox{height:70px;display:flex;border:1px solid gray;border-radius:10px;padding:10px;width:200px}.chartBox .info{flex:1;display:flex;flex-direction:column;justify-content:space-between;height:100%}.chartBox .info .title{margin:0;display:flex;align-items:center;gap:5px;font-size:16px;width:max-content}.chartBox .info .link{color:#87ceeb;font-size:14px;font-weight:700}.chartBox .chart{display:flex;flex-direction:column;flex:1;justify-content:space-between}.chartBox .chart .chartContainer{height:100px;flex:1}.chartBox .chart .textContainer{flex:1;display:flex;flex-direction:column;justify-content:end;align-items:end;width:100%}.chartBox .chart .textContainer .less{color:red}.chartBox .chart .textContainer .pos{color:#39e339}.circleChart{display:flex;flex-direction:column;justify-content:center;height:100%;width:max-content;align-items:center}.circleChart .title{font-size:20px;font-weight:700}.circleChart .infoContainer{max-width:340px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.circleChart .infoContainer .info{display:flex;flex-direction:column;align-items:center;margin-bottom:0;text-align:center}.circleChart .infoContainer .info .text{height:18px;font-size:12px;display:flex;align-items:center;gap:10px}.circleChart .infoContainer .info .text .dot{height:10px;width:10px;border-radius:50%;margin-left:10px}.circleChart .infoContainer .info .text .text-title{font-size:16px}.circleChart .infoContainer .info .span{display:block;font-size:16px;margin-left:30px}.chartpie{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.singleSnapshot{display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:minmax(170px,auto)}.singleSnapshot .singleSnapshot-container{display:flex;flex-direction:column;gap:30px;grid-column:span 1;grid-row:span 2;align-items:center;justify-content:center}.singleSnapshot .box{border:1px solid #384256;padding:15px;border-radius:10px;margin:10px}.singleSnapshot .box4{grid-column:span 1;grid-row:span 2;margin-bottom:20px;display:flex;justify-content:center}@media screen and (min-width: 1024px){.singleSnapshot{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);max-width:1200px;margin:0 auto}.singleSnapshot .singleSnapshot-container{display:flex;flex-direction:column;gap:30px;grid-column:span 2;grid-row:span 2;align-items:center;justify-content:center}.singleSnapshot .box{border:1px solid #384256;padding:15px;border-radius:10px;margin:10px}.singleSnapshot .box4{margin:30px;grid-column:span 1;grid-row:span 2}}