@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
/* ***********************
    colors
*********************** */
/* ***********************
    typography
*********************** */
/* ***********************
    borders
*********************** */
.hide {
    display: none !important;
}

.relative {
    position: relative;
}

.container {
    max-width: 100rem;
    min-height: 100vh;
    margin: 0 auto;
}

.grid {
    display: grid;
}

    .grid.grid-outer_large, .grid.grid-outer_medium, .grid.grid-inner_large, .grid.grid-inner_medium {
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
    }

    .grid.grid-outer_large, .grid.grid-outer_medium {
        margin-block: 9rem 3rem;
    }

    .grid.grid-outer_large, .grid.grid-inner_large {
        margin-inline: 7.5rem 1.5rem;
    }

    .grid.grid-outer_medium, .grid.grid-inner_medium {
        margin-inline: 14rem 8rem;
    }

    .grid .grid-col-12 {
        grid-column: 1/-1;
    }

    .grid .grid-col-8 {
        grid-column: 3/-3;
    }

    .grid .grid-col-6 {
        grid-column: 4/-4;
    }

    .grid .grid-col-3-start {
        grid-column: 1/4;
    }

    .grid .grid-col-3-end {
        grid-column: -1/-4;
    }

    .grid .grid-col-9-end {
        grid-column: -1/-10;
    }

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .flex.flex-col {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .flex.flex-justify-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .flex.flex-align-center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.text-secondary-70 {
    color: #98AFE2 !important;
}

.text-pink {
    color: #FFB3BF !important;
}

@-webkit-keyframes grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes shrink {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes shrink {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

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

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

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

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

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

@keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    90% {
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    90% {
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
    }
}

@-webkit-keyframes slideInBottom {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slideOutBottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(150%);
        transform: translateY(150%);
    }
}

@keyframes slideOutBottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(150%);
        transform: translateY(150%);
    }
}

@-webkit-keyframes gradientAnimation {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

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

@keyframes gradientAnimation {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

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

@-webkit-keyframes skeletonAnimation {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes skeletonAnimation {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    line-height: 1.17;
    background-color: #171717;
    min-height: 100vh;
    color: white;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0; outline:none;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

input, button, textarea, select {
    font-family: inherit;
    color: inherit;
    background-color: transparent;
    border: none;
    outline: none;
}

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        -o-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.accordion-wrapper {
    border: 1px solid #303030;
    border-radius: 6px;
    padding-bottom: 1.5rem;
}

.accordion {
    position: relative;
}

    .accordion::after {
        content: "";
        width: calc(100% - 3rem);
        height: 1px;
        background-color: #303030;
        position: absolute;
        bottom: 0;
        left: 1.5rem;
    }

.accordion_btn {
    width: 100%;
    font-size: 1.125rem;
    line-height: 1;
    color: #ADADAD;
    padding: 0.75rem 1.5rem;
}

    .accordion_btn > * {
        pointer-events: none;
    }

    .accordion_btn svg {
        -webkit-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .accordion_btn:focus-visible, .accordion_btn:hover {
        background-color: #303030;
        color: #fff;
    }

    .accordion_btn.is-collapsed {
        color: #e0e0e0;
    }

        .accordion_btn.is-collapsed svg {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

.accordion_panel {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.38;
    color: #ADADAD;
    letter-spacing: 0.25px;
    padding: 0 1.5rem 1.5rem;
    display: none;
}

    .accordion_panel.is-open {
        display: block;
    }

.btn {
    font-size: 0.875rem;
    color: #fff;
    line-height: 1.71;
    letter-spacing: 0.25px;
    border-radius: 6px;
    min-height: 2.5rem;
    white-space: nowrap;
    display: grid;
    place-items: center;
    position: relative;
}

    .btn.is-loading {
        cursor: not-allowed;
    }

        .btn.is-loading:focus-visible::before {
            opacity: 0;
        }

    .btn[disabled], .btn.is-disabled {
        pointer-events: none;
    }

        .btn[disabled]:focus-visible::before, .btn.is-disabled:focus-visible::before {
            opacity: 0;
        }

    .btn::before {
        content: "";
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        position: absolute;
        top: -4px;
        left: -4px;
        border-width: 1px;
        border-style: solid;
        border-radius: 9px;
        opacity: 0;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

.btn-text {
    min-width: 7.5rem;
    padding-inline: 1.7em;
}

.btn-text-icon {
    min-width: 9.375rem;
    display: grid;
    grid-template-columns: 1fr -webkit-max-content;
    grid-template-columns: 1fr max-content;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2.85em;
    padding-inline: 1.14em 0.86em;
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.btn-primary {
    background-color: #1252DB;
    color: #fff;
}

    .btn-primary svg path {
        fill: #fff;
    }

    .btn-primary::before {
        border-color: #2966E1;
    }

    .btn-primary:focus-visible, .btn-primary:hover {
        background-color: #2966E1;
    }

    .btn-primary:active {
        background-color: #1044BD;
    }

    .btn-primary:focus-visible::before {
        opacity: 1;
    }

    .btn-primary[disabled], .btn-primary.is-disabled {
        color: #616161;
        background-color: #242424;
        pointer-events: none;
    }

        .btn-primary[disabled] svg path, .btn-primary.is-disabled svg path {
            fill: #616161;
        }

        .btn-primary[disabled]:focus-visible, .btn-primary.is-disabled:focus-visible {
            background-color: #242424;
        }

    .btn-primary.is-loading:hover, .btn-primary.is-loading:focus-visible {
        background-color: #1252DB;
    }

.btn-secondary {
    background-color: #616161;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}

    .btn-secondary::before {
        border-color: #e0e0e0;
    }

    .btn-secondary:focus-visible {
        color: #242424;
        background-color: #e0e0e0;
    }

        .btn-secondary:focus-visible svg path {
            fill: #242424;
        }

    .btn-secondary:hover {
        background-color: #3d3d3d;
        color: #F5F5F5;
    }

        .btn-secondary:hover svg path {
            fill: #F5F5F5;
        }

    .btn-secondary:active {
        background-color: #242424;
        border-color: #e0e0e0;
        color: #e0e0e0;
    }

        .btn-secondary:active svg path {
            fill: #e0e0e0;
        }

    .btn-secondary:focus-visible::before {
        opacity: 1;
    }

    .btn-secondary[disabled], .btn-secondary.is-disabled {
        color: #616161;
        background-color: #242424;
        pointer-events: none;
    }

        .btn-secondary[disabled] svg path, .btn-secondary.is-disabled svg path {
            fill: #616161;
        }

        .btn-secondary[disabled]:focus-visible, .btn-secondary.is-disabled:focus-visible {
            background-color: #242424;
            color: #616161;
        }

            .btn-secondary[disabled]:focus-visible svg path, .btn-secondary.is-disabled:focus-visible svg path {
                fill: #616161;
            }

    .btn-secondary.is-loading:hover, .btn-secondary.is-loading:focus-visible {
        background-color: #616161;
        color: #fff;
    }

        .btn-secondary.is-loading:hover svg path, .btn-secondary.is-loading:focus-visible svg path {
            fill: #fff;
        }

.btn-outline {
    color: #e0e0e0;
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: #e0e0e0;
}

    .btn-outline svg path {
        fill: #e0e0e0;
    }

    .btn-outline::before {
        border-color: #e0e0e0;
    }

    .btn-outline:focus-visible {
        color: #242424;
        background-color: #e0e0e0;
    }

        .btn-outline:focus-visible svg path {
            fill: #242424;
        }

    .btn-outline:hover {
        background-color: #e0e0e0;
        color: #242424;
    }

        .btn-outline:hover svg path {
            fill: #242424;
        }

    .btn-outline:active {
        background-color: #ADADAD;
        border-color: #ADADAD;
    }

    .btn-outline:focus-visible::before {
        opacity: 1;
    }

    .btn-outline[disabled], .btn-outline.is-disabled {
        color: #4d4d4d;
        border-color: #4d4d4d;
        pointer-events: none;
    }

        .btn-outline[disabled] svg path, .btn-outline.is-disabled svg path {
            fill: #4d4d4d;
        }

        .btn-outline[disabled]:focus-visible, .btn-outline.is-disabled:focus-visible {
            background-color: transparent;
            color: #4d4d4d;
        }

            .btn-outline[disabled]:focus-visible svg path, .btn-outline.is-disabled:focus-visible svg path {
                fill: #4d4d4d;
            }

    .btn-outline.is-loading:hover, .btn-outline.is-loading:focus-visible {
        background-color: transparent;
        color: #e0e0e0;
    }

        .btn-outline.is-loading:hover svg path, .btn-outline.is-loading:focus-visible svg path {
            fill: #e0e0e0;
        }

.btn-ghost {
    color: #AECAF8;
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}

    .btn-ghost svg path {
        fill: #AECAF8;
    }

    .btn-ghost::before {
        border-color: #303030;
    }

    .btn-ghost:focus-visible {
        background-color: #303030;
    }

    .btn-ghost:hover {
        background-color: #303030;
    }

    .btn-ghost:active {
        background-color: #3d3d3d;
    }

    .btn-ghost:focus-visible::before {
        opacity: 1;
    }

    .btn-ghost[disabled], .btn-ghost.is-disabled {
        color: #616161;
        pointer-events: none;
    }

        .btn-ghost[disabled] svg path, .btn-ghost.is-disabled svg path {
            fill: #616161;
        }

        .btn-ghost[disabled]:focus-visible, .btn-ghost.is-disabled:focus-visible {
            background-color: transparent;
            color: #616161;
        }

            .btn-ghost[disabled]:focus-visible svg path, .btn-ghost.is-disabled:focus-visible svg path {
                fill: #616161;
            }

    .btn-ghost.is-loading {
        background-color: #303030;
    }

        .btn-ghost.is-loading:hover, .btn-ghost.is-loading:focus-visible {
            background-color: #303030;
            color: #AECAF8;
        }

            .btn-ghost.is-loading:hover svg path, .btn-ghost.is-loading:focus-visible svg path {
                fill: #AECAF8;
            }

.btn-loader {
    -webkit-animation: spin 0.7s linear infinite;
    animation: spin 0.7s linear infinite;
}

.icon {
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
}
.chip-btn, .chip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 0.89rem;
    line-height: 1.14;
    letter-spacing: 0.25px;
    color: rgba(255, 255, 255, 0.85);
}
.chip {
    background-color: #303030;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;

}
.chip-btn {
    border: 1px solid #616161;
    border-radius: 100vh;
    padding: 0.5rem 0.75rem;
}
    .chip-btn.blue {
        border: 1px solid #87B0F6;
        color: #87b0f6;
    }
    .chip-btn.red {
        border: 1px solid #D30D0D;
        color: #D30D0D;
    }
   

    .chip-btn:focus-visible, .chip-btn:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.87);
    }

    .chip-btn.active {
        color: #171717;
        background-color: #87B0F6;
        border-color: #87B0F6;
    }

        .chip-btn.active svg {
            display: inline-block;
        }


/* *********************
    NAVIGATION BUTTONS
********************** */
.module-btn {
    width: 4.5rem;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.25rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0.75em;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

    .module-btn#user-menu-btn {
        height: 4.5rem;
    }

        .module-btn#user-menu-btn > * {
            pointer-events: none;
        }

    .module-btn:focus, .module-btn:hover {
        background-color: #2966E1;
    }

        .module-btn:focus .module-btn_label, .module-btn:hover .module-btn_label {
            color: #E0E0E0;
        }

        .module-btn:focus svg path, .module-btn:hover svg path {
            fill: #fff;
        }

    .module-btn:active {
        -webkit-transform: scale(0.92);
        -ms-transform: scale(0.92);
        transform: scale(0.92);
    }

    .module-btn.is-active {
        background-color: #2966E1;
    }

        .module-btn.is-active svg path {
            fill: #fff;
        }

.module-btn_icon {
    pointer-events: none;
    min-width: 24px;
    min-height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.module-btn_label {
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 500;
    color: #ADADAD;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 4px;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

.toggle-menu-btn > * {
    pointer-events: none;
}

.user-avatar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0;
    background-color: transparent;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

    .user-avatar img {
        pointer-events: none;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .user-avatar:active img {
        -webkit-transform: scale(0.92);
        -ms-transform: scale(0.92);
        transform: scale(0.92);
    }

.hub-btn {
    background-color: #303030;
    border-radius: 6px;
    width: 4.5rem;
    height: 4rem;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0;
    border: 1px solid #303030;
    border-radius: 6px;
    position: relative;
    z-index: 1111;
}

.hub-btn_icon-default {
    pointer-events: none;
    position: absolute;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.hub-btn:focus .hub-btn_icon-default, .hub-btn:hover .hub-btn_icon-default {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.hub-btn:focus .hub-btn_icon, .hub-btn:hover .hub-btn_icon {
    opacity: 1;
}

    .hub-btn:focus .hub-btn_icon .square, .hub-btn:hover .hub-btn_icon .square {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
.hub-btn:active {
    background-color: #0F0F0F;
}

    .hub-btn:active .hub-btn_icon {
        -webkit-transform: scale(0.91);
        -ms-transform: scale(0.91);
        transform: scale(0.91);
    }

.hub-btn[aria-expanded=true] {
    background-color: #242424;
    border: none;
}

    .hub-btn[aria-expanded=true] .hub-btn_icon-default {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }

    .hub-btn[aria-expanded=true] .hub-btn_icon {
        opacity: 1;
    }

        .hub-btn[aria-expanded=true] .hub-btn_icon .square {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
        }

.hub-btn_icon-default,
.hub-btn_icon {
    pointer-events: none;
    position: absolute;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.hub-btn_icon {
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 3px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 20px;
    height: 20px;
    opacity: 0;
}

    .hub-btn_icon .square {
        width: 4px;
        height: 4px;
        border-radius: 1px;
        background-color: #fff;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

        .hub-btn_icon .square:nth-child(1) {
            -webkit-transform: translateX(-200%) translateY(-200%);
            -ms-transform: translateX(-200%) translateY(-200%);
            transform: translateX(-200%) translateY(-200%);
        }

        .hub-btn_icon .square:nth-child(2) {
            -webkit-transform: translateY(-200%);
            -ms-transform: translateY(-200%);
            transform: translateY(-200%);
        }

        .hub-btn_icon .square:nth-child(3) {
            -webkit-transform: translateX(200%) translateY(-200%);
            -ms-transform: translateX(200%) translateY(-200%);
            transform: translateX(200%) translateY(-200%);
        }

        .hub-btn_icon .square:nth-child(4) {
            -webkit-transform: translateX(-200%);
            -ms-transform: translateX(-200%);
            transform: translateX(-200%);
        }

        .hub-btn_icon .square:nth-child(6) {
            -webkit-transform: translateX(200%);
            -ms-transform: translateX(200%);
            transform: translateX(200%);
        }

        .hub-btn_icon .square:nth-child(7) {
            -webkit-transform: translateX(-200%) translateY(200%);
            -ms-transform: translateX(-200%) translateY(200%);
            transform: translateX(-200%) translateY(200%);
        }

        .hub-btn_icon .square:nth-child(8) {
            -webkit-transform: translateY(200%);
            -ms-transform: translateY(200%);
            transform: translateY(200%);
        }

        .hub-btn_icon .square:nth-child(9) {
            -webkit-transform: translateX(200%) translateY(200%);
            -ms-transform: translateX(200%) translateY(200%);
            transform: translateX(200%) translateY(200%);
        }

/* *********************
    TABLE BUTTONS
********************** */
.filter-btn svg {
    pointer-events: none;
}

.filter-btn:hover svg path, .filter-btn.active svg path {
    fill: #6295F4;
}

.drag-trigger {
    cursor:grab;
}
.drag-trigger *{
    pointer-events:none
}

.drag-btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0;
    cursor: -webkit-grab;
    cursor: grab;
}

    .drag-btn span {
        display: inline-block;
        width: 0.125rem;
        height: 0.125rem;
        border-radius: 50%;
        background-color: #949494;
    }

.table-cell_option-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    background-color: #242424;
    border-radius: 6px;
}

    .table-cell_option-btn:focus-visible, .table-cell_option-btn:hover {
        background-color: #2966E1;
    }

.back-to-top {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    background-color: #282828;
    border-radius: 50%;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
}

/* *********************
    TOOLBAR BUTTONS
********************** */
.toolbar-btn {
    width: 3rem;
    height: 2.75rem;
    /*padding: 0.5rem 1rem;*/
    border: 1px solid #303030;
    border-radius: 6px;
    display: grid;
    place-items: center;
}

    .toolbar-btn:focus-visible, .toolbar-btn:hover {
        background-color: #303030;
    }

    .toolbar-btn.active {
        color: #000F59;
        background-color: #7F95C8;
        border-color: #6295F4;
    }

        .toolbar-btn.active path {
            fill: #000F59;
        }

.custom-choice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    cursor: pointer;
}

.custom-choice_input {
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    position: relative;
    background-color: #0F0F0F;
    border: 2px solid #4d4d4d;
    border-radius: 4px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .custom-choice_input[type=checkbox]::after {
        content: "";
        width: 12px;
        height: 9.3px;
        background: url(../img/check.svg) center center/contain no-repeat;
        display: none;
    }

    .custom-choice_input[type=radio] {
        border-radius: 50%;
    }

        .custom-choice_input[type=radio]::after {
            content: "";
            width: 10px;
            height: 10px;
            background-color: #2966E1;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            display: none;
        }

    .custom-choice_input:focus, .custom-choice_input:hover {
        border-color: #616161;
    }

    .custom-choice_input:active, .custom-choice_input:checked {
        border-color: #2966E1;
    }

    .custom-choice_input[type=checkbox]:active, .custom-choice_input[type=checkbox]:checked {
        background-color: #2966E1;
    }

    .custom-choice_input:checked::after {
        display: block;
    }

.toggle-checkbox {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 52px;
    height: 32px;
    border: 2px solid #4d4d4d;
    border-radius: 100vh;
    background-color: #0F0F0F;
    vertical-align: text-bottom;
    margin: auto;
    color: inherit;
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    cursor: pointer;
}

    .toggle-checkbox::before, .toggle-checkbox::after {
        content: "";
        position: absolute;
        top: 50%;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .toggle-checkbox::before {
        background-color: #616161;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        left: 6px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .toggle-checkbox::after {
        width: 58px;
        height: 38px;
        background-color: rgba(0, 67, 222, 0.2);
        border-radius: 100vh;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    .toggle-checkbox:checked {
        background-color: #2966E1;
        border-color: #2966E1;
    }

        .toggle-checkbox:checked::before {
            width: 24px;
            height: 24px;
            background-color: #fff;
            left: unset;
            right: 3px;
        }

    .toggle-checkbox:focus-visible::after {
        opacity: 1;
    }

.toggle-wrapper {
    padding: 2rem 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 4.125rem;
}

    .toggle-wrapper:not(:last-child) {
        border-bottom: 1px solid #303030;
        border-radius: 0;
    }

    .toggle-wrapper:not(.no-hover):focus, .toggle-wrapper:not(.no-hover):hover {
        background-color: #303030;
        cursor: pointer;
    }

.toggle_image {
    min-width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
}

    .toggle_image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .toggle_image.dark {
        background-color: #071942;
        display: grid;
        place-items: center;
    }

.toggle_description {
    max-width: 50ch;
}

    .toggle_description .title {
        font-size: 1rem;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 0.65em;
    }

    .toggle_description p {
        font-size: 0.89rem;
        line-height: 1.13;
        color: #949494;
    }

.input-wrapper input {
    width: 100%;
    color: rgba(255, 255, 255, 0.87);
}

    .input-wrapper input::-webkit-input-placeholder {
        color: #4d4d4d;
    }

    .input-wrapper input::-moz-placeholder {
        color: #4d4d4d;
    }

    .input-wrapper input:-ms-input-placeholder {
        color: #4d4d4d;
    }

    .input-wrapper input::-ms-input-placeholder {
        color: #4d4d4d;
    }

    .input-wrapper input::placeholder {
        color: #4d4d4d;
    }

    .input-wrapper input.invalid {
        border-color: #F87C9B !important;
    }

        .input-wrapper input.invalid + .validation-message {
            display: block;
        }
.form_input .form-tag {
    font-size: 0.7rem;
    background-color: #E03F5A;
    padding: 5px 12px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 1rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.input-wrapper .form_image-upload {
    border-color: #4D4D4D;
    border-style: dashed;
    border-width: 1px;
}

.input-wrapper .validation-message {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25;
    letter-spacing: 0.5px;
    color: #F87C9B !important;
    display: none;
}

.input-wrapper:has(input.invalid) .custom-select:has(.invalid), .input-wrapper:has(input.invalid) input {
    border-color: #F87C9B !important;
}

.input-wrapper:has(input.invalid) .validation-message {
    display: block;
}

.input-wrapper .custom-select:has(.invalid) {
    border-color: #F87C9B !important;
}

    .input-wrapper .custom-select:has(.invalid) + .validation-message {
        display: block;
    }


.category-toolbar .category-link h1 {
    font-size: 1.5rem;
}

.category-toolbar .category-link:hover h1 {
    text-decoration: underline
}

.category-toolbar .category-link:not(:first-child) {
    position: relative;
    padding-left: 1.5rem;
}

    .category-toolbar .category-link:not(:first-child)::before {
        content: ">";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.5rem;
    }


.category-select-menu {
    border: 1px solid #4D4D4D;
    border-radius: 4px;
    background-color: #303030;
    max-height: 10rem;
    max-width: 250px;
    overflow: auto;
    position:relative;
}
.category-select-menu input[type="text"]{
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    margin-bottom: 1rem;
    position: sticky;
    top:0;
    width: 100%;
    z-index:9
}
    .category-select-menu .select-options {
        display:flex;
        flex-direction:column;
        gap:.5rem;
    padding: 0.875rem 1.375rem;
    }
    .category-select-menu .select-options input[type="checkbox"]{
        width:fit-content;
    }
.login-input {
    font-size: 1.125rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.87);
    background-color: #171717;
    border: 1px solid #303030;
    border-radius: 6px;
    padding: 0.875rem 1.375rem;
    outline-color: #2966E1;
}
    .login-input::-webkit-input-placeholder {
        color: #4d4d4d;
    }

    .login-input::-moz-placeholder {
        color: #4d4d4d;
    }

    .login-input:-ms-input-placeholder {
        color: #4d4d4d;
    }

    .login-input::-ms-input-placeholder {
        color: #4d4d4d;
    }

    .login-input::placeholder {
        color: #4d4d4d;
    }
    .login-input:focus-within {
        border-color: #3079CF;
    }

.password-wrapper input {
    width: 100%;
}

.password-wrapper button {
    position: absolute;
    top: 50%;
    right: 0.875rem;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.form_input {
    grid-template-columns: 1fr 2fr;
    position: relative;
}

    .form_input:first-child {
        border-radius: 6px 6px 0 0 !important;
    }

        .form_input:first-child > span {
            border-top-left-radius: 6px;
        }

        .form_input:first-child > input, .form_input:first-child > .custom-select {
            border-top-right-radius: 6px;
            overflow: hidden;
        }

    .form_input .validation-message.flex {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.5rem;
        position: absolute;
        top: 50%;
        right: -0.5rem;
        -webkit-transform: translate(100%, -50%);
        -ms-transform: translate(100%, -50%);
        transform: translate(100%, -50%);
        display: none;
    }

        .form_input .validation-message.flex span {
            color: #F87C9B;
            font-size: 0.75rem;
            line-height: 1.25;
            letter-spacing: 0.5px;
            padding: 0;
        }

    .form_input span, .form_input input, .form_input textarea {
        font-size: 0.89rem;
        line-height: 1.13;
    }

    .form_input span {
        color: #e0e0e0;
        padding: 1.125rem 1.5rem;
    }

    .form_input input, .form_input textarea {
        color: rgba(255, 255, 255, 0.87);
        outline: none;
        padding-left: 1em;
    }

        .form_input input::-webkit-input-placeholder, .form_input textarea::-webkit-input-placeholder {
            color: #4d4d4d;
        }

        .form_input input::-moz-placeholder, .form_input textarea::-moz-placeholder {
            color: #4d4d4d;
        }

        .form_input input:-ms-input-placeholder, .form_input textarea:-ms-input-placeholder {
            color: #4d4d4d;
        }

        .form_input input::-ms-input-placeholder, .form_input textarea::-ms-input-placeholder {
            color: #4d4d4d;
        }

        .form_input input::placeholder, .form_input textarea::placeholder {
            color: #4d4d4d;
        }

        .form_input input:focus-visible, .form_input input:hover, .form_input textarea:focus-visible, .form_input textarea:hover {
            background-color: #171717;
        }

        .form_input input[disabled], .form_input textarea[disabled] {
            cursor: not-allowed;
        }

            .form_input input[disabled]:focus-visible, .form_input input[disabled]:hover, .form_input textarea[disabled]:focus-visible, .form_input textarea[disabled]:hover {
                background-color: transparent;
            }

    .form_input textarea {
        resize: none;
        padding-top: 1rem;
    }

        .form_input textarea#note:focus-visible, .form_input textarea#note:hover {
            resize: vertical;
        }

    .form_input.color-picker {
        position: relative;
    }

        .form_input.color-picker input[type=color] {
            position: absolute;
            top: 50%;
            right: 1rem;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            visibility: hidden;
        }

        .form_input.color-picker:focus-visible input, .form_input.color-picker:focus-visible textarea, .form_input.color-picker:hover input, .form_input.color-picker:hover textarea, .form_input.color-picker.active input, .form_input.color-picker.active textarea {
            background-color: #171717;
        }

            .form_input.color-picker:focus-visible input[type=color], .form_input.color-picker:hover input[type=color], .form_input.color-picker.active input[type=color] {
                visibility: visible;
            }

    .form_input .custom-select,
    .form_input .custom-dropdown {
        gap: 1.5rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-right: 1.25rem;
        position: relative;
    }

    .form_input .results-wrapper {
        margin-top: 0;
        width: 100%;
        padding-left: 0.8rem;
        font-size: 0.89rem;
        line-height: 1.13;
        color: #fff;
        cursor: pointer;
    }

    .form_input .add-zone-btn {
        font-size: 0.89rem;
        line-height: 1.13;
        color: #98AFE2;
    }

    .form_input:has(.invalid) {
        background-color: rgba(128, 43, 57, 0.4);
    }

        .form_input:has(.invalid) span {
            color: rgba(255, 255, 255, 0.6);
        }

        .form_input:has(.invalid) .custom-select {
            background-color: rgba(128, 43, 57, 0.1);
        }

        .form_input:has(.invalid) input, .form_input:has(.invalid) textarea {
            color: rgba(255, 255, 255, 0.87);
        }

        .form_input:has(.invalid) .validation-message {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

    .form_input.error {
        background-color: rgba(128, 43, 57, 0.4);
    }

        .form_input.error span {
            color: rgba(255, 255, 255, 0.6);
        }

        .form_input.error .custom-select, .form_input.error select {
            background-color: rgba(128, 43, 57, 0.1);
        }

        .form_input.error input {
            color: rgba(255, 255, 255, 0.87);
        }

        .form_input.error .validation-message {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

    .form_input.is-disabled span {
        color: #616161;
    }

    .form_input.is-disabled input {
        cursor: not-allowed;
    }

        .form_input.is-disabled input[type=date] {
            opacity: 0.2;
        }

    .form_input:not(:last-child) {
        border-bottom: 1px solid #303030;
        border-radius: 0;
    }

.form_image-upload {
    width: 100%;
    height: 100%;
    width: 300px;
    height: 300px;
    cursor: pointer;
    border-color: #4D4D4D;
    border-style: dashed;
    border-width: 1px;
    position:relative;
}

    .form_image-upload input[type=file] {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        opacity:0;
        position:absolute;
        top:0;
        left:0;
        z-index:99;
    cursor:pointer;
    }

.image-upload_text {
    margin-inline: auto;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding-block: 2rem;
}

.form_image-upload_multiple {
    flex-wrap: wrap;
    gap: .5rem;
}

    .form_image-upload_multiple .upload-btn, .form_image-upload_multiple .image-preview
    {
        width: 142px;
        height: 142px;
        position: relative;
    }
        .form_image-upload_multiple .image-preview .btn-ghost {
            position: absolute;
            top: 4px;
            right: 4px;
            z-index: 10;
            background-color: #3d3d3d;
            border-radius: 100%;
            min-width: 40px;
            height: 1.5rem;

        }
        .form_image-upload_multiple .image-preview .btn:hover svg path{
            fill-opacity: 1;
        }
    .form_image-upload_multiple .upload-btn {
        display: flex;
        flex-direction: column;
        gap: 28px;
        align-items: center;
        justify-content: center;
        border: 1px dashed #4D4D4D;
        position: relative;
    }
    .form_image-upload_multiple .upload-btn input{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    cursor:pointer;
    }
    .form_image-upload_multiple .image-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .custom-searchbar {
        position: relative;
        width: 7.625rem;
        padding: 0 1rem 0 2.5rem;
        overflow: hidden;
        background-color: #171717;
        border: 1px solid #303030;
        border-radius: 6px;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .custom-searchbar input {
        font-size: 1rem;
        line-height: 1.5;
        color: #616161;
        background: transparent;
        border: none;
        outline: none;
        padding: 0.625rem 0;
        max-width: 100%; /**/
    }

    .custom-searchbar:focus-visible, .custom-searchbar:hover {
        border-color: #616161;
    }

    .custom-searchbar:focus-within {
        border-color: #3079CF;
        width: 11.25em;
    }

        .custom-searchbar:focus-within #clear-input-btn {
            display: grid;
        }

.searchbar_icon {
    position: absolute;
}

    .searchbar_icon.magnifier {
        left: 1rem;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .searchbar_icon#clear-input-btn {
        width: 2rem;
        height: 100%;
        top: 0;
        right: 0;
        place-items: center;
        background: #171717;
        padding-inline: 0.5rem;
        border: none;
        display: none;
    }

.table_filter {
    color: #fff;
    border: 1px solid #616161;
    border-radius: 6px;
    background-color: #3d3d3d;
    -webkit-box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
    padding: 0.5rem 0;
    display: grid;
    min-width: 150px;
    position: absolute;
    top: calc(100% - 0.6rem);
    z-index: 5;
    visibility: hidden;
    white-space: nowrap;
}

    .table_filter > * {
        padding: 0.25rem 1rem;
        cursor: pointer;
    }

        .table_filter > * label {
            cursor: pointer;
        }

        .table_filter > *:focus-visible, .table_filter > *:hover {
            background-color: rgba(255, 255, 255, 0.08);
        }

    .table_filter.is-visible {
        visibility: visible;
    }

.header-cell .flex {
    gap: 0.75rem;
}

.header-cell.first-cell {
    padding-left: 1rem;
    border-left: none;
}

    .header-cell.first-cell.relative {
        z-index: 10 !important;
    }

.header-cell:last-child {
    border-right: none;
}

.header-cell.is-row-draggable {
    padding-left: 2.5rem;
}

.header-cell:focus, .header-cell:hover {
    background-color: #171717;
}

    .header-cell:focus svg path, .header-cell:hover svg path {
        fill: #6295F4;
    }

.table-cell {
    min-height: 3.125rem;
    border: 1px solid #3d3d3d;
    border-radius: 0;
    border-right: none;
    border-top: none;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-inline: 1rem;
    font-size: 0.79rem;
    line-height: 1.17;
    color: #ADADAD;
    background-color: #242424;
}

    .table-cell .table_shop-icon {
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        display: grid;
        place-items: center;
        background: #E0E0E0;
        border-radius: 4px;
    }

.table-cell_row-title {
    border-left: none;
}

    .table-cell_row-title .flex {
        gap: 1rem;
    }

    .table-cell_row-title .custom-checkbox {
        visibility: hidden;
    }

    .table-cell_row-title .drag-btn {
        visibility: hidden;
    }

    .table-cell_row-title h3 {
        font-size: 0.89rem;
        font-weight: 400;
        line-height: 1.13;
        color: #fff;
    }

    .table-cell_row-title .table-modal-btn h3:focus, .table-cell_row-title .table-modal-btn h3:hover {
        color: #6295F4;
    }

.table-cell_content > p.flex {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
}

.table-cell_tags .flex {
    gap: 0.5rem;
    white-space: nowrap;
}

.table-cell_tags p {
    font-size: 0.7rem;
    color: #fff;
    line-height: 1.25;
    letter-spacing: 0.04em;
    padding: 0.45em 1.07em;
    background-color: #303030;
    border-radius: 6px;
}

.table-cell_status {
    padding: 0.5rem;
}

    .table-cell_status p, .table-cell_status button {
        font-size: 0.89rem;
        line-height: 1.14;
        padding: 0.625rem 1rem;
        border-radius: 6px;
        text-align: left;
    }

    .table-cell_status p {
        margin-left: 0.75rem;
        padding-left: 1.25rem;
    }

        .table-cell_status p::before {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 2px;
            position: absolute;
            top: 50%;
            left: 0;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .table-cell_status p.success::before {
            background-color: #3acf64;
        }

        .table-cell_status p.danger::before {
            background-color: #D30D0D;
        }

        .table-cell_status p.warning::before {
            background-color: #ED6733;
        }
        .table-cell_status p.info::before {
            background-color: #2966E1;
        }
        .table-cell_status p.neutral::before {
            background-color: #616161;
        }

    .table-cell_status button {
        color: #fff;
    }

        .table-cell_status button.success {
            background-color: #39A050;
        }

        .table-cell_status button.danger {
            background-color: #D30D0D;
        }

        .table-cell_status button.warning {
            background-color: #C3B048;
        }

        .table-cell_status button.neutral {
            background-color: #616161;
        }

.table-cell_options .flex {
    gap: 0.5rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    justify-self: end;
}

.table-cell_options .table-cell_option-btn {
    visibility: hidden;
}

.results-wrapper {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 1.375rem;
    gap: 1rem;
}

.results {
    font-size: 0.79rem;
    line-height: 1.17;
    color: #949494;
    margin-right: auto;
}

.table-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #1252DB;
    border-radius: 6px;
    gap: 0.75rem;
    padding: 0.75rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    bottom: 2rem;
    left: 40%;
    display: none;
    -webkit-transform: translateY(150%);
    -ms-transform: translateY(150%);
    transform: translateY(150%);
    opacity: 0;
}

    .table-toolbar.notification-toolbar {
        background-color: #303030;
        border: 1px solid #3d3d3d;
        border-radius: 6px;
        z-index:999;
    }

    .table-toolbar.active {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-animation: slideInBottom 0.5s linear forwards;
        animation: slideInBottom 0.5s linear forwards;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .table-toolbar.reverse {
        -webkit-animation: slideOutBottom 0.5s linear forwards;
        animation: slideOutBottom 0.5s linear forwards;
    }

    .table-toolbar .btn-wrapper {
        gap: 0.75rem;
        border-right: 1px solid #1044BD;
        border-left: 1px solid #1044BD;
        padding-inline: 0.75rem;
    }

    .table-toolbar button {
        height: 2.5rem;
        border-radius: 6px;
        display: grid;
        place-items: center;
    }

        .table-toolbar button:not(.archive-btn) {
            width: 2.5rem;
        }

        .table-toolbar button:hover {
            background-color: #1044BD;
        }

    .table-toolbar .archive-btn {
        color: white;
        font-size: 0.875rem;
        line-height: 1.7;
        letter-spacing: 0.1px;
        padding-inline: 0.75rem;
    }

    .table-toolbar p {
        color: #F5FAFF;
        font-size: 0.875rem;
        line-height: 1.7;
        letter-spacing: 0.1px;
    }

        .table-toolbar p span {
            color: #2966E1;
            line-height: 1.14;
            font-weight: 600;
            background-color: white;
            border-radius: 6px;
            padding: 0.25rem 0.5rem;
            margin-right: 0.5rem;
        }

@media (min-width: 117.875em) {
    .table.table-col-10 {
        overflow-x: hidden;
    }

    .table-nav-btn {
        display: none;
    }
}

.pagination {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.25rem;
}

.pagination_list-item {
    font-size: 0.89rem;
    line-height: 1.14;
    color: #fff;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
}

    .pagination_list-item.prev, .pagination_list-item.next {
        border: 1px solid #303030;
        border-radius: 6px;
    }

    .pagination_list-item:focus, .pagination_list-item:hover {
        background-color: #303030;
    }

    .pagination_list-item.active {
        background-color: #2966E1;
    }

.page-selection-wrapper {
    gap: 0.7rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .page-selection-wrapper p, .page-selection-wrapper input {
        font-size: 0.89rem;
        line-height: 1.14;
    }

    .page-selection-wrapper p {
        color: rgba(255, 255, 255, 0.6);
    }

    .page-selection-wrapper input {
        max-width: 2.7rem;
        color: #fff;
        padding: 0.625rem 0.75rem;
        background-color: #000000;
        border: 1px solid #303030;
        border-radius: 6px;
    }

.form-content {
    width: 100%;
    max-width: 32.625rem;
    min-height: 489px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #949494;
    background-color: #242424;
    border: 1px solid #3d3d3d;
    border-radius: 12px;
    -webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
    padding: 3.75rem 2.5rem 6rem 1.5rem;
    padding: 3.75rem clamp(2.5rem, 0.5 + 10vw ,5.5rem) 6rem clamp(1.5rem, 0 + 7.5vw, 3.75rem);
    margin-top: 2rem;
}
@media (min-width: 800px) {
    .form-content {
        padding: 3.75rem 5.5rem 6rem 3.75rem;
    }
}
    .form-content.login {
        position: relative;
        overflow: hidden;
    }

        .form-content.login.no-match .no-match-msg {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

    .form-content.success {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .form-content.success .title {
            margin-top: 5rem;
        }

        .form-content.success .description {
            margin-bottom: 6rem;
        }

    .form-content .title {
        font-size: 2.28rem;
        line-height: 1.17;
        color: #fff;
        margin-bottom: 1rem;
    }

    .form-content .description {
        font-size: 1rem;
        line-height: 1.17;
    }

    .form-content form {
        margin-block: 1.5rem 1rem;
        padding-bottom: 2.7rem;
        border-bottom: 1px solid #303030;
        border-radius: 0;
    }

    .form-content .login-inputs {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 2.3rem;
    }

    .form-content .forgot-password {
        font-size: 0.89rem;
        line-height: 1.13;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        gap: 11px;
    }

        .form-content .forgot-password a {
            color: #6295F4;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            gap: 6px;
        }

.social-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1em;
    margin-top: 3.75rem;
}

    .social-login button {
        font-size: 1.125rem;
        line-height: 1;
        letter-spacing: 0.02em;
        color: #e0e0e0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2rem;
        padding: 0.875rem 1.375rem;
        background-color: #303030;
        border: 1px solid #4d4d4d;
        border-radius: 6px;
    }

        .social-login button:focus, .social-login button:hover {
            background-color: #4d4d4d;
        }

.password-conditions-list {
    margin-block: 1.5rem 5rem;
    display: grid;
    gap: 0.7rem;
}

    .password-conditions-list li {
        font-size: 0.7rem;
        line-height: 1.25;
        letter-spacing: 0.04em;
        color: #4d4d4d;
        padding-left: 1.5rem;
        position: relative;
    }

        .password-conditions-list li::before {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            background-color: #4d4d4d;
            border-radius: 2px;
            position: absolute;
            left: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .password-conditions-list li.checked {
            color: #fff;
        }

            .password-conditions-list li.checked::before {
                background-color: #3acf64;
            }

.title-wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.825rem;
    margin-bottom: 3rem;
}

    .title-wrapper button {
        background-color: #303030;
        border: 1px solid #3d3d3d;
        border-radius: 6px;
        padding: 0.625rem 1rem;
    }

    .title-wrapper p {
        font-size: 1.125rem;
        line-height: 2.22;
        color: #fff;
        letter-spacing: 1px;
        font-weight: 300;
    }

.renew-password {
    padding-block: 0;
}

    .renew-password form {
        margin-block: 2.2rem 0;
        border-bottom: none;
        padding: 0;
    }

        .renew-password form input {
            width: 100%;
            margin-bottom: 2.5rem;
        }

.create-new-password {
    padding-bottom: 3rem;
}

    .create-new-password form {
        margin-top: 5rem;
        border-bottom: none;
        padding: 0;
    }

.check-email {
    padding-bottom: 2.5rem;
}

    .check-email .forgot-password {
        margin-top: auto;
    }

.no-match-msg {
    gap: 0.75rem;
    background-color: #993E3E;
    color: #ffe6e6;
    font-size: 0.75rem;
    padding: 0.75rem 1.5rem 0.75rem 4rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: none;
}

    .no-match-msg button {
        margin-left: auto;
    }

.ck.ck-reset.ck-editor {
    max-width: 100%;
}

.ck.ck-toolbar {
    border-color: #303030 !important;
}

    .ck.ck-toolbar.ck-toolbar_grouping {
        background-color: #303030 !important;
    }

.ck-reset_all :not(.ck-reset_all-excluded *), .ck.ck-reset_all {
    color: #fff !important;
}

.ck.ck-editor__main > .ck-editor__editable {
    background-color: #171717 !important;
    border-color: #303030 !important;
    min-height: 400px !important;
    color: #fff !important;
}

.ck.ck-button:focus,
.ck.ck-button:hover {
    background-color: #171717 !important;
}

.ck.ck-button.ck-on, a.ck.ck-button.ck-on {
    background-color: #171717 !important;
}

.ck.ck-dropdown__panel {
    background-color: #303030;
    border: 1px solid #4d4d4d;
}

.ck.ck-reset.ck-list {
    background-color: #303030;
    border: 1px solid #4d4d4d;
}

.ck.ck-input {
    background-color: #303030;
    border: 1px solid #4d4d4d;
}

.cropper-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0.7rem;
    padding: 1.2rem 1.5rem;
}

    .cropper-container .title {
        grid-column: 2/-1;
        grid-row: 1/2;
        margin-bottom: 0 !important;
    }

    .cropper-container img {
        -o-object-fit: cover;
        object-fit: cover;
    }

.image-container {
    border-radius: 6px;
    grid-row: 1/-1;
    grid-column: 1/2;
    max-width: 270px;
    max-height: 160px;
    overflow: hidden;
}

.preview-container {
    -ms-flex-item-align: center;
    align-self: center;
}

.img-preview {
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.action-button {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    gap: 0.7rem;
}

    .action-button button {
        font-size: 0.89rem;
        line-height: 1.14;
        color: #6295F4;
    }

        .action-button button:focus, .action-button button:hover {
            color: #2966E1;
        }

    .action-button .confirm-btn {
        display: none;
    }

.cropper-view-box {
    outline-color: #2966E1;
}

.cropper-point {
    background-color: #2966E1;
}

.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
}

.modal {
    background-color: #3d3d3d;
    border: 1px solid #4d4d4d;
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.22), 0px 0px 24px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.22), 0px 0px 24px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    width:100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
}

    .modal .ck.ck-voice-label {
        display:none !important;
    }
#notificationModal .ck-editor {
    max-width:450px !important
}
.modal .modal-header {
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #4d4d4d;
}

        .modal .modal-header .title-wrapper {
            font-size: 1.27rem;
            line-height: 1.17;
            color: #C7C7C7;
            font-weight: 400;
            margin-bottom:0
        }

    .modal .modal-body {
        padding: 2rem 1.5rem 4rem;
        border-bottom: 1px solid #4d4d4d;
        display: grid;
        gap: 2.5rem;
    }

        .modal .modal-body p, .modal .modal-body label {
            font-size: 0.875rem;
            line-height: 1.55;
            color: #C7C7C7;
        }

        .modal .modal-body .inputs {
            display: grid;
            gap: 1.25rem;
        }

            .modal .modal-body .inputs .flex {
                gap: 1.25rem;
            }

                .modal .modal-body .inputs .flex .input-wrapper {
                    width: 100%;
                }

        .modal .modal-body label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .modal .modal-body input:not([type=checkbox]), .modal .modal-body .custom-select, .modal .modal-body select {
            max-width: 250px;
        }

        .modal .modal-body input:not([type=checkbox]), .modal .modal-body .custom-select {
            font-size: 0.89rem;
            border: 1px solid #4D4D4D;
            border-radius: 4px;
            overflow: hidden;
        }

        .modal .modal-body input:not([type=checkbox]), .modal .modal-body select {
            padding: 0.875rem 1.375rem;
        }

        .modal .modal-body input, .modal .modal-body .custom-select, .modal .modal-body select {
            background-color: #303030;
        }

    .modal .modal-footer {
        padding: 1rem 1.5rem;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .modal .close-modal-btn {
        width: 2rem;
        height: 2rem;
        display: grid;
        place-items: center;
    }

    .modal textarea {
        background-color: #242424;
        border: 1px solid #616161;
        border-radius: 4px;
        resize: none;
        width: 100%;
        color: inherit;
    }

#insuranceModal .modal,
#feesModal .modal {
    max-width: 572px;
}

#noteModal .modal {
    min-width: 572px;
}

#partnersModal .modal {
    min-width: 572px;
}

#partnersModal .form_image-upload {
    margin: 0;
}

#approveOrderModal .custom-choice label,
#confirmPaymentModal .custom-choice label,
#sendOverseasModal .custom-choice label {
    margin-bottom: 0;
}

#approveOrderModal .btn-primary,
#confirmPaymentModal .btn-primary,
#sendOverseasModal .btn-primary {
    background-color: #AECAF8;
    color: #242424;
}

    #approveOrderModal .btn-primary:focus-visible, #approveOrderModal .btn-primary:hover,
    #confirmPaymentModal .btn-primary:focus-visible,
    #confirmPaymentModal .btn-primary:hover,
    #sendOverseasModal .btn-primary:focus-visible,
    #sendOverseasModal .btn-primary:hover {
        background-color: #6295F4;
    }

#approveOrderModal .input-wrapper input,
#confirmPaymentModal .input-wrapper input,
#sendOverseasModal .input-wrapper input {
    font-size: 0.75rem;
}

#finishOrderModal .inputs.grid {
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 0.75rem;
    -moz-column-gap: 0.75rem;
    column-gap: 0.75rem;
    row-gap: 1rem;
}

#finishOrderModal .btn-primary {
    background-color: #80DB9A;
    border: 1px solid #80DB9A;
    color: #242424;
}

    #finishOrderModal .btn-primary:focus-visible, #finishOrderModal .btn-primary:hover {
        background-color: transparent;
        color: #80DB9A;
    }

#finishOrderModal h3 {
    font-size: 1.125rem;
    font-weight: 400;
    padding-top: 1.5rem;
    border-top: 1px solid #4d4d4d;
}

#finishOrderModal .date-input-wrapper {
    position: relative;
}

    #finishOrderModal .date-input-wrapper .icon {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        display: grid;
        place-items: center;
    }

#finishOrderModal .file-input-wrapper {
    position: relative;
    max-width: 80%;
}

    #finishOrderModal .file-input-wrapper > .login-input {
        width: 100%;
        max-width: 100%;
    }

    #finishOrderModal .file-input-wrapper .file-input {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        max-width: 5rem;
        height: 100%;
        display: grid;
        grid-template-areas: fileUpload;
        place-items: center;
        border-left: 1px solid #4d4d4d;
        cursor: pointer;
    }

        #finishOrderModal .file-input-wrapper .file-input input {
            visibility: hidden;
            height: 100%;
            padding: 0;
            grid-area: fileUpload;
        }

        #finishOrderModal .file-input-wrapper .file-input span {
            grid-area: fileUpload;
            margin-top: -0.75rem;
        }

.modal-small {
    min-width: 500px;
}

    .modal-small .modal-header {
        border-bottom: none;
        padding-bottom: 1rem;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .modal-small .modal-body {
        padding-top: 0;
        padding-bottom: 1rem;
        border-bottom: none;
    }

    .modal-small .title {
        gap: 0.75rem;
    }

    .modal-small.danger .title svg path {
        fill: #FFB3BF;
    }

    .modal-small.danger .btn-primary {
        background-color: #FFB3BF;
        color: #242424;
        border: 1px solid #FFB3BF;
    }

        .modal-small.danger .btn-primary:focus-visible, .modal-small.danger .btn-primary:hover {
            background-color: transparent;
            color: #FFB3BF;
        }

    .modal-small.warning .title svg path {
        fill: #E4D37E;
    }

    .modal-small.warning .btn-primary {
        background-color: #E4D37E;
        color: #242424;
        border: 1px solid #E4D37E;
    }

        .modal-small.warning .btn-primary:focus-visible, .modal-small.warning .btn-primary:hover {
            background-color: transparent;
            color: #E4D37E;
        }

.map-pin {
    cursor: pointer;
}

.map-menu {
    background-color: #303030;
    border: 1px solid #3d3d3d;
    border-radius: 6px;
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.22), 0px 0px 24px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.22), 0px 0px 24px rgba(0, 0, 0, 0.12);
    min-width: 12.5rem;
    overflow: hidden;
    position: absolute;
    display: none;
}

.map-menu_header {
    background-color: #2966E1;
    padding: 0.89rem 1rem;
}

    .map-menu_header p {
        font-size: 0.625rem;
        line-height: 1;
        color: #D4D9FA;
        text-transform: uppercase;
        margin-bottom: 0.5em;
    }

    .map-menu_header .title {
        font-size: 0.89rem;
        line-height: 1;
        color: #F7F8FA;
    }

.map-menu_body .row {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

    .map-menu_body .row:not(:last-child) {
        border-bottom: 1px solid #4d4d4d;
    }

    .map-menu_body .row button {
        margin-inline: auto;
        font-size: 0.75rem;
        line-height: 1;
        color: #87B0F6;
    }

        .map-menu_body .row button:focus, .map-menu_body .row button:hover {
            color: #6295F4;
        }

.map-menu_body .title-row {
    font-size: 0.625rem;
    font-weight: 500;
    color: #C7C7C7;
}

.map-menu_body .result-row {
    font-size: 0.75rem;
    color: #EDEDED;
}

    .map-menu_body .result-row p:first-child {
        font-weight: 700;
    }

.parking-menu .result-row p:first-child {
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.75rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.bus-station-modal {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    min-width: 653px;
    padding: 2rem 1.5rem 2.5rem;
}

    .bus-station-modal .modal-header {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

        .bus-station-modal .modal-header button {
            font-size: 1.5rem;
            color: #ADADAD;
            line-height: 1;
        }

    .bus-station-modal .title {
        font-size: 1.25rem;
        line-height: 0.9;
        letter-spacing: 0.25px;
        color: #fff;
        margin-bottom: 1.5rem;
    }

        .bus-station-modal .title span {
            font-weight: 300;
        }

    .bus-station-modal .modal_table {
        border: 1px solid #4d4d4d;
    }

    .bus-station-modal .table-header,
    .bus-station-modal .table-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .bus-station-modal .header-cell:first-of-type {
        padding-left: 1rem;
    }

    .bus-station-modal .table-cell {
        background-color: transparent;
        border-color: #4d4d4d;
        width: 100%;
    }

    .bus-station-modal .table-cell_content:first-child {
        color: #fff;
    }

.parking-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
}

    .parking-dot.available {
        background-color: #33B238;
        border-color: #057C0A;
    }

    .parking-dot.taken {
        background-color: #171717;
        border-color: #000000;
    }

    .parking-dot.malfunction {
        background-color: #CC0000;
        border-color: #A61E00;
    }

.notification-wrapper {
    display: grid;
    gap: 1.5rem;
    position: fixed;
    top: 8rem;
    right: 1.5rem;
    z-index: 9;
}

    .notification-wrapper.active .notification {
        display: block;
        -webkit-animation: slideInRight 0.5s linear forwards;
        animation: slideInRight 0.5s linear forwards;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

        .notification-wrapper.active .notification:nth-child(1) {
            -webkit-animation-delay: 200ms;
            animation-delay: 200ms;
        }

        .notification-wrapper.active .notification:nth-child(2) {
            -webkit-animation-delay: 400ms;
            animation-delay: 400ms;
        }

        .notification-wrapper.active .notification:nth-child(3) {
            -webkit-animation-delay: 600ms;
            animation-delay: 600ms;
        }

        .notification-wrapper.active .notification:nth-child(4) {
            -webkit-animation-delay: 800ms;
            animation-delay: 800ms;
        }

        .notification-wrapper.active .notification:nth-child(5) {
            -webkit-animation-delay: 1000ms;
            animation-delay: 1000ms;
        }

        .notification-wrapper.active .notification:nth-child(6) {
            -webkit-animation-delay: 1200ms;
            animation-delay: 1200ms;
        }

        .notification-wrapper.active .notification:nth-child(7) {
            -webkit-animation-delay: 1400ms;
            animation-delay: 1400ms;
        }

        .notification-wrapper.active .notification:nth-child(8) {
            -webkit-animation-delay: 1600ms;
            animation-delay: 1600ms;
        }

        .notification-wrapper.active .notification:nth-child(9) {
            -webkit-animation-delay: 1800ms;
            animation-delay: 1800ms;
        }

        .notification-wrapper.active .notification:nth-child(10) {
            -webkit-animation-delay: 2000ms;
            animation-delay: 2000ms;
        }

        .notification-wrapper.active .notification:nth-child(11) {
            -webkit-animation-delay: 2200ms;
            animation-delay: 2200ms;
        }

        .notification-wrapper.active .notification:nth-child(12) {
            -webkit-animation-delay: 2400ms;
            animation-delay: 2400ms;
        }

        .notification-wrapper.active .notification:nth-child(13) {
            -webkit-animation-delay: 2600ms;
            animation-delay: 2600ms;
        }

        .notification-wrapper.active .notification:nth-child(14) {
            -webkit-animation-delay: 2800ms;
            animation-delay: 2800ms;
        }

        .notification-wrapper.active .notification:nth-child(15) {
            -webkit-animation-delay: 3000ms;
            animation-delay: 3000ms;
        }

        .notification-wrapper.active .notification:nth-child(16) {
            -webkit-animation-delay: 3200ms;
            animation-delay: 3200ms;
        }

        .notification-wrapper.active .notification:nth-child(17) {
            -webkit-animation-delay: 3400ms;
            animation-delay: 3400ms;
        }

        .notification-wrapper.active .notification:nth-child(18) {
            -webkit-animation-delay: 3600ms;
            animation-delay: 3600ms;
        }

        .notification-wrapper.active .notification:nth-child(19) {
            -webkit-animation-delay: 3800ms;
            animation-delay: 3800ms;
        }

        .notification-wrapper.active .notification:nth-child(20) {
            -webkit-animation-delay: 4000ms;
            animation-delay: 4000ms;
        }

        .notification-wrapper.active .notification:nth-child(21) {
            -webkit-animation-delay: 4200ms;
            animation-delay: 4200ms;
        }

        .notification-wrapper.active .notification.reverse {
            -webkit-animation: slideOutRight 0.5s linear forwards;
            animation: slideOutRight 0.5s linear forwards;
        }

    .notification-wrapper .notification {
        background-color: #303030;
        border: 1px solid #3d3d3d;
        border-radius: 6px;
        -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.22), 0px 0px 24px rgba(0, 0, 0, 0.12);
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.22), 0px 0px 24px rgba(0, 0, 0, 0.12);
        max-width: 20rem;
        display: none;
        -webkit-transform: translateX(150%);
        -ms-transform: translateX(150%);
        transform: translateX(150%);
    }

        .notification-wrapper .notification .content {
            padding: 1rem 1.25rem 1.5rem 1rem;
            display: grid;
            grid-template-columns: -webkit-min-content 1fr -webkit-min-content;
            grid-template-columns: min-content 1fr min-content;
            gap: 1rem;
        }

            .notification-wrapper .notification .content .icon, .notification-wrapper .notification .content button {
                width: 1.5rem;
                height: 1.5rem;
                display: grid;
                place-items: center;
            }

                .notification-wrapper .notification .content .icon > *, .notification-wrapper .notification .content button > * {
                    pointer-events: none;
                }

        .notification-wrapper .notification .text {
            font-size: 0.875rem;
            letter-spacing: 0.25px;
        }

        .notification-wrapper .notification .subtitle {
            line-height: 1.7;
            font-weight: 500;
        }

        .notification-wrapper .notification .description {
            line-height: 1.43;
            color: #C7C7C7;
        }

        .notification-wrapper .notification .btn-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-top: 1px solid #3d3d3d;
        }

            .notification-wrapper .notification .btn-wrapper button {
                padding: 0.5rem 1.5rem;
                color: white;
            }

                .notification-wrapper .notification .btn-wrapper button > * {
                    pointer-events: none;
                }

        .notification-wrapper .notification.success .subtitle, .notification-wrapper .notification.success .btn-wrapper button:last-child {
            color: #8FE9A3;
        }

        .notification-wrapper .notification.success .icon svg path {
            fill: #8FE9A3;
        }

        .notification-wrapper .notification.info .subtitle, .notification-wrapper .notification.info .btn-wrapper button:last-child {
            color: #B6C8F0;
        }

        .notification-wrapper .notification.info .icon svg path {
            fill: #B6C8F0;
        }

        .notification-wrapper .notification.warning .subtitle, .notification-wrapper .notification.warning .btn-wrapper button:last-child {
            color: #E9D194;
        }

        .notification-wrapper .notification.warning .icon svg path {
            fill: #E9D194;
        }

        .notification-wrapper .notification.error .subtitle, .notification-wrapper .notification.error .btn-wrapper button:last-child {
            color: #FF9EB0;
        }

        .notification-wrapper .notification.error .icon svg path {
            fill: #FF9EB0;
        }

        .notification-wrapper .notification button:hover {
            background-color: #242424;
            border-radius: 4px;
        }

.system-loader {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.5rem;
    background-color: #303030;
    border-radius: 0 0 6px 6px;
    padding: 1rem 1.5rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: fixed;
    top: 0;
    left: 45%;
    z-index:999;
}

    .system-loader .circle svg {
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
    }

    .system-loader .text {
        font-size: 0.75rem;
        color: white;
    }

.skeleton-loader {
    width: 100vw;
    min-height: 100vh;
    gap: 4rem;
    padding: 2.5rem 130px 2.5rem 215px;
    grid-template-rows: -webkit-min-content 1fr;
    grid-template-rows: min-content 1fr;
}

    .skeleton-loader span {
        background-color: #333;
        border-radius: 6px;
        height: 100%;
        position: relative;
        overflow: hidden;
        opacity: 0.5;
        -webkit-animation: skeletonAnimation 2s linear infinite;
        animation: skeletonAnimation 2s linear infinite;
    }

.skeleton-loader_top {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 40px;
}

.skeleton-title {
    width: 200px;
}

.skeleton-toolbar {
    gap: 0.75rem;
}

    .skeleton-toolbar .cube {
        width: 2.5rem;
    }

    .skeleton-toolbar .cube-long {
        width: 130px;
    }

.skeleton-content {
    grid-template-rows: repeat(auto-fit, 50px);
    gap: 0.5rem;
}

.dropdown-wrapper {
    background-color: #303030;
    border: 1px solid #303030;
    border-radius: 6px;
    -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    padding: 0.5rem;
    position: absolute;
    top: calc(-100% + 0.5rem);
    right: 0;
    z-index: -1;
    opacity: 0;
}

    .dropdown-wrapper > .flex {
        gap: 0.5rem;
    }

    .dropdown-wrapper .table-cell_option-btn {
        visibility: visible !important;
    }

    .dropdown-wrapper .zone-tag {
        padding: 0.5rem 0.75rem;
        background-color: #242424;
        border-radius: 100vh;
        font-size: 0.89rem;
        line-height: 1.13;
        color: #fff;
        cursor: pointer;
    }

    .dropdown-wrapper#statusDropdown {
        background: #3D3D3D;
        border: 1px solid #616161;
        -webkit-box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        padding-block: 0.75rem;
        padding-inline: 0;
        min-width: 192px;
        max-width: 12rem;
        top: 0.5rem;
    }

        .dropdown-wrapper#statusDropdown .grid li {
            padding: 0.5rem 1.5rem 0.5rem 1rem;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 1rem;
        }

            .dropdown-wrapper#statusDropdown .grid li:focus-visible, .dropdown-wrapper#statusDropdown .grid li:hover {
                background-color: rgba(255, 255, 255, 0.08);
            }

            .dropdown-wrapper#statusDropdown .grid li.active svg {
                visibility: visible;
            }

            .dropdown-wrapper#statusDropdown .grid li button {
                width: 100%;
                font-size: 0.89rem;
                line-height: 1.14;
                color: #fff;
                padding: 0.625rem 1rem;
                border-radius: 6px;
                text-align: left;
            }

                .dropdown-wrapper#statusDropdown .grid li button.success {
                    background-color: #39A050;
                }

                .dropdown-wrapper#statusDropdown .grid li button.danger {
                    background-color: #D30D0D;
                }

                .dropdown-wrapper#statusDropdown .grid li button.warning {
                    background-color: #C3B048;
                }

                .dropdown-wrapper#statusDropdown .grid li button.neutral {
                    background-color: #616161;
                }

            .dropdown-wrapper#statusDropdown .grid li svg {
                visibility: hidden;
            }

    .dropdown-wrapper.is-active {
        opacity: 1;
        z-index: 9;
    }

.dropdown {
    background-color: #303030;
    border: 1px solid #303030;
    border-radius: 6px;
    -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    padding: 0.5rem 0;
    position: absolute;
    top: 0;
    left: -100%;
    right: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    z-index: -1;
    opacity: 0;
    max-height: 250px;
    overflow-y: scroll;
}

    .dropdown ul {
        display: grid;
        gap: 0.5rem;
    }

    .dropdown .answer {
        display: inline-block;
        width: 100% !important;
        height: -webkit-fit-content !important;
        height: -moz-fit-content !important;
        height: fit-content !important;
        text-align: left;
        padding: 0.5rem;
    }

        .dropdown .answer:focus-visible, .dropdown .answer:hover {
            background-color: #242424;
        }

    .dropdown.is-active {
        opacity: 1;
        z-index: 9;
    }

.custom-select select {
    height: 100%;
    font-size: 0.89rem;
    background: #303030;
    color: #fff;
    border: 1px solid #303030;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    padding: 0.5rem 1em;
}

    .custom-select select:invalid {
        opacity: 0.15 !important;
    }

.form_custom-select {
    background-color: #242424;
}

    .form_custom-select select {
        width: 100%;
        background-color: #242424;
        border: none;
        border-radius: 0;
    }

        .form_custom-select select:focus-visible, .form_custom-select select:hover {
            background-color: #171717;
        }

    .form_custom-select:focus-visible, .form_custom-select:hover {
        background-color: #171717;
    }

.chat-section .chat-container {
    background-color: #0F0F0F;
    border: 1px solid #303030;
    border-radius: 6px;
    padding: 2rem 1.5rem 4rem 1.5rem;
    display: grid;
    gap: 1.5rem;
}

.chat-section .msg_title,
.chat-section .msg_body,
.chat-section .msg_date {
    font-size: 0.875rem;
    line-height: 1rem;
}

.chat-section .msg_title {
    color: #C7C7C7;
}

.chat-section .msg_body {
    color: #e0e0e0;
}

.chat-section .msg_date {
    color: #949494;
}

.chat-section .msg_files {
    gap: 0.25rem;
}

    .chat-section .msg_files .file {
        width: 5rem;
        height: 5rem;
        background-color: #0935A6;
        border-radius: 6px;
        padding: 0.5rem 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.8rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

        .chat-section .msg_files .file .description {
            font-size: 0.625rem;
            line-height: 1.4;
            letter-spacing: 0.04em;
        }

    .chat-section .msg_files .file_icon {
        width: 2rem;
        height: 2rem;
    }

.chat-section .msg {
    display: grid;
    gap: 1rem;
    padding: 1.125rem 1.5rem 1.5rem;
    max-width: 80%;
}

    .chat-section .msg > .flex {
        gap: 1rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

.chat-section .msg-user {
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
}

.chat-section .msg-support {
    background-color: #011978;
    border: 1px solid #0935A6;
    border-radius: 6px;
    justify-self: end;
}

    .chat-section .msg-support .msg_title {
        color: #F5FAFF;
    }

    .chat-section .msg-support .msg_body {
        color: #D1E1F9;
    }

    .chat-section .msg-support .msg_date {
        color: #87B0F6;
    }

.chat-section .new-msg-form {
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
}

    .chat-section .new-msg-form textarea {
        resize: none;
    }

    .chat-section .new-msg-form .btn-wrapper {
        gap: 0.75rem;
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

        .chat-section .new-msg-form .btn-wrapper button {
            width: 2.5rem;
            height: 2.5rem;
            display: grid;
            place-items: center;
        }

            .chat-section .new-msg-form .btn-wrapper button:not(:last-child) svg path {
                fill: #C7C7C7;
            }

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    padding: 1.5em 0 1.5em 1.5em;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.75em;
}

.main-nav {
    background-color: #303030;
    outline: 1px solid #4d4d4d;
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    z-index: auto;
    padding-top: 0.5rem;
}

    .main-nav:focus .module-btn_icon, .main-nav:hover .module-btn_icon {
        top: 10px;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    .main-nav:focus .module-btn_label, .main-nav:hover .module-btn_label {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        bottom: 10px;
    }

.menu-wrapper {
    background-color: #242424;
    border-radius: 6px;
}

    .menu-wrapper h3 {
        text-transform: uppercase;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.17;
        color: #fff;
        padding-left: 1.063em;
    }

    .menu-wrapper ul {
        margin-top: 1rem;
    }

    .menu-wrapper li {
        padding: 1.375em 1.063em;
    }

        .menu-wrapper li:focus, .menu-wrapper li:hover, .menu-wrapper li.current {
            background-color: #303030;
        }

.menu-options {
    padding-block: 2rem;
}

.hub-menu-wrapper {
    display: grid;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

    .hub-menu-wrapper .contribution {
        font-size: 0.7rem;
        line-height: 1;
        letter-spacing: 0.02em;
        color: #7D7D7D;
        padding: 1.608em;
        margin-top: auto;
    }

.hub-nav-wrapper {
    position: absolute;
    top: 0;
    left: -1px;
    bottom: 0;
    z-index: 999;
    overflow-y: scroll;
    min-height: 520px;
    min-width: 342px;
    padding-top: 4rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
    display: none;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

    .hub-nav-wrapper.is-active {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .hub-nav-wrapper.is-visible {
        -webkit-animation: grow 0.3s ease-in-out forwards;
        animation: grow 0.3s ease-in-out forwards;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .hub-nav-wrapper.reverse {
        -webkit-animation: shrink 0.3s ease-in-out forwards;
        animation: shrink 0.3s ease-in-out forwards;
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

.hub-nav_module-options,
.hub-nav_menu-options {
    padding-block: 2rem;
}

.hub-nav_module-options {
    border-bottom: 1px solid #303030;
    border-radius: 0;
}

.module-options_list-item {
    padding: 1.375em 1.063em;
}

    .module-options_list-item a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        gap: 1.1em;
    }

    .module-options_list-item.current .module-option_icon {
        display: inline-block;
    }

.module-option_description .title {
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 3px;
}

.module-option_description .label {
    font-size: 0.79rem;
    line-height: 1.17;
    color: rgba(255, 255, 255, 0.6);
}

.module-option_icon {
    margin-left: auto;
    display: none;
}

.menu-options_list-item {
    font-size: 0.89rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #EDEDED;
}

    .menu-options_list-item a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        gap: 1.38em;
    }

    .menu-options_list-item:focus svg path, .menu-options_list-item:hover svg path {
        fill: #AECAF8;
        fill-opacity: 1;
    }

.user-options-wrapper {
    background-color: #242424;
    border-radius: 6px;
    overflow: hidden;
    min-width: 317px;
    position: absolute;
    left: calc(100% + 1em);
    bottom: 0;
    display: none;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25));
}

    .user-options-wrapper.is-active {
        display: block;
    }

    .user-options-wrapper.is-visible {
        opacity: 1;
    }

.user-options_header {
    min-height: 69px;
    position: relative;
    background-image: -o-radial-gradient(0% 4.44%, 100% 1240.6%, #032491 0%, #2966E1 50%, #87B0F6 100%);
    background-image: radial-gradient(100% 1240.6% at 0% 4.44%, #032491 0%, #2966E1 50%, #87B0F6 100%);
}

    .user-options_header svg {
        position: absolute;
        top: -8px;
        left: -11px;
    }

.user-options_img {
    min-width: 5rem;
    height: 5rem;
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    margin-left: 1.75em;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    overflow: hidden;
    border: 4px solid #0F0F0F;
    border-radius: 6px;
}

    .user-options_img img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.user-options_body {
    padding: 3.75em 1.75em 1.88em;
    border-bottom: 1px solid #303030;
    border-radius: 0;
}

    .user-options_body h3 {
        font-size: 1.27rem;
        line-height: 1.17;
        font-weight: 400;
        color: #fff;
        margin-bottom: 0.591em;
    }

    .user-options_body .details,
    .user-options_body .contact {
        font-size: 0.89rem;
        line-height: 1.12;
        color: rgba(255, 255, 255, 0.6);
    }

    .user-options_body .details {
        margin-bottom: 0.492em;
    }

        .user-options_body .details span {
            color: #87B0F6;
        }

.user-options_options {
    padding-block: 0.75em;
}

    .user-options_options li {
        font-size: 0.89rem;
        line-height: 1;
        letter-spacing: 0.02em;
        color: #EDEDED;
        padding: 1.375em 1.063em;
    }

        .user-options_options li a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            gap: 1.56em;
        }

        .user-options_options li:focus, .user-options_options li:hover, .user-options_options li.current {
            background-color: #303030;
        }

            .user-options_options li:focus svg path,
            .user-options_options li:focus svg path, .user-options_options li:hover svg path,
            .user-options_options li:hover svg path, .user-options_options li.current svg path,
            .user-options_options li.current svg path {
                fill: #AECAF8;
                fill-opacity: 1;
            }

.side-menu {
    -webkit-filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25));
    position: absolute;
    left: calc(100% + 1em);
    top: 1em;
    min-width: 342px;
    display: none;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

    .side-menu.is-active {
        display: block;
    }

    .side-menu.is-visible {
        opacity: 1;
    }

    .side-menu .menu-options:not(:first-child) {
        border-top: 1px solid #616161;
        border-radius: 0;
    }

.quick-actions-menu {
    position: absolute;
    left: calc(100% + 1em);
    top: 20em;
    min-width: 342px;
    display: none;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25));
}

    .quick-actions-menu.is-active {
        display: block;
    }

    .quick-actions-menu.is-visible {
        opacity: 1;
    }

.side-nav {
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
    overflow: hidden;
    max-width: 18.75rem;
}

    .side-nav h2 {
        font-size: 1rem;
        line-height: 0.88;
        letter-spacing: 0.04em;
        font-weight: 400;
        color: #EDEDED;
        padding: 1.75rem 1.5rem 1rem;
    }

    .side-nav ul li {
        border-bottom: 1px solid #303030;
        cursor: pointer;
    }

        .side-nav ul li:first-child {
            border-top: 1px solid #303030;
        }

    .side-nav .side-navl_list-bottom li:last-child {
        border-bottom: none;
    }

    .side-nav .side-nav_tab {
        display: inline-block;
        width: 100%;
        text-align: left;
        padding: 0.875rem 0.5rem 0.875rem 2.5rem;
        font-size: 0.89rem;
        line-height: 1.14;
        color: #ADADAD;
    }

        .side-nav .side-nav_tab:focus-visible, .side-nav .side-nav_tab:hover {
            background-color: #3d3d3d;
            color: rgba(255, 255, 255, 0.78);
        }

        .side-nav .side-nav_tab.active {
            background-color: #2966E1;
            color: rgba(255, 255, 255, 0.78);
        }

.toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #171717;
    z-index: 99;
}

    .toolbar h1 {
        font-size: 1.75rem;
        line-height: 1.43;
        letter-spacing: 1px;
        font-weight: 300;
        color: #fff;
    }

.toolbar_inner {
    width: 100%;
    min-height: 110px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 1rem;
}

.toolbar_left,
.toolbar_right {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
}

.toolbar-dropdown-wrapper {
    position: relative;
}

    .toolbar-dropdown-wrapper .dropdown {
        background: #3d3d3d;
        border: 1px solid #4d4d4d;
        border-radius: 6px;
        -webkit-box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 0;
        -webkit-transform: translateY(20%);
        -ms-transform: translateY(20%);
        transform: translateY(20%);
        min-width: 12rem;
        padding-block: 0.75rem;
        display: none;
        opacity: 0;
        -webkit-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

        .toolbar-dropdown-wrapper .dropdown.is-visible {
            display: block;
        }

        .toolbar-dropdown-wrapper .dropdown.is-active {
            opacity: 1;
        }

        .toolbar-dropdown-wrapper .dropdown li:last-child {
            border-top: 1px solid #4d4d4d;
            padding-top: 0.5rem;
        }

        .toolbar-dropdown-wrapper .dropdown button {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 0.75rem;
            padding: 0.625rem 1rem;
            width: 100%;
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.89rem;
        }

            .toolbar-dropdown-wrapper .dropdown button > * {
                pointer-events: none;
            }

            .toolbar-dropdown-wrapper .dropdown button:focus-visible, .toolbar-dropdown-wrapper .dropdown button:hover {
                background-color: #303030;
            }

        .toolbar-dropdown-wrapper .dropdown .icon {
            width: 1rem;
            height: 1rem;
            display: grid;
            place-items: center;
        }

    .toolbar-dropdown-wrapper .dropdown2 li:first-child {
        border-bottom: none;
        font-size: 0.7rem;
        padding-left: 1rem;
        color: rgba(255, 255, 255, 0.6);
    }

    .toolbar-dropdown-wrapper .dropdown2 button {
        text-align: left;
    }

.table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #3d3d3d;
    border-radius: 6px;
}

    .table-wrapper .table-header,
    .table-wrapper .table-body,
    .table-wrapper .table-row {
        display: contents;
    }

    .table-wrapper > div[role=table] {
        display: grid;
    }

    .table-wrapper.table-col-10 div[role=table] {
        grid-template-columns: repeat(10, 1fr);
        min-width: 150rem;
    }

    .table-wrapper.table-col-9 div[role=table] {
        grid-template-columns: repeat(9, 1fr);
        min-width: 50rem;
    }

    .table-wrapper.table-col-8 div[role=table] {
        grid-template-columns: repeat(8, 1fr);
        min-width: 50rem;
    }

    .table-wrapper.table-col-7 div[role=table] {
        grid-template-columns: repeat(7, 1fr);
        min-width: 50rem;
    }

    .table-wrapper.table-col-6 div[role=table] {
        grid-template-columns: repeat(6, 1fr);
    }

    .table-wrapper.table-col-5 div[role=table] {
        grid-template-columns: repeat(5, 1fr);
    }

    .table-wrapper.table-col-4 div[role=table] {
        grid-template-columns: repeat(4, 1fr);
    }

    .table-wrapper.table-col-3 div[role=table] {
        grid-template-columns: repeat(3, 1fr);
    }

    .table-wrapper .table-cell:first-child,
    .table-wrapper .table-cell:last-child {
        position: sticky;
        z-index: 9;
    }

    .table-wrapper .table-cell:first-child {
        left: 0;
        border-right: 1px solid #3d3d3d;
    }

    .table-wrapper .table-cell:nth-child(2) {
        border-left: none;
    }

    .table-wrapper .table-cell:last-child {
        right: 0;
        z-index: 9;
        border-left: 1px solid #3d3d3d;
    }

.table-header h3 {
    font-size: 0.89rem;
    line-height: 1.13;
    font-weight: 600;
}

.table-row[draggable=true] {
    cursor: -webkit-grab;
    cursor: grab;
}

    .table-row[draggable=true]:focus-visible .drag-btn, .table-row[draggable=true]:hover .drag-btn {
        visibility: visible;
    }

.table-row:last-child .table-cell {
    border-bottom: none;
}

.table-row .table-cell:last-child {
    border-right: none;
}

.table-row.over {
    background-color: #171717;
}

.table-row.dragging {
    background-color: #0F0F0F;
    opacity: 0.5;
}

.table-row:focus > *, .table-row:hover > * {
    background-color: #171717;
}

    .table-row:focus > * .custom-checkbox, .table-row:focus > * .table-cell_option-btn, .table-row:hover > * .custom-checkbox, .table-row:hover > * .table-cell_option-btn {
        visibility: visible;
    }

.table-row.active > * {
    background-color: #0F0F0F;
}

    .table-row.active > * .custom-checkbox {
        visibility: visible;
    }

.table-footer {
    display: grid;
    background-color: #242424;
    border-top: 1px solid #414141;
}

    .table-footer .btn-text-icon {
        min-width: unset;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        gap: 0.75rem;
        margin: 0.25rem;
    }

.table-wrapper2 {
    border: 1px solid #3d3d3d;
    border-radius: 6px;
    overflow: hidden;
}

    .table-wrapper2 .table-header,
    .table-wrapper2 .table-row {
        display: grid;
    }

    .table-wrapper2.table-col-3 .table-header, .table-wrapper2.table-col-3 .table-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .table-wrapper2.table-col-4 .table-header, .table-wrapper2.table-col-4 .table-row {
        grid-template-columns: 1fr 150px 150px minmax(113px, auto);
    }
.table_empty-state {
    grid-column: 1/-1;
    background-color: #242424;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 3rem 3rem 6rem;
}

    .table_empty-state h3 {
        font-size: 1.25rem;
        line-height: 1.2;
        font-weight: 400;
        margin-top: 0.5rem;
    }

    .table_empty-state p {
        font-size: 0.875rem;
        line-height: 1.57;
        letter-spacing: 0.25px;
        color: #949494;
        margin-bottom: 1rem;
    }

.form-section {
    gap: 3.5rem;
}

    .form-section h2 {
        font-size: 1.6rem;
        line-height: 1.17;
        color: #fff;
        margin-bottom: 0.55em;
        font-weight: 400;
    }

    .form-section .error-box {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1.125rem;
        padding: 1rem 1.5rem;
        background: -webkit-gradient(linear, left top, right top, from(#812B39), to(#73212F));
        background: -o-linear-gradient(left, #812B39 0%, #73212F 100%);
        background: linear-gradient(90deg, #812B39 0%, #73212F 100%);
        border: 1px solid #993D4C;
        border-radius: 6px;
        margin-bottom: 60px;
        display: none;
    }

        .form-section .error-box p {
            font-size: 0.875rem;
            line-height: 1.7;
            letter-spacing: 0.1px;
            color: #CFA9B6;
        }

            .form-section .error-box p span {
                display: inline-block;
                margin-right: 0.5rem;
                color: #fff;
                font-weight: 700;
            }

    .form-section.error .error-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.form-wrapper {
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
    min-width: 600px;
}

    .form-wrapper .title {
        font-size: 1rem;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 1.125em;
        color: #fff;
    }

.choice-container, .choice-container .field {
    display: grid;
    gap: 0.5rem;
}
.choice-container {
    padding: 2rem 1.5rem 1.5rem 0.7rem;

}

    .choice-container:first-child {
        border-bottom: 1px solid #303030;
        border-radius: 0;
    }

    .choice-container label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        gap: 1rem;
        color: #fff;
    }

.additional-options-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
}

    .additional-options-wrapper p {
        font-size: 0.79rem;
        line-height: 1.17;
        color: #949494;
    }

.form_tabs .form-wrapper {
    border-top-left-radius: 0;
}

.form_tab-list {
    margin-bottom: -1px;
}

    .form_tab-list .tab_btn {
        font-size: 0.875rem;
        line-height: 1.7;
        font-weight: 500;
        letter-spacing: 0.1px;
        text-align: center;
        color: #616161;
        padding: 0.5rem 1.5rem;
        background-color: #1c1c1c;
        border: 1px solid #303030;
        border-radius: 6px 6px 0 0;
    }

        .form_tab-list .tab_btn.current {
            background-color: #242424;
            color: #6295F4;
            border-bottom: none;
            margin-top: 1px;
        }

.tab-panel {
    display: none;
    opacity: 0;
}

    .tab-panel.is-active {
        display: block;
    }

    .tab-panel.is-visible {
        opacity: 1;
    }

.login-content-wrapper {
    height: 100vh;
    max-width: 100vw;
    
    background: -o-linear-gradient(90deg, #AC9E92 0%, #E8DFD8 100%);
    background: linear-gradient(90deg, #AC9E92 0%, #E8DFD8 100%);
    display: grid;
    grid-template-rows: 1fr auto;
}
.login-content-wrapper .akindo-logo {
    display: none;
} 
.login-content-wrapper.akindo .akindo-logo {
    display: block;
} 
.login-content-wrapper.akindo .glamur-logo {
    display: none;
} 
.login-content-wrapper.akindo {
    background: -o-linear-gradient(112.9deg, #153E68 9.37%, #242424 98.7%) !important;
    background: linear-gradient(112.9deg, #153E68 9.37%, #242424 98.7%) !important;
}
.login-content-wrapper.akindo .powered-by svg path{
    fill: #FFFFFF;
    fill-opacity: 1;
}

    .login-content-wrapper .container {
        min-height: unset;
        width: 100%;
        padding-inline: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 1rem;
    }

    .login-content-wrapper .btn-primary[disabled] {
        background-color: #1252DB;
        color: #fff;
        opacity:.5;
        pointer-events:none;
    }
        .login-content-wrapper .btn-primary[disabled] svg path {
            fill: #fff !important;
        }
    .powered-by {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: end;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        gap: 11px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        padding: 2rem 3rem;
        font-size: 0.5rem;
        line-height: 1;
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
    }

.users .table-wrapper.table-col-7 div[role=table] {
    grid-template-columns: minmax(-webkit-min-content, 1fr) 13rem 8rem 8rem 11rem 8rem auto;
    grid-template-columns: minmax(min-content, 1fr) 13rem 7.5rem 8rem 11rem 8rem auto;
    
    min-height: 180px;
}

.products .table-wrapper.table-col-7 div[role=table] {
    grid-template-columns: minmax(20rem, 1fr) 7rem minmax(-webkit-min-content, 20rem) 8rem 8rem 8rem auto;
    grid-template-columns: minmax(20rem, 1fr) 7rem minmax(min-content, 20rem) 8rem 8rem 8rem auto;
    min-height: 180px;
}

    .users .table-wrapper.table-col-7 div[role=table] > * {
        white-space: nowrap;
    }

.outbox,
.email-log {
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
}

.outbox {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    grid-column: 1/5 !important;
}

    .outbox h2 {
        font-size: 1.125rem;
        line-height: 1.17;
        font-weight: 400;
        padding: 2.5rem 2rem;
    }

    .outbox button {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 2.5rem;
        border-top: 1px solid #303030;
        border-radius: 0;
        padding: 1.5rem;
    }

        .outbox button:focus-visible, .outbox button:hover, .outbox button.active {
            background-color: #303030;
        }

            .outbox button:focus-visible .title, .outbox button:hover .title, .outbox button.active .title {
                color: #87B0F6;
            }

        .outbox button .title {
            font-size: 0.89rem;
            line-height: 1.14;
            color: rgba(255, 255, 255, 0.78);
            text-align: left;
        }

        .outbox button .details {
            font-size: 0.79rem;
            line-height: 1.17;
            color: #949494;
            text-align: right;
        }

.email-log {
    grid-column: -2/-9 !important;
}

    .email-log .email-log_header {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        padding: 1.5rem 2.5rem;
        gap: 1rem;
        border-bottom: 1px solid #303030;
        border-radius: 0;
    }

        .email-log .email-log_header .email-log_details {
            gap: 1rem;
        }

        .email-log .email-log_header p {
            font-size: 0.89rem;
            line-height: 1.14;
            gap: 2.5rem;
        }

            .email-log .email-log_header p span:first-child {
                display: inline-block;
                min-width: 70px;
            }

    .email-log .email-log_content {
        padding: 2rem 2.5rem;
        line-height: 1.19;
        color: #ADADAD;
    }

@media (min-width: 1400px) {
    .outbox {
        grid-column: 1/4 !important;
        max-width: 22rem;
    }

    .email-log {
        grid-column: -2/-10 !important;
    }
}

.orders .table-wrapper.table-col-9 div[role=table] {
    grid-template-columns: 9rem 14rem 7rem repeat(3, 6rem) 10rem 12.5rem 1fr;
    min-height: 180px;
}

    .orders .table-wrapper.table-col-9 div[role=table] > * {
        white-space: nowrap;
    }

.orders .form-wrapper_footer .btn-text-icon {
    min-width: unset;
    gap: 0.5rem;
}

.orders_form-table.table-col-7 div[role=table] {
    grid-template-columns: 18rem repeat(2, 7rem) repeat(3, 9rem) 1fr;
    min-height: 110px;
}

.orders_status-details {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 4rem;
}

.orders_status-details-box {
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
    padding: 1.875rem 2.5rem;
}

    .orders_status-details-box .step,
    .orders_status-details-box .info-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.5rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .orders_status-details-box .step_icon,
    .orders_status-details-box .info-box_icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
    }

    .orders_status-details-box .step_description,
    .orders_status-details-box .info-box_description {
        font-size: 0.75rem;
        line-height: 1.66;
        text-align: center;
    }

.status-steps {
    grid-template-columns: auto minmax(0.5rem, 1fr) auto minmax(0.5rem, 1fr) auto;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

    .status-steps .step.finished .step_icon {
        background-color: #80DB9A;
        border-color: #80DB9A;
    }
    .status-steps .step.not-finished .step_icon {
        background-color: #f12152;
        border-color: #f12152;
    }

    .status-steps .step.finished .step_icon span,
    .status-steps .step.not-finished .step_icon span {
        display: none;
    }

    .status-steps .step.finished .step_icon svg,
    .status-steps .step.not-finished .step_icon svg
    {
        display: inline-block;
    }

    .status-steps .step.finished + .step_line {
        background-color: #80DB9A;
    }
    .status-steps .step.not-finished + .step_line {
        background-color: #f12152;
    }

    .status-steps .step.in-progress .step_icon {
        border-color: #80DB9A;
        -webkit-filter: drop-shadow(0px 0px 8px rgba(128, 219, 154, 0.5));
        filter: drop-shadow(0px 0px 8px rgba(128, 219, 154, 0.5));
    }

    .status-steps .step_line {
        margin-top: 1.25rem;
        margin-left: -0.5rem;
        position: relative;
        z-index: 1;
        width: calc(100% + 1rem);
        height: 2px;
        background-color: #949494;
    }

    .status-steps .step_icon {
        position: relative;
        z-index: 2;
        font-size: 0.875rem;
        font-weight: 700;
        color: #EDEDED;
        background-color: #242424;
        border: 2px solid #949494;
    }

        .status-steps .step_icon svg {
            display: none;
        }

            .status-steps .step_icon svg path {
                fill: #000;
            }

    .status-steps .step_description {
        color: #949494;
    }

.currencies .table-wrapper.table-col-4 div[role=table] {
    grid-template-columns: 10rem 16rem 12rem 1fr;
    min-width: 50rem;
}

    .currencies .table-wrapper.table-col-4 div[role=table] > * {
        white-space: nowrap;
    }

.coupons .table-wrapper.table-col-6 div[role=table] {
    grid-template-columns: 10rem 16rem repeat(3, 12rem) 1fr;
    min-height: 130px;
}

.fees .table-wrapper.table-col-4 div[role=table] {
    grid-template-columns: 9rem 16rem 11rem 1fr;
    min-height: 130px;
}

.insurances .table-wrapper.table-col-5 div[role=table] {
    grid-template-columns: 10rem 16rem repeat(2, 12rem) 1fr;
    min-height: 130px;
}

.payments .table-wrapper.table-col-6 div[role=table] {
    grid-template-columns: 12rem repeat(4, 8rem) 1fr;
    min-height: 110px;
}

.tracking .table-wrapper.table-col-6 div[role=table] {
    grid-template-columns: 12rem 11rem 15rem 8rem 20rem 1fr;
    min-height: 130px;
}

.support .table-wrapper.table-col-6 div[role=table] {
    grid-template-columns: 9rem 17rem 22rem repeat(2, 11rem) 1fr;
    min-height: 110px;
}

.web_tiles .draggable-content {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.web_tiles .box-wrapper {
    background-color: #242424;
    border: 1px solid #303030;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    width: 12.5rem;
    min-height: 15.5rem;
}

    /*.web_tiles .box-wrapper:not(.add-new) {
        cursor: -webkit-grab;
        cursor: grab;
    }*/

    .web_tiles .box-wrapper.over {
        background-color: #171717;
    }

    .web_tiles .box-wrapper.dragging {
        background-color: #0F0F0F;
        opacity: 0.5;
    }

    .web_tiles .box-wrapper.add-new {
        display: grid;
        grid-template-rows: 1fr auto;
        border-style: dashed;
        border-color: #616161;
        background-color: transparent;
        cursor: pointer;
    }

        .web_tiles .box-wrapper.add-new svg {
            place-self: center;
        }

.web_tiles .box-wrapper_inner {
    display: grid;
    grid-template-areas: "image" "title";
    grid-template-rows: 1fr auto;
    max-width: 100%;
}

    .web_tiles .box-wrapper_inner::before, .web_tiles .box-wrapper_inner::after {
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
    }

    .web_tiles .box-wrapper_inner::before {
        height: 3px;
        bottom: 0;
        background-color: #2966E1;
    }

    .web_tiles .box-wrapper_inner::after {
        height: 60px;
        bottom: 3px;
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(41, 102, 225, 0.3)), color-stop(6.67%, rgba(41, 102, 225, 0.297406)), color-stop(13.33%, rgba(41, 102, 225, 0.289347)), color-stop(20%, rgba(41, 102, 225, 0.275502)), color-stop(26.67%, rgba(41, 102, 225, 0.255777)), color-stop(33.33%, rgba(41, 102, 225, 0.230468)), color-stop(40%, rgba(41, 102, 225, 0.200435)), color-stop(46.67%, rgba(41, 102, 225, 0.167193)), color-stop(53.33%, rgba(41, 102, 225, 0.132807)), color-stop(60%, rgba(41, 102, 225, 0.0995652)), color-stop(66.67%, rgba(41, 102, 225, 0.0695324)), color-stop(73.33%, rgba(41, 102, 225, 0.0442234)), color-stop(80%, rgba(41, 102, 225, 0.024498)), color-stop(86.67%, rgba(41, 102, 225, 0.010653)), color-stop(93.33%, rgba(41, 102, 225, 0.00259416)), to(rgba(41, 102, 225, 0)));
        background: -o-linear-gradient(bottom, rgba(41, 102, 225, 0.3) 0%, rgba(41, 102, 225, 0.297406) 6.67%, rgba(41, 102, 225, 0.289347) 13.33%, rgba(41, 102, 225, 0.275502) 20%, rgba(41, 102, 225, 0.255777) 26.67%, rgba(41, 102, 225, 0.230468) 33.33%, rgba(41, 102, 225, 0.200435) 40%, rgba(41, 102, 225, 0.167193) 46.67%, rgba(41, 102, 225, 0.132807) 53.33%, rgba(41, 102, 225, 0.0995652) 60%, rgba(41, 102, 225, 0.0695324) 66.67%, rgba(41, 102, 225, 0.0442234) 73.33%, rgba(41, 102, 225, 0.024498) 80%, rgba(41, 102, 225, 0.010653) 86.67%, rgba(41, 102, 225, 0.00259416) 93.33%, rgba(41, 102, 225, 0) 100%);
        background: linear-gradient(0deg, rgba(41, 102, 225, 0.3) 0%, rgba(41, 102, 225, 0.297406) 6.67%, rgba(41, 102, 225, 0.289347) 13.33%, rgba(41, 102, 225, 0.275502) 20%, rgba(41, 102, 225, 0.255777) 26.67%, rgba(41, 102, 225, 0.230468) 33.33%, rgba(41, 102, 225, 0.200435) 40%, rgba(41, 102, 225, 0.167193) 46.67%, rgba(41, 102, 225, 0.132807) 53.33%, rgba(41, 102, 225, 0.0995652) 60%, rgba(41, 102, 225, 0.0695324) 66.67%, rgba(41, 102, 225, 0.0442234) 73.33%, rgba(41, 102, 225, 0.024498) 80%, rgba(41, 102, 225, 0.010653) 86.67%, rgba(41, 102, 225, 0.00259416) 93.33%, rgba(41, 102, 225, 0) 100%);
        opacity: 0;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    .web_tiles .box-wrapper_inner:focus-visible .custom-choice_input, .web_tiles .box-wrapper_inner:hover .custom-choice_input, .web_tiles .box-wrapper_inner.selected .custom-choice_input {
        opacity: 1;
    }

    .web_tiles .box-wrapper_inner:focus-visible::after, .web_tiles .box-wrapper_inner:hover::after, .web_tiles .box-wrapper_inner.selected::after {
        opacity: 1;
    }

    .web_tiles .box-wrapper_inner:focus-visible .box_img img, .web_tiles .box-wrapper_inner:hover .box_img img, .web_tiles .box-wrapper_inner.selected .box_img img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

.web_tiles .box_img,
.web_tiles .box_choice {
    grid-area: image;
}

.web_tiles .box_choice {
    position: absolute;
    top: 0.875rem;
    right: 0.876rem;
}

.web_tiles .custom-choice_input {
    background-color: rgba(0, 0, 0, 0.12);
    border-color: #616161;
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.web_tiles .box_img {
    position: relative;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    overflow: hidden;
}

    .web_tiles .box_img img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
    }

    .web_tiles .box_img::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear, left bottom, left top, from(#242424), color-stop(6.67%, rgba(36, 36, 36, 0.991353)), color-stop(13.33%, rgba(36, 36, 36, 0.96449)), color-stop(20%, rgba(36, 36, 36, 0.91834)), color-stop(26.67%, rgba(36, 36, 36, 0.852589)), color-stop(33.33%, rgba(36, 36, 36, 0.768225)), color-stop(40%, rgba(36, 36, 36, 0.668116)), color-stop(46.67%, rgba(36, 36, 36, 0.557309)), color-stop(53.33%, rgba(36, 36, 36, 0.442691)), color-stop(60%, rgba(36, 36, 36, 0.331884)), color-stop(66.67%, rgba(36, 36, 36, 0.231775)), color-stop(73.33%, rgba(36, 36, 36, 0.147411)), color-stop(80%, rgba(36, 36, 36, 0.0816599)), color-stop(86.67%, rgba(36, 36, 36, 0.03551)), color-stop(93.33%, rgba(36, 36, 36, 0.0086472)), to(rgba(36, 36, 36, 0)));
        background: -o-linear-gradient(bottom, #242424 0%, rgba(36, 36, 36, 0.991353) 6.67%, rgba(36, 36, 36, 0.96449) 13.33%, rgba(36, 36, 36, 0.91834) 20%, rgba(36, 36, 36, 0.852589) 26.67%, rgba(36, 36, 36, 0.768225) 33.33%, rgba(36, 36, 36, 0.668116) 40%, rgba(36, 36, 36, 0.557309) 46.67%, rgba(36, 36, 36, 0.442691) 53.33%, rgba(36, 36, 36, 0.331884) 60%, rgba(36, 36, 36, 0.231775) 66.67%, rgba(36, 36, 36, 0.147411) 73.33%, rgba(36, 36, 36, 0.0816599) 80%, rgba(36, 36, 36, 0.03551) 86.67%, rgba(36, 36, 36, 0.0086472) 93.33%, rgba(36, 36, 36, 0) 100%);
        background: linear-gradient(0deg, #242424 0%, rgba(36, 36, 36, 0.991353) 6.67%, rgba(36, 36, 36, 0.96449) 13.33%, rgba(36, 36, 36, 0.91834) 20%, rgba(36, 36, 36, 0.852589) 26.67%, rgba(36, 36, 36, 0.768225) 33.33%, rgba(36, 36, 36, 0.668116) 40%, rgba(36, 36, 36, 0.557309) 46.67%, rgba(36, 36, 36, 0.442691) 53.33%, rgba(36, 36, 36, 0.331884) 60%, rgba(36, 36, 36, 0.231775) 66.67%, rgba(36, 36, 36, 0.147411) 73.33%, rgba(36, 36, 36, 0.0816599) 80%, rgba(36, 36, 36, 0.03551) 86.67%, rgba(36, 36, 36, 0.0086472) 93.33%, rgba(36, 36, 36, 0) 100%);
    }

.web_tiles .box_title {
    font-size: 1rem;
    line-height: 1.18;
    font-weight: 400;
    margin: 0 1.125rem 1rem 1.125rem;
}

.web_table {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
}

    .web_table h2 {
        font-size: 1.27rem;
        line-height: 1.18;
        font-weight: 400;
    }

    .web_table .table-wrapper2.table-col-3 .table-header, .web_table .table-wrapper2.table-col-3 .table-row {
        grid-template-columns: 3fr 1fr 1fr;
    }

.daterangepicker {
    background-color: #4d4d4d;
    border: 1px solid #616161;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.87);
}

    .daterangepicker .calendar-table {
        background-color: #4d4d4d;
        border-color: transparent;
    }
        .daterangepicker .calendar-table table {
            border-collapse: unset;
            border-spacing: 2px;
        }
        .daterangepicker .calendar-table .next span,
        .daterangepicker .calendar-table .prev span {
            border-color: rgba(255, 255, 255, 0.87);
        }
    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
        background-color: #303030;
    }

    .daterangepicker td.off,
    .daterangepicker td.off.in-range,
    .daterangepicker td.off.start-date,
    .daterangepicker td.off.end-date {
        background-color: #303030;
        color: #C7C7C7;
    }
    .daterangepicker td.in-range {
        background-color: #357ebd;
        color: #fff
    }
    .daterangepicker select {
        padding: 0.75rem !important;
    }
    .daterangepicker .drp-buttons {
        border-top: 1px solid #303030;
        justify-content: flex-end
    }
    .daterangepicker.show-calendar .drp-buttons {
        display: flex;
    }
    .input-wrapper_number {
        position: relative;
        overflow: hidden;
    }

    .input-wrapper_number input {
        text-align: left;
        min-width: 100%;
    }

    .input-wrapper_number .increase,
    .input-wrapper_number .decrease {
        min-height: 100%;
        min-width: 44px;
        padding: 0.75rem;
        padding-top: calc(0.75rem - 1px);
        display: grid;
        place-items: center;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

        .input-wrapper_number .increase {
            right: 1px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            border-left: 1px solid #4d4d4d;
        }

        .input-wrapper_number .decrease {
            left: 1px;
            
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            border-right: 1px solid #4d4d4d;
        }

        /*.input-wrapper_number button:focus-visible, .input-wrapper_number button:hover {
            background-color: #303030;
        }*/

    .input-wrapper_number:focus {
        border: 2px solid #87b0f6;
    }

    .input-wrapper_number:hover:not(:focus) {
        border-color: #949494;
    }
.radio-option {position: relative; cursor:pointer}
.radio-option input {
    visibility: hidden;
}
.radio-option .checkmark {
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: absolute;
    
}
    .radio-option .checkmark::after {
        content: '';
        width: .5rem;
        height: .5rem;
        background-color: #2966E1;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        opacity: 0
    }

    .radio-option input:checked + .checkmark {
        border: 1px solid #2966E1;
    }
    .radio-option input:checked + .checkmark::after {opacity: 1;}

#unsupported {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100vw;
    min-height: 100vh;
    z-index: 99999;
    background-color: #171717;

    display:none;

    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 1.5rem;
    text-align: center;
    padding-inline: 1.5rem
}

.file-drop-area {
    position: relative;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 150px;
}
    .file-drop-area:hover {
        background-color: #171717;
    }

    .file-drop-area .file-drop-input {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
    }

.preview-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    gap: .5rem; 
    flex-wrap: wrap;
}
    .preview-area .preview-box {
        display: flex;
        align-items: center;
        gap: .5rem;
        background-color: rgb(77, 77, 77);
        border-radius: 40px;
    }


    @media (max-width:1000px) {
        #unsupported {
            display: flex;
        }
    }



.variations-container {

    display:flex;
    flex-direction: column;
    gap: .75rem;
    margin-block: 1.5rem;
}
.variations-container .variation{
    display: flex;
    gap: .5rem;
    align-items:center
}

.categories-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #303030;
    background: #171717;
}
.category-item {
    display: grid;
    grid-template-columns: minmax(150px, 400px) 1fr auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .5rem .75rem;
    background-color: #242424;
    font-size: .875rem;
    font-weight: 400;
    height:3.5rem;
}
    .category-item:not(:last-child) {
        border-bottom: 1px solid #3D3D3D;
    }

    .category-item:hover {
        background-color: #171717
    }

.category-title-wrapper {
    display:flex;
    align-items:center;
    gap:1rem;
}
.category-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
}

.category-item:last-child .category-title {
    color: #87B0F6;
    padding-left:3.5rem;
}
.category-item .additional-tags {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
}
.category-item .options-wrapper{
    display: flex;
    align-items: center;
    gap: .5rem;
}
    .category-item .options-wrapper .btn-ghost path{
        fill: white !important
    }
.options-dropdown {
    position: relative;
}

    .options-dropdown .dropdown-list {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 999;
        min-width: 12rem;
        background-color: #3d3d3d;
        border: 1px solid #4d4d4d;
        border-radius: 0.25rem;
        -webkit-box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
        padding-block: 0.75rem;
        display: none;
        opacity: 0;
        -webkit-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

        .options-dropdown .dropdown-list.is-visible {
            display: block;
        }

        .options-dropdown .dropdown-list.is-active {
            opacity: 1;
        }

    .options-dropdown .dropdown-list-item.border-bottom {
        border-bottom: 1px solid #4d4d4d;
        margin-bottom: 0.5rem;
    }

    .options-dropdown .dropdown-list-item.border-top {
        border-top: 1px solid #4d4d4d;
        padding-top: 0.5rem;
    }

    .options-dropdown .dropdown-list-item.text-small {
        font-size: 0.7rem;
        padding-left: 1rem;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 0.25rem;
    }
.dropdown-option-btn {
    font-size: 0.89rem;
    line-height: 1.14;
    letter-spacing: 0.25px;
    color: rgba(255, 255, 255, 0.87);
    gap: 1rem;
    padding: 0.7rem 1rem;
    min-width: 100%;
    text-align: left;
}

    .dropdown-option-btn > * {
        pointer-events: none;
    }

    .dropdown-option-btn .icon {
        width: 1rem;
        height: 1rem;
        display: grid;
        place-items: center;
    }

    .dropdown-option-btn:focus-visible, .dropdown-option-btn:hover {
        background-color: #303030;
    }

    .dropdown-option-btn.info:focus-visible, .dropdown-option-btn.info:hover {
        color: #87B0F6;
    }

        .dropdown-option-btn.info:focus-visible svg path, .dropdown-option-btn.info:hover svg path {
            fill: #87B0F6;
        }

    .dropdown-option-btn.warning:focus-visible, .dropdown-option-btn.warning:hover {
        color: #E5CC7E;
    }

        .dropdown-option-btn.warning:focus-visible svg path, .dropdown-option-btn.warning:hover svg path {
            fill: #E5CC7E;
        }

    .dropdown-option-btn.success:focus-visible, .dropdown-option-btn.success:hover {
        color: #6FD86F;
    }

        .dropdown-option-btn.success:focus-visible svg path, .dropdown-option-btn.success:hover svg path {
            fill: #6FD86F;
        }

    .dropdown-option-btn.danger:focus-visible, .dropdown-option-btn.danger:hover {
        color: #DE5978;
    }

        .dropdown-option-btn.danger:focus-visible svg path, .dropdown-option-btn.danger:hover svg path {
            fill: #DE5978;
        }



.product-options-dropdown {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    background-color: #3D3D3D;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    width: 16rem;
    padding-block: .5rem;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
    z-index:100;
}
    .product-options-dropdown .dropdows-list {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
        .product-options-dropdown .dropdows-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: .5rem 1rem;
            font-size: .875rem;
            line-height: 1.57;
            letter-spacing: .25px;
            color: rgba(255, 255, 255, 0.87);
            cursor: pointer
        }
            .product-options-dropdown .dropdows-list li:hover {
                background-color: #303030
            }
                .product-options-dropdown .dropdows-list li:hover path {
                    fill-opacity: 0.87;
                }


            .product-options-dropdown .dropdows-list li.dropdown-header {
                justify-content: flex-start;
                gap: 1rem;
            }

                .product-options-dropdown .dropdows-list li.dropdown-header:hover path {
                    fill: #87B0F6;
                }
            .product-options-dropdown .dropdows-list li.divider {
                pointer-events: none;
                margin-block: .5rem;
                border-top: 1px solid #4d4d4d;
                padding:0;
            }



            

/*# sourceMappingURL=style.css.map */