:root {
    --color-background: #7351fb40;
    --color-line: #7351FB;
    --color-logo: #0b0132ff;
    --color-tabs: #7351fb40;

    --color-brand-primary-strong: #7351fbff;
    --color-brand-primary-subtle: #7351fb40;
    --color-brand-accent-strong: #0b0132ff;
    --color-brand-accent-subtle: #0b013240;
    --color-brand-neutral-strong: #737373ff;
    --color-brand-neutral-subtle: #73737340;
    --color-interaction-primary-strong-default: #7351fbff;
    --color-interaction-primary-strong-highlight: #5f38faff;
    --color-interaction-primary-strong-pressed: #4b1ff9ff;
    --color-interaction-primary-subtle-default: #7351fb40;
    --color-interaction-primary-subtle-highlight: #7351fb80;
    --color-interaction-primary-subtle-pressed: #7351fbbf;
    --color-interaction-primary-transparent-default: #00000000;
    --color-interaction-primary-transparent-highlight: #7351fb1a;
    --color-interaction-primary-transparent-pressed: #7351fb40;
    --color-interaction-neutral-strong-default: #737373ff;
    --color-interaction-neutral-strong-highlight: #666666ff;
    --color-interaction-neutral-strong-pressed: #595959ff;
    --color-interaction-neutral-subtle-default: #73737340;
    --color-interaction-neutral-subtle-highlight: #73737380;
    --color-interaction-neutral-subtle-pressed: #737373bf;
    --color-interaction-neutral-transparent-default: #00000000;
    --color-interaction-neutral-transparent-highlight: #7373731a;
    --color-interaction-neutral-transparent-pressed: #73737340;
    --color-interaction-danger-strong-default: #cc0070ff;
    --color-interaction-danger-strong-highlight: #b30062ff;
    --color-interaction-danger-strong-pressed: #990054ff;
    --color-layout-page-default: #f2f2f2ff;
    --color-layout-page-overlay: #00000040;
    --color-layout-divider-strong: #737373ff;
    --color-layout-divider-subtle: #73737340;
    --color-layout-focus-border: #0062ffff;
    --color-layout-background-default: #ffffffff;
    --color-layout-background-primary: #ebe6feff;
    --color-layout-background-neutral: #e6e6e6ff;
    --color-layout-background-info: #cce0ffff;
    --color-layout-background-success: #e8fdf6ff;
    --color-layout-background-warning: #fff1ccff;
    --color-layout-background-critical: #ffcce8ff;
    --color-shadow-elevated-default: #0000001a;
    --color-shadow-elevated-hover: #00000040;
    --color-support-info-strong: #0062ffff;
    --color-support-info-subtle: #0062ff40;
    --color-support-success-strong: #0b7551ff;
    --color-support-success-subtle: #0b755140;
    --color-support-warning-default: #ffbb00ff;
    --color-support-warning-subtle: #ffbb0040;
    --color-support-critical-strong: #cc0070ff;
    --color-support-critical-subtle: #cc007040;
    --color-text-primary: #0b0132ff;
    --color-text-on-strong: #ffffffff;
    --color-text-secondary: #0b0132bf;
    --color-text-critical: #b30062ff;
}

[data-bs-theme="dark"] {
    --color-background: #7351FB;
    --color-line: #7351fb40;
    --color-logo: #0b0132ff;
    --color-tabs: #7351FB;

    --color-brand-primary-strong: #876afbff;
    --color-brand-primary-subtle: #876afb40;
    --color-brand-accent-strong: #ebe6feff;
    --color-brand-accent-subtle: #ebe6fe40;
    --color-brand-neutral-strong: #808080ff;
    --color-brand-neutral-subtle: #80808040;
    --color-interaction-primary-strong-default: #876afbff;
    --color-interaction-primary-strong-highlight: #9b83fcff;
    --color-interaction-primary-strong-pressed: #af9cfcff;
    --color-interaction-primary-subtle-default: #876afb40;
    --color-interaction-primary-subtle-highlight: #876afb80;
    --color-interaction-primary-subtle-pressed: #876afbbf;
    --color-interaction-primary-transparent-default: #00000000;
    --color-interaction-primary-transparent-highlight: #876afb40;
    --color-interaction-primary-transparent-pressed: #876afb80;
    --color-interaction-neutral-strong-default: #808080ff;
    --color-interaction-neutral-strong-highlight: #8c8c8cff;
    --color-interaction-neutral-strong-pressed: #999999ff;
    --color-interaction-neutral-subtle-default: #80808040;
    --color-interaction-neutral-subtle-highlight: #80808080;
    --color-interaction-neutral-subtle-pressed: #808080bf;
    --color-interaction-neutral-transparent-default: #00000000;
    --color-interaction-neutral-transparent-highlight: #80808040;
    --color-interaction-neutral-transparent-pressed: #80808080;
    --color-interaction-danger-strong-default: #ff008cff;
    --color-interaction-danger-strong-highlight: #ff1a98ff;
    --color-interaction-danger-strong-pressed: #ff33a3ff;
    --color-layout-page-default: #0b0132ff;
    --color-layout-page-overlay: #ffffff40;
    --color-layout-divider-strong: #737373ff;
    --color-layout-divider-subtle: #73737380;
    --color-layout-focus-border: #0058e6ff;
    --color-layout-background-default: #10024bff;
    --color-layout-background-primary: #1b037cff;
    --color-layout-background-neutral: #262626ff;
    --color-layout-background-info: #002766ff;
    --color-layout-background-success: #042f21ff;
    --color-layout-background-warning: #4d3800ff;
    --color-layout-background-critical: #660038ff;
    --color-shadow-elevated-default: #00000080;
    --color-shadow-elevated-hover: #000000bf;
    --color-support-info-strong: #3381ffff;
    --color-support-info-subtle: #3381ff40;
    --color-support-success-strong: #0fa372ff;
    --color-support-success-subtle: #0fa37240;
    --color-support-warning-default: #ffbb00ff;
    --color-support-warning-subtle: #ffbb0040;
    --color-support-critical-strong: #ff008cff;
    --color-support-critical-subtle: #ff008c80;
    --color-text-primary: #ffffffff;
    --color-text-on-strong: #0b0132ff;
    --color-text-secondary: #ffffffbf;
    --color-text-critical: #ff008cff;
}

.navbar {
    background-color: #7351fb40 !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) #7351fbff !important;
}

[data-bs-theme="dark"] .navbar {
    background-color: #7351fbff !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) #7351fb40 !important;
}

.footer {
    background-color: var(--color-background) !important;
    border-top: 1px solid var(--color-line) !important;
}

[data-bs-theme="dark"] .footer {
    background-color: #7351fbff !important;
}

.bg-default-color {
    background-color: #7351fb40 !important;
}

[data-bs-theme="dark"] .bg-default-color {
    background-color: #7351fbff !important;
}

.sikt-card {
    background-color: #7351fb40 !important;
    border: 1px solid #7351fbff;
}

[data-bs-theme="dark"] .sikt-card {
    background-color: #7351fbff !important;
    border: 1px solid #7351fb40;
}

.table-color {
    --bs-table-color: #000;
    --bs-table-bg: #7351fb40;
    /*--bs-table-border-color: rgb(198.4, 199.2, 200);*/
    --bs-table-striped-bg: rgb(235.6, 236.55, 237.5);
    --bs-table-striped-color: #000;
    --bs-table-active-bg: rgb(223.2, 224.1, 225);
    --bs-table-active-color: #000;
    --bs-table-hover-bg: rgb(229.4, 230.325, 231.25);
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-bs-theme="dark"] .table-color {
    --bs-table-color: #fff;
    --bs-table-bg: #7351fbff;
    /*--bs-table-border-color: rgb(198.4, 199.2, 200);*/
    --bs-table-striped-bg: rgb(235.6, 236.55, 237.5);
    --bs-table-striped-color: #000;
    --bs-table-active-bg: rgb(223.2, 224.1, 225);
    --bs-table-active-color: #000;
    --bs-table-hover-bg: rgb(229.4, 230.325, 231.25);
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background-color: #7351fb40;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background-color: #7351fbff;
}

/* ==== UTILITY ======================================================================================================== */

.oneline {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}


.card-body-icon {
    position: absolute;
    z-index: 0;
    top: -25px;
    right: 10px;
    font-size: 5rem;
    height: 40px;
}

/* ==== LOGO =========================================================================================================== */

.logo-icon {
    display: flex;
    align-items: center
}

.logo-lg {
    margin: 3px 0 3px 7px
}

@media (min-width: 834px) {
    .logo-lg {
        margin-left: 2px 0 2px 4px
    }
}

@media (min-width: 1440px) {
    .logo-lg {
        margin: 3px 0 3px 9px
    }
}

.logo-sm {
    margin: 2px 0 2px 3px
}

@media (min-width: 834px) {
    .logo-sm {
        margin-left: 3px
    }
}

@media (min-width: 1440px) {
    .logo-sm {
        margin-left: 5px
    }
}

.logo-icon .square {
    transform: rotate(45deg);
    position: relative;
    overflow: hidden;
    transition: all .25s ease-in-out
}

.logo-icon.logo-lg .square {
    width: 52px;
    height: 52px;
    border-radius: 10px
}

.logo-icon.logo-sm .square {
    width: 17px;
    height: 17px;
    border-radius: 3px
}

.logo-icon.logo-dark .square, .logo-icon.logo-light .square:after {
    background-color: #0f0035
}

.logo-icon.logo-dark .square:after {
    background-color: #DCD3FE !important;
}

[data-bs-theme="dark"] .logo-icon.logo-dark .square:after {
    background-color: #7351FB !important;
}

.logo-icon.logo-light .circle {
    background-color: #7351fbff !important;
}

.logo-icon.logo-dark .circle {
    background-color: #0f0035
}

.logo-icon .square:after {
    position: absolute;
    content: "";
    border-radius: 100%;
    transition: all .25s ease-in-out
}

.logo-icon.logo-lg .square:after {
    top: -30.3px;
    left: 22.3px;
    width: 60px;
    height: 60px
}

.logo-icon.logo-sm .square:after {
    top: -11.5px;
    left: 7.5px;
    width: 21px;
    height: 21px
}

.logo-icon .circle {
    border-radius: 100%
}

.logo-icon.logo-lg .circle {
    width: 60px;
    height: 60px;
    margin-left: -18px
}

.logo-icon.logo-sm .circle {
    width: 20px;
    height: 20px;
    margin-left: -6px
}

.logo:hover .square {
    transform: rotate(37deg)
}

.logo:hover .logo-lg .square:after {
    top: -26px;
    left: 26px
}

.logo:hover .logo-sm .square:after {
    top: -10.5px;
    left: 8.5px
}

@media (min-width: 834px) {
    .logo-icon.logo-lg .square {
        width: 35px;
        height: 35px;
        border-radius: 8px
    }

    .logo-icon.logo-lg .square:after {
        top: -18.3px;
        left: 14.3px;
        width: 40px;
        height: 40px
    }

    .logo-icon.logo-lg .circle {
        width: 40px;
        height: 40px;
        margin-left: -14px
    }

    .logo:hover .logo-lg .square:after {
        top: -16px;
        left: 16px
    }
}

@media (min-width: 1440px) {
    .logo-icon.logo-lg .square {
        width: 44px;
        height: 44px;
        border-radius: 7px
    }

    .logo-icon.logo-sm .square {
        width: 23px;
        height: 23px;
        border-radius: 4px
    }

    .logo-icon.logo-lg .square:after {
        top: -28.5px;
        left: 20px;
        width: 53px;
        height: 53px
    }

    .logo-icon.logo-sm .square:after {
        top: -14px;
        left: 10px;
        width: 27px;
        height: 27px
    }

    .logo-icon.logo-lg .circle {
        width: 53px;
        height: 53px;
        margin-left: -14px
    }

    .logo-icon.logo-sm .circle {
        width: 27px;
        height: 27px;
        margin-left: -8px
    }

    .logo:hover .logo-lg .square:after {
        top: -25px;
        left: 23px
    }

    .logo:hover .logo-sm .square:after {
        top: -12.5px;
        left: 11.5px
    }
}

@media (min-width: 1920px) {
    .logo-icon.logo-lg .square {
        width: 61px;
        height: 61px;
        border-radius: 12px
    }

    .logo-icon.logo-sm .square {
        width: 27px;
        height: 27px;
        border-radius: 4px
    }

    .logo-icon.logo-lg .square:after {
        top: -36px;
        left: 26px;
        width: 72px;
        height: 72px
    }

    .logo-icon.logo-sm .square:after {
        top: -17px;
        left: 12px;
        width: 32px;
        height: 32px
    }

    .logo-icon.logo-lg .circle {
        width: 72px;
        height: 72px;
        margin-left: -22px
    }

    .logo-icon.logo-sm .circle {
        width: 32px;
        height: 32px;
        margin-left: -9px
    }

    .logo:hover .logo-lg .square:after {
        top: -31.5px;
        left: 30px
    }

    .logo:hover .logo-sm .square:after {
        top: -15px;
        left: 14px
    }
}

/* ==== TABLE ========================================================================================================= */

.table-color {
    --bs-table-color: #000;
    --bs-table-bg: #7351fb40;
    /*--bs-table-border-color: rgb(198.4, 199.2, 200);*/
    --bs-table-striped-bg: rgb(235.6, 236.55, 237.5);
    --bs-table-striped-color: #000;
    --bs-table-active-bg: rgb(223.2, 224.1, 225);
    --bs-table-active-color: #000;
    --bs-table-hover-bg: rgb(229.4, 230.325, 231.25);
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-bs-theme="dark"] .table-color {
    --bs-table-color: #fff;
    --bs-table-bg: #7351fbff;
    /*--bs-table-border-color: rgb(198.4, 199.2, 200);*/
    --bs-table-striped-bg: rgb(235.6, 236.55, 237.5);
    --bs-table-striped-color: #000;
    --bs-table-active-bg: rgb(223.2, 224.1, 225);
    --bs-table-active-color: #000;
    --bs-table-hover-bg: rgb(229.4, 230.325, 231.25);
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    .responsive-table {
        font-size: 0.875rem;
    }
    .responsive-table th,
    .responsive-table td {
        padding: 0.3rem;
    }
}
@media (min-width: 768px) {
    .responsive-table th,
    .responsive-table td {
        padding: 1rem;
    }
}

/* ==== TABLE ========================================================================================================= */