:root {
    /* 
        General Colours
    */

    --primary: #056cb6;
    --primary-light: #C7E5FB;
    --secondary: #fec057;
    --secondary-light: #FFE0AB;
    --primary-light-translucent: rgba(130,182,219,0.2);
    --primary-light-translucent-alt: rgba(130,182,219,0.4);
    --secondary-light-translucent: rgba(255,224,171,0.2);
    --header: #d8dfee;
    --border: #AABCD2;
    --border-translucent: rgba(170, 188, 210, 0.2);
    --error: #A52A2A;
    --error-light: #DF6A6A;
    --error-hover: #BF4A4A;
    --clickable: #0689E8;
    --clickable-disabled: lightgrey;
    --clickable-hover: #28A1F9;
    --cancel: grey;
    --cancel-hover: darkgrey;
    /*
        Text
    */
    --text: #343434;
    --text-button: white;
    /* 
        Excel
    */
    --excel-button: #017A3F;
    --excel-button-hover: #009049;
    --excel-button-disabled: #5AA053;
    /* 
        Charting
    */
    --chart-category-one: #659af7;
    --chart-category-two: #FF715B;
    --chart-category-three: #ffc425;
    --chart-category-four: #00b159;
    --chart-category-five: #B669DF;
    --chart-category-one-dim: #B7D0FC;
    --chart-category-two-dim: #EF9884;
    --chart-current-month: #cbdffc;
    --chart-current-year: #659af7;
    --chart-last-year: #d3d3d3;
    --chart-last-two-years: var(--secondary);
    --chart-thirty: #3266cc;
    --chart-sixty: #031fc4;
    --chart-ninety: #dc3913;
    /*new category colours*/
    --chart-new-category-one: #7965F7;
    --chart-new-category-two: #FF5B97;
    --chart-new-category-three: #CDFF25;
    --chart-new-category-four: #00B1B1;
    /* 
        Image Animation
    */
    --img-width: 100vw;
    /*
        Card
    */
    --card-header-background: rgba(0, 0, 0, 0.175);
    --width-phone: 310px;
    --breakpoint-small: 640px; /* screen < 641px */
    --breakpoint-medium: 641px; /* 641px  > screen < 1008px*/
    --breakpoint-large: 1008px; /* screen > 1007px */
}

/*===< Check Appsettings.json for Site Flag >=== */
html[data-site='Stellar'] {
    --primary: #A12186;
    --primary-light: #D656BB;
    --secondary: #9f9f9f;
    --secondary-light: #FFE0AB;
    --primary-light-translucent: rgba(130,182,219,0.2);
    --primary-light-translucent-alt: rgba(130,182,219,0.4);
    --secondary-light-translucent: rgba(255,224,171,0.2);
}

html[data-site='TEST'] {
    --primary: #13223F; /* Warm burnt orange */
    --primary-light: #F4A261; /* Softer orange */
    --secondary: #EE6123; /* Muted teal */
    --secondary-light: #7FB3B8; /* Soft teal */
    --primary-light-translucent: rgba(224, 123, 57, 0.2);
    --primary-light-translucent-alt: rgba(224, 123, 57, 0.4);
    --secondary-light-translucent: rgba(127, 179, 184, 0.2);
}

html[data-theme='dark'] {
    --primary: #056cb6;
    --primary-light: #C7E5FB;
    --secondary: #fec057;
    --secondary-light: #FFE0AB;
    --primary-light-translucent: rgba(130,182,219,0.2);
    --primary-light-translucent-alt: rgba(130,182,219,0.4);
    --secondary-light-translucent: rgba(255,224,171,0.2);
    --header: #d8dfee;
    --border: #AABCD2;
    --border-translucent: rgba(170, 188, 210, 0.2);
    --error: #A52A2A;
    --error-light: #DF6A6A;
    --error-hover: #BF4A4A;
    --clickable: #0689E8;
    --clickable-disabled: lightgrey;
    --clickable-hover: #4477AA;
    /* 
        Excel
    */
    --excel-button: #017A3F;
    --excel-button-hover: #009049;
    --excel-button-disabled: #5AA053;
    /* 
        Charting
    */
    --chart-category-one: #659af7;
    --chart-category-two: #dc3913;
    --chart-category-one-dim: #B7D0FC;
    --chart-category-two-dim: #EF9884;
    --chart-current-month: #cbdffc;
    --chart-current-year: #659af7;
    --chart-last-year: #d3d3d3;
    --chart-last-two-years: var(--secondary);
    --chart-thirty: #3266cc;
    --chart-sixty: #031fc4;
    --chart-ninety: #dc3913;
}

/* ------ Media Queries ------ */
.grid-col {
    grid-template-columns: 1fr;
}

.grid-3 {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    max-width: 100%;
    margin-left: 5px;
}

.grid-budget-report {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    max-width: 100%;
    margin-left: 5px;
}

@media screen and (max-width: 641px) { /* Less than 641 = Small */

    .grid-4col {
        display: grid;
        grid-template-columns: 1fr;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .grid-3col {
        display: grid;
        grid-template-columns: 1fr;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .grid-2col {
        display: grid;
        grid-template-columns: 1fr;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .pies-grid {
        display: grid;
        gap: .5rem;
        grid-template: [row1-start] "card-1" [row1-end]
            [row2-start] "card-2" [row2-end]
            [row3-start] "card-3" [row3-end] / 100%;
    }

    .dashboard-grid {
        display: grid;
        gap: .5rem;
        grid-template: [row1-start] "card1" [row1-end]
            [row2-start] "card3" [row2-end]
            [row3-start] "card4" [row3-end] / 100%;
    }
}

@media (min-width: 641px) and (max-width: 1007px) { /* Less than 1008px = Medium */

    .grid-4col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .grid-3col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .grid-2col {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .pies-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, min(295px));
        /* This is better for small screens, once min() is better supported */
        /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
        gap: .5rem;
    }

    .dashboard-grid {
        display: grid;
        grid-template: [row1-start] "card1" [row1-end]
            [row2-start] "card3" [row2-end]
            [row3-start] "card4" [row3-end] / 100%;
        /* This is better for small screens, once min() is better supported */
        /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
        gap: .5rem;
    }
}

@media (min-width: 1007px) {

    .grid-4col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .grid-3col {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .pies-grid {
        display: grid;
        gap: .5rem;
        grid-template: [row1-start] "card1 card2 card3" [row1-end] / 1fr 1fr 1fr;
    }

    .dashboard-grid {
        display: grid;
        grid-template: [row1-start] "card1" [row1-end]
            [row2-start] "card3" [row2-end]
            [row3-start] "card4" [row3-end] / 100%;
        /* This is better for small screens, once min() is better supported */
        /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
        gap: .5rem;
    }
}

@media (max-width: 641px) { /* Less than 641 = Small */
    .performance-grid {
        display: grid;
        gap: .5rem;
        grid-template: [row1-start] "card-1" [row1-end]
            [row2-start] "card-2" [row2-end]
            [row3-start] "card-3" [row3-end] / 100%;
    }
}

@media (min-width: 641px) and (max-width: 1007px) { /* Less than 1008px = Medium */
    .performance-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, min(310px));
        gap: .5rem;
    }
}

@media (min-width: 1007px) {
    .performance-grid {
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.pies-grid {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
/* ------ Testing  ------ */
/*
* {
    border: 1px solid red;
}
*/

/* ------ Fonts ------ */
@font-face {
    font-family: "DSL Franklin Gothic";
    src: url('/css/fonts/FranklinGothic.woff') format('woff');
}

@font-face {
    font-family: "DSL Franklin Gothic Light";
    src: url('/css/fonts/FranklinGothic-Light.woff') format('woff');
}

/* ------ HTML (0-9, A-Z) ------ */
html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: var(--clickable);
    border: none;
    transition: 0.25s;
}

    a:hover {
        color: var(--clickable-hover);
        text-decoration: underline 1px var(--clickable);
    }

address {
    margin: 0;
}

body {
    color: var(--dsl-text);
    font-size: 16px;
}

dialog {
    margin: 1em;
    width: 100%;
    opacity: 0.5;
    scale: 0;
    display: block;
    transition: all 0.7s;
    padding: 0;
}

    dialog[open] {
        opacity: 1;
        scale: 1;
    }

    /* Must use modal.showModal() for backdrop to work, not modal.sohw()*/
    dialog::backdrop {
        background-color: rgba(0,0,0,0.3);
    }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--dsl-text);
}

header {
    background-color: white;
}

input, button, select {
    outline: 2px solid;
    outline-color: transparent;
    transition: 2s ease-in;
}

input, select {
    height: 32px;
    outline-color: transparent;
}

input, select, textarea {
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s;
    background-color: #FFF;
    border-color: var(--border);
    font-size: 14px;
}

    textarea:focus, textarea:active {
        box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px 0px;
    }

    select:hover, textarea:hover, input:not(input[type=checkbox], input[type=radio]):hover {
        background-color: #EEF;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px 0px;
    }

    select:focus, textarea:focus, input:not(input[type=checkbox], input[type=radio]):focus {
        background-color: #EEF;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px 0px;
        border-color: var(--border);
    }

    input#email:focus, input#emails:focus {
        width: 200px;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px 0px;
    }

    input[readonly] {
        cursor: text;
    }

    input[type=checkbox] {
        text-align: right;
        margin-top: .5em;
    }

    input[type=month] {
        display: inline;
        padding: 4px;
        max-width: 125px;
        border: 1px solid var(--border);
        font-size: 13px !important;
    }

    input[type=date] {
        display: inline;
        padding: 4px;
        max-width: 125px;
        border: 1px solid var(--border);
        font-size: 15px !important;
        text-transform: uppercase;
    }

        input[type=date]::-webkit-calendar-picker-indicator {
            margin-left: 0px;
        }

    input[type=text]:focus, input[type=number]:focus, input[type=number]:focus, input[type=text]:active, input[type=number]:active, input[type=number]:active, button:focus, button:active, select:focus, select:active {
        box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px 0px;
    }

    input[disabled], button[disabled], select[disabled] {
        background-color: lightgray;
    }

    input[readonly] {
        background-color: lightgray;
    }

    input[type="radio"] {
        margin-top: -1px;
        vertical-align: middle;
    }

label {
    font-size: 16px;
    text-transform: lowercase;
    font-variant: small-caps;
    display: inline;
    cursor: pointer;
    vertical-align: top;
    margin: 0 !important;
}

select[multiple]:focus, select[multiple]:active {
    height: 500px;
    max-height: 500px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px 0px;
}

table.datagrid > tbody > tr {
    transition: 0.2s;
}

    table.datagrid > tbody > tr:hover {
        background-color: #f8f8ff !important;
        text-decoration: none;
        cursor: default;
    }

    table.datagrid > tbody > tr > td {
        min-width: 22px;
        min-height: 22px;
        vertical-align: middle;
    }
/* ------ Media Queries ------ */

@media(max-width: var(--breakpoint-medium)) {
    #main-container {
        display: block;
        width: 100%;
        margin: 0 0 0 0 !important;
    }

    #index-container {
        max-width: 100%;
    }
}

/* ------ Element ID Classes (0-9, A-Z) ------ */


#main-container {
    min-height: 100vh;
    min-width: 80vw;
    padding-top: 10px;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

@media(max-width: 1007px) {
    #main-container {
        display: block;
        width: 100%;
        margin: 0 0 0 0 !important;
    }

    #index-container {
        max-width: 100%;
    }
}

@media(max-width: 500px) {
    #mobile-template div.d-flex:hover {
        background-color: #f8f8ff !important;
    }
}

/* ------ Custom CSS Classes (0-9, A-Z)  ------ */

/*
    A
*/

.auto-slider ul {
    margin: 0;
}

.auto-slider img {
    display: block;
    width: var(--img-width);
}

.auto-slider {
    width: var(--img-width);
    border-radius: 5px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
}

.auto-slider-content {
    list-style: none;
    animation-name: slide;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation: slide 30s ease-in-out infinite;
    display: flex;
    padding: 0px;
}

.alignright {
    text-align: right;
}

.aligncenter {
    text-align: center;
}

.aligncentre {
    text-align: center;
}

.aligntop {
    vertical-align: top;
}

.alignmiddle {
    vertical-align: middle;
}

.alignbottom {
    vertical-align: bottom;
}

.text-amber {
    color: #FF7E00;
}
/*
    B
*/

.bg-dsl-blue {
    background-color: var(--primary);
    transition: background-color 1s;
}

.bg-dsl-yellow {
    background-color: var(--secondary);
    transition: background-color 1s;
}

.bg-dsl-blue-light {
    background-color: var(--primary-light);
    transition: background-color 1s;
}

.bg-dsl-yellow-light {
    background-color: var(--secondary-light);
    transition: background-color 1s;
}

.bg-dsl-blue-light-translucent {
    background-color: var(--primary-light-translucent);
    transition: background-color 1s;
}

.bg-dsl-yellow-light-translucent {
    background-color: var(--secondary-light-translucent);
    transition: background-color 1s;
}

.bg-hover-dsl-blue:hover {
    background-color: var(--primary);
}

.bg-hover-dsl-yellow:hover {
    background-color: var(--secondary);
}

.bg-hover-dsl-blue-light:hover {
    background-color: var(--primary-light);
}

.bg-hover-dsl-yellow-light:hover {
    background-color: var(--secondary-light);
}

.bg-hover-dsl-blue-light-translucent:hover {
    background-color: var(--primary-light-translucent);
}

.bg-hover-dsl-yellow-light-translucent:hover {
    background-color: var(--secondary-light-translucent);
}

.border-bottom-black {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-card-color);
}

.border-top-black {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-card-color);
}

.button {
    font-size: 14px !important;
    padding: 4px;
    text-decoration: none;
    text-align: center;
    background-color: var(--primary) !important;
    color: var(--text-button) !important;
    width: 125px;
    cursor: pointer;
    border: none !important;
    border-radius: 4px !important;
    transition: 0.2s;
    cursor: pointer;
    max-height: 32px;
    height: 32px;
    align-items: center;
    transform: scale(1);
}

    .button:hover {
        background-color: var(--primary-light) !important;
    }

    .button:focus, .button:hover {
        transform: scale(1.03);
    }

    .button[disabled] {
        background-color: var(--clickable-disabled) !important;
        cursor: not-allowed;
    }

        .button[disabled]:hover {
            background-color: var(--clickable-disabled) !important;
        }

a .button, a .button:hover {
    text-decoration: none !important;
}


.button.excel {
    background-color: var(--excel-button) !important;
    margin-left: auto;
    float: right;
}

    .button.excel:hover {
        background-color: var(--excel-button-hover) !important;
        float: right;
    }

    .button.excel[disabled] {
        background-color: var(--excel-button-disabled) !important;
        float: right;
        margin: 0;
    }

.button.delete {
    background-color: var(--error) !important;
}

    .button.delete:hover {
        background-color: var(--error-hover) !important;
    }

.button.cancel {
    background-color: var(--cancel) !important;
}

    .button.cancel:hover {
        background-color: var(--cancel-hover) !important;
    }

.button.grow {
    width: 100%;
}
/*
    C
*/


.content {
    padding: 0 1rem 1rem 1rem;
}

.cursor-alias {
    cursor: alias;
}

.cursor-all-scroll {
    cursor: all-scroll;
}

.cursor-auto {
    cursor: auto;
}

.cursor-cell {
    cursor: cell;
}

.cursor-context-menu {
    cursor: context-menu;
}

.cursor-col-resize {
    cursor: col-resize;
}

.cursor-copy {
    cursor: copy;
}

.cursor-crosshair {
    cursor: crosshair;
}

.cursor-default {
    cursor: default;
}

.cursor-e-resize {
    cursor: e-resize;
}

.cursor-ew-resize {
    cursor: ew-resize;
}

.cursor-grab {
    cursor: grab;
}

.cursor-grabbing {
    cursor: grabbing;
}

.cursor-help {
    cursor: help;
}

.cursor-move {
    cursor: move;
}

.cursor-n-resize {
    cursor: n-resize;
}

.cursor-ne-resize {
    cursor: ne-resize;
}

.cursor-nesw-resize {
    cursor: nesw-resize;
}

.cursor-ns-resize {
    cursor: ns-resize;
}

.cursor-nw-resize {
    cursor: nw-resize;
}

.cursor-nwse-resize {
    cursor: nwse-resize;
}

.cursor-no-drop {
    cursor: no-drop;
}

.cursor-none {
    cursor: none;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-progress {
    cursor: progress;
}

.cursor-row-resize {
    cursor: row-resize;
}

.cursor-s-resize {
    cursor: s-resize;
}

.cursor-se-resize {
    cursor: se-resize;
}

.cursor-sw-resize {
    cursor: sw-resize;
}

.cursor-text {
    cursor: text;
}

.cursor-url {
    cursor: url(myBall.cur),auto;
}

.cursor-w-resize {
    cursor: w-resize;
}

.cursor-wait {
    cursor: wait;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

.cursor-zoom-out {
    cursor: zoom-out;
}
/* 
    D
*/
.datagrid {
    border: 1px solid #AABCD2;
}

    .datagrid td {
        padding: 4px;
        vertical-align: top;
        border: 1px solid #AABCD2;
    }

    .datagrid th {
        padding: 4px;
        background-color: ghostwhite;
        font-weight: normal;
    }

    .datagrid.headerrow {
        background-color: ghostwhite;
    }

        .datagrid.headerrow:hover {
            text-decoration: none;
            background-color: ghostwhite;
            cursor: default;
        }

    .datagrid tr:not(.headerrow):hover {
        background-color: ghostwhite;
        cursor: default;
    }

.datagridnogrids {
    width: 100%;
    font-size: 0.8rem;
    border-radius: 3px
}

    .datagridnogrids td {
        padding: 4px;
        vertical-align: top;
        border: none;
    }

    .datagridnogrids th {
        padding: 4px;
        vertical-align: top;
        border: none;
        text-transform: capitalize;
        font-weight: 500;
    }

    .datagridnogrids thead {
        border: 1px solid var(--border);
    }

.datagridnogrids2 {
    font-size: 14px;
    border: none;
}

    .datagridnogrids2 td {
        padding: 4px;
        vertical-align: top;
        border: none;
    }

.decorated {
    overflow: hidden;
    text-align: center;
}

    .decorated > span {
        position: relative;
        display: inline-block;
    }

        .decorated > span:before, .decorated > span:after {
            content: '';
            position: absolute;
            top: 50%;
            border-bottom: 1px solid;
            width: 100vw;
            margin: 0 20px;
        }

        .decorated > span:before {
            right: 100%;
        }

        .decorated > span:after {
            left: 100%;
        }

.mediumtitleblack {
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: medium;
    font-weight: bold;
    color: black;
    vertical-align: top;
    text-transform: uppercase;
}


.dsl-logo1, .dsl-logo2 {
    font-size: 3.5rem;
    font-style: italic;
}

.dsl-logo1 {
    font-family: 'Franklin Gothic', sans-serif;
    font-weight: 900;
    color: var(--primary);
}

.dsl-logo2 {
    font-family: 'Franklin Gothic Book', sans-serif;
    color: var(--secondary);
}

.dsl-logo3 {
    font-size: 2rem;
    font-family: 'Franklin Gothic', sans-serif;
    font-weight: 400;
    color: var(--primary);
}

@media(max-width: 992px) {
    .dsl-logo1, .dsl-logo2 {
        font-size: 2rem;
    }
}

.document-tag-wrapper {
    display: grid;
    grid-template-columns: 95% 5%;
}

.document-tag {
    border: none !important;
    background: none !important;
}

    .document-tag:hover, .document-tag:focus, .document-tag:active {
        background: none !important;
        box-shadow: none !important;
    }

/*
    E
*/

/*
    F
*/

.flex-col {
    flex-direction: column;
}

/* Flex Items Stretch To Same Width*/
.flex-width-stretch {
    flex: 1 1 0px;
    min-width: var(--width-phone);
}

/* Font-Size */
.fs-20 {
    font-size: 20px;
}
/*
    G
*/
.ghostwhite-hover:hover {
    background-color: unset;
    transition: 0.15s;
}

.ghostwhite-hover:hover {
    background-color: ghostwhite;
}

.goods {
    color: inherit;
    transition: color 1s;
}

    .goods:hover {
        color: var(--primary);
    }

/*
    H
*/

.h-min {
    height: min-content;
}

.help-button {
    box-shadow: none;
    transition: box-shadow 0.15s;
}

    .help-button:hover, .help-button:active {
        box-shadow: 0 0 0 2px var(--primary);
    }

.hero-divider {
    height: 30px;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgb(0 0 0 / 10%), inset 0 0.125em 0.5em rgb(0 0 0 / 15%);
}

@media print {
    .hide-on-print {
        display: none !important;
    }
}
/*
    I
*/

.img-fluid {
    transform: scale(1);
    transition: transform 1s;
}

/*
    J
*/
/*
    K
*/
/*
    L
*/

.light-gradient-background {
    background: linear-gradient(127deg, lightgrey, ghostwhite, darkgrey);
    background-size: 500% 500%;
    animation: gradient 15s linear 0 infinite normal;
}

.label-left {
    width: 125px;
    display: inline-block;
}

/*
    M
*/

.main-gradient-background {
    background: linear-gradient(271deg, var(--secondary), var(--primary-light)), linear-gradient(123deg, var(--primary-light), var(--secondary)), linear-gradient(0deg, var(--primary-light), var(--secondary));
    background-size: 500% 500%;
    animation: gradient 15s linear 0 infinite normal;
}

.major-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.minor-section > * {
    margin: 5px;
}

.minor-section .budget .grid {
    display: grid;
    grid-template-columns: 55% 45%;
    max-width: 80%;
    margin-left: 5px;
}

    .minor-section .budget .grid * {
        padding: 5px;
    }

.minor-section .budget .grid-3 {
    display: grid;
    grid-template-columns: 34% 33% 33%;
    max-width: 80%;
    margin-left: 5px;
}

.minor-section .budget .grid-4 {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    max-width: 80%;
    margin-left: 5px;
}

.minor-section .budget .grid * {
    padding: 5px;
}

.budget-minor-section-total {
    display: grid;
    grid-template-columns: 26% 16% 16% 16% 16%;
}

.minor-section .grid {
    display: grid;
    grid-template-columns: 55% 45%;
    max-width: 80%;
    margin-left: 5px;
}

    .minor-section .grid * {
        padding: 5px;
    }

.minor-section .grid-3 {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    max-width: 100%;
    margin-left: 5px;
}

.minor-section .grid * {
    padding: 5px;
}

.minor-section-total {
    display: grid;
    grid-template-columns: 40% 40% 20%;
}

.max-width-pagetext {
    max-width: 80ch;
}

.max-width-phone {
    max-width: 290px;
}

.max-width-desktop {
    max-width: 800px;
}

.max-width-fit-content {
    max-width: fit-content;
}

.min-width-pagetext {
    min-width: 80ch;
}

.min-width-phone {
    min-width: 290px !important;
}

.med-width-phone {
    min-width: 500px !important;
}

.min-width-desktop {
    min-width: 800px;
}

.min-width-fit-content {
    min-width: fit-content;
}

.min-width-min-content {
    min-width: min-content;
}

.min-width-1fr {
    min-width: 1fr;
}

.min-width-2fr {
    min-width: 2fr;
}

.min-width-3fr {
    min-width: 3fr;
}

.min-width-4fr {
    min-width: 4fr;
}

.min-width-5fr {
    min-width: 5fr;
}

.min-width-6fr {
    min-width: 6fr;
}

.max-width-1fr {
    max-width: 1fr;
}

.max-width-2fr {
    max-width: 2fr;
}

.max-width-3fr {
    max-width: 3fr;
}

.max-width-4fr {
    max-width: 4fr;
}

.max-width-5fr {
    max-width: 5fr;
}

.max-width-6fr {
    max-width: 6fr;
}

.fake-link {
    text-decoration: underline 1px rgba(0,0,0,0);
    color: var(--clickable) !important;
    cursor: pointer;
    transition: 0.25s;
}

    .fake-link:hover {
        text-decoration: underline 1px var(--clickable-hover);
        color: var(--clickable-hover) !important;
        cursor: pointer;
    }

    .fake-link:focus, .fake-link:active {
        color: var(--clickable-hover);
        text-decoration: underline 1px var(--clickable-hover);
    }

    .fake-link + .no-underline {
        text-decoration: none !important;
        color: var(--clickable) !important;
        cursor: pointer;
        transition: 0.25s;
    }

/*
    N
*/
.no-wrap {
    white-space: nowrap !important;
}

.notification {
    height: 18px;
    border-radius: 50%;
    opacity: 1;
    border: 2px white solid;
}

.flash {
    animation: flash 6s ease-in-out infinite;
}

@keyframes flash {
    50% {
        opacity: 0.75;
    }
}


/*
    O
*/
.overflow-none {
    overflow: visible;
}
/*
    P
*/
@media screen and (max-width: 550px) {
    .page {
        position: relative;
        display: flex;
        flex-direction: column !important;
        flex: 1;
        min-height: 100%;
    }
}

.page {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 100%;
}

.pagetitle {
    display: flex;
    font-size: 26px;
    color: dimgrey;
    vertical-align: top;
    padding: 10px 40px 0 16px;
}

.pagetext {
    max-width: 85ch;
}


/*
    Q
*/
/*
    R
*/

.row {
    margin-bottom: 5px;
}

.resize-horizontal {
    resize: horizontal;
}

.resize-vertical {
    resize: vertical;
}

/*
    S
*/
.section {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
}



.subheading {
    background-color: #f7f7f7;
}

.smalltitle {
    font-size: 16px;
    font-weight: 600;
    color: darkslategrey;
    vertical-align: top;
    text-transform: uppercase;
}

.solutions {
    color: inherit;
    transition: color 1s;
}

    .solutions:hover {
        color: var(--secondary);
    }

/*
    T
*/
.text-primary {
    color: var(--primary) !important;
}

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

    .text-clickable:hover {
        color: var(--clickable-hover) !important;
    }

    .text-clickable[disabled] {
        color: var(--clickable-disabled) !important;
    }

.text-dsl-yellow {
    color: var(--secondary);
}

.text-decoration-none-hover {
    text-decoration: none;
}

    .text-decoration-none-hover:hover {
        text-decoration: underline;
    }


.textbox {
    display: block;
    font-size: 15px;
    width: 125px;
    padding: 2px;
    border: 1px solid var(--border);
    transition: 0.25s;
}

    .textbox.full {
        display: block;
    }

    .textbox.grow {
        width: 100%;
    }

    .textbox.large {
        width: 250px;
    }

    .textbox.small {
        width: 50px;
    }

.required:after, input[aria-required="true"]:after {
    content: ' *';
    color: red;
}

.text-danger.field-validation-error {
    font-size: 13px;
    font-variant: small-caps;
    text-transform: lowercase;
    display: flex;
}

.text-smallcaps {
    font-variant: small-caps;
    text-transform: lowercase;
    min-width: 140px;
}

.tidy-table {
    border-bottom: 1px solid var(--border);
    border-radius: 5px;
    width: 100%;
    font-size: 18px;
}

    .tidy-table td {
        padding: .5rem;
    }

    .tidy-table th {
        font-weight: 400;
        background-color: #f7f7f7;
        padding: .25rem .25rem;
    }

    .tidy-table tr {
        background: unset;
        border-bottom: 1px solid var(--border);
        transition: background 1s;
    }

        .tidy-table tr > td {
            background: unset;
            border-left: 1px solid var(--border-translucent);
            border-right: 1px solid var(--border-translucent);
            transition: background 1s;
        }

            .tidy-table tr > td:first-child {
                border-left: none;
            }

            .tidy-table tr > td:last-child {
                border-right: none;
            }

    .tidy-table > tbody > tr:hover {
        background: linear-gradient(127deg, var(--primary-light-translucent), var(--secondary-light-translucent));
        background-size: 300% 300%;
        animation: gradient 15s ease-in infinite;
    }

.text-green {
    color: forestgreen !important;
}

.text-red {
    color: brown !important;
}
/*
    U
*/
.ui-menu .ui-menu-item {
    background: transparent;
    font-size: 16px;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: fixed ghostwhite !important;
    border: none !important;
    color: #333 !important;
    font-weight: normal !important;
    width: 100%;
}

.ui-autocomplete {
    overflow-y: auto;
    max-height: 200px;
    width: 310px;
}
/*
    V
*/

.vertical-divider {
    width: 5px;
    background-color: var(--primary-light-translucent);
    margin: 0 5px;
    box-shadow: 0px 0px 1px 0px black;
}
/*
    W
*/
.width-desktop {
    width: 1000px;
}

.width-min-content {
    width: min-content !important;
}

.width-fit-content {
    width: fit-content !important;
}

.width-max-content {
    width: max-content !important;
}

.width-stretch {
    width: stretch !important;
}

.width-phone {
    width: 321px;
}

.w-1fr {
    width: 1fr;
}

.w-2fr {
    width: 2fr;
}

.w-3fr {
    width: 3fr;
}

.w-4fr {
    width: 4fr;
}

.w-5fr {
    width: 5fr;
}

.w-6fr {
    width: 6fr;
}

/*
    X
*/
/*
    Y
*/
/*
    Z
*/

/* ------ Telerik/Kendo Overrides ------ */

.k-chart {
    height: 250px !important;
}

.k-column-title {
    overflow: visible !important;
}

/*Grouping Header */
.k-grouping-row td {
    background-color: var(--primary-light-translucent) !important;
}

.k-group-footer td {
    background-color: var(--primary-light-translucent-alt) !important;
    border-right: solid 1px #dee2e6 !important;
    border-left: solid 1px #dee2e6 !important;
}

.k-footer-template {
    word-break: keep-all;
}

.k-grid {
    line-height: 1 !important;
    font-size: 16px !important;
}

    .k-grid td {
        padding: 7px !important;
    }

        .k-grid td a {
            color: var(--clickable) !important;
        }

    .k-grid a:hover {
        color: var(--clickable-hover) !important;
        text-decoration: underline 1px var(--clickable-hover) !important;
    }

    .k-grid table {
        border-collapse: collapse !important;
        word-break: break-word;
        overflow: auto hidden;
    }

.k-input-value-text {
    overflow: visible !important;
    text-overflow: unset !important;
}

@media (max-width:700px) {
    .k-grid table, k-column-title {
        word-break: break-all;
    }

    .k-footer-template {
        word-break: break-all;
    }
}

.k-grid td, .k-grid th, .k-grid tr {
    vertical-align: top !important;
}

    .k-grid tr td {
        background-color: white;
    }

tr.k-footer-template td {
    background-color: #e8e9ea;
}

.k-grid-excel {
    box-shadow: none;
    transition: box-shadow 0.15s;
}

    .k-grid-excel:hover, .k-grid-excel:active {
        box-shadow: 0 0 0 2px var(--excel-button);
    }

.k-grid .k-alt, .k-alt {
    background-color: white !important;
}

.k-grid-header tr {
}

.k-header {
    white-space: nowrap !important;
}

.k-column-title {
    white-space: nowrap !important;
    display: inline-block;
}

.k-master-row {
    border-top: 1px solid lightgrey !important;
    border-bottom: 1px solid lightgrey !important;
    vertical-align: text-top !important;
}

    .k-master-row:first-child {
        border-top: none !important;
    }

    .k-master-row:last-child {
        border-bottom: none !important;
    }

@media(min-width:501px) {
    .k-master-row:hover td {
        background-color: #f8f8ff !important;
    }
}

select.k-picker {
    padding: 0 !important;
}
/* ------ Bootstrap Overrides ------ */
.dropdown-item.logout:hover {
    background-color: rgb(180,42,42,0.1) !important;
}

    .dropdown-item.logout:hover:before {
        content: 'Have a good day!';
        float: left;
        color: darkgrey;
        animation: fade-in 0.25s ease-in forwards;
    }

.form-control[type="file"] {
    font-size: 14px;
    vertical-align: text-top;
    text-transform: lowercase;
    font-variant: small-caps;
}

    .form-control[type="file"]:active {
        font-size: 12px;
        vertical-align: text-top;
    }

.card {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px 0px;
}

.card-header {
    background-color: rgba(247,247,247, 1);
    padding: 10px !important;
}

.justify-self-end {
    justify-self: end;
}

#SlowMoving {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: var(--breakpoint-small)) {
    .card {
        width: 100% !important;
    }

    #SlowMoving {
        display: block;
    }
}

.card.no-shadow {
    box-shadow: none;
}

.card-body {
    padding: 10px;
    display: block;
    font-size: 16px;
}

/* ------ Components ------ */

/*
    DSLCARD
*/

dslcard {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    font-size: 0.8rem;
    border: 1px solid lightgrey;
    border-radius: 5px !important;
    margin: 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    justify-items: center;
}

    dslcard > dslcardheader {
        background-color: #f2f2f2;
    }

    dslcard[data-status="success"] {
        box-shadow: rgba(40, 167, 69, 0.3) 0px 5px 15px 0px;
    }

        dslcard[data-status="success"] > dslcardheader {
            background-color: rgba(40,167,69,0.7)
        }

    dslcard[data-status="info"] {
        box-shadow: rgba(23,162,184,0.3) 0px 5px 15px 0px;
    }

        dslcard[data-status="info"] > dslcardheader {
            background-color: rgba(23,162,184,0.7)
        }

    dslcard[data-status="warning"] {
        box-shadow: rgba(250, 40, 40, 0.3) 0px 5px 15px 0px;
    }

        dslcard[data-status="warning"] > dslcardheader {
            background-color: rgba(250,40,40,0.7)
        }

dslcardheader {
    padding: 8px;
    min-height: 35px;
    margin: 0;
    background-color: lightgray;
    border-bottom: 1px solid lightgrey;
    border-radius: 4px 4px 0 0;
    font-size: 1rem;
    color: #333333;
    vertical-align: bottom !important;
    width: 100%;
}

dslcard-title {
    font-size: 1rem;
    color: gray;
    vertical-align: bottom !important;
    text-transform: capitalize;
}

dslcardbody {
    font-size: 0.8rem;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
}

dslcardimage {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    padding: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

/*
    NEIL THE NAVBAR
*/
@media screen and (max-width: 550px) {
    .sidebar {
        background-color: #f8f8ff;
        transition: width 0.2s ease-in;
        width: 100% !important;
        border-bottom: 1px solid var(--border);
        transition: none;
    }

        .sidebar.over-top {
            background-color: #f8f8ff;
            width: 0 !important;
            border-bottom: 1px solid var(--border);
            transition: none;
        }

    #neil-links {
        max-height: 33vh !important;
    }
}

.sidebar {
    background-color: #f8f8ff;
}

.hiding {
    animation: hiding 0.3s ease-in forwards;
}

.neil {
    display: block;
    top: 70px;
}

    .neil.hide > nav > div > a, .neil.hide > nav > div > div > a {
        cursor: default;
    }

    .neil > div > #neil-links {
        min-height: 72vh;
        display: block;
        padding-top: 0;
        overflow-y: auto;
        overflow-x: auto;
    }

    .neil.over-top { /* Hidden */
        position: absolute;
        left: -1000px;
        bottom: 0;
        top: 0;
        z-index: 2;
        transition: left 0.7s;
        min-height: 75vh;
    }

        .neil.over-top.showing {
            left: 0;
            bottom: 0;
            transition: left 0.7s;
        }

        .neil.over-top > div > #neil-links {
            min-height: 72vh;
            max-height: 72vh;
            display: block;
            padding-top: 0;
            overflow-y: auto;
            overflow-x: auto;
        }

.side-nav-link {
    display: flex !important;
    font-size: 15px;
    padding: 2.5px 5px 2.5px 5px;
    align-items: center !important;
    user-select: none !important;
    text-decoration: none;
    background-color: unset;
    transition: background-color 0.15s;
    border: 1px dashed rgba(255,255,255,0);
    border-radius: 5px;
    margin: 2px 5px 2px 5px;
}

    .side-nav-link.active {
        margin-left: 10px;
        background-color: rgba(255,255,255,1) !important;
    }

    .side-nav-link:hover {
        background-color: rgba(255,255,255,1) !important;
        /*border: 1px dashed var(--primary-light);*/
    }

    .side-nav-link.wrapper:hover {
        background-color: rgba(255,255,255,0.8) !important;
        text-decoration: none !important;
    }

    .side-nav-link .dropdown .active {
        background-color: rgba(255,255,0,1) !important;
    }

    .side-nav-link .dropdown :hover {
        background-color: rgba(255,255,0,0.8) !important;
    }

    .side-nav-link.logout:hover {
        background-color: rgb(165,42,42,0.2) !important;
    }

    .side-nav-link.current-page {
        border: 1px dashed var(--primary-light-translucent);
        background-color: rgba(255,255,255,0.7) !important;
        font-weight: 500;
    }

.item-a {
    grid-area: header;
}

.item-b {
    grid-area: main;
}

.item-c {
    grid-area: neil;
}

.item-d {
    grid-area: bottom-links;
}

.item-e {
    grid-area: footer;
}

.layout-grid {
    min-width: 100%;
}

@media screen and (min-width: 551px) {
    .layout-grid {
        display: grid;
        grid-template-rows: auto;
        grid-template-areas:
            "main"
            "bottom-links";
        align-items: stretch;
        justify-items: stretch;
    }

        .layout-grid.neil-is-active {
            display: grid;
            grid-template-rows: auto;
            grid-template-areas:
                "neil main"
                "neil bottom-links";
            justify-items: stretch;
            align-items: stretch;
        }

            .layout-grid.neil-is-active > .item-c {
                column-width: 200px;
            }
}

@media screen and (max-width: 550px) {
    .layout-grid.neil-is-active {
        display: grid;
        grid-template-rows: auto;
        grid-template-areas:
            "neil"
            "main"
            "bottom-links";
        align-items: stretch;
        justify-items: stretch;
    }

    .layout-grid {
        display: grid;
        grid-template-rows: auto;
        grid-template-areas:
            "main"
            "bottom-links";
        align-items: stretch;
        justify-items: stretch;
    }
}

/* ------ ORDER OFFCANVAS ------ */
.side-modal {
    overflow: auto;
    direction: rtl;
    width: var(--breakpoint-small);
    box-shadow: 0 0.5rem 3rem 2rem rgba(var(--bs-body-color-rgb),.25) !important;
    min-width: 360px;
}

@media (max-width: 641px) { /* Less than 641 = Small */
    .side-modal {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 641px) and (max-width: 1007px) { /* Less than 1008px = Medium */
    .side-modal {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 1007px) {
    .side-modal {
        width: 100%;
        max-width: 70%;
    }
}

/*#order-offcanvas {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}

    #order-offcanvas::after {
        content: '';
        background-color: #ccc;
        position: absolute;
        left: 0;
        width: 4px;
        height: 100%;
        cursor: ew-resize;
    }*/

/* ------ Spinner ------ */

.spinner {
    position: relative;
    height: 50px;
    width: 50px;
    border: 1px solid white;
    background: conic-gradient(var(--primary), transparent, var(--secondary), transparent, var(--primary));
    box-shadow: 0px 0px 10px -8px black;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    cursor: progress;
}

    .spinner::before {
        content: "";
        background: white;
        position: absolute;
        width: 80%;
        height: 80%;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: inset 0px 0px 8px -8px black;
        border: 1px solid white;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ------ Animations ------ */
.fade-out-complete {
    animation: fade-out-complete 0.1s ease-in forwards;
    display: none;
    user-select: none;
    pointer-events: none;
}

.fade-in {
    animation: fade-in 0.25s ease-in forwards;
}

.fade-out {
    animation: fade-out 0.25s ease-in forwards;
}

.hue-rotate {
    filter: hue-rotate(0deg);
}

    .hue-rotate:hover {
        animation: hue-rotate 1.5s ease;
    }

/* ------ Keyframes ------ */

@keyframes slide {
    0%, 20% {
        transform: translateX(0);
    }

    21%, 40% {
        transform: translateX(calc(-1*var(--img-width)));
    }

    41%, 60% {
        transform: translateX(calc(-2*var(--img-width)));
    }

    61%, 80% {
        transform: translateX(calc(-3*var(--img-width)));
    }

    81% {
        transform: translateX(calc(-4*var(--img-width)));
    }
}

@keyframes gradient {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

@keyframes hiding {
    from {
        max-width: inherit;
        min-width: inherit;
        width: inherit;
    }

    to {
        max-width: 0 !important;
        min-width: 0 !important;
        width: 0 !important;
    }
}

@keyframes fade-out-complete {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}


@keyframes fade-in {
    0% {
        opacity: 0;
        display: block;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes hue-rotate {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(360deg);
    }
}

@keyframes blur-in {
    from {
        filter: blur(1000px);
    }

    to {
        filter: blur(0);
    }
}

/* ------ Media Query Specific ------ */

@media(max-width:500px) {
    .d-mobile {
        display: block;
    }
}

@media(max-width:500px) {
    .hide-on-mobile {
        display: none;
    }
}

@media(min-width:501px) {
    .d-mobile {
        display: none;
    }
}
/*
@media(min-width:501px) {
    .hidden-sm {
        display: none;
    }
}

@media(min-width:701px) {
    .hidden-md {
        display: none;
    }
}

@media(max-width:700px) {
    .hidden-md {
        display: none;
    }
}

@media(min-width:901px) {
    .hidden-lg {
        display: block;
    }
}

@media(max-width:900px) {
    .hidden-lg {
        display: none;
    }
}*/