:root {
    --ntnublue:         #00509E;
    --lightgreen:       #EBF0C4;
    --green:            #DEE892;
    --darkgreen:        #CDDC5C;
    --lightblue:        #CFDAF1;
    --blue:             #B0CAE7;
    --darkblue:         #88B0DB;
    --lightorange:      #FDD9B5;
    --orange:           #F7C089;
    --darkorange:       #F2A04E;
    --lightpink:        #E3BCDA;
    --pink:             #D78DC0;
    --darkpink:         #C354A0;
    --lightyellow:      #FDF0C4;
    --yellow:           #FBE88C;
    --darkyellow:       #F9DC53;
    --lightpurple:      #FBEAFD;
    --purple:           #A393BB;
    --darkpurple:       #765D98;
    --lightturquoise:   #D1EAEB;
    --turquoise:        #9EDFDF;
    --darkturquoise:    #6DCFCE;
    --lightbeige:       #EEE5D5;
    --beige:            #E7DCC3;
    --darkbeige:        #DBCAA5;
    --white:            #FFFFFF;
}
* {
    min-width:      0px;
}
*, *::before, *::after {
    box-sizing: border-box;
}
@font-face {
    font-family:        "Open Sans";
    src:                url('OpenSans-VariableFont_wdth,wght.ttf');
}

body {
    font-family:        "Open Sans", "Segoe UI", "sans-serif";
    font-size:          13px;
    padding-left:       calc(100vw - 100%);
    padding-right:      calc(100vw - 100%);
}

h2, h3 {
    font-weight:        normal;
}
p {
    font-size:          14px;
}
a:link {
    color:              var(--ntnublue);
    text-decoration:    none;
}
a:visited {
    color:              var(--ntnublue);
    text-decoration:    none;
}
a:hover {
    color:              var(--ntnublue);
    text-decoration:    underline;
}

textarea {
    resize:             vertical;
    overflow-x:         hidden;
    font-family:        "Open Sans", "Segoe UI", "sans-serif";
    font-size:          13px;
    margin:             0;
    min-height:         1.75em;
}

input[type="button"] {
    font-family:        inherit;
    padding:            3px;
    padding-left:       8px;
    padding-right:      8px;
    border-radius:      6px;
    border:             solid 1px #aaa;
    background-color:   #ff00ff;
    box-shadow:         1px 3px 5px rgba(0, 0, 0, 0.1);
}
input[type="button"]:hover:enabled {
    background-image:   linear-gradient(rgba(215, 215, 215, 0.4), rgba(200, 200, 200, 0.4));
}
input[type="button"]:focus:enabled {
    box-shadow:         inset 1px 3px 5px rgba(0, 0, 0, 0.2);
}
input[type="radio"] {
    margin-bottom:      3px;
    box-shadow:         none;
}
input[type="checkbox"] {
    box-shadow:         none;
    margin:             0;
}
input[type="text"], input[type="tel"] {
    padding-top:    3px;
    padding-bottom: 3px;
    padding-left:   5px;
    padding-right:  5px;
    background:     #fff;
}
input[type="text"]:disabled, input[type="tel"]:disabled, select:disabled {
    text-color:     #444;
    border-color:   transparent;
}

select {
    font-family:        inherit;
    font-size:          12px;
    line-height:        175%;
    border-radius:      3px;
    border:             solid 1px #ddd;
    background-color:   #f8f8f8;
    width:              100%;
}

button, input[type="submit"], .div-button {
    font-family:        inherit;
    border-radius:      3px;
    border:             solid 1px #ddd;
    background-color:   #f8f8f8;
    font-size:          12px;
    line-height:        175%;
    min-width:          26px;
}
button:hover:enabled, input[type="submit"]:hover:enabled {
    border:             solid 1px var(--ntnublue);
    box-shadow:         inset 0px 5px 4px rgba(255, 255, 255, 1);
    cursor:             pointer;
}
button:active:enabled, input[type="submit"]:active:enabled {
    box-shadow:         inset 1px 3px 5px rgba(0, 0, 0, 0.2);
}

label:has(input[type="checkbox"]){
    display:        flex;
    gap:            5px;
    align-items:    center;
}

.div-button {
    /*font-family:        inherit;
    border-radius:      3px;
    border:             solid 1px #ddd;
    background-color:   #f8f8f8;
    font-size:          12px;
    line-height:        175%;
    min-width:          25px;
    height:             100%;*/

    cursor:             pointer;
    display:            inline-grid;
    align-items:        center;
    justify-items:      center;
    padding-left:       4px;
    padding-right:      4px;
    padding-top:        1px;
    padding-bottom:     1px;
}
.div-button:hover {
    border:             solid 1px var(--ntnublue);
    box-shadow:         inset 0px 5px 4px rgba(255, 255, 255, 1);
}
.div-button:active {
    box-shadow:         inset 1px 3px 5px rgba(0, 0, 0, 0.2);
}

.button-inactive {
    color:              #777 !important;
    cursor:             default;
    pointer-events:     none;
}
.button-inactive:hover {
    border:             solid 1px #ddd;
    box-shadow:         none;
}
.button-inactive:active {
    box-shadow:         none;
}
.button-single-line {
    height:             2em;
    text-overflow:      ellipsis;
    overflow:           hidden;
    white-space:        nowrap;
}
.button-confirm-anim {
    border:             solid 1px var(--ntnublue);
    background-color:   rgba(0, 80, 158, 0.2);
}
.button-confirm-anim:hover {
    box-shadow:         none;
}

.search {
    padding:            8px;
    border:             solid 1px #aaa;
    border-radius:      8px;
    box-shadow:         inset 1px 2px 3px rgba(0, 0, 0, 0.1);
    min-height:         24px;
}

.selected {
    border:             solid 1px var(--ntnublue) !important;
    box-shadow:         1px 1px 2px rgba(0, 80, 158, 0.2) !important;
}

.editable {
    border:             solid 1px #ddd;
    box-shadow:         inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius:      3px;
    padding-left:       5px;
    padding-right:      5px;
}

.clickable {
    cursor:             pointer;
    color:              var(--ntnublue);
}

.display-none {
    display:            none !important;
}

.greyed-out {
    opacity:            0.4;
}

.collapsed > *:not(:first-child) {
    display: none !important;
}
.expand-button {
    min-width:          55px;
    max-width:          55px;
    display:            flex;
    align-items:        center;
    place-content:      center;
    gap:                5px;
}
.collapsed .expand-button > *:first-child::before {
    font-family:    "Font Awesome 6 Free";
    content:        "\f103";
    display:        inline-block;
    font-weight:    900;
}
.collapsed .expand-button > *:last-child::before {
    content: "Vis";
}
.expand-button > *:first-child::before {
    font-family:    "Font Awesome 6 Free";
    content:        "\f102";
    display:        inline-block;
    font-weight:    900;
}
.expand-button > *:last-child::before {
    content: "Skjul";
}

.icon-and-text {
    display:            flex;
    place-content:      start;
    align-items:        center;
    gap:                5px;
    overflow:           hidden;
    text-overflow:      ellipsis;
    white-space:        nowrap;
}
tr:nth-child(even of :not(.display-none)){
    background-color:   #fafafa;
}
th.th-sortable {
    cursor:             pointer;
    color:              var(--ntnublue);
}


::backdrop {
    background-color:   rgba(255, 255, 255, 0.3);
    backdrop-filter:    blur(3px);
}
dialog {
    border:         1px solid #aaa;
    border-radius:  10px;
    padding:        13px;
}
dialog:focus {
    outline:        none;
}


.flex-row {
    display:        flex;
    flex-flow:      row nowrap;
    gap:            8px;
}
.flex-col {
    display:        flex;
    flex:           1 0 0px;
    flex-flow:      column nowrap;
    gap:            8px;
}
.flex-gap-s {
    gap:            5px;
}
.flex-gap-m {
    gap:            13px;
}
.flex-gap-l {
    gap:            21px;
}
.flex-gap-xl {
    gap:            35px;
}
.flex-even {
    & > * {
        flex:       1 0 0px;
    }
}
.flex-grow {
    flex-grow:      1;
}
.flex-center {
    align-items:    center;
}
.border-s {
    border:         1px solid #eee;
    border-radius:  3px;
    padding:        3px;
}
.border-m {
    border:         1px solid #ddd;
    border-radius:  5px;
    padding:        5px;
}
.border-l {
    border:         1px solid #aaa;
    border-radius:  8px;
    padding:        8px;
}
.margin-vert-s {
    margin:         0 0 8px 0;
}
.margin-vert-m {
    margin:         0 0 13px 0;
}
.margin-vert-l {
    margin:         0 0 21px 0;
}
.margin-vert-xl {
    margin:         0 0 35px 0;
}
.margin-horiz-m {
    margin:         0 5px;
}
.drop-m {
    box-shadow:     1px 2px 5px rgba(0, 0, 0, 0.1);
}
.bg-grey {
    background:     #fafafa;    
}
.bg-blue {
    background:     color-mix(in srgb, var(--ntnublue) 5%, transparent);
}
.bg-white {
    background:     white;
}
.nowrap {
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}
.align-left {
    text-align:     left;
}
.align-center {
    text-align:     center;
}
.align-right {
    text-align:     right;
}
.container {
    container-type: inline-size;
}
.hide-600 {
    @container (width < 600px) {
        display: none;
    }
}
.hide-800 {
    @container (width < 800px) {
        display: none;
    }
}