@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/Roboto-Thin.ttf") format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Roboto-Regular.ttf") format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/Roboto-Medium.ttf") format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/Roboto-Bold.ttf") format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/Roboto-Black.ttf") format('truetype');
}

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-VariableFont_wdth,wght.ttf") format('truetype')
}

@font-face {
    font-family: "MS Reference Sans Serif";
    src: url("/fonts/MS Reference Sans Serif.ttf") format('truetype')
}

:root {
    --color-vitens-blue: #0E4194;
    --color-vitens-yellow: #EDE412;
    --color-vitens-light-blue: #E8F6F5;
    --color-light-red: #fab9b9;
    --color-blue: #a8bffd;
    --color-light-blue: #c6d5fe;
    --color-green: #B4FBB3;
    --color-light-green: #d2fbd3;
    --color-dark-gray: #191F26;
    --color-light-gray: #dddddd;
    --color-gray: #aaaaaa;
    --color-light-yellow: #FFFF66;
    --color-light-orange: #ffbb75;
    --color-light-pink: #ffaed6;
}

body {
    text-rendering: optimizeLegibility;
    font-family: 'Open Sans', sans-serif;
}

/* AutoWidthScrolbars START */

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
    z-index: 1;
}

::-webkit-scrollbar-track {
    background: white;
}

::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border: 2px solid white;
    border-radius: 1px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #a6a6a6;
    }

::-webkit-scrollbar-button:single-button {
    background-color: white;
    display: block;
    border-style: solid;
    height: 6px;
    width: 6px;
}

    ::-webkit-scrollbar-button:single-button:vertical:decrement {
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent #c4c4c4 transparent;
    }

        ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
            border-color: transparent transparent #777777 transparent;
        }

    ::-webkit-scrollbar-button:single-button:vertical:increment {
        border-width: 6px 6px 0 6px;
        border-color: #c4c4c4 transparent transparent transparent;
    }

        ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
            border-color: #777777 transparent transparent transparent;
        }

    ::-webkit-scrollbar-button:single-button:horizontal:decrement {
        border-width: 6px 6px 6px 0;
        border-color: transparent #c4c4c4 transparent transparent;
    }

        ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
            border-color: transparent #777777 transparent transparent;
        }

    ::-webkit-scrollbar-button:single-button:horizontal:increment {
        border-width: 6px 0 6px 6px;
        border-color: transparent transparent transparent #c4c4c4;
    }

        ::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
            border-color: transparent transparent transparent #777777;
        }

/* Wider */
.widening-scrollbars.wider::-webkit-scrollbar,
.widening-scrollbars.wider .mud-table-container::-webkit-scrollbar {
    width: 20px;
}

.widening-scrollbars.wider::-webkit-scrollbar-button:single-button:vertical:decrement,
.widening-scrollbars.wider .mud-table-container::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-width: 0 11px 6px 11px;
}

.widening-scrollbars.wider::-webkit-scrollbar-button:single-button:vertical:increment,
.widening-scrollbars.wider .mud-table-container::-webkit-scrollbar-button:single-button:vertical:increment {
    border-width: 6px 11px 0 11px;
}

/* Higher */
.widening-scrollbars.higher::-webkit-scrollbar,
.widening-scrollbars.higher .mud-table-container::-webkit-scrollbar {
    height: 20px;
}

.widening-scrollbars.higher::-webkit-scrollbar-button:single-button:horizontal:decrement,
.widening-scrollbars.higher .mud-table-container::-webkit-scrollbar-button:single-button:horizontal:decrement {
    border-width: 11px 6px 11px 0;
}

.widening-scrollbars.higher::-webkit-scrollbar-button:single-button:horizontal:increment,
.widening-scrollbars.higher .mud-table-container::-webkit-scrollbar-button:single-button:horizontal:increment {
    border-width: 11px 0 11px 6px;
}

/* Shades */
.widening-scrollbars.wider::-webkit-scrollbar-thumb,
.widening-scrollbars.higher::-webkit-scrollbar-thumb,
.widening-scrollbars.wider .mud-table-container::-webkit-scrollbar-thumb,
.widening-scrollbars.higher .mud-table-container::-webkit-scrollbar-thumb {
    background: #b4b4b4;
    border: 2px solid #f2f2f2;
}

    .widening-scrollbars.wider::-webkit-scrollbar-thumb:hover,
    .widening-scrollbars.higher::-webkit-scrollbar-thumb:hover,
    .widening-scrollbars.wider .mud-table-container::-webkit-scrollbar-thumb:hover,
    .widening-scrollbars.higher .mud-table-container::-webkit-scrollbar-thumb:hover {
        background: #949494;
    }

.widening-scrollbars.wider::-webkit-scrollbar-track,
.widening-scrollbars.higher::-webkit-scrollbar-track,
.widening-scrollbars.wider .mud-table-container::-webkit-scrollbar-track,
.widening-scrollbars.higher .mud-table-container::-webkit-scrollbar-track {
    background: #f2f2f2;
}

/* AutoWidthScrolbars END */

.identification-points-select-popover {
    min-width: 600px !important;
}

.ms-ref-sans-serif {
    font-family: 'MS Reference Sans Serif', sans-serif;
}

.font-normal-black {
    font-weight: normal;
    color: black !important;
}

.font-normal-gray {
    font-weight: normal;
    color: var(--color-gray) !important;
}

.font-bold-black {
    font-weight: bold;
    color: black !important;
}

.font-bold-gray {
    font-weight: bold;
    color: var(--color-gray) !important;
}

.font-bold-dark-gray {
    font-weight: bold;
    color: var(--color-dark-gray) !important;
}

.font-bold-blue {
    font-weight: bold;
    color: blue !important;
}

.font-bold-green {
    font-weight: bold;
    color: green !important;
}

.text-danger {
    color: red !important;
}
.text-warning {
    color: darkorange !important;
}

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.font-bold-red {
    font-weight: bold;
    color: red !important;
}

#app {
    height: 100%;
}

.page-align-justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.page-background-color {
    background: var(--color-dark-gray);
}

.labeled-field-label {
    font-weight: bold !important;
}

/* Sticky edit confirmation column */
.sticky-last-child .mud-table-row .mud-table-cell:last-child {
    position: sticky !important;
    right: 0 !important;
    z-index: 3 !important;
    background-color: white;
}

.sticky-last-child .mud-table-head .mud-table-row .mud-table-cell:last-child {
    position: sticky !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 4 !important;
    background-color: white;
}

/* Sticky columns */
.sticky-header {
    top: 0 !important;
    position: sticky !important;
    z-index: 4 !important;
    background-color: white;
}

.sticky-left-column {
    position: sticky !important;
    left: 0 !important;
    z-index: 3;
    background-color: whitesmoke !important;
}

.sticky-right-column {
    position: sticky !important;
    right: 0px !important;
    z-index: 3;
    background-color: whitesmoke !important;
}

/* Edit mode */
.edit-mode .mud-table-container {
    overflow-y: hidden;
}

.edit-mode .shifted-in-edit-mode {
    right: 76px !important;
}

.edit-mode .edit-row {
    background-color: var(--color-vitens-light-blue) !important;
}

.edit-mode .mud-table-row .mud-table-cell:last-child {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Non edit mode */
.non-edit-mode .mud-table-container {
    overflow-y: auto;
}

.non-edit-mode .mud-table-row .mud-table-cell:last-child {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/*Shadow colors*/

.shadow-gray {
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.shadow-red {
    box-shadow: 0px 2px 4px 2px rgba(255, 0, 0, 0.2), 0px 4px 5px 0px rgba(255, 0, 0, 0.14), 0px 1px 10px 0px rgba(255, 0, 0, 0.12);
}

.shadow-orange {
    box-shadow: 0px 2px 4px 2px rgba(240, 134, 80, 0.2), 0px 4px 5px 0px rgba(240, 134, 80, 0.14), 0px 1px 10px 0px rgba(240, 134, 80, 0.12);
}

.shadow-green {
    box-shadow: 0px 2px 4px 2px rgba(34, 177, 76, 0.2), 0px 4px 5px 0px rgba(34, 177, 76, 0.14), 0px 1px 10px 0px rgba(34, 177, 76, 0.12);
}

.shadow-blue {
    box-shadow: 0px 2px 4px 2px rgba(63, 72, 204, 0.2), 0px 4px 5px 0px rgba(63, 72, 204, 0.14), 0px 1px 10px 0px rgba(63, 72, 204, 0.12);
}

.shadow-purple {
    box-shadow: 0px 2px 4px 2px rgba(234, 63, 247, 0.2), 0px 4px 5px 0px rgba(234, 63, 247, 0.14), 0px 1px 10px 0px rgba(234, 63, 247, 0.12);
}

/*Background colors*/

.bg-error {
    background-color: var(--mud-palette-error);
}

.bg-vitens-yellow {
    background-color: var(--color-vitens-yellow);
}

.bg-vitens-lightblue {
    background-color: var(--color-vitens-light-blue);
}

.bg-green {
    background-color: var(--color-green);
}

.bg-lightgreen {
    background-color: var(--color-light-green);
}

.bg-lightred {
    background-color: var(--color-light-red);
}

.bg-lightgray {
    background-color: var(--color-light-gray);
}

.bg-lightblue {
    background-color: var(--color-light-blue);
}

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

.bg-white {
    background-color: white;
}

.bg-purple {
    background-color: purple;
}

.bg-lightyellow {
    background-color: var(--color-light-yellow);
}

.bg-lightorange {
    background-color: var(--color-light-orange);
}

.bg-lightpink {
    background-color: var(--color-light-pink);
}

/* Rotated header */
.table-header-skewed td, .table-header-skewed th > div {
    border-right: 2px solid white !important;
    border-bottom: 2px solid white;
}

.table-header-skewed .mud-table-root {
    width: unset;
}

.table-header-skewed thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.table-header-skewed th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

.table-header-skewed td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

.table-header-skewed th.skewed {
    background-color: var(--mud-palette-surface) !important;
    height: 160px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    position: relative;
    vertical-align: bottom;
    font-size: 12px;
    padding: 0px !important;
    border: 0px;
    line-height: 1.5rem;
}

    .table-header-skewed th.skewed:first-child {
        position: sticky;
        left: 0;
        z-index: 4;
    }

    .table-header-skewed th.skewed > div {
        position: relative;
        top: 0px;
        left: 45px;
        height: 100%;
        transform: skew(-30deg, 0deg);
        overflow: hidden;
        z-index: 3;
    }

    .table-header-skewed th.skewed span.rotated {
        transform: skew(30deg, 0deg) rotate(-60deg);
        position: absolute;
        bottom: 70px;
        left: -60px;
        display: inline-block;
        width: 170px;
        text-align: left;
        white-space: nowrap;
        color: black;
        font-weight: 700;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .table-header-skewed th.skewed span {
        transform: skew(30deg, 0deg) rotate(0deg);
        position: absolute;
        bottom: 2px;
        left: 10px;
        display: inline-block;
        text-align: left;
        white-space: nowrap;
        color: black;
        font-weight: 700;
    }

.multiline-text {
    white-space: pre-wrap;
}
.no-wrap {
    white-space: nowrap;
}

.cursor-pointer {
    cursor: pointer;
}

input:read-only {
    cursor: default !important;
}

.p-0,
.p-0 .mud-ripple-checkbox {
    padding: 0px;
}

.disabled:not(.mud-table),
.disabled .mud-table-root {
    pointer-events: none;
}
.disabled table {
    pointer-events: auto;
}
    .disabled table tr td *,
    .disabled table tr th * {
        pointer-events: none;
    }

.cannot-be-disabled,
.mud-input-control.mud-select,
.mud-tooltip-root.mud-tooltip-inline {
    pointer-events: auto;
}

.mud-underline-only-focus .mud-input-underline:before {
    border-bottom: 0;
}