:root {
    --topRowBakgrunn: white; /*#424242;*/
    --bakgrunn: white; /*#424242;*/
    --ramme2: white;
    --forgrunn: black;
    --forgrunnText: white;
    --forgrunnOverskrift: white;
    --hvitForgrunn: white;
    --svartForgrunn: #424242;
    --morkBakgrunn: white; /*#424242;*/
    --lysBakgrunn: white;
    --hvitBakgrunn: white;
    --svartBakgrunn: black;
    --button: white;
    --buttonText: white;
    --buttonHover: #512dbf;
    --buttonHoverText: white;
    --buttonFrom: #6c757d;
    --buttonTo: #6a6e71;
    --buttonSlett: pink;
    --buttonSlettHover: red;
    --bakgrunnGra: rgb(128,128,128,0.05);
    --rammeGra: gray;
    --ramme: black;
    --strek: #512dbf;
    --borderBottom: orange;
    --tabellRamme: black;
    --bakgrunnHele: white#  /*424242;*/ 
    --buttonGraa: #6c757d;
    --rammeSvart: #000;
    --rammeHvit: #fff;
}

body {
    background-color: var(--bakgrunn);
    color: var(--forgrunn);
}

a {
    color: var(--forgrunn);
}

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

.button_Liten {
    background-color: darkgreen;/*var(--buttonGraa);*/
    width: 100%;
    color: white; /*var(--svartForgrunn);*/
    border: 2px solid var(--ramme);
    border-radius: 8px;
    height: 45px;
    /*box-shadow: 3px 3px 8px rgba(128, 128, 128, 0.2);*/
    /*font-weight: bold;*/
    font-size: 1.2rem;
    text-align: center;
    margin-right: 10px;
}

    .button_Liten:hover {
        animation-name: byttButtonLitenFarge;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        cursor: pointer;
        color: var(--buttonHoverText);
        /*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
    }

    .button_Liten:focus {
        animation-name: byttButtonLitenFarge;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        cursor: pointer;
        color: var(--buttonHoverText);
        /*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
    }

@keyframes byttButtonLitenFarge {
    from {
        background-color: darkgreen; /*var(--buttonFrom);*/
        color: white; /*var(--buttonHoverText);*/
        /*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
    }

    to {
        background-color: lightgreen; /*var(--buttonTo);*/
        color: black; /*var(--buttonHoverText);*/
        border: thin solid black; /*var(--rammeHvit);*/
        /*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
    }
}

/* ***** SLIDER ***** */
/* Selve "linja" (track) */
.slider {
    -webkit-appearance: none; /* fjern default-styling i Chrome/Safari */
    appearance: none;
    width: 100%; /* bredde */
    height: 10px; /* høyde på track */
    border-radius: 999px;
    background: #ddd; /* bakgrunnsfarge på track */
    outline: none;
    padding: 0;
    margin: 0;
}

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px; /* størrelse på tommel */
        height: 24px;
        border-radius: 50%;
        background: #198754; /* grønn knapp (f.eks. Bootstrap success) */
        border: 2px solid #fff;
        box-shadow: 0 0 4px rgba(0,0,0,0.3);
        cursor: pointer;
        margin-top: -7px; /* juster slik at den ligger midt på track */
    }

    .slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #198754;
        border: 2px solid #fff;
        box-shadow: 0 0 4px rgba(0,0,0,0.3);
        cursor: pointer;
    }

    .slider::-webkit-slider-runnable-track {
        height: 10px;
        border-radius: 999px;
        background: #ccc; /* endre til ønsket farge */
    }

    .slider::-moz-range-track {
        height: 10px;
        border-radius: 999px;
        background: #ccc;
    }

    .slider:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.4); /* grønn “glød” rundt */
    }

/* ***** CHECKBOX ***** */
/* Standard checkbox */
.chk2 {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #777;
    border-radius: 6px; /* sett 0 for firkant */
    background: #fff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

    .chk2:checked {
        border-color: #198754;
        background: #198754;
    }

    .chk2::before {
        content: "";
        width: 10px;
        height: 6px;
        border-left: 3px solid #fff;
        border-bottom: 3px solid #fff;
        transform: rotate(-45deg);
        opacity: 0;
    }

    .chk2:checked::before {
        opacity: 1;
    }

    .chk2:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.35);
    }