:root {
    --background-color-xtralight: #ffffff;
    --background-color-light: #f1f1f1;
    --background-color-medium: #cccccc;
    --background-color-dark: #bfbfbf;
    --background-color-xtradark: #333333;
    --background-color-red: #ac1302;
    
    --border-radius-sm: 2px;
    --border-radius-md: 5px;
    --border-radius-lg: 8px;

    --border-width-sm:1px;
    --border-width-md: 2px;
    --border-width-lg:3px;

    --margin-sm: 5px;
    --margin-md: 10px;
    --margin-lg: 20px;

    --padding-xsm:2px;
    --padding-sm: 5px;
    --padding-md: 10px;
    --padding-lg: 20px;

    --font-size-xsm:.8rem;
    --font-size-sm:.9rem;
    --font-size-md:1rem;
    --font-size-lg:1.1rem;
    --font-size-xlg:1.2rem;
    --font-size-xxlg:1.4rem;
}

html * {
    max-height: 1000000px;
}

html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    /*Ser ikke ut til at denne har noen effekt på font-størrelse i tabeller og enkelte spaner, men lar den stå    */
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

*:before, *:after {
    box-sizing: inherit;
}

body {
    /*width: calc(100% - 20px);
    margin: 0px;
    padding: 10px;*/
    box-sizing: border-box;
    background-color: var(--background-color-light);
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    margin: 0;
    padding: 0;
    /*height: 100%;*/
    height:100vh;
    display:flex;
    justify-content:center;
}



h1 {
    font-size: 1.4rem;
}

h2 {
    font-size: 1.2rem;
}

p, td, th, input, textarea, select {
    font-size: 1rem;
    /*color:red;*/
    /*div, span var tidligere inkludert i denne, men fjernes per 21.08.24*/
}

textarea {
    font-family: Arial Arial, Helvetica, sans-serif;
    font-size:1rem;
}

div {
    overflow: hidden;
}

/*Tabeller*/

/*Tabell uten borders*/
.table-nolines {
    /*border: solid 2px white;*/
}
    .table-nolines td {
        border: none;
        /*color: red;*/
    }


/* Tabell uten border, men avrundet border for hver rad*/
.table-rounded-rows {
    border-collapse: separate;
    border-spacing: 0; /* Ensure no extra spacing around the table */
    width: 100%;
}

    .table-rounded-rows tr {
        background-color: var(--background-color-light); /* Optional: background color for rows */
    }

    /* Apply borders to each cell to simulate row borders */
    .table-rounded-rows td {
        border: 1px solid var(--background-color-dark); /* Border around each cell */
        padding: var(--padding-xsm);
        background-color: var(--background-color-light); /* Background color for the cells */
    }

        /* Apply vertical borders between cells */
        .table-rounded-rows td + td {
            border-left: 1px solid var(--background-color-dark); /* Border between cells */
        }

    /* Apply rounded corners to the first and last cells of each row */
    .table-rounded-rows tr:first-child td:first-child {
        border-top-left-radius: var(--border-radius-md);
    }

    .table-rounded-rows tr:first-child td:last-child {
        border-top-right-radius: var(--border-radius-md);
    }

    .table-rounded-rows tr:last-child td:first-child {
        border-bottom-left-radius: var(--border-radius-md);
    }

    .table-rounded-rows tr:last-child td:last-child {
        border-bottom-right-radius: var(--border-radius-md);
    }

    /* Optional: add hover effect for each row 
    .table-rounded-rows tr:hover td {
        background-color: var(--background-color-hover);
    }*/







.page-width-holder-default {
    max-width: 500px;
    margin: auto;
}

.page-width-holder-max {
    max-width: 100%;
    margin: auto;
}

.control-container {
    /*For master*/
    box-sizing: border-box;
    border: var(--border-width-sm) solid var(--background-color-red);
    border-radius: var(--border-radius-md);
    /*
        margin:10px 0px;
        margin-bottom: .5rem;
        width: 100%;
    */
}

.control-header {
    /*For master*/
    background-color: var(--background-color-red);
    padding: 10px 10px;
}

.control-header-text {
    /*For master*/
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-buttonListContainer {
    width: fit-content;
    /*padding: 10px 5px;*/
    width: 100%;
    /*margin:auto;*/
}
.login-buttonListItem {
    padding: 8px;
    border: 1px solid var(--background-color-medium);
    border-radius: var(--border-radius-md);
    display: block;
    color: var(--background-color-xtradark);
    margin: 5px 10px;
    /*
    background-color: #ddd;
        padding: 10px 10px;
        border: none;
    */
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*
    width: calc(100% - 3rem);

*/
}
.login-buttonListItem:hover {
        background-color: var(--background-color-xtradark);
        color: white;
    }

.FlagButtonNonSelected{
    float:left;
    width:35px;
    height:auto;
    margin:2px 5px 2px 2px;
}
.FlagButtonSelected {
    border: 2px solid white;
    float: left;
    width: 35px;
    height: auto;
    margin: 0px 3px 0px 0px;
}

table.atferd_nolines {
    border-collapse: collapse;
}

    table.atferd_nolines td, table.atferd_nolines th {
        padding: 3px;
        vertical-align: top;
    }

    table.atferd_nolines th {
        font-weight: bold;
    }

table.atferd_enkeltabell {
    border: 1px solid var(--background-color-dark);
    border-collapse: collapse;
}

    table.atferd_enkeltabell td, table.atferd_enkeltabell th {
        border: 1px solid var(--background-color-dark);
        padding: 3px;
        vertical-align: top;
    }

    table.atferd_enkeltabell th {
        font-weight: bold;
    }


/*Kontroller i skjema*/

input label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=text], input[type=password], input[type=date], select, textarea, input[type=checkbox] {
    width: 100%;
    padding: var(--padding-md);
    border: 1px solid var(--background-color-medium);
    border-radius: var(--border-radius-md);
    box-sizing: border-box;
    resize: vertical;
}

input[type=date] {
    font-family: Arial Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

    input[type=button], input[type=submit] {
        /*Fjerner avrundede hjørner på knapper i Safari
    Noen rapporter om at det kan påvirke avkrysningsbokser i Chrome...
*/ /*
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    */
        padding: var(--padding-md);
        border: 1px solid var(--background-color-medium);
        border-radius: var(--border-radius-md);
    }

/*RadioButton- og Checkboxlist holder ikke tekst fordelt over flere linjer sammen*/
.alignLabelWithInput input[type=checkbox], input[type=radio] {
    width: 20px;
    display: inline-block;
    float: left;
    /*margin-top: 5px;*/
    vertical-align: baseline;
}

.alignLabelWithInput label {
    max-width: 90%;
    display: inline-block;
    float: left;
    /*vertical-align:middle;
      color:rebeccapurple;*/
}


/* Floating left column if sufficient space */
.col-left {
    float: left;
    width: 35%;
    margin-top: var(--margin-sm);
}

/* Floating right column if sufficient space*/
.col-right {
    float: left;
    width: 65%;
    margin-top: var(--margin-sm);
}

.col-right input[type=submit]{
    width:100%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

div.hideForMobile {
    /*Til bruk for skjemaer der en tom plassholder-div skal skjules i mobil-sammenheng
        Se @media...
    */
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-left, .col-right, input[type=submit] {
        width: 100%;
        /*margin-top: 0;*/
    }

    div.hideForMobile{
        display:none;
    }
    
}

/*Utprøving av stiler til søk etter kontakter - kan kanskje generaliseres til annnen bruk*/
/*Div som omslutter en seksjon*/
div.search-area-container {
    padding: 7px;
    border: 1px solid var(--background-color-medium);
    border-radius: var(--border-radius-md);
    box-sizing:border-box;
    /*
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
*/
}

.search-list {
    padding: 0;
    list-style-type: none;
    min-height: 500px;/**/
    /*overflow:auto;
    width: 400px;*/
}
.search-list-children {
    /*Denne har ikke høydebegrensning. eks. underordnede presentasjoner*/
    padding: 0;
    list-style-type: none;
}

.search-item {
    background-color: var(--background-color-xtralight);
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    margin: 0px 0px 10px 0px;   
    padding: 15px 10px;
}
    .search-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        background-color: var(--background-color-dark);
        cursor: pointer;
    }
.search-item-child {
    background-color: #f7f5f5;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    margin: 0px 0px 10px 0px;
    padding: 7px 5px;
}
    .search-item-child:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        background-color: var(--background-color-dark);
        cursor: pointer;
    }

.search-item-selected {
    background-color: var(--background-color-dark);
}

.search-item:active {
    background-color: var(--background-color-dark);
}

.search-item-header {
    font-weight:600;
    margin: 0px 0px 5px 5px;
    /*letter-spacing: 0.5px;
    flex: 2;  
    text-align: center;*/
}

.search-item-general {
    padding: 0px 0px 5px 5px;
    /*border-left: 1px solid #aaa;
    color: #777;
    flex: 1;*/
}



/*Modal*/

/* The Modal (background) */
.modal-dialog-background {
    /*display: none;*/ /* Hidden by default */ /*Overlates til Codebehind som setter hele usercontrolen til synlig/ikke synlig*/
    position: fixed; /* Stay in place */
    /*z-index: 10;  Tilordnes som stil-attributt av code-behind */
    /*padding-top: 100px; Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.modal-dialog-container {
    /*z-index: 11; Tilordnes som stil-attributt av code-behind*/
    position: fixed; /* Fixed position for modal behavior */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0); /*Se forklaring i modal-dialog-body*/
    will-change: transform; /*Se forklaring i modal-dialog-body*/
    max-width: 60%; /* Adjust width as needed */
    min-width: 400px;
    max-height: 90vh; /* Limit the height to 90% of the viewport */
    background-color: #fefefe;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Add some shadow for a pop-out effect */

    display: flex;
    flex-direction: column; /* Stack header, body, and footer vertically */
    overflow: hidden; /* Prevent the entire container from overflowing */
    border-radius: 8px; /* Optional: round the corners */

}

.modal-dialog-header {
    flex: 0 0 60px; /* Fixed height of 60px */
    display:flex; 
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding: 4px 10px 4px 15px;
    background-color: var(--background-color-dark);
    cursor: move;
    box-sizing:border-box;
    /*line-height:40px;*/
    vertical-align: middle;
    overflow: hidden;
    /*width:100%;
    box-sizing:border-box;
    padding: 4px 10px 4px 15px;
    background-color: var(--background-color-dark);
    font-size:1.2rem;
    font-weight:bold;
    cursor:move;
*/
}

.modal-dialog-header-text{
    flex:1;
    font-size: 1.2rem;
    font-weight: bold;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

}

.modal-dialog-body {
    flex: 1; /* Take up the remaining space */
    /*padding: 10px;  Padding for content */
    overflow-y: auto; /* Add vertical scroll when content overflows */
    padding: var(--padding-sm);
    /*De følgende to linjene ble foreslått av Chat-GPT for å unngå en snål blurry-effekt ved overflow:
        This forces the browser to render the scrollable container on its own GPU layer, which can help with rendering artifacts like blurriness.
        Obs! Også tilordnet nærmeste ancester med position:fixed...

    transform: translateZ(0);
    will-change: transform;
    */
}

.modal-dialog-body-content {
    width:100%;
    float: left;
    text-align: left;
    overflow: hidden;
    /*
    transform: translateZ(0);
*/
}

.modal-dialog-footer {
    flex: 0 0 50px;
    padding: 4px; /* Padding for content */
    background-color: var(--background-color-dark);
    /*
    background-color: var(--background-color-dark);
    padding:4px;
*/
}

.modal-dialog-footer-buttons {
    width:50%;
    margin-left:auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    /*width: 100px;
        float: right;
    margin-left: 20px;*/
}

.modal-dialog-footer-buttons input{
    /*padding:5px;*/
    display:block;
    flex-basis:100px;
    flex-grow:1;
    flex-shrink:1
}

/*Generelle ting for skjemaer*/

.nafobase-container-parent-margin{
    margin:var(--margin-sm);
}
.nafobase-container-general-border {
    border: var(--border-width-sm) solid var(--background-color-dark);
    border-radius: var(--border-radius-md);
}

.nafobase-container-header-grey1{
    background-color: var(--background-color-dark);
    padding: var(--padding-md);
    font-size:var(--font-size-lg);
    font-weight:bold;
    box-sizing:border-box;
}
.nafobase-container-header-grey2 {
    background-color: var(--background-color-dark);
    padding: var(--padding-md);
    font-size: var(--font-size-md);
    box-sizing:border-box;
}

.nafobase-container-content-padding{
    padding:var(--padding-md);
}
.nafobase-container-content-padding-sm {
    padding: var(--padding-sm);
}
.nafobase-container-content-padding-lg {
    padding: var(--padding-lg);
}

.nafobase-container-respond-on-hover{
    /*Kan tilordnes elementer som skal visuelt markeres når muspeker beveger seg over*/
}
    .nafobase-container-respond-on-hover:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        background-color: var(--background-color-dark);
        cursor: pointer;
    }

/*Skjemaer - kolonner*/

.nafobase-col-left-wide {
    float: left;
    width: 50%;
    margin-top: var(--margin-sm);
}

.nafobase-col-right-narrow {
    float: left;
    width: 50%;
    margin-top: var(--margin-sm);
}

    .nafobase-col-right-narrow input[type=submit] {
        width: 100%;
    }

.nafobase-col-left {
    float: left;
    width: 35%;
    margin-top: var(--margin-sm);
}

.nafobase-col-right {
    float: left;
    width: 65%;
    margin-top: var(--margin-sm);
}

    .nafobase-col-right input[type=submit] {
        width: 100%;
    }



/* Clear floats after the columns */
.nafobase-row:after {
    content: "";
    display: table;
    clear: both;
}

div.nafobase-col-hideForMobile {
    /*Til bruk for skjemaer der en tom plassholder-div skal skjules i mobil-sammenheng
        Se @media...
    */
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .nafobase-col-left, .nafobase-col-left-wide, .nafobase-col-right, .nafobase-col-right-narrow, input[type=submit] {
        width: 100%;
        /*margin-top: 0;*/
    }

    div.nafobase-col-hideForMobile {
        display: none;
    }
}


/*Skjema-kolonner: Flex-tilnærming*/
.nafobase-form-flex-container {
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap; /* Allows items to wrap to the next line if necessary */
    /*align-items: start;*/
}
.nafobase-form-flex-item-fixed {
    flex-grow: 0;
    flex-shrink: 0;
    /*padding: var(--padding-sm);*/
    box-sizing: border-box;
}
.nafobase-form-flex-item-nogrow {
    flex-grow: 0;
    flex-shrink: 1;
    /*padding: var(--padding-sm);*/
    box-sizing: border-box;
}
.nafobase-form-flex-item-noshrink {
    flex-grow: 1;
    flex-shrink: 0;
    /*padding: var(--padding-sm);*/
    box-sizing: border-box;
}
.nafobase-form-flex-item-basis-100{
    flex-basis:100px;
}
.nafobase-form-flex-item-basis-150{
    flex-basis:150px;
}
.nafobase-form-flex-item-basis-200 {
    flex-basis: 200px;
}
.nafobase-form-flex-item-basis-250 {
    flex-basis: 250px;
}
.nafobase-form-flex-item-basis-300 {
    flex-basis: 300px;
}
.nafobase-form-flex-item-basis-350 {
    flex-basis: 350px;
}
.nafobase-form-flex-item-basis-400 {
    flex-basis: 400px;
}
.nafobase-form-flex-item-basis-500 {
    flex-basis: 500px;
}
.nafobase-form-flex-item-basis-600 {
    flex-basis: 600px;
}
.nafobase-form-flex-item-basis-700 {
    flex-basis: 700px;
}

.nafobase-form-button {
    display:block;
    box-sizing: border-box;
    /*border: 1px solid #ccc;*/
    border: 1px solid var(--background-color-dark);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    padding:var(--margin-sm) var(--padding-sm);
    /*padding: 15px 10px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;*/
}

    .nafobase-form-button:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        background-color: var(--background-color-dark);
        cursor: pointer;
    }

.nafobase-form-button-disabled {
    display:block;
    box-sizing: border-box;
    border: 1px solid var(--background-color-dark);
    border-radius: var(--border-radius-sm);
    /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);*/
    padding: var(--margin-sm) var(--padding-sm);
    /*flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;*/
}


/*Skjema - tabeller*/

.nafobase-table-1 {
    border: var(--border-width-sm) solid var(--background-color-dark);
    border-radius: var(--border-radius-md);
    border-collapse: collapse;
}
    .nafobase-table-1 th {
        font-size: var(--font-size-sm);
        padding:var(--padding-sm);
    }

    .nafobase-table-1 td {
        border: var(--border-width-sm) solid var(--background-color-dark);
        font-size: var(--font-size-sm);
        padding: var(--padding-xsm);

    }