@font-face {
    font-family: "Anton";
    src: url('../fonts/Anton-Regular.ttf');
}

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

/* Initial loader */
.startup-loader path {
    animation-duration: 1.2s;
    animation-name: pulse;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        opacity: .1;
    }

    30% {
        opacity: .8;
    }

    100% {
        opacity: .1;
    }
}

/*
    Does not work with MudBlazor
    Had to add those values
    No effect currently. More values needed?
*/
.mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}
.mud-button-filled-secondary {
    color: var(--mud-palette-text-secondary) !important;
}
.mud-tertiary-text {
    color: var(--mud-palette-text-primary) !important;
}
.mud-button-filled-tertiary {
    color: var(--mud-palette-text-primary) !important;
}

/* This should set the background input apexcharts according to thead documentation */
.apexcharts-canvas {
    background: var(--mud-palette-surface);
}
    /* Had to add this as well */ 
    .apexcharts-canvas svg {
        background: var(--mud-palette-surface) !important;
    }

/*.apexcharts-tooltip.apexcharts-theme-light*/
/*.apexcharts-tooltip.apexcharts-theme-dark*/
/*.apexcharts-tooltip*/

@keyframes spin {
    50% {
        transform: rotate(180deg);
    }
}

/* Light mode */
.light-mode {
    --difficulty-very-easy-background: rgb(169, 211, 202);
    --difficulty-very-easy-color: rgba(0, 0, 0, 0.9);
    --difficulty-easy-background: rgb(169, 211, 202);
    --difficulty-easy-color: rgba(0, 0, 0, 0.9);
    --difficulty-medium-background: #EEEEEE;
    --difficulty-medium-color: rgba(0, 0, 0, 0.9);
    --difficulty-hard-background: rgb(243, 231, 218);
    --difficulty-hard-color: rgba(0, 0, 0, 0.9);
    --difficulty-very-hard-background: rgb(242, 191, 207);
    --difficulty-very-hard-color: rgba(0, 0, 0, 0.9);
    --chip-wildcard-background: linear-gradient(to right top, #7fae90, #95cfa9, #abf0c2);
    --chip-wildcard-color: #3a5a4a;
    --chip-loan-rangers-background: linear-gradient(to right top, #9ec5e8, #b8d8f0, #d6e8fa);
    --chip-loan-rangers-color: #3e5b7a;
    --chip-dynamic-duo-background: linear-gradient(to right top, #c2a2d4, #d4b6e3, #e7c9f2, #f9ddff);
    --chip-dynamic-duo-color: #4a3a5a;
    --chip-park-the-bus-background: linear-gradient(to right top, #ffb3c6, #ffc2d1, #ffd7e3);
    --chip-park-the-bus-color: #854f6c;
    --element-power-captain-background: rgba(66,66,66,1);
    --element-power-captain-color: #fff;
    --element-power-vice-captain-background: #cecece;
    --element-power-vice-captain-color: rgba(66, 66, 66, 1);
    --element-status-warning: #FBC02D;
    --element-status-unavailable: #C62828;
    --nav-menu-mobile-background: #F5F5F580;
    --nav-menu-mobile-border: #EEE;
    --nav-menu-icon-color: rgba(28, 27, 29, 1);
    --nav-menu-text-color: rgb(77, 66, 86);
    --nav-menu-text-color-active: #21182b;
    --nav-menu-active-item: #89a49f;
    --nav-menu-active-item-hover: rgba(0, 0, 0, 0.10);
}

/* Dark mode */
.dark-mode {
    --difficulty-very-easy-background: rgb(30, 90, 60);
    --difficulty-very-easy-color: rgba(255, 255, 255, 0.9);
    /*--difficulty-easy-background: rgb(130, 170, 130);*/
    --difficulty-easy-background: rgb(106, 136, 122);
    --difficulty-easy-color: #000000;
    --difficulty-medium-background: rgba(182, 183, 185);
    --difficulty-medium-color: #000000;
    /*--difficulty-hard-background: rgb(163, 126, 140);*/
    --difficulty-hard-background: rgb(154, 117, 122);
    --difficulty-hard-color: #000000;
    --difficulty-very-hard-background: rgb(126, 52, 60);
    --difficulty-very-hard-color: rgba(255, 255, 255, 0.9);
    --chip-wildcard-background: linear-gradient(to right top, #a2c2b4, #b6d4c3, #c9e7d2, #ddf9e1);
    --chip-wildcard-color: #3a5a4a;
    --chip-loan-rangers-background: linear-gradient(to right top, #d6e8fa, #b8d8f0, #9ec5e8, #7db2db);
    --chip-loan-rangers-color: #3e5b7a;
    --chip-dynamic-duo-background: linear-gradient(to right top, #c2a2d4, #d4b6e3, #e7c9f2, #f9ddff);
    --chip-dynamic-duo-color: #4a3a5a;
    --chip-park-the-bus-background: linear-gradient(to right top, #ffe5ec, #ffd7e3, #ffc2d1, #ffb3c6);
    --chip-park-the-bus-color: #854f6c;
    --element-power-captain-background: rgba(39, 39, 47, 1);
    --element-power-captain-color: rgba(255, 255, 255, 0.9);
    --element-power-vice-captain-background: #cecece;
    --element-power-vice-captain-color: rgba(66, 66, 66, 1);
    --element-status-warning: #FBC02D;
    --element-status-unavailable: #C62828;
    --nav-menu-mobile-color: rgb(48, 81, 87);
    --nav-menu-mobile-background: rgba(18, 24, 43, 0.8);
    --nav-menu-mobile-border: rgba(255, 255, 255, 0.2);
    --nav-menu-icon-color: rgba(255, 255, 255, 0.8);
    --nav-menu-text-color: rgb(173, 173, 177);
    --nav-menu-text-color-active: rgba(255, 255, 255, 0.8);
    --nav-menu-active-item: rgb(48, 81, 87);
    --nav-menu-active-item-hover: rgb(255, 255, 255, 0.2);
}

/* Fixed columns for tables */
.fixed-column {
    position: sticky;
    background-color: var(--mud-palette-surface);
}

/* TODO: Only do this if the table has activated on hover effect */
@media (hover: hover) and (pointer: fine) {
    .mud-table-row:hover td.fixed-column .table-row-hover-overlay {
        background-color: var(--mud-palette-table-hover) !important;
    }
}

th.fixed-column {
    z-index: 20 !important;
}

td.fixed-column {
    z-index: 10 !important;
}