/* #region VARIABLES */

html, body {
    --filter-teal-300:  invert(95%) sepia(10%) saturate(356%) hue-rotate(120deg) brightness(93%) contrast(98%);
    --filter-teal-600:  invert(94%) sepia(67%) saturate(321%)  hue-rotate(94deg)  brightness(86%)  contrast(90%);
    --filter-moss-600:  invert(38%) sepia(16%) saturate(1422%) hue-rotate(120deg) brightness(96%)  contrast(92%);
    --filter-gray-700:  invert(6%)  sepia(6%)  saturate(5441%) hue-rotate(167deg) brightness(91%)  contrast(89%);
    --filter-green-600: invert(53%) sepia(12%) saturate(2131%) hue-rotate(66deg)  brightness(104%) contrast(92%);
    --filter-red-600:   invert(17%) sepia(78%) saturate(5515%) hue-rotate(349deg) brightness(87%) contrast(94%);
    --filter-citrus-600: invert(67%) sepia(70%) saturate(439%) hue-rotate(354deg) brightness(102%) contrast(93%);
    --filter-citrus-900: invert(38%) sepia(58%) saturate(3806%) hue-rotate(32deg) brightness(101%) contrast(83%);
    --filter-legrand-gray: invert(42%) sepia(13%) saturate(656%) hue-rotate(158deg) brightness(94%) contrast(88%);
    --filter-white:     brightness(0) saturate(100%) invert(100%);
    --gray-100: #F1F3F3;
    --gray-300: #C8D2D6;
    --gray-600: #192631;
    --gray-600-16: #19263129;
    --gray-600-40: #19263166;
    --gray-700: #121B23;
    --teal-100: #F5FBFA;
    --teal-200: #E1F2F0;
    --teal-300: #CCE9E6;
    --teal-500: #ADDBD7;
    --teal-600: #99D3CE;
    --teal-700: #76BCB6;
    --teal-900: #529690;
    --moss-500: #3B8175;
    --moss-600: #267467;
    --red-600:  #D81926;
    --green-600: #4EAA40;
    --citrus-900: #A87415;
    --legrand-gray: #596E7A;
    --opacity-08: #00000014;
}

/* #endregion */
/* #region RESETS and STYLING OF BASIC TAGS */

/* Set the 4 whole-page containers to the height of the screen.
   This means there will only be page-wide vertical scrolling when (viewport height) < 400px. */
html, body, #app, div.page {
    height: 100%;
    min-height: 400px;
}

html, body {
    font-family: Roboto;
    color: var(--gray-600);
}

p, html, body {
    margin: 0;
}

main {
    background-color: var(--gray-100);
}

a {
    color: var(--moss-600);
}

hr {
    width: 100%;
    border-top: 1px solid var(--gray-100);
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: left;
}

td {
    padding: 0 32px 0 0;
}

/* #endregion */
/* #region GENERIC CLASSES */

.fill-viewport.fill-viewport {
    height: 100vh;
    width: 100vw;
    margin: 0;
}

.white-background, .mdc-select:not(.mdc-select--disabled) .mdc-select__anchor {
    background-color: white;
}

.hidden {
    display: none !important;
}

.overlay-container {
    position: relative;
    }
    .overlay-container > * {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
    }

.font-size-32 {
    font-size: 32px;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-16, input {
    font-size: 16px;
}

.font-size-14, .mdc-select__selected-text {
    font-size: 14px;
}

.font-weight-bold {
    font-weight: 500;
}

.font-weight-light {
    font-weight: 300;
}

.font-color-legrand-gray {
    color: var(--legrand-gray);
}

.font-color-red {
    color: var(--red-600);
}

.font-color-green {
    color: var(--green-600);
}

.font-color-citrus {
    color: var(--citrus-900);
}

.default-shadow, .mat-select {
    box-shadow: 0 4px 8px 0 var(--gray-600-16),
                0 0px 8px 0 var(--opacity-08);
}

.wide-shadow, .mdc-select__menu {
    box-shadow: 0 8px 16px 0 var(--gray-600-16),
                0 0px  4px 0 var(--opacity-08);
}

.opacity-half {
    opacity: 50%;
}

/* #endregion */
/* #region TOOLTIPS */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted var(--legrand-gray);
}

.tooltip .tooltiptext {
    visibility: hidden;
    white-space: nowrap;
    background-color: var(--gray-600);
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 4px;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 100ms;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--gray-600) transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* #endregion */
/* #region TOP ROW */

.logo-legrand-small {
    height: 31px;
}

.top-row {
    display: flex;
    min-height: 108px;
    justify-content: space-between;
}

/* #endregion */
/* #region BUTTONS */ 

button, .button {
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.67px;
    text-transform: uppercase;
    background-color: unset;
    border: none;
    cursor: pointer;
    padding: 12px 24px;
}

.button__filled {
    transition: background 300ms, border-color 200ms;
    background: linear-gradient(to left, var(--teal-300) 0%, var(--teal-300) 45%, transparent 45%, transparent 55%, var(--teal-300) 55%, var(--teal-300) 100%) center/1200% no-repeat;
    background-color: var(--teal-600);
}
    .button__filled:hover {
        background-color: var(--teal-300);
        border-color: var(--teal-300);
    }
    .button__filled:active {
        background-image: linear-gradient(to left, var(--teal-300) 0%, var(--teal-300) 100%);
        border-color: var(--teal-600);
        background-color: var(--teal-600);
        transition: background-size 0ms;
        background-size: 100%;
    }

.button__outlined {
    border: 1px solid var(--teal-900);
    transition: background 300ms, border-color 200ms;
    background: linear-gradient(to left, var(--teal-300) 0%, var(--teal-300) 45%, transparent 45%, transparent 55%, var(--teal-300) 55%, var(--teal-300) 100%) center/1200% no-repeat white;
}
    .button__outlined:hover {
        background-color: var(--teal-300);
        border-color: transparent;
    }
    .button__outlined:active {
        background-image: linear-gradient(to left, var(--teal-300) 0%, var(--teal-300) 100%);
        border-color: var(--teal-600);
        background-color: var(--teal-600);
        transition: background-size 0ms;
        background-size: 100%;
    }

.button__text-only {
    transition: background-color 50ms;
}
    .button__text-only:hover {
        text-decoration: underline;
    }
    .button__text-only:active {
        text-decoration: none;
        background-color: var(--teal-100);
    }

.button__icon {
    padding: 0;
    height: 48px;
    width: 48px;
    transition: background-color 200ms;
}
    .button__icon:hover, .button__icon--active {
        background-color: var(--teal-100);
    }
    .button__icon:active {
        background-color: var(--teal-300);
    }

/* #endregion */
/* #region RADIO BUTTONS */

input[type=radio] {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--legrand-gray);
    display: inline-grid;
    place-content: center;
    transition: border-color 200ms;
}

input[type="radio"]::before {
    content: "";
    margin: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform;
    box-shadow: inset 10px 10px var(--teal-700);
}

input[type='radio']:checked {
    border: 2px solid var(--teal-700);
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

/* #endregion */
/* #region CHECKBOXES */

input[type=checkbox] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--teal-900);
    cursor: pointer;
  }
  
  input[type=checkbox]:disabled {
    cursor: unset;
  }

/* #endregion */
/* #region ICONS */

.icon {
    height: 24px;
    width: 24px;
    filter: var(--filter-moss-600);
    user-select: none;
}

.icon__green {
    filter: var(--filter-green-600);
}

.icon__gray {
    filter: var(--filter-legrand-gray);
}

.icon__red {
    filter: var(--filter-red-600);
}

.icon__citrus {
    filter: var(--filter-citrus-900);
}

.icon__20 {
    width: 20px;
    height: 20px;
}

.icon__16 {
    width: 16px;
    height: 16px;
}

.icon__dropdown {
    transform: rotate(90deg);
    transition: transform 200ms, filter 200ms;
}

/* #endregion */
/* #region NOTCHED BORDER */

.notched-border {
    display: flex;
    width: 722px;
    height: 51px;
    left: -1px;
    top: -1px;
    pointer-events: none;
}
    .notched-border__left {
        border: 1px solid var(--gray-300);
        border-right: none;
        width: 56px;
    }
    .notched-border__notch {
        border-bottom: 1px solid var(--gray-300);
        padding: 0px 4px;
        max-width: 120px;
        transition: padding 200ms, max-width 200ms;
    }
        .notched-border__notch--disabled {
            max-width: 0px;
            padding: 0px;
            transition-delay: 50ms;
        }
    .notched-border__right {
        border: 1px solid var(--gray-300);
        border-left: none;
        flex-grow: 1;
    }
    .notched-border__label {
        display: inline-block;
        color: var(--legrand-gray);
        font-size: 16px;
        white-space: nowrap;
        transform: translateY(18px);
        transition: transform 200ms, font-size 200ms;
    }
        .notched-border__label--floating {
            font-size: 12px;
            transform: translateY(-10px);
        }

/* #endregion */
/* #region ERROR/LOADING FEEDBACK */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.loading-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin: 32px 0;
}

.loading-spinner {
    border: 8px solid var(--gray-100);
    border-top: 8px solid var(--teal-700);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    animation: spin 1s linear infinite;
}
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

/* #endregion */
/* #region MATBLAZOR */

.mdc-line-ripple, .mdc-select__ripple, .mdc-select__dropdown-icon, .mdc-list-item__ripple {
    display: none;
}

.mat-select {
    border: 1px solid var(--gray-300);
    transition: border-color 100ms;
    min-width: 86px;
}

.mdc-select--focused {
    border: 1px solid var(--teal-900);
}

.mdc-select .mdc-select__anchor {
    align-items: center;
    border-radius: 0;
}

.mdc-select:not(.mdc-select--disabled) .mdc-select__anchor {
    background-color: white;
}

.mdc-menu-surface {
    transition: opacity .03s linear
}

.mdc-select__menu {
    border-radius: 0;
    min-width: 86px;
    transform: translateY(2px);
}

.mdc-select__menu .mdc-list-item {
    font-weight: 500;
    color: var(--gray-600);
    transition: background-color 50ms, color 200ms;
}

.mdc-select__menu .mdc-list .mdc-list-item--selected {
    background-color: var(--teal-100);
}

.mdc-select__menu .mdc-list .mdc-list-item:hover {
    color: var(--moss-500);
}

/* #endregion */
/* #region MISC */

:disabled, .disabled, [disabled] {
    opacity: 50%;
    pointer-events: none;
}

.content-panel-padding-wrapper {
    padding: 0 24px 24px;
}

.data-label {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.modal-nav-button {
    color: var(--moss-600);
    margin: 12px 0;
    float: right;
}

.modal .white-background {
    background-color: transparent;
}

.icon-text-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* #endregion */