/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/
/* @import url('material-design/material-icons.min.css');*/
/*@import url('https://fonts.googleapis.com/icon?family=Material+Icons');*/

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('material-design/MaterialIcons-Regular.eot'); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), 
        url('material-design/MaterialIcons-Regular.woff2') format('woff2'), 
        url('material-design/MaterialIcons-Regular.woff') format('woff'), 
        url('material-design/MaterialIcons-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('material-design/MaterialIconsOutlined-Regular.eot'); /* For IE6-8 */
    src: local('Material Icons Outlined'), local('MaterialIconsOutlined-Regular'), url('material-design/MaterialIconsOutlined-Regular.otf') format('opentype');
}

.material-icons-outlined, .material-icons {
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons {
    font-family: 'Material Icons';
}
.material-icons-outlined {
    font-family: 'Material Icons Outlined';
}

:root {
    --top-row-height: 4rem;
    --sidebar-height: 0rem;
    --breadcrumb-height: 0rem;
    --sidebar-width: 260px;
    --menufontfamily: var(--bs-font-sans-serif);
    --article-margin: 1rem;
    /* Colors */
    --disabled: #ccc;
    --ok: green;
    --alarm: red;
    --warning: #FF9001;
    --event: #FCE700;
    --font-alarm: white;
    --font-warning: black;
    --font-event: black;
    --backgroundRGB: 5,39,103; /* Used to calculate main background color, dark blue */
    --buttonRGB: 30, 124, 212; /* Used to calculate button color (old value: 27, 110, 194) */
    --lightbackgroundcolor: ghostwhite;
    --menulinkcolor: white; /* #d7d7d7 */
    --menulinkactivecolor: white; /* white */
    --menulinkhovercolor: #ddd; /* white */
    /* Calculated colors */
    --background: rgb(var(--backgroundRGB));
    --buttoncolor: rgb(var(--buttonRGB));
    --buttonbordercolor: rgb(var(--backgroundRGB));
    --buttonhovercolor: rgba(var(--buttonRGB), 0.8);
    --bs-link-color: var(--buttoncolor); /* Used in toggle switches */
    --linkcolor: rgb(var(--buttonRGB));
    --focuscolor: rgba(var(--buttonRGB), 0.2);
    --cardcolor: rgba(var(--backgroundRGB), 0.65);
}

html, body,
body .e-contextmenu-container ul.e-ul,
svg text,
.control-wrapper .form-group .e-control-wrapper input.e-control,
.spin-row .e-spinner-pane .e-spinner-inner .e-spin-label,
div.tooltip,
.e-multiselect .e-multi-select-wrapper .e-delim-values, .e-multiselect .e-multi-select-wrapper .e-delim-values .e-remain,
.e-control.e-dialog,
.SfGrid-wrapper .e-control {
    font-size: 18px;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-family: 'Brush Script MT'; /* For testing only */
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    font-family: var(--bs-font-sans-serif);
    font-family: Arial, sans-serif, system-ui, -apple-system, "Segoe UI";
}

/* Override for the dynamic menues */
body .e-contextmenu-container ul.e-ul {
    font-family: var(--menufontfamily);
}

@media (max-width: 640.98px) {
    .nav-item {
        font-family: var(--menufontfamily);
    }
}
/* End override for the dynamic menues */

body h3 {
    margin-bottom: 1.5rem;
}

a, .btn-link {
    color: var(--linkcolor);
}

/* Styling for card view */

#viewselect {
    display: flex;
    justify-content: end;
    gap: 1rem;
}

.maincontainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
    padding: 0;
}

.id-card {
    font-size: 16px;
    border-radius: .25rem !important;
    border-color: black;
    border-width: 2px;
    border-style: ridge !important;
    box-shadow: 3px 3px 3px 3px gray;
    cursor: pointer;
    margin: 0 !important;
}

.card-img-top {
    background-color: var(--cardcolor);
    border-radius: 0;
}

.card-logo {
    font-size: 4rem;
    color: white;
    margin: 5px;
}

.id-card-header {
    display: flex;
    justify-content: space-evenly !important;
    align-items: center !important;
    padding: 3px 6px;
    margin: 2px;
    font-weight: bold;
    text-align: center;
}

.card-body {
    padding: 0px;
    margin: 0px;
    max-width: 1000px;
}

.card-text {
    padding: 0;
    margin: 0;
}

.id-list-item {
    padding: 3px 3px 3px 7px;
    margin: 0;
    background-color: transparent;
    /*font-size: 15px;*/
    align-items: center !important;
    justify-content: space-between !important;
    display: flex;
}

    .id-list-item .badge {
        font-size: inherit;
        white-space: normal;
        text-align: left;
    }

/* End styling for cards */


/* Colors for highlighting name in card view */
.color-disabled {
    background-color: var(--disabled);
    color: black;
}

.color-ok {
    background-color: var(--ok);
    color: white;
}

.color-alarm {
    background-color: var(--alarm);
    color: var(--font-alarm);
}

.color-warning {
    background-color: var(--warning);
    color: var(--font-warning);
}

.color-event {
    background-color: var(--event);
    color: var(--font-event);
}
/* End colors for highlighting name in card view */

/* Colors for highlighting fields in card view */

div.card:not(.singleView) .border-alarm-field,
div.card:not(.singleView) .border-warning-field,
div.card:not(.singleView) .border-event-field {
    margin: 0 !important;
    /*padding: 0.5px 0px 0.5px 4px !important;*/
    /*border-width: 3px !important;*/
    padding: 0.5px 3px 0.5px 7px !important;
    border-width: 3px 0 !important;
}

div.card:not(.singleView) li:last-child.border-alarm-field,
div.card:not(.singleView) li:last-child.border-warning-field,
div.card:not(.singleView) li:last-child.border-event-field {
    border-radius: 0px 0px 2px 2px;
}

div.card.singleView .border-alarm-field,
div.card.singleView .border-warning-field,
div.card.singleView .border-event-field {
    /*border-style: solid !important;
    margin: -3px !important;*/
}

.border-alarm-field {
    border-color: var(--alarm) !important;
}

.border-warning-field {
    border-color: var(--warning) !important;
}

.border-event-field {
    border-color: var(--event) !important;
}
/* End colors for highlighting fields in card view */

/* Colors for for highlighting fields in table view */

.e-templatecell {
    height: 1px !important; /* Hack to be able to set the children to 100% height */
}

    .e-templatecell div {
        height: 100%;
    }

        .e-templatecell div div {
            display: flex;
            justify-content: center;
            align-items: center;
            word-break: break-word;
        }

        .e-templatecell[style*="left"] div div {
            justify-content: left;
        }

.border-disabled, .border-alarm, .border-warning, .border-event {
    margin: 0 -8px;
    padding: 0 5px;
    border-width: 3px;
    border-style: solid;
}

.border-disabled {
    background-color: #efefef;
    border-style: none;
}

.border-alarm {
    border-color: var(--alarm);
}

.border-warning {
    border-color: var(--warning);
}

.border-event {
    border-color: var(--event);
}
/* End colors for for highlighting fields in table view */



/* Breadcrumb navigation */
.badge-container a {
    /*color: black !important;*/
    color: var(--background) !important;
    background-color: var(--menulinkcolor) !important;
}

.badge-container a:hover {
    background-color: var(--menulinkhovercolor) !important;
}

.badge-container span {
    color: var(--menulinkcolor) !important;
}

.badge {
    font-size: 14px;
}
/* End breadcrumb navigation */



/* Dynamic menu and person menu */
.e-contextmenu-container.e-menu-popup {
    position: fixed !important;
}

#menu-section .e-menu-container ul .e-menu-item .e-menu-icon {
    font-size: 30px !important;
}

#menu-section .e-menu-container ul .e-menu-item.e-menu-caret-icon {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.e-menu-container .e-menu {
    color: var(--menulinkcolor) !important;
}

.e-menu-container .e-menu-item.e-focused {
    color: var(--menulinkhovercolor) !important;
}

#menu-section .e-menu-container,
#menu-section .e-menu-container .e-menu .e-menu-item.e-selected {
    background-color: transparent;
    display: flex;
    align-self: center;
}

.e-menu-container .e-ul .e-menu-item {
    color: var(--background) !important;
}

/* Color for selected menu element */
.e-menu-container .e-ul .e-menu-item.e-selected {
    background-color: var(--cardcolor) !important;
    color: white !important;
}

/* Color for focused menu element */
.e-contextmenu-container.e-menu-container .e-ul .e-menu-item.e-focused {
    background: var(--cardcolor) !important;
    color: white !important;
}

/* Color for focused menu element, pt.2 */
.e-menu-container .e-ul .e-menu-item .e-menu-url {
    color: inherit !important;
}

/* Log out element (not an a-tag) */
.e-menu-container .e-ul .e-menu-item span.e-menu-icon.e-icons.e-logout-icon {
    margin-bottom: 0;
    line-height: 24px;
    vertical-align: text-top;
}

/* End dynamic menu and person menu */


/* article .outer wraps all plots */
/* max-width is 100vw - sidebar - 2 * padding for "article" - 16px to allow for scrollbar */
article .outer {
    max-width: calc(100vw - var(--sidebar-width) - 2*var(--article-margin) - 16px);
}

    article .outer#heatmapcontainer {
        height: calc(100vh - 205px); /* Height of text on top of the page, for smaller resolutions the max-height will kick in */
        max-height: calc(100vw - var(--sidebar-width));
        max-width: none;
    }

    article .outer#profile {
        height: calc(100vh - 158px - 21px); /* Height of text on top of the page, for smaller resolutions the max-height will kick in */
        max-height: calc(100vw - var(--sidebar-width) - 21px); /* Adds some space for disclaimer in the plot */
        max-width: none;
    }

    article .outer#MetalLoss {
        height: calc(100vh - 161px); /* Height of text on top of the page, for smaller resolutions the max-height will kick in */
        max-height: calc(100vw - var(--sidebar-width));
        max-width: none;
    }

/* End article .outer */


/* Limiting the height of "Instrument Map" */
.mapdiv {
    position: relative;
    height: calc(100vh - 173px);
    max-height: calc(100vw - var(--sidebar-width)) !important;
}

/* The loading-spinner */
.spin-row ~ .spin-row,
.spin-row ~ br {
    display: none;
}

.spin-row .e-spinner-pane {
    height: calc(100vh - var(--top-row-height) - var(--sidebar-height) - var(--breadcrumb-height) - 2*var(--article-margin));
    max-height: calc(100vw - var(--sidebar-width));
    position: relative;
}

/* Focus for forms */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--focuscolor);
    box-shadow: 0 0 0 .25rem var(--focuscolor);
    position: relative;
}

/* Buttons */
table .btn {
    margin-bottom: 0;
}

.btn {
    margin-bottom: 1rem;
    white-space: nowrap;
}

    .btn:disabled {
        cursor: no-drop;
        pointer-events: auto;
        opacity: 1;
        color: white !important;
        background-color: #aaa !important;
        border-color: #777 !important;
    }

.btn-primary {
    color: #fff !important;
    background-color: var(--buttoncolor) !important;
    border-color: var(--buttonbordercolor) !important;
}

    .btn-primary:hover {
        background-color: var(--buttonhovercolor) !important;
    }

        .btn-primary:hover:disabled {
            background-color: #aaa !important;
        }

.btn-default {
    background-color: white;
    color: black;
    border-color: var(--buttoncolor);
}

    .btn-default:hover {
        background-color: #eee;
        border-color: var(--buttoncolor);
    }

        .btn-default:hover:disabled {
            border-color: #777;
        }

.btn-danger {
    background-color: var(--alarm);
    color: var(--font-alarm);
    border-color: #bb0000;
}

    .btn-danger:hover {
        background-color: #bb0000;
    }

/* End buttons */


/* Error on the bottom of the page */
#blazor-error-ui {
    background-color: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.5rem 2rem 0.5rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        text-decoration: none;
    }
/* End error on the bottom of the page */


/* Error for page */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
/* End error on page */


/* Alert */
div.alert.alert-warning {
    width: 100% !important;
    max-width: 800px;
    color: #000;
}

/* Non-inverted toggle switch */
.form-check-input:checked {
    background-color: var(--buttoncolor);
    border-color: var(--buttonbordercolor);
}

.form-switch:not(.inverted) .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23aaaaaa'/%3e%3c/svg%3e");
    border-color: #333;
}

/* Switch for pop-up */
.modal-body .form-switch .form-check-input {
    margin-left: 0;
}
/* End non-inverted toggle switch */


/* .form-switch, .form-switch.inverted*/

.form-switch {
    background-color: transparent !important;
}

    .form-switch.inverted .form-check-input {
        margin-left: 0;
        width: 3em;
        height: 1.5em;
    }

        .form-switch.inverted .form-check-input:checked {
            background-position: left center;
            background-color: var(--bs-form-check-bg);
            border-color: var(--bs-border-color);
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23bfbfbf'/%3e%3c/svg%3e");
            background-image: var(--bs-form-switch-bg);
        }

        .form-switch.inverted .form-check-input:not(checked) {
            background-position: right center;
            background-color: var(--bs-link-color);
            border-color: var(--bs-link-color);
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
            background-image: var(--bs-form-switch-bg);
        }

    .form-switch .form-check-input.small {
        margin-left: -2.5em;
        width: 2em;
        height: 1em;
    }
/* End .form-switch, .form-switch.inverted*/


/* Tables */

/* Blazor-tables */

/* Min. width for all columns */
table.e-table colgroup col {
    width: 100px !important;
}

/* Do not break word in headers */
.e-headertext {
    word-wrap: normal !important;
}

.e-grid .e-gridheader .e-sortfilter .e-headercell {
    text-align: center;
}

    .e-grid .e-gridheader .e-sortfilter .e-headercell .e-headercelldiv {
        /*padding-left: 0px !important;
        margin-left: 0px !important;*/
        margin-right: 0px !important;
        margin-bottom: -6px !important;
        padding-right: 0px !important;
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
        text-overflow: ellipsis !important;
    }

.e-filter-popup.e-excelfilter {
    z-index: 1 !important;
}
    .e-filter-popup.e-excelfilter .e-menu-item.e-selected {
        background-color: var(--cardcolor) !important;
    }

    .e-filter-popup.e-excelfilter .e-searchcontainer .e-input-group.e-control-wrapper {
        border-width: 1px !important;
    }

        .e-filter-popup.e-excelfilter .e-searchcontainer .e-input-group.e-control-wrapper.e-input-focus {
            box-shadow: 0 0 0 .25rem var(--focuscolor) !important;
        }

        .e-filter-popup.e-excelfilter .e-searchcontainer .e-input-group.e-control-wrapper .e-searchinput {
            height: 100%;
        }

    .e-filter-popup.e-excelfilter .e-searchcontainer .e-checkboxlist .e-ftrchk {
        padding-left: 0;
    }

    .e-filter-popup.e-excelfilter .e-menu-item,
    .e-filter-popup.e-excelfilter .e-searchcontainer {
        padding-left: 6px !important;
        padding-right: 12px !important;
    }

    /* Hide "Clear filter", when there are no filters */
    .e-filter-popup.e-excelfilter .e-menu-item.e-disabled {
        display: none;
    }

    /* Hide a checkmark to the left of "Text filters" */
    .e-filter-popup.e-excelfilter .e-menu-item .e-icon-check,
    .e-filter-popup.e-excelfilter .e-menu-item .e-emptyicon {
        display: none;
    }

/* Custom text filter */
.e-dlg-container .e-control-wrapper {
    border-width: 1px !important;
}

    .e-dlg-container .e-control-wrapper .e-input {
        height: 100% !important;
    }

.e-icon-filter, .e-icon-ascending, .e-icon-descending {
    color: var(--buttoncolor) !important;
    font-size: 14px !important;
    margin: 0 -4px 0 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    position: relative;
    display: inline-block;
    top: 6px;
    width: 14px !important
}

.e-sortfilterdiv:not(.e-icon-ascending):not(.e-icon-descending) {
    display: none;
}

/* Vertical header */
.SfGrid-wrapper.vertical-header table.e-table colgroup col {
    width: 70px !important;
}

.SfGrid-wrapper.vertical-header .e-headercell {
    height: 150px !important;
    position: relative !important;
    margin: 0;
    padding: 0;
}

.SfGrid-wrapper.vertical-header .e-grid .e-gridheader .e-sortfilter .e-headercell .e-headercelldiv {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(-90deg) !important;
    width: 150px !important;
    margin: 0 !important;
    padding: 0 15px 0 4px !important;
    max-width: none !important;
}

.SfGrid-wrapper.vertical-header .e-icon-filter {
    position: absolute;
    top: 2px;
    right: 6px;
}

.SfGrid-wrapper.vertical-header .e-icon-ascending,
.SfGrid-wrapper.vertical-header .e-icon-descending {
    position: absolute;
    top: 2px;
    right: 15px;
}


/* End Blazor-tables */

.sltable {
    max-width: 800px;
}

    .sltable tr.headerrow {
        background-color: var(--buttoncolor);
        color: white;
        border-width: 1px 0;
        border-color: var(--buttonbordercolor);
    }

    .sltable td:first-child, .sltable th:first-child {
        padding-left: 4px !important;
        font-weight: bold;
        width: 35%;
    }

/* End tables */


/* Tooltip for all plots */
.tooltip {
    background-color: black !important;
    opacity: 0.85;
    color: white;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 1rem;
    max-width: 80vw;
}

    .tooltip th {
        text-align: center;
        padding: 0 5px 5px 5px !important;
        border-bottom: solid;
        border-color: white;
        border-bottom-width: 2px;
    }

    .tooltip td:first-child {
        padding-right: 0.5rem;
    }
/* End tooltip for all plots */


/* Adjusting padding for DateRangePicker on the page "Data Export" */
#ExportDateRangePicker .control-wrapper {
    padding: 0;
    display: inline-block;
    background: transparent;
    width: 100%;
    max-width: 350px;
    min-width: 50%;
}

#ExportDateRangePicker #NumberOfMeasurements {
    display: inline-block;
}

#ExportDateRangePicker .control-wrapper span, #ExportDateRangePicker .control-wrapper span input {
    height: 45px;
    border-bottom-width: 0;
    border-top-width: 0;
    border-color: inherit;
}

.hidden{
    display: none !important;
}

.tableSpacer {
    height: 1rem !important;
}

/* Multi-select, i.e. "company" for "Edit User" */
.e-control-wrapper {
    height: 45px;
    border-width: 0 1px !important;
    border-color: #DFE2E6 !important;
}

table td div div.e-multi-select-wrapper .e-delim-values {
    padding-left: 0;
}
/* End multi-select */

select.form-select option:disabled {
    display: none;
}

input::placeholder {
    color: #aaa !important;
}

/* Secure that one can drag pages with diagrams */
article .outer div {
    touch-action: auto !important;
}

/* Date pickers */

div.control-wrapper div.form-group span.e-control-wrapper {
    height: 40px;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
    border-radius: var(--bs-border-radius);
}

    div.control-wrapper div.form-group span.e-control-wrapper input.e-control {
        min-width: 220px;
        height: 40px;
    }

    /* Calendar icons for date pickers */
    div.control-wrapper div.form-group span.e-control-wrapper span.e-icons {
        height: 40px;
        border-top-width: 1px !important;
        border-bottom-width: 1px !important;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: var(--bs-border-radius);
        border-top-right-radius: var(--bs-border-radius);
    }

    div.control-wrapper div.form-group span.e-control-wrapper span.e-icons:hover {
        background-color: #eee;
        color: inherit;
    }
/* End date pickers */


/* Export icons and Select All/Deselect All */
.outer {
    position: relative;
}

    .outer .plotbuttons,
    .outer .showhide {
        position: absolute;
        right: 0.5rem;
        z-index: 1;
    }

    .outer .plotbuttons {
        top: 0.5rem;
        display: flex;
        gap: 0.5rem;
    }

        .outer .plotbuttons > .material-icons,
        .outer .plotbuttons > .material-icons-outlined {
            font-size: 25px;
            color: var(--background);
            cursor: pointer;
        }

    .outer .showhide {
        bottom: -8px;
        font-size: 14px;
        padding-left: 0;
    }

        .outer .showhide input {
            display: none;
        }

        .outer .showhide label {
            text-decoration: underline;
            cursor: pointer;
        }

/* End export icons and Select All/Deselect All */


/* Input type=file */
input[type="file"] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: white;
}

::file-selector-button {
    border: 1px solid var(--buttonbordercolor);
    padding: 0.375rem 0.75rem;
    background-color: var(--buttoncolor);
    color: white;
}

    ::file-selector-button:hover {
        background-color: var(--buttonhovercolor);
        cursor: pointer;
    }
/* End Input type=file */


/* Misc - Maybe not in use */
/*
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.sl-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4rem;
    background: #1b5595;
    padding-left: 2rem;
    padding-right: 2rem;
    align-items: center !important;
    justify-content: space-between !important;
    display: flex !important;
    color: black;
}
.e-tooltip {
    background-color: transparent !important;
}
*/
/* End misc */

/* Checkbox */
.export-table :not(.form-switch) > input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    appearance: none;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
}

    .export-table :not(.form-switch) > input[type="checkbox"]:checked {
        background-color: var(--buttoncolor);
    }

    .export-table :not(.form-switch) > input[type="checkbox"]:hover {
        border: 1px solid #aaa;
    }

    .export-table :not(.form-switch) > input[type="checkbox"]::before {
        content: "";
        display: none;
        width: 100%;
        height: 100%;
        clip-path: polygon(24% 42%, 41% 56%, 76% 13%, 89% 25%, 44% 82%, 12% 56%);
        background-color: white;
    }

    .export-table :not(.form-switch) > input[type="checkbox"]:checked::before {
        display: block;
    }
/* End checkbox */


/* Modal windows, pop-up for diagrams*/
article .modal-backdrop.fade.show {
    z-index: 999;
}
article .modal.show {
    z-index: 1000;
}
/* End modal windows, pop-up for diagrams*/


/* Endrer musepeker over datapunktene */
#Thickness ellipse, #Multi ellipse {
    cursor: pointer;
}

/*  CSS for printing
    Hiding the sidebar and top-bar when printing
    Known problem: The diagrams are not re-rendered when printing
*/
@media print {
    :root {
        --sidebar-width: 0px;
    }

    main {
        background-color: white !important;
    }

    /* Hiding the topbar, sidebar
       fields to choose between cards and table,
	   misc. buttons and icons,
	   div.footer_div... is "Export CSV" from System Settings
	   div.action_div... is "Export CSV" from Log
    */
    div.top-row.container-fluid,
    div.sidebar,
    #viewselect,
    #printbtn, #exportbtn, .plotbuttons,
    div.footer_div > input[type="button"],
    div.action_div > input[type="button"],
    .showhide,
    .e-icon-ascending, .e-descending, .e-icon-filter {
        display: none !important;
    }

    .card:not(.singleView) {
        page-break-inside: avoid;
    }

    #heatmapcontainer #scale-wrapper #gradienttext {
        height: 650px !important;
    }
}

/* End CSS for printing */



/* Medium resolution */
@media (max-width: 900px) {

    .hide_if_medium {
        display: none !important;
    }

    /* Breadcrumb navigation, medium */
    .badge-container {
        gap: 0.25rem !important;
        flex-wrap: wrap;
    }

        .badge-container span, .badge-container a {
            margin: 0 !important;
            padding: 0 !important;
            background-color: transparent !important;
            color: var(--menulinkcolor) !important;
        }

            .badge-container a:hover {
                background-color: transparent !important;
                color: var(--menulinkhovercolor) !important;
            }
    /* End breadcrumb navigation */

    /* Blazor-tables */
    table.e-table colgroup col {
        /*width: auto !important;*/
        width: 80px !important;
    }

    .e-headertext {
        /*word-wrap: break-word !important;*/
    }
    /* End Blazor-tables */


    /* Heatmaps */
    #gradient {
        width: 12px !important;
    }

    #gradienttext {
        left: calc(12px - 2px) !important;
    }
    /* End heatmaps */


    /* Date picker, rows and show/hide for diagrams */

    /* #datebuttons */
    article.container-fluid div.container-fluid {
        padding: 0;
    }

        article.container-fluid div.container-fluid .row {
            margin: 0 !important;
            flex-direction: column;
        }

        article.container-fluid div.container-fluid .col-auto {
            padding: 0 !important;
        }

            article.container-fluid div.container-fluid .col-auto .rowselect,
            article.container-fluid div.container-fluid .col-auto .channeldropdown {
                padding-left: 8px;
            }

            article.container-fluid div.container-fluid .col-auto.show_button_wrapper {
                gap: 0rem;
            }

                article.container-fluid div.container-fluid .col-auto.show_button_wrapper .col-auto.form-switch {
                    padding-right: calc(2rem + 8px) !important;
                }

                    article.container-fluid div.container-fluid .col-auto.show_button_wrapper .col-auto.form-switch .form-check-input {
                        margin-right: calc(-2rem - 4px);
                    }

    /* Show hidden and show low quality, for Wall Thickness Plot and Trend */
    @media (max-width: 350px) {
        article.container-fluid div.container-fluid .col-auto.show_button_wrapper {
            font-size: 17px;
        }
    }
    /* End date picker, rows and show/hide for diagrams */


    /* break_table_when_medium changes a table to single lines */

    .break_table_when_medium td,
    .break_table_when_medium th {
        display: block;
        border: 0;
        padding-left: 0;
        height: auto !important;
    }

        .break_table_when_medium td select,
        .break_table_when_medium td input,
        .break_table_when_medium td textarea,
        .break_table_when_medium .e-date-range-wrapper {
            border-width: 1px;
        }

        .break_table_when_medium td:first-child,
        .break_table_when_medium th {
            width: 100% !important;
            padding-bottom: 0;
        }

    .break_table_when_medium th {
        padding-top: 0.75rem;
    }

    .break_table_when_medium td div#NumberOfMeasurements {
        padding: 0;
    }

    .break_table_when_medium td.tableSpacer {
        display: none;
    }

    /* End break_table_when_medium */

}


/* Low resolution */
@media (max-width: 640.98px) {

    :root {
        --sidebar-width: 0px;
        --sidebar-height: 3rem;
        --top-row-height: 2rem;
        --breadcrumb-height: 1rem;
        --article-margin: 0.5rem;
    }

    .hide_if_small {
        display: none;
    }

    /* Logo and left menu */
    .sidebar {
        position: fixed;
        height: var(--sidebar-height);
        z-index: 3;
        width: 100%;
        min-width: 320px;
    }

        .sidebar a.navbar-brand {
            left: calc(50% - 127px / 2);
            position: absolute;
            padding: 0 !important;
            margin: 0 !important;
        }

            .sidebar a.navbar-brand img {
                height: var(--top-row-height) !important;
            }

    /* The left menu */
    .navbar-toggler {
        background-color: transparent !important;
        position: absolute;
        top: calc(var(--sidebar-height) + var(--top-row-height)/2 - 14px);
        padding: 0;
        border: 0;
        font-size: 1rem !important;
    }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        .navbar-toggler .navbar-toggler-icon {
            background-image: none;
            color: var(--menulinkcolor);
            font-size: 30px;
        }

            .navbar-toggler .navbar-toggler-icon:hover {
                color: var(--menulinkhovercolor);
            }

            .navbar-toggler .navbar-toggler-icon:before {
                font-family: 'Material Icons';
                content: "menu";
            }

    /* The div with the left menu */
    .top-row.navbar + div {
        background-color: var(--linkcolor);
        background-color: white;
        position: absolute;
        z-index: 1;
        left: 13px;
        top: calc(var(--sidebar-height) + var(--top-row-height) - 2px);
        border: 1px solid black;
        border-radius: 4px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, .175);
        border-color: rgb(222, 226, 230)
    }

    .nav-item {
        height: 30px !important;
        padding: 0 6px !important;
    }

        .nav-item:hover {
            background-color: var(--cardcolor);
            color: white;
        }

        .nav-item a {
            height: auto !important;
            line-height: inherit !important;
            color: var(--background) !important;
            transition: none;
        }

            .nav-item a:hover, .nav-item:hover a {
                color: white !important;
                background-color: transparent !important;
            }

            .nav-item a .material-icons {
                font-size: 1rem;
                padding-right: 8px;
                width: 1.5rem;
            }
    /* End styling the left menu */


    /* Second row, incl. dynamic menu and person menu */
    .top-row.container-fluid {
        position: fixed;
        z-index: 2;
        top: var(--sidebar-height);
        height: var(--top-row-height) !important;
        min-width: 320px;
        /*padding-right: 1px;*/
    }

    /* Dynamic menus to the right */

    /* Switching order for dyn. menu and person menu, to give the dyn. menu extra space */
    #menu-section {
        flex-direction: row-reverse;
    }

        /* Changing the icon for the settings menu (to avoid two similar icons) */
        #menu-section .e-menu-open-icon:before {
            content: "settings" !important;
        }

    .e-menu-popup .e-menu-parent .e-menu-item {
        white-space: normal !important;
        height: auto !important;
        padding: 0 6px !important;
    }

        .e-menu-popup .e-menu-parent .e-menu-item a {
            padding: 0 !important;
        }

        .e-menu-popup .e-menu-parent .e-menu-item .e-anchor-wrap {
            margin-left: 26px;
            line-height: 22px;
        }

            .e-menu-popup .e-menu-parent .e-menu-item .e-anchor-wrap span {
                margin-left: -26px;
                line-height: 14px !important;
            }
    /* End dynamic menus to the right */


    /* Breadcrumb navigation, small */
    .badge-container {
        visibility: initial !important;
        display: flex !important;
        gap: 2px !important;
        padding: 0 0 0 0.5rem !important;
        margin: 0 !important;
        top: 2rem;
        position: absolute;
        height: var(--breadcrumb-height);
        background-color: var(--lightbackgroundcolor);
    }

        .badge-container span, .badge-container a {
            background-color: transparent !important;
            color: var(--background) !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1rem !important;
        }

            .badge-container a:hover {
                color: var(--buttonhovercolor) !important;
            }
    /* End breadcrumb navigation */


}

/* Very small main window */
@media (max-width: 400px) or ((min-width: 641px) and (max-width: calc(400px + 260px))) {

    #heatmapcontainer ellipse {
        rx: 12;
        ry: 12;
    }

    /* Export icons and Select All/Deselect All */
    .outer .plotbuttons,
    .outer .showhide {
        right: 0.25rem;
    }
    .outer .plotbuttons {
        top: 0.25rem;
        flex-direction: column;
        gap: 0;
    }
}