/* Variables - Colors should reflect in the Theme.cs file*/
:root {
    /* Weights */
    --tss-font-weight-regular: 400;
    --tss-font-weight-semibold: 600;
    --tss-font-weight-bold: 700;
    /* Sizes */
    --tss-font-size-mega: 42px;
    --tss-font-size-xxlarge: 32px;
    --tss-font-size-xlarge: 28px;
    --tss-font-size-large: 24px;
    --tss-font-size-mediumplus: 20px;
    --tss-font-size-medium: 18px;
    --tss-font-size-smallplus: 16px;
    --tss-font-size-small: 13px;
    --tss-font-size-xsmall: 11px;
    --tss-font-size-tiny: 10px;
    /* Colors - Colors should reflect in the Theme.cs file*/

    --tss-default-background-color-root: 255, 255, 255;
    --tss-default-foreground-color-root: 50, 49, 48;
    --tss-secondary-background-color-root: 249, 250, 251;
    --tss-secondary-foreground-color-root: 101, 103, 107;
    --tss-sidebar-background-color-root: 249, 250, 251;
    --tss-disabled-background-color-root: 243, 242, 241;
    --tss-disabled-foreground-color-root: 161, 159, 157;
    --tss-default-border-color-root: 224, 230, 235;
    --tss-dark-border-color-root: 138, 136, 134;
    --tss-default-separator-color-root: 243, 242, 241;
    --tss-invalid-border-color-root: 164, 38, 44;
    --tss-default-background-hover-color-root: 225, 224, 224;
    --tss-default-foreground-hover-color-root: 32, 31, 30;
    --tss-default-background-active-color-root: 235, 234, 234;
    --tss-default-foreground-active-color-root: 32, 31, 30;
    --tss-progress-background-color-root: 237, 235, 233;
    --tss-link-color-root: 36, 142, 250;
    --tss-tooltip-background-color-root: 51, 51, 51;
    --tss-tooltip-foreground-color-root: 249, 250, 251;
    --tss-primary-background-color-root: 36, 142, 250;
    --tss-primary-foreground-color-root: 255, 255, 255;
    --tss-primary-border-color-root: 16, 110, 190;
    --tss-primary-background-hover-color-root: 16, 110, 190;
    --tss-primary-foreground-hover-color-root: 255, 255, 255;
    --tss-primary-background-active-color-root: 0, 90, 158;
    --tss-primary-foreground-active-color-root: 255, 255, 255;
    --tss-warning-background-color-root: 220, 145, 53;
    --tss-warning-foreground-color-root: 255, 255, 255;
    --tss-danger-background-color-root: 220, 53, 69;
    --tss-danger-foreground-color-root: 255, 255, 255;
    --tss-danger-border-color-root: 220, 53, 69;
    --tss-danger-background-hover-color-root: 200, 35, 51;
    --tss-danger-foreground-hover-color-root: 255, 255, 255;
    --tss-danger-background-active-color-root: 189, 33, 48;
    --tss-danger-foreground-active-color-root: 255, 255, 255;
    --tss-success-background-color-root: 40, 167, 69;
    --tss-success-foreground-color-root: 255, 255, 255;
    --tss-success-border-color-root: 40, 167, 69;
    --tss-success-background-hover-color-root: 33, 136, 56;
    --tss-success-foreground-hover-color-root: 255, 255, 255;
    --tss-success-background-active-color-root: 30, 126, 52;
    --tss-success-foreground-active-color-root: 255, 255, 255;
    --tss-slider-color-root: 200, 198, 196;
    --tss-slider-active-color-root: 222, 236, 249;
    --tss-slider-disabled-color-root: 243, 242, 241;
    --tss-primary-shadow-color-root: 0, 120, 212;
    --tss-default-background-color: rgb(var(--tss-default-background-color-root));
    --tss-default-foreground-color: rgb(var(--tss-default-foreground-color-root));
    --tss-secondary-background-color: rgb(var(--tss-secondary-background-color-root));
    --tss-secondary-foreground-color: rgb(var(--tss-secondary-foreground-color-root));
    --tss-sidebar-background-color: rgb(var(--tss-sidebar-background-color-root));
    --tss-disabled-background-color: rgb(var(--tss-disabled-background-color-root));
    --tss-disabled-foreground-color: rgb(var(--tss-disabled-foreground-color-root));
    --tss-default-border-color: rgb(var(--tss-default-border-color-root));
    --tss-dark-border-color: rgb(var(--tss-dark-border-color-root));
    --tss-default-separator-color: rgb(var(--tss-default-separator-color-root));
    --tss-invalid-border-color: rgb(var(--tss-invalid-border-color-root));
    --tss-default-background-hover-color: rgb(var(--tss-default-background-hover-color-root));
    --tss-default-foreground-hover-color: rgb(var(--tss-default-foreground-hover-color-root));
    --tss-default-background-active-color: rgb(var(--tss-default-background-active-color-root));
    --tss-default-foreground-active-color: rgb(var(--tss-default-foreground-active-color-root));
    --tss-progress-background-color: rgb(var(--tss-progress-background-color-root));
    --tss-link-color: rgb(var(--tss-link-color-root));
    --tss-tooltip-background-color: rgb(var(--tss-tooltip-background-color-root));
    --tss-tooltip-foreground-color: rgb(var(--tss-tooltip-foreground-color-root));
    --tss-primary-background-color: rgb(var(--tss-primary-background-color-root));
    --tss-primary-foreground-color: rgb(var(--tss-primary-foreground-color-root));
    --tss-primary-border-color: rgb(var(--tss-primary-border-color-root));
    --tss-primary-background-hover-color: rgb(var(--tss-primary-background-hover-color-root));
    --tss-primary-foreground-hover-color: rgb(var(--tss-primary-foreground-hover-color-root));
    --tss-primary-background-active-color: rgb(var(--tss-primary-background-active-color-root));
    --tss-primary-foreground-active-color: rgb(var(--tss-primary-foreground-active-color-root));
    --tss-primary-background-color-transparent: rgba(var(--tss-primary-background-color-root), 0.2);
    --tss-warning-background-color: rgb(var(--tss-warning-background-color-root));
    --tss-warning-foreground-color: rgb(var(--tss-warning-foreground-color-root));
    --tss-danger-background-color: rgb(var(--tss-danger-background-color-root));
    --tss-danger-foreground-color: rgb(var(--tss-danger-foreground-color-root));
    --tss-danger-border-color: rgb(var(--tss-danger-border-color-root));
    --tss-danger-background-hover-color: rgb(var(--tss-danger-background-hover-color-root));
    --tss-danger-foreground-hover-color: rgb(var(--tss-danger-foreground-hover-color-root));
    --tss-danger-background-active-color: rgb(var(--tss-danger-background-active-color-root));
    --tss-danger-foreground-active-color: rgb(var(--tss-danger-foreground-active-color-root));
    --tss-success-background-color: rgb(var(--tss-success-background-color-root));
    --tss-success-foreground-color: rgb(var(--tss-success-foreground-color-root));
    --tss-success-border-color: rgb(var(--tss-success-border-color-root));
    --tss-success-background-hover-color: rgb(var(--tss-success-background-hover-color-root));
    --tss-success-foreground-hover-color: rgb(var(--tss-success-foreground-hover-color-root));
    --tss-success-background-active-color: rgb(var(--tss-success-background-active-color-root));
    --tss-success-foreground-active-color: rgb(var(--tss-success-foreground-active-color-root));
    --tss-slider-color: rgb(var(--tss-slider-color-root));
    --tss-slider-active-color: rgb(var(--tss-slider-active-color-root));
    --tss-slider-disabled-color: rgb(var(--tss-slider-disabled-color-root));
    --tss-primary-shadow: 0 1.6px 3.6px 0 rgba(var(--tss-primary-shadow-color-root), 0.132), 0 0.3px 0.9px 0 rgba(var(--tss-primary-shadow-color-root), 0.108);
    --tss-overlay-light: rgba(255, 255, 255, 0.4);
    --tss-overlay-dark: rgba(0, 0, 0, 0.4);
    --tss-shadow-color-from: rgba(0, 0, 0, 0.132);
    --tss-shadow-color-to: rgba(0, 0, 0, 0.108);
    --tss-box-shadow-darker: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.3), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.45);
    --tss-box-shadow: 0 1.6px 3.6px 0 var(--tss-shadow-color-from), 0 0.3px 0.9px 0 var(--tss-shadow-color-to);
    --tss-card-shadow: 0 1.6px 3.6px 0 var(--tss-shadow-color-from), 0 0.3px 0.9px 0 var(--tss-shadow-color-to);
    --tss-toast-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.45);
    --tss-scrollbar-track-color: rgba(50, 49, 48, 0.10);
    --tss-scrollbar-track-hidden-color: rgba(50, 49, 48, 0.03);
    --tss-scrollbar-thumb-color: rgba(50, 49, 48, 0.15);
    --tss-scrollbar-thumb-hidden-color: rgba(50, 49, 48, 0.04);
    --tss-simplebar-thumb-color: rgba(50, 49, 48, 0.32);
}

.tss-dark-mode {
    /* Colors */
    --tss-default-background-color-root: 34, 34, 34;
    --tss-default-foreground-color-root: 217, 217, 217;
    --tss-secondary-background-color-root: 51, 51, 51;
    --tss-secondary-foreground-color-root: 217, 217, 217;
    --tss-sidebar-background-color-root: 51, 51, 51;
    --tss-disabled-background-color-root: 0, 0, 0;
    --tss-disabled-foreground-color-root: 173, 181, 189;
    --tss-default-border-color-root: 51, 51, 51;
    --tss-dark-border-color-root: 68, 68, 68;
    --tss-default-separator-color-root: 51, 51, 51;
    --tss-invalid-border-color-root: 231, 76, 60;
    --tss-default-background-hover-color-root: 40, 40, 40;
    --tss-default-foreground-hover-color-root: 255, 255, 255;
    --tss-default-background-active-color-root: 68, 68, 68;
    --tss-default-foreground-active-color-root: 255, 255, 255;
    --tss-progress-background-color-root: 68, 68, 68;
    --tss-link-color-root: 85, 179, 251;
    --tss-tooltip-background-color-root: 101, 103, 107;
    --tss-tooltip-foreground-color-root: 249, 250, 251;
    --tss-primary-background-color-root: 85, 179, 251;
    --tss-primary-foreground-color-root: 255, 255, 255;
    --tss-primary-border-color-root: 16, 110, 190;
    --tss-primary-background-hover-color-root: 16, 110, 190;
    --tss-primary-foreground-hover-color-root: 255, 255, 255;
    --tss-primary-background-active-color-root: 0, 90, 158;
    --tss-primary-foreground-active-color-root: 255, 255, 255;
    --tss-warning-background-color-root: 255, 174, 81;
    --tss-warning-foreground-color-root: 255, 255, 255;
    --tss-danger-background-color-root: 255, 81, 98;
    --tss-danger-foreground-color-root: 255, 255, 255;
    --tss-danger-border-color-root: 255, 81, 98;
    --tss-danger-background-hover-color-root: 200, 35, 51;
    --tss-danger-foreground-hover-color-root: 255, 255, 255;
    --tss-danger-background-active-color-root: 189, 33, 48;
    --tss-danger-foreground-active-color-root: 255, 255, 255;
    --tss-success-background-color-root: 30, 136, 56;
    --tss-success-foreground-color-root: 255, 255, 255;
    --tss-success-border-color-root: 30, 136, 56;
    --tss-success-background-hover-color-root: 33, 136, 56;
    --tss-success-foreground-hover-color-root: 255, 255, 255;
    --tss-success-background-active-color-root: 30, 126, 52;
    --tss-success-foreground-active-color-root: 255, 255, 255;
    --tss-slider-color-root: 200, 198, 196;
    --tss-slider-active-color-root: 222, 236, 249;
    --tss-slider-disabled-color-root: 243, 242, 241;
    --tss-default-background-color: rgb(var(--tss-default-background-color-root));
    --tss-default-foreground-color: rgb(var(--tss-default-foreground-color-root));
    --tss-secondary-background-color: rgb(var(--tss-secondary-background-color-root));
    --tss-secondary-foreground-color: rgb(var(--tss-secondary-foreground-color-root));
    --tss-sidebar-background-color: rgb(var(--tss-sidebar-background-color-root));
    --tss-disabled-background-color: rgb(var(--tss-disabled-background-color-root));
    --tss-disabled-foreground-color: rgb(var(--tss-disabled-foreground-color-root));
    --tss-default-border-color: rgb(var(--tss-default-border-color-root));
    --tss-dark-border-color: rgb(var(--tss-dark-border-color-root));
    --tss-default-separator-color: rgb(var(--tss-default-separator-color-root));
    --tss-invalid-border-color: rgb(var(--tss-invalid-border-color-root));
    --tss-default-background-hover-color: rgb(var(--tss-default-background-hover-color-root));
    --tss-default-foreground-hover-color: rgb(var(--tss-default-foreground-hover-color-root));
    --tss-default-background-active-color: rgb(var(--tss-default-background-active-color-root));
    --tss-default-foreground-active-color: rgb(var(--tss-default-foreground-active-color-root));
    --tss-progress-background-color: rgb(var(--tss-progress-background-color-root));
    --tss-link-color: rgb(var(--tss-link-color-root));
    --tss-tooltip-background-color: rgb(var(--tss-tooltip-background-color-root));
    --tss-tooltip-foreground-color: rgb(var(--tss-tooltip-foreground-color-root));
    --tss-primary-background-color: rgb(var(--tss-primary-background-color-root));
    --tss-primary-foreground-color: rgb(var(--tss-primary-foreground-color-root));
    --tss-primary-border-color: rgb(var(--tss-primary-border-color-root));
    --tss-primary-background-hover-color: rgb(var(--tss-primary-background-hover-color-root));
    --tss-primary-foreground-hover-color: rgb(var(--tss-primary-foreground-hover-color-root));
    --tss-primary-background-active-color: rgb(var(--tss-primary-background-active-color-root));
    --tss-primary-foreground-active-color: rgb(var(--tss-primary-foreground-active-color-root));
    --tss-primary-background-color-transparent: rgba(var(--tss-primary-background-color-root), 0.2);
    --tss-warning-background-color: rgb(var(--tss-warning-background-color-root));
    --tss-warning-foreground-color: rgb(var(--tss-warning-foreground-color-root));
    --tss-danger-background-color: rgb(var(--tss-danger-background-color-root));
    --tss-danger-foreground-color: rgb(var(--tss-danger-foreground-color-root));
    --tss-danger-border-color: rgb(var(--tss-danger-border-color-root));
    --tss-danger-background-hover-color: rgb(var(--tss-danger-background-hover-color-root));
    --tss-danger-foreground-hover-color: rgb(var(--tss-danger-foreground-hover-color-root));
    --tss-danger-background-active-color: rgb(var(--tss-danger-background-active-color-root));
    --tss-danger-foreground-active-color: rgb(var(--tss-danger-foreground-active-color-root));
    --tss-success-background-color: rgb(var(--tss-success-background-color-root));
    --tss-success-foreground-color: rgb(var(--tss-success-foreground-color-root));
    --tss-success-border-color: rgb(var(--tss-success-border-color-root));
    --tss-success-background-hover-color: rgb(var(--tss-success-background-hover-color-root));
    --tss-success-foreground-hover-color: rgb(var(--tss-success-foreground-hover-color-root));
    --tss-success-background-active-color: rgb(var(--tss-success-background-active-color-root));
    --tss-success-foreground-active-color: rgb(var(--tss-success-foreground-active-color-root));
    --tss-slider-color: rgb(var(--tss-slider-color-root));
    --tss-slider-active-color: rgb(var(--tss-slider-active-color-root));
    --tss-slider-disabled-color: rgb(var(--tss-slider-disabled-color-root));
    --tss-primary-shadow: 0 3.6px 5.6px 0 rgba(var(--tss-primary-shadow-color-root), 0.132), 2px 2.3px 5.9px 0 rgba(var(--tss-primary-shadow-color-root), 0.108);
    --tss-overlay-light: rgba(255, 255, 255, 0.1);
    --tss-overlay-dark: rgba(255, 255, 255, 0.4);
    --tss-shadow-color-from: rgba(0, 0, 0, 0.132);
    --tss-shadow-color-to: rgba(0, 0, 0, 0.108);
    --tss-box-shadow: 0 3.6px 5.6px 0 var(--tss-shadow-color-from), 2px 2.3px 5.9px 0 var(--tss-shadow-color-to);
    --tss-box-shadow-darker: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.3), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.45);
    --tss-card-shadow: 0 3.6px 5.6px 0 var(--tss-shadow-color-from), 2px 2.3px 5.9px 0 var(--tss-shadow-color-to);
    --tss-toast-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.45);
    --tss-scrollbar-track-color: rgba(255, 255, 255, 0.08);
    --tss-scrollbar-track-hidden-color: rgba(255, 255, 255, 0.04);
    --tss-scrollbar-thumb-color: rgba(255, 255, 255, 0.15);
    --tss-simplebar-thumb-color: rgba(255, 255, 255, 0.23);
    --tss-scrollbar-thumb-hidden-color: rgba(255, 255, 255, 0.04);
}

*[class^="fi-rr-"] {
    --tss-font-size-mega: 41px;
    --tss-font-size-xxlarge: 31px;
    --tss-font-size-xlarge: 27px;
    --tss-font-size-large: 23px;
    --tss-font-size-mediumplus: 19px;
    --tss-font-size-medium: 17px;
    --tss-font-size-smallplus: 15px;
    --tss-font-size-small: 12px;
    --tss-font-size-xsmall: 10px;
    --tss-font-size-tiny: 9px;
}

body {
    background: var(--tss-default-background-color);
}

/* Fonts */
/* Sizes */
.tss-fontsize-mega {
    font-size: var(--tss-font-size-mega);
}

.tss-fontsize-xxlarge {
    font-size: var(--tss-font-size-xxlarge);
}

.tss-fontsize-xlarge {
    font-size: var(--tss-font-size-xlarge);
}

.tss-fontsize-large {
    font-size: var(--tss-font-size-large);
}

.tss-fontsize-mediumplus {
    font-size: var(--tss-font-size-mediumplus);
}

.tss-fontsize-medium {
    font-size: var(--tss-font-size-medium);
}

.tss-fontsize-smallplus {
    font-size: var(--tss-font-size-smallplus);
}

.tss-fontsize-small {
    font-size: var(--tss-font-size-small);
}

.tss-fontsize-xsmall {
    font-size: var(--tss-font-size-xsmall);
}

.tss-fontsize-tiny {
    font-size: var(--tss-font-size-tiny);
}

i.tss-fontsize-mega {
    line-height: var(--tss-font-size-mega);
}

i.tss-fontsize-xxlarge {
    line-height: var(--tss-font-size-xxlarge);
}

i.tss-fontsize-xlarge {
    line-height: var(--tss-font-size-xlarge);
}

i.tss-fontsize-large {
    line-height: var(--tss-font-size-large);
}

i.tss-fontsize-mediumplus {
    line-height: var(--tss-font-size-mediumplus);
}

i.tss-fontsize-medium {
    line-height: var(--tss-font-size-medium);
}

i.tss-fontsize-smallplus {
    line-height: var(--tss-font-size-smallplus);
}

i.tss-fontsize-small {
    line-height: var(--tss-font-size-small);
}

i.tss-fontsize-xsmall {
    line-height: var(--tss-font-size-xsmall);
}

i.tss-fontsize-tiny {
    line-height: var(--tss-font-size-tiny);
}


/* Weights */
.tss-fontweight-regular {
    font-weight: var(--tss-font-weight-regular);
}

.tss-fontweight-semibold {
    font-weight: var(--tss-font-weight-semibold);
}

.tss-fontweight-bold {
    font-weight: var(--tss-font-weight-bold);
}

.tss-fontcolor-default {
    color: var(--tss-default-foreground-color);
}

.tss-fontcolor-primary {
    color: var(--tss-primary-background-color);
}

.tss-fontcolor-success {
    color: var(--tss-success-background-color);
}

.tss-fontcolor-danger {
    color: var(--tss-danger-background-color);
}

.tss-fontcolor-warning {
    color: var(--tss-warning-background-color);
}

.tss-fontcolor-secondary {
    color: var(--tss-secondary-foreground-color);
}

.tss-fontcolor-invalid {
    color: var(--tss-invalid-border-color);
}

.tss-box-shadow {
    box-shadow: var(--tss-box-shadow);
}

.tss-textalign-left {
    text-align: left;
}

.tss-textalign-center {
    text-align: center;
}

.tss-textalign-right {
    text-align: right;
}

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

.tss-disabled {
    pointer-events: none;
    color: var(--tss-disabled-foreground-color);
}

.tss-required:after {
    content: "*";
    color: var(--tss-invalid-border-color);
    position: absolute;
    top: -3px;
    right: -10px;
    display: inline-block;
    font-size: var(--tss-font-size-medium);
    font-weight: var(--tss-font-weight-regular);
}

.tss-cursor-pointer {
    cursor: pointer;
}

.tss-default-component-margin {
    --tss-default-margin: 4px;
    margin: var(--tss-default-margin);
}

.tss-default-component-no-margin > .tss-stack-item > .tss-default-component-margin {
    --tss-default-margin: 0px;
}


.simplebar-wrapper {
    height: 100%; /* We change this, because the default of inherit from simple-bar doesn't play nice with our Stack*/
    width: 100%; /* We change this, because the default of inherit from simple-bar doesn't play nice with our Stack*/
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: var(--tss-scrollbar-track-hidden-color);
    border-radius: 5px;
}

*:hover::-webkit-scrollbar-track {
    background: var(--tss-scrollbar-track-color);
    border-radius: 5px;
}


::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--tss-scrollbar-thumb-hidden-color);
}

*:hover::-webkit-scrollbar-thumb {
    background: var(--tss-scrollbar-thumb-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    opacity: 1;
    border: 1px solid var(--tss-dark-border-color);
}


.simplebar-scrollbar:before {
    background: var(--tss-simplebar-thumb-color);
}

.simplebar-track .simplebar-scrollbar.simplebar-visible:before {
    /* When hovered, remove all transitions from drag handle */
    opacity: 1;
    transition: opacity 0s linear;
}

.tss-image {
    vertical-align: unset;
    border-style: none;
    -webkit-user-select: none;
    user-select: none;
}


@keyframes skeleton-glow {
    0% {
        background: rgba(211, 216, 222, .2);
        border-color: rgba(211, 216, 222, .2)
    }

    to {
        background: rgba(95, 107, 124, .2);
        border-color: rgba(95, 107, 124, .2)
    }
}

.tss-skeleton .tss-image,
.tss-skeleton .tss-label label,
.tss-skeleton .tss-icon,
.tss-skeleton .tss-textblock,
.tss-skeleton .tss-btn {
    animation: skeleton-glow 1s linear infinite alternate;
    background: rgba(211, 216, 222, .2);
    background-clip: padding-box !important;
    border-color: rgba(211, 216, 222, .2) !important;
    border-radius: 2px;
    box-shadow: none !important;
    color: transparent !important;
    cursor: default;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tss-defer-loading-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.tss-defer-with-loading-msg {
    position: relative;
}

.tss-icon {
    font-family: monospace;
    font-style: normal;
}

i[class^="fi-"]:before, i[class*=" fi-"]:before, span[class^="fi-"]:before, span[class*="fi-"]:before {
    display: inline-block;
}
