:root {
    /* Not colors */
    --margin-large: 7rem;
    --margin-small: 3rem;
    --margin-tiny: 2.0rem;
    --border-width: 1px;
    --border-radius-tags: 50px;
    --border-radius-buttons: 6px;
    --border-radius-boxes: 10px;
    --border-radius-forms: 5px;
    --border-radius-groups: 15px;
    --color-transparency: 1.0;
    overscroll-behavior: none;
    /* Colors not changing in dark mode */
    --white-color: rgba(255, 255, 255, 1.0);
    --light-color: rgba(200, 200, 200, 1.0);
    --grey-color: rgba(100, 100, 100, 1.0);
    --dark-color: rgba(50, 50, 50, 1.0);
    --black-color: rgba(0, 0, 0, 1.0);
    --transparent-color: rgba(255, 255, 255, 0.0);
    --zone1-color: rgba(166, 166, 166, 1.0);
    --zone2-color: rgba(59, 151, 243, 1.0);
    --zone3-color: rgba(130, 201, 30, 1.0);
    --zone4-color: rgba(249, 137, 37, 1.0);
    --zone5-color: rgba(211, 32, 32, 1.0);
    --zone6-color: rgba(179, 221, 255, 1.0);
    --zone7-color: rgba(99, 186, 255, 1.0);
    --zone8-color: rgba(159, 143, 255, 1.0);
    --map-path1-color: rgba(255, 0, 0, 1.0);
    --map-path2-color: rgba(0, 0, 255, 1.0);
    --map-path3-color: rgba(0, 255, 0, 1.0);
    --map-path4-color: rgba(255, 255, 0, 1.0);
    --map-path5-color: rgba(128, 0, 128, 1.0);
    --map-path6-color: rgba(0, 255, 255, 1.0);
    --map-path7-color: rgba(255, 0, 255, 1.0);
    --map-path8-color: rgba(128, 0, 0, 1.0);
    /*Spesific colors*/
    --background-color: light-dark(rgba(235, 235, 235, 1.0),rgba(26, 23, 25, 1.0));
    --color: light-dark(rgba(6, 10, 15, 1.0), rgba(249, 245, 240, 1.0));
    --secondary-color: color-mix(in srgb, var(--color) 100%, var(--light-text-color) 80%);
    --dark-text-color: light-dark(rgba(0, 0, 0, 1.0),rgba(255, 255, 255, 1.0));
    --light-text-color: light-dark(rgba(255, 255, 255, 1.0),rgba(0, 0, 0, 1.0));
    --overlay-color: light-dark(rgba(0, 0, 0, .5),rgba(0, 0, 0, .5));
    --shadow-color: light-dark(rgba(0, 0, 0, 0.1),rgba(255, 255, 255, 0.3));
    --notepad-background-color: light-dark(rgba(215, 215, 205, 1.0),rgba(40, 40, 50, 1.0));
    --card-background-color: light-dark(rgba(255, 255, 255, 1.0),rgba(40, 40, 40, 1.0));
    /* Navbar */
    --navbar1-color: light-dark(rgba(96, 181, 255, 1.0), rgba(96, 181, 255, 1.0));
    --navbar1-text-color: light-dark(var(--light-text-color), var(--dark-text-color));
    --navbar2-color: light-dark(rgba(250, 218, 122, 1.0), rgba(255, 218, 122, 1.0));
    --navbar2-text-color: light-dark(var(--dark-text-color), var(--light-text-color));
    --navbar3-color: light-dark(rgba(205, 168, 82, 1.0), rgba(205, 168, 82, 1.0));
    --navbar3-text-color: light-dark(var(--light-text-color), var(--dark-text-color));
    --login-color: light-dark(rgba(255, 145, 73, 1.0), rgba(255, 145, 73, 1.0));
    --admin-color: light-dark(rgba(251, 65, 65, 1.0), rgba(251, 65, 65, 1.0));
    /* Footer */
    --footer-color: var(--navbar1-color);
    --footer-text-color: var(--navbar1-text-color);
    /* Forms */
    --form-text-color: var(--dark-color);
    --form-background-color: light-dark(rgba(250, 250, 250, 1.0),rgba(211, 211, 211, 1.0));
    --form-border-color: var(--grey-color);
    /* Colors */
    --default-color: light-dark(rgba(96, 181, 255, var(--color-transparency)), rgba(96, 181, 255, var(--color-transparency)));
    --primary-color: light-dark(rgba(228, 90, 146, var(--color-transparency)), rgba(228, 90, 146, var(--color-transparency)));
    --info-color: light-dark(rgba(250, 218, 122, var(--color-transparency)), rgba(250, 218, 122, var(--color-transparency)));
    --success-color: light-dark(rgba(89, 172, 119, var(--color-transparency)), rgba(89, 172, 119, var(--color-transparency)));
    --warning-color: light-dark(rgba(255, 145, 73, var(--color-transparency)), rgba(255, 145, 73, var(--color-transparency)));
    --danger-color: light-dark(rgba(251, 65, 65, var(--color-transparency)), rgba(251, 65, 65, var(--color-transparency)));
    --dark-color: light-dark(rgba(50, 50, 50, var(--color-transparency)), rgba(50, 50, 50, var(--color-transparency)));
    --light-color: light-dark(rgba(254, 243, 226, var(--color-transparency)), rgba(254, 243, 226, var(--color-transparency)));
    --strava-color: light-dark(rgba(252, 82, 0, var(--color-transparency)), rgba(252, 82, 0, var(--color-transparency)));
    --transparent-color: rgba(127, 127, 127, 0.3);
    --dark-transparent-color: light-dark(rgba(50, 50, 50, 0.3), rgba(200, 200, 200, 0.3));
    --light-transparent-color: light-dark(rgba(200, 200, 200, 0.3), rgba(50, 50, 50, 0.3));
    /* Autogenerated border colors */
    --default-border-color: color-mix(in srgb, var(--default-color) 100%, var(--black-color) 20%);
    --primary-border-color: color-mix(in srgb, var(--primary-color) 100%, var(--black-color) 20%);
    --info-border-color: color-mix(in srgb, var(--info-color) 100%, var(--black-color) 20%);
    --success-border-color: color-mix(in srgb, var(--success-color) 100%, var(--black-color) 20%);
    --warning-border-color: color-mix(in srgb, var(--warning-color) 100%, var(--black-color) 20%);
    --danger-border-color: color-mix(in srgb, var(--danger-color) 100%, var(--black-color) 20%);
    --dark-border-color: color-mix(in srgb, var(--dark-color) 100%, var(--black-color) 20%);
    --light-border-color: color-mix(in srgb, var(--light-color) 100%, var(--black-color) 20%);
    --strava-border-color: color-mix(in srgb, var(--strava-color) 100%, var(--black-color) 20%);
    --transparent-border-color: color-mix(in srgb, var(--transparent-color) 100%, var(--black-color) 20%);
    --dark-transparent-border-color: color-mix(in srgb, var(--dark-transparent-color) 100%, var(--black-color) 20%);
    --light-transparent-border-color: color-mix(in srgb, var(--light-transparent-color) 100%, var(--black-color) 20%);
    /* Autogenerated top border colors */
    --default-border-top-color: color-mix(in srgb, var(--default-border-color) 100%, var(--white-color) 100%);
    --primary-border-top-color: color-mix(in srgb, var(--primary-border-color) 100%, var(--white-color) 100%);
    --info-border-top-color: color-mix(in srgb, var(--info-border-color) 100%, var(--white-color) 100%);
    --success-border-top-color: color-mix(in srgb, var(--success-border-color) 100%, var(--white-color) 100%);
    --warning-border-top-color: color-mix(in srgb, var(--warning-border-color) 100%, var(--white-color) 100%);
    --danger-border-top-color: color-mix(in srgb, var(--danger-border-color) 100%, var(--white-color) 100%);
    --dark-border-top-color: color-mix(in srgb, var(--dark-border-color) 100%, var(--white-color) 100%);
    --light-border-top-color: color-mix(in srgb, var(--light-border-color) 100%, var(--white-color) 100%);
    --strava-border-top-color: color-mix(in srgb, var(--strava-border-color) 100%, var(--white-color) 100%);
    --transparent-border-top-color: color-mix(in srgb, var(--transparent-border-color) 100%, var(--white-color) 100%);
    --dark-transparent-border-top-color: color-mix(in srgb, var(--dark-transparent-border-color) 100%, var(--white-color) 100%);
    --light-transparent-border-top-color: color-mix(in srgb, var(--light-transparent-border-color) 100%, var(--white-color) 100%);
    /* Autogenerated hover colors */
    --default-hover-color: color-mix(in srgb, var(--default-color) 100%, var(--white-color) 50%);
    --primary-hover-color: color-mix(in srgb, var(--primary-color) 100%, var(--white-color) 50%);
    --info-hover-color: color-mix(in srgb, var(--info-color) 100%, var(--white-color) 50%);
    --success-hover-color: color-mix(in srgb, var(--success-color) 100%, var(--white-color) 50%);
    --warning-hover-color: color-mix(in srgb, var(--warning-color) 100%, var(--white-color) 50%);
    --danger-hover-color: color-mix(in srgb, var(--danger-color) 100%, var(--white-color) 50%);
    --dark-hover-color: color-mix(in srgb, var(--dark-color) 100%, var(--white-color) 50%);
    --light-hover-color: color-mix(in srgb, var(--light-color) 100%, var(--white-color) 50%);
    --strava-hover-color: color-mix(in srgb, var(--strava-color) 100%, var(--white-color) 50%);
    --transparent-hover-color: color-mix(in srgb, var(--transparent-color) 100%, var(--white-color) 50%);
    --dark-transparent-hover-color: color-mix(in srgb, var(--dark-transparent-color) 100%, var(--white-color) 50%);
    --light-transparent-hover-color: color-mix(in srgb, var(--light-transparent-color) 100%, var(--white-color) 50%);
    /* Autoegenerated navbar */
    /*--navbar-border-color: color-mix(in srgb, var(--navbar1-color) 100%, var(--white-color) 50%);*/
    --navbar1-active-color: color-mix(in srgb, var(--navbar1-color) 100%, var(--white-color) 35%);
    --navbar1-hover-color: color-mix(in srgb, var(--navbar1-color) 100%, var(--white-color) 25%);
    --navbar2-border-color: color-mix(in srgb, var(--navbar2-color) 100%, var(--black-color) 25%);
    --navbar2-active-color: color-mix(in srgb, var(--navbar2-color) 100%, var(--white-color) 35%);
    --navbar2-hover-color: color-mix(in srgb, var(--navbar2-color) 100%, var(--white-color) 25%);
    --navbar3-border-color: color-mix(in srgb, var(--navbar3-color) 100%, var(--black-color) 25%);
    --navbar3-active-color: color-mix(in srgb, var(--navbar3-color) 100%, var(--black-color) 25%);
    --navbar3-hover-color: color-mix(in srgb, var(--navbar3-color) 100%, var(--black-color) 15%);
    --navbar-admin-hover-color: color-mix(in srgb, var(--admin-color) 100%, var(--white-color) 50%);
    --navbar-login-hover-color: color-mix(in srgb, var(--login-color) 100%, var(--white-color) 50%);
}


    :root:has(#theme [value="☀️"]:checked) {
        color-scheme: light;
    }

    :root:has(#theme [value="🌑"]:checked) {
        color-scheme: dark;
    }



.container {
    margin-left: var(--margin-large);
    margin-right: var(--margin-large);
}

.margin-top-large {
    margin-top: var(--margin-large);
}

.margin-top-small {
    margin-top: var(--margin-small);
}

.margin-bottom-large {
    margin-bottom: var(--margin-large);
}

.margin-bottom-small {
    margin-bottom: var(--margin-small);
}

.open-sidebar-button {
    width: 40px;
    height: 40px;
}

.close-sidebar-button {
    width: 40px;
    height: 40px;
}

@media (prefers-color-scheme: dark) {

    .open-sidebar-button {
        color: var(--white-color);
    }

    .close-sidebar-button {
        color: var(--white-color);
    }
}

@media (prefers-color-scheme: light) {

    .open-sidebar-button {
        color: var(--navbar-color);
    }

    .close-sidebar-button {
        color: var(--white-color);
    }
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html {
    font-family: Poppins, "Segoe UI", sans-serif;
    font-size: var(--dynamic-fontsize);
    line-height: calc(var(--dynamic-fontsize) * 1.5);
    color: var(--dark-text-color);
}

body {
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--background-color) 100%,var(--light-color) 80%), var(--background-color));
    color: var(--color);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    /* For at footer skal komme nederst */
    position: relative;
    padding-bottom: 8rem; /* Denne må økes hvis footer blir større */
    margin: 0;
    /* For at footer skal komme nederst SLUTT */
}

img {
    display: block;
    max-inline-size: 100%;
}

a, a:visited {
    color: var(--color);
}


header {
    color: var(--color);
    font-family: inherit;
    font-size: xx-large;
    line-height: 2ex;
    margin-top: 2ex;
}

    header .subheader {
        color: var(--secondary-color);
        text-decoration: none;
        font-style: italic;
        font-weight: normal;
        font-size: medium;
    }

.verysmalltitle {
    font-weight: bold;
    font-size: xx-small;
}

.LotOfTableContent {
}

main {
    padding: min(5em, 7%);
}

    main p {
        margin-top: .35em;
    }


.FullWidth {
    width: 100%;
}

.Small {
    width: min-content;
    padding: 0.1rem;
}

.Large {
    width: max-content;
}

.rowheader {
    color: var(--color);
    font-weight: bold;
}

    .rowheader a {
        text-decoration: none;
        color: var(--color);
        font-weight: bold;
    }

.selected-row {
    color: var(--dark-text-color);
    background-color: var(--transparent-color);
}


.activitycard {
    width: 100%;
    overflow: auto;
    display: flex;
    break-inside: avoid;
    page-break-inside: avoid;
}


h7, h6, h5, h4, h3, h2, h1, p {
    margin-top: 1em;
}


/* (Terje Furuseth på PersonInfo) */
h1 {
    font-size: 3rem;
    line-height: calc(3rem * 1.5);
}
/* Store titler */
h2 {
    font-size: 2rem;
    line-height: 2.4rem;
    /*
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-transform: uppercase;
    font-size: 5rem;
    letter-spacing: .15em;
*/
}
/* Substore titler (Headere i kalklulatorer */
h3 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.75rem;
    margin-bottom: 0.5rem;
}

/* Listetitler (EpochCard-Title) */
h4 {
    font-size: 1rem;
    line-height: 1.2rem;
}
/* Sublistetitler (EpochCard-Forfatter */
h5 {
    font-size: 0.8rem;
    line-height: 1.0rem;
}
/* Ikke i bruk */
h6 {
    font-size: 1.5rem;
    line-height: 1.8rem;
}
/* (Timer/minutter/sekunder/hundredeler) */
h7 {
    font-size: xx-small;
}

label {
    display: block;
    margin-top: var(--margin-tiny);
}

    h1::after, h2::after, h3::after, h4::after, h5::after, h6::after, h7::after, label::after {
        content: "\a";
        white-space: pre;
    }



td, th {
    padding-right: 10px;
    padding-bottom: 5px;
    vertical-align: top;
}


.marked-text {
    background-color: yellow;
    color: black;
    font-weight: 500;
    padding: 0px 5px 0px 5px;
    /*border: 1px solid red;*/
    box-shadow: 0 0px 5px var(--shadow-color);
}

.show-content {
    display: block;
}

.hide-content {
    display: none;
}


.imageEnhanced {
    border: solid 1px #000000;
}

.imageEnhancedLarge {
    width: 100%;
}

.imageEnhancedMedium {
    width: 50%;
    display: block;
}

.imageEnhancedSmall {
    width: 25%;
    display: block;
}

.imageEnhancedIndex {
    height: 3rem;
    margin-right: 0.5ch;
    margin-bottom: 0.5ch;
}


.chartEnhanced {
    overflow-wrap: anywhere;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    box-shadow: 0 2px 20px var(--shadow-color);
}

.tagEnhanced {
    font-size: x-small;
    height: 24px;
    background-color: var(--dark-color);
    color: var(--light-color);
    border: var(--border-width) solid var(--light-color);
    border-radius: var(--border-radius-tags);
    text-transform: uppercase;
    margin: 0 5px 0 0;
    padding: 0px 10px;
    line-height: 24px;
    line-break: strict;
    max-width: max-content;
}

.GridViewContainer {
    margin-bottom: 1rem;
}


.Zone5 {
    background-color: var(--zone5-color);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 1em 1.5em;
    border: 0;
}

.Zone4 {
    background-color: var(--zone4-color);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 1em 1.5em;
    border: 0;
}

.Zone3 {
    background-color: var(--zone3-color);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 1em 1.5em;
    border: 0;
}

.Zone2 {
    background-color: var(--zone2-color);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 1em 1.5em;
    border: 0;
}

.Zone1 {
    background-color: var(--zone1-color);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 1em 1.5em;
    border: 0;
}


/*Norgeskart/Statens kartverk*/
.map {
    height: 40em;
    width: 100%;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    border: var(--border-width) solid var(--dark-color);
    border-radius: var(--border-radius-forms);
    box-shadow: 0 2px 20px var(--shadow-color);
}

@media print {
    .noprint {
        display: none !important;
    }
}



@media only screen and (max-width: 700px) {


    /*Norgeskart/Statens kartverk*/
    .map {
        height: 30em;
        width: 100%;
    }

    .container {
        margin-left: var(--margin-tiny);
        margin-right: var(--margin-tiny);
    }

    .imageEnhancedLarge {
        width: 100%;
    }

    .imageEnhancedMedium {
        width: 100%;
    }

    .imageEnhancedSmall {
        width: 100%;
    }

    .chartEnhanced {
        width: 100%;
        max-width: 100%;
        margin: auto;
        box-shadow: 0 2px 20px var(--shadow-color);
    }
}

@media only screen and (min-width: 700px) {
    .imageEnhanced {
    }
}


@media only screen and (min-width: 700px) and (max-width: 1100px) {
    .container {
        margin-left: var(--margin-small);
        margin-right: var(--margin-small);
    }
}