:root {
    --strongblue: #0b1558;
    --primarycolor: #a2e1cc;
    --secondarycolor: #afdecf;
    --mynav-bg: #b6d3e4;
    /* #f0dcd6; */
}

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.navbar {
    --mdb-navbar-box-shadow: 0 0 0 0 rgba(var(--mdb-box-shadow-color-rgb), 0.00), 0 0 0 rgba(var(--mdb-box-shadow-color-rgb), 0.00);
}

.btn-primary {
    --mdb-btn-bg: var(--primarycolor);
    --mdb-btn-color: var(--strongblue);
    --mdb-btn-hover-bg: var(--secondarycolor);
    --mdb-btn-hover-color: var(--strongblue);
    --mdb-btn-focus-bg: var(--secondarycolor);
    --mdb-btn-active-bg: var(--secondarycolor);
    --mdb-btn-box-shadow: 0 4px 9px -4px var(--primarycolor);
}

.btn-secondary {
    --mdb-btn-bg: rgba(255, 0, 0, 0);
    --mdb-btn-color: var(--strongblue);
    --mdb-btn-hover-bg: var(--primarycolor);
    --mdb-btn-hover-color: var(--strongblue);
    --mdb-btn-focus-bg: var(--secondarycolor);
    --mdb-btn-active-bg: var(--secondarycolor);
    --mdb-btn-active-color: var(--primarycolor);
    --mdb-btn-box-shadow: 0 4px 9px -4px #4f1168;
}

.btn-outline-secondary {
    --mdb-btn-color: var(--strongblue);
    --mdb-btn-hover-bg: var(--secondarycolor);
    --mdb-btn-hover-color: var(--strongblue);
    --mdb-btn-focus-bg: var(--secondarycolor);
    --mdb-btn-focus-color: var(--strongblue);
    --mdb-btn-active-bg: var(--secondarycolor);
    --mdb-btn-active-color: var(--primarycolor);
    --mdb-btn-outline-border-color: var(--secondarycolor);
    --mdb-btn-outline-focus-border-color: var(--primarycolor) --mdb-btn-outline-hover-border-color: var(--primarycolor);
    border-color: var(--mdb-btn-outline-border-color);
}

:not(.btn-check)+.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
    color: var(--strongblue);
    background-color: var(--secondarycolor);
    /* background-color: var(--mdb-btn-active-bg);*/
    border-color: var(--secondarycolor);
    /* box-shadow: var(--mdb-btn-active-shadow);  */
}



.btn-primary:disabled {
    background-color: var(--secondarycolor);
    color: var(--strongblue);
}

.list-group-item.active {
    z-index: 2;
    color: var(--strongblue);
    background-color: var(--secondarycolor);
    border-color: var(--secondarycolor);
}

.form-check-input[type=checkbox]:checked:focus,
.form-check-input[type=checkbox]:checked {
    background-color: var(--strongblue);
}

.form-check-input:checked,
.form-check-input:checked:focus {
    border-color: var(--strongblue);
}


.form-switch .form-check-input:checked[type=checkbox]:after {
    background-color: var(--primarycolor);
}

.accordion-borderless .accordion-item .accordion-button:not(.collapsed) {
    background-color: var(--secondarycolor);
    color: var(--strongblue);
}

.btn-group,
.btn-group-lg>.btn,
.btn-group-sm>.btn {
    border-radius: 0.5rem;
}




.blur {
    filter: blur(5px);
}

.myheadingcolor {
    color: #0b1558;
}

.mynavcolor {
    background-color: var(--mynav-bg);
}

.mybulletpointcolor {
    color: var(--primarycolor);
}

#navbarButtonsExample {
    h5:hover {
        color: #13238f;
    }
}


/* Rotate arrows */
@keyframes rotateAnimation180 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

@keyframes rotateAnimation360 {
    from {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rotate180 {
    animation: rotateAnimation180 1s ease forwards;
    transform-origin: 12px 12px;
}

.rotate360 {
    animation: rotateAnimation360 1s ease forwards;
    transform-origin: 12px 12px;
}

.form-check-input[type=radio]:checked:after {
    background-color: var(--strongblue);
}

.note {
    --mdb-note-border-width: 0px;
}

.note-info {
    background-color: #f5f5f5;
    color: rgb(65, 65, 65);
}


.badge-custom {
    position: absolute;
    top: -0.5rem;
    right: -2.5rem;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 0.5rem;
    font-weight: bold;
    line-height: 1;
    background-color: var(--primarycolor);
    color: var(--strongblue);
}

.cool-underline {
    position: relative;
    /* Establishes a positioning context for the ::after pseudo-element */
    text-decoration: none;
    /* Removes the default underline, if any */
    display: inline-block;
    /* Allows padding and correct width calculation for the underline */
    padding-bottom: 3px;
    /* Adds a small space below the text for the underline */
}

.cool-underline::after {
    content: '';
    /* Necessary for pseudo-elements to be generated */
    position: absolute;
    width: 0;
    /* Starts with no width (invisible) */
    height: 0.1rem;
    /* Thickness of the underline */
    bottom: 0;
    /* Positions the underline at the very bottom of the padded area */
    left: 0;
    /* Aligns the underline to the left */
    background-color: currentColor;
    /* Uses the text's current color for the underline */
    transition: width 0.3s ease-in-out;
    /* Smoothly animates the width change */
}

.cool-underline:hover::after {
    width: 100%;
    /* Expands the underline to the full width of the element on hover */
}

.breadcrumb-link {
    color: var(--strongblue);
}


.figure-caption {
    font-size: 1rem;
    /* Or any other value you want */
}

/* Custom style for quiz question text for better readability */
.quiz-question-text {
    line-height: 1.6;
}

/* Custom progress bar styles */
.progress {
    border-radius: 0.5rem;
}

.progress-bar {
    background-color: var(--primarycolor);
    color: var(--strongblue);
    font-weight: 600;
}

.intro-header {
    letter-spacing: 0.2rem;
    font-size: 2.0rem;
}

.logg-inn-ut-bruker {
    letter-spacing: 0.06rem;
    font-weight: 600;
}

/* Custom style to make card images have a fixed height */
.card-img-fixed-height {
    height: 200px;
    /* Adjust this value as needed */
    object-fit: cover;
    /* This will scale the image to cover the area, cropping if necessary */
    width: 100%;
}

.varsel-danger-color {
    background-color: #fff0f0;
}



/* Shapedivider */
.custom-shape-divider-top-1694973818 {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: rgb(251, 251, 251, 1);
}

.custom-shape-divider-top-1694973818 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 10vh;
    margin-top: -1px;
}

.custom-shape-divider-top-1694973818 .shape-fill {
    fill: #b6d3e4;
}


.progress-height {
    height: 20px;
}

.progress-bar-width {
    width: var(--progress-width, 0%);
}

/* Viewport height utilities */
.min-vh-40 {
    min-height: 40vh;
}

.min-vh-60 {
    min-height: 60vh;
}

.height-25px {
    height: 25px;
}

.footer-bottom-dark-bg {
    background-color: rgba(0, 0, 0, 0.03);
}

.varsel-text-style {
    text-transform: uppercase;
    font-size: 0.8rem;
}

.font-size-07rem {
    font-size: 0.7rem;
}

.font-size-08rem {
    font-size: 0.8rem;
}


#id_remember {
    display: none;
}