/* -----------------------------------------
   1. Container Styling (Optional but helpful for layout)
   ----------------------------------------- */
   
.block-language ul:before {
content: "";
}
   
.language-switcher-language-url .links, .block-sublimeplus-sprogvaelger .links {
    display: flex; /* Use flexbox to keep items aligned horizontally */
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    gap: 10px; /* Creates consistent spacing between the list items */
}

/* -----------------------------------------
   2. List Item Styling (The container for the link)
   ----------------------------------------- */
/* Since the list item itself contains the button, we use flex and justify
   to ensure the styling is applied correctly. */
.language-switcher-language-url .links li {
    margin: 0; /* Remove default list item margins */
}

/* -----------------------------------------
   3. Anchor Link Styling (The colored button)
   ----------------------------------------- */
.language-switcher-language-url .language-link {
    /* Visual styling for the button */
    display: block; /* Makes the entire area clickable and allows padding to work correctly */
    padding: 8px 15px; /* Controls the internal spacing of the text */
    border-radius: 20px; /* Rounded corners */
    text-decoration: none; /* Remove the underline from the link */
    font-weight: 600; /* Make the text slightly bolder */
    cursor: pointer;
    transition: all 0.2s ease; /* Smooth hover effect */
    
    /* Default appearance (non-active links) */
    background-color: #f0f0f0; /* Light grey background */
    color: #333; /* Dark text color */
    border: 1px solid #ccc; /* Subtle border */
}

/* -----------------------------------------
   4. Hover Effect (UX Improvement)
   ----------------------------------------- */
.language-switcher-language-url .language-link:hover {
    background-color: #e0e0e0; /* Slightly darker background on hover */
    color: #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle lift effect */
}

/* -----------------------------------------
   5. Active State Styling (The current page)
   ----------------------------------------- */
.language-switcher-language-url .language-link.is-active {
    /* Distinct visual style for the active link */
    background-color: #007bff; /* Primary brand color (e.g., blue) */
    color: #ffffff; /* White text */
    border-color: #007bff; /* Match the border */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* More pronounced shadow */
    /* Ensure it looks slightly different from hover */
}

/* -----------------------------------------
   6. Media Query/Responsiveness (Optional)
   ----------------------------------------- */

@media (max-width: 300px) {
    /* On smaller screens, stack the links vertically */
    .language-switcher-language-url .links {
        flex-direction: column;
        gap: 8px; /* Reduce spacing on mobile */
    }

    /* Adjust padding for mobile readability */
    .language-switcher-language-url .language-link {
        width: 100%; /* Make buttons take full width */
        text-align: center;
    }
}


/* -------------------------------------------------
   5. Mobile Adaptivity (Crucial Changes Here)
   ------------------------------------------------- */
@media (max-width: 600px) {
    
    /* Adjust the main container to allow wrapping and stacking */
    .language-switcher-language-url .links {
        /* If there are too many links for one line, they will wrap naturally
           due to flex-wrap: wrap and behave like a stacked layout,
           but we still want the flex context. */
        flex-wrap: wrap;
        gap: 8px; /* Reduced spacing for compactness */
    }

    /* Make the button padding smaller for less vertical space usage */
    .language-switcher-language-url .language-link {
        /* Reduced vertical padding */
        padding: 7px 12px; 
        /* Optional: If you want the buttons to take up 100% width, uncomment the line below: */
        /* width: 100%; */ 
        /* If you use width: 100%, remove the inline-block display type */
    }
    
    /* If you prefer strict stacking (each button on its own line), 
       you can uncomment this rule and remove 'flex-wrap: wrap;' from the top block:
    .language-switcher-language-url .links {
        flex-direction: column;
        gap: 8px; 
    } 
    */

/*
#banner {
height: 500px;
}
*/


/*
.teaser-tile-image-container {
padding-bottom: 30px;
}
*/

.slidehow-internal-container {
height: 514px;
}


.views-element-container h2 {
font-size: 1em;
}

.moon_icon {
height: 120px;
width: 120px;
}

@media only screen and (min-width: 768px) {

.slidehow-internal-container {
height: 612px;
}

}




@media (min-width:1200px) {

#block-views-block-mt-posts-slideshow-full-width-block-1-2 {
height: 650px;
}
/*
.forcefullwidth_wrapper_tp_banner {
height: 650px !important;
}
*/

.slidehow-internal-container {
height: 650px;
}

}


.node--view-mode-mt-teaser-tile-image {
padding-bottom: 30px;
}

.teaser-tile-image-caption-top {
  position: absolute;
  top: 30px;
  left: 30px;
right: 20px;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

.node--view-mode-mt-teaser-tile-image:hover .teaser-tile-image-caption-top {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}


.node--view-mode-mt-teaser-tile-image h4 a {
  color: #ffffff;
}
.node--view-mode-mt-teaser-tile-image h4 a:focus {
color: #ffffff;
}
.region--default-background a:hover, .region--default-background a:focus {
color: #ffffff;
}


.header-container .sf-accordion-toggle.sf-style-none a:after {
content: "\f0c9";
font-family: 'Font Awesome 5 Free','Font Awesome 5 Pro';
font-weight: 900;
font-size: 24px;
}


.mt-button .fa-angle-right {
display: none;
}

.language-switcher-language-url .fa-earth-americas {
display: none;
}


.sf-accordion-toggle .fa-bars {
display: none;
}

.sf-accordion-toggle .fa-xmark {
display: none;
}



.fa-tags {
display: none;
}

#search-block-form .svg-inline--fa.fa-magnifying-glass {
display: none;
}


/*
.to-top .svg-inline--fa {
padding: 0; 
height: 100%;
font-size: 18px;
}
*/

.field--entity-reference-target-type-taxonomy-term:before, .field--entity-reference-target-type-taxonomy-term.field__item:before {
display: none;
}

/*
a.mt-button .svg-inline--fa {
display: none;
}

.slideout-toggle .svg-inline--fa {
display: none;
}

.header .svg-inline--fa {
display: none;
}

.mt-button a .svg-inline--fa {
display: none;
}

.links .svg-inline--fa {
display: none;
} 

.field__label .svg-inline--fa {
display: none;
}

*/


.header-top__section {
min-height: 45px;
}

.block-language ul li  {
font-size: 14px;
font-weight: 500;
}


.logo + .site-branding__name {
 margin-top: 0; 
}


.path-frontpage .page-top-container,
.region--background-shape {
  background-image: none;
}


.footers-container {
  background-image: none;
}

/*
.view-mt-posts-grid .views-field-title {
  position: absolute;
  top: 30px;
  left: 30px;
right: 20px;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}
.media--view-mode-mt-teaser img:hover .views-field-title {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}
.view-mt-posts-grid .views-field-title a {
  color: #ffffff;
}
.view-mt-posts-grid .views-field-title a:focus {
color: #ffffff;
}
.view-mt-posts-grid .views-field-title a:hover {
color: #ffffff;
}
*/


.view-mt-posts-grid .views-row {
margin-bottom: 30px;
}

.view-mt-posts-grid .views-field-title {
margin-top: 10px;
}

#block-explorefooter {
font-weight: 500;
font-size: 18px;
text-align: center;
}


#block-copyright {
font-size: 12px;
}

.region--default-background a:hover, .region--default-background a:focus {
/*color: #000;*/
}

.ui-widget-content {
background: #EEEEEE;
color: #222;
}

/*.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 10px;
}*/

.ui-corner-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.ui-corner-bottom {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

.overlay--colored {
background-color: hsla(var(--mt-color-primary-dark-value),0.1);
}


.node--view-mode-teaser {
margin-bottom: 10px;
}

/* .block-language ul li.de,  */
.block-language ul li.nl, .block-language ul li.fr {
display: none;
}

#block-views-block-mt-posts-latest-block-3 .views-row {
padding-bottom: 0.5em;
}

.field--entity-reference-target-type-taxonomy-term, .field--entity-reference-target-type-taxonomy-term.field__item {
padding-left: 0;
}

/*
header-container .sf-menu.menu li ul {
 border-left-width: 4px; 
 border-left-style: solid; 
}
*/

/*
.faq-list .faq-item .node__title {
font-size: 2em;
}
*/


.field--name-field-detailed-question {
margin-bottom: 12px;
font-size: 1.1em;
font-weight: 600;
}



.faq-dt-hide-answer {
padding-left: 0;
margin-bottom: 10px;
}

.faq-dt-hide-answer h4 {
font-weight: 600;
}


.faq-qa-visible {
margin-bottom: 0;
}

.faq-qa-visible h2.node__title {
margin-bottom: 0;
}

.faq-answer {
padding-left: 0;
margin-bottom: 20px;
}

.faq-content .node--view-mode-full .field {
margin-bottom: 12px;
}

.p-4 {
padding: 0.5rem!important;
}
.node--view-mode-mt-compact-list-item {
margin-bottom: 10px;
}

/* .region--default-background .node--type-faq.node--view-mode-mt-compact-list-item,  */
.region--default-background.node--view-mode-mt-compact-list-item {
background-color: var(--mt-color-default-light);
/*background-color: rgb(31, 37, 50);*/
}

#edit-aktivitet-items tr th {
font-size: 16px;
font-weight: 400;
text-align: center;
padding: 20px 0 0 0;
}

.webform-multiple-add {
padding-top: 15px;
}

.region--default-background .node--view-mode-mt-compact-list-item, .node--view-mode-mt-compact-list-item {
background-color: var(--mt-color-default-light);
}

#block-countdowntimer h2.title {
margin: 20px 0 20px;
font-weight: 700;
border-bottom: none;
position: relative;
text-transform: none;
font-size: 30px;
text-align: center;
}
#jquery-countdown-timer, #jquery-countdown-timer-note {
text-align: center;
}
#jquery-countdown-timer-note {
display: none;
}

.stars {
color: #FFE400;
}

.paragraph-responsive-typography-enabled.page-node-type-mt-post .node__main-content p.updated {
font-size: 12px;
}