.main{margin:7% auto 0;max-width:100%;width:30%;position:relative}.main .description span{font-size:30px}.main .description p{color:gray}.main .menu{margin-top:30px}.main .menu .title{display:block;font-size:20px;margin-bottom:5px;margin-top:30px}.main .menu .container{background:rgb(218,218,218);padding:10px;border-radius:10px}.main .menu .container .item{display:flex;flex-direction:row;color:black;padding:9px;border-radius:10px;transition:all .3s ease-in-out;align-items:center;cursor:pointer}.main .menu .container .item .icon{align-items:center;flex-shrink:1;justify-content:center;margin-right:10px}.main .menu .container .item:focus,.main .menu .container .item:hover{background:white;color:black}.main .submenu{margin-bottom:50px}.main .submenu .return{display:flex;align-items:center;max-width:-moz-fit-content;max-width:fit-content;padding:10px;border-radius:8px;background:rgb(122,122,122);color:white;margin-bottom:15px;cursor:pointer}.main .submenu .description .wajib{color:red}.main .submenu .description .subtitle{display:flex;align-items:center;font-size:25px}.main .submenu .description .subtitle .icon{margin-right:10px;width:30px;height:auto}.main .submenu form{min-width:100%;margin:30px auto 0}.main .submenu form label{display:block;margin-bottom:3px}.main .submenu form input,.main .submenu form select{width:100%;padding:10px 12px;border-radius:5px;outline:none;border:1px solid gray;margin-bottom:15px}.main .submenu form select{background-color:#fff;font-size:14px;color:#333;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}.main .submenu form option{padding:10px;font-size:14px;color:#333}.main .submenu form label{display:flex;align-items:center}.main .submenu form .wajib{font-size:20px;color:red}.main .submenu form label .info{display:flex;flex-direction:column}.main .submenu form label .info .hint{font-size:12px}.main .submenu button{margin-top:20px;width:100%;padding:10px;background:#2c3e50;color:white;border:none;outline:none;border-radius:5px;text-transform:uppercase;letter-spacing:5px;transition:all .3s ease-in-out;cursor:pointer}.main .submenu button:hover{transform:scale(1.1);transition:all .3s ease-in-out}.main .submenu .loading{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}.main .submenu .loading .icon{display:inline-block;width:40px;height:auto;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.main .submenu .users{margin-top:50px;margin-bottom:100px}.main .table-container{width:70vw;max-width:100vw;position:relative;left:50%;transform:translateX(-50%);overflow-x:auto}.main .submenu .table-container .user-table{margin:0 auto;min-width:800px;border-collapse:collapse;font-size:14px;text-align:left}.main .submenu .table-container .user-table td,.main .submenu .table-container .user-table th{width:10%;padding:10px;border-bottom:1px solid #ddd;vertical-align:middle;word-break:break-all}.main .submenu .table-container .user-table th{background-color:#2d3748;color:white}.main .submenu .table-container .user-table tr:nth-child(2n){background-color:#f9f9f9}.main .submenu .table-container .user-table tr:hover{background-color:#edf2f7}.main .submenu .barcode{margin-top:50px;display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center}.main .submenu .barcode .description{display:grid;grid-template-columns:1fr auto;grid-gap:50px;gap:50px;margin-bottom:-15px}.main .submenu .barcode .description span{font-size:15px}.main .submenu .barcode .button{width:50%}.main .submenu .barcode .button button{display:flex;flex-direction:row;align-items:center;justify-content:center}.main .submenu .barcode .button button .icon{margin-right:7px;width:20px;height:auto}@media (max-width:600px){.main{margin-top:25%;width:100%;padding:0 20px}.main .submenu .users .table-container{width:90vw}.main .submenu .table-container .user-table td,.main .submenu .table-container .user-table th{width:5%}}