/* input(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(88,12): run-time error CSS1035: Expected colon, found '{'
input(111,12): run-time error CSS1035: Expected colon, found '{'
input(187,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(266,15): run-time error CSS1035: Expected colon, found '{'
input(436,23): run-time error CSS1035: Expected colon, found ','
input(482,6): run-time error CSS1035: Expected colon, found '.'
input(525,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(537,19): run-time error CSS1035: Expected colon, found '{'
input(551,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(565,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(574,19): run-time error CSS1035: Expected colon, found '{'
input(588,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(605,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(619,15): run-time error CSS1035: Expected colon, found '{'
input(648,15): run-time error CSS1035: Expected colon, found '{'
input(661,10): run-time error CSS1035: Expected colon, found '{'
input(673,24): run-time error CSS1035: Expected colon, found '{'
input(696,10): run-time error CSS1035: Expected colon, found '{'
input(718,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(741,16): run-time error CSS1035: Expected colon, found '{'
input(790,10): run-time error CSS1035: Expected colon, found '{'
input(819,9): run-time error CSS1035: Expected colon, found '{'
input(876,19): run-time error CSS1035: Expected colon, found ','
input(915,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(930,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1037,16): run-time error CSS1035: Expected colon, found '{'
input(1084,17): run-time error CSS1035: Expected colon, found '{'
input(1094,17): run-time error CSS1035: Expected colon, found '{'
input(1104,17): run-time error CSS1035: Expected colon, found '{'
input(1114,17): run-time error CSS1035: Expected colon, found '{'
input(1139,16): run-time error CSS1035: Expected colon, found '{'
input(1197,24): run-time error CSS1035: Expected colon, found '{'
input(1231,6): run-time error CSS1035: Expected colon, found '.'
input(1252,11): run-time error CSS1035: Expected colon, found '{'
input(1302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1322,12): run-time error CSS1035: Expected colon, found '{'
input(1360,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1406,17): run-time error CSS1035: Expected colon, found '{'
input(1420,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1463,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1478,6): run-time error CSS1035: Expected colon, found '.'
input(1537,6): run-time error CSS1035: Expected colon, found '.'
input(1777,15): run-time error CSS1035: Expected colon, found '{'
input(1817,20): run-time error CSS1035: Expected colon, found '{'
input(1904,6): run-time error CSS1035: Expected colon, found '.'
input(1923,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1944,14): run-time error CSS1035: Expected colon, found '{'
input(1971,10): run-time error CSS1035: Expected colon, found '{' */
:root {
    /* #region BOOTSTRAP */
    --bs-body-color: var(--typo-primary);
    --bs-body-font-size: 14px;
    --bs-body-color: var(--typo-primary);
    --bs-border-color: var(--stroke-color);
    /* #endregion */
    /*--primary: #fff;*/
    --wrapper-bg: #fff;
    --border-color: #000;
    --nav-height: 32px;
    --nav-bg: #fff;
    --stroke-color: #000;
    --sidebar-bg: #fff;
    --sidebar-width: 250px;
    --sidebar-spacing: 16px;
    --sidebar-link-color: var(--typo-primary);
    --sidebar-link-icon-color: var(--typo-primary);
    --widget-card-bg: #fff;
    --widget-card-border-radius: 0px;
    --widget-card-title-color: #000;
    --widget-card-title-font-size: 16px;
    --widget-card-title-font-weight: 600;
    --dashboard-card-border: 0px;
    --dashboard-card-border-radius: 0px;
    --typo-danger: #000;
    --typo-light: #000;
    --typo-muted: #000;
    --typo-secondary: #000;
    --typo-success: #000;
    --typo-primary: #000;
    --page-outer-margin: 16px;
}

/* #region PAGE */

html {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;

    &:has(.identity-form) {
        overflow-y: auto;
    }
}

body {
    overflow: hidden;
    height: 100%;
}

.content {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--nav-height) - var(--page-outer-margin) * 3);
    margin-top: var(--page-outer-margin);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    transition: width 0.2s ease-in-out;
    width: 100%;
}

.main {
    max-height: calc(100dvh - var(--page-outer-margin) * 2);
    overflow-x: hidden;
    flex: 1 1 0px;
}

.wrapper {
    background-color: var(--wrapper-bg);
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    padding: var(--page-outer-margin);
    height: 100%;
}

/* #endregion */

/* #region ALERTS */

.alert {
    border-radius: 4px;
    margin-bottom: var(--outer-margin);

    .title {
        color: var(--typo-primary);
        font-size: 20px;
        font-weight: 700;
    }

    .subtitle {
        color: var(--typo-primary);
        font-size: 16px;
        font-weight: 400;
    }

    &.bg-danger {
        background-color: #b50000 !important;
    }
}

.navbar .alert {
    padding: 4px 8px;
    margin: 0px;
}

.home-alerts {
    .alert {
        padding: 4px 8px;
        margin: 0px;

        .alert-message {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn {
            --bg-color: var(--color-toast-warning-icon-fill);
            --border-color: var(--color-toast-warning-icon-fill);
            --text-color: #fff;
            --icon-color: #fff;
        }

        &.alert-danger {
            --bs-alert-color: var(--color-toast-error-text);
            --bs-alert-bg: var(--color-toast-error-fill);
            --bs-alert-border-color: var(--color-toast-error-icon-fill);

            .btn {
                --bs-btn-bg: var(--color-toast-error-icon-fill);
                --bs-btn-hover-bg: rgba(var(--rgb-toast-error-icon-fill), 0.6);
                --bs-btn-hover-color: var(--color-typo-primary);
            }
        }

        &.alert-warning {
            --bs-alert-color: var(--color-toast-warning-text);
            --bs-alert-bg: var(--color-toast-warning-fill);
            --bs-alert-border-color: color-mix(in srgb, var(--color-effect-stroke), var(--color-toast-warning-text));

            .btn {
                --bs-btn-bg: var(--color-toast-warning-icon-fill);
                --bs-btn-hover-bg: rgba(var(--rgb-toast-warning-icon-fill), 0.6);
                --bs-btn-hover-color: var(--color-typo-primary);
            }
        }

        &.alert-detail, &.alert-info {
            --bs-alert-color: var(--color-toast-detail-text);
            --bs-alert-bg: var(--color-toast-detail-fill);
            --bs-alert-border-color: var(--color-toast-detail-icon-fill);

            .btn {
                --bs-btn-bg: var(--color-toast-detail-icon-fill);
                --bs-btn-hover-bg: rgba(var(--rgb-toast-detail-icon-fill), 0.6);
                --bs-btn-hover-color: var(--color-typo-primary);
            }
        }

        &.alert-success {
            --bs-alert-color: var(--color-toast-success-text);
            --bs-alert-bg: var(--color-toast-success-fill);
            --bs-alert-border-color: var(--color-toast-success-icon-fill);

            .btn {
                --bs-btn-bg: var(--color-toast-success-icon-fill);
                --bs-btn-hover-bg: rgba(var(--rgb-toast-success-icon-fill), 0.6);
                --bs-btn-hover-color: var(--color-typo-primary);
            }
        }
    }
}

/* #endregion */

/* #region BADGES */

.badge {
    border-radius: 4px;
    font-size: 12px;
    padding: 8px;

    &.bg-secondary {
        background-color: var(--color-ui-panel) !important;
        color: var(--color-typo-primary) !important;
    }
}

.badge-soft-primary {
    background-color: var(--color-toast-detail-fill) !important;
    color: var(--color-toast-detail-text) !important;
}

.badge-soft-warning {
    background-color: var(--color-toast-warning-fill) !important;
    color: var(--color-toast-warning-text) !important;
}

.badge-soft-danger {
    background-color: var(--color-toast-error-fill) !important;
    color: var(--color-toast-error-text) !important;
}

.badge-soft-info {
    background-color: var(--color-toast-detail-fill) !important;
    color: var(--color-toast-detail-text) !important;
}

.badge-soft-secondary {
    background-color: var(--color-ui-panel) !important;
    color: var(--color-typo-primary) !important;
}

.badge-soft-success {
    background-color: var(--color-toast-success-fill) !important;
    color: var(--color-toast-success-text) !important;
}

/* #endregion */

/* #region BORDER */

.border {
    border-color: var(--stroke-color) !important;
}

.border-ui-stroke {
    border-color: var(--color-ui-stroke) !important;
}

/* #endregion */

/* #region BUTTONS */

.btn {
    --bg-color: transparent;
    --border-color: transparent;
    --bg-active-color: var(--bg-color);
    --border-active-color: var(--border-color);
    --text-color: var(--typo-primary);
    --icon-color: var(--typo-primary);
    --text-active-color: var(--text-color);
    --icon-active-color: var(--icon-color);
    align-items: center;
    background: var(--bg-color);
    border-color: var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-size: 16px;
    justify-content: center;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: all .1s;
    width: fit-content;

    .icon-svg {
        background-color: var(--icon-color);
    }

    i {
        color: var(--icon-color);
    }

    &.disabled, &[disabled], &.btn-disabled {
        background: var(--bg-color);
        border-color: var(--border-color);
        color: var(--text-color);
        cursor: not-allowed !important;
        opacity: .5;
    }

    &.btn-xs {
        --svg-size: 32px;
        font-size: 12px;
        padding: 4px 12px;
    }

    &.btn-sm {
        --svg-size: 32px;
        font-size: 12px;
        padding: 4px 12px;
    }

    &.btn-lg {
        padding: 8px;
    }

    &.btn-xl {
        padding: 16px;
    }

    &:not(.disabled, [disabled], .btn-disabled) {
        &:hover, &:focus, &:focus-visible, &:active {
            background: var(--bg-active-color);
            border-color: var(--border-active-color);
            color: var(--text-active-color);
            filter: brightness(90%);
            transform: scale(1.005);

            .icon-svg {
                background-color: var(--icon-active-color);
            }

            i {
                color: var(--icon-active-color);
            }
        }

        &:focus-visible, &:active {
            box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bg-active-color) 27%, transparent);
        }
        /*&:focus {
            background-color: red !important;
        }*/
    }

    &.text-primary {
        i {
            color: var(--color-typo-primary);
        }
    }
}

.btn-secondary {
    --bg-color: #6c757d;
    --border-color: #6c757d;
    --text-color: white;
    --icon-color: white;
}

.btn-outline-secondary {
    --border-color: #6c757d;
    --bg-active-color: #6c757d;
    --text-color: #6c757d;
    --icon-color: #6c757d;
    --text-active-color: white;
    --icon-active-color: white;
}

.btn-warning {
    --bg-color: #ffc107;
    --border-color: #ffc107;
    --text-color: #000;
    --icon-color: #000;
}

.btn-outline-warning {
    --border-color: #ffc107;
    --bg-active-color: #ffc107;
    --text-color: #ffc107;
    --icon-color: #ffc107;
    --text-active-color: #000;
    --icon-active-color: #000;
}

.btn-action {
    --bg-color: rgba(var(--rgb-graph-power-action), 0.20);
    --border-color: rgba(var(--rgb-graph-power-action), 0.20);
    --text-color: rgba(255, 140, 56, 1);
    --icon-color: rgba(255, 140, 56, 1);
}

.btn-outline-action {
    --border-color: rgba(var(--rgb-graph-power-action), 0.80);
    --bg-active-color: rgba(var(--rgb-graph-power-action), 0.80);
    --text-color: rgba(var(--rgb-graph-power-action), 0.80);
    --icon-color: rgba(var(--rgb-graph-power-action), 0.80);
    --text-active-color: #000;
    --icon-active-color: #000;
}

.btn-power {
    --bg-color: var(--color-graph-power-action);
    --border-color: var(--color-graph-power-action);
    --bg-active-color: var(--color-graph-power-fill-hover);
    --border-color: var(--color-graph-power-fill-hover);
    --text-color: var(--color-typo-btn-action);
    --icon-color: var(--color-typo-btn-action);
}

.btn-outline-power {
    --border-color: var(--color-graph-power-action);
    --bg-active-color: var(--color-graph-power-action);
    --text-color: var(--color-graph-power-action);
    --icon-color: var(--color-graph-power-action);
    --text-active-color: var(--color-typo-btn-action);
    --icon-active-color: var(--color-typo-btn-action);
}

/* #endregion */

/* #region CARD */

.card-header {
    background-color: unset;
    border-bottom: 0;
    color: unset;
    padding: 0;
    margin-bottom: 16px;
}

.card-body {
    padding: 0px;
}

/* #endregion */

/* #region WIDGET CARD */

.widget-card, .card {
    background: var(--widget-card-bg);
    border: none;
    border-radius: var(--widget-card-border-radius);
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.widget-card-title-row, .widget-card-title-with-action {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 16px;

    .widget-card-title, .card-title {
        margin-bottom: 0px;
    }

    .action {
        align-items: center;
        color: var(--typo-secondary);
        display: flex;
        font-size: 18px;
        gap: 8px;
        text-decoration: none;

        .icon-svg {
            background-color: var(--typo-secondary);
        }
    }
}

.widget-card-title, .card-title {
    align-items: center;
    color: var(--widget-card-title-color);
    display: flex;
    flex-direction: row;
    font-size: var(--widget-card-title-font-size);
    font-weight: var(--widget-card-title-font-weight);
    margin-bottom: 16px;
}

/* #endregion */

/* #region NAVBAR */

.navbar {
    background-color: var(--nav-bg);
    height: var(--nav-height);
}

.navbar-name {
    font-size: 20px;
    color: var(--typo-primary);
}

.nav-link {
    color: var(--typo-secondary);
    font-weight: 500;

    i.icon-svg {
        background-color: var(--typo-secondary);
    }

    &.dropdown-toggle {
        cursor: pointer;
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 4px;
    }
}

/* #endregion */

/* #region SIDEBAR */

.sidebar {
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--sidebar-width);
    margin-right: var(--sidebar-spacing);
    max-height: calc(100dvh - var(--page-outer-margin) * 2);
    padding: 10px 8px;
    transition: margin 0.2s ease-in-out;
}

.sidebar-brand {
    text-align: center;
    margin-bottom: 32px;
}

.sidebar-list {
    margin-bottom: 0px;
    padding: 0px;
    overflow: auto;
}

@media (max-width: 767px) {
    .sidebar {
        margin-left: calc((var(--sidebar-width) + var(--sidebar-spacing)) * -1);

        &.hide-sidebar {
            margin-left: 0;
        }
    }

    .content.restricted {
        width: calc(100vw - var(--page-outer-margin) * 2);
    }

    .sidebar-collapse {
        margin-left: 0;

        .icon-svg {
            mask-image: url(/icons/default/chevron-right.svg?v=QlmRrm9AbvWXcR80pJ4Bta6oQEU);
        }

        &.hide-sidebar-collapse {
            margin-left: calc((var(--page-outer-margin) + var(--sidebar-width)) * 1);

            .icon-svg {
                mask-image: url(/icons/default/cross.svg?v=QlmRrm9AbvWXcR80pJ4Bta6oQEU);
            }
        }
    }

    #sidebar-toggle-icon {
        &.icon-chevron-right {
            mask-image: url(/icons/default/sidebar-collapse.svg?v=QlmRrm9AbvWXcR80pJ4Bta6oQEU);
        }

        &.icon-sidebar-collapse {
            mask-image: url(/icons/default/chevron-right.svg?v=QlmRrm9AbvWXcR80pJ4Bta6oQEU);
        }
    }
}

@media (min-width: 768px) {
    .sidebar {
        margin-left: 0;

        &.hide-sidebar {
            /*margin-left: calc((var(--sidebar-width) + var(--sidebar-spacing) + var(--page-outer-margin)) * -1);*/
            margin-left: calc((var(--sidebar-width) + var(--page-outer-margin)) * -1);
        }
    }

    .sidebar-collapse {
        margin-left: calc(var(--page-outer-margin) + var(--sidebar-width));

        .icon-svg {
            mask-image: url(/icons/default/cross.svg?v=QlmRrm9AbvWXcR80pJ4Bta6oQEU);
        }

        &.hide-sidebar-collapse {
            margin-left: 0;

            .icon-svg {
                mask-image: url(/icons/default/chevron-right.svg?v=QlmRrm9AbvWXcR80pJ4Bta6oQEU);
            }
        }
    }

    #sidebar-toggle-icon {
        &.icon-chevron-right {
            mask-image: url(/icons/default/chevron-right.svg?v=QlmRrm9AbvWXcR80pJ4Bta6oQEU);
        }

        &.icon-sidebar-collapse {
            mask-image: url(/icons/default/sidebar-collapse.svg?v=QlmRrm9AbvWXcR80pJ4Bta6oQEU);
        }
    }
}

.sidebar-header {
    color: var(--typo-secondary);
    font-size: 12px;
    font-weight: 600;
    margin-top: 32px;
    padding-left: 6px;

    &:first-of-type {
        margin-top: 0px;
    }
}

.sidebar-link {
    align-items: center;
    border-radius: 4px;
    color: var(--sidebar-link-color);
    display: flex;
    padding: 2px 6px;
    text-decoration: none;
    transition: background-color .075s ease-in-out;

    .icon-svg {
        background-color: var(--sidebar-link-icon-color);
    }

    span {
        margin-left: 8px;
    }
}

.sidebar-item {
    list-style-type: none;
}

    .sidebar-item .sidebar-dropdown .sidebar-item .sidebar-link {
        padding-left: 32px;
    }

.sidebar-collapse {
    aspect-ratio: 1/1;
    border-bottom-right-radius: 32px;
    border-top-right-radius: 32px;
    cursor: pointer;
    display: flex;
    height: 32px;
    left: 0;
    position: absolute;
    transition: all 0.2s ease-in-out;
    z-index: 10;

    .icon-svg {
        aspect-ratio: 1/1;
        height: 32px;
        width: auto;
    }
}

.sidebar-actions-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;

    .btn {
        width: 100%;
    }
}

.sidebar-bottom-actions-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: space-between;

    .language-dropdown {
        .dropdown-toggle {
            align-items: center;
            display: flex;
            flex-direction: row;
        }
    }

    .logout-button {
        align-items: center;
        color: var(--typo-danger);
        display: flex;
        flex-direction: row;
        gap: 8px;
        text-decoration: none;

        i {
            font-size: 16px;
        }
    }
}

.simplebar-content {
    .btn {
        width: 100%;
    }
}

/* #endregion */

/* #region CLOSE SIDEBAR BUTTON (UNUSED) */

.close-sidebar-button {
    align-items: center;
    background-color: var(--color-crm-card);
    color: var(--color-crm-typo-primary);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 16px;
    gap: 1px;
    padding: 2px 8px;
    text-decoration: none;
    width: fit-content;

    &:hover .icon-svg {
        background-color: var(--color-crm-primary);
    }
}

/* #endregion */

/* #region SWITCH (THEME SWITCH) */

.vt-switch {
    --vt-switch-width: 40px;
    --vt-slider-size: 12px;
    --padding: 3px;
    background-color: var(--color-ui-btn-background);
    display: flex;
    align-items: center;
    width: var(--vt-switch-width);
    height: 18px;
    border-radius: 35px;
    position: relative;
    padding: 0px var(--padding);
    cursor: pointer;

    .vt-slider {
        background-color: var(--color-ui-toggle-controller-off);
        border-radius: 14px;
        left: var(--padding);
        position: absolute;
        transition: 0.15s ease-in-out;
        height: var(--vt-slider-size);
        width: var(--vt-slider-size);
    }

    &.active {
        background-color: var(--color-ui-toggle-on);

        .vt-slider {
            background-color: var(--color-ui-toggle-controller-on);
            left: calc(var(--vt-switch-width) - var(--vt-slider-size) - var(--padding));
        }
    }
}

/* #endregion */

/* #region MODAL */

.modal-header {
    border: unset;
    display: flex;
    flex-direction: column-reverse;
}

.modal-content {
    background-color: var(--color-ui-card);
    border: unset;
    border-radius: 4px;
    color: var(--typo-primary);
}

.modal-body {
    margin: 16px;
    padding: 16px;
    overflow-wrap: break-word;
    padding-bottom: 24px;
}

.modal-footer {
    border: unset;
    gap: 8px;
    justify-content: space-between;

    .btn {
        flex: 1 1 0px;
    }
}

.modal-title {
    color: var(--typo-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
}

.modal-subtitle {
    color: var(--typo-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 8px;
}

/* #endregion */

/* #region CHALLENGE PROGRESS BAR */

.challenge-progress-bar {
    border-radius: 8px;
    height: 8px;
    width: 100%;

    div {
        border-radius: 8px;
        height: 100%;
        transition: width 1s ease;
        max-width: 100%;
    }
}

/* #endregion */

/* #region TYPOGRAPHY */

.text-danger, .text-sell {
    color: var(--typo-danger) !important;
}

.text-light {
    color: var(--typo-light) !important;
}

.text-muted {
    color: var(--typo-muted) !important;
}

.text-success, .text-buy {
    color: var(--typo-success) !important;
}

.text-typo-primary {
    color: var(--typo-primary) !important;
}

.text-typo-secondary {
    color: var(--typo-secondary) !important;
}

.text-primary {
    color: var(--color-typo-primary) !important;
}

/* #endregion */

/* #region SWITCH BUTTONS */

.switch-button-container, .table-mode-button-group {
    --text-color: var(--typo-secondary);
    --icon-color: var(--typo-secondary);
    --text-active-color: var(--typo-primary);
    --icon-active-color: var(--typo-primary);
    background-color: #000;
    border-radius: 8px;
    display: flex;
    width: fit-content;
    flex-direction: row;
    gap: 8px;
    padding: 4px;

    .switch-button, button {
        background-color: transparent;
        border: unset;
        border-radius: 4px;
        color: var(--text-color);
        padding: 4px 8px;
        transition: all .2s;

        .icon-svg {
            background-color: var(--icon-color);
        }

        i {
            color: var(--icon-color);
        }

        &.selected {
            background-color: #808080;
            color: var(--text-active-color);
            font-weight: 700;

            .icon-svg {
                background-color: var(--icon-active-color);
            }

            i {
                color: var(--icon-active-color);
            }
        }
    }
}

/* #endregion */

/* #region FORMS */

.form-control {
    color: var(--typo-primary);

    &::placeholder {
        color: var(--typo-secondary);
    }
}

/* #endregion */

/* #region TABLE */

.table {
    --font-size: 14px;
    --bs-table-color-type: var(--color-typo-primary) !important;
    --bs-table-striped-color: var(--color-typo-primary) !important;
    --bs-border-color: var(--color-ui-stroke-table, var(--color-ui-stroke, silver));
    width: 100%;
    &.table-sm {
        --font-size: 12px;

        .btn-icon {
            font-size: 85%;
        }

        .badge {
            padding: 4px 8px !important;
        }
    }

    thead {
        tr {
            th {
                font-size: var(--font-size);
                vertical-align: middle;
                white-space: nowrap;
            }
        }
    }

    tbody {
        tr {
            td {
                font-size: var(--font-size);
                vertical-align: middle;
                white-space: nowrap;
            }

            &.row-danger {
                td {
                    background-color: rgba(255, 0, 0, .1);
                }
            }

            &.row-warning {
                td {
                    background-color: rgba(255, 165, 0, .2);
                }
            }
        }
    }

    &.dataTable {
        tbody {
            tr {
                td {
                    border-bottom-color: var(--color-ui-stroke);
                }
            }
        }
    }
}

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}

.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    top: 0;
    left: 0;
}

    .text-overflow-dynamic-container:after,
    .text-overflow-dynamic-ellipsis:after {
        content: '-';
        display: inline;
        visibility: hidden;
        width: 0;
    }

.empty-table-text {
    color: var(--typo-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* #endregion */

/* #region DATATABLE */

.dt-layout-table {
    overflow-x: auto;
}

.dt-length label {
    margin-left: 8px;
}

div.dt-container {
    .dt-paging {
        .dt-paging-button {
            border-radius: 37px !important;
            width: 37px;
            height: 37px;
            line-height: 14px;


            &:not(.disabled) {
                &:hover {
                }
            }

            &.current {
            }

            &.disabled {
                cursor: not-allowed !important;

                &:hover {
                }
            }
        }
    }
}

.dt-empty {
    color: var(--typo-secondary) !important;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

/* #endregion */

/* #region NOTYF */

.notyf__toast .notyf__dismiss .notyf__dismiss-btn:before, .notyf__toast .notyf__dismiss .notyf__dismiss-btn:after {
    background: var(--color-toast-cta);
}

.notyf__dismiss-btn {
    opacity: .6;
    background-color: transparent;
}

.toast-error {
    .toast-icon {
        --svg-color: var(--color-toast-error-icon-fill);
    }

    .notyf__message {
        color: var(--color-toast-error-text);
    }
}

.toast-warning {
    .toast-icon {
        --svg-color: var(--color-toast-warning-icon-fill);
    }

    .notyf__message {
        color: var(--color-toast-warning-text);
    }
}

.toast-detail {
    .toast-icon {
        --svg-color: var(--color-toast-detail-icon-fill);
    }

    .notyf__message {
        color: var(--color-toast-detail-text);
    }
}

.toast-success {
    .toast-icon {
        --svg-color: var(--color-toast-success-icon-fill);
    }

    .notyf__message {
        color: var(--color-toast-success-text);
    }
}

/* #endregion */

/* #region NOTIFICATIONS  */

.notification-dropdown {
    border-radius: 8px !important;
    display: none;
    min-width: min(35vw, 350px);
    padding: 16px;
}

.notification-dropdown-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .title-row {
        display: flex;
        flex-direction: row;
        gap: 8px;
        justify-content: space-between;

        .title {
            color: var(--typo-primary);
            font-size: 16px;
            font-weight: 700;
        }
    }

    .notification {
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 8px;

        .notification-body {
            display: flex;
            flex-direction: column;
            gap: 4px;

            .badge {
                width: fit-content;
                padding: 4px;
            }

            .notification-text {
                font-size: 16px;
                color: var(--typo-primary);
            }
        }
    }

    .empty-notification-text {
        font-size: 16px;
        color: var(--typo-secondary);
    }
}

/* #endregion */

/* #region NOTIFICATIONS PAGE */

.notification-page-item {
    align-items: center;
    background-color: var(--color-crm-background);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    min-height: 53px;
    padding: 8px;
    transition: all .1s;

    .notification-text {
        color: var(--typo-primary);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &:hover {
        transform: scale(1.01)
    }

    &.notification-not-readed {
        background-color: rgba(var(--rgb-crm-primary), .05);
    }
}


.notification-page-item-date {
    color: var(--typo-secondary);
    font-size: 12px;
    line-height: 12px;
    text-align: left;
}

.notification-page-item-details-link {
    align-items: center;
    color: var(--typo-primary);
    display: flex;
    flex-direction: row;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .1s;

    i.icon-svg {
        background-color: var(--typo-primary);
        transition: background-color .1s;
    }

    &:hover {
        color: var(--color-crm-primary);

        i.icon-svg {
            background-color: var(--color-crm-primary);
        }
    }
}

/* #endregion */

/* #region ACCOUNT TABLE */

.account-table {
    width: 100%;

    thead {
        tr {
            td {
                background-color: var(--color-ui-background);
                color: var(--color-typo-secondary);
                font-size: 14px;
                font-weight: 700;
                padding: 4px 8px;
            }
        }
    }

    tbody {
        tr {
            td {
                padding: 8px;
                transition: background-color 0.1s ease-in-out;
            }

            &:hover {
                background-color: var(--color-ui-panel);

                td:first-child {
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }

                td:last-child {
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                }
            }
        }
    }
}

.account-table-active-pill {
    width: 5px;
    height: 20px;
    background-color: var(--color-ui-active-fill);
    border-radius: 25px;
}

.account-table-radio {
    width: 17px;
    height: 17px;
    border-color: var(--color-ui-icon-primary);
    border-width: 2px;
    background-color: var(--svg-color);

    &:checked {
        border-color: var(--color-ui-icon-primary);
        background-color: var(--color-ui-card);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2300f'/%3e%3c/svg%3e") !important;
    }
}

/* #endregion */

/* #region DASHBOARD SECTION BTN (account navigation) */

.dashboard-section-btn {
    background-color: var(--color-crm-card);
    border-radius: 4px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: all .2s;

    .title {
        color: var(--color-crm-typo-primary);
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }

    &:hover {
        background-color: rgba(var(--rgb-crm-primary), .05);
        transform: scale(1.01)
    }

    &.active {
        background-color: var(--color-crm-primary);

        .title {
            color: var(--color-crm-badge-dark-text);
        }
    }

    &.disabled {
        cursor: not-allowed;
        filter: opacity(.4);

        &:hover {
            transform: none;
        }
    }
}

/* #endregion */

/* #region DASHBOARD HORIZONTAL TAB SELECTOR */

.dashboard-horizontal-tab-selector-outer {
    width: 240px;
    height: 50px;

    &.selected {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;

        .dashboard-horizontal-tab-selector-inner {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            span {
                font-weight: bold;
            }
        }
    }

    &:not(.selected) {
        padding: 4px 0px;
        transition: transform .2s ease-in-out;

        &:hover {
            transform: scale(1.02);
        }
    }

    .dashboard-horizontal-tab-selector-inner {
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        height: 100%;
        justify-content: center;

        span {
            color: var(--typo-primary);
            font-size: 16px;
            font-weight: 400;
        }
    }
}

/* #endregion */

/* #region MODAL ACCOUNT HISTORY */

#mdlAccountWidgets {
    --bs-modal-width: 80%;

    .modal-body {
        margin: 0px !important;
        background: var(--color-ui-background);
    }
}

/* #endregion */

/* #region COLLAPSABLE */

.widget-card-title[data-bs-toggle="collapse"] {
    cursor: pointer;
    position: relative;

    &:before {
        border: solid;
        border-width: 0 .1rem .1rem 0;
        content: " ";
        display: inline-block;
        padding: 2px;
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        transition: all .2s ease-out;
    }

    &:not(.collapsed):before {
        top: 0.5rem;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
}

.expandable-divider {
    height: 1px;
    background-color: var(--color-ui-stroke);
    margin: 16px 0px;
}

/* #endregion */

/* #region SUBSCRIPTION COLLAPSABLE */

.subscription-collapsable {
    align-items: center;
    background-color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px 24px;
    position: relative;
    transition: border-radius, border-bottom .35s ease;

    &:has(> a.collapsed) {
        border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
    }
}

.subscription-collapsable-icon {
    --svg-size: 48px;
    --svg-size-margin: -12px;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    padding: 8px;

    i.icon-svg {
        transition: background-color .1s;
        mask-image: url(/icons/default/chevron-up.svg?v=zQAzCyMYVuBKgnfxPTc8KG4vyHY);
        background-color: #fff;
    }

    &:hover {
        i.icon-svg {
            background-color: #fff;
        }
    }

    &.collapsed {
        background-color: #fff;

        i.icon-svg {
            mask-image: url(/icons/default/chevron-down.svg?v=sliXUu5NcXJ3D0RmpQr5KfPvgnQ);
            background-color: #fff;
        }

        &:hover {
            i.icon-svg {
                background-color: #fff;
            }
        }
    }
}

.subscription-collapsable-section {
    display: flex;
    flex-direction: column;
}


.subscription-collapsable-section-title {
    color: var(--typo-secondary);
    font-size: 14px;
    font-weight: 500;
}

.subscription-collapsable-section-value {
    color: var(--typo-primary);
    font-size: 16px;
    font-weight: 600;
    line-break: anywhere;
}


.subscription-collapsable-section-link {
    align-items: center;
    color: var(--typo-primary);
    display: flex;
    flex-direction: row;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .1s;

    i.icon-svg {
        background-color: var(--typo-primary);
        transition: background-color .1s;
    }

    &:hover {
        color: var(--color-typo-primary);

        i.icon-svg {
            background-color: var(--color-typo-primary);
        }
    }
}

.subscription-collapsable-under-section {
    border-top: 1px solid #000;
    background-color: #000;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 16px 24px;
}

.collapsed.disabled {
    opacity: 0.5;
    cursor: default;
}

/* #endregion */

/* #region SELECT2 */

.select2-dropdown {
    margin-top: 12px;
    border-radius: 2px !important;
    background-color: var(--color-input-fill) !important;
    border: 1px solid var(--color-input-stroke) !important;
    color: var(--color-input-text-default) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.select2-container .select2-selection--single {
    border-radius: 2px !important;
    background-color: var(--color-input-fill) !important;
    border: 1px solid var(--color-input-stroke) !important;
    color: var(--color-input-text-default) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    min-height: 40px;
}

.select2-container--default .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: transparent;
    color: var(--color-input-typing) !important;
}


.select2-container--default .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--default .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--color-ui-background);
    color: var(--color-input-typing);
}


.select2-container--default.select2-container--focus .select2-selection, .select2-container--default.select2-container--open .select2-selection {
    background-color: var(--color-input-fill) !important;
    border-color: var(--color-input-typing) !important;
    color: var(--color-input-text-active) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--rgb-input-typing), .25) !important;
}

.select2-container--default .select2-dropdown .select2-search .select2-search__field {
    border-radius: 2px !important;
    background-color: var(--color-input-fill) !important;
    border: 1px solid var(--color-input-stroke) !important;
    color: var(--color-input-text-default) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

    .select2-container--default .select2-dropdown .select2-search .select2-search__field:focus {
        border: 1px solid var(--color-input-typing) !important;
        box-shadow: 0 0 0 .25rem rgba(var(--rgb-input-typing), .25) !important;
    }

.select2-container--default .select2-dropdown .select2-search {
    padding: 0px;
    margin-bottom: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-input-text-default) !important;
}

/* #endregion */

/* #region SELECT2 MULTIPLE */

.select2-container--default .select2-selection--multiple {
    background-color: var(--color-input-fill) !important;
    border: 1px solid var(--color-input-stroke) !important;
}

span.select2-dropdown.select2-dropdown--below {
    width: fit-content !important;
    text-wrap-mode: nowrap;
}


li.select2-results__option.select2-results__option--selectable:not(:last-child) {
    margin-bottom: 4px;
}

li.select2-results__option.select2-results__option--selectable.select2-results__option--highlighted {
    border-radius: 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-input-typing) !important;
    color: var(--color-typo-paragraph-selected) !important;
    border: 1px solid var(--color-typo-paragraph-selected) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--color-typo-paragraph-selected) !important;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
        background-color: var(--color-input-typing) !important;
        color: var(--color-typo-paragraph-selected) !important;
    }


select[select2]:not([data-select2-id]) option {
    display: none !important;
}

.select2-selection.select2-selection--multiple {
    min-width: 100px !important;
    text-wrap: auto;
    align-items: center;
}

.select2-selection__choice {
    width: 98%;
}


/* #endregion */

/* #region CONSISTENCY CARD */

.consistency-card {
    flex-grow: 1;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    justify-content: space-around;
}

.consistency-card-title {
    text-align: center;
    color: var(--typo-primary);
    font-size: 20px;
    font-weight: 700;
}

.consistency-card-p1 {
    text-align: center;
    color: var(--typo-primary);
    font-size: 16px;
    font-weight: 400;
}

.consistency-card-p2 {
    text-align: center;
    color: var(--typo-secondary);
    font-size: 14px;
    font-weight: 600;
}

.consistency-card-p-big {
    text-align: center;
    color: var(--typo-primary);
    font-size: 18px;
    font-weight: 400;
}

.consistency-card-value {
    text-align: center;
    color: var(--typo-primary);
    font-size: 20px;
    font-weight: 700;
}

.consistency-card-grid {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.consistency-card-grid-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    flex-grow: 1;
    min-width: 150px;
}

    .consistency-card-grid-item.disabled, .consistency-card.disabled {
        filter: opacity(0.4);
    }

.consistency-card-grid-item-title {
    text-align: center;
    color: var(--typo-primary);
    font-size: 16px;
    font-weight: 700;
}

.consistency-badge {
    border-radius: 25px;
    padding: 1px 8px;
}

/* #endregion */

/* #region EMPTY STATE CARD */

.empty-state-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px 32px;
    width: fit-content;
    margin: auto;

    .icon-svg {
        margin: 0 auto;
    }
}

.empty-state-card-title {
    color: var(--typo-primary);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.empty-state-card-description {
    color: var(--typo-secondary);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

/* #endregion */

/* #region CHART */

.chart-container {
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
    overflow: auto !important;
}

/* #endregion */

/* #region DROPDOWN */

.dropdown-menu {
    border: 1px solid var(--color-ui-stroke);
    border-radius: 4px;
    background-color: var(--color-ui-panel);

    .dropdown-item {
        &:not(.btn) {
            &:hover, &:active, &:focus {
                background-color: var(--color-typo-primary);
                color: var(--color-ui-card);
            }
        }
    }
}

.dropdown-menu-right {
    right: 0;
    left: auto !important;
}

.dropdown-footer {
    border-top: 1px solid var(--color-ui-stroke);
    margin-bottom: 4px;
    margin-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}

/* #endregion */

/* #region GENERIC */

html:not([data-theme='light']) .btn-close {
    filter: brightness(0) invert(1);
}

#divDailySnapshots {
    height: 312px;
}

.account-modal {
    padding: 16px 8px;
}

.bg-ui-panel {
    background-color: var(--color-ui-panel);
}

.border-ui-stroke {
    border-color: var(--border-color);
}



hr {
    border-color: var(--color-ui-stroke);
    opacity: 0.5 !important;
}

.logo {
    max-height: 72px;
}

    .logo.logo-prop-img {
        object-fit: contain;
        content: var(--logo-img);
    }


.spinner-border-12px {
    --bs-spinner-width: 12px;
    --bs-spinner-height: 12px;
    --bs-spinner-border-width: 0.2em;
}

.text-ui-active-fill {
    color: var(--color-ui-active-fill) !important;
}

/* #endregion */

/* #region LINKS */

.link-icon-primary {
    align-items: center;
    color: var(--color-typo-primary);
    display: flex;
    flex-direction: row;
    font-size: 20px;
    text-decoration: none;

    i.icon-svg {
        --svg-size: 40px;
        background-color: var(--color-crm-primary);
    }
}

.link-primary {
    align-items: center;
    color: var(--color-typo-primary) !important;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 14px;
    transition: all .1s;
    width: fit-content;
    white-space: nowrap;
    text-decoration-color: var(--color-typo-primary) !important;


    &:hover {
        color: var(--color-typo-primary) !important;
        filter: brightness(.95);
        text-decoration-color: var(--color-typo-primary) !important;
    }
}

/* #endregion */

/* #region LICENSE COPY */

.license-copy-container {
    align-items: center;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    max-width: calc(100vw - (var(--outer-margin) * 2) - 32px);
    overflow: hidden;
    padding: 8px;

    .license {
        color: var(--typo-primary);
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .button {
        align-items: center;
        cursor: pointer;
        display: flex;

        .icon-svg {
            background-color: var(--color-crmv3-blue-primary);
        }
    }
}

/* #endregion */

/* #region IDENTITY */

.identity-form {
    display: flex;
    flex-direction: column;

    .btn {
        width: 100%;
    }
}

/* #endregion */

/* #region GRID */

.grid {
    display: grid;
    grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
}

.grid .g-col-1 {
    grid-column: auto/span 1
}

.grid .g-col-2 {
    grid-column: auto/span 2
}

.grid .g-col-3 {
    grid-column: auto/span 3
}

.grid .g-col-4 {
    grid-column: auto/span 4
}

.grid .g-col-5 {
    grid-column: auto/span 5
}

.grid .g-col-6 {
    grid-column: auto/span 6
}

.grid .g-col-7 {
    grid-column: auto/span 7
}

.grid .g-col-8 {
    grid-column: auto/span 8
}

.grid .g-col-9 {
    grid-column: auto/span 9
}

.grid .g-col-10 {
    grid-column: auto/span 10
}

.grid .g-col-11 {
    grid-column: auto/span 11
}

.grid .g-col-12 {
    grid-column: auto/span 12
}

.grid .g-start-1 {
    grid-column-start: 1
}

.grid .g-start-2 {
    grid-column-start: 2
}

.grid .g-start-3 {
    grid-column-start: 3
}

.grid .g-start-4 {
    grid-column-start: 4
}

.grid .g-start-5 {
    grid-column-start: 5
}

.grid .g-start-6 {
    grid-column-start: 6
}

.grid .g-start-7 {
    grid-column-start: 7
}

.grid .g-start-8 {
    grid-column-start: 8
}

.grid .g-start-9 {
    grid-column-start: 9
}

.grid .g-start-10 {
    grid-column-start: 10
}

.grid .g-start-11 {
    grid-column-start: 11
}

@media (min-width: 576px) {
    .grid .g-col-sm-1 {
        grid-column: auto/span 1
    }

    .grid .g-col-sm-2 {
        grid-column: auto/span 2
    }

    .grid .g-col-sm-3 {
        grid-column: auto/span 3
    }

    .grid .g-col-sm-4 {
        grid-column: auto/span 4
    }

    .grid .g-col-sm-5 {
        grid-column: auto/span 5
    }

    .grid .g-col-sm-6 {
        grid-column: auto/span 6
    }

    .grid .g-col-sm-7 {
        grid-column: auto/span 7
    }

    .grid .g-col-sm-8 {
        grid-column: auto/span 8
    }

    .grid .g-col-sm-9 {
        grid-column: auto/span 9
    }

    .grid .g-col-sm-10 {
        grid-column: auto/span 10
    }

    .grid .g-col-sm-11 {
        grid-column: auto/span 11
    }

    .grid .g-col-sm-12 {
        grid-column: auto/span 12
    }

    .grid .g-start-sm-1 {
        grid-column-start: 1
    }

    .grid .g-start-sm-2 {
        grid-column-start: 2
    }

    .grid .g-start-sm-3 {
        grid-column-start: 3
    }

    .grid .g-start-sm-4 {
        grid-column-start: 4
    }

    .grid .g-start-sm-5 {
        grid-column-start: 5
    }

    .grid .g-start-sm-6 {
        grid-column-start: 6
    }

    .grid .g-start-sm-7 {
        grid-column-start: 7
    }

    .grid .g-start-sm-8 {
        grid-column-start: 8
    }

    .grid .g-start-sm-9 {
        grid-column-start: 9
    }

    .grid .g-start-sm-10 {
        grid-column-start: 10
    }

    .grid .g-start-sm-11 {
        grid-column-start: 11
    }
}

@media (min-width: 768px) {
    .grid .g-col-md-1 {
        grid-column: auto/span 1
    }

    .grid .g-col-md-2 {
        grid-column: auto/span 2
    }

    .grid .g-col-md-3 {
        grid-column: auto/span 3
    }

    .grid .g-col-md-4 {
        grid-column: auto/span 4
    }

    .grid .g-col-md-5 {
        grid-column: auto/span 5
    }

    .grid .g-col-md-6 {
        grid-column: auto/span 6
    }

    .grid .g-col-md-7 {
        grid-column: auto/span 7
    }

    .grid .g-col-md-8 {
        grid-column: auto/span 8
    }

    .grid .g-col-md-9 {
        grid-column: auto/span 9
    }

    .grid .g-col-md-10 {
        grid-column: auto/span 10
    }

    .grid .g-col-md-11 {
        grid-column: auto/span 11
    }

    .grid .g-col-md-12 {
        grid-column: auto/span 12
    }

    .grid .g-start-md-1 {
        grid-column-start: 1
    }

    .grid .g-start-md-2 {
        grid-column-start: 2
    }

    .grid .g-start-md-3 {
        grid-column-start: 3
    }

    .grid .g-start-md-4 {
        grid-column-start: 4
    }

    .grid .g-start-md-5 {
        grid-column-start: 5
    }

    .grid .g-start-md-6 {
        grid-column-start: 6
    }

    .grid .g-start-md-7 {
        grid-column-start: 7
    }

    .grid .g-start-md-8 {
        grid-column-start: 8
    }

    .grid .g-start-md-9 {
        grid-column-start: 9
    }

    .grid .g-start-md-10 {
        grid-column-start: 10
    }

    .grid .g-start-md-11 {
        grid-column-start: 11
    }
}

@media (min-width: 992px) {
    .grid .g-col-lg-1 {
        grid-column: auto/span 1
    }

    .grid .g-col-lg-2 {
        grid-column: auto/span 2
    }

    .grid .g-col-lg-3 {
        grid-column: auto/span 3
    }

    .grid .g-col-lg-4 {
        grid-column: auto/span 4
    }

    .grid .g-col-lg-5 {
        grid-column: auto/span 5
    }

    .grid .g-col-lg-6 {
        grid-column: auto/span 6
    }

    .grid .g-col-lg-7 {
        grid-column: auto/span 7
    }

    .grid .g-col-lg-8 {
        grid-column: auto/span 8
    }

    .grid .g-col-lg-9 {
        grid-column: auto/span 9
    }

    .grid .g-col-lg-10 {
        grid-column: auto/span 10
    }

    .grid .g-col-lg-11 {
        grid-column: auto/span 11
    }

    .grid .g-col-lg-12 {
        grid-column: auto/span 12
    }

    .grid .g-start-lg-1 {
        grid-column-start: 1
    }

    .grid .g-start-lg-2 {
        grid-column-start: 2
    }

    .grid .g-start-lg-3 {
        grid-column-start: 3
    }

    .grid .g-start-lg-4 {
        grid-column-start: 4
    }

    .grid .g-start-lg-5 {
        grid-column-start: 5
    }

    .grid .g-start-lg-6 {
        grid-column-start: 6
    }

    .grid .g-start-lg-7 {
        grid-column-start: 7
    }

    .grid .g-start-lg-8 {
        grid-column-start: 8
    }

    .grid .g-start-lg-9 {
        grid-column-start: 9
    }

    .grid .g-start-lg-10 {
        grid-column-start: 10
    }

    .grid .g-start-lg-11 {
        grid-column-start: 11
    }
}

@media (min-width: 1200px) {
    .grid .g-col-xl-1 {
        grid-column: auto/span 1
    }

    .grid .g-col-xl-2 {
        grid-column: auto/span 2
    }

    .grid .g-col-xl-3 {
        grid-column: auto/span 3
    }

    .grid .g-col-xl-4 {
        grid-column: auto/span 4
    }

    .grid .g-col-xl-5 {
        grid-column: auto/span 5
    }

    .grid .g-col-xl-6 {
        grid-column: auto/span 6
    }

    .grid .g-col-xl-7 {
        grid-column: auto/span 7
    }

    .grid .g-col-xl-8 {
        grid-column: auto/span 8
    }

    .grid .g-col-xl-9 {
        grid-column: auto/span 9
    }

    .grid .g-col-xl-10 {
        grid-column: auto/span 10
    }

    .grid .g-col-xl-11 {
        grid-column: auto/span 11
    }

    .grid .g-col-xl-12 {
        grid-column: auto/span 12
    }

    .grid .g-start-xl-1 {
        grid-column-start: 1
    }

    .grid .g-start-xl-2 {
        grid-column-start: 2
    }

    .grid .g-start-xl-3 {
        grid-column-start: 3
    }

    .grid .g-start-xl-4 {
        grid-column-start: 4
    }

    .grid .g-start-xl-5 {
        grid-column-start: 5
    }

    .grid .g-start-xl-6 {
        grid-column-start: 6
    }

    .grid .g-start-xl-7 {
        grid-column-start: 7
    }

    .grid .g-start-xl-8 {
        grid-column-start: 8
    }

    .grid .g-start-xl-9 {
        grid-column-start: 9
    }

    .grid .g-start-xl-10 {
        grid-column-start: 10
    }

    .grid .g-start-xl-11 {
        grid-column-start: 11
    }
}

@media (min-width: 1400px) {
    .grid .g-col-xxl-1 {
        grid-column: auto/span 1
    }

    .grid .g-col-xxl-2 {
        grid-column: auto/span 2
    }

    .grid .g-col-xxl-3 {
        grid-column: auto/span 3
    }

    .grid .g-col-xxl-4 {
        grid-column: auto/span 4
    }

    .grid .g-col-xxl-5 {
        grid-column: auto/span 5
    }

    .grid .g-col-xxl-6 {
        grid-column: auto/span 6
    }

    .grid .g-col-xxl-7 {
        grid-column: auto/span 7
    }

    .grid .g-col-xxl-8 {
        grid-column: auto/span 8
    }

    .grid .g-col-xxl-9 {
        grid-column: auto/span 9
    }

    .grid .g-col-xxl-10 {
        grid-column: auto/span 10
    }

    .grid .g-col-xxl-11 {
        grid-column: auto/span 11
    }

    .grid .g-col-xxl-12 {
        grid-column: auto/span 12
    }

    .grid .g-start-xxl-1 {
        grid-column-start: 1
    }

    .grid .g-start-xxl-2 {
        grid-column-start: 2
    }

    .grid .g-start-xxl-3 {
        grid-column-start: 3
    }

    .grid .g-start-xxl-4 {
        grid-column-start: 4
    }

    .grid .g-start-xxl-5 {
        grid-column-start: 5
    }

    .grid .g-start-xxl-6 {
        grid-column-start: 6
    }

    .grid .g-start-xxl-7 {
        grid-column-start: 7
    }

    .grid .g-start-xxl-8 {
        grid-column-start: 8
    }

    .grid .g-start-xxl-9 {
        grid-column-start: 9
    }

    .grid .g-start-xxl-10 {
        grid-column-start: 10
    }

    .grid .g-start-xxl-11 {
        grid-column-start: 11
    }
}


/* #endregion */