/*Custom font from google*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    /*-------General-----------*/
    --baseMaxWidth: 960px;
    /*--mainBgColor: #ECEDF3;*/
    --mainBgColor: #F3F3F7; /* This is the right one */
    background-color: var(--mainBgColor);
    --headerNavHeight: 90px;
    --borderRadiusContainer: 10px;
    --borderRadiusButton: 5px;
    --borderRadiusInput: 5px;
    /*COLORS*/
    --blackColor: #141969; /*It seems like this color should be udes, instead of black ? */
    --primaryColorWeb: #141969;
    --secondaryColorWeb: #5cc4b7;
    --secondaryColorWebOverlay: rgba(92,196,183,.4);
    --primaryColor: var(--primaryColorWeb);
    --webPrimaryColor: var(--primaryColorWeb);
    --darkGreen: #224430;
    --lightTextColor: #FCEAFB;
    --orange: #EE7027;
    --buttonMoliri: var(--primaryColorWeb);
    --buttonMoliriTransition: none;
    --timelinestepTextColorBase: var(--primaryColorWeb);
    --timelineTextColorBase: var(--primaryColorWeb);
    --baseFrontpageH2SizeDesktopLg: 25px;
    /*-------Typography-----------*/
    --buttonFontWeight: 700;
    --fontFamily: 'Roboto', sans-serif;
    line-height: 1.5;
    --typographyHeadingFontWeight: bold;
    --typographyH1BigFontSize: 60px;
    --typographyH1FontSize: 44px;
    --typographyH2FontSize: 25px;
    --typographyH2ListViewFontSize: 16px;
    --typographyH3FontSize: 20px;
    --typographyH4FontSize: 18px;
    --typographyH5FontSize: 16px;
    /*--typographyH6FontSize: 14px;*/
    --typographyManchetFontSize: 24px;
    --typographyParagraphFontSize: 16px;
    --breadcrumbItemFontSize: 16px;
    --typographyButtonFontWeight: bold;
    --typographyButtonFontSize: 16px;
    --typographyChipTagFontWeight: bold;
    --typographyChipTagFontSize: 14px;
    --typographyCtaButtonFontWeight: bold;
    --typographyCtaButtonFontSize: 20px;
    --subpageheaderHeadingFontSizeDesktop: var(--typographyH1BigFontSize);
    /*------Breadcrumb-------*/
    --breadcrumbitemTextColorActive: var(--primaryColorWeb);
    --breadcrumbitemTextColorBase: var(--primaryColorWeb);
    --breadcrumbitemDivider: var(--primaryColorWeb);
    /*------Footer & CTA banner-------*/
    --footerBackgroundColorBase: var(--darkGreen);
    --footerHeadingBase: white;
    --footerLogoContainerHeight: 60px;
    /*--footerHeadingFontSize: 16px;*/
    --footerHeadingMarginBottom: 5px;
    --ctabannerBackgroundColorBase: center / cover no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/mobile-gradient-fp-1.png);
    --ctabannerTextColorBase: var(--primaryColorWeb);
    --footerHeaderH2FontSize: 18px;
    --footerHeaderH3FontSize: 18px;
    /*------Aside navigation-------*/
    /*--asidemenuBgStyleMainPanel: url(/i//aalborg-hero-bg.png?width=800);*/
    --asidemenuTextBase: var(--primaryColorWeb);
    --asidemenuDivider: var(--primaryColorWeb);
    --asidemenuTextPrimaryHover: #A3430B;
    --asidemenuTextSecondaryHover: #A3430B;
    --asidemenuBgStyleSubPanel: #FFF;
    --asidemenuBgStyleMainPanel: center / cover no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/mobile-aside.png);
    /*------General components-------*/
    --socialmediashareIconColor: var(--primaryColorWeb);
    --socialmediashareBtnBorderColor: var(--primaryColorWeb);
    --quoteCiteColor: #222222;
    --webbannerBackgroundColorBase: transparent;
    --webbannerTitleFontSizeDesktopXl: var(--typographyH2FontSize);
    --webbannerTitleFontSize: var(--typographyH2FontSize);
    --webbannerTextFontSizeDesktopXl: var(--typographyParagraphFontSize);
    --webbannerTextFontSize: var(--typographyParagraphFontSize);
    --heroHeaderImgBgStyle: center / cover no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/mobile-hero.png);
    --headingH1FontSizeMobile: var(--typographyH1FontSize);
    --headingH1FontSizeTablet: var(--typographyH1FontSize);
    --moliripublicheaderFontWeight: 700;
    --ctaiconboxBgStyle: top / contain no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/wave.png) white;
    --webIconBoxIconSize: 2em;
    --webIconBoxLineClampTitle: 1;
    --contactGuideIconBox: var(--typographyH4FontSize);
    --guidestepSectionFontSize: var(--typographyH2FontSize);
    --searchPadding: 2em 2em;
    --ctabuttonFontSizeMobile: var(--typographyCtaButtonFontSize);
    --ctabuttonFontSizeTablet: var(--typographyCtaButtonFontSize);
    --ctabuttonFontSizeDesktop: var(--typographyCtaButtonFontSize);
    --ctabuttonSizeBaseMobile: 13px;
    --ctabuttonSizeBaseTablet: 13px;
    --ctabuttonMaxWidth: 750px;
    --webcardTeaser: var(--blackColor);
    --webcardHeading: #141969;
    --webcardTagline: #666666;
    --eventcardHeadingColorBase: #141969;
    --weblistitemTextColorBase: var(--blackColor);
    --weblistitemTagline: #666666;
    --customHeadingColor: #141969;
    --heroHeaderImgTopMobile: 270px;
    --listdefaultIconColor: var(--primaryColorWeb);
    --accordionBtnFontSize: 14px;
    --accordionHeadingFontSize: 25px;
    --guidestepRepeatDesktop: 2;
    --imageandboxesIconColor: var(--primaryColorWeb);
    --table-td-min-width: auto;
    --ctaBtnSlottedIconRightPadding: 0.3em;
    --ctabuttonIconSizeTablet: 24px;
    /*----CONTENT TYPES----*/
    /*----Readable layput----*/
    --readableLayoutMaxWidth: var(--baseMaxWidth);
    /*Longread table of contents*/
    --tableofcontentTitleColor: var(--primaryColorWeb);
    --tableofcontentActiveColor: var(--primaryColorWeb);
    --tableofcontentIconColor: var(--orange);
    /*----Tidslinje----*/
    --timelinestepIconBgColor: var(--primaryColorWeb);
    --timelinestepIconActiveBgColor: #ee7027;
    /*--timelineLineBaseColor: var(--primaryColor);*/
    --timelineLineProcessColor: var(--primaryColorWeb);
    --timelinestepIconTextColor: #fff;
    /*hearings*/
    --heroTaglineBase: var(--primaryColorWeb);
    --heroTeaserBase: var(--primaryColorWeb);
    /*feedback button*/
    --feedback-btn-bottom-position: 25vh;
    --feedback-btn-position: -1px;
    /*    --feedbackBtnBorderRadius: 0.35em 0em 0em 0.35em;*/
    /**
        * Aalborg Kommune webbutton - no transition
    */
    --webbutton-slotted-transition: none;
    /*color fremhævet kasse*/
    --blockHighlightBaggroundColor: var(--darkGreen);
    --blockHighlightPadding: .1em 1.2em;
    /* bui-accordion */
    --accordionBtnBg: var(--primaryColorWeb);
    --accordionBtnText: var(--white-color);
    --accordionBtnBorder: transparent;
    /* bui-accordion-item */
    --accordionItemIconColor: var(--primaryColorWeb);
    --accordionItemTextColor: var(--primaryColorWeb);
    --accordionitemBackgroundColorBase: var(--white-color);
    /*Icon Color*/
    --iconColor: var(--primaryColorWeb);
}
/*
   Typography mobile
*/
@media (max-width: 576px) {
    :root {
        --headingH1BaseFontSize: 30px;
        --typographyH2FontSize: 24px;
        --baseFrontpageH2SizeMobile: 24px;
        --typographyManchetFontSize: 18px;
        --typographyCtaButtonFontSize: 17px;
        --ctaButtonRightIconSize: 1.2em;
        --ctaBtnSlottedIconRightPadding: 0.5em 0.2em 0.5em 0.5em;
    }

    body bui-accordion-item {
        --accordionItemFontSize: 17px
    }
}
/*
  END Typography mobile
*/

/*
    feedback container
*/
.feedback-btn {
    --buttonMoliriBorderRadius: 0.35em 0em 0em 0.35em;
    --buttonMoliriFontWeight: 700;
}
bui-feedback-container bui-web-button.moliri-solid {
    --buttonMoliriBorderRadius: 0.35em;
    --buttonMoliriFontWeight: 700;
}
/*
  END  feedback container
*/
bui-timeline-step button {
    color: var(--primaryColorWeb);
}
bui-timeline-step[active=true] {
    --timelinestepIconTextColor: #fff;
}
bui-guide-step bui-heading > * {
    font-weight: 700;
    line-height: 1.15;
}
bui-heading {
    --primaryColorWeb: #141969;
}

.moliripublicheader-heading {
    display: block;
    max-width: 400px
}

bui-search-bar [type=search] {
    outline-offset: -2px;
    padding-left: 10px;
    /*font-size: 22px;*/
    min-height: 2.75em;
}

    bui-search-bar [type=search]::placeholder {
        color: var(--primaryColorWeb);
    }

bui-search-bar bui-web-button {
    width: 100%;
    --searchPadding: 1em 1.5em;
}

bui-hero-header bui-block:hover {
    --blockBaggroundColor: var(--blueGrey, var(--primaryColorWeb));
    --textitemTextColorBase: white;
}

bui-web-banner bui-icon {
    --imageCtaBannerIconColor: var(--webBannerContentBgColorForIcon);
    --iconBgColor: var(--webbannerTextColorBase);
}

bui-container bui-text-item {
    --textitemTextColorBase: var(--primaryColorWeb);
}

bui-text-item h2, bui-text-item .title {
    font-size: 16px;
}

.content-wrapper {
    --headingH1FontSizeDesktop: var(--typographyH1FontSize);
}

.hearingportal_ContentType {
    --buttonFontWeight: normal;
}

bui-raw-sp, bui-raw-sp.custom {
    color: var(--blackColor);
    font-size: 16px;
}
    bui-raw-sp a, bui-raw-sp.custom a {
        color: var(--blackColor);
    }

    bui-raw-sp h2, .office-component h2, bui-raw-sp.custom h2 {
        font-size: var(--typographyH2FontSize);
    }

    bui-raw-sp h3, .office-component h3, bui-raw-sp.custom h3 {
        font-size: var(--typographyH3FontSize);
    }

    bui-raw-sp h4, .office-component h4, bui-raw-sp.custom h4 {
        font-size: var(--typographyH4FontSize);
    }

    bui-raw-sp h5, .office-component h5, bui-raw-sp.custom h5 {
        font-size: var(--typographyH5FontSize);
    }

    bui-raw-sp h6, .office-component h6, bui-raw-sp.custom h6 {
        font-size: var(--typographyH6FontSize);
    }

.office-component bui-opening-hours caption, .office-component bui-opening-hours [slot="heading"] {
    margin-bottom: 20px;
    font-size: var(--typographyH3FontSize);
}

bui-opening-hours tr {
    vertical-align: baseline;
}

/*.contentpage-divider-personfremvisning {
    display: none;
}*/

.contentpage-divider-munichatbot496 {
    display:none;
}

.contentPage_accordionglobaltkomponent295 + .contentPage_accordionglobaltkomponent295 {
    margin-top: var(--dividerContentPageMinHeight,3em);
}


.contentPage bui-base > bui-raw-sp > :first-child {
    margin-top: 0;
}

.contentPage bui-base > bui-raw-sp > :last-child {
    margin-bottom: 0;
}



bui-base.linkpicker + bui-divider {
    --dividerContentPageMinHeight: calc(3em - 16px);
}

    bui-base.linkpicker + bui-divider.contentpage-divider-highligthedblock {
        display: none
    }

bui-cta-button .cta-button square-icon {
    --ctabuttonMaxWidth: 375px;
}

bui-cta-button {
    --ctaButtonSquareIconBgColor: var(--ctabuttonBackgroundColor, #141969);
    --ctaButtonSquareIconColor: white;
    --ctabuttonTransformIcon: translateX(0px);
}

    bui-cta-button:hover {
        --ctabuttonBackgroundColor: white;
        --ctaButtonSquareIconBgColor: white;
        --ctaButtonSquareIconColor: var(--primaryColorWeb);
        --ctabuttonLinkPickerTextColor: var(--primaryColorWeb);
    }


.home bui-cta-banner {
    /* web banner  bg color */
    /*--mainBgColor: var(--newslistBgColor);*/
    --mainBgColor: white;
    --cta-banner-margin-top: -1px;
}
.home bui-divider:nth-of-type(4) {
    display: none
}

.list_ContentType, .categorylistpage_ContentType, .aktivitetsliste559_ContentType {
    --baseMaxWidth: 1280px;
}

.frontpage-main {
    --baseMaxWidth: 1400px;
    /*-----Section Headings-----*/
    --baseFrontpageH2TextAlign: center;
    --sectiongridHeadingTextAlign: center;
    --newslistHeadingTextAlign: center;
}

.itemlist-events {
    --sectiongridHeadingTextAlign: center;
}

bui-footer bui-opening-hours caption, bui-footer bui-opening-hours [slot="heading"] {
    font-size: var(--footerHeadingFontSize);
    margin-bottom: var(--footerHeadingMarginBottom);
}

[col3animate]:hover::before {
    width: 0;
    margin: 0;
}

bui-block.wordexplainer bui-raw-sp h1,
bui-block.wordexplainer bui-raw-sp h2,
bui-block.wordexplainer bui-raw-sp h3,
bui-block.wordexplainer bui-raw-sp h4,
bui-block.wordexplainer bui-raw-sp h5,
bui-block.wordexplainer bui-raw-sp h6 {
    color: white;
}

.web-icon-box_list bui-web-icon-box {
    height: 100px;
}

bui-accordion-item {
    --secondaryColorWeb: var(--primaryColorWeb);
    --accordionitemBackgroundColorBase: white;
    --accordionItemFontSize: var(--typographyH3FontSize);
    --accordionitemHeaderPadding: 16px;
}

/*muni*/
@media screen and (max-width: 600px) {
    #chatbot-container.round,#chatbot-container-shadow.round {
        bottom: 4.5em !important;
    }
}

/*cludo*/
.search-filters ul li.active, #cludo-search-results .search-filters ul li:hover {
    border-bottom: 4px solid var(--primaryColorWeb);
}

#cludo-search-results h2, #cludo-search-results h2 b, .search-result-count {
    color: var(--primaryColorWeb);
    font-weight: normal;
}

    #cludo-search-results h2 b {
        font-weight: bold;
    }

    #cludo-search-results .cludo-banner {
        margin: 50px 0 20px 0;
        padding: 40px;
        background: var(--primaryColorWeb);
        color: white;
        border-radius: var(--borderRadiusContainer, 0);
    }

    #cludo-search-results .cludo-banner a {
        color: white;
        word-break: break-word;
    }
    #cludo-search-results .cludo-banner h2 {
        margin-block-start: 0;
        color: white;
        font-size: var(--typographyH2FontSize);
    }
    #cludo-search-results .cludo-banner h3 {
        margin-block-start: 0;
        color: white;
        font-size: var(--typographyH3FontSize);
    }
    #cludo-search-results .cludo-banner a, 
    #cludo-search-results .search-results-item span.path {
        text-decoration: underline;
        word-break:break-word;
    }
    #cludo-search-results .cludo-banner a:hover,
    #cludo-search-results .search-results-item span.path:hover {
        text-decoration: none;
    }
    /********/
    /* Reference - media queries do NOT take variables 
    mobile-width: 576px;
    tablet-width: 768px;
    desktop-width: 992px;
    desktop-width-lg: 1200px;
    desktop-width-xl: 1400px;
    desktop-width-xxl: 1920px;
*/
    @media (min-width: 576px) {
        : root {
        --ctabannerBackgroundColorBase: top / cover no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/gradient-fp.png);
    }

    .moliripublicheader-heading {
        max-width: 650px;
    }
}

@media (min-width: 768px) {
    :root {
        --heroHeaderImgBgStyle: right / 80% no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/hero-logo.png);
        --heroHeaderBgStyle: center / cover no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/gradient-fp.png);
        --footerLogoContainerHeight: 90px;
    }

    .moliripublicheader-search {
        max-width: 600px;
    }
}

@media (min-width: 992px) {
    bui-news-list bui-web-card {
        box-shadow: rgb(0 0 0 / 5%) 12px 12px 12px;
        padding: 0px 16px 6px;
        border-radius: var(--borderRadiusContainer,0);
    }
}

@media (min-width: 1200px) {
    :root {
        --moliripublicheaderGridGap: 25px;
        --headingH1FontSizeDesktop: var(--typographyH1BigFontSize);
    }

    bui-hero-header {
        --maxWidthGridItem: 190px
    }
}

@media (min-width: 1400px) and (max-height: 1000px) {
    :root {
        --asidemenuBgStyleMainPanel: right / cover no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/gradient-bg.png), center / cover no-repeat url(https://static.moliri.dk/aalborgkommune/dist/images/mobile-aside.png), #fff;
    }
}


body {
    --headersearchIconSize: 24px;
    --moliripublicSearchIconSize: 24px;
}

bui-header-search bui-web-button {
    margin-left: 0;
    padding: 0 1.5em;
    background: var(--searchBarBtnColor, #141969);
    --headerAsideMenuItemColor: var(--searchBarIconColor, #FCEAFB);
    border-radius: 0 var(--borderRadiusInput) var(--borderRadiusInput) 0;
    /*transition: all 0.45s ease-in 0s;*/
    transition: none;
}

    bui-header-search bui-web-button:hover, bui-header-search bui-web-button:focus-within {
        background: var(--searchBarBtnHoverColor, #A1A3C3);
        --headerAsideMenuItemColor: var(--searchBarIconHoverColor, #141969);
        /*transition: all 0.45s ease-out 0s;*/
        transition: none;
    }

/*hearings*/
bui-subscriber bui-button button, bui-action-reply bui-button button {
    border-radius: var(--borderRadiusButton, 5px);
}

.hero__tagline, .hero__teaser {
    font-size: 32px;
}
.inverse .button__text{margin-left:10px;}
/**/

/*-----custom-bullets-highlighted-box-----*/
bui-block.highlight ul {
    list-style: none;
}

    bui-block.highlight ul li::before {
        content: "\2022";
        color: #fff;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }

bui-raw-sp.link-list-style ul a[target=_blank]:after {
    background-color: currentColor;
    padding: 0 1.5em;
    -webkit-mask: url(https://static.moliri.dk/aalborgkommune/dist/icons/external-link.svg) no-repeat;
    mask: url(https://static.moliri.dk/aalborgkommune/dist/icons/external-link.svg) no-repeat;
}

bui-block.highlight {
    max-width: none !important;
}

/*-----custom-color-highlighted-box-----*/
bui-block.highlight bui-raw-sp h1,
bui-block.highlight bui-raw-sp h2,
bui-block.highlight bui-raw-sp h3,
bui-block.highlight bui-raw-sp h4,
bui-block.highlight bui-raw-sp h5,
bui-block.highlight bui-raw-sp h6,
bui-block.highlight bui-raw-sp p,
bui-block.highlight bui-raw-sp a,
bui-block.highlight bui-raw-sp ul li {
    color: #fff;
}