@charset "utf-8";

/** Be advised: Bootstrap and rte.css is loaded before this file.

/** ################################################################################################################################################################################################# 
/** ############################################################################################ GENERAL ############################################################################################ 
/** ################################################################################################################################################################################################# 
/** These are general CSS-classes we have made. Used between sites and should not be customized per site except in special circumstances! **/

:root {
    --cm-narrow: none;
    --cm-header-height: 4.5rem;
    --cm-spacer-1: .75rem;
    --cm-spacer-2: 1.5rem;
    --cm-spacer-3: 2.25rem;
    --cm-spacer-4: 3rem;
    --cm-spacer-5: 3.75rem;
    --cm-height-1: 20vh;
    --cm-height-2: 40vh;
    --cm-height-3: 60vh;
    --highcharts-color-0: var(--bs-primary);
    --highcharts-color-1: var(--bs-secondary);
    --highcharts-color-2: var(--bs-success);
    --highcharts-color-3: var(--bs-danger);
    --highcharts-color-4: var(--bs-warning);
    --highcharts-color-5: var(--bs-info);
    --highcharts-color-6: var(--bs-orange);
    --highcharts-color-7: var(--bs-pink);
    --highcharts-color-8: var(--bs-teal);
    --highcharts-color-9: var(--bs-cyan);
}

html {
    height: 100%;
}
html,body {
}
body {
}
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;
}
.layout-container {
    z-index: 1;
}
.cb-field-collapse-readmore .collapse-toggle.collapsed .open,
.cb-field-collapse-readmore .collapse-toggle:not(.collapsed) .collapsed {
    display: none;
}

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

/* .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;
}

/* .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;
}

/* Turns the arrow upside down on Bootstrap accordions when they are open */
.collapsebutton:not(.collapsed) i {
    transform: rotate(180deg);
}
.accordion-body {
    padding: 2rem 4rem;
    background-color: var(--bs-light);
}

/* .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%;
}

/* 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;
}
.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;
    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-fill > figure picture,
.flex-fill > figure .video-js {
    display: block;
    width: 100%;
    height: 100% !important;
    position: relative;
}
.flex-fill > figure .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 0;
}
.flex-fill > figure picture > img,
.flex-fill > figure .video-js .vjs-tech {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* We have set up our custom padding classes based on the same principals as Bootstrap 5 but gives us more flexibility */
.cb-p-0, .cb-px-0, .cb-ps-0 { padding-left: 0;}
.cb-p-1, .cb-px-1, .cb-ps-1 { padding-left: var(--cm-spacer-1);}
.cb-p-2, .cb-px-2, .cb-ps-2 { padding-left: var(--cm-spacer-2);}
.cb-p-3, .cb-px-3, .cb-ps-3 { padding-left: var(--cm-spacer-3);}
.cb-p-4, .cb-px-4, .cb-ps-4 { padding-left: var(--cm-spacer-4);}
.cb-p-5, .cb-px-5, .cb-ps-5 { padding-left: var(--cm-spacer-5);}

.cb-p-0, .cb-px-0, .cb-pe-1 { padding-right: 0;}
.cb-p-1, .cb-px-1, .cb-pe-1 { padding-right: var(--cm-spacer-1);}
.cb-p-2, .cb-px-2, .cb-pe-2 { padding-right: var(--cm-spacer-2);}
.cb-p-3, .cb-px-3, .cb-pe-3 { padding-right: var(--cm-spacer-3);}
.cb-p-4, .cb-px-4, .cb-pe-4 { padding-right: var(--cm-spacer-4);}
.cb-p-5, .cb-px-5, .cb-pe-5 { padding-right: var(--cm-spacer-5);}

.cb-p-0, .cb-py-0, .cb-pt-0 { padding-top: 0;}
.cb-p-1, .cb-py-1, .cb-pt-1 { padding-top: var(--cm-spacer-1);}
.cb-p-2, .cb-py-2, .cb-pt-2 { padding-top: var(--cm-spacer-2);}
.cb-p-3, .cb-py-3, .cb-pt-3 { padding-top: var(--cm-spacer-3);}
.cb-p-4, .cb-py-4, .cb-pt-4 { padding-top: var(--cm-spacer-4);}
.cb-p-5, .cb-py-5, .cb-pt-5 { padding-top: var(--cm-spacer-5);}

.cb-p-0, .cb-py-0, .cb-pb-1 { padding-bottom: 0;}
.cb-p-1, .cb-py-1, .cb-pb-1 { padding-bottom: var(--cm-spacer-1);}
.cb-p-2, .cb-py-2, .cb-pb-2 { padding-bottom: var(--cm-spacer-2);}
.cb-p-3, .cb-py-3, .cb-pb-3 { padding-bottom: var(--cm-spacer-3);}
.cb-p-4, .cb-py-4, .cb-pb-4 { padding-bottom: var(--cm-spacer-4);}
.cb-p-5, .cb-py-5, .cb-pb-5 { padding-bottom: var(--cm-spacer-5);}

.cb-m-0, .cb-mx-0, .cb-ms-0 { margin-left: 0;}
.cb-m-1, .cb-mx-1, .cb-ms-1 { margin-left: var(--cm-spacer-1);}
.cb-m-2, .cb-mx-2, .cb-ms-2 { margin-left: var(--cm-spacer-2);}
.cb-m-3, .cb-mx-3, .cb-ms-3 { margin-left: var(--cm-spacer-3);}
.cb-m-4, .cb-mx-4, .cb-ms-4 { margin-left: var(--cm-spacer-4);}
.cb-m-5, .cb-mx-5, .cb-ms-5 { margin-left: var(--cm-spacer-5);}
.cb-m-auto, .cb-mx-auto, .cb-ms-auto { margin-left: auto;}

.cb-m-0, .cb-mx-0, .cb-me-1 { margin-right: 0;}
.cb-m-1, .cb-mx-1, .cb-me-1 { margin-right: var(--cm-spacer-1);}
.cb-m-2, .cb-mx-2, .cb-me-2 { margin-right: var(--cm-spacer-2);}
.cb-m-3, .cb-mx-3, .cb-me-3 { margin-right: var(--cm-spacer-3);}
.cb-m-4, .cb-mx-4, .cb-me-4 { margin-right: var(--cm-spacer-4);}
.cb-m-5, .cb-mx-5, .cb-me-5 { margin-right: var(--cm-spacer-5);}
.cb-m-auto, .cb-mx-auto, .cb-me-auto { margin-bottom: auto;}

.cb-m-0, .cb-my-0, .cb-mt-0 { margin-top: 0;}
.cb-m-1, .cb-my-1, .cb-mt-1 { margin-top: var(--cm-spacer-1);}
.cb-m-2, .cb-my-2, .cb-mt-2 { margin-top: var(--cm-spacer-2);}
.cb-m-3, .cb-my-3, .cb-mt-3 { margin-top: var(--cm-spacer-3);}
.cb-m-4, .cb-my-4, .cb-mt-4 { margin-top: var(--cm-spacer-4);}
.cb-m-5, .cb-my-5, .cb-mt-5 { margin-top: var(--cm-spacer-5);}
.cb-m-auto, .cb-my-auto, .cb-mt-auto { margin-top: auto;}

.cb-m-0, .cb-my-0, .cb-mb-1 { margin-bottom: 0;}
.cb-m-1, .cb-my-1, .cb-mb-1 { margin-bottom: var(--cm-spacer-1);}
.cb-m-2, .cb-my-2, .cb-mb-2 { margin-bottom: var(--cm-spacer-2);}
.cb-m-3, .cb-my-3, .cb-mb-3 { margin-bottom: var(--cm-spacer-3);}
.cb-m-4, .cb-my-4, .cb-mb-4 { margin-bottom: var(--cm-spacer-4);}
.cb-m-5, .cb-my-5, .cb-mb-5 { margin-bottom: var(--cm-spacer-5);}
.cb-m-auto, .cb-my-auto, .cb-mb-auto { margin-bottom: auto;}

/** .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 {
    max-width: var(--cm-narrow);
}


/* 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;
}
.swiper-wrapper {
    display: flex;
    align-items: stretch;
}
.swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
}
.swiper-pagination-bullet {
    width: 1.5rem;
    height: .25rem;
    border-radius: 0;
    background: var(--bs-primary);
}


/* 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%;
}
*/


/** ################################################################################################################################################################################################# 
/** ############################################################################################ GLOBAL ############################################################################################ 
/** ################################################################################################################################################################################################# 

/** Global typical rules that may need customization per site **/

/* A general setting for animating elements */
.animated, img, svg, a, i {
    transition: all 500ms ease 0s;
}

/* 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 - for example images and videos. Set the size of these options here. Make sure you also adjust responsively under Media Queries */
.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); }


.text-bg-primary a:not(.btn),
.text-bg-dark a:not(.btn) {
    color: #FFF;
}


/* Many times, buttons are placed dynamically on different background. Just use the class .btn-inherit or .btn-outline-inherit and a color will be chosen in the same style as the text. */
.text-bg-secondary .btn-inherit,
.text-bg-info .btn-inherit,
.text-bg-light .btn-inherit {
    background-color: #000;
    border-color: #000;
    color: #FFF;
}
.text-bg-secondary .btn-inherit:hover,
.text-bg-info .btn-inherit:hover,
.text-bg-light .btn-inherit:hover {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
    color: var(--bs-light);
}
.text-bg-primary .btn-inherit,
.text-bg-dark .btn-inherit {
    background-color: #FFF;
    border-color: #FFF;
    color: #000;
}
.text-bg-primary .btn-inherit:hover,
.text-bg-dark .btn-inherit:hover {
    background-color: var(--bs-light);
    border-color: var(--bs-light);
    color: var(--bs-dark);
}
.text-bg-secondary .btn-outline-inherit,
.text-bg-info .btn-outline-inherit,
.text-bg-light .btn-outline-inherit {
    border-color: #000;
    color: #000;
}
.text-bg-secondary .btn-outline-inherit:hover,
.text-bg-info .btn-outline-inherit:hover,
.text-bg-light .btn-outline-inherit:hover {
    background-color: #000;
    color: #FFF;
}
.text-bg-primary .btn-outline-inherit,
.text-bg-dark .btn-outline-inherit {
    border-color: #FFF;
    color: #FFF;
}
.text-bg-primary .btn-outline-inherit:hover,
.text-bg-dark .btn-outline-inherit:hover {
    background-color: #FFF;
    color: #000;
}

/* Set standard rounding of objects here */
.cb-header-section > .container > [class*="bg-"],
.cb-layout-section > .container > [class*="bg-"],
.cb-field-inner-layout-wrapper,
.container .layout-container {
    border-radius: var(--bs-border-radius-xl);
}

/* Swiper styles */
.swiper-pagination {
    position: static;
    text-align: left;
    margin-top: 1rem;
}

/* Accordions */
.accordion-button:not(.collapsed) {
    --bs-accordion-active-bg: var(--bs-secondary);
}

/* Modals */
.modal .cb-field-inner-layout {
    overflow-x: hidden;
}
.modal-simple .modal-content {
    background-color: transparent;
    color: #FFF;
}
.modal-simple .modal-header {
    border: none;
}
.modal-simple .modal-content .btn-close {
    filter: var(--bs-btn-close-white-filter);
}

/* Styles for breadcrumbs */
.cb-field-breadcrumbs .breadcrumb {
    margin-bottom: 0;
}
.cb-field-breadcrumbs .breadcrumb-item {
}
.cb-field-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f054";
}
.cb-field-breadcrumbs .breadcrumb-item.active {
}
.breadcrumb-center .breadcrumb {
    justify-content: center;
    text-align: center;
}

/* Special rules to make sure you don't end up with a button with the same color as the background (which of course would make it invisible) */
.text-bg-dark .btn-dark,
.text-bg-dark .btn-outline-dark {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-body-bg);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-body-bg)c;
    --bs-btn-hover-border-color: var(--bs-body-bg);
}    

/* Swiper styles */
.swiper-button-disabled {
    opacity: .25;
}

/* General styles for list items */
.resource-list-item .list-item-wrapper:not(:has(picture)) {
    background-color: var(--bs-light);
    padding: 1.25rem;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.resource-list-item .list-item-wrapper:not(:has(picture)):hover {
    background-color: var(--bs-secondary);
}

/* 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 */
.text-bg-primary .event-datetime {
    color: var(--bs-secondary);
}
.list-item-description{
    font-size: .8rem;
}
.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;
}

.resource-slides-item-picture-header {
    background-color: var(--bs-secondary);
    color: var(--bs-dark);
}
.text-bg-secondary .resource-slides-item-picture-header {
    background-color: var(--bs-dark);
    color: #FFF;
}


/* Partner list items */
.partner-list-item .list-logo-picture,
.partner-slides-item .list-logo-pictur{
    aspect-ratio: 1;
}
.partner-list-item .list-logo-picture img,
.partner-slides-item .list-logo-picture img {
    width: 75%;
    object-fit: contain;
    aspect-ratio: /*3 / */1;
    object-position: left center;
}
.partner-list-item .list-logo-picture svg,
.partner-slides-item .list-logo-picture svg {
    fill: var(--bs-light);
    width: 50%;
}
.partner-list-item .list-item-link,
.partner-slides-item .list-item-link {
    opacity: .5;
}
.partner-list-item a:hover .list-item-link,
.partner-slides-item a:hover .list-item-link {
    opacity: 1;
}

/* 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;
}



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

.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;
}


/* Forms */
.form-control.disabled {
    background-color: var(--bs-secondary-bg);
}
input, button, select, optgroup, textarea, .form-label, .form-check-label {
    font-family: "IBM Plex Sans Condensed", sans-serif;
}
.form-check-label {
    font-size: .9rem;
}


/** ################################################################################################################################################################################################# 
/** ########################################################################################### ELEMENTS ############################################################################################ 
/** ################################################################################################################################################################################################# 

/** Elements that are typically used. May need customization per site **/


/** ################################################## HEADER ################################################## **/

#header {
    background-color: rgba(255,255,255,0);
    min-height: var(--cm-header-height);
    padding-top: .5rem;
}
body.scrolled #header {
    background-color: rgba(255,255,255,1);
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
}
#header.navbar-collapse-open {
     background-color: rgba(25,30,59,.9) !important;
}
.navbar-collapse.collapse.show {
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.navbar-collapse.collapse.show .navbar-nav {
    padding-bottom: 1rem;
}
#header .navbar-brand img {
    height: 2.5rem;
    width: auto;
}
#header .nav-link {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding-right: 2.5rem;
}
#header .dropdown-menu {
    --bs-dropdown-min-width: 13rem;
}
#header .dropdown-menu .nav-link {
    padding-left: 1.5rem;
}


/* There is a JS-function that checks the background color of the first header in main. If it is dark, the class .header-light is placed on the header so that we can style it differently. */
/* The first rule shows the correct logo according to the background of the first header in main and if the page has been scrolled or not */


body:not(.scrolled) #header.light-header .navbar-brand-img,
body.scrolled #header:not(.navbar-collapse-open) .navbar-brand-img-light,
#header:not(.light-header):not(.navbar-collapse-open) .navbar-brand-img-light,
#header.navbar-collapse-open .navbar-brand-img {
    display: none;
}

/* These rules makes sure the text and oter elements are in colors we want according to the main header background color. */
body:not(.scrolled) #header.light-header .dropdown-menu,
#navbarCollapse .dropdown-menu {
    --bs-dropdown-bg: var(--bs-primary);
}
#navbarCollapse .navbar-nav {
    margin-top: 1rem;
    margin-bottom: 3rem;
}
body:not(.scrolled) #header.light-header .navbar,
#header.navbar-collapse-open .navbar {
    --bs-emphasis-color-rgb: 255,255,255;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 1);
}


/** ################################################## MAIN ################################################## **/
#main {
    flex-grow: 1
}
/* Compensate for the sticky header */
#main > :first-child.container {
    margin-top: var(--cm-header-height);
}
#main > :first-child:not(.container) .layout-container {
    padding-top: var(--cm-header-height);
}


/** ################################################## FOOTER ################################################## **/
#footer {
}
#footer .brand-symbol {
   height: 1.75rem;
   width: auto;
}



/** ################################################## LAYOUTS ################################################## **/
.event-hero .cb-field-inner-layout-wrapper.text-bg-secondary {
    background-color: transparent !important;
}
.event-hero .cb-field-inner-layout-wrapper.text-bg-secondary::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 10rem);
    background-color: var(--bs-secondary);
}
.event-hero .cb-field-inner-layout-wrapper {
    padding: 0 0 3rem;
}
.event-hero .cb-field-inner-layout-wrapper .row {
    position: relative;
}


/** ################################################## FIELDS ################################################## **/
.hero-intro {
    position: relative;
}
.hero-intro .rte-wrapper::before {
    content: url('../gfx/slashes.svg');
    width: 5rem;
    height: 100%;
    float: left;
    margin: .2rem 1rem 0 0;
}
.montel-news-container {
    position: relative;
    overflow: hidden;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #398d80 transparent;
    scrollbar-width: thin;
}
.montel-news-inner {
    position: absolute;
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    width: 100%;
}
.montel-news-item {
    text-decoration: none;
}
.montel-news-item:hover {
    text-decoration: underline;
}
.join-network-banner .layout-wrapper {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.mixitup-controls-container .btn {
    --bs-btn-padding-y: 0.62rem;
}

/** ################################################ MEMBERS AREA ################################################ **/
.membersarea-nav a {
    font-family: "IBM Plex Sans",sans-serif;
    text-decoration: none;
    transition: none;
}

.membersarea-nav a.active {
    text-decoration: underline;
    font-weight: 600;
    transition: none;
}

.azureFolderItem:hover {
    cursor: pointer;
    background-color: var(--bs-secondary);
}

.ff-ibm {
    font-family: "IBM Plex Sans Condensed", sans-serif !important;
}
.cursor-pointer:hover {
    cursor: pointer;
    background-color: var(--bs-light);
}

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

/** Small devices (landscape phones, 576px and up) **/
/** Bootstrap: -sm **/
@media (min-width: 576px) {
    /* In most cases we would like larger spacing on larger screens */
    :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);
    }
    /* 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); }
}

/** 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;
    }
    .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); }
    .highlight-hero .cb-field-inner-layout-wrapper {
        padding: 1.5rem 3rem;
        position: relative;
        overflow: hidden;
    }
    .highlight-hero .cb-field-richtext {
        position: absolute;
        top: 0;
        left: 0;
    }
    .highlight-hero .event-special-list-item .row .col-md-4 {
        width: 40%;
    }
    .highlight-hero .event-special-list-item .row .col-md-8 {
        width: 60%;
    }
}

/** 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;
    }
    .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); }

    .event-hero .cb-field-inner-layout-wrapper.text-bg-secondary::before {
        top: 0;
        left: 0;
        width: 80%;
        height: calc(100% - 6rem);
        border-radius: var(--bs-border-radius-xl);
    }
    .event-hero .cb-field-inner-layout-wrapper {
        position: relative;
        padding: 0rem 6rem;
    }
    .event-hero .cb-field-inner-layout-wrapper .column-1 {
        padding-bottom: 6rem;
    }
    .event-hero .cb-field-inner-layout-wrapper .column-2 {
        padding-top: 3rem;
    }
    .event-hero .cb-field-inner-layout-wrapper .column-2 > * {
        width: 50vw !important;
    }
    .event-hero .cb-field-richtext {
        max-width: 600px;
    }
}

/** 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;
    }
    .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); }
    .highlight-hero .cb-field-inner-layout-wrapper {
        padding: 3rem 6rem;
    }
    .highlight-hero .event-special-list-item .row {
        max-width: 90%;
        margin-left: auto;
    }
}

/** Extra Extra large devices (HD desktops, 1400px and up) **/
@media (min-width: 1400px) {
    :root {
        --cm-spacer-2: 2rem;
        --cm-spacer-3: 3rem;
        --cm-spacer-4: 4rem;
        --cm-spacer-5: 5rem;
    }
    .wide {
        min-width: calc(1348px + var(--bs-gutter-x) * 1);
        max-width: 1800px;
    }
    .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); }
}

@media (orientation: landscape) {
}

@media (orientation: portrait) {
}