body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    color: var(--FC);
    font-family: var(--FF);
    font-weight: normal !important;
    background: var(--MB);
    background-size: cover;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.INITAL {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: var(--FC-PH);
    font-size: calc(var(--FS) - 3px);
    pointer-events: none;
}

.LOGO {
    position: absolute;
    width: 60%;
    height: 60%;
    transition: opacity 0.3s ease;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    background-color: var(--FC);
}

.LOGO_DESKTOP {
    -webkit-mask-image: url('/img/TR.svg');
    mask-image: url('/img/TR.svg');
    opacity: 1;
}

.LOGO_MOBILE {
    -webkit-mask-image: url('/img/TB_Single.svg');
    mask-image: url('/img/TB_Single.svg');
    opacity: 0;
}

.FORM {
    width: 100%;
    height: 100%;
}

.LOGIN_BODY {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.LOGIN_FORM {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.LOGIN_LOGO {
    width: 400px;
    margin: 20px;
    margin-right: 0px;
}

.LOGIN_TEXT {
    font-size: calc(var(--FS) + 12px);
}

.LOGIN_info,
.LOGIN_system,
.LOGIN_warning,
.LOGIN_error {
    text-align: center;
    max-width: 70%;
    margin-bottom: 10px;
}

.LOGIN_info {
    color: #e7d84e;
}

.LOGIN_system {
    color: #a53e3e;
}

.LOGIN_warning {
    color: #ca4f16;
}

.LOGIN_error {
    color: #b42020;
}

.LOGIN_PW_RESET,
.LOGIN_2FA_ASK {
    outline: none;
    background-color: transparent;
    border: none;

    color: #e7d84e;
    text-decoration: underline;
    margin: 10px;
}

.LOGIN_PW_RESET:hover,
.LOGIN_2FA_ASK:hover {
    color: var(--FC);
}

.REQUEST_ERROR_CODE {
    color: #a53e3e;
    margin-bottom: 0;
}

.REQUEST_ERROR_MESSAGE {
    color: #a53e3e;
    margin-top: 4px;
}

.QRCODE {
    width: 200px;
    margin: 20px;
}

.SMALL_QRCODE {
    width: 120px;
    margin: 10px;
    filter: blur(4px);
    transition: filter 1s ease-in-out;
}

.QRCODE-RESPONSE {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 8);
}

.GRID {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: transparent;
}

.GRID.full_collapsed {
    display: flex !important;
    grid-template-columns: none !important;
}

.GRID.full_collapsed .TOOLBAR {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.GRID.full_collapsed .TOOLBAR .LOGO_DESKTOP,
.GRID.full_collapsed .TOOLBAR .NAV-BTN,
.GRID.full_collapsed .TOOLBAR .NAV-BTN-TEXT,
.GRID.full_collapsed .TOOLBAR .NAV-VERSION {
    opacity: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.GRID.full_collapsed .GRID-SWITCH {
    display: block !important;
}

.GRID-SWITCH {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 2%;
    width: 20px;
    height: 23px;
    outline: none;
    background-color: transparent;
    border: none;
    padding: 0;
    display: none;
}

.TOOLBAR {
    background-color: var(--TB);
    position: relative;
    z-index: 1;
    width: 250px;
    height: 100%;
    display: grid;
    grid-template-rows: 25% auto auto auto;
    box-sizing: border-box;
    transition: width 0.3s ease;
}

.TOOLBAR.collapsed {
    width: 80px !important;
}

.TOOLBAR.collapsed .LOGO_DESKTOP {
    opacity: 0;
}

.TOOLBAR.collapsed .LOGO_MOBILE {
    opacity: 1;
}

.TOOLBAR.collapsed .NAV-BTN,
.TOOLBAR.collapsed .NAV-VERSION {
    width: 60px !important;
    display: flex !important;
    justify-content: flex-start !important;
}

.TOOLBAR.collapsed .NAV-BTN-TEXT {
    opacity: 0 !important;
    max-width: 0 !important;
    margin-left: 0 !important;
    pointer-events: none !important;
}

.TOOLBAR.collapsed .LOGO_DESKTOP {
    opacity: 0;
}

.TOOLBAR.collapsed .LOGO_MOBILE {
    opacity: 1;
}

.TOOLBAR.collapsed .NAV-LOCATION-TEXT {
    font-size: var(--FS) !important;
}

.TOOLBAR-SWITCH {
    position: absolute;
    right: 0;
    top: 2%;
    width: 20px;
    height: 23px;
    outline: none;
    background-color: transparent;
    border: none;
    padding: 0;
}

.TOOLBAR,
.DASHBOARD {
    flex: 1 1 auto;
}

.LOGO-WRAPPER {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.TOOLS {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin-top: 20px;
}

.META {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    margin-bottom: 10px;
}

.DASHBOARD {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 10% 90%;
    background-color: transparent;
}

.HEADLINE {
    position: relative;
    z-index: 2;
    background-color: var(--MB);
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 70% 30%;
}

.HEADLINE-META {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 300px;
}

.GLOBAL_CAGE {
    display: none;
}

@media (max-width: 680px) {

    .DIR_TABLE td:nth-child(4),
    .DIR_TABLE th:nth-child(4),
    .DIR_TABLE td:nth-child(5),
    .DIR_TABLE th:nth-child(5),
    .DIR_TABLE td:nth-child(6),
    .DIR_TABLE th:nth-child(6),
    .DIR_TABLE td:nth-child(7),
    .DIR_TABLE th:nth-child(7) {
        display: none;
    }
}

@media (max-width: 768px) {
    body {
        --RSC: 0.8;
        overflow-y: hidden;
        position: fixed;
    }

    #PROGRESS-BAR-COUNT {
        font-size: calc(var(--FS) + 4px) !important;
    }

    .PROGRESS-BAR-CONTAINER {
        border-radius: 7px !important;
        width: 70% !important;
    }

    #PROGRESS-BAR {
        border-radius: 10px !important;
        height: 20px !important;
    }

    .IMG-CONTAINER {
        grid-template-columns: 50px 1fr 50px;
    }
}

@media (max-width: 880px) {

    .DIR_TABLE td:nth-child(5),
    .DIR_TABLE th:nth-child(5),
    .DIR_TABLE td:nth-child(6),
    .DIR_TABLE th:nth-child(6),
    .DIR_TABLE td:nth-child(7),
    .DIR_TABLE th:nth-child(7) {
        display: none;
    }
}

@media (max-width: 1000px),
(max-height: 850px) {
    .INFO {
        width: 80% !important;
    }

    .MESSAGE_BOX_CONTAINER {
        grid-template-rows: 40px auto 50px !important;
    }

    .NAV-LOCATION {
        grid-template-columns: 40px 1fr !important;
    }

    .NAV-LOCATION-EMP {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    .NAV-LOCATION-EMP div {
        height: 30px !important;
        width: 30px !important;
    }

    .NAV-LOCATION-TEXT {
        font-size: var(--FS) !important;
    }

    .HEADLINE-META {
        grid-template-columns: 1fr 140px !important;
    }

    .PROFILE {
        height: 40px !important;
        width: 100px !important;
        border-radius: 10px !important;
        grid-template-columns: 40px 1fr !important;
    }

    .PROFILE-PIC {
        height: 30px !important;
        width: 30px !important;
        border-radius: 8px !important;
    }

    .PROFILE-PIC img {
        border-radius: 8px !important;
    }

    .PROFILE-META {
        display: none !important;
    }

    .PROFILE-LOGOUT {
        width: 30px !important;
    }

    .DIR_TABLE td:nth-child(6),
    .DIR_TABLE th:nth-child(6),
    .DIR_TABLE td:nth-child(7),
    .DIR_TABLE th:nth-child(7) {
        display: none;
    }

    .ICON-SETT {
        height: 25px;
        width: 40px;
    }

    .DETAILS-HEAD {
        font-size: calc(var(--FS) + 4px) !important;
    }

    .UPLOAD-ITEMS {
        height: 550px !important;
        grid-template-rows: 35px 515px !important;
    }

    .UPLOAD-ITEM-CONTENT-GENERAL,
    .UPLOAD-ITEM-CONTENT-CONFIDENTIAL {
        grid-template-columns: none !important;
        grid-template-rows: 40% 60% !important;
    }

    .HELP-GRID {
        grid-template-columns: none !important;
        grid-template-rows: 20% 80% !important;
    }

    .UPLOAD-HEADER {
        padding: 2% !important;
    }

    .UPLOAD-HEADER-SIGN,
    .HELP-HEADER-SIGN {
        font-size: calc(var(--FS) + 3px) !important;
    }

    .UPLOAD-HEADER-TEXT,
    .HELP-HEADER-TEXT {
        font-size: calc(var(--FS) - 2px) !important;
    }

    .TEXTAREA-HEADER-TEXT {
        font-size: var(--FS) !important;
    }

    .BTN-TEXT {
        font-size: var(--FS) !important;
    }

    .INPUT-WRAPPER {
        padding: 3px !important;
    }

    .INPUT-TEXT {
        font-size: var(--FS) !important;
    }

    .USER-TABLE-TH-WRAPPER span,
    .GROUP-TABLE-TH-WRAPPER span,
    .LINK-TABLE-TH-WRAPPER span {
        font-size: calc(var(--FS) + 2px) !important;
    }

    .GROUP-TABLE-THEAD {
        grid-template-columns: 60% 40% !important;
    }

    .GROUP-TABLE tr>*:nth-child(1) {
        width: 60% !important;
    }

    .GROUP-TABLE tr>*:nth-child(2) {
        min-width: 40% !important;
    }

    .SETTINGS-USER-GRID {
        height: 500px;
        grid-template-columns: none !important;
        grid-template-rows: 20% 40% 40% !important;
    }

    .SETTINGS-2FA-GRID {
        height: 450px;
        grid-template-columns: none !important;
        grid-template-rows: 20% 80% !important;
    }

    .SETTINGS-FAV-GRID {
        grid-template-columns: none !important;
        grid-template-rows: 35% 65% !important;
    }

    .SETTINGS-LOOK-GRID {
        height: 250px;
        grid-template-columns: none !important;
        grid-template-rows: 30% 70% !important;
    }

    .SETTINGS-LOOK-WRAPPER,
    .SETTING-LOOK-COLORS {
        padding: 5% !important;
    }
}

@media (max-width: 1500px) {
    .TOOLBAR {
        width: 220px;
    }

    .NAV-BTN-TEXT {
        font-size: calc(var(--FS) + 2px) !important;
    }
}

.NOT_ALLOWED_PATH {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    color: red;
}

.EMPTY_DIR {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    color: var(--FC-PH);
}

.MAINTENANCE {
    text-align: center;
    color: white;
}

.PROMT {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.PROMT-BTNS {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ALLOWED_PATH {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.PATH {
    height: 90%;
    width: 100%;
    margin-left: 25px;
    margin-right: 25px;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    place-items: center;
}

.SEGMENT-BTNS-WRAPPER {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    border: 1px solid var(--SE-D-MB);
    border-radius: 10px;
}

.PATH_BACK,
.PATH_FORWARD {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: start;
    align-items: center;
    border: none;
    background-color: transparent;
    transition: transform 0.3s ease-in-out;
}

.PATH_BACK:hover,
.PATH_FORWARD:hover {
    transform: scale(1.2);
}

.SEGMENTS-WRAPPER {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--SE-D-MB);
    border-radius: 10px;
}

.SEGMENTS {
    width: 100%;
    height: 100%;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC);
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-x: visible;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB), var(--TB), var(--TB), var(--TB));
    -webkit-mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB), var(--TB), var(--TB), var(--TB));
}

.SEGMENTS::-webkit-scrollbar {
    display: none;
}

.SEGMENT {
    border: none;
    background-color: transparent;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

.SEGMENT:hover {
    color: var(--FC-PH);
}

.CONTENT {
    background-color: var(--MB);
    height: 100%;
    position: relative;
}

.BACKGROUND-IMAGE {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 30%;
    z-index: 0;
    background: url('/img/TB_Single.svg') no-repeat center center;
    background-size: contain;
    opacity: 0.1;
}

.DIR_CONTAINER {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    mask-image: linear-gradient(to bottom, transparent, var(--TB) 2%, var(--TB) 98%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 2%, var(--TB) 98%, transparent);
}

.DIR_CONTAINER::-webkit-scrollbar {
    width: 12px;
}

.DIR_CONTAINER::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

.DIR_CONTAINER::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

.DIR_CONTAINER::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}


.DIR_CONTAINER::before,
.DIR_CONTAINER::after {
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 1;
    pointer-events: none;
}

.DIR_CONTAINER::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    /* Weißer Übergang nach unten */
}

.DIR_CONTAINER::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    /* Weißer Übergang nach oben */
}


.DIR_TABLE {
    width: 98%;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

.DIR_TABLE td:nth-child(3),
.DIR_TABLE th:nth-child(3) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB), var(--TB), var(--TB), var(--TB));
    -webkit-mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB), var(--TB), var(--TB), var(--TB));
}

.DIR_TABLE_HEAD {
    position: sticky;
    top: 0;
    background: linear-gradient(to top, transparent, var(--MB), var(--MB), var(--MB), var(--MB));
    z-index: 2;
}

.DIR_TABLE_HEAD_REVERSE_BTN {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
}

.DIR_TABLE_HEAD th {
    padding-top: 10px;
    padding-bottom: 10px;
}

.DIR_HEAD_ICON {
    width: 50px;
}

.DIR_HEAD_START,
.DIR_HEAD_END {
    width: 20px;
}

.DIR_ROW {
    height: calc(25px * var(--RSC));
    text-align: center;
    vertical-align: middle;
}

.DIR_ICON {
    width: 50px;
    display: grid;
    place-items: center;
    overflow: hidden;
    height: calc(25px * var(--RSC));
}

.DIR_ICON img {
    width: calc(20px * var(--RSC));
    height: calc(20px * var(--RSC));
    object-fit: contain;
}

.DIR_LOADER {
    position: absolute;
    border-radius: 50%;
    border-top: calc(3px * var(--RSC)) solid var(--SE-MB);
    border-right: calc(3px * var(--RSC)) solid var(--SE-MB);
    border-bottom: calc(3px * var(--RSC)) solid var(--SE-MB);
    border-left: calc(3px * var(--RSC)) solid var(--SE-B);
    width: calc(10px * var(--RSC));
    height: calc(10px * var(--RSC));
    margin-top: 1px;
    box-sizing: border-box;
    animation: spin 2s linear infinite;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.DIR_LOADER.visible {
    opacity: 1;
    visibility: visible;
}

.DIR_FILE_START {
    width: 20px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.DIR_FILE_END {
    width: 20px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.DIR_FILE_MULTI_START_LEFT {
    border-top-left-radius: 10px;
}

.DIR_FILE_MULTI_START_RIGHT {
    border-top-right-radius: 10px;
}

.DIR_FILE_MULTI_END_LEFT {
    border-bottom-left-radius: 10px;
}

.DIR_FILE_MULTI_END_RIGHT {
    border-bottom-right-radius: 10px;
}

.DIR_FILE button {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: var(--FF);
    font-size: var(--FS);
    font-weight: normal;
    color: var(--FC);
    background-color: transparent;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
}

.DIR_TABLE_BODY tr:hover {
    background-color: var(--SE-MB);
    border-radius: 15px;
}

.DIR_ROW_SELECTED {
    background-color: var(--SE-B) !important;
    border-radius: 15px;
}

.DIR_FILE_ACTION {
    width: 50px;
}

.DIR_FILE_ACTION button {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

.DIR_FILE_ACTION button:hover {
    transform: scale(1.4);
}

.DIR_FILE {
    max-width: 78%;
    width: auto;
    min-width: 0;
}

.DIR_FILE_MOD_TIME {
    width: 10%;
}

.DIR_FILE_TYPE {
    width: 5%;
}

.DIR_FILE_SIZE {
    width: 8%;
}

.DIR_ICON,
.DIR_FILE_MOD_TIME,
.DIR_FILE_TYPE,
.DIR_FILE_SIZE,
.DIR_FILE_META,
.DIR_FILE_ACTION {
    text-align: center;
}


.CONTEXT-MENU {
    display: none;
    position: absolute;
    background-color: var(--SE-MB);
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 15px 0 var(--BS);
    z-index: 1000;
    width: 150px;
}

.MENU-ITEM {
    width: 100%;
    height: 100%;
    padding: 10px 0px;
    display: grid;
    place-items: center;
    grid-template-columns: 25% 75%;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.MENU-ITEM:hover {
    background-color: var(--SE-B);
}

.FIRST {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.LAST {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.MENU-ITEM-TEXT {
    text-align: left;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
    width: 100%;
}

.INPUT-WRAPPER {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC);
    padding: 5px;
    margin: 5px;
    background: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
    border: none;
    border-top: 1px solid var(--SE-D-MB);
    border-radius: 10px;
    outline: none;
    display: grid;
    grid-template-columns: 25% 75%;
    align-items: center;
    justify-content: center;
}

.INPUT-TEXT {
    min-width: 0;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC) !important;
    padding: 5px;
    margin: 5px;
    background: transparent !important;
    border: none;
    outline: none;
    text-align: left;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.INPUT-TEXT:-webkit-autofill {
    background-color: transparent;
    color: var(--FC) !important;
}

.INPUT-TEXT::placeholder {
    color: var(--FC-PH);
}

.BTN {
    width: calc(150px * var(--RSC));
    font-family: var(--FF);
    font-size: calc(var(--FS) + 4px) !important;
    font-weight: normal;
    color: var(--FC) !important;
    cursor: pointer;
    margin: 20px;
    border: none;
    /*border-top: 1px solid var(--SE-B);*/
    background-size: 300% 100%;
    padding: 10px !important;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 30px auto;
    -o-transition: all .4s ease-in-out !important;
    -webkit-transition: all .4s ease-in-out !important;
    transition: all .4s ease-in-out !important;
}

.BTN:hover {
    background-position: 100% 0;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.BTN:focus {
    outline: none;
}

.BTN.C1 {
    background-image: linear-gradient(to right, var(--SE-MB), var(--SE-MB), var(--SE-MB-C), var(--SE-MB-C));
    box-shadow: 0 4px 15px 0 var(--BS);
}

.BTN-PIC {
    height: 80%;
    width: auto;
}

.BTN-TEXT {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC);
    text-align: center;
    text-wrap: nowrap;
    overflow: hidden;
}

.CHECKBOX-CONTAINER {
    width: 125px;
    display: grid;
    grid-template-columns: 25% 75%;
    place-items: center;
}

.CHECKBOX-TEXT {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC);
    width: 90%;
}

.CHECKBOX {
    display: none !important;
}

.CHECKBOX+label {
    display: inline-block;
    width: 20px !important;
    height: 20px !important;
    background-color: var(--MB);
    border-radius: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--SE-MB);
    box-shadow: 0 5px 10px var(--BS);
    cursor: pointer;
    flex-shrink: 0;
    flex-grow: 0;
}

.CHECKBOX:checked+label {
    background: url('/img/Check.svg') no-repeat center center var(--MB);
}

.SELECT-WRAPPER {
    position: relative;
    max-height: calc(45px * var(--RSC));
    max-width: calc(400px * var(--RSC));
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC);
    padding: 5px;
    margin: 5px;
    background: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
    border: none;
    border-top: 1px solid var(--SE-D-MB);
    border-radius: 10px;
    outline: none;
    display: grid;
    grid-template-columns: calc(40px * var(--RSC)) 1fr calc(40px * var(--RSC));
    ;
    align-items: center;
    justify-content: center;
}

.SELECT-OPTIONS {
    position: absolute;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--SE-MB);
    border-radius: 10px;
    box-shadow: 0 4px 15px 0 var(--BS);
    width: 100%;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.SELECT-OPTIONS.open {
    max-height: calc(500px * var(--RSC));
    ;
    padding-top: 5px;
    padding-bottom: 5px;
}

.OPTION {
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 10px;
    padding: 2px 0px;
    margin: 0px 5px;
    height: calc(20px * var(--RSC));
    width: 95%;
    transition: background-color 0.1s ease-in-out;
}

.OPTION:hover {
    background-color: var(--SE-D-MB);
}

.OPTION span {
    margin-left: 2%;
    color: var(--FC);
}

.NAV-BTN,
.NAV-VERSION {
    width: 85%;
    height: 50px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 15px;
    outline: none;
    transition: background-color 0.3s ease;
    transition: width 0.3s ease;
    text-decoration: none;

    display: grid;
    grid-template-columns: 25% 75%;
    justify-content: center;
    align-items: center;
}

.NAV-VERSION {
    margin-bottom: 20px;
}

.NAV-BTN-IMG {
    width: 60px;
    height: 100%;
    border-radius: 13px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.NAV-BTN-IMG div {
    height: 60%;
    width: 60%;
}

.NAV-BTN-TEXT {
    text-align: left;
    margin-left: 8px;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    font-weight: normal;
    color: var(--FC);

    transition: opacity 0.3s ease, max-width 0.3s ease, margin 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    max-width: 120px;
}

.NAV-BTN:hover {
    background-color: var(--MB);
}

.NAV-LOCATION {
    height: 100%;
    margin-left: 25px;
    display: grid;
    grid-template-columns: 50px 1fr;
    justify-content: start;
    align-items: center;
}

.NAV-LOCATION-ICON {
    width: 60%;
    height: auto;
}

.NAV-LOCATION-EMP {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-radius: 13px;
    border: 1px solid var(--SE-D-MB);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width 0.3s ease, height 0.3s ease;
}

.NAV-LOCATION-EMP div {
    height: 40px;
    width: 40px;
    transition: width 0.3s ease, height 0.3s ease;
}

.NAV-LOCATION-TEXT {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 2px);
    color: var(--FC);
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.HEADLINE-PROFILE {
    display: flex;
    justify-content: end;
    align-items: center;
}

.INFO-BTN {
    width: 40px;
    height: 23px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

.INFO-BTN:hover {
    transform: scale(1.2);
}

.INFO {
    display: grid;
    grid-template-rows: 50px 1fr;
    width: 50%;
    height: auto;
    padding: 20px;
    background-color: var(--SE-MB);
    border-radius: 10px;
    box-shadow: 0 4px 15px 0 var(--BS);
}

.INFO-HEADLINE {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 50px;
}

.INFO-HEADER {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 5px;
    font-size: calc(var(--FS) + 4px);
}

.INFO-CLOSE-BTN {
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

.INFO-CLOSE-BTN:hover {
    transform: scale(1.2);
}

.INFO-TEXT {
    font-size: var(--FS);
}

.PROFILE {
    width: 250px;
    height: 50px;
    margin-right: 25px;
    background-color: transparent;
    border-radius: 13px;
    border: 1px solid var(--SE-D-MB);
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    place-items: center;
    transition: width 0.3s ease, height 0.3s ease;
}

.LINK-PROFILE {
    width: 100px;
}

.PROFILE-PIC {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 10px;
    border: 1px solid var(--SE-D-MB);
    margin: auto;
    transition: width 0.3s ease, height 0.3s ease;
}

.PROFILE-PIC img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.PROFILE-META {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin: auto;
}

.PROFILE-BN {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC);
}

.PROFILE-EMAIL {
    font-family: var(--FF);
    font-size: calc(var(--FS) - 2px);
    color: var(--FC);
}

.PROFILE-LOGOUT {
    margin: 5% auto;
    width: 50px;
    height: 30px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

.PROFILE-LOGOUT img {
    height: 30px;
    width: auto;
}

.PROFILE-LOGOUT:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .PROFILE-BN {
        font-size: var(--FS);
    }

    .PROFILE-EMAIL {
        font-size: calc(var(--FS) - 4px);
    }
}

.FILE_VIEW_HEADLINE {
    width: 20%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    place-items: center;
    margin: auto;
}

@media (max-width: 1000px) {
    .FILE_VIEW_HEADLINE {
        width: 50% !important;
    }
}

@media (max-width: 1200px) {
    .FILE_VIEW_HEADLINE {
        width: 30%;
    }
}

.IMG_VIEW_HEADLINE {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: auto;
}

.FILE_VIEW_BTN,
.IMG_VIEW_BTN {
    height: 100%;
    width: 100%;
    background-color: transparent;
    border: none;
    margin: 0 5px;
}

.FILE_VIEW_BTN div {
    height: 40px;
    transition: transform 0.3s ease-in-out;
}

.IMG_VIEW_BTN div {
    height: 15%;
    transition: transform 0.3s ease-in-out;
}

.FILE_VIEW_BTN:hover div,
.IMG_VIEW_BTN:hover div {
    transform: scale(1.3);
}

#PAGE_NUM_COUNT,
#PAGE_NUM,
#PAGE_COUNT {
    color: var(--FC);
    text-wrap: nowrap;
}

#PDF-CONTAINER {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    overflow-y: auto;
    height: 85vh;
    max-width: 90vw;
    background-color: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 30px auto;
}

#PDF-CONTAINER::-webkit-scrollbar {
    width: 12px;
}

#PDF-CONTAINER::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

#PDF-CONTAINER::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

#PDF-CONTAINER::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}

#PDF-VIEWER {
    margin: 0 auto;
    z-index: 1;
}

#PDF-LOADING-SCREEN {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

#LOADING-SCREEN {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--MB);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 12;
}

.LOADER {
    border-radius: 50%;
    border-top: 16px solid var(--SE-MB);
    border-right: 16px solid var(--SE-MB);
    border-bottom: 16px solid var(--SE-MB);
    border-left: 16px solid var(--SE-B);
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    animation: spin 1.5s linear infinite;
}

.QRCODE-LOADER {
    border-radius: 50%;
    border-top: 14px solid var(--SE-MB);
    border-right: 14px solid var(--SE-MB);
    border-bottom: 14px solid var(--SE-MB);
    border-left: 14px solid var(--SE-B);
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.FILE-CONTAINER {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.IMG-CONTAINER {
    position: relative;
    width: 100%;
    height: 80vh;
    display: grid;
    place-items: center;
    grid-template-columns: 80px 1fr 80px;
}

.IMG-CONTAINER img {
    width: auto;
    max-height: 70vh;
    max-width: 100%;
    border-radius: 10px;
    object-fit: contain;
}

.RASTER-GRID {
    position: relative;
    z-index: 1;
    padding: 25px;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, calc(150px * var(--RSC)));
    place-items: center;
    gap: 5px;
    justify-content: start;
}

.RASTER-GRID-ITEM {
    position: relative;
    width: calc(150px * var(--RSC));
    height: calc(100px * var(--RSC));
    border-radius: 10px;
    border: 0;
    background-color: transparent;
    outline: none;
    display: grid;
    grid-template-rows: 70% 30%;
    place-items: center;
    cursor: pointer;
}

.RASTER-GRID-ITEM:hover {
    background-color: var(--SE-MB);
}

.RASTER-GRID-ITEM-SELECTED {
    background-color: var(--SE-B) !important;
}

.RASTER-GRID-ITEM-ICON {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.RASTER-GRID-ITEM-ICON img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px var(--TB));
}

.RASTER-GRID-ITEM-LOADER {
    position: absolute;
    top: 26%;
    border-radius: 50%;
    border-top: calc(5px * var(--RSC)) solid var(--SE-MB);
    border-right: calc(5px * var(--RSC)) solid var(--SE-MB);
    border-bottom: calc(5px * var(--RSC)) solid var(--SE-MB);
    border-left: calc(5px * var(--RSC)) solid var(--SE-B);
    width: calc(25px * var(--RSC));
    height: calc(25px * var(--RSC));
    box-sizing: border-box;
    animation: spin 2s linear infinite;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.RASTER-GRID-ITEM-LOADER.visible {
    opacity: 1;
    visibility: visible;
}

.RASTER-GRID-ITEM-META-NAME {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    color: var(--FC);
    font-family: var(--FF);
    font-size: calc(var(--FS) - 1.5px);
    overflow: hidden;
    text-overflow: ellipsis;
    mask-image: linear-gradient(to bottom, var(--TB) 0%, var(--TB) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, var(--TB) 0%, var(--TB) 60%, transparent 100%);
}

.RASTER-GRID-ITEM-META-FAV {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    grid-template-columns: 25% 75%;
    color: var(--FC);
    font-family: var(--FF);
    font-size: calc(var(--FS) - 1.5px);
    overflow: hidden;
    text-overflow: ellipsis;
    mask-image: linear-gradient(to bottom, var(--TB) 0%, var(--TB) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, var(--TB) 0%, var(--TB) 60%, transparent 100%);
}

.RASTER-GRID-ITEM-META-FAV-NAME {
    text-align: left;
}

.RASTER-GRID-ITEM-TOOLTIP {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--SE-MB);
    text-align: center;
    padding: 5px 10px;
    border-radius: 10px;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
    white-space: nowrap;
    box-shadow: 0px 4px 6px var(--BS);
    z-index: 10;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.RASTER-GRID-ITEM-TOOLTIP.visible {
    opacity: 1;
    visibility: visible;
}

.RASTER-GRID-ITEM-TOOLTIP-ROW {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.TOOLTIP-KEY {
    font-weight: bold;
    margin-right: 10px;
}

.TOOLTIP-VALUE {
    text-align: right;
}

.TXT {
    width: 90%;
    height: 80vh;
    border: none;
    border-radius: 10px;
}

.MSG {
    width: 95%;
    height: 95%;
    font-family: var(--FF);
    color: var(--FC);
    position: absolute;
    overflow-y: auto;
    overflow-x: auto;
}

.MSG::-webkit-scrollbar {
    width: 12px;
}

.MSG::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

.MSG::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

.MSG::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}

.MSG::-webkit-scrollbar-corner {
    background-color: transparent;
}

.EMAIL_BODY {
    white-space: pre-wrap;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 2px);
    padding: 10px;
}

.Success_toast {
    visibility: hidden;
    background-color: var(--SE-MB);
    box-shadow: 0 10px 15px var(--BS);
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    color: var(--FC);
    text-align: center;
    padding: 16px;
    position: fixed;
    z-index: 10;
    right: 0;
    top: 40px;
    font-size: calc(var(--FS) + 5px);
    transition: visibility 0s, opacity 0.5s linear;
}

.Error_toast {
    visibility: hidden;
    background-color: #a12a2a;
    box-shadow: 0 10px 15px var(--BS);
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    color: #fff;
    text-align: center;
    padding: 16px;
    position: fixed;
    z-index: 10;
    right: 0;
    top: 40px;
    font-size: calc(var(--FS) + 5px);
    transition: visibility 0s, opacity 0.5s linear;
}

#toast.show {
    visibility: visible;
    animation: slide-in 2s forwards, slide-out 2s 3s forwards;
}

#progress {
    height: 5px;
    width: 0;
    border-radius: 5px;
    margin-top: 10px;
}

.Success_progress {
    background: var(--SE-B);
}

.Error_progress {
    background: var(--FC);
}

#toast.show #progress {
    animation: progress 4.5s linear;
}

@keyframes slide-in {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes progress {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.SETTINGS {
    width: 100%;
    max-height: 100%;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
    mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
}

.SETTINGS::-webkit-scrollbar {
    width: 12px;
}

.SETTINGS::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

.SETTINGS::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

.SETTINGS::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}

.DETAILS {
    display: grid;
    grid-template-rows: 50px 0px;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
}

.DETAILS-HEAD {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 8px);
    color: var(--FC);
}

.DETAILS-HEAD:hover {
    color: var(--FC-PH);
}

.DETAILS-BODY {
    overflow: hidden;
}

.SETTINGS-USER-GRID {
    width: 100%;
    display: grid;
    grid-template-columns: 35% 50% 15%;
}

.SETTINGS-HEADER {
    display: grid;
    grid-template-rows: 30px auto;
    padding: 5%;
}

.SETTINGS-HEADER-SIGN {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5px);
    color: var(--FC);
}

.SETTINGS-HEADER-TEXT {
    font-family: var(--FF);
    font-size: calc(var(--FS));
    color: var(--FC-PH);
}

.SETTINGS-USER-DATA {
    display: grid;
    grid-template-rows: 33.3% 33.3% 33.3%;
    padding: 2%;
}

.SETTINGS-USER-DATA-NAME {
    display: grid;
    grid-template-columns: 50% 50%;
}

.SETTINGS-USER-DATA-PW-BTN {
    display: grid;
    grid-template-columns: 80% 20%;
}

.SETTINGS-USER-DATA-BTN {
    font-size: calc(var(--FS) + 4px) !important;
    font-weight: normal;
    color: var(--FC) !important;
    cursor: pointer;
    border: none;
    background-size: 300% 100%;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    display: grid;
    align-items: center;
    grid-template-columns: 30px auto;
    -o-transition: all .4s ease-in-out !important;
    -webkit-transition: all .4s ease-in-out !important;
    transition: all .4s ease-in-out !important;
}


.SETTINGS-USER-DATA-BTN:hover {
    background-position: 100% 0;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.SETTINGS-USER-DATA-BTN:focus {
    outline: none;
}

.SETTINGS-USER-DATA-BTN.C1 {
    background-image: linear-gradient(to right, var(--SE-MB), var(--SE-MB), var(--SE-MB-C), var(--SE-MB-C));
    box-shadow: 0 4px 15px 0 var(--BS);
}

.SETTINGS-USER-PIC {
    display: grid;
    grid-template-rows: 70% 30%;
    padding: 2%;
    place-items: center;
}

.SETTINGS-USER-PIC-FRAME {
    border: 1px solid var(--SE-B);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    place-items: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.SETTINGS-USER-PIC-FRAME img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.SETTINGS-FAV-GRID {
    width: 100%;
    height: 240px;
    display: grid;
    grid-template-columns: 35% 65%;
}

.SETTINGS-FAV-ITEMS {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 2%;
    padding-bottom: 2%;
    mask-image: linear-gradient(to bottom, transparent, var(--TB) 10%, var(--TB) 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 10%, var(--TB) 90%, transparent);
}

.SETTINGS-FAV-ITEMS::-webkit-scrollbar {
    width: 12px;
}

.SETTINGS-FAV-ITEMS::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

.SETTINGS-FAV-ITEMS::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

.SETTINGS-FAV-ITEMS::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}

.SETTINGS-FAV-ITEM {
    width: 100%;
    display: grid;
    grid-template-columns: 20% 70% 10%;
    place-items: center;
}

.SETTINGS-FAV-ITEM img {
    height: 40px;
    width: 40px;
    object-fit: cover;
}

.SETTINGS-FAV-ITEM-TEXT {
    width: 100%;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

.SETTINGS-FAV-ITEM-BTN {
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: transparent;
    outline: none;
    border: 0;
    width: 100%;
    height: 60%;
    transition: transform 0.3s ease-in-out;
}

.SETTINGS-FAV-ITEM-BTN:hover {
    transform: scale(1.4);
}

.SETTINGS-FAV-ITEMS-EMPTY {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5);
    color: var(--FC-PH);
    text-align: center;
}

.SETTINGS-2FA-GRID {
    width: 100%;
    display: grid;
    grid-template-columns: 35% 65%;
}

.SETTINGS-2FA-ITEMS {
    height: 320px;
    width: 95%;

    display: grid;
    grid-template-rows: 35px 285px;
    padding: 2%;
}

.SETTINGS-2FA-NAV {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: start;
}

.SETTINGS-2FA-NAV-BTN {
    height: 100%;
    width: 100px;
    display: grid;
    grid-template-columns: 20px 80px;
    place-items: center;
    background-color: transparent;
    border: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    outline: none;
}

.SETTINGS-2FA-NAV-BTN.open {
    background-color: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
}

.SETTINGS-2FA-NAV-BTN-TEXT {
    width: 80%;
    text-align: left;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

.SETTINGS-2FA-ITEM {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
    padding: 1.5%;
}

.SETTINGS-2FA-ITEM::-webkit-scrollbar {
    width: 12px;
}

.SETTINGS-2FA-ITEM::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

.SETTINGS-2FA-ITEM::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

.SETTINGS-2FA-ITEM::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}

.SETTINGS-2FA-ITEM-CONTENT-EMAIL {
    text-align: left;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

.SETTINGS-2FA-ITEM-CONTENT-EMAIL h2,
.SETTINGS-2FA-ITEM-CONTENT-QRCODE-TEXT h2 {
    margin: 0;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE {
    display: grid;
    grid-template-columns: 70% 30%;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-TEXT {
    width: 100%;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DEVICES {
    width: 100%;
    display: grid;
    grid-template-rows: 150px auto;
    place-items: center;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DEVICES>.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DEVICE {
    align-self: start;
    justify-self: center;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DEVICE {
    width: 60%;
    height: 40px;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
    display: grid;
    grid-template-columns: 25px 1fr 30px;
    place-items: center;

    background-color: var(--MB);
    border-radius: 10px;
    margin-bottom: 10px;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DEVICE p {
    width: 100%;
    margin: 0;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DEVICE-BTN {
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: transparent;
    outline: none;
    border: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DEVICE-BTN:hover {
    transform: scale(1.4);
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DEVICES-ITEMS {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-LOADER {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-top: 5px solid var(--SE-B);
    border-right: 5px solid var(--SE-B);
    border-bottom: 5px solid var(--SE-B);
    border-left: 5px solid var(--SE-MB);
    margin: 10px;
    box-sizing: border-box;
    animation: spin 2s linear infinite;
    order: 9999;
}

.SETTINGS-2FA-ITEM-CONTENT-QRCODE-DIV {
    width: 90%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.SETTINGS-LOOK-GRID {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 35% 65%;
}

.SETTINGS-LOOK-WRAPPER {
    padding: 2%;
}

.SETTINGS-LOOK-FS {
    width: 80%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.SETTINGS-LOOK-FS p,
.SETTINGS-LOOK-SES p {
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

#SETTINGS-LOOK-INPUT-TEXT {
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);

    margin-left: 20px;
}

.RANGE-WRAPPER {
    width: 100%;
    display: grid;
    grid-template-rows: 20px 40px;
    align-items: center;
}

.RANGE-INPUT {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--SE-MB);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
}

.RANGE-INPUT::-webkit-slider-runnable-track {
    background: var(--SE-MB);
    height: 6px;
    border-radius: 3px;
}

.RANGE-INPUT::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--SE-MB);
    border-radius: 50%;
    border: 2px solid var(--SE-B);
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.RANGE-INPUT::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--SE-MB);
    border-radius: 50%;
    border: 2px solid var(--SE-B);
    cursor: pointer;
}

.RANGE-INPUT::-ms-thumb {
    width: 20px;
    height: 20px;
    background: var(--SE-MB);
    border-radius: 50%;
    border: 2px solid var(--SE-B);
    cursor: pointer;
}

.RANGE-INPUT::-moz-range-track {
    background: var(--SE-MB);
    height: 6px;
    border-radius: 3px;
}

.RANGE-INPUT::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 6px 0;
    color: transparent;
}

.RANGE-TEXT {
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

.SETTINGS-LOOK-SES {
    width: 80%;
    display: grid;
    grid-template-columns: auto 250px;
    place-items: center;
}

.SETTINGS-DIR_ROW {
    display: flex;
    justify-content: center;
    align-items: center;
}

.SETTINGS-DIR_ICON {
    padding: 10px;
}

.SETTING-LOOK-COLORS {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 2%;
}

.SETTING-LOOK-COLOR-SEGMENT {
    width: 50px;
    height: 50px;
    background: transparent;
    border: 2px solid var(--SE-B);
    border-radius: 10px;
    margin-right: 15px;
    outline: none;
    transition: border 0.3s ease-in-out;
}

.SETTING-LOOK-COLOR-SEGMENT.SELECTED {
    border: 2px solid var(--FC);
}

.SETTING-LOOK-COLOR-SEGMENT:hover {
    border: 3px solid var(--FC);
}

.SETTING-LOOK-ADD-COLOR-SEGMENT {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: 0;
    border-radius: 10px;
    outline: none;
    transition: transform 0.3s ease-in-out;
}

.SETTING-LOOK-ADD-COLOR-SEGMENT:hover {
    transform: scale(1.3);
}

.SETTINGS-LOOK-ADD-COLOR-SEGMENT-ADD {
    width: 90%;
    height: 50%;
    padding: 1%;
    background-color: var(--SE-MB);
    border-radius: 10px;
    box-shadow: 0 4px 15px 0 var(--BS);
    display: grid;
    grid-template-rows: 10% 90%;
    align-items: center;
}

.SETTINGS-LOOK-COLORS-HEADER {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 5% 85% 10%;
    align-items: center;
}

.SETTINGS-LOOK-COLORS-HEADER-BTN {
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    transition: transform 0.3s ease-in-out;
}

.SETTINGS-LOOK-COLORS-HEADER-BTN:hover {
    transform: scale(1.2);
}

.SETTINGS-LOOK-COLORS-HEADER-TEXT {
    margin-left: 10px;
}

.SETTINGS-LOOK-COLORS-GRID {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    place-items: center;
}

.SETTINGS-LOOK-COLORS {
    height: 95%;
    width: 100%;
    display: grid;
    grid-template-rows: repeat(9, 1fr);
    place-items: center;
}

.SETTINGS-LOOK-COLORS span {
    font-size: var(--FS);
}

.SETTINGS-LOOK-COLORS-PREVIEW {
    height: 95%;
    width: 100%;
    display: grid;
    grid-template-rows: 80% 20%;
    place-items: center;
}

.SETTINGS-LOOK-COLORS-PREVIEW-ITEMS {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.SETTINGS-LOOK-COLOR-GRID-MB {
    width: 80%;
    height: 80%;
    display: grid;
    grid-template-rows: 47.5% 47.5%;
    place-items: center;
    gap: 5%;
}

.SETTINGS-LOOK-COLOR-TILE,
.SETTINGS-LOOK-COLOR-BTN {
    width: 80%;
    height: 80%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.2s ease;
}

.SETTINGS-LOOK-COLOR-TILE:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 10px var(--BS);
}

.SETTINGS-LOOK-COLOR-BTN:hover {
    transform: scale(1.3);
}

.SETTINGS-LOOK-COLOR-BTN {
    border: 0;
    outline: none;
    background-color: transparent;
}

.SETTINGS-LOOK-COLOR-LABEL {
    font-size: calc(var(--FS) + 5px);
    pointer-events: none;
}

.SETTINGS-LOOK-COLOR-INPUT {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

hr {
    width: 96%;
    border: 1px solid var(--SE-B);
    opacity: 0.5;
}

.OVERLAY-BOX {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    transition: backdrop-filter 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.OVERLAY-BOX.show {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(6px);
    pointer-events: all;
}

#LOADING-SCREEN-FULL {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: var(--MB); backdrop-filter: blur(5px);*/
    background: var(--MB);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: all;
    z-index: 9999;
    transition: opacity 0.5s ease-in-out;
}

#PROGRESS-BAR-COUNT {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 8px);
    color: var(--FC);
    padding: 20px;
}

#PROGRESS-BAR-CONTAINER {
    width: 50%;
    background-color: var(--SE-MB);
    border-radius: 10px;
    box-shadow: 0px 0px 10px var(--BS);
    overflow: hidden;
}

#PROGRESS-BAR {
    width: 0%;
    height: 30px;
    background-color: var(--SE-B);
    border-radius: 10px;
    transition: width 0.3s ease-in-out;
}

#LOADING-SCREEN-FULL.hidden {
    opacity: 0;
    pointer-events: none;
}

.CHECKPOINT {
    position: absolute;
}

.UPLOAD {
    width: 100%;
    max-height: 100%;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
    mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
}

.UPLOAD_TOOLBAR {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.UPLOAD_CONTENT {
    width: 100%;
    height: 100%;
}

.VIDEO-CONTAINER {
    max-height: 80vh;
    width: 80%;
    border-radius: 10px;
    box-shadow: 0 4px 15px 0 var(--BS);
}

.UPLOAD-ITEMS {
    height: 500px;
    width: 95%;

    display: grid;
    grid-template-rows: 35px 415px;
    padding: 2%;
}

.UPLOAD-NAV {
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: start;
}

.UPLOAD-NAV-BTN {
    height: 100%;
    width: 120px;
    display: grid;
    grid-template-columns: 20px 80px;
    place-items: center;
    background-color: transparent;
    border: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    outline: none;
}

.UPLOAD-NAV-BTN.open {
    background-color: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
}

.UPLOAD-NAV-BTN-TEXT {
    width: 80%;
    text-align: left;
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

.UPLOAD-ITEM {
    height: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
    padding: 1.5%;
}

.UPLOAD-ITEM::-webkit-scrollbar {
    width: 12px;
}

.UPLOAD-ITEM::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

.UPLOAD-ITEM::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

.UPLOAD-ITEM::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}

.SWITCH-WRAPPER {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.SWITCH-WRAPPER input {
    opacity: 0;
    width: 0;
    height: 0;
}

.SWITCH-SLIDER {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
    -webkit-transition: .4s;
    transition: .4s;
}

.SWITCH-SLIDER:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--SE-B);
    -webkit-transition: .4s;
    transition: .4s;
    background-image: url('/img/File.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

input:checked+.SWITCH-SLIDER:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    background-image: url('/img/closedfolder.svg');
}

.SWITCH-SLIDER.round {
    border-radius: 34px;
}

.SWITCH-SLIDER.round:before {
    border-radius: 50%;
}


.UPLOAD-LOADER {
    width: 120px;
    height: 120px;
    position: absolute;
    top: calc(50% - 60px);
    left: calc(50% - 60px);
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    border-radius: 50%;
    border-top: 16px solid transparent;
    border-right: 16px solid var(--SE-B);
    border-bottom: 16px solid var(--SE-B);
    border-left: 16px solid var(--SE-B);
    box-sizing: border-box;
    animation: spin 1.5s linear infinite;
    z-index: 10;
}

.UPLOAD-LOADER.show {
    opacity: 1;
    visibility: visible;
}

.UPLOAD-ITEM-CONTENT-GENERAL,
.UPLOAD-ITEM-CONTENT-CONFIDENTIAL {
    height: 100%;
    grid-template-columns: 35% 65%;
    transition: filter 1s ease;
}

.UPLOAD-HEADER {
    display: grid;
    grid-template-rows: 30px auto;
    padding: 5%;
}

.UPLOAD-HEADER-SIGN {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5px);
    color: var(--FC);
}

.UPLOAD-HEADER-TEXT {
    font-family: var(--FF);
    font-size: calc(var(--FS));
    color: var(--FC-PH);
}

.UPLOAD-HR {
    width: 0%;
    height: 96% !important;
    opacity: 0.5;
}

.UPLOAD-ITEMS-CONTENT-GENERAL,
.UPLOAD-ITEMS-CONTENT-CONFIDENTIAL {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.UPLOAD-ITEMS-CONTENT-BTNS {
    display: grid;
    grid-template-columns: 70px 60% auto;
    place-items: center;
    margin: 5px;
}

.UPLOAD-ITEMS-CONTENT-BTNS> :first-child {
    justify-self: start;
}

.UPLOAD-ITEMS-CONTENT-BTNS> :last-child {
    justify-self: end;
}

.TEXTAREA-WRAPPER {
    height: 200px;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC);
    padding: 2%;
    margin: 5px;
    background: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
    border: none;
    border-top: 1px solid var(--SE-D-MB);
    border-radius: 10px;
    outline: none;
    display: grid;
    grid-template-rows: 30px auto;
    place-items: center;
}

.TEXTAREA-HEADER {
    width: 100%;
    display: grid;
    grid-template-columns: 30px auto;
    place-items: center;
}

.TEXTAREA-HEADER-TEXT {
    width: 98%;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC-PH);
}

.TEXTAREA-TEXT {
    width: 98%;
    height: 90%;
    resize: none;
    outline: none;
    border: none;
    background: transparent;
    font-family: var(--FF);
    font-size: calc(var(--FS));
    color: var(--FC);
}

.TEXTAREA-TEXT::-webkit-scrollbar {
    display: none;
}

.TEXTAREA-TEXT {
    scrollbar-width: none;
}

.ADMIN {
    width: 100%;
    max-height: 100%;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
    mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
}

.ADMIN::-webkit-scrollbar {
    width: 12px;
}

.ADMIN::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ADMIN::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

.ADMIN::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}

.USER-TABLE,
.GROUP-TABLE,
.LINK-TABLE {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.USER-TABLE-PROFILE-PIC,
.GROUP-TABLE-PROFILE-PIC {
    height: 100%;
    width: 90%;
    display: grid;
    grid-template-columns: 40px auto;
    place-items: center;
    margin: auto;
}

.GROUP-TABLE-PROFILE-PIC {
    width: 95%;
}

.USER-TABLE-PROFILE-PIC img,
.USER-TABLE-PROFILE-PIC div,
.GROUP-TABLE-PROFILE-PIC img,
.GROUP-TABLE-PROFILE-PIC div {
    height: 35px;
    width: 35px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--SE-D-MB);
}

.USER-TABLE-PROFILE-PIC span,
.GROUP-TABLE-PROFILE-PIC span {
    width: 85%;
    text-align: left;
    mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB));
    -webkit-mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB));
}

.GROUP-TABLE-PROFILE-PIC span {
    width: 95%;
}

.USER-TABLE-TEXT,
.LINK-TABLE-TEXT {
    overflow: hidden;
    width: 90%;
    text-align: left;
    margin: auto;
    mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB));
    -webkit-mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB));
}

.LINK-TABLE-TEXT-EXPIRED {
    overflow: hidden;
    width: 90%;
    text-align: left;
    margin: auto;
    color: #ab2525;
    mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB));
    -webkit-mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB));
}

.LINK {
    overflow: hidden;
    width: 90%;
    text-align: left;
    margin: auto;
    color: var(--FC-PH);
}

.USER-TABLE-TOOLBAR,
.GROUP-TABLE-TOOLBAR,
.LINK-TABLE-TOOLBAR {
    width: 95%;
    height: 100px;
    display: grid;
    grid-template-columns: 20% 30% auto;
    place-items: center;
}

.GROUP-TABLE-TOOLBAR {
    grid-template-columns: 20% 80%;
}

.LINK-TABLE-TOOLBAR {
    grid-template-columns: 20% auto;
}

.USER-TABLE-TOOLBAR-TOOL,
.GROUP-TABLE-TOOLBAR-TOOL,
.LINK-TABLE-TOOLBAR-TOOL {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.USER-TABLE-TOOLBAR-TOOL span,
.GROUP-TABLE-TOOLBAR-TOOL span,
.LINK-TABLE-TOOLBAR-TOOL span {
    margin: 5px;
    font-size: calc(var(--FS) + 4px);
    color: var(--FC);
    text-align: center;
}

.USER-TABLE-THEAD,
.GROUP-TABLE-THEAD,
.LINK-TABLE-THEAD {
    width: 95%;
    height: 50px;
    display: grid;
    grid-template-columns: 20% 10% 10% 10% 10% 10% 10% 10% 10%;
}

.GROUP-TABLE-THEAD {
    grid-template-columns: 90% 10%;
}

.USER-TABLE table,
.GROUP-TABLE table,
.LINK-TABLE table {
    color: var(--FC);
    width: 95%;
    padding-top: 15px;
    padding-bottom: 20px;
    border-collapse: separate;
    border-spacing: revert;

    display: block;
    height: 700px;
    overflow-x: hidden;
    overflow-y: auto;

    mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
}

.GROUP-TABLE table {
    height: 250px;
    mask-image: linear-gradient(to bottom, transparent, var(--TB) 10%, var(--TB) 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 10%, var(--TB) 90%, transparent);
}

.USER-TABLE table::-webkit-scrollbar,
.GROUP-TABLE table::-webkit-scrollbar,
.LINK-TABLE table::-webkit-scrollbar {
    width: 0px;
}

.USER-TABLE table::-webkit-scrollbar-track,
.GROUP-TABLE table::-webkit-scrollbar-track,
.LINK-TABLE table::-webkit-scrollbar-track {
    background: transparent;
}

.USER-TABLE table::-webkit-scrollbar-thumb,
.GROUP-TABLE table::-webkit-scrollbar-thumb,
.LINK-TABLE table::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: none;
}

.USER-TABLE table::-webkit-scrollbar-thumb:hover,
.GROUP-TABLE table::-webkit-scrollbar-thumb:hover,
.LINK-TABLE table::-webkit-scrollbar-thumb:hover {
    background-color: transparent;
}

.USER-TABLE tr,
.GROUP-TABLE tr,
.LINK-TABLE tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.USER-TABLE tr>*:nth-child(1) {
    width: 20%;
}

.USER-TABLE tr>*:nth-child(2),
.USER-TABLE tr>*:nth-child(3),
.USER-TABLE tr>*:nth-child(4) {
    min-width: 10%;
}

.USER-TABLE tr>*:nth-child(5),
.USER-TABLE tr>*:nth-child(6),
.USER-TABLE tr>*:nth-child(7) {
    width: 10%;
}

.USER-TABLE tr>*:nth-child(8),
.USER-TABLE tr>*:nth-child(9) {
    width: 10%;
}

.GROUP-TABLE tr>*:nth-child(1) {
    width: 90%;
}

.GROUP-TABLE tr>*:nth-child(2) {
    min-width: 10%;
}

.LINK-TABLE tr>*:nth-child(1) {
    width: 20%;
}

.LINK-TABLE tr>*:nth-child(2),
.LINK-TABLE tr>*:nth-child(3),
.LINK-TABLE tr>*:nth-child(4),
.LINK-TABLE tr>*:nth-child(5),
.LINK-TABLE tr>*:nth-child(6),
.LINK-TABLE tr>*:nth-child(7),
.LINK-TABLE tr>*:nth-child(8) {
    min-width: 10%;
}

.USER-TABLE th,
.GROUP-TABLE th,
.LINK-TABLE th {
    font-size: calc(var(--FS) + 5px);
    white-space: nowrap;
    overflow: hidden;
}

.USER-TABLE-TH-WRAPPER,
.GROUP-TABLE-TH-WRAPPER,
.LINK-TABLE-TH-WRAPPER {
    height: 50px;
    width: 100%;
    display: grid;
    grid-template-columns: 30px auto;
    place-items: center;
    overflow: hidden;
}

.USER-TABLE-TH-WRAPPER span,
.GROUP-TABLE-TH-WRAPPER span,
.LINK-TABLE-TH-WRAPPER span {
    font-size: calc(var(--FS) + 5px);
    color: var(--FC);
    width: 90%;
    text-align: left;
    mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB));
    -webkit-mask-image: linear-gradient(to left, transparent, var(--TB), var(--TB));
}

.GROUP-TABLE-TH-WRAPPER span {
    width: 95%;
}

.USER-TABLE td,
.GROUP-TABLE td,
.LINK-TABLE td {
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
    border: solid 1px var(--SE-B);
    box-sizing: border-box;
    overflow: hidden;
}

.USER-TABLE tbody tr:first-child td:first-child,
.GROUP-TABLE tbody tr:first-child td:first-child,
.LINK-TABLE tbody tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

.USER-TABLE tbody tr:first-child td:last-child,
.GROUP-TABLE tbody tr:first-child td:last-child,
.LINK-TABLE tbody tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

.USER-TABLE tbody tr:last-child td:first-child,
.GROUP-TABLE tbody tr:last-child td:first-child,
.LINK-TABLE tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.USER-TABLE tbody tr:last-child td:last-child,
.GROUP-TABLE tbody tr:last-child td:last-child,
.LINK-TABLE tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.NO-ROWS {
    font-family: var(--FF);
    color: var(--FC-PH);
}

.USER-ONLINE {
    margin: auto;
    background-color: #317a31;
}

.USER-OFFLINE {
    margin: auto;
    background-color: #ab2525;
}

.LINK-NOTUSED {
    margin: auto;
    background-color: var(--FC-PH);
}

.LINK-USED {
    margin: auto;
    background-color: #317a31;
}

.LINK-INVALID {
    margin: auto;
    background-color: #ab2525;
}

.ICON-BTN-WRAPPER {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.LOCK-BTN {
    width: 100%;
    height: 100%;
    outline: none;
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ICON-BTN {
    width: 40px;
    height: 40px;
    flex: 0 1 auto;
    outline: none;
    background-color: transparent;
    border: none;
}

.ICON-BTN {
    transition: transform 0.3s ease-in-out;
}

.ICON-BTN:hover {
    transform: scale(1.2);
}

.MESSAGE_BOX {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    transition: backdrop-filter 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.MESSAGE_BOX.show {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(5px);
    pointer-events: all;
}

.MESSAGE_BOX_CONTAINER {
    width: 30%;
    min-width: calc(450px * var(--RSC));
    height: auto;
    min-height: calc(150px * var(--RSC));

    padding: 1%;

    background-color: var(--SE-MB);
    box-shadow: 0 4px 15px 0 var(--BS);
    border-radius: 10px;

    display: grid;
    grid-template-rows: 30px auto 50px;

    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC);
}

.MB_HEADER {
    display: grid;
    grid-template-columns: 50px auto;
    place-items: center;
    font-size: calc(var(--FS) + 10px);
}

.MB_HEADER span {
    width: 100%;
    text-align: left;
}

.MB_CONTENT {
    min-height: 50px;
    font-size: calc(var(--FS) + 3px);
    padding: 20px;
}

.MB_CONTROL {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ADMIN-USER-GRID-2 {
    width: 100%;
    display: grid;
    grid-template-columns: 35% 65%;
}

.ADMIN-USER-GRID-3,
.ADMIN-GROUP-GRID-3,
.ADMIN-LINK-GRID-3 {
    width: 100%;
    display: grid;
    grid-template-columns: 35% 50% 15%;
}

.ADMIN-GROUP-GRID-3 {
    min-height: 200px;
    width: 100%;
    display: grid;
    grid-template-columns: 35% 32.5% 32.5%;
}

.ADMIN-HEADER {
    display: grid;
    grid-template-rows: 30px auto;
    padding: 5%;
}

.ADMIN-HEADER-SIGN {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5px);
    color: var(--FC);
}

.ADMIN-HEADER-TEXT {
    font-family: var(--FF);
    font-size: var(--FS);
    color: var(--FC-PH);
}

.ADMIN-USER-DATA {
    display: grid;
    grid-template-rows: 33.3% 33.3% 33.3%;
    padding: 2%;
}

.ADMIN-USER-LAW {
    padding: 2%;
    display: grid;
    grid-template-columns: 70% 30%;
    place-items: center;
}

.ADMIN-LINK-LAW {
    padding: 5%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.ADMIN-GROUP-DATA,
.ADMIN-LINK-DATA {
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 5%;
}

.ADMIN-GROUP-PIC {
    display: grid;
    grid-template-rows: 70% 30%;
    padding: 2%;
    place-items: center;
}

.ADMIN-GROUP-PIC-FRAME {
    border: 1px solid var(--SE-B);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    place-items: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ADMIN-GROUP-PIC-FRAME img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.LAW-WRAPPER {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
}

.LAW-WRAPPER::-webkit-scrollbar {
    width: 0px;
}

.LAW-WRAPPER::-webkit-scrollbar-track {
    background: transparent;
}

.LAW-WRAPPER::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: none;
}

.LAW-WRAPPER::-webkit-scrollbar-thumb:hover {
    background-color: transparent;
}

.LAW-INPUT {
    min-width: 0;
    width: 400px;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 3px);
    color: var(--FC) !important;
    padding: 5px;
    margin: 5px;
    background: var(--SE-MB);
    border: 2px solid var(--SE-B);
    outline: none;
    text-align: left;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.law-ul {
    list-style: none;
}

.law-li-all {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5px);
    color: var(--FC);
}

.law-li-def {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5px);
    color: red;
}

.law-li-all::before,
.law-li-def::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/img/Arrow-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    vertical-align: sub;
}

.law-li-branch {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5px);
    color: var(--FC);
}

.law-li-branch::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/img/branch.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    vertical-align: middle;
}

.law-select {
    background: transparent;
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5px);
    color: var(--FC);
    border: none;
    outline: none;
    /*-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;*/
}

.law-select option {
    background-color: var(--MB);
    font-family: var(--FF);
    color: var(--FC);
}

.HELP {
    width: 100%;
    max-height: 100%;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
    mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--TB) 4%, var(--TB) 96%, transparent);
}

.HELP::-webkit-scrollbar {
    width: 12px;
}

.HELP::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 10px;
    margin-bottom: 10px;
}

.HELP::-webkit-scrollbar-thumb {
    background-color: var(--TB);
    border-radius: 10px;
    border: 2px solid transparent;
}

.HELP::-webkit-scrollbar-thumb:hover {
    background-color: var(--TB);
}

.HELP-GRID {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 35% 65%;
}

.HELP-HEADER {
    display: grid;
    grid-template-rows: 30px auto;
    padding: 5%;
}

.HELP-HEADER-SIGN {
    font-family: var(--FF);
    font-size: calc(var(--FS) + 5px);
    color: var(--FC);
}

.HELP-HEADER-TEXT {
    font-family: var(--FF);
    font-size: calc(var(--FS));
    color: var(--FC-PH);
}

.HELP-WRAPPER {
    padding: 2%;
}

.HELP-ITEMS-CONTENT {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.HELP-ITEMS-CONTENT-BTN {
    display: flex;
    justify-content: right;
    align-items: center;
    margin: 5px;
}