@charset "utf-8";

/** These are general CSS-classes and rules for our framework. Any customization should be done in custom.css **/
/** Bootstrap and rte.css is loaded before this file. **/

html {
    height: 100%;
}

section[id],
div[id] {
    scroll-margin-top: var(--cm-header-height);
}

.visibility-managers-only,
.visibility-noone {
    display: none;
}

.visibility-managers-only {
    border: 5px solid rgba(255, 0, 0, .25);
    position: relative;
}

.visibility-managers-only::before {
    content: "Only visible for administrators";
    display: inline-block;
    padding: 5px;
    font-size: 13px;
    background-color: rgba(255, 0, 0, .25);
    position: absolute;
    top: 0;
    right: 0;
}

img,
video,
picture,
iframe {
    width: 100%;
    border-radius: 0;
}

select {
    cursor: pointer;
}

video {
    display: block;
}

/* Styles for video backgrounds. .has-started is added by JS when the video has started */
.cb-field-collapse-readmore .collapse-toggle.collapsed .open,
.cb-field-collapse-readmore .collapse-toggle:not(.collapsed) .collapsed {
    display: none;
}

.min-vh-100 {
    min-height: 100vh !important;
}
.min-vh-75 {
    min-height: 75vh !important;
}
.min-vh-50 {
    min-height: 50vh !important;
}
.min-vh-25 {
    min-height: 25vh !important;
}

/* Normally you would not like to use vh in header, since viewport height changes when you start to scroll and the navbar disappears on mobile. Therefore, we change it to small viewport height (svh) */
.cb-layout-header .min-vh-100 {
    min-height: 100svh !important;
}

.cb-layout-header .min-vh-75 {
    min-height: 75svh !important;
}
.cb-layout-header .min-vh-50 {
    min-height: 50svh !important;
}
.cb-layout-header .min-vh-25 {
    min-height: 25svh !important;
}
.cb-layout-header .vh-100 {
    height: 100svh !important;
}
.cb-layout-header .vh-75 {
    height: 75svh !important;
}
.cb-layout-header .vh-50 {
    height: 50svh !important;
}
.cb-layout-header .vh-25 {
    height: 25svh !important;
}

.min-h-100 {
    min-height: 100% !important;
}

/* Base for aligning content of RichText */
.row>.col .rte-wrapper.horizontal-align-left>* {
    text-align: left !important;
}

.row>.col .rte-wrapper.horizontal-align-center>* {
    text-align: center !important;
}

.row>.col .rte-wrapper.horizontal-align-right>* {
    text-align: right !important;
}

/* Generally we use video.js to play video. It has an annoying black background that we need to remove */
.video-js {
    background-color: transparent;
}

.bg-wrapper .video-js {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.bg-wrapper .video-js.vjs-has-started {
    opacity: 1;
}
.bg-wrapper .vjs-loading-spinner {
    display: none;
}

.vjs-poster img {
    object-fit: cover;
}

/* .full-media is used as a wrapper on images and video that should fill a container. Typically background media, etc. */
.full-media {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.full-media img,
.full-media video,
.full-media .video-js {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* .inline-list is a handy class that can be used to turn ul's into items next to eachother. */
ul.inline-list {
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* .hover-zoom is used on a wrapperelement for an image. If the wrapper is wrapped with an a-tag, the image will zoom in on hover. */
.hover-zoom {
    display: block;
    overflow: hidden;
}
.hover-zoom img {
    width: 100%;
}
a:hover .hover-zoom img {
    transform: scale(1.1);
}

/* If the fitVids-script is used to make embedded videos responsive, theese rules are needed */
.fitVids-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.fitVids-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rte-wrapper {
    width: 100%;
}

/* Makes sure the last element inside RTE does not get spacing at the bottom. In most cases we don't want that spacing since that is controlled bye the field it is in. */
.rte-wrapper>*:last-child {
    margin-bottom: 0;
}

/* If Google reCapthca is used, let's hide the badge. It's not very sexy. */
.grecaptcha-badge {
    visibility: hidden;
}

/* Mobile friendly table is a trick to make the left column sticky on smaller screens. In RTE it is possible to set the class .table-mobile-friendly. In site.js, a function runs to find all tables with this class and wraps it wit div.table-mobile-friendly-container. */
.table-mobile-friendly-container {
    overflow-x: auto;
    font-size: .75rem;
}
.table-mobile-friendly-container>.table-mobile-friendly {
    min-width: 498px;
}
.table-mobile-friendly-container>.table-mobile-friendly tr>td:nth-of-type(1) {
    position: sticky;
    left: 0;
    max-width: 25vw;
    border-right: 1px solid var(--bs-border-color);
    z-index: 1;
}

.table-mobile-friendly-container>.table-mobile-friendly tr:hover>td:nth-of-type(1) {}

/* In cases where we would like to fill a column with an image or video and we use flex-fill to do it, we need some special rules to make sure it works. */
.flex-grow-1>figure picture,
.flex-grow-1>figure .video-js {
    display: block;
    width: 100%;
    height: 100% !important;
    position: relative;
}
.flex-grow-1>figure .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 0;
}
.flex-grow-1>figure picture>img,
.flex-grow-1>figure .video-js .vjs-tech {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.min-height-100 {
    min-height: 100vh;
}
.max-height-100 {
    max-height: 100vh;
}

/** .narrow is used to create narrower content, for example to make sure text does not get very wide. Can be used together with .container. Please adjust responsive size under media queries **/
.narrow,
.maxtextwidth .cb-field-richtext {
    max-width: var(--cm-narrow);
}

.maxtextwidth .cb-field-richtext {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* A trick to make objects stretch horizontally outside their column. This uses two CSS-variables set by JS in site.js. */
.horizontal-fill {
    position: relative;
    right: var(--container-gutter);
    width: 100vw;
}

.horizontal-fill .cb-field-image-picture,
.horizontal-fill .cb-field-video-figure {
    border-radius: 0;
}

/* If Layout is set to absolute position it needs to be centered horizontally */
.cb-field-inner-layout.position-absolute {
    left: 50%;
    transform: translateX(-50%);
}

/* Scroll to top. Visible when page is scrolled far */
#scroll-to-top {
    right: 0;
    bottom: -5rem;
    transition: all 500ms ease 0s;
    opacity: 0;
    z-index: 2;
}

body.scrolled.scrolled-far:not(.scrolled-end) #scroll-to-top {
    bottom: 0;
    opacity: 1;
}

/** .wide is used together with .container to make a wider layout than the default container. You may even place normal containers inside wide containers to "frame" the content. **/
.wide {
    max-width: 100%;
}

/** Makes sure the padding is consistent if a container is placed inside a full width container. May need adjusting per site. **/
.cb-layout-header.w-100 .container,
.cb-layout-section.w-100 .container {
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
}

/* Swiper */
.swiper {
    height: auto;
    z-index: auto;
}
.swiper-wrapper {
    display: flex;
    align-items: stretch;
}
.swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
}

/* Standard lazysizes fade gir ofte dobbeltfade med AOS */
img.lazyload {
    opacity: 0;
}

img.lazyloading {
    opacity: 0;
}

/* aldri 0 for å unngå “blink to 0” */
img.lazyloaded {
    opacity: 1;
}

/* la AOS håndtere overgang i wrapper */

/* This is a trick that may be used on sites where you would like the text to be a max width but images and other elements larger. Switched off by default. May be used as a starting point. */
/*
.rte-wrapper.narrow {
    max-width: 100%;
}
.rte-wrapper.narrow > * {
    max-width: var(--cm-narrow);
    margin-left: auto;
    margin-right: auto;
}
.rte-wrapper.narrow > img,
.rte-wrapper.narrow > p:has(img) {
    max-width: 100%;
}
*/

/* A general setting for animating elements */
.animated,
img,
svg,
a,
i {
    transition: var(--default-transistion);
}

/* The scrolled-class is added automatically to body when user scrolls down. When scrolling even further (how much is set in site.js, scrolled-far is added.
Can be used to easily change the header style, show/hide elements, etc. */
body.scrolled #header {}

body.scrolled.scrolled-far #scroll-to-top {}

/* Minimum height is a setting for some fields */
.cb-minheight-sm {
    min-height: var(--cm-height-1);
}
.cb-minheight-md {
    min-height: var(--cm-height-2);
}
.cb-minheight-lg {
    min-height: var(--cm-height-3);
}
.cb-height-sm {
    height: var(--cm-height-1);
}
.cb-height-md {
    height: var(--cm-height-2);
}
.cb-height-lg {
    height: var(--cm-height-3);
}

/* Swiper styles */
.swiper-pagination {
    position: static;
    text-align: left;
    margin-top: 1rem;
}
.swiper-button-disabled {
    opacity: .25;
}
.swiper-layout-cards {
    position: relative;
}
.swiper-layout-cards .swiper-buttons .btn-prev,
.swiper-layout-cards .swiper-buttons .btn-next {
    position: absolute;
    top: 40%;
    z-index: 1;
    display: none;
}
.swiper-layout-cards .swiper-buttons .btn-prev {
    left: 0;
}
.swiper-layout-cards .swiper-buttons .btn-next {
    right: 0;
}
.swiper-layout-cards .swiper-pagination {
    text-align: center;
}
.swiper-layout-cards .swiper-slide {
    overflow: visible;
}
.swiper-layout-cards .swiper-slide-active {
    padding: 0 1rem;
}

/* Swiper Carousel */
.swiper-carousel .swiper-slide {
    width: 60%;
    height: 100%;
}

/* Alerts */
.layout-wrapper.alert-dismissible {
    padding-left: 0;
    padding-right: 0;
}

.layout-wrapper.alert-dismissible .cb-field-inner-layout-wrapper {
    padding-right: 3rem;
}

.layout-wrapper.alert .btn-close {
    top: 50%;
    transform: translate(-50%, -50%);
}

.alert a:not(.btn) {
    font-weight: 700;
    color: var(--bs-alert-link-color);
}

/* Collapse */
.cb-field-collapse .collapse-toggle-wrapper {}

.cb-field-collapse .collapse-toggle.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    min-width: 3rem;
    border-radius: var(--bs-border-radius-pill);
}

.cb-field-collapse .collapse-toggle.btn:has(span) {
    padding: 0 1.5rem;
}

.cb-field-collapse .collapse-toggle.btn span {
    margin-right: .25em;
}

.cb-field-collapse .collapse-toggle.collapsed .open {
    display: none;
}

.cb-field-collapse .collapse-toggle:not(.collapsed) .collapsed {
    display: none;
}

.cb-field-collapse .collapse-toggle i {
    --fa: "";
    --fa--fa: "";
    font-weight: 400;
}

.cb-field-collapse .collapse-toggle:not(.collapsed) i {
    --fa: "";
    --fa--fa: "";
}

/* Accordions */
.accordion-button::after {
    content: "\f13a";
    font-family: "Font Awesome 7 Pro";
    font-weight: 300;
    width: auto;
    height: auto;
    margin-left: auto;
    background: none !important;
}
.accordion-button:not(.collapsed) {
    --bs-accordion-active-bg: var(--bs-secondary);
}
.accordion-flush {
    --bs-accordion-color: rgba(var(--cm-content-color-rgb), 1);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: rgba(var(--cm-content-color-rgb), .5);
    --bs-accordion-border-width: 1px;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: rgba(var(--cm-content-color-rgb), 1);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: rgba(var(--cm-content-color-rgb), 1);
    --bs-accordion-active-bg: transparent;
}
.accordion-flush .accordion-item {
    padding: .75rem 0;
}
.accordion-flush .accordion-button {
    border-bottom: none !important;
    box-shadow: none !important;
    font-weight: bold;
}
.accordion-flush .accordion-body {
    padding-top: 0;
}

/* Breadcrumbs */
.breadcrumb {
    margin-bottom: 0;
    display: block;
}
.breadcrumb-item {
    display: inline;
}
.breadcrumb-item+.breadcrumb-item::before {
    font-family: "Font Awesome 7 Pro";
    content: "\f054";
    float: none;
}
.breadcrumb-item.active {}
.breadcrumb-center .breadcrumb {
    text-align: center;
}

/* General styles for list items */
.list-item-wrapper {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);
}

/* Default white background if not set */
.list-item-wrapper:not([class*="bg"]) {
    background-color: var(--bs-white);
    color: var(--bs-body-color);
}

/* Profile list items */
.profile-list-item {
    text-align: center;
}

/* Profile list items */
.list-item-phone,
.list-item-email {
    padding-left: .25rem;
    padding-right: .25rem;
}

/* Event list items */
.list-item-calendar {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--bs-light);
    color: var(--bs-body-color);
    padding: .5rem;
    margin: .5rem;
    border-radius: var(--bs-border-radius-xl);
    width: 5rem;
    height: 5rem;
    text-align: center;
}

/* Partner list items */
.partner-list-item .list-logo-picture img,
.partner-slides-item .list-logo-picture img {
    object-fit: contain;
    aspect-ratio: 4 / 2;
    object-position: center bottom;
    filter: grayscale(100%);
}
.partner-list-item a:hover .list-logo-picture img,
.partner-slides-item a:hover .list-logo-picture img {
    filter: grayscale(0%);
}

/* Event special list items */
.text-bg-dark .event-special-list-item a:not(.btn) {
    color: #FFF;
}

/* Calendar block with month, date and weekday */
.calendar-block-container {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: var(--bs-white);
    color: var(--bs-body-color);
    padding: .5rem;
    border-radius: var(--bs-border-radius-xl);
    margin-bottom: .5rem;
    height: 5rem;
    aspect-ratio: 1 / 1;
    box-shadow: .5rem .5rem 1.5rem rgba(0, 0, 0, .05);
}

.calendar-block {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.calendar-block>* {
    margin-bottom: 0;
    line-height: 1.1;
}
.calendar-block-month {
    text-transform: uppercase;
    font-weight: 500;
    font-size: .75rem;
}
.calendar-block-day {
    font-weight: 500;
    font-size: 2rem;
}
.calendar-block-weekday {
    text-transform: capitalize;
    font-size: .75rem;
}

/* Highcharts styling */
.highcharts-container {
    font-family: var(--bs-body-font-family);
}
.highcharts-background {
    fill: transparent;
}
.highcharts-title {
    font-size: 1rem;
    font-weight: normal;
    fill: var(--bs-body-color);
}
.highcharts-legend-item>text {
    font-weight: normal;
    font-size: .7rem;
    fill: var(--bs-body-color);
}
.highcharts-axis-title,
.highcharts-axis-labels {
    fill: var(--bs-body-color);
}
.highcharts-point {
    stroke-width: 0;
}
.highcharts-grid-line {
    stroke: rgba(0, 0, 0, .25);
}
.chart-text-in-donut {
    position: relative;
    z-index: -1;
}
.cb-field-chart-donut .chart-container.chart-portrait {
    aspect-ratio: 3 / 5;
}
.cb-field-chart-donut .chart-container.chart-landscape {
    aspect-ratio: 2 / 1;
}
.cb-field-chart-donut .chart-container .highcharts-legend-item>text {
    font-size: 1rem !important;
}
.cb-field-chart-donut .chart-container.chart-landscape .highcharts-legend-title,
.cb-field-chart-donut .chart-container.chart-landscape .highcharts-legend-item>* {
    transform: translateX(5rem);
}
.cb-field-chart-donut .donut-center-label {
    fill: var(--bs-primary);
    font-weight: bold;
}
.cb-field-chart-donut .donut-center-value {
    fill: var(--bs-primary);
    font-weight: bold;
    font-size: 3rem;
}
.highcharts-legend-title text {
    font-size: 1.5rem !important;
    font-weight: bold;
    fill: var(--bs-primary) !important;
}

/* Publication info */
.publication-info-author-image {
    width: 4rem;
}

/* Video JS Player */
.video-js .vjs-big-play-button {
    background-color: var(--bs-primary);
}

/* Custom Google Maps Styling (Infowindow and pin) */
.gm-style .gm-style-iw-c {
    padding: 0;
}
.gm-style-iw-d {
    padding: 0 1rem 0 1rem;
}
.gmaps-pin {
    filter:
        drop-shadow(0 1px 1px rgba(255, 255, 255, 1)) drop-shadow(.25rem .25rem 1rem rgba(0, 0, 0, .25));
}
.gmaps-pin-wrapper {
    font-size: 1rem;
    width: auto;
    height: auto;
    min-width: 3rem;
    min-height: 3rem;
    background: var(--bs-primary);
    color: #FFF;
    padding: 1rem;
    position: relative;
    text-align: center;
    border-radius: 1.5rem;
}
.gmaps-pin-wrapper:empty::before {
    content: "";
    display: block;
    background-color: #FFF;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
}
.gmaps-pin::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-top: .5rem solid var(--bs-primary);
    margin: -2px auto 0;
}
.gmaps-pin.active .gmaps-pin-wrapper {
    background: var(--bs-light);
    color: var(--bs-primary);
}
.gmaps-pin.active::after {
    border-top: .5rem solid var(--bs-light);
}
.gmaps-pin.active .gmaps-pin-wrapper:empty::before {
    background-color: var(--bs-primary);
}

/* Gallery */
.gallery-wrapper {
    position: relative;
}
.gallery-button {
    background-color: var(--bs-dark);
    color: #FFF;
    position: absolute;
    margin-top: calc(var(--bs-gutter-y) * .5);
    top: 1rem;
    right: 1rem;
    z-index: 1;
    opacity: .75;
}
.gallery-button:hover {
    background-color: var(--bs-dark);
    color: #FFF;
    opacity: 1;
}

/* Masonry layout (for galleries, etc) */
.masonry-layout-1 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: calc(var(--bs-gutter-x) * -.5);
}
.masonry-layout-1>.tile {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1 / 1;
}
.masonry-layout-1>.tile:nth-child(8n + 1),
.masonry-layout-1>.tile:nth-child(8n + 6) {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
}
.masonry-layout-1>.tile:nth-child(8n + 2),
.masonry-layout-1>.tile:nth-child(8n + 5) {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 2 / 1;
}
.masonry-layout-1.limit-4>.tile:nth-child(n+5),
.masonry-layout-1.limit-8>.tile:nth-child(n+9),
.masonry-layout-1.limit-12>.tile:nth-child(n+13),
.masonry-layout-1.limit-16>.tile:nth-child(n+17) {
    display: none;
}
.masonry-layout-1>.tile {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    padding: calc(var(--bs-gutter-x) * .5);
    cursor: pointer;
}
.masonry-layout-1>.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.masonry-layout-1>.tile picture {
    position: relative;
}
.masonry-layout-1>.tile:hover picture::after {
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    font-size: 3rem;
    color: var(--bs-light);
    content: "\f00e";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
}

/* Special effects */
.bottom-border-overlay .layout-wrapper:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background-color: white;
}

/* Scrollytelling */
.scrolly {
    position: relative;
}
.scrolly-article-container {
    position: relative;
    padding: 0;
    margin: 0 auto;
}
.scrolly-figure-item,
.scrolly-article-item {
    transition: all 500ms ease 0s;
}
.scrolly-figure-item:not(.is-active) {
    opacity: 0;
}
.scrolly-figure-container {
    position: sticky;
    z-index: 0;
    left: 0;
    right: 0;
    top: calc((100vh - var(--scrolly-height)) / 2);
    bottom: 0;
    margin: auto;
    z-index: -1;
}
.scrolly-figure-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: var(--scrolly-height);
}
.scrolly-figure-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    overflow: hidden;
}
.scrolly-content-text,
.scrolly-content-boxed {
    padding: 1.5rem;
}
.scrolly-content-boxed {
    max-width: var(--cm-narrow);
    border-radius: var(--bs-border-radius-xl)
}

/* Stepguide */
.stepguide-form {}
.stepguide-form .stepguide-form-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.stepguide-form .stepguide-postcode-input {
    width: auto;
    min-width: 140px;
    margin-bottom: 1rem;
}
.stepguide-form .stepguide-radio-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}
.stepguide-form .stepguide-nav-list {
    margin-top: 1rem;
}
.stepguide-form .stepguide-form-content .form-label {
    font-weight: bold;
}
.stepguide-form .stepguide-form-btn-prev,
.stepguide-form .stepguide-form-btn-next:disabled {
    display: none;
}
.stepguide-nav {
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--bs-box-shadow-lg);
    background-color: white;
}
.stepguide-nav .step-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    --stepper-color: var(--bs-body-color);
    --stepper-text-emphasis: var(--bs-body-color);
    --stepper-bg-subtle: var(--bs-light);
}
.stepguide-nav .step-item.yes {
    --stepper-color: var(--bs-success);
    --stepper-text-emphasis: var(--bs-success-text-emphasis);
    --stepper-bg-subtle: var(--bs-success-bg-subtle);
}
.stepguide-nav .step-item.no {
    --stepper-color: var(--bs-danger);
    --stepper-text-emphasis: var(--bs-danger-text-emphasis);
    --stepper-bg-subtle: var(--bs-danger-bg-subtle);
}
.stepguide-nav .step-item.maybe {
    --stepper-color: var(--bs-warning);
    --stepper-text-emphasis: var(--bs-warning-text-emphasis);
    --stepper-bg-subtle: var(--bs-warning-bg-subtle);
}
.stepguide-nav .step-item .step-badge {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex: 0 0 auto;
    color: var(--stepper-text-emphasis);
    background-color: var(--stepper-bg-subtle);
}
.stepguide-nav .step-item .step-validation {
    margin-left: auto;
    color: var(--stepper-color);
}
.stepguide-nav .step-item.active {
    font-weight: bold;
}
.stepguide-nav .stepguide-feedback-wrapper .alert {
    margin-bottom: 0;
}

/* Custom Google Search */
.cgs-search-results-list {
    --bs-list-group-active-color: var(--bs-body-color);
    --bs-list-group-active-bg: var(--bs-light);
    --bs-list-group-active-border-color: var(--bs-light);
    --bs-list-group-action-active-bg: var(--bs-light);
}
.cgs-search-results-item-introtext {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cgs-search-results-item img {
    width: 100% !important;
    height: auto !important;
}
.cgs-search-results-item-text {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.header-search .cgs-search-results-container {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    margin-top: .5rem;
}

/* Compensate for the sticky header. Adds padding/margin if this setting is true on the ContentBlocks header */
.cb-layout-header.container>.header-compensation {
    margin-top: var(--cm-header-height) !important;
}

.cb-layout-header.w-100>.header-compensation {
    padding-top: var(--cm-header-height) !important;
}

/* Timeline */
.cb-field-timeline-item {
    width: 100%;
    border: 1px solid var(--bs-light);
    padding: .6rem .6rem .6rem 1.8rem;
    border-radius: var(--bs-border-radius-pill);
}
.cb-field-timeline-item-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--bs-light);
    /* eller hva du vil */
    color: var(--bs-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.cb-field-timeline-item {
    position: relative;
}
.cb-field-timeline-item-arrow {
    margin: .5rem;
    color: var(--bs-light);
}
.cb-field-timeline .cb-field-timeline-item-arrow:last-of-type {
    display: none;
}


/** ######################################################################################### MEDIA QUERIES ######################################################################################### **/


/** Small devices (landscape phones, 576px and up) **/
/** Bootstrap: -sm **/
@media (min-width: 576px) {
    :root {}

    .wide {
        min-width: calc(540px + var(--bs-gutter-x) * 1);
        max-width: 640px;
    }

    .cb-layout-header.w-100 .container:not(.wide),
    .cb-layout-section.w-100 .container:not(.wide) {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .overflow-sm-visible {
        overflow: visible !important;
    }

    /* If swiper is placed in a column next to another and overflow is set to visible this makes sure the slides don't overflow the other column */
    .row>[class*="col-sm"]:nth-child(1) .swiper.overflow-visible {
        clip-path: inset(0 0 0 -100vw);
    }

    .row>[class*="col-sm"]:nth-child(2) .swiper.overflow-visible {
        clip-path: inset(0 -100vw 0 0);
    }

    /* If horizontal fill is turned on and the element is in a column, it will stretch to the left or right side of the screen accordingly. */
    .row>[class*="col-sm"]:nth-child(1) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: auto;
        right: var(--container-gutter);
    }

    .row>[class*="col-sm"]:nth-child(2) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: 0;
        right: auto;
    }

    /* Some CB fields have an option to set horizontal alignment on screens when column switches from stacked to column. These rules are associated with that. */
    .row>[class*="col-sm"] .rte-wrapper.horizontal-align-left>* {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .row>[class*="col-sm"] .crte-wrapper.horizontal-align-center>* {
        text-align: center !important;
        justify-content: center !important;
    }

    .row>[class*="col-sm"] .rte-wrapper.horizontal-align-right>* {
        text-align: right !important;
        justify-content: flex-end !important;
    }

    .row>[class*="col-sm"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }

    .row>[class*="col-sm"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }

    .row>[class*="col-sm"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }
}

/** Medium devices (tablets, 768px and up) **/
/** Bootstrap: -md **/
@media (min-width: 768px) {
    :root {
        --cm-narrow: 576px;
    }

    .wide {
        min-width: calc(720px + var(--bs-gutter-x) * 1);
        max-width: 900px;
    }

    .overflow-md-visible {
        overflow: visible !important;
    }

    .row>[class*="col-md"]:nth-child(1) .swiper.overflow-visible {
        clip-path: inset(0 0 0 -100vw);
    }

    .row>[class*="col-md"]:nth-child(2) .swiper.overflow-visible {
        clip-path: inset(0 -100vw 0 0);
    }

    .row>[class*="col-md"]:nth-child(1) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: auto;
        right: var(--container-gutter);
    }

    .row>[class*="col-md"]:nth-child(2) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: 0;
        right: auto;
    }

    .row>[class*="col-md"] .rte-wrapper.horizontal-align-left>* {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .row>[class*="col-md"] .rte-wrapper.horizontal-align-center>* {
        text-align: center !important;
        justify-content: center !important;
    }

    .row>[class*="col-md"] .rte-wrapper.horizontal-align-right>* {
        text-align: right !important;
        justify-content: flex-end !important;
    }

    .row>[class*="col-md"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }

    .row>[class*="col-md"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }

    .row>[class*="col-md"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }

    #footer .articles-list.inline-list {
        display: inline-flex;
        gap: 2rem;
        margin-left: 2rem;
    }
}

/** Large devices (desktops, 992px and up) **/
/** Bootstrap: -lg **/
@media (min-width: 992px) {
    :root {
        --cm-narrow: 768px;
    }
    .wide {
        min-width: calc(960px + var(--bs-gutter-x) * 1);
        max-width: 1080px;
    }

    .overflow-lg-visible {
        overflow: visible !important;
    }

    .row>[class*="col-lg"]:nth-child(1) .swiper.overflow-visible {
        clip-path: inset(0 0 0 -100vw);
    }

    .row>[class*="col-lg"]:nth-child(2) .swiper.overflow-visible {
        clip-path: inset(0 -100vw 0 0);
    }

    .row>[class*="col-lg"]:nth-child(1) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: auto;
        right: var(--container-gutter);
    }

    .row>[class*="col-lg"]:nth-child(2) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: 0;
        right: auto;
    }

    .row>[class*="col-lg"] .rte-wrapper.horizontal-align-left>* {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .row>[class*="col-lg"] .rte-wrapper.horizontal-align-center>* {
        text-align: center !important;
        justify-content: center !important;
    }

    .row>[class*="col-lg"] .rte-wrapper.horizontal-align-right>* {
        text-align: right !important;
        justify-content: flex-end !important;
    }

    .row>[class*="col-lg"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }

    .row>[class*="col-lg"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }

    .row>[class*="col-lg"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }

    .swiper-layout-cards {
        padding: 0 5rem;
    }

    .swiper-layout-cards .swiper-pagination {
        display: none;
    }

    .swiper-layout-cards .swiper-buttons .btn-prev,
    .swiper-layout-cards .swiper-buttons .btn-next {
        display: block;
    }

    .table-mobile-friendly-container {
        font-size: 1rem;
    }
}

/** Extra large devices (large desktops, 1200px and up) **/
/** Bootstrap: -xl **/
@media (min-width: 1200px) {
    :root {
        --cm-narrow: 900px;
    }

    .wide {
        min-width: calc(1140px + var(--bs-gutter-x) * 1);
        max-width: 1280px;
    }

    .overflow-xl-visible {
        overflow: visible !important;
    }

    .row>[class*="col-xl"]:nth-child(1) .swiper.overflow-visible {
        clip-path: inset(0 0 0 -100vw);
    }

    .row>[class*="col-xl"]:nth-child(2) .swiper.overflow-visible {
        clip-path: inset(0 -100vw 0 0);
    }

    .row>[class*="col-xl"]:nth-child(1) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: auto;
        right: var(--container-gutter);
    }

    .row>[class*="col-xl"]:nth-child(2) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: 0;
        right: auto;
    }

    .row>[class*="col-xl"] .rte-wrapper.horizontal-align-left>* {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .row>[class*="col-xl"] .rte-wrapper.horizontal-align-center>* {
        text-align: center !important;
        justify-content: center !important;
    }

    .row>[class*="col-xl"] .rte-wrapper.horizontal-align-right>* {
        text-align: right !important;
        justify-content: flex-end !important;
    }

    .row>[class*="col-xl"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }

    .row>[class*="col-xl"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }

    .row>[class*="col-xl"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }
}

/** Extra Extra large devices (HD desktops, 1400px and up) **/
@media (min-width: 1400px) {
    .wide {
        min-width: calc(1348px + var(--bs-gutter-x) * 1);
        max-width: 1640px;
    }

    .overflow-xxl-visible {
        overflow: visible !important;
    }

    .row>[class*="col-xxl"]:nth-child(1) .swiper.overflow-visible {
        clip-path: inset(0 0 0 -100vw);
    }

    .row>[class*="col-xxl"]:nth-child(2) .swiper.overflow-visible {
        clip-path: inset(0 -100vw 0 0);
    }

    .row>[class*="col-xxl"]:nth-child(1) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: auto;
        right: var(--container-gutter);
    }

    .row>[class*="col-xxl"]:nth-child(2) .horizontal-fill {
        width: calc(100% + var(--container-gutter));
        left: 0;
        right: auto;
    }

    .row>[class*="col-xxl"] .rte-wrapper.horizontal-align-left>* {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .row>[class*="col-xxl"] .rte-wrapper.horizontal-align-center>* {
        text-align: center !important;
        justify-content: center !important;
    }

    .row>[class*="col-xxl"] .rte-wrapper.horizontal-align-right>* {
        text-align: right !important;
        justify-content: flex-end !important;
    }

    .row>[class*="col-xxl"] .cb-field-buttons .horizontal-align-left {
        justify-content: start !important;
    }

    .row>[class*="col-xxl"] .cb-field-buttons .horizontal-align-center {
        justify-content: center !important;
    }

    .row>[class*="col-xxl"] .cb-field-buttons .horizontal-align-right {
        justify-content: end !important;
    }
}

@media (orientation: landscape) {}

@media (orientation: portrait) {}