/**
    These variables are for this solution only, 
    DO NOT COPY from storybook but overwrite these variables only.
*/

:root {
    --bui-whiteColor: #fff;
    --bui-blackColor: #000;
    --baseBgColor: #f0f0f0;
    --mainBgColor: #e5e5e5;
    --mainDarkColor: #000;
    --mainWhiteColor: #fff;
    --primaryColor: #2c7675;
    --secondaryColor: #848484;
    --tertiaryColor: #b30000;
    /*--fontFamily: "Exo 2", sans-serif;*/
    --fontFamily: "OpenSans", Verdana, Tahomas, sans-serif;

    --insightOrangeColor: #e98e1d;
    --insightPurpleColor: #49587e;
    --insightBlackColor: #202020;
    --insightWhiteColor: #fff;
    --insightMainBackgroundColor: #e5e5e5;
    --insightGreyColor: #aeaeae;
    --insightOrangeMenuColor: #ffebd1;
    --insightOrangeFormColor: rgba(233,142,29,0.1);
    --avatarBackgroundColorBase: #00695c;
    --avatarTextColorBase: #fff;

    --buttonFontFamilyDefaultBase: var(--fontFamily);
    --buttonBackgroundColorbase: #f9f9f9;
    --buttonTextColorBase: var(--primaryColor);
    --buttonClassActiveBase: #004069; /*var(--primaryColor);*/
    --buttonOutlinedBorderColorBase: #004069; /* var(--primaryColor); */
    --buttonRaisedBoxShadowBase: 0 2px 5px 0 rgba(0,0,0,0.26);
    --buttonIconSvgFillColorBase: var(--primaryColor);
    --buttonActiveIconSvgFillColorBase: #fff;
    --buttonBorderedBorderRadiusBase: 0.5rem;
    --buttonPrimaryIconSvgFillColorBase: #fff;
    --buttonSecondaryIconSvgFillColorBase: #fff;
    --buttonWarningIconSvgFillColorBase: #000;
    --buttonSuccessIconSvgFillColorBase: #fff;
    --buttonInfoIconSvgFillColorBase: #000;
    --buttonDefaultIconSvgFillColorBase: #000;
    --buttonNoneIconSvgFillColorBase: #000;

    --imageBackgroundColorBase: #d0d0d0;
    --iconTooltipFontFamilyBase: var(--fontFamily);
    --iconTooltipBackgroundColorBase: #fff;
    --iconTooltipTextColorBase: #000;
    --iconTooltipBoxShadowBase: #d8d8d8 5px 1px 13px -4px;
    --dividerBackgroundColorBase: #c5c5c5;
    --dividerTextColorBase: #000;
    --dividerFontFamilyBase: var(--fontFamily);

    --headingH1ColorBase: var(--mainWhiteColor);
    --headingH2ColorBase: var(--mainWhiteColor);
    --headingH3ColorBase: var(--mainWhiteColor);
    --headingH4ColorBase: var(--mainWhiteColor);
    --headingH5ColorBase: var(--mainWhiteColor);
    --headingH6ColorBase: var(--mainWhiteColor);
    --headingParagraphColorBase: var(--mainWhiteColor);
    --headingSpanColorBase: var(--mainWhiteColor);
    --headingFontFamilyBase: var(--fontFamily);

    --inputBackgroundColorBase: #faebd7;
    --inputTextColorBase: #000;
    --inputFontFamilyBase: var(--fontFamily);
    --inputFieldLabelBackgroudColorBase: #dff6ed;
    --inputFieldUploadIconColorBase: var(--mainDarkColor);
    --inputFieldLabelTextColorBase: var(--mainDarkColor);
    --inputFieldLabelHelperTextColorBase: var(--mainDarkColor);
    --inputFieldFileUploadBorderColorBase: #38c98d;
    --inputFieldFontFamilyBase: var(--fontFamily,var(--defaultFont));
    --inputFieldBorderColorBase: rgba(0,0,0,0.12);
    --inputFieldSubmitBtnBgColorBase: var(--primaryColor);
    --inputFieldSubmitBtnBorderColorBase: var(--primaryColor);
    --itemFontFamilyBase: var(--fontFamily);
    --linkFontFamilyBase: var(--fontFamily);
    --linkDropdownlinkHoverBgColorBase: #eee;
    --rawFontFamilyBase: var(--fontFamily);
    --selectFieldFontFamilyBase: var(--fontFamily);
    --selectFieldBackgroundColorBase: #fff;
    --selectFieldTextColorBase: #495057;
    --selectFieldBorderColorBase: rgba(0,0,0,0.12);
    --selectFieldSlottedErrorBackgroundColorBase: #ffffff;
    --textFieldFontFamily: var(--fontFamily);
    --textFieldBackgroundColorBase: #fff;
    --textFieldTextColorBase: #000;
    --textFieldBorderColorBase: rgba(0,0,0,0.12);
    --textFieldPlaceholderColorBase: var(--primaryColor);
    --toggleBackgroundColorBase: #bdbdbd;
    --toggleBoxShadowBase: 0 0 2px var(--toggleBackgroundColorBase);
    --toggleLabelBgColorBase: #fff;
    --toggleCheckboxCheckedBase: #49a844;
    --datepickerColorBase: #fff;
    --addressFontFamilyBase: var(--fontFamily);
    --addressTextColorBase: #fff;
    --menuItemFontFamilyBase: var(--fontFamily);
    --menuFontFamilyBase: var(--fontFamily);
    --menuLinkColorBase: #fff;
    --socialMediaItemFontFamilyBase: var(--fontFamily);
    --listFileFontFamilyBase: var(--fontFamily);
    --listFileBorderBase: 1.5px solid #38c98d;
    --listFileTextColorBase: #000;
    --listFileBorderColorBase: rgba(0,0,0,0.12);

    --actionFontFamilyBase: var(--fontFamily);
    --actionBackgroundColorBase: var(--mainWhiteColor);
    --actionTitleColorBase: var(--mainDarkColor);

    --actionReplyFontFamilyBase: var(--fontFamily);
    --actionReplyBackgroundColorBase: #004069; /*var(--primaryColor);*/
    --actionReplyHeadingBase: var(--mainWhiteColor);
    --actionReplyTeaserBase: var(--mainWhiteColor);
    --actionReplyIconBase: var(--mainWhiteColor);
    --actionReplyButtonBgBase: var(--mainWhiteColor);

    --cardFontFamilyBase: var(--fontFamily);
    --cardBgColorBase: #EFF0F0; /*#f9f9f9;*/ /*var(--mainWhiteColor);*/
    --cardLabelGreenBase: #004069; /* var(--primaryColor);*/
    --cardLabelGreenTextBase: #D53F53; /*var(--primaryColor);*/
    --cardLabelRedBase: var(--tertiaryColor);
    --cardLabelRedTextBase: var(--tertiaryColor);
    --cardLabelGreenIconColorBase: #D53F53; /*var(--primaryColor);*/
    --cardLabelRedIconColorBase: var(--tertiaryColor);
    --cardTeaserIconColorBase: var(--primaryColor);
    --cardTitleColorBase: #1D293B; /*var(--mainDarkColor);*/
    --cardTypeColorBase: #1D293B; /*var(--mainDarkColor);*/

    --commentFontFamily: var(--fontFamily);
    --commentBackgroundColorBase: #f9f9f9;  /*var(--mainWhiteColor);*/
    --commentTitleBase: var(--mainDarkColor);
    --commentDateBase: var(--primaryColor);
    --commentSeparatorBase: var(--primaryColor);
    --commentLinkBase: var(--primaryColor);
    --commentIconBase: #004069; /*var(--primaryColor);*/
    --commentIconReplyBase: var(--primaryColor);

    --docItemFontFamily: var(--fontFamily);
    --docItemBase: #f1f1f1;
    --docItemIconBackgroundBase: #D53F53; /*var(--primaryColor);*/
    --docItemTitleBase: #D53F53; /*var(--primaryColor);*/
    --docItemIconColorBase: var(--mainWhiteColor);


    --metainfoFontFamilyBase: var(--fontFamily);
    --metainfoIconBase: #004069; /*var(--primaryColor);*/
    --metainfoTextBase: var(--mainDarkColor);
    --replyFontFamily: var(--fontFamily);

    --replyBase: #eee;
    --replyHeadingBase: #484848;
    --replyTextBase: #484848;
    --replyIconBase: var(--primaryColor);
    --TitleHeaderFontFamily: var(--fontFamily,var(--defaultFont));

    --selectPickFontFamilyBase: var(--fontFamily);
    --selectPickCaretColorBase: #004069; /*var(--primaryColor);*/
    --selectPickBgColorBase: #EFF0F0; /* var(--baseBgColor);*/
    --selectPickTextColorBase:  #004069; /*var(--primaryColor);*/
    --selectPickBorderColorBase: #004069; /*var(--primaryColor);*/
    --selectPickOptionBgColorBase: var(--mainWhiteColor);
    --selectPickOptionBorderBottomColorBase: #ddd;
    --selectPickLeftIconColorBase: #004069; /*var(--primaryColor);*/
    --selectPickScrollBarThumbColorBase: #004069; /*var(--primaryColor);*/
    --selectPickScrollBarColorBase: #e0e0e0;
    
    --footerFontFamilyBase: var(--fontFamily);
    --footerBackgroundColorBase: var(--primaryColor);
    --footerHeadingBase: var(--mainWhiteColor);
    --footerBottomLinksBase: var(--mainWhiteColor);
    --footerBottomLineDivider: hsla(0,0%,100%,0.5);
    --headerFontFamily: var(--fontFamily);
    --headerBackgroundColorBase: var(--primaryColor);
    --headerSearchBackgroundColorBase: #fff;
    --headerSearchSvgFillColorBase: var(--primaryColor);

    --heroFontFamilyBase: var(--fontFamily);
    --heroBackgroundColorBase: #f9f9f9; /*var(--mainWhiteColor);*/
    --heroWatermarkColorBase: rgba(44,118,117,0.12);
    --heroTitleBase: var(--primaryColor);
    --heroTaglineBase: var(--secondaryColor);
    --heroTeaserBase: var(--mainDarkColor);

    --heroSlimFontFamilyBase: var(--fontFamily);
    --heroSlimBaseColor:#EFF0F0; /*var(--mainWhiteColor);*/
    --heroSlimTitleBase: #1D293B; /*var(--primaryColor);*/
    --heroSlimTaglineBase: #007AB8; /*var(--secondaryColor);*/
    --heroSlimWatermarkColorBase: rgba(44,118,117,0.12);
    --heroSlimIconColorBase: #007AB8; /*var(--primaryColor);*/
    --heroSlimBackLinkColorBase: #D53F53;  /*var(--primaryColor);*/
    --heroSlimBackLinkIconColorBase: #D53F53;  /*var(--primaryColor);*/

    --subscriberFontFamilyBase: var(--fontFamily);
    --subscriberBackgroundColorBase:#004069; /* var(--primaryColor);*/
    --subscriberTitleBase: var(--mainWhiteColor);
    --subscriberTeaserBase: var(--mainWhiteColor);
    --subscriberIconColorBase: var(--mainWhiteColor);

    --infoboxFontFamilyBase: var(--fontFamily);
    --infoboxBase: #EFF0F0; /*#f9f9f9;*/ /*var(--mainWhiteColor);*/
    --infoboxHeadingBase: #004069; /*var(--primaryColor);*/
    --infoboxHeadingBorderBase: rgba(197, 197, 197, 0.4);
    --infoboxHeadlistColorBase: var(--mainDarkColor);

    --HoreformFontFamily: var(--fontFamily);
    --HoreformHeadingTitleColorTextBase: #000;

    --FormLayoutFontFamilyBase: var(--fontFamily);
    --FormLayoutHeadingTitleBase: #000;
    --FormLayoutInfoIconColorBase: #000;
    --FormLayoutReplyIconColorBase: #000;


    --toastItemFontFamilyBase: var(--fontFamily);
    --toastItemSuccessBgColorBase: #2e7d32;
    --toastItemSuccessTimerColorBase: #1b5e20;
    --toastItemErrorBgColorBase: #b71c1c;
    --toastItemErrorTimerColorBase: #7f0000;
    --toastItemInfoBgColorBase: #0277bd;
    --toastItemInfoTimerColorBase: #004c8c;
    --toastItemColorTextBase: #fff;
    --toastItemColorCloseBtnBase: #fff;
    --datatableCellFontFamilyBase: var(--fontFamily,var(--defaultFont));
    --datatableRowFontFamilyBase: var(--fontFamily);
    --datatableRowBackgroundColorBase: #fff;
    --datatableRowClickableHoverBgBase: #eee;
    --datatableBackgroundColorBase: #00695c;
    --datatableTextColorBase: #fff;
    --datatableIconColorBase: #000;
    --datatableHeadingColorBase: #000;
    --toolbarFontFamily: var(--fontFamily);
    --toolbarInsightBgColorBase: var(--insightWhiteColor);
    --toolbarBorderTopBase: #f2f2f2;
    --toolbarBgColorBase: var(--bui-whiteColor);
    --shortcutFontFamilyBase: var(--fontFamily);
    --dialogFontFamilyBase: var(--fontFamily);
    --dialogBackgroundColorBase: #fff;
    --dialogBackgroundDarkColorBase: rgba(0,0,0,0.8);
    --stepsFontFamilyBase: var(--fontFamily);
    --stepsBackgroundColorBase: #00695c;
    --stepsTextColorBase: #fff;
    --stepsLayoutBgColorBase: var(--insightWhiteColor);
    --stepsActiveColor: #e98e1d;
    --stepsErrorColor: #c62828;
    --stepsLiBorderColorBase: var(--insightGreyColor);
    --stepsSlottedColorBase: var(--insightGreyColor);
    --primaryBtnColor: #145ee7;
    --primaryBtnTextColor: #f9f9f9;
    --primaryBtnHoverColor: #143be7;
    --primaryBtnHoverTextColor: #f9f9f9;
    --primaryBtnOutlineColor: #2549eb;
    --secondaryBtnColor: #6c757d;
    --secondaryBtnTextColor: #fff;
    --secondaryBtnHoverColor: #5e6469;
    --secondaryBtnHoverTextColor: #fff;
    --secondaryBtnOutlineColor: #8f9092;
    --warningBtnColor: #ffca2c;
    --warningBtnTextColor: #000;
    --warningBtnHoverColor: #dbac1e;
    --warningBtnHoverTextColor: #000;
    --warningBtnOutlineColor: #d8af32;
    --successBtnColor: #157347;
    --successBtnTextColor: #fff;
    --successBtnHoverColor: #125f3b;
    --successBtnHoverTextColor: #fff;
    --successBtnOutlineColor: #0a864c;
    --infoBtnColor: #0dcaf0;
    --infoBtnTextColor: #000;
    --infoBtnHoverColor: #0eafcf;
    --infoBtnHoverTextColor: #000;
    --infoBtnOutlineColor: #03a2c2;
    --noneBtnColor: transparent;
    --noneBtnTextColor: #000;
    --noneBtnHoverColor: #f9f9f9;
    --noneBtnHoverTextColor: #000;
    --noneBtnOutlineColor: #000;
    --defaultBtnColor: #f9f9f9;
    --defaultBtnTextColor: #000;
    --defaultBtnHoverColor: #eceaea;
    --defaultBtnHoverTextColor: #000;
    --defaultBtnOutlineColor: #f1eeee
}

*:not(:defined) {
    display: none
}

@media (max-width:calc(576px - 0.001px)) {
  .bui-hide-mobile-small {
    display: none
  }
}
@media (min-width:576px) and (max-width:calc(768px - 0.001px)) {
  .bui-hide-mobile {
    display: none
  }
}
@media (min-width:768px) and (max-width:calc(992px - 0.001px)) {
  .bui-hide-tablet {
    display: none
  }
}
@media (min-width:992px) and (max-width:calc(1200px - 0.001px)) {
  .bui-hide-desktop {
    display: none
  }
}
@media (min-width:1200px) and (max-width:calc(1400px - 0.001px)) {
  .bui-hide-desktop-lg {
    display: none
  }
}
@media (min-width:1400px) and (max-width:calc(1920px - 0.001px)) {
  .bui-hide-desktop-xl {
    display: none
  }
}
@media (min-width:1920px) {
  .bui-hide-desktop-xxl {
    display: none
  }
}
.bui-helper__grid-1fr-auto {
  -ms-grid-columns: 1fr;
  grid-gap: 1rem;
  -webkit-align-items: center;
  align-items: center;
  display: -ms-grid;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr
}
@media (min-width:768px) {
  .bui-helper__grid-1fr-auto {
    -ms-grid-columns: 1fr 1rem auto;
    grid-gap: 1rem;
    -webkit-align-items: center;
    align-items: center;
    display: -ms-grid;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: 1fr auto
  }
}