@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none}a{color:inherit}body{font-family:Poppins,sans-serif}li{list-style:none}.main{background:#2a3447;color:#fff}.container{display:flex}.menu__container{width:13rem;padding:.5rem 1.2rem;border-right:.1rem solid #384256}.content__container{width:100%;padding:.5rem 1.2rem;margin-left:.5rem;overflow-x:hidden}footer{width:100%;display:flex;padding:1rem 2rem;align-items:center;margin-top:.8rem;justify-content:space-between;background:#2a3447;color:#fff}footer span{letter-spacing:.1rem}footer span:first-child{font-weight:500}footer span:last-child{font-size:.8rem}.menu__container{display:flex;flex-direction:column;align-items:start;justify-content:space-between;gap:1.5rem}.menu__container .menu__item-wrapper{display:flex;align-items:start;justify-content:space-between;gap:.7rem;flex-direction:column}.menu__container .menu__item-wrapper .menu__title{color:#ddd;font-size:.8rem;text-transform:uppercase}.menu__container .menu__list{display:flex;flex-direction:column;padding:.4rem;gap:.7rem}.menu__container .menu__list-item{display:flex;align-items:center;gap:.5rem;color:#fff;font-size:.9rem}.menu__container .menu__list-item span{text-transform:capitalize}.nav__menu{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem}.nav__menu .logo{display:flex;align-items:center;gap:.7rem}.nav__menu .nav__right{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:1.3rem}.nav__menu .nav__right .nav__icons{display:flex;align-items:center;justify-content:space-between;gap:1rem}.nav__menu .nav__right .nav__notification{position:relative}.nav__menu .nav__right .nav__notification span{position:absolute;width:1.2rem;height:1.2rem;background-color:red;font-size:.7em;border-radius:50%;display:flex;align-items:center;justify-content:center;top:-.5rem;right:-.7rem}.nav__menu .nav__right .nav__profile{display:flex;align-items:center;justify-content:space-between;gap:.8rem}.nav__menu .nav__right .nav__profile img{height:1.8rem;width:1.8rem;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;object-fit:cover}.nav__menu .nav__right .nav__profile span{font-size:.9rem}.top__container{display:flex;flex-direction:column}.top__container h1{margin-bottom:.5rem}.top__container .top__lists{display:flex;flex-direction:column;gap:1.2rem;padding-top:1.2rem}.top__container .top__lists .top__list{display:flex;align-items:center;justify-content:space-between}.top__container .top__lists .top__list .top__list-left{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.top__container .top__lists .top__list .top__list-left img{width:3rem;height:3rem;object-fit:cover;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.top__container .top__lists .top__list .top__list-left .top__left-info{display:flex;flex-direction:column}.top__container .top__lists .top__list .top__list-left .top__left-info span:first-child{font-weight:600;font-size:.9rem}.top__container .top__lists .top__list .top__list-left .top__left-info span:last-child{font-size:.7rem}.top__container .top__lists .top__list .top__list-right span{font-weight:600}.line{display:flex;justify-content:space-between;height:100%;width:100%;gap:.8rem}.line .line__info{display:flex;flex-direction:column;justify-content:space-between;flex:3}.line .line__info .line__total{display:flex;gap:.6rem;align-items:center}.line .line__info .line__total span:first-child{font-size:1.2rem}.line .line__info .line__total span:last-child{font-size:1.2rem;font-weight:400}.line .line__info .line__total-number{font-size:1.5rem;font-weight:700}.line .line__chart-info{display:flex;flex-direction:column;justify-content:space-between;flex:4}.line .line__chart-info .line__chart{width:100%;height:100%}.line .line__chart-info .line__chart-text{display:flex;flex-direction:column;text-align:right;justify-content:space-between}.bar__info{width:100%;height:100%;display:flex;flex-direction:column}.bar__info span{font-weight:600}.area__info{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between}.area__info span{font-weight:600;font-size:1.1rem}.area__info .area__chart{width:100%;height:300px}.pie__info{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between}.pie__info .pie__chart{width:100%;height:400px}.pie__info .pie__options{display:flex;justify-content:space-between;gap:1rem}.pie__info .pie__options .pie__option{display:flex;flex-direction:column;align-items:center;gap:.3rem}.pie__info .pie__options .pie__option .pie__option_title{display:flex;align-items:center;font-size:.8rem;gap:.3rem}.pie__info .pie__options .pie__option .pie__option_title .pie__title-circle{width:.6rem;height:.6rem;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.table{background:#fff}.table .table__grid{padding:1.2rem;font-size:.8rem}.table .table__grid .MuiDataGrid-toolbarContainer{flex-direction:row-reverse;margin-bottom:.5rem}.table .table__grid img{width:2rem;height:2rem;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;object-fit:cover}.table .table__grid .user__action{display:flex;align-items:center;gap:.7rem;font-size:1rem}.table .table__grid .user__action .user__action-edit{color:green}.table .table__grid .user__action .user__action-delete{color:tomato;font-size:1.2rem}.add{width:100vw;height:100vh;position:absolute;top:0;left:0;background-color:#000000b9;display:flex;align-items:center;justify-content:center}.add .add__modal{padding:50px;border-radius:10px;background-color:#2a3447;position:relative}.add .add__modal h1{margin-bottom:40px;font-size:24px;color:#ddd}.add .add__modal .close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:1.8rem}.add .add__modal form{display:flex;flex-wrap:wrap;max-width:500px;justify-content:space-between}.add .add__modal form .add__modal-item{width:40%;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.add .add__modal form .add__modal-item label{font-size:14px}.add .add__modal form .add__modal-item input{padding:10px;background-color:transparent;color:#fff;outline:none;border:1px solid #ddd;border-radius:3px}.add .add__modal form button{width:100%;padding:10px;cursor:pointer;font-family:Poppins,sans-serif}.detail{display:flex;margin-bottom:1rem}.detail .detail__view{flex:1}.detail .detail__view .detail__info .detail__info-top{display:flex;align-items:center;gap:1.2rem}.detail .detail__view .detail__info .detail__info-top img{width:5.5rem;height:5.5rem;border-radius:1.2rem;object-fit:cover;-webkit-border-radius:1.2rem;-moz-border-radius:1.2rem;-ms-border-radius:1.2rem;-o-border-radius:1.2rem}.detail .detail__view .detail__info .detail__info-top h1{font-weight:500;font-size:1.6rem}.detail .detail__view .detail__info .detail__info-top button{padding:.5rem .9rem;border-radius:.5rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;-ms-border-radius:.5rem;-o-border-radius:.5rem;font-size:.9rem}.detail .detail__view .detail__info .detail__info-items{font-size:1.2rem}.detail .detail__view .detail__info .detail__info-items .detail__info-item{margin:1.2rem 0rem}.detail .detail__view .detail__info .detail__info-items .detail__info-item span{font-weight:400;margin-right:.5rem;text-transform:capitalize}.detail .detail__view hr{width:90%;height:0;border:.5px solid gray;margin:1.8rem 0rem}.detail .detail__view .detail__chart{margin-top:3rem;width:80%;height:22rem}.detail .detail__activities{flex:1}.detail .detail__activities h2{margin-bottom:1rem}.detail .detail__activities ul li{list-style-type:none;position:relative;width:.1rem;padding-top:2rem;background-color:#f45b69}.detail .detail__activities ul li:after{content:"";position:absolute;left:50%;bottom:0;width:.8rem;height:.8rem;border-radius:50%;background-color:#f45b69;transform:translate(-50%)}.detail .detail__activities ul li div{min-width:25rem;padding:1rem;background-color:#f45b6810}.detail .detail__activities ul li div p{margin-bottom:.3rem}.detail .detail__activities ul li div time{font-size:.7rem}.home__container{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(10rem,auto);gap:1.1rem}.home__container .box{border:.1rem solid #384256;border-radius:.5rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;-ms-border-radius:.5rem;-o-border-radius:.5rem;padding:.8rem}.home__container .box1,.home__container .box4{grid-column:span 1;grid-row:span 3}.home__container .box7{grid-column:span 2;grid-row:span 2}.products{display:flex;flex-direction:column;gap:1rem}.products .products__info{display:flex;align-items:center;gap:1rem}.products .products__info button{padding:.3rem .6rem;border-radius:.5rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;-ms-border-radius:.5rem;-o-border-radius:.5rem}.login{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#f0f0f0}.login .login__wrapper{max-width:300px;margin:0 auto;padding:20px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;justify-content:center;flex-direction:column}.login .login__wrapper button{padding:10px 15px;background-color:#007bff;color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:16px;width:100%;margin-bottom:.5rem}.login .login__wrapper button:focus{outline:none}.login .login__wrapper button:hover{background-color:#0056b3}.login .login__wrapper span{color:#033367;display:block;margin-bottom:.4rem;padding:.5rem;text-transform:capitalize}.users{display:flex;flex-direction:column;gap:1rem}.users .users__info{display:flex;align-items:center;gap:1rem}.users .users__info button{padding:.3rem .6rem;border-radius:.5rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;-ms-border-radius:.5rem;-o-border-radius:.5rem}