#root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;background-color:#d9d9d980;--border-color: #555555;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;height:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}}.header-modal{display:flex;align-items:center;justify-content:space-between}.header-text{display:flex;flex-direction:column;justify-content:start;align-items:self-start;margin-bottom:20px}.title{font-size:1.5rem;font-weight:700}.drop-file-input{position:relative;min-width:200px;width:100%;height:300px;border:3px dashed #555555;border-radius:20px;display:flex;align-items:center;justify-content:center;background-color:var(--background-color);margin-bottom:20px}.drop-file-input input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.drop-file-input:hover,.drop-file-input.dragover{opacity:.6}.drop-file-input__label{text-align:center;color:var(--txt-second-color);font-weight:600;padding:10px}.drop-file-input__label img{width:100px}.drop-file-preview{margin-top:20px;margin-bottom:20px}.drop-file-preview p{font-weight:500}.drop-file-preview__title{margin-bottom:20px}.drop-file-preview__item{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:var(--color-bg);padding:5px 12px;border-radius:20px;border:2px solid var(--border-color)}.drop-file-preview__item__del{background-color:var(--box-bg);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--box-shadow);cursor:pointer}.drop-file-preview__item:hover .drop-file-preview__item__del{opacity:1}#navbar{position:sticky;top:0;background-color:#505050;z-index:100;display:flex;height:60px;justify-content:space-between;font-family:Roboto,sans-serif;font-weight:700}#navbar .nav-title{color:#fff;align-items:center;display:flex;margin-left:20px;font-size:18;cursor:pointer}#navbar .nav-hamburger{display:none;color:gray}#navbar .nav-list{display:flex;align-items:center;justify-content:space-between;width:100%}#navbar .nav-list ul{list-style-type:none;display:flex;align-items:center;justify-content:center;width:100%;margin:0;height:100%}#navbar .nav-list ul .nav-user-mobile{display:none}#navbar .nav-list ul li{height:100%;display:flex;align-items:center}#navbar .nav-list ul .nav-item{color:#fff;text-decoration:none;font-size:18;font-weight:700;margin:0 20px}#navbar .nav-list ul :hover{background-color:#fff}#navbar .nav-list ul :hover .nav-text{color:#000}#navbar .user{display:flex}#navbar .nav-user{color:#fff;align-items:center;display:flex;margin-right:20px;font-size:18;cursor:pointer}#navbar .nav-user .nav-user-text{margin-left:5px}#navbar .nav-logout{color:#fff;align-items:center;display:flex;margin-right:20px;font-size:18;cursor:pointer}#navbar .nav-logout .nav-logout-text{margin-left:5px}@media screen and (max-width: 768px){#navbar .nav-hamburger{display:flex;color:gray;align-items:center;margin-right:20px;cursor:pointer}#navbar .nav-list{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:fixed;top:60px;right:-400px;width:300px;height:100vh;background:#505050;box-shadow:0 40px 60px #0000001a;padding:40px 0 0 10px;transition:.3s ease-in-out}#navbar .nav-list ul{display:flex;flex-direction:column;align-items:flex-start;width:auto;margin:16px 0;height:auto}#navbar .nav-list ul li{height:auto}#navbar .nav-list ul .nav-item{margin:0}#navbar .nav-list.active{right:0}#navbar .nav-list li{margin-bottom:25px}}#login-page{padding:50px;display:flex;justify-content:flex-end;align-items:center;min-height:calc(100vh - 50px);box-sizing:border-box}@media screen and (max-width: 1040px){#login-page .image-logo{display:none}}@media screen and (max-width: 1250px){#login-page .image-logo img{width:720px;height:405px}}#login-page .login-container{display:flex;align-items:center;justify-content:right;width:100%}@media screen and (max-width: 1040px){#login-page .login-container{justify-content:center}}#login-page .form{margin-top:79px}#login-page .login-form{background:#fff;padding:20px;border-radius:25px;box-shadow:0 0 10px #0000001a;height:520px;width:320px}#login-page .form-group{margin-bottom:15px}#login-page .group{display:flex;align-items:center;position:relative}#login-page .form-group label{display:block;text-align:left;color:#555;margin-bottom:5px}#login-page .form-group input{width:100%;padding:8px;box-sizing:border-box;background-color:#d9d9d980;border:none;border-radius:4px}#login-page .icon-container{display:flex;align-items:center;justify-content:center;background-color:#1e2772;height:35px;width:40px;border-radius:4px}#login-page button{width:100%;padding:10px;background-color:#1e2772;color:#fff;border:none;border-radius:8px;cursor:pointer}#login-page button:hover{background-color:#0056b3}#login-page .forget-group{display:flex;align-items:center;position:relative;justify-content:center;margin-bottom:30px}#login-page .forget-group .text{padding-right:5px}#login-page .forget-group .click{color:#1477f8;text-decoration:underline}#footer{width:100%;bottom:0}#footer .container{display:flex;position:relative;justify-content:space-between;align-items:center;color:#555;padding-right:50px;padding-bottom:10px}#footer .container .group-middle{position:absolute;left:50%;transform:translate(-50%);display:flex;justify-content:space-between;width:409px}#footer .container .group-right{margin-left:auto}#footer .container .group-middle span,#footer .container .group-right span{cursor:pointer}#footer .container .group-middle span:hover,#footer .container .group-right span:hover{text-decoration:underline}@media screen and (max-width: 1040px){#footer .container{justify-content:center;flex-direction:column;padding-right:0}#footer .container .group-middle{left:0;position:relative;transform:translate(0)}#footer .container .group-right{margin-left:0}}#detailPage{display:flex;justify-content:center;min-height:100vh}#detailPage .detail-box{padding:30px;margin:30px;background-color:#fff;border-radius:15px;width:80%;max-width:1200px}#detailPage .detail-box .detail-header{display:flex;align-items:center;gap:50}#detailPage .detail-box .detail-header .header-text{margin:0 15px;font-weight:700;cursor:pointer}#detailPage .detail-box .detail-header .header-text:hover{color:#00f}#detailPage .detail-box .detail-header .header-item-text{margin-left:15px;color:#ce5347;font-weight:700}#detailPage .detail-box hr{margin:25px;background-color:#d9d9d980;border:0px;height:2px}#detailPage .detail-box .detail-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:25px}#detailPage .detail-box .detail-bar .wrap{display:flex;align-items:center}#detailPage .detail-box .detail-bar .class{display:flex;align-items:center;margin-right:22px}#detailPage .detail-box .detail-bar .class .class-text{margin-left:10px;font-weight:700}#detailPage .detail-box .detail-bar .result-btn{padding:12px;background-color:#1477f8;border-radius:6px;display:flex;align-items:center;height:40px;margin-right:22px}#detailPage .detail-box .detail-bar .btn-text{margin-left:6px;font-size:14px;font-weight:600;color:#fff}#detailPage .detail-box .image-wrapper{display:inline-block;max-width:1200px}#detailPage .detail-box .image-wrapper .image{height:100%;width:100%;object-fit:contain}#detailPage .detail-box .image-wrapper .image-control{display:flex;justify-content:center}#detailPage .detail-box .image-wrapper .image-control .arrow:hover{color:#00f}#detailPage .detail-box .image-wrapper .image-dot{display:flex;justify-content:space-between;align-items:center}@media screen and (max-width: 768px){#detailPage .wrap{justify-content:space-between;margin-bottom:10px}}#archive-page{display:flex;justify-content:center;min-height:calc(100vh - 50px)}#archive-page .archive-container{margin:30px;padding:30px;background-color:#fff;border-radius:15px;width:80%;max-width:1200px;height:fit-content}#archive-page .archive-head{display:flex;align-items:center;gap:50px}#archive-page .title{font-weight:600;color:#4d5e80}#archive-page .search{width:75%;background-color:#d9d9d980}#archive-page .table{height:700;width:100%;margin-top:10px}#userbox{display:flex;justify-content:center}#userbox .user-container{margin:30px 30px 80px;padding:30px;background-color:#fff;border-radius:15px;width:80%;max-width:1200px}#userbox .user-head{display:flex;align-items:center;justify-content:space-between;gap:50}#userbox .title{font-weight:600;color:#4d5e80}#userbox .user-search{background-color:#d9d9d980;width:75%}#userbox .add-button{display:flex;justify-content:center;align-items:center;color:#000;font-weight:600;background-color:#9dcb96;width:150px;border-radius:20px}#userbox .table-container{height:700;width:100%;margin-top:10px}#userbox div.MuiTablePagination-actions{display:flex}#userbox div.MuiDataGrid-cell,#userbox div.MuiDataGrid-footerContainer,#userbox div.css-tgsonj{overflow:visible}#userbox .action-container{display:flex;margin-top:15px;justify-content:center;gap:10px}#userbox button{height:35px;width:40px;border-radius:4px;padding:5px;text-align:center;display:flex;justify-content:center;align-items:center}#userbox .icon-container{background-color:#f5f6f7}#userbox .bin-container{background-color:#ce5347}#userbox .tooltip{position:relative;display:inline-block}#userbox .tooltip .tooltiptext{visibility:hidden;display:flex;background-color:#d9d9d9;justify-content:center;align-items:center;color:#000;font-weight:600;text-align:center;border-radius:6px;padding:5px;position:absolute;z-index:9999;top:100%;opacity:0;margin-top:2px;transition:opacity .3s}#userbox .tooltip .tooltiptext:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px}#userbox .tooltip:hover .tooltiptext{visibility:visible;opacity:1}#adduser-modal{display:flex;justify-content:center;align-items:center}#adduser-modal .modal-box{background-color:#fff;padding:20px;border-radius:8px;max-width:700px;width:100%}#adduser-modal .modal-head{display:flex;justify-content:space-between}#adduser-modal .line{display:block;width:100%;height:2px;background-color:#f5f6f7;margin:10px 0}#adduser-modal .title{font-weight:700}#adduser-modal .close-icon{cursor:pointer}#adduser-modal .form-group{display:flex;justify-content:space-between;align-items:center;color:#000;margin-bottom:10px}#adduser-modal .error{color:#ed1313;font-weight:600;margin-right:-50px}#adduser-modal .error-username{color:#ed1313;font-weight:600;margin-right:-85px}#adduser-modal .input-error{border:1px solid rgb(237,19,19);background-color:#f6f6f4;border-radius:5px;padding-left:10px;width:50%;height:40px}#adduser-modal .input{width:50%;height:40px;border:none;background-color:#f6f6f4;border-radius:5px;padding-left:10px}#adduser-modal .button-container{display:flex;justify-content:center;gap:30px;align-items:center}#adduser-modal button{width:120px;padding:5px;border-radius:25px;margin-top:10px}#adduser-modal .cancel{border:3px solid #d3d3d3;background-color:#fff;color:#000}#adduser-modal .confirm{border:3px solid #1d7c4d;background-color:#1d7c4d;color:#fff}#resetpassword-modal{display:flex;justify-content:center;align-items:center}#resetpassword-modal .modal-box{background-color:#fff;padding:20px;border-radius:8px;max-width:700px;width:100%}#resetpassword-modal .modal-head{display:flex;justify-content:space-between}#resetpassword-modal .line{display:block;width:100%;height:2px;background-color:#f5f6f7;margin:10px 0}#resetpassword-modal .title{font-weight:700}#resetpassword-modal .close-icon{cursor:pointer}#resetpassword-modal .form-group{display:flex;justify-content:space-between;align-items:center;color:#000;margin-bottom:10px}#resetpassword-modal .form-group label{margin-top:10px}#resetpassword-modal .error{color:#ed1313;font-weight:600;margin-right:-20px}#resetpassword-modal .input-error{width:50%;height:40px;border:1px solid rgb(237,19,19);background-color:#f6f6f4;border-radius:5px;padding-left:10px;margin-top:10px}#resetpassword-modal .input{width:50%;height:40px;border:none;background-color:#f6f6f4;border-radius:5px;padding-left:10px;margin-top:10px}#resetpassword-modal .button-container{display:flex;justify-content:center;gap:30px;align-items:center}#resetpassword-modal button{width:120px;padding:5px;border-radius:25px;margin-top:10px}#resetpassword-modal .cancel{border:3px solid #d3d3d3;background-color:#fff;color:#000}#resetpassword-modal .confirm{border:3px solid #d6a243;background-color:#d6a243;color:#fff}#delete-modal{display:flex;justify-content:center;align-items:center}#delete-modal .modal-box{background-color:#fff;padding:20px;border-radius:8px;max-width:450px;width:100%}#delete-modal .modal-head{display:flex;justify-content:space-between;margin-bottom:10px}#delete-modal .title{font-weight:700;color:#6b7a99}#delete-modal .close-icon{cursor:pointer}#delete-modal .button-container{display:flex;justify-content:center;gap:30px;align-items:center;margin-top:10px}#delete-modal button{width:120px;padding:5px;border-radius:25px;margin-top:10px}#delete-modal .cancel{border:3px solid #d3d3d3;background-color:#fff;color:#000}#delete-modal .confirm{border:3px solid #ce5347;background-color:#ce5347;color:#fff}