/** APP GLOBAL STYLES **/

/* Fonts */
@font-face {
    font-family: 'Futura';
    font-weight: 300;
    font-style: normal;
    src: url('fonts/FuturaPT/FuturaPTLight.otf') format('opentype');
}

@font-face {
    font-family: 'Futura';
    font-weight: 300;
    font-style: italic;
    src: url('fonts/FuturaPT/FuturaPTLightOblique.otf') format('opentype');
}

@font-face {
    font-family: 'FuturaPT';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/FuturaPT/FuturaPTMedium.otf') format('opentype');
}

@font-face {
    font-family: 'FuturaPT';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/FuturaPT/FuturaPTMediumOblique.otf') format('opentype');
}

@font-face {
    font-family: 'FuturaPT';
    font-weight: 600;
    font-style: normal;
    src: url('fonts/FuturaPT/FuturaPTHeavy.otf') format('opentype');
}

@font-face {
    font-family: 'FuturaPT';
    font-weight: 600;
    font-style: italic;
    src: url('fonts/FuturaPT/FuturaPTHeavyOblique.otf') format('opentype');
}

@font-face {
    font-family: 'FuturaPT';
    src: url('fonts/FuturaPT/FuturaPTBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaPT';
    src: url('fonts/FuturaPT/FuturaPTBoldOblique.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}


@font-face {
    font-family: 'FuturaPT';
    font-weight: 800;
    font-style: normal;
    src: url('fonts/FuturaPT/FuturaPTExtraBold.otf') format('opentype');
}

@font-face {
    font-family: 'FuturaPT';
    font-weight: 800;
    font-style: italic;
    src: url('fonts/FuturaPT/FuturaPTExtraBoldOblique.otf') format('opentype');
}

/* Root variables */
:root {
    --MME-primary: #1E164E;
    --MME-secondary: #009CDD;
    --MME-optional: #B7CBCF;
    --MME-optional2: #E27F45;
    --MME-optional3: #CDD4D1;
    --MME-optional4: #74C4DD;
    --MME-gray: #D9D9D9;
    --MME-dark-gray: #3C3C3C;
    --MME-white: #FFF;
    --MME-black: #000;
    --MME-danger: #DA503C;
    --MME-success: #9AC455;
    --MME-font-family: 'FuturaPT', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --MME-light-font-weight: 300;
    --MME-standard-font-weight: 400;
    --MME-heavy-font-weight: 600;
    --MME-bold-font-weight: 700;
    --MME-xbold-font-weight: 800;
    --MME-medium-font-size: 17px;
    --MME-medium-line-height: 21.79px;
    --MME-small-font-size: 14px;
    --MME-small-line-height: 17.95px;
    --MME-big-font-size: 24px;
    --MME-big-line-height: 30.77px;
    --MME-xbig-font-size: 30px;
    --MME-xbig-line-height: 38.46px;
    --MME-modal-default-width: 330px;
    --MME-toaster-info-background: #CCEBF8;
    --MME-toaster-error-background: #F8DCD8;
    --MME-toaster-warning-background: #F8F3D8;
    --MME-toaster-success-background: #CCF8D7;
}

html, body {
    font-family: var(--MME-font-family);
    font-weight: var(--MME-standard-font-weight);
    font-size: var(--MME-medium-font-size);
    line-height: var(--MME-medium-line-height);
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

h3 {
    color: var(--MME-dark-gray);
    font-weight: var(--MME-bold-font-weight);
    font-size: var(--MME-xbig-font-size);
    line-height: var(--MME-xbig-line-height);
    margin-bottom: 15px;
}

a, .btn-link {
    font-size: var(--MME-medium-font-size);
    font-weight: var(--MME-standard-font-weight);
    line-height: var(--MME-medium-line-height);
    color: var(--MME-secondary);
    text-decoration: none;
}

    a.nav-link {
        color: var(--MME-primary);
    }

        a.nav-link:hover,
        a.nav-link:focus,
        a.nav-link.active {
            color: var(--MME-secondary);
        }

/** MODALS */
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/** TABLES **/
table {
    margin-top: 50px;
}

th {
    font-weight: var(--MME-standard-font-weight);
    font-size: var(--MME-medium-font-size);
    line-height: var(--MME-medium-line-height);
    border-right: var(--MME-gray);
    border-bottom: var(--MME-gray);
}

thead tr {
    border-bottom: solid 1px var(--MME-gray);
}

tr {
    vertical-align: baseline;
}

th:not(:last-child) {
    border-right: solid 1px var(--MME-gray);
}

td {
    font-weight: var(--MME-standard-font-weight);
    font-size: var(--MME-medium-font-size);
    line-height: var(--MME-medium-line-height);
}

.sort-icon {
    cursor: pointer;
    margin-left: 10px;
}

    .sort-icon.active-sort-col {
        content: url("/images/sort_down_primary.svg");
    }

    .sort-icon.desc {
        transform: rotate(180deg);
    }

/** BUTTONS **/
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-outline-secondary {
    color: var(--MME-white);
    line-height: var(--MME-medium-line-height);
    padding: 6px 12px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: auto;
    border: 0;
    margin: 0;
}

    .btn-primary,
    .btn-primary:disabled,
    .btn-primary:focus,
    .btn-primary:hover,
    .btn-primary:focus:not(:active) {
        background-color: var(--MME-primary);
        border-color: var(--MME-primary);
    }

    .btn-secondary,
    .btn-secondary:disabled,
    .btn-secondary:focus,
    .btn-secondary:hover,
    .btn-secondary:focus:not(:active) {
        background-color: var(--MME-secondary);
        border-color: var(--MME-secondary);
    }

    .btn-danger,
    .btn-danger:disabled,
    .btn-danger:focus,
    .btn-danger:hover,
    .btn-danger:focus:not(:active) {
        background-color: var(--MME-danger);
        border-color: var(--MME-danger);
    }

        .btn-primary:hover, .btn-primary:focus:not(:active), btn-primary:active, btn-primary:focus,
        .btn-secondary:hover, .btn-secondary:focus:not(:active), btn-secondary:active, btn-secondary:focus,
        .btn-danger:hover, .btn-danger:focus:not(:active), btn-danger:active, btn-danger:focus {
            opacity: 0.85;
        }

.btn-outline-secondary {
    color: var(--MME-secondary);
    border: solid 1px var(--MME-secondary);
}

.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:active,
.btn-check:checked + .btn-outline-secondary {
    background: var(--MME-secondary);
    color: var(--MME-white);
    border: solid 1px var(--MME-secondary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--MME-white), 0 0 0 0.25rem var(--MME-secondary);
}


/** DROPDOWNS **/
.dropdown-menu {
    min-width: fit-content;
    padding: 6px 12px;
}

    .dropdown-menu li:not(:last-child) {
        margin-bottom: 10px;
    }

.show.dropdown-menu {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.dropdown > .btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border: solid 1px var(--MME-gray);
    height: 36px;
    border-radius: 5px;
    padding: 6px 12px;
}

.header .dropdown label {
    margin-bottom: 5px;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-item {
    cursor: pointer;
    padding: 0;
}

    .dropdown-item:hover {
        color: var(--MME-secondary);
        background: none;
    }

    .dropdown-item label {
        width: 100%;
        cursor: pointer;
        user-select: none;
    }

/** Tooltip **/
.tooltip-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .tooltip-container .tooltip-text {
        visibility: hidden;
        width: max-content;
        background: var(--MME-white);
        color: var(--MME-black);
        border: solid 1px var(--MME-gray);
        border-radius: 5px;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        padding: 6px 12px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        margin-top: 27px;
    }

    .tooltip-container:hover .tooltip-text {
        visibility: visible;
    }

/** DEFAULT BLAZOR STYLES **/
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.invalid {
    outline: 1px solid var(--MME-danger);
}

.validation-message {
    color: var(--MME-danger);
}

/** TOASTER **/
.toaster {
    font-size: var(--MME-medium-font-size) !important;
    border-radius: 5px !important;
    opacity: 1 !important;
}

    .toaster.toast-success {
        color: var(--MME-success) !important;
        background-color: var(--MME-toaster-success-background) !important;
    }

    .toaster.toast-error {
        color: var(--MME-danger) !important;
        background-color: var(--MME-toaster-error-background) !important;
    }

    .toaster.toast-info {
        color: var(--MME-secondary) !important;
        background-color: var(--MME-toaster-info-background) !important;
    }

    .toaster.toast-warning {
        color: var(--MME-optional2) !important;
        background-color: var(--MME-toaster-warning-background) !important;
    }

.toast-close-button {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
    font-size: 35px !important;
    font-weight: 400 !important;
    margin-right: 10px;
    float: none;
}

#toast-container:has(.toast-close-button:focus) {
    display: none;
}

.toast-message {
    position: relative !important;
    left: 0 !important;
    top: 0.4em !important;
    margin-bottom: 10px;
}

.toaster.toast-success button.toast-close-button {
    color: var(--MME-success) !important;
}

.toaster.toast-error button.toast-close-button {
    color: var(--MME-danger) !important;
}

.toaster.toast-info button.toast-close-button {
    color: var(--MME-secondary) !important;
}

.toaster.toast-warning button.toast-close-button {
    color: var(--MME-optional2) !important;
}

div#toast-container.toast-top-center {
    top: 12.5px !important;
}

    div#toast-container.toast-top-center > .toast-info,
    div#toast-container.toast-top-center > .toast-error,
    div#toast-container.toast-top-center > .toast-success,
    div#toast-container.toast-top-center > .toast-warning {
        background-image: none !important;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

#toast-container > div {
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 2.5px 2.5px 2.5px 10px !important;
}

input[type='date'].datepicker {
    display: block;
    border: solid 1px var(--MME-gray);
    height: 36px;
    border-radius: 5px;
    padding: 6px 12px;
    width: 225px;
}

input[type='date'].datepicker:focus-visible {
    outline: none;
}

    input[type="date"].datepicker::-webkit-calendar-picker-indicator {
        background-image: url('images/date.svg');
        cursor: pointer;
        background-color: var(--MME-secondary);
        padding: 8px;
        width: 18px;
        height: 20px;
        position: absolute;
        right: 0;
        border-radius: 0 5px 5px 0;
        color: white
    }