.modal{display:flex;max-width:500px;max-height:400px;border:2px solid var(--color-border);border-radius:10px;background-color:var(--color-header-bg);color:var(--color-icon-filter);position:relative;padding-bottom:15px;transition:transform .3s ease,opacity .3s ease;transform:scale(1);opacity:1}.modal-hidden{transform:scale(.9);opacity:0}.user-info-main{padding-top:20px;margin-left:20px;width:300px}.user-info-details{padding:10px}.users-photo{border:2px solid var(--color-icon-remove);border-radius:50%;width:180px}.fetched-data{margin:10px 0 0 5px}.feature{margin:10px 0 3px 5px;color:var(--color-text-main);font-weight:700}.feature span{color:var(--color-icon-filter);font-weight:400}.close-btn{height:30px;position:absolute;right:0;margin:7px 7px 0 0;background-color:var(--main-color-bg);border:2px solid var(--color-border-input);border-radius:6px;transition:all ease .3ms;cursor:pointer;display:flex;align-items:center;justify-content:center}.close-btn:hover{background-color:var(--hover-color-btn);transform:scaleY(1.02);transition:all ease .3ms}.close-btn i{font-size:16px;line-height:1;color:var(--color-female-text)}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;transition:opacity .3s ease;opacity:1}.overlay-hidden{opacity:0;pointer-events:none}.modal-content{display:flex;flex-direction:column;width:600px;height:720px;border:2px solid var(--color-border);border-radius:10px;background-color:var(--color-header-bg);color:var(--color-icon-filter);position:relative;padding:15px;transition:transform .3s ease,opacity .3s ease;transform:scale(1);opacity:1}.modal-content-hidden{transform:scale(.9);opacity:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.form-grid div{display:flex;flex-direction:column}label{font-weight:700;margin-bottom:5px}input,select{padding:8px;border:1px solid var(--color-border);border-radius:4px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal-actions button{border-radius:6px;cursor:pointer;height:40px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background-color:var(--color-btn-primary);border:none;box-shadow:1px 1px 4px var(--color-btn-primary);padding:0 12px;transition:all ease .3ms;font-weight:bolder}.modal-actions button:hover{background-color:var(--color-btn-primary-hover);transform:scaleY(1.02);transition:all ease .3ms}.modal-actions button[type=button]{background:var(--color-border);color:var(--color-icon-filter);border:2px solid var(--color-border-input);box-shadow:none;transition:none}:root{--color-bg: #ffffff;--color-text-main: #2E3B52;--color-text-secondary: #464F60;--color-text-muted: #868FA0;--color-text-placeholder: #A1A9B8;--color-border: #ccc;--color-border-input: #ababab;--color-border-input-hover: #898989;--border-fetch-color: #14804A;--color-header-bg: #F4F7FC;--color-row-hover: #F2F5FA;--color-row-selected: #EBF0FA;--main-color-bg: white;--color-btn-primary: #2264E5;--color-btn-primary-hover: #1952c5;--fetch-new-bg-color:#E1FCEF;--text-fetch-color: #14804A;--color-icon-filter: #464F60;--color-icon-search: #868FA0;--color-icon-remove: #D12953;--color-male-text: #4F5AED;--color-male-bg: #F0F1FA;--color-female-text: #D12953;--color-female-bg: #FAF0F3;--hover-color-btns: rgb(232, 232, 232)}.dark{--color-bg: #1E1F25;--color-text-main: #E4E7EC;--color-text-secondary: #C1C7D0;--color-text-muted: #9AA3B2;--color-text-placeholder: #6B7280;--color-border: #3A3D46;--color-border-input: #3A3D46;--color-border-input-hover: #555A66;--border-fetch-color: #225c40;--color-header-bg: #2A2D36;--color-row-hover: #2F3340;--color-row-selected: #303B52;--main-color-bg: #1E1F25;--color-btn-primary: #3B82F6;--color-btn-primary-hover: #2563EB;--fetch-new-bg-color:#a9cfbd;--text-fetch-color: #05592f;--color-icon-filter: #C1C7D0;--color-icon-search: #9AA3B2;--color-icon-remove: #F87171;--color-male-text: #818CF8;--color-male-bg: #2E334F;--color-female-text: #FB7185;--color-female-bg: #4A2C33;--hover-color-btns: #2c2d34}body{font-family:Inter,sans-serif;display:flex;flex-direction:column;align-items:center;background-color:var(--main-color-bg)}.loading,.remove{color:var(--color-text-main)}header{padding:15px;display:flex;gap:12px;justify-content:end}header a{text-decoration:none;color:inherit}header i{font-size:26px;color:var(--color-text-main)}header button{background-color:transparent;border:none;padding:0;cursor:pointer;transition:all ease .1s}.table{display:flex;flex-direction:column;width:100%;max-width:1440px;margin:0 auto;font-size:14px}.functional-block{display:flex;justify-content:space-between;padding:15px}.left-block,.right-block{display:flex;gap:10px;align-items:center}.header-row,.user-table-row{display:grid;grid-template-columns:50px 1.5fr 1.5fr 2fr 1fr 1fr 2fr 3fr 1.3fr 1.2fr;gap:8px;align-items:center;padding:8px;border-top:none;color:var(--color-text-main)}.user-table-row{border:1px solid var(--color-border)}#filter-icon,#search-icon{font-size:16px}#filter-icon{color:var(--color-icon-filter)}#search-icon{color:var(--color-icon-search);margin-left:8px}.search-field{display:flex;align-items:center;border-radius:6px;background-color:var(--color-bg);border:2px solid var(--color-border-input);transition:all ease .3ms}.search-field:hover{border:2px solid var(--color-border-input-hover);transition:all ease .3ms}.filter-btn,.add-new-user-btn,.remove-btn,.reload-page-btn{border-radius:6px;gap:5px;cursor:pointer;height:40px;display:inline-flex;align-items:center;justify-content:center}.filter-btn,.remove-btn,.reload-page-btn{padding:0 12px;background-color:var(--main-color-bg);border:2px solid var(--color-border-input);transition:all ease .3ms}.filter-btn:hover,.remove-btn:hover,.reload-page-btn:hover{background-color:var(--hover-color-btns);transform:scaleY(1.02);transition:all ease .3ms}.fltr{font-weight:bolder;color:var(--color-text-main)}.reset-btn{border:none}.active{border:2px solid var(--color-text-main)}.filter-btn i,.remove-btn i,.reload-page-btn i{font-size:16px;line-height:1}.remove-btn i{color:var(--color-icon-remove)}.reload-page-btn i{color:var(--color-icon-search)}.remove-block p{margin:0;white-space:nowrap}.add-new-user-btn{color:#fff;background-color:var(--color-btn-primary);border:none;box-shadow:1px 1px 4px var(--color-btn-primary);padding:0 12px;transition:all ease .3ms}.add-new-user-btn:hover{background-color:var(--color-btn-primary-hover);transform:scaleY(1.02);transition:all ease .3ms}.search-field input{border:none;font-size:14px;outline:none;background-color:var(--color-bg);color:var(--color-text-placeholder)}.header-cell,.table-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-cell{color:var(--color-text-secondary);background-color:transparent;border:none;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:4px}.table-header{background-color:var(--color-header-bg);border-top-right-radius:8px;border-top-left-radius:8px;border:1px solid var(--color-border)}.male,.female{border:none;border-radius:10px;padding:1px 10px;width:52px;text-align:center;font-weight:500}.male{color:var(--color-male-text);background-color:var(--color-male-bg)}.female{color:var(--color-female-text);background-color:var(--color-female-bg)}.user-table-row:hover{background-color:var(--color-row-hover)}.selected{background-color:var(--color-row-selected);border-left:2px solid var(--color-btn-primary)}.remove-block{display:flex;align-items:center;gap:8px}.sort-icon i{font-size:18px;line-height:1;margin-left:4px}.user-table-row:last-of-type{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.empty-message{color:var(--color-text-main);display:flex;flex-direction:column;align-items:center;border-top:none;border:1px solid var(--color-border);padding-bottom:30px;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.empty-message button{display:flex;align-items:center;justify-content:center;color:var(--text-fetch-color);font-weight:700;background-color:var(--fetch-new-bg-color);font-size:16px;border:none;border-radius:10px;width:200px;cursor:pointer;padding:5px;transition:all .1s ease}.empty-message button:hover{border:2px solid var(--border-fetch-color);background-color:#c6e9d8;transition:all .1s ease}.empty-message i{font-size:20px;margin-right:8px;color:#d12953}.pagination{display:flex;gap:8px;justify-content:center;margin:20px 0}.pagination button{color:var(--color-text-main);padding:6px 12px;border:1px solid var(--color-border);border-radius:6px;background:var(--main-color-bg);cursor:pointer}.pagination button.active{background-color:var(--hover-color-btns)}