:root {
    --baseMaxWidth: 1100px;
    /*--mainBgColor: #ECEDF3;*/
    --mainBgColor: #F3F3F7;
    /* This is the right one */
    background-color: var(--mainBgColor);
    --headerNavHeight: 90px;
    --borderRadiusContainer: 10px;
    --borderRadiusButton: 5px;
    --borderRadiusInput: 5px;
    /*COLORS*/
    --white-color: #ffffff;
    --blackColor: #222222;
    --primaryColorWeb: #c21a13;
    --primaryRGB: 194, 26, 19;
    --primaryColor: var(--primaryColorWeb);
    --webPrimaryColor: var(--primaryColorWeb);
    /*--secondaryColorWeb: #00A2D9;*/ /* Flere farver */
    /*--secondaryRGB: 0, 162, 217;*/ /* Flere farver */
    --secondaryColorWeb: var(--primaryColorWeb); /* Kun en farve */
    --secondaryRGB: var(--primaryColorRGB); /* Kun en farve */
    --secondaryColorWebOverlay: rgba(--secondaryRGB, .4);
    --secondaryColor: var(--secondaryColorWeb);
    --webSecondaryColor: var(--secondaryColorWeb);
    /*--tertiaryColorWeb: #89cde2;*/ /* Flere farver */
    --tertiaryColorWeb: var(--primaryColorWeb); /* Kun en farve */
    --highlightedInformationColor: #ffd001;
    --bbaLightedColor: #fff;
    --lightBgColorSecondary: rgba(var(--primaryRGB), 0.2); /*backgrund for department section + poi section*/
    --customSectionBox: var(--lightBgColorSecondary);
    /* --darkGreen: #224430;
    --lightTextColor: #FCEAFB; */
    /*-------Typography-----------*/
    --buttonFontWeight: 700;
    --fontFamily: 'Roboto', sans-serif;
    font-family: var(--fontFamily);
    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;
    /**component Colors */
    --customHeadingColor: var(--primaryColorWeb);
    --buttonMoliri: var(--primaryColorWeb);
    /*------Breadcrumb-------*/
    --breadcrumbitemTextColorActive: var(--primaryColorWeb);
    --breadcrumbitemTextColorBase: var(--primaryColorWeb);
    --breadcrumbitemDivider: var(--primaryColorWeb);
    /* header**/
    --headerAsideMenuItemColor: var(--primaryColorWeb);
    /* subpage header */
    /*--subpageheaderBackgroundColorBase: var(--secondaryColorWeb);*/ /* Flere farver */
    --subpageheaderBackgroundColorBase: var(--primaryColorWeb); /* Kun en farve */
    --subpageheaderTextColorBase: var(--primaryColorWeb);
    --subpageheaderHeadingTextColorBase: var(--primaryColorWeb);
    /*------Aside navigation-------*/
    --asidemenuTextBase: var(--white-color);
    --asidemenuDivider: var(--white-color);
    /*--asidemenuTextPrimaryHover: var(--tertiaryColorWeb);*/ /* Flere farver */
    --asidemenuTextPrimaryHover: var(--white-color); /* Kun en farve */
    /*--asidemenuTextSecondaryHover: var(--tertiaryColorWeb);*/ /* Flere farver */
    --asidemenuTextSecondaryHover: var(--primaryColorWeb); /* Kun en farve */
    --asidemenuBgStyleMainPanel: var(--primaryColorWeb);
    --asidemenuBgStyleSubPanel: var(--webPrimaryColor);
    --scrollbarThumb: var(--blackColor);
    /* <bui-cta-button> */
    --ctabuttonBackgroundColor: var(--primaryColorWeb);
    /* <bui-accordion> */
    --accordionBtnBg: var(--primaryColorWeb);
    --accordionBtnText: var(--white-color);
    --accordionBtnBorder: transparent;
    /* bui-accordion-item */
    --accordionItemIconColor: var(--primaryColorWeb);
    --accordionItemTextColor: var(--primaryColorWeb);
    --accordionitemBackgroundColorBase: var(--white-color);
    /* <bui-quote>*/
    --quoteTextColor: var(--primaryColorWeb);
    --quoteCiteColor: var(--primaryColorWeb);
    /* long read **/
    --tableofcontentTitleColor: var(--primaryColorWeb);
    /*----Tidslinje----*/
    /*--timelinestepIconBgColor: var(--secondaryColorWeb);*/ /* Flere farver */
    --timelinestepIconBgColor: #d1e0c7; /*  Kun en farve - brug farve svarende til rgba(var(--primaryRGB), 0.25); */
    --timelinestepIconTextColor: var(--primaryColorWeb);
    --timelinestepIconActiveBgColor: var(--primaryColorWeb);
    /*--timelineLineBaseColor: var(--primaryColor);*/
    --timelineLineProcessColor: var(--primaryColorWeb);
    /* card */
    --webcardHeading: var(--primaryColorWeb);
    /*icon*/
    --iconBgColor: var(--primaryColorWeb);
    /* block **/
    --blockHighlightBaggroundColor: var(--primaryColorWeb);
    /* heading **/
    --textDataTypeColor: var(--primaryColorWeb); /** Has to be changed to slotted when changed remove this  */
    /*form*/
    --singleFormInputLabelColor: var(--primaryColorWeb);
    /*---- Default Office component ----*/
    --officeDefaultBaggroundColor: var(--primaryColorWeb);
    --officeDefaultTxtColor: var(--white-color);
    --officeDefaultIconColor: var(--white-color);
    /*------ Politiker galleri ------*/
    --personBgBlueColor: var(--primaryColorWeb);
    --personIconColor: var(--white-color);
    --personresumeBackgroundColorBase: var(--primaryColorWeb);
    --personresumeHeadingColor: var(--white-color);
    --personresumeTextColorBase: var(--white-color);
    --personDarkBlueFadedColor: var(--white-color);
    --bbaDarkBlueColor: var(--primaryColorWeb);
    --bbColorMenuBtnActive: var(--primaryColorWeb);
    --minicardBorderColor: var(--primaryColorWeb);
    --personTextColorHovered: var(--primaryColorWeb);
    /*----CTA Banner----*/
    --ctabannerBackgroundColorBase: rgba(var(--primaryRGB), .075);
    --ctabannerTextColorBase: var(--primaryColorWeb);
    --ctabannerSvgColorBase: var(--white-color);
    /*------ WCAG module ------*/
    --wcagmoduleBackgroundColorBase: var(--primaryColorWeb);
    /*------ ScrollToTop ------*/
    --scrollToTopButtonColor: var(--blackColor);
    --scrollToTopButtonBgColor: var(--white-color);
    --scrollToTopButtonColorHover: var(--white-color);
    --scrollToTopButtonBgColorHover: var(--blackColor);
    /*-----Searchbar-----*/
    --searchBarBtnColor: var(--primaryColorWeb);
    --searchBarIconColor: var(--white-color);
    --searchBarBtnHoverColor: rgba(var(--primaryRGB), 0.4); /* Kun en farve */
    /*--searchBarBtnHoverColor: rgba(0, 69, 122, 0.4);*/ /* Flere farver */
    --searchBarIconHoverColor: var(--primaryColorWeb);
    /*div edits*/
    --textitemHeroOvalBaseColor: var(--white-color);
    --webBannerButtonBgColor: white;
    --ctaButtonSquareIconBgColor: var(--primaryColorWeb);
    --ctaButtonSquareIconColor: var(--white-color);
    --footerLogoWidth: 180px;
    --footerBackgroundColorBase: #ededeb;
    /* twin 50/50 hero - Bolig*/
    --hero-twin-min-height-default: 0;
    --hero-twin-min-height-mobile: 0;
    --hero-twin-min-height-tablet: 0;
    --hero-twin-img-padding-top: 35vh;
    /* hero slim  onlyImg variant - bolig*/
    --hero-slim-img-padding-top-default: 20vh;
    --hero-slim-img-padding-top-tablet: 30vh;
    --hero-slim-img-padding-top-desktop: var(--hero-slim-img-padding-top-tablet);
    /* webbanner fyfty fyfty - bolig*/
    --webbannerTextColorBase: var(--white-color);
    --web-banner-dynamic-bg-color: transparent;
    --web-banner-dynamic-content-box-bg: transparent;
    --web-banner-glass-efect-bg-color: rgba(var(--primaryRGB), 0.75);
    /* Div */
    --searchBarBtnHoverColor: rgba(var(--primaryRGB), 0.2);
    --webbannerDesignSvg: url( https://static.moliri.dk/langelandbolig/dist/images/full-circle.svg );
    --footerHeadingBase: var(--blackColor);
    
}

mdf-dialog.glass-effect {
    --mdf-dialog-glass-effect-bg-color: rgba(var(--primaryRGB), 0.6); /*NEW SET UP? - check contrast with opacity*/
    --buttonMoliri: var(--blackColor); /* ved kun en farve*/
    /*--buttonMoliri: var(--secondaryColor);*/
}
/*is this shared? - There was something about when there where even / uneven numbers might need clean up */
@media (min-width: 768px) {
    bui-grid.text-item-bg-style {
        --gridFillBaseSpace: 15em;
    }
}

@media (min-width: 992px) {
    bui-grid.text-item-bg-style {
        --gridFillBaseSpace: 15em;
    }
}

/*----CTA Banner----*/
bui-cta-banner {
    --buttonMoliriWhite: var(--primaryColorWeb);
}
/*----CTA Banner end----*/

.contentpage-divider-faciliteter900 {
    display: none; /*er evt. ikke det samme navn på alle løsninger*/
}

.frontpage-main {
    --sectiongridHeadingTextAlign: center;
    --baseMaxWidth: 1440px;
}

.listpage-main {
    --baseMaxWidth: 1440px;
}

.base-icon-cta-horizontal {
    --baseMaxWidth: 1100px;
}

bui-quote {
    font-style: italic;
}

bui-raw-sp p a {
    color: var(--primaryColorWeb);
}

/*-----montage-white-text-----*/
bui-montage bui-raw-sp p a {
    color: var(--white-color);
    text-decoration: underline;
}

    bui-montage bui-raw-sp p a:hover {
        color: var(--white-color);
        text-decoration: none;
    }

/*-----highlight-white-text-----*/
bui-block.highlight p {
    color: var(--white-color);
}

bui-block.highlight a {
    color: var(--white-color);
}

bui-block.highlight ul li, bui-block.highlight ul li a, bui-block.highlight ul li p {
    color: var(--white-color);
}

bui-block.highlight h1,
bui-block.highlight h2,
bui-block.highlight h3,
bui-block.highlight h4,
bui-block.highlight h5,
bui-block.highlight h6 {
    color: var(--white-color);
}

bui-block.highlight ul {
    list-style: none;
}
    /*-----highlight-White-bullet-----*/
    bui-block.highlight ul li > a, bui-block.highlight ul li > p {
        color: var(--white-color);
    }

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

bui-select-field label {
    color: var(--primaryColorWeb);
}

/*--- Apple automatic Tel: links ---*/
a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

/*
bui-cta-icon-box .animated-line-link {
    --ctaiconboxTextColorBase: var(--primaryColorWeb); DONT WORK - browser set a color, better way to set it?    
}*/

/*.bg-color {
    --container-bg-color: var(--primaryColorWeb);
}*/

/*Inverted version*/
bui-header {
    --bbaWhiteColor: #ededeb;
    --headerAsideMenuItemColor: var(--blackColor);
    --asideMenuIconWidthDesktop: 150px;
    --asideMenuIconHeightDesktop: 150px;
    --asideMenuIconWidthTablet: 100px;
    --asideMenuIconHeightTablet: 100px;
    --asideMenuIconWidth: 100px;
    --asideMenuIconHeight: 100px;
}

/*---- table in footer - remove when added to normal config, just need some checks on other customers  ----*/

bui-footer [slot=heading], bui-footer caption > *, bui-opening-hours [slot=heading], bui-opening-hours caption > * {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    margin-top: 0;
    text-align: left
}

@media (min-width: 768px) {
    bui-footer [slot=heading], bui-footer caption > *, bui-opening-hours [slot=heading], bui-opening-hours caption > * {
        margin-bottom: 12px
    }
}

bui-footer table, bui-opening-hours table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%
}

bui-footer th, bui-opening-hours th {
    font-weight: 400;
    text-align: left
}

@media (max-width: calc(768px - 0.001px)) {
    bui-footer td, bui-opening-hours td {
        text-align: center
    }
}
/*----end-----*/


@media (min-width: 1200px) {
    bui-timeline-step[active="true"] {
        --timelinestepIconTextColor: var(--white-color);
    }
}

/*--- Ved kun en farve ---*/
bui-navigation-item a {
    background-image: linear-gradient(transparent, transparent), linear-gradient(var(--white-color), var(--white-color));
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size .3s ease-out;
}

    bui-navigation-item a:hover {
        color: var(--white-color);
        background-size: 0 2px, 100% 2px;
    }
/*--- End ---*/

/*--- Afstande boks - Farver ---*/
.poi p, .poi .wrapper {
    color: #222222;
}
/*--- End ---*/

/*-- footer link color --*/
bui-footer a {
    color: inherit;
}
/*--- End ---*/

bui-footer bui-social-media a {
    border-color: black;
}