:root {
    /* heights & widths */
    --banner-height: 100px;
    --banner-fixed-height: 100px;
    --mud-appbar-height: 20px;
    --modern-layout-top-padding: 0px;
    --logo-container-width: 200px;
    --client-logo-height: 300px;
    --client-logo-width: 500px;
    /* top menu */
    --menu-icon-size: 20px;
    --user-icon-size: 24px;
    /* Banner logo animation */
    --anime-time: 8s;
    --box-width: 200px;
    --box-height: 70px;
    --clip-distance: 0.0;
    --path-width: 1px;
    --main-color: var(--mud-palette-primary);
    /* derived sizes for logoContainer */
    --clip-width: calc( var(--box-width) * (1 + (var(--clip-distance) * 2)) );
    --clip-height: calc( var(--box-height) * (1 + (var(--clip-distance) * 2)) );
    /*logo name and path*/
    --app-logo-height: 50px;
    --app-logo-width: 208px;
    --app-logo-full-path: "/img/logo/optix_light.png";
    --app-logo-path: "/img/logo/";
    --app-logo-name: "optix";
    --client-logo-path: "/img/logo/";
    --client-logo-name: "car_light";
    /*bkg gradient*/
    --app-gradient-start: var(--mud-palette-primary-darken);
    --app-gradient-end: var(--mud-palette-tertiary-darken);
    /*opacity*/
    --page-title-opacity: 0.06;
    --page-title-animation-duration: 2000ms;
    --theme-toggle-transition-time: 400ms;
    --global-transition-time: 200ms;
}

/*** TRANSITIONS ***/
* {
    transition: background var(--theme-toggle-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -webkit-transition: background var(--theme-toggle-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -ms-transition: background var(--theme-toggle-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -o-transition: background var(--theme-toggle-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -ms-transition: background var(--theme-toggle-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
}

.main-background {
    position: relative;
    min-height: 100vh;
    overflow-y: hidden;
}

    /* gradient layers */
    .main-background::before,
    .main-background::after {
        content: "";
        position: absolute;
        inset: 0;
        transition: opacity var(--theme-toggle-transition-time) cubic-bezier(.4,0,.2,1);
        z-index: 0;
    }

    .main-background > * {
        position: relative;
        z-index: 1;
    }

    /* LIGHT gradient (static colors) */
    .main-background::before {
        /*background: url(./img/bkg_light.svg) no-repeat bottom fixed, radial-gradient(circle at top left, #aaa7ad, #616569);*/
        background: url(./img/bkg_light.svg) no-repeat bottom fixed, radial-gradient(circle at top left, #c1bec4, #868c91);
        background-size: cover;
        opacity: 1;
    }

    /* DARK gradient (static colors) */
    .main-background::after {
        background: url(./img/bkg_dark.svg) no-repeat bottom fixed, radial-gradient(circle at top left, #313a46, #0b0e11);
        background-size: cover;
        opacity: 0;
    }

    /* class toggle */
    .main-background.dark::before {
        opacity: 0;
    }

    .main-background.dark::after {
        opacity: 1;
    }

/*************************/
/****** MENU BUTTON ******/
/*************************/

.menuPopover {
    border: none !important;
    border-radius: var(--mud-default-borderradius) !important;
    background-color: var(--mud-palette-appbar-background) !important;
    margin-top: 10px !important;
    box-shadow: var(--mud-elevation-8) !important;
}

.menuButton {
    color: var(--mud-palette-text-primary) !important;
    background-color: var(--mud-palette-transparent) !important;
    min-width: 0px !important;
    transition: color var(--global-transition-time) ease-in-out;
    -webkit-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
    -o-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
}

    .menuButton > *:first-child * {
        color: var(--mud-palette-text-primary) !important;
        background-color: var(--mud-palette-transparent) !important;
        min-width: 0px !important;
        transition: color var(--global-transition-time) ease-in-out;
        -webkit-transition: color var(--global-transition-time) linear;
        -ms-transition: color var(--global-transition-time) linear;
        -o-transition: color var(--global-transition-time) linear;
        -ms-transition: color var(--global-transition-time) linear;
    }

    .menuButton:hover {
        background-color: var(--mud-palette-transparent) !important;
        color: var(--mud-palette-primary-text) !important;
    }

        .menuButton:hover > *:first-child * {
            background-color: var(--mud-palette-transparent) !important;
            color: var(--mud-palette-primary-text) !important;
        }

    .menuButton:focus {
        color: var(--mud-palette-primary-text) !important;
    }

        .menuButton:focus > *:first-child * {
            background-color: var(--mud-palette-transparent) !important;
            color: var(--mud-palette-primary-text) !important;
        }

/*.menuButton .mud-button-active {
        color: var(--mud-palette-primary-text) !important;
    }*/

.menuIcon {
    background-color: var(--mud-palette-transparent) !important;
    font-size: var(--menu-icon-size) !important;
    min-width: 0px !important;
}

    .menuIcon > *:first-child {
        background-color: var(--mud-palette-transparent) !important;
        font-size: var(--menu-icon-size) !important;
    }

    .menuIcon * {
        background-color: var(--mud-palette-transparent) !important;
        font-size: var(--menu-icon-size) !important;
    }


.userIcon {
    background-color: var(--mud-palette-transparent) !important;
    font-size: var(--user-icon-size) !important;
    min-width: 0px !important;
    padding: 0px !important;
}

    .userIcon > *:first-child {
        background-color: var(--mud-palette-transparent) !important;
        font-size: var(--user-icon-size) !important;
    }

    .userIcon * {
        background-color: var(--mud-palette-transparent) !important;
    }

.menuText {
    position: relative;
    top: 1px !important;
}

.menuStack {
    width: 180px !important;
    gap: 0 !important;
    padding: 10px !important;
}

.menuUnderline {
    font-size: 1rem;
    color: #ffffff;
    position: relative;
    display: inline-block;
}

    .menuUnderline::after,
    .menuUnderline::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--mud-palette-primary);
        bottom: -1px;
        left: 0;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease-out;
    }

    .menuUnderline::before {
        top: -1px;
        transform-origin: left;
    }

    .menuUnderline:hover::after,
    .menuUnderline:hover::before {
        transform: scaleX(1);
    }

.currentPage {
    opacity: var(--page-title-opacity);
    animation: fadeIn ease-in-out var(--page-title-animation-duration);
    -webkit-animation: fadeIn ease var(--page-title-animation-duration);
    -moz-animation: fadeIn ease var(--page-title-animation-duration);
    -o-animation: fadeIn ease var(--page-title-animation-duration);
    -ms-animation: fadeIn ease var(--page-title-animation-duration);
}

.currentPageIcon {
    font-size: 8rem !important;
    color: white !important;
}

.currentPageText {
    font-size: 4rem !important;
    font-weight: 900 !important;
    color: white !important;
    bottom: -5px !important;
    letter-spacing: 5px !important;
    position: absolute;
    right: 8.5rem !important;
    white-space: nowrap;
    cursor: default !important;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: var(--page-title-opacity);
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: var(--page-title-opacity);
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: var(--page-title-opacity);
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: var(--page-title-opacity);
    }
}

.catchPhrase {
    min-width: 500px;
    font-size: 0.9rem !important;
    color: white !important;
    opacity: 0.2 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    width: 500px;
    cursor: default !important;
}


/*************************/
/******** OVERRIDE *******/
/*************************/


.mud-icon-button:focus-within, .mud-icon-button:active {
    background-color: var(--mud-palette-transparent) !important;
}

.mud-list-item-text {
    color: var(--mud-palette-text-primary) !important;
}

.mud-list-item > *:first-child * {
    background-color: var(--mud-palette-transparent) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: color var(--global-transition-time) ease-in-out;
    -webkit-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
    -o-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
}

.mud-list-item:hover {
    background-color: var(--mud-palette-transparent) !important;
    color: var(--mud-palette-primary-text) !important;
}

    .mud-list-item:hover > *:first-child * {
        background-color: var(--mud-palette-transparent) !important;
        color: var(--mud-palette-primary-text) !important;
    }

/* field upper label when focused*/
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-primary) !important;
}
/* Override navigator autofill default background color */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}


/* ICON BUTTON */
.mud-icon-button {
    padding: 2px !important;
    border-radius: 50% !important;
}

.mud-input-adornment-end {
    margin-right: 8px !important;
    margin-left: 8px;
    margin-inline-start: 8px;
    margin-inline-end: unset;
}

/*************************/
/****** QUICKSEARCH ******/
/*************************/
.quickSearch * {
    opacity: 1 !important;
}

.quickSearch .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(10px, 0px) scale(1);
    color: var(--mud-palette-primary-text) !important;
    transition: opacity ease-in-out 500ms;
    opacity: 1 !important;
}

.quickSearch .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.quickSearch .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(10px, 0) scale(1) !important;
    opacity: 0.1 !important;
}

.quickSearchContainer {
    width: 210px !important;
    background-color: var(--mud-palette-gray-light) !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    height: 35px;
    margin-top: 1px !important;
    margin-left: 10px !important;
}

    .quickSearchContainer:hover {
        background-color: var(--mud-palette-gray-dark) !important;
    }

.quickSearchInput {
    padding-right: 0px !important;
    padding-inline-end: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin: 0px !important;
}

    .quickSearchInput > .mud-input-outlined-border {
        border-style: none !important;
    }

    .quickSearchInput > *:first-child {
        background-color: var(--mud-palette-transparent) !important;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
    }

    .quickSearchInput > .mud-select {
        /*display: flex;*/
        flex-grow: 0 !important;
        position: relative;
    }

.quickSearchPopover {
    width: 210px !important;
    border: none !important;
    border-radius: var(--mud-default-borderradius) !important;
    background-color: var(--mud-palette-appbar-background) !important;
    margin-top: 15px !important;
    box-shadow: var(--mud-elevation-8) !important;
}

.noItemPopover {
    gap: 0px !important;
}

/*************************/
/****** CHECK BOXES ******/
/*************************/

.checkBox {
    color: var(--mud-palette-text-primary) !important;
    background-color: var(--mud-palette-transparent) !important;
    transition: color var(--global-transition-time) ease-in-out;
    -webkit-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
    -o-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
}

    .checkBox > *:first-child * {
        color: var(--mud-palette-text-primary) !important;
        min-width: 0px !important;
        transition: color var(--global-transition-time) ease-in-out;
        -webkit-transition: color var(--global-transition-time) linear;
        -ms-transition: color var(--global-transition-time) linear;
        -o-transition: color var(--global-transition-time) linear;
        -ms-transition: color var(--global-transition-time) linear;
    }

    .checkBox:hover {
        background-color: var(--mud-palette-transparent) !important;
        color: var(--mud-palette-primary-text) !important;
    }

        .checkBox:hover > *:first-child * {
            background-color: var(--mud-palette-transparent) !important;
            color: var(--mud-palette-primary-text) !important;
        }


/*************************/
/********* TABS **********/
/*************************/

.tabs .mud-tab {
    background-color: var(--mud-palette-transparent) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: color var(--global-transition-time) ease-in-out;
    -webkit-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
    -o-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
}

    .tabs .mud-tab:hover {
        cursor: pointer;
        background-color: var(--mud-palette-transparent) !important;
        color: var(--mud-palette-primary-text) !important;
    }

.tabs .mud-tab-slider {
    background: var(--mud-palette-primary-text);
}

    .tabs .mud-tab-slider.mud-tab-slider-horizontal {
        height: 1px;
        bottom: 0;
        transition: left .3s cubic-bezier(0.64, 0.09, 0.08, 1);
        will-change: left;
    }

.tabs .mud-tab-active .treeViewLabel {
    color: var(--mud-palette-text-primary) !important;
}


/*************************/
/****** TREE VIEW * ******/
/*************************/
/*mud-treeview-item-content*/

.appTreeView .mud-treeview-item-content {
    background-color: var(--mud-palette-transparent) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: color var(--global-transition-time) ease-in-out;
    -webkit-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
    -o-transition: color var(--global-transition-time) linear;
    -ms-transition: color var(--global-transition-time) linear;
}

    .appTreeView .mud-treeview-item-content:hover {
        cursor: pointer;
        background-color: var(--mud-palette-transparent) !important;
        color: var(--mud-palette-primary-text) !important;
    }

.appTreeView .mud-treeview.mud-treeview-selected-primary .mud-treeview-item-content.mud-treeview-item-selected {
    color: var(--mud-palette-primary-text) !important;
    /*--mud-ripple-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);*/
}

/*************************/
/******* DROPZONES *******/
/*************************/

.dropZone {
    background-color: var(--mud-palette-transparent) !important;
    flex-grow: 1;
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    /*border-radius: 0px !important;*/
    padding: 10px;
}

/*.dropZone .mud-list-item > *:first-child * {
        background-color: var(--mud-palette-transparent) !important;
        color: var(--mud-palette-text-primary) !important;
        transition: color 300ms ease-in-out;
        -webkit-transition: color 300ms linear;
        -ms-transition: color 300ms linear;
        -o-transition: color 300ms linear;
        -ms-transition: color 300ms linear;
    }

    .dropZone .mud-list-item:hover {
        background-color: var(--mud-palette-transparent) !important;
        color: var(--mud-palette-primary-text) !important;
    }

        .dropZone .mud-list-item:hover > *:first-child * {
            background-color: var(--mud-palette-transparent) !important;
            color: var(--mud-palette-primary-text) !important;
        }*/

.dropZoneDrag {
    background-color: var(--mud-palette-surface) !important;
    margin: 10px;
    /*border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius)*/
}

.dropContainer {
    display: flex;
    flex-grow: 1;
    width: 100%;
    border-color: transparent;
}

/*************************/
/****** FORM FIELDS ******/
/*************************/

.formField {
    background-color: var(--mud-palette-appbar-background) !important;
    border-radius: var(--mud-default-borderradius);
    border-color: var(-mud-palette-primary-text) !important;
    color: var(--mud-palette-text-primary) !important;
    outline: solid 1px var(--mud-palette-appbar-background) !important;
    transition: outline var(--global-transition-time) ease-in-out, background-color var(--theme-toggle-transition-time) linear;
    -webkit-transition: outline var(--global-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -ms-transition: outline var(--global-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -o-transition: outline var(--global-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
    -ms-transition: outline var(--global-transition-time) linear, background-color var(--theme-toggle-transition-time) linear;
}

    .formField:hover {
        outline: solid 1px var(--mud-palette-primary-text) !important;
    }

    .formField:focus-within {
        outline: solid 1px transparent !important;
        border-color: var(-mud-palette-primary-text) !important;
    }

/* Change outline and border when focused */
.mud-input-control-input-container > .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.mud-input-control-input-container > .mud-input.mud-input-outlined > input:focus ~ .mud-input-outlined-border,
.mud-input-control-input-container > .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border: solid 1px;
    outline: none !important;
    border-color: var(--mud-palette-primary-text) !important;
}

.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border legend, .mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border legend {
    color: var(--mud-palette-primary-text) !important;
    width: auto !important;
    padding: 0 5px !important;
}

.formInputBorder > .mud-input-control-input-container > .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-color: transparent !important;
}

.appDatePicker .mud-input-control-input-container {
    background-color: var(--mud-palette-appbar-background) !important;
    border: none !important;
    border-radius: var(--mud-default-borderradius);
    outline: solid 1px var(--mud-palette-appbar-background) !important;
    transition: outline var(--global-transition-time) ease-in-out;
    -webkit-transition: outline var(--global-transition-time) linear;
    -ms-transition: outline var(--global-transition-time) linear;
    -o-transition: outline var(--global-transition-time) linear;
    -ms-transition: outline var(--global-transition-time) linear;
}

    .appDatePicker .mud-input-control-input-container:hover {
        outline: solid 1px var(--mud-palette-primary-text) !important;
    }

    .appDatePicker .mud-input-control-input-container > *:first-child * {
        border: none !important;
    }

.mud-input-control {
    max-height: 56px;
}

.mud-input-control-helper-container {
    min-height: 56px;
    justify-items: flex-end;
    margin-right: 10px;
    transform: translate(5px, -58px) scale(1) !important;
    
    /*transform: translate(10px, -68px) scale(1) !important;*/
}

    .mud-input-control-helper-container > *:first-child * {
        background-color: var(--mud-palette-appbar-background) !important;
        padding: 5px !important;
        border-radius: var(--mud-default-borderradius) !important;
    }

/*************************/
/******* LOADIING ********/
/*************************/
.mud-progress-circular-svg {
    color: var(--mud-palette-primary-text) !important;
}

.loading-text {
    color: var(--mud-palette-primary-text) !important;
}

.blurBackground {
    /*backdrop-filter: blur(2px) !important;*/
}


/*************************/
/********* LOGO **********/
/*************************/
.clientLogoDark {
    opacity: 0.02;
    height: var(--client-logo-height);
}

.clientLogoLight {
    filter: brightness(0) saturate(0%) invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(1%) contrast(50%);
    opacity: 0.1;
}

.bannerAppLogo {
    background: image-set(var(--app-logo-full-path) 3x) left / contain no-repeat;
}
/*************************/
/***** FLOATING DIV ******/
/*************************/

.bottomLeftDiv {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.bottomCenterDiv {
    position: absolute;
    width: 500px;
    margin-left: -250px;
    bottom: 10px;
    left: 50%;
}

.bottomRightDiv {
    position: absolute;
    bottom: 0px;
    right: 20px;
}
/*.CenterIconDiv {
    position: absolute;
    width: 480px;
    height: 480px;
    top: calc(100vh /2);
    margin-top: calc(calc(calc(480px / 2) * -1) - 86px);
    left: 50%;
    margin-left: -250px;
}

.CenterLogoDiv {
    position: absolute;
    width: var(--client-logo-width);
    height: var(--client-logo-height);
    top: calc(100vh /2);
    margin-top: calc(calc(var(--client-logo-height) / 2) * -1);
    left: 50%;
    margin-left: -250px;
}*/
/*************************/
/******* TIMELINE ********/
/*************************/

.statusTimeLine {
    margin-top: 10px;
}

    .statusTimeLine .mud-timeline-item-content {
        top: -15px !important;
    }

    .statusTimeLine > .mud-timeline-item-divider {
        min-height: 50px !important;
    }
/*************************/
/********* CHIP **********/
/*************************/

.claimOverview {
    top: -30px !important;
    position: relative;
}

.chipLabel {
    background-color: transparent !important;
    cursor: default !important;
}
/*************************/
/***** CARD FLIPPING *****/
/*************************/

.flippingCard {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 220px;
    /*margin: 1rem;*/
    transform-style: preserve-3d;
    perspective: 800px;
}

    .flippingCard .front, .flippingCard .back {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid 1px var(--mud-palette-transparent);
        border-radius: 25px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transition: transform 0.8s ease-in-out;
    }

        .flippingCard .front .img, .flippingCard .back .img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            border-radius: 10px;
            filter: grayscale(70%) brightness(40%);
        }

    .flippingCard .front {
        /*background: var(--mud-palette-appbar-background) url( /img/bkg4.svg) no-repeat bottom;*/
        background-color: var(--mud-palette-appbar-background);
    }

    .flippingCard .back {
        background-color: var(--mud-palette-primary-darken);
        transform: rotateY(180deg);
    }

    .flippingCard:hover .front {
        transform: rotateY(-180deg);
    }

    .flippingCard:hover .back {
        transform: rotateY(0deg);
    }

    .flippingCard .contents {
        color: var(--mud-palette-tertiary);
        text-align: center;
        transform: translateZ(50px);
    }
/*** CARD TEXT ***/
.cardTitle {
    font-size: 2em !important;
    font-weight: 300 !important;
    /*color: var(--mud-palette-primary) !important;*/
    color: var(--mud-palette-primary-text) !important;
}

.cardSubtitle {
    font-size: 1.25em !important;
    font-weight: 100 !important;
    color: var(--mud-palette-text-secondary) !important;
}

.cardDescription {
    font-size: 1em !important;
    font-weight: 200 !important;
    font-style: italic !important;
    color: var(--mud-palette-tertiary) !important;
}


/*************************/
/******* DATAGRID ********/
/*************************/
.mud-table {
    /*color: var(--mud-palette-text-primary);*/
    background-color: var(--mud-palette-appbar-background) !important;
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

/*** BANNER ***/
/*.banner {
    width: 100%;
    position: fixed;
    z-index: 10000;
    height: var(--banner-height);
    background-color: var(--mud-palette-secondary) !important;
    transition: all 2s;
}

.newBanner {
    width: 100%;
    position: fixed;
    z-index: 10000;
    height: var(--banner-height);
    background-color: var(--mud-palette-transparent) !important;
    transition: all 2s;
}*/
/*.bannerClientLogo {
    background: image-set(var(--client-logo-full-path) 3x) center / contain no-repeat;
}

.logoContainer {
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--box-width);
    height: var(--box-height);
    color: var(--main-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-info) 50%, transparent);
}

    .logoContainer::before,
    .logoContainer::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        margin: calc(-1 * var(--clip-distance) * 100%);
        box-shadow: inset 0 0 0 var(--path-width);
        animation: bannerLogoFrames var(--anime-time) linear infinite;
    }

    .logoContainer::before {
        animation-delay: calc(var(--anime-time) * -0.5);
    }

@keyframes bannerLogoFrames {
    0%, 100% {
        clip-path: inset( 0 0 calc(var(--clip-height) - var(--path-width)) 0 );
    }
    25% {
        clip-path: inset( 0 calc(var(--clip-width) - var(--path-width)) 0 0 );
    }
    50% {
        clip-path: inset( calc(var(--clip-height) - var(--path-width)) 0 0 0 );
    }
    75% {
        clip-path: inset( 0 0 0 calc(var(--clip-width) - var(--path-width)) );
    }
}*/
/*DRAWER TOOLTIPS*/
/*.drawerTooltip {
        color: var(--mud-palette-primary) !important;
        background-color: var(--mud-palette-secondary-lighten) !important;
        border-radius: 4px !important;
        font-weight: 500 !important;
        font-size: 1rem !important;
        letter-spacing: .00714em !important;
        text-transform: none !important;
        border: 1px solid var(--mud-palette-secondary-darken) !important;
    }*/
/*** CARD PERSPECTIVE ***/
/*.perspectiveContainer {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    display: block;
    margin-bottom: 20px;
    position: relative;
    --default-rotate: 20deg;
}

.perspectiveItem {
    width: 100%;
    --rotateY: 0deg;
    --rotateX: 0deg;
    transform: perspective(600px) rotateY(var(--rotateY)) rotateX(var(--rotateX));
    transition: transform 300ms;
}

.perspectiveSpot {
    width: calc(100% / 3);
    height: calc(100% / 2);
    display: inline-block;
    background-color: transparent;
    position: absolute;
    z-index: 1;
}

    .perspectiveSpot button {
        width: 100%;
        height: 100%;
    }

    .perspectiveSpot:nth-child(1) {
        top: 0;
        left: 0;
    }

        .perspectiveSpot:nth-child(1):hover ~ .perspectiveItem {
            --rotateX: var(--default-rotate);
            --rotateY: calc(var(--default-rotate) * -1);
        }

    .perspectiveSpot:nth-child(2) {
        top: 0;
        left: calc(100%/3);
    }

        .perspectiveSpot:nth-child(2):hover ~ .perspectiveItem {
            --rotateX: var(--default-rotate);
            --rotateY: 0deg;
        }

    .perspectiveSpot:nth-child(3) {
        top: 0;
        right: 0;
    }

        .perspectiveSpot:nth-child(3):hover ~ .perspectiveItem {
            --rotateX: var(--default-rotate);
            --rotateY: var(--default-rotate);
        }

    .perspectiveSpot:nth-child(4) {
        bottom: 0;
        left: 0;
    }

        .perspectiveSpot:nth-child(4):hover ~ .perspectiveItem {
            --rotateX: calc(var(--default-rotate) * -1);
            --rotateY: calc(var(--default-rotate) * -1);
        }

    .perspectiveSpot:nth-child(5) {
        bottom: 0;
        left: calc(100%/3);
    }

        .perspectiveSpot:nth-child(5):hover ~ .perspectiveItem {
            --rotateX: calc(var(--default-rotate) * -1);
            --rotateY: 0deg;
        }

    .perspectiveSpot:nth-child(6) {
        bottom: 0;
        right: 0;
    }

        .perspectiveSpot:nth-child(6):hover ~ .perspectiveItem {
            --rotateX: calc(var(--default-rotate) * -1);
            --rotateY: var(--default-rotate);
        }*/
/*GLOW*/
/*.glow {
    -webkit-box-shadow: 0px 0px 19px 0px var(--mud-palette-primary);
    -moz-box-shadow: 0px 0px 19px 0px var(--mud-palette-primary);
    box-shadow: 0px 0px 19px 0px var(--mud-palette-primary);
}*/
/*// Glow Border Animation //*/
/*USAGE:   */
/*<div class="animated-border-box-glow" > </div >
<div class="animated-border-box" >*/
/*.animated-border-box, .animated-border-box-glow {
    max-height: 200px;
    max-width: 250px;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    z-index: 0;*/
/* Border Radius */
/*border-radius: 10px;
}

.animated-border-box-glow {
    overflow: hidden;*/
/* Glow Blur */
/*filter: blur(20px);
}

    .animated-border-box:before, .animated-border-box-glow:before {
        content: '';
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        position: absolute;
        width: 99999px;
        height: 99999px;
        background-repeat: no-repeat;
        background-position: 0 0;*/
/*border color, change middle color*/
/*background-image: conic-gradient(rgba(0,0,0,0), #1976ed, rgba(0,0,0,0) 25%);*/
/* change speed here */
/*animation: rotate 4s linear infinite;
    }

.animated-border-box:after {
    content: '';
    position: absolute;
    z-index: -1;*/
/* border width */
/*left: 5px;
    top: 5px;*/
/* double the px from the border width left */
/*width: calc(100% - 10px);
    height: calc(100% - 10px);*/
/*bg color*/
/*background: #292a2e;*/
/*box border radius*/
/*border-radius: 7px;
}

@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}*/
/*// Border Animation END//*/