@import url('https://fonts.googleapis.com/css2?family=Gantari&display=swap'); /* 400 */
@import url('https://fonts.googleapis.com/css2?family=Gantari:wght@600&display=swap'); /* 600 */
@import url('https://fonts.googleapis.com/css2?family=Gantari:wght@700&display=swap'); /* 700 */

/* Variables */
:root {
    /* ----- Base theme----- */
    color-scheme: light dark;

    /* ----- Colors ----- */
    --clr-primary-50: #DCF2F1;
    --clr-primary-100: #A8DFDB;
    --clr-primary-200: #6BCAC4;
    --clr-primary-300: #00B5AC;
    --clr-primary-400: #00A59A;
    --clr-primary-500: #009486;
    --clr-primary-600: #008779;
    --clr-primary-700: #007769;
    --clr-primary-800: #006759;
    --clr-primary-900: #004B3C;

    --clr-support-50: #F8FAFA;
    --clr-support-100: #ECEFF1;
    --clr-support-200: #CFD8DC;
    --clr-support-300: #B0BEC5;
    --clr-support-400: #90A4AE;
    --clr-support-500: #78909C;
    --clr-support-600: #607D8B;
    --clr-support-700: #546E7A;
    --clr-support-800: #37474F;
    --clr-support-900: #263238;

    --clr-alert-50: #FCEBEE;
    --clr-alert-100: #F8CDD3;
    --clr-alert-200: #E59B9E;
    --clr-alert-300: #D77579;
    --clr-alert-400: #E15859;
    --clr-alert-500: #D64141;
    --clr-alert-600: #C4383B;
    --clr-alert-700: #B73334;
    --clr-alert-800: #A72B2A;
    --clr-alert-900: #841919;

    --clr-info-50: #E1F4F9;
    --clr-info-100: #B3E3F0;
    --clr-info-200: #83D1E7;
    --clr-info-300: #57BFDD;
    --clr-info-400: #38B2D9;
    --clr-info-500: #1AA5D5;
    --clr-info-600: #1097C7;
    --clr-info-700: #0085B5;
    --clr-info-800: #0174A2;
    --clr-info-900: #005581;


    /* ----- * ----- Spacing and layout ----- * ----- */
    --nav-item-height: 48px;

    /* ----- Spacers ----- */
    --spacer-1: .25rem;
    --spacer-2: .5rem;
    --spacer-3: 1rem;
    --spacer-4: 1.5rem;
    --spacer-5: 2rem;
    --spacer-6: 3rem;
    --spacer-7: 5rem;
    --spacer-8: 6rem;
    --spacer-9: 7.5rem;

    /* ----- Typography ----- */
    --font-family-heading: 'Gantari', sans-serif;
    --font-family-body: var(--font-family-heading);

    --font-size-body: 18px;
    --font-size-button: 16px;
    --font-size-label: 14px;

    --font-weight-headings: bold;
    --font-weight-subheadings: 600;
    --font-weight-body: normal;

    --font-size-heading-h1: clamp(3.5rem, 5vw + 1rem, 5rem);
    --font-size-heading-h2: clamp(2rem, 3vw + 1rem, 2.5rem);
    --font-size-heading-h3: 1.5rem;
    --font-size-heading-h4: 1.25rem;
    --font-size-heading-h5: 1rem;
    --font-size-heading-h6: .875rem;


    /* ----- Sections ----- */
    --section-border-radius: .625rem;
    --section-boxed-padding-block: var(--spacer-7);
    --section-boxed-padding-inline: var(--spacer-8);

    /* ----- Transitions ----- */
    --transition-general-fast: 0.2s ease-out 0s all;

    /* ----- Other ----- */
    --box-border-radius         : 100px;
    --box-backdrop-filter       : blur(8px);



    /* ----- * ----- Theme ----- * ----- */
    --body-bg-color                     : var(--clr-support-100);
    --body-bg-color-rgb-0               : rgba(236,239,241,0);

    /* ----- Colors ----- */
    --box-border-color                  : var(--clr-support-200);
    --box-background-color              : rgba(255, 255, 255, .64);

    --clr-gradient-hero-overlay-1-rgba  : rgba(255, 255, 255, .48);
    --clr-gradient-hero-overlay-2-rgba  : rgba(255, 255, 255, .1);
    --clr-gradient-hero-1-rgba          : rgba(161, 239, 238, 1);
    --clr-gradient-hero-2-rgba          : rgba(224, 182, 243, 1);
    --clr-gradient-hero-3-rgba          : rgba(255, 182, 0, 1);
    --clr-gradient-primary              : linear-gradient(90deg, var(--clr-primary-200) 0%, var(--clr-primary-700) 100%);

    --clr-hero-crossfade-base-rgb-0     : rgba(185, 236, 229, 0);
    --clr-hero-crossfade-base-rgb-1     : var(--clr-gradient-hero-1-rgba);
    --clr-hero-crossfade-1-rgba         : var(--clr-hero-crossfade-base-rgb-0);
    --clr-hero-crossfade-2-rgba         : var(--clr-hero-crossfade-base-rgb-1);
    --clr-hero-crossfade-3-rgba         : var(--clr-hero-crossfade-base-rgb-1);
    --clr-hero-crossfade-4-rgba         : var(--clr-hero-crossfade-base-rgb-0);


    /* ----- Typography ----- */
    --font-heading-color                : var(--clr-support-900);
    --font-body-color                   : var(--clr-support-700);
    --font-heading-accent-color         : var(--clr-primary-500);
    --font-link-color                   : var(--clr-primary-500);
    --font-link-color-hover             : var(--clr-primary-700);
    --font-link-color-active            : var(--clr-primary-900);

    /* ----- Buttons ----- */
    --btn-color                         : var(--font-body-color);

    --btn-color-primary                 : var(--clr-primary-50);
    --btn-color-primary-hover           : white;
    --btn-bg-color-primary              : rgba(0, 148, 134, .8);
    --btn-border-color-primary          : var(--clr-primary-500);

    --btn-color-secondary               : var(--font-body-color);
    --btn-color-secondary-hover         : var(--font-body-color);
    --btn-bg-color-secondary            : var(--box-background-color);
    --btn-border-color-secondary        : var(--box-border-color);
    --btn-border-color-secondary-hover  : var(--clr-primary-500);

    /* ----- Sections ----- */
    --section-content-bg                : white;
    --section-content-block-bg          : var(--clr-support-100);
}

/*
 * Hide some ZOHO stuff
 *
 */
#logoutDetails,
.SubscribeDepart__subs,
.ArticleDetailRightContainer__followContentLow,
#plusBtn,
.ArticleCmd__socialShareLt,
.Header__logotxt,
#portal_tabSolutions,
#logoutDetails,
.Header__menuClick,
.Header__defaultContent .Header__headerBg,
.Header__headerBg,
.LocalePopup__defaultLang,
.Footer__footer,
.LocalePopup__globeIcon {
    display: none !important;
}

/*
 * Alter some ZOHO stuff
 *
 */
.body {
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    color: var(--font-body-color);
    background-color: var(--clr-primary-50);
    position: relative;
    min-height: 100vh;
}

body::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

body::before {
    top: 0;
    background-image: linear-gradient(180deg, var(--clr-gradient-hero-overlay-1-rgba), var(--clr-gradient-hero-overlay-2-rgba) 100%), radial-gradient(ellipse at bottom center, var(--clr-gradient-hero-1-rgba), transparent 50%), radial-gradient(ellipse at top left, var(--clr-gradient-hero-2-rgba), transparent 50%), radial-gradient(ellipse at top right, var(--clr-gradient-hero-3-rgba), transparent 50%);
}

.container {
    height: auto !important;
}

.articleContent {
    text-align: left;
}

p,
.LocalePopup__localeTarget,
.ModuleItem__moduleDescription {
    color: var(--font-body-color);
}

a,
.CustomizeContainer__aPlus,
.BreadCrumbs__breadCrumbsLink,
.commonStyle__link {
    color: var(--clr-primary-500);
}

a:hover,
.BreadCrumbs__breadCrumbsLink:hover,
.commonStyle__link:hover {
    color: var(--clr-primary-700);
}

.articleContent div > span,
.articleContent div > p {
    font-size: 1em !important;
    color: var(--font-body-color);
}

.articleContent h1,
.articleContent h2,
.articleContent h3,
.articleContent h4,
.articleContent h5,
.articleContent h6 {
    color: var(--font-heading-color);
    margin-block-end: .25em;
}

.Header__bgColor,
.Header__homeNavbarFixed .Header__searchSubCont,
.Header__homeNavbarFixed .Header__searchLink {
    background-color: var(--body-bg-color) !important;
}

.SearchBox__searchpart input,
.KBSubCategoryContainer__boxView {
    border-color: var(--clr-support-200);
}

#searchContainer,
.SearchBox__searchpart,
.SearchBox__searchpart input {
    border-radius: var(--section-border-radius);
}

.Header__searchLink {
    box-shadow: none;
}

.SearchBox__searchpart input {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    transition: .2s ease-out;
}

.SearchBox__searchpart input:hover {
    border-color: var(--clr-primary-100);
}

.SearchBox__searchpart input:focus {
    border-color: var(--clr-primary-300);
    box-shadow: 0 3px 8px 0 rgba(0,0,0, 0.12);
}

#searchContainer {
    flex-grow: 1;
}

.BreadCrumbs__breadcrumbsView {
    color: var(--font-body-color);
}

.ArticleDetailLeftContainer__box,
.KBSubCategoryContainer__boxView {
    border-radius: var(--section-border-radius);
}

.KBSubCategoryContainer__boxView .ModuleItem__moduleItem:first-child {
    border-top-left-radius: var(--section-border-radius);
    border-top-right-radius: var(--section-border-radius);
}

.KBSubCategoryContainer__boxView .ModuleItem__moduleItem:last-child {
    border-bottom-left-radius: var(--section-border-radius);
    border-bottom-right-radius: var(--section-border-radius);
}

.ArticleDetailLeftContainer__contents p.ArticleDetailLeftContainer__description {
    line-height: 1.4;
    letter-spacing: 0px;
}

.Readingprogress__progressBar {
    background: var(--clr-gradient-primary);
}

.ModuleItem__moduleHeader {
    padding: var(--spacer-3);
}

.ModuleItem__moduleHeader .List__postdet {
    position: absolute;
    top: var(--spacer-3);
    right: var(--spacer-3);
}

.btn,
.LocalePopup__localeTarget {
    font-family: 'Gantari', sans-serif;
    font-size: var(--font-size-button);
    font-weight: 600;
    border-width: 1px !important;
    border-style: solid !important;
    display: inline-flex;
    align-items: center;
    gap: var(--spacer-3);
    padding-block: var(--spacer-3);
    padding-inline: var(--spacer-3);
    line-height: 1;
    scale: 1;

    color: var(--btn-color);

    border-color: var(--box-border-color) !important;
    background-color: var(--box-background-color);
    border-radius: var(--box-border-radius);
    -webkit-backdrop-filter: var(--box-backdrop-filter);
    backdrop-filter: var(--box-backdrop-filter);
}

.btn.btn-small,
.LocalePopup__localeTarget {
    padding-block: var(--spacer-2);
}

a.btn,
button.btn {
    cursor: pointer;
}

a.btn:hover,
button.btn:hover {
    opacity: 1 !important;
}

a.btn:active,
button.btn:active {
    scale: .98;
}

.btn.btn-primary {
    color: var(--btn-color-primary);
    border-color: var(--btn-border-color-primary) !important;
    background-color: var(--btn-bg-color-primary);
}

a.btn.btn-primary:hover,
button.btn.btn-primary:hover {
    color: var(--btn-color-primary-hover);
}

a.btn.btn-secondary,
button.btn.btn-secondary,
.LocalePopup__localeTarget {
    color: var(--btn-color-secondary);
    border-color: var(--btn-border-color-secondary) !important;
}

a.btn.btn-secondary:hover,
button.btn.btn-secondary:hover,
.LocalePopup__localeTarget:hover {
    color: var(--btn-color-secondary-hover);
    border-color: var(--btn-border-color-secondary-hover) !important;
}

.btn svg path {
    fill: currentColor;
}

.btn:has(svg) {
    padding-inline-start: var(--spacer-3);
}

/* Locale */
html[lang="nl"] [class*="display_if_en"],
html[lang="en"] [class*="display_if_nl"] {
    display: none !important;
}