/*
    =============
    Page styles
    =============
*/
@font-face {
    font-family: TradeGothicLT-Bold;
    src: url("../fonts/TradeGothicLT-Bold.ttf") format("opentype");
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: TradeGothicLT-Bold-Italic;
    src: url("../fonts/TradeGothicLT-Bold-Italic.ttf") format("opentype");
    font-style: italic;
    font-weight: 700
}

@font-face {
    font-family: TradeGothicLT-Italic;
    src: url("../fonts/TradeGothicLT-Italic.ttf") format("opentype");
    font-style: italic;
    font-weight: 400
}

@font-face {
    font-family: TradeGothicLT-Light;
    src: url("../fonts/TradeGothicLT-Light.ttf") format("opentype");
    font-weight: 300
}

@font-face {
    font-family: TradeGothicLT-Light-Italic;
    src: url("../fonts/TradeGothicLT-Light-Italic.ttf") format("opentype");
    font-style: italic;
    font-weight: 300
}

@font-face {
    font-family: TradeGothicLT-Extended;
    src: url("../fonts/TradeGothicLT-Extended.ttf") format("opentype");
    font-weight: 500
}

@font-face {
    font-family: TradeGothicLT-Regular;
    src: url("../fonts/TradeGothicLT-Regular.ttf") format("opentype");
    font-weight: 400
}

.background-gradient {
    background: linear-gradient(4.05deg, var(--background-gradient-start) 2.72%,var(--background-gradient-end) 73.33%);
    color: var(--dark);
}

.primary-gradient {
    background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
}

html,
body {
    --dark: #323232;
    --light: #FFFFFF;
    --highlight: #C5C5C5;
    --dark-seperator: #D9D9D9;
    --background-gradient-start: #EBEBEB;
    --background-gradient-end: #FFFFFF;
    --primary-gradient-start: #129D9D;
    --primary-gradient-end: #80BD98;
    --primary-gradient-start-transparent: #80BD98CC;
    --primary-gradient-end-transparent: #129D9DCC;
    --primary-light: #40BFBF;
    --primary: #189C9B;
    --primary-dark: #118A8A;
    --secondary-light: #CE4206;
    --secondary-dark: #E99A02;
    --success: #00CB2D;
    --warn: #E85605;
    --primary-error: #FF6F61;
    --primary-fatal: #d11717;
    --primary-warning: #FFEB3B;
    --primary-warning-secondary: #FFCC80;
    --primary-info: #64B5F6;
    --primary-success: #66BB6A;
    --primary-info-secondary: #7E57C2;
    --panel-border-radius: 10px;
    --panel-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
    --unavailable: grey;
    font-family: "TradeGothicLT-Regular";
    color: var(--dark);
    font-size: 16px;
    /*Attention: You cannot use these variables in a media query - they are merely for reference!*/
    --vp-laptop: 1500px; /* Based on Edge with side-tabs on a 1080p-screen: Everything smaller than that is considered "Laptop" */
    --vp-tablet: 960px;
    --vp-mobile: 720px;
}

.button {
    font-family: "TradeGothicLT-Regular";
    background-color: var(--dark);
    color: var(--light);
    cursor: pointer;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    height: 3rem;
    padding: 0rem 1rem;
    border-radius: 2px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .button:hover {
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.60);
        font-size: 1.05rem;
    }

    .button.button-secondary {
        background-color: transparent;
        color: var(--dark);
        box-shadow: none;
    }

        .button.button-secondary:hover {
            background-color: var(--highlight);
            color: var(--dark);
            box-shadow: none;
            font-size: 1.05rem;
        }

a:not(.button),
a:not(.button):hover,
a:not(.button):active,
a:not(.button):visited {
    text-decoration: none;
    font-weight: 300;
    color: var(--dark);
    font-size: 0.9rem;
    opacity: 0.8;
}


input:not(.k-input input):not(.k-checkbox),
textarea:not(.k-input textarea),
option:not(.k-input option),
select:not(.k-input select) {
    font-weight: 600;
    background-color: var(--light);
    border-radius: 4px;
    height: 2.5rem;
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.3);
    padding: 0 1rem;
    transition: 0.2s;
    font-size: 1rem;
    border: 1px solid transparent;
    color: var(--dark);
}

.form-group {
    display: grid;
    gap: 0.2rem;
    grid-template-columns: 1fr minmax(1fr, auto);
    font-size: 0.8rem;
    font-weight: 300;
}

    .form-group > a,
    .form-group > a:hover,
    .form-group > a:active,
    .form-group > a:visited {
        font-size: 0.8rem;
        padding: 0 1rem;
    }

    .form-group .k-input,
    .form-group .k-dropdownlist,
    .form-group .k-datetimepicker,
    .form-group input:not(.k-input input):not(.k-checkbox),
    .form-group textarea:not(.k-input textarea),
    .form-group select:not(.k-input select) {
        grid-column-end: span 2;
    }

    .form-group .validation-message:not(.form-group .telerik-blazor .validation-message) {
        color: var(--warn);
    }

    .form-group .validation-message:not(.form-group .telerik-blazor .validation-message),
    .form-group label:not(.form-group .telerik-blazor label) {
        padding: 0 1rem;
    }

    .form-group > *:nth-child(3) {
        text-align: end;
    }

option {
    font: "TradeGothicLT-Regular";
}

input:focus:not(.k-input input:focus):not(.k-checkbox:focus),
textarea:focus:not(.k-input textarea:focus),
select:focus:not(.k-input select:focus),
a:focus:not(.k-input a:focus) {
    outline: none;
    box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5);
}

.panel {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
}

    .panel .notification {
        padding: 1rem 2rem;
        color: var(--light);
        background-color: var(--warn);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .panel .notification.Success {
            background-color: var(--success);
            color: var(--dark);
        }

        .panel .notification.Info {
            background-color: lightblue;
            color: var(--dark);
        }

        .panel .notification:nth-child(1) {
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }

        .panel .notification .title {
            font-size: 1.5rem;
        }


    .panel .panel-close {
        position: absolute;
        right: 1rem;
        top: 1rem;
        cursor: pointer;
    }

        .panel .panel-close::after {
            content: '✕';
        }

    .panel .panel-content {
        padding: 2rem 2rem;
        flex: auto;
        min-height: 0;
    }


    .panel .notification + .panel-content,
    .panel .notification + * .panel-content {
        padding-top: 0rem;
    }

    .panel.dark {
        box-shadow: none;
        border-radius: 0;
        background-color: var(--dark);
        color: var(--light);
        padding: 0.5rem;
    }




@media (pointer: coarse) {
    .mouse-only {
        display: none !important;
    }
}

@media (pointer: fine) {
    .touch-only {
        display: none !important;
    }
}

@media screen and (max-width: 1500px) {
    .hide-below-desktop {
        display: none !important;
    }
}

@media screen and (min-width: 1499px) {
    .hide-above-desktop {
        display: none !important;
    }
}

@media screen and (min-width: 960px) {
    .hide-below-tablet {
        display: none !important;
    }
}

@media screen and (min-width: 959px) {
    .hide-above-tablet {
        display: none !important;
    }
}

@media screen and (max-width: 720px) {
    .hide-below-mobile {
        display: none !important;
    }
}

@media screen and (min-width: 719px) {
    .hide-above-mobile {
        display: none !important;
    }
}

/*
    =============
    Telerik additions
    =============
*/

/* Button-Animations */
button.telerik-blazor .k-button-text {
}

button.telerik-blazor:hover {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.60);
}

    button.telerik-blazor:hover .k-button-text {
        font-size: 1.05rem;
    }

.k-chart {
    z-index: 2;
}

.k-child-animation-container {
    transition-duration: 150ms !important;
}

/* Overrides for inconsistencies within the theme */
.k-textarea:focus-within .k-input-inner,
.k-datetimepicker:focus-within .k-input-inner {
    box-shadow: none;
}

.k-input-inner {
    height: 2.5rem;
    font-weight: 600;
    color: var(--dark);
    padding: 0 1rem !important;
}

    .k-input-inner::placeholder {
        font-weight: 400;
    }

.k-numerictextbox .k-input-inner {
    height: 2.5rem;
}

.k-input {
    height: 2.5rem;
}

    .k-input.k-textarea {
        height: auto;
        min-height: 3rem;
    }

textarea.k-input-inner {
    padding: 1rem !important;
    height: auto;
    min-height: 3rem;
}

.k-rounded-md {
    border-radius: 4px;
}

.k-multiselect .k-input-values {
    padding: 0 1rem;
}

.k-multiselect .k-input-inner {
    padding: 0 !important;
}

.k-input-button {
    height: unset;
}

.k-calendar .k-icon-button {
    padding: 4px;
}

.k-calendar .red-date,
.k-calendar .red-date .k-link {
    background-color: var(--primary-error) !important;
    border-radius: 0;
}

.k-calendar .yellow-date,
.k-calendar .yellow-date .k-link {
    background-color: var(--primary-warning) !important;
    border-radius: 0;
}

.k-calendar .green-date,
.k-calendar .green-date .k-link {
    background-color: var(--primary-success) !important;
    border-radius: 0;
}

    .k-calendar .red-date.k-selected .k-link,
    .k-calendar .yellow-date.k-selected .k-link,
    .k-calendar .green-date.k-selected .k-link {
        box-shadow: inset 0 0 0 2px black !important;
    }

.primary-dialog {
    background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    max-width: 95%;
    max-height: 95%;
}

    .primary-dialog .k-dialog-titlebar {
        background-color: transparent;
    }

    .primary-dialog .k-window-content, .k-prompt-container {
        background-color: rgba(255,255,255,0.95);
    }

.edit-form-style {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
}

.bms-page-root {
    color: var(--light);
    height: 100%;
    width: 100vw;
    display: grid;
    grid-template-rows: 4rem 1fr;
    gap: 1rem;
}

    .bms-page-root header {
        grid-row: 1 / 2; /* Place in the first row */
        grid-column: 1 / 3; /* Span across the first two columns */
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
    }

        .bms-page-root header > .panel {
            height: 1.5rem;
            grid-column: 2;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

    .bms-page-root.page-right-navigation {
        grid-template-columns: 3fr 6rem;
    }

        .bms-page-root.page-right-navigation > form,
        .bms-page-root.page-right-navigation main {
            padding-bottom: 1rem;
            padding-left: 1rem;
            grid-row: 2 / 3; /* Place in the second row */
            grid-column: 1 / 2; /* Stay in the first column */
        }

        .bms-page-root.page-right-navigation aside {
            grid-row: 1 / 5; /* Span from the first row to the fourth row */
            grid-column: 2 / 3; /* Stay in the second column */
        }

    .bms-page-root.page-left-navigation {
        grid-template-columns: 6rem 3fr;
    }

        .bms-page-root.page-left-navigation > form,
        .bms-page-root.page-left-navigation main {
            padding-bottom: 1rem;
            padding-right: 1rem;
            grid-row: 2 / 3; /* Place in the second row */
            grid-column: 2 / 3; /* Stay in the second column */
        }

        .bms-page-root.page-left-navigation aside {
            grid-row: 1 / 5; /* Span from the first row to the fourth row */
            grid-column: 1 / 1; /* Stay in the first column */
        }


    .bms-page-root aside {
        display: grid;
        gap: 0.5rem;
        padding: 0.5rem 0;
        justify-content: end;
    }

    .bms-page-root.page-left-navigation aside {
        justify-content: start;
    }

    .bms-page-root aside > div {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background-color: var(--dark);
        color: var(--light) !important;
        width: 4rem;
        font-size: 2rem;
        box-shadow: var(--panel-box-shadow);
        padding: 0.75rem;
        justify-self: end;
        transition: 0.1s;
        cursor: pointer;
    }

        .bms-page-root aside > div:hover {
            width: 5rem;
            font-size: 2rem;
        }

    .bms-page-root.page-right-navigation aside > div {
        border-top-left-radius: var(--panel-border-radius);
        border-bottom-left-radius: var(--panel-border-radius);
        justify-self: end;
    }

    .bms-page-root.page-left-navigation aside > div {
        border-top-right-radius: var(--panel-border-radius);
        border-bottom-right-radius: var(--panel-border-radius);
        justify-self: start;
    }



    .bms-page-root .panel.border {
        border-radius: 10px;
    }

    .bms-page-root .border {
        border: 1px solid var(--dark-seperator);
        display: flex;
        padding: 0.2em;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 0.5em;
    }

        .bms-page-root .border > span {
            font-size: 1.5em;
        }

        .bms-page-root .border.tl-rnd {
            border-top-left-radius: var(--panel-border-radius);
        }

        .bms-page-root .border.tr-rnd {
            border-top-right-radius: var(--panel-border-radius);
        }

        .bms-page-root .border.bl-rnd {
            border-bottom-left-radius: var(--panel-border-radius);
        }

        .bms-page-root .border.br-rnd {
            border-bottom-right-radius: var(--panel-border-radius);
        }


        .bms-page-root .border.rnd {
            border-radius: var(--panel-border-radius);
        }

        .bms-page-root .border > span.title {
            font-size: 0.95em;
            color: var(--secondary-dark);
        }

    .bms-page-root .panel .notification {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


.floating-input {
    display: flex;
    align-items: center;
}

.app-detail_content:has(> .sparesa_root) {
    max-width: 100vw !important;
}