:root {
    --font-name: 'IBM Plex Sans';
    --logo-width: 324px;
    --homepage-banner-image: url('/assets/brands/dtb/images/DTB_homepage_banner.webp');
    --homepage-background-color: #eef2fa;
    --page-max: 1200px;
    --page-padding-desktop: 50px;
    --page-padding-mobile: 30px;
    --footer-image: url('');
    --vacancy-card-title: #236ad4;
    --vacancy-card-title-hover: #1B48B1;
    --font-weight: 700;
    --font-size: 17px;
    --vacancy-card-icon-padding: 0%;
    --vacancy-card--hours-icon-padding: 0%;
    --vacancy-card-meta-padding: 70px;
    --banner-title-font-size: 55px;
    --meta-text-color: #06265A;
    --border-radius: 5px;
    --application-form-main-text-color: #ffffff;
    --application-form-background: #19136a;
    --rate-info-icon-color: #ffffff;
    --truncate-location-max-width: 15ch;

    /* Banner-bottom */
    --homepage-banner-h2-margin-top: 0px;
    --homepage-banner-app-vacancies-container-margin-top: -70px;
    --homepage-banner-bottom-box-subtitle-font-size: 30px;
    --homepage-banner-bottom-box-placeholder-color: #5E739C;
    --homepage-banner-placeholder-color: #5E739C;

    /* Banner-bottom-mobile */
    --homepage-banner-bottom-box-subtitle-font-size-mobile: 26px;
    --homepage-banner-bottom-box-subtitle-margin: 0 0 40px;
    --homepage-banner-distance-options-container-mobile: flex;

    /*Header-menu-desktop*/
    --logo-height: 82px;
    /* --logo-background-size: contain; */
    --logo-display: flex;

    --header-menu-background: rgba(255, 255, 255, 0.98);
    --header-menu-position: absolute;
    --header-menu-border-radius: 5px;
    --header-menu-margin: 40px 0 0 0;
    --header-menu-mobile-margin: 15px 0 0 0;
    /* --header-menu-width: 65%; */
    --header-menu-mobile-margin: 10px 0;
    --header-dropdown-panel-padding: 30px 0px 10px 0px;
    --header-dropdown-panel-min-width: 205px;

    /* This one */
    --header-menu-mat-toolbar-row-padding: 0 27px 0 27px;

    --header-menu-link-margin: 0 8px;
    --header-menu-link-color: #06265A;
    --header-menu-font-size: 17px;

    --header-menu-link-after-content: '';
    --header-menu-link-after-position: absolute;
    --header-menu-link-after-left: 1px;
    --header-menu-link-after-bottom: -27px;
    --header-menu-link-after-width: 0;
    --header-menu-link-after-height: 4px;
    --header-menu-link-after-background-color: #4FAFF7;
    --header-menu-link-after-transition: width 0.3s ease;

    --header-menu-link-login-border: 1px solid #D1DAF4;
    --header-menu-link-login-padding-left: 23px;
    --header-menu-link-login-display: inline-flex;
    --header-menu-link-login-justify-content: center;
    --header-menu-link-login-vertical-align: middle;
    --header-menu-link-login-margin-top: -3px;
    --header-menu-link-login-height: 40px;
    --header-menu-link-login-icon-color: #4FAFF7;
    --header-menu-link-login-icon-margin-right: -10px;

    /*Header-menu-mobile*/
    --header-menu-width-mobile: 93%;
    --header-menu-button-color: #02A5EA;
    --header-menu-button-margin-left: 25px;

    --header-menu-open-button-transform: scaleX(1.3);

    --header-menu-close-button-width: 14px;
    --header-menu-close-button-font-size: 10px;

    /* --header-logo-width: 250px; */
    --header-logo-height: 15px;
    /* --header-logo-margin-left: -20px; */
    --button-linear-gradient: #1F58DE;

    --mobile-menu-dropdown-logo-display: flex;
    --mobile-menu-position: static;
    --mobile-menu-inset: auto;
    --mobile-menu-bg: transparent;

    --mobile-menu-item-color: #011b46;
    --mobile-menu-item-font-size: 19px;
    --mobile-menu-item-margin: 16px 0 8px 20px;

    /* --mobile-subitem-color: #011b46; */
    /* --mobile-subitem-font-size: 15px; */
    /* --mobile-subitem-margin-bottom: 10px; */

    --mobile-logo-separator-display: block;
    --mobile-login-separator-height: 2px;
    --mobile-login-separator-bg: #e0e5ec;
    --mobile-login-separator-margin: 20px 0 ;

    /*vacancy shown as separate page*/
    --pre-footer-background-color: #b2dbff;
    --fotter-background-color: #32667c;
    --fotter-background-color: linear-gradient(
        90deg,
        #002c75 0%,
        #003079 20%,
        #003d85 40%,
        #005aa4 61%,
        #007ac1 83%,
        #0099da 100%
    );
    --mat-sidenav-content-background-color: white;

    /* Subscription-dialog */
    --page-dialogs-border-radius: 5px;
    --subscription-dialog-background: #ffffff;
    --subscription-dialog-title-color: transparent;
    --subscription-dialog-title-background: linear-gradient(
        90deg,
        #290075,
        #1ca9f8
    );
    --subscription-dialog-title-line-color: #d1daf4;
    --subscription-dialog-title-text-1: black;
    --subscription-dialog-title-text-2: #477589;
    --subscription-dialog-input-border: 1px solid #d1daf4;
    --subscription-dialog-input-background-color: #eef2fa;
    --subscription-dialog-input-inset-shadow: 0px 2px 2px 0px #aac0dfb2 inset;
    --subscription-dialog-close-icon-color: #5e739c;
    --subscription-dialog-save-button-background-color: linear-gradient(
        116.49deg,
        #26bfff 0%,
        #02a5ea 100%
    );
    --link-secondary-color: #1f58de;

    /* job-title */

    --job-title-banner-color: linear-gradient(
        90deg,
        #002c75 0%,
        #003079 20%,
        #003d85 40%,
        #005aa4 61%,
        #007ac1 83%,
        #0099da 100%
    );

    --job-title-header-color: #ffffff;
    --job-title-header-text-align: center;
    --job-title-header-margin-bottom: 75px;

    --banner-header-line-background-color: rgba(68, 68, 68, 0);
    --container-job-title-desktop-width: 73%;

    --vacancy-details-info-color: #06265a;
    --vacancy-details-info-heading-font-size: 21px;

    --summary-card-border: 1px solid #d1daf4;
    --summary-card-border-radius: 5px;
    --summary-card-title-color: #5e739c;
    --summary-card-content-color: #5e739c;

    --vacancies-column-margin-top: -70px;
    --vacancies-column-margin-top-mobile: -270px;

    /* Company-page */
    --company-page-banner-color: linear-gradient(
        90deg,
        #002c75 0%,
        #003079 20%,
        #003d85 40%,
        #005aa4 61%,
        #007ac1 83%,
        #0099da 100%
    );

    --company-header-color: #ffffff;
    --company-header-text-align: center;
    --company-header-margin-top: 0;
    --company-header-margin-right: 120px;
    --company-header-margin-bottom: 75px;
    --company-header-margin-mobile: 15px 0;
    --company-banner-min-height: 400px;
    --container-company-desktop-width: 73%;
    --company-banner-line-background-color: rgba(255, 255, 255, 0);

    --company-logo-frame-border: 1px solid #d9dff1;
    --company-logo-frame-border-radius: 5px;

    --company-vacancies-column-margin-top: -60px;
    --company-vacancies-column-margin-top-mobile: -300px;
    --company-vacancies-font-size: 21px;

    --more-confeti-display: inline-flex;

    --link-font-color: #1f58de;

    --upload-button-color: var(--button-linear-gradient);
    --verstuur_button_alignment: flex-end;

    --error-message-color: #ffb30f;

    --selected-vacancy-accent-bar-width: 8px;
    --selected-vacancy-accent-bar-color: #ffb30f;

    /* Vacancy-details-page */
    --vacancy-details-page-banner-color: linear-gradient(
        90deg,
        #002c75 0%,
        #003079 20%,
        #003d85 40%,
        #005aa4 61%,
        #007ac1 83%,
        #0099da 100%
    );
    --vacancy-details-button-color: #19136a;
    --vacancy-details-banner-button-margin-right: 0;
    --vacancy-details-banner-subtitle-font-size: 25px;

    /* Dashboard-page */
    --banner-margin-top: 70px;
    --banner-height: 120px;

    /* Footer */
    --footer-font-color: #06265a;
    --footer-font-size: 20px;
    --footer-logo-width: 356px;
    --footer-logo-height: 20px;
    --footer-logo-mobile-width: 260px;
    --footer-logo-mobile-height: 15px;
    --footer-desc-font-color: #d3ddf6;
    --footer-desc-margin-top: 7px;
    --footer-links-margin-top: 60px;
    --footer-links-font-color: #ffffff;
    --footer-link-hover-color: #ffffff;
    --footer-link-hover-text-decoration: underline;
    --footer-links-right-font-color: #d3ddf6;
    --footer-mobile-margin-bottom: -20px;
    --vacancy-cards-mobile-viewport-margin-bottom: -250px;
    --summary-section-margin-top: -250px;
    --footer-inner-grid-template-columns: 2.5fr 0.8fr 1fr;
    --footer-links-right-ul-pointer-events: none;
    --footer-links-right-gap: 40px;
}

/* container */

/* groepjes (oude "meta-col"): 2 items onder elkaar */
.vacancy-meta__group {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

/* itemregel (oude "meta-item") */
.vacancy-meta__item {
    display: flex;
    align-items: center;
    font-size: 19px;
    gap: 8px;
    min-width: 0;
}

.vacancy-meta__group:last-child {
    justify-content: space-between;
}

.vacancy-meta__item:has(.truncate-location) {
    align-items: flex-start;
}

.vacancy-meta__item:has(.truncate-location) .meta-icon {
    margin-top: 2px;
}

/* acties rechts, onder elkaar */
.vacancy-meta__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-left: 16px;
    margin-right: 0;
}

.vacancy-meta__actions .apply-link {
    padding-bottom: 5px;
}

.upload-cv-button {
    --link-font-color: #06b4ff;
}

/* WHY here? application-form-notice-box */

/*The notice above job description should be 19px*/
.vacancy-right .application-form-notice-box {
    --notice-font-size: 19px !important;
}

/*The word 'Let op!' should be 17px*/
.application-form-notice {
    --notice-font-size: 17px;
}

.vacancy-container {
    --application-form-background: #eef2fa;
    --application-form-main-text-color: #06265a;
    --rate-info-icon-color: #5e739c;
}

.rate-info-tooltip {
    background-color: #eef2fa;
    color: #06265a;
    font-size: 17px;
    font-weight: 400;
    border-radius: 15px;
    padding: 5px;
}

/* WHY here? application-form-notice-box */

.application-form-notice-box {
    /* margin-top: 20px; */
    border-left: 5px solid #ffb30f;
}

span.rate-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

/* BANNER - DESKTOP */

.homepage-banner-title {
    color: transparent !important;
}

.homepage-banner-title br,
.homepage-line,
.orange-box {
    display: none !important;
}

@media (max-width: 768px) {
    /* .cdk-overlay-pane {
        transform: translateX(-26px) !important;
        margin-top: 4px;
        margin-bottom: 4px;
    } */
}

.vacancy-cards-desktop-viewport.custom-scroll-viewport::-webkit-scrollbar-thumb,
.vacancy-cards-mobile-viewport.custom-scroll-viewport::-webkit-scrollbar-thumb {
    background: #cfd6df !important;
}

.vacancy-cards-desktop-viewport.custom-scroll-viewport::-webkit-scrollbar-thumb:hover,
.vacancy-cards-mobile-viewport.custom-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: #b9c3cf !important;
}

.container-vacancy-card .meta-text {
    font-size: 17px;
    font-weight: 400;
    color: red;
}

.vacancy_selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: #f2b01e !important;
}

.vacancy-meta__item .meta-icon {
    font-size: 19px !important;
    color: #06265a;
    height: 19px !important;
    flex-shrink: 0;
}

.meta-row .meta-icon {
    font-size: 17px !important;
    color: #06265a;
    width: 18px;
    height: 18px;
}

.meta-row .meta-text {
    font-size: 17px !important;
    color: #06265a;
}

.dtb-freelance-row {
    font-size: 15px;
    font-weight: 400;
    color: #5E739C;
    padding-top: 15px;
}

/* Vacancy-cards - Mobile*/

@media (max-width: 900px) {
    .email-alert-button-layout {
        margin-top: 60px !important;
    }
}

.vacancy-meta-grid {
    grid-template-areas:
        'loc  date'
        'hours  rate';
}

/*The organisation name in the grid should be hidden, since it should be shown in vacancy-top*/
.vacancy-meta-grid .m-org {
    display: none;
}

.vacancy-header.m-org {
    font-size: 17px;
}