@font-face{font-family:Sansation;font-weight:400;src:url(/users-table/assets/Sansation-Regular-Ci-RFgJ1.ttf) format("truetype")}@font-face{font-family:Sansation;font-weight:700;src:url(/users-table/assets/Sansation-Bold-5AZHVlNU.ttf) format("truetype")}:root{--white: #eee;--blue: #2a2781;--blue-dimmed: #171559;--orange: #e86630;--bg-color: var(--white);--header-bg-color: var(--blue);--footer-bg-color: var(--blue);--main-font-color: var(--white);--table-options-bg-color: var(--orange);--td-border-color: #00000055;--select-bg-color: var(--blue);--modal-bg: var(--white);--modal-border-color: var(--orange);--user-info-item-bg: var(--blue)}*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,a,table,td,tr,th,input,li,ul,ol{margin:0;padding:0}input,button,select,option{font-family:inherit}ol,ul{list-style:none}#root{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:5px;block-size:100dvh;font-family:Sansation,sans-serif;font-weight:400;font-size:12px;background-color:var(--bg-color)}.footer{background-color:var(--footer-bg-color);inline-size:100%;block-size:40px}.header{inline-size:100%;padding:10px;background-color:var(--header-bg-color);color:var(--main-font-color)}.table-options-form{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:10px;background-color:var(--table-options-bg-color);color:var(--main-font-color);font-weight:700;border-radius:5px}.table-options__input{padding:5px;background-color:var(--select-bg-color);color:var(--main-font-color);border-radius:5px;transition:box-shadow .3s ease}.table-options__input:focus{outline:none}.table-options__input:hover{box-shadow:3px 3px #000}.users-table{inline-size:100%;max-inline-size:1400px;block-size:100%;flex-grow:1;border-collapse:collapse;border:3px solid #000;font-size:clamp(8px,6.54px + .39vw,12px)}.table-placeholder{position:relative;block-size:100%;inline-size:100%}th,td{padding:5px}th{letter-spacing:1.5px}tbody td{text-align:center}thead th{border:3px solid #000}tbody td{border:1px solid var(--td-border-color)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:10;animation:fadeIn .2s ease}.modal-content{position:relative;max-inline-size:700px;max-block-size:90%;padding:10px;background-color:var(--modal-bg);font-family:Sansation,sans-serif;font-weight:400;font-size:12px;border:2px solid var(--modal-border-color);border-radius:10px}.modal-close{position:absolute;block-size:30px;inline-size:40px;inset-block-start:6px;inset-inline-end:6px;border-radius:5px;transition:background-color .3s ease,transform .2s ease}.modal-close:focus{outline:none}.modal-close:hover{transform:scale(1.1);background-color:var(--orange)}.user-info{font-size:16px}.user-info__avatar{object-fit:cover;object-position:center;border:2px solid var(--orange);box-shadow:3px 3px #000}.user-info__list{display:grid;grid-template-columns:max-content;padding:10px 5px;gap:5px}.user-info__list-item{padding:0 5px;background-color:var(--user-info-item-bg);color:var(--main-font-color);border-radius:5px}.users-table__row{block-size:25px;transition:background-color .2s ease-out}.users-table__row:hover{background-color:#fff}.pagination{display:flex;justify-content:center;align-items:center;gap:10px}.pagination__item{border-radius:6px;block-size:25px;inline-size:25px;transition:background-color .3s ease,transform .2s ease}.pagination__item svg{fill:var(--white)}.pagination__item:not(.pagination__current-page):hover{transform:scale(1.1);background-color:var(--blue-dimmed)}.pagination__current-page{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;background-color:var(--orange)}.pagination__prev-page,.pagination__next-page{background-color:var(--blue)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader{position:absolute;inset-inline-start:50%;inset-block-start:50%;translate:-50% -50%;block-size:40px;inline-size:40px;border:4px solid rgb(0 0 0 / .25);border-block-start-color:#000;border-radius:50%;animation:spin 1.5s ease infinite}