:root {
    /* -=- Positioning & Display -=- */
    /* Gap */
    --gap-tiny: 0.25rem;
    --gap-extra-small: 0.5rem;
    --gap-small: 0.75rem;
    --gap-medium: 1rem;
    --gap-large: 1.5rem;
    --gap-extra-large: 2rem;
    --gap-xxl: 3rem;

    /* -=- Dimensions, marges, padding and borders -=- */
    /* Marges */
    --margin-tiny: 0.25rem;
    --margin-extra-small: 0.5rem;
    --margin-small: 0.75rem;
    --margin-medium: 1rem;
    --margin-large: 1.5rem;
    --margin-extra-large: 2rem;
    --margin-xxl: 3rem;

    /* Padding */
    --padding-tiny: 0.25rem;
    --padding-extra-small: 0.5rem;
    --padding-small: 0.75rem;
    --padding-medium: 1rem;
    --padding-large: 1.5rem;
    --padding-extra-large: 2rem;
    --padding-xxl: 3rem;

    /* Border radius */
    --border-radius-small: 0rem;
    --border-radius-medium: 0rem;
    --border-radius-large: 0rem;
    --border-radius-rounded: 0rem;
	--bs-border-radius: var(--border-radius-medium);
	--bs-border-radius-lg: var(--border-radius-large);

    /* Border width */
    --border-width-regular: 0.0625rem;
    --border-width-thick: 0.125rem;

    /* Border color */
    --border-color-default: #E7E5F1;

    /* -=- Typography -=- */
    /* Font size */
    --font-size-heading-1: 2.5rem;
    --font-size-heading-2: 2rem;
    --font-size-heading-3: 1.5rem;
    --font-size-heading-4: 1.3125rem;
    --font-size-heading-5: 1.3125rem;
    --font-size-paragraph: 1.125rem;
    --font-size-paragraph-small: 1rem;
    --font-size-small: 0.75rem;
    --font-size-table-heading: 0.875rem;
    --font-size-table-footer: 0.875rem;
    --font-size-button: 1rem;
    --font-size-button-small: 0.8125rem;

    /* Font family */
    --font-family-primary: 'Fixture';
    --font-family-secondary: 'Helvetica';
    --font-family-tertiary: 'Montserrat';


    /* -=- Visual effects and animations -=- */
    /* Shadows */
    --shadow-shallow: 0 0 0 0 rgba(0, 0, 0, 0);
    --shadow-deep: 0 0 0 0 rgba(0, 0, 0, 0);

    /* -=- Other -=- */
    /* Aspect ratio */
    --image-aspect-ratio-default: 16 / 9;

    /* Colors */
    --color-body: #000000;
    --color-primary: #6C8CC7;
    --color-primary-subtle: #6C8CC7;
    --color-primary-border: #9BB1D9;
    --color-primary-text: #ffffff;
    --color-secondary: #A3A3A3;
    --color-secondary-subtle: #DADADA;
    --color-secondary-border: #C3C3C3;
    --color-secondary-text: #000000;
    --color-tertiary: #D6DFEF;
    --color-tertiary-subtle: #F0F3F9;
    --color-tertiary-border: #E3E9F4;
    --color-tertiary-text: #000000;
    --color-emphasis: #6688ED;
    --color-success: #59A76D;
    --color-success-subtle: #59A76D;
    --color-success-border: #8EC39C;
    --color-success-text: #ffffff;
    --color-danger: #F26641;
    --color-danger-subtle: #F26641;
    --color-danger-border: #F6977E;
    --color-danger-text: #FFFFFF;
    --color-warning: #FFC233;
    --color-warning-subtle: #FFC233;
    --color-warning-border: #FFD674;
    --color-warning-text: #000000;
    --color-info: #F26641;
    --color-info-subtle: #FAC8BB;
    --color-info-border: #F6977E;
    --color-info-text: #CB5637;
    --color-light: #F4F6FB;
    --color-light-subtle: #FFFFFF;
    --color-light-border: #DDE4F2;
    --color-light-text: #9298A3;
    --color-dark: #000000;
    --color-dark-subtle: #000000;
    --color-dark-border: #CFCFCF;
    --color-dark-text: #7A7A7A;
    --color-border: #EEEEEE;

    --color-primary-tint-10: #DDE4F2;
    --color-primary-tint-50: #D6DFEF;
    --color-primary-tint-100: #6C8CC7;
    --color-primary-tint-200: #B3C3E2;
    --color-primary-tint-300: #9BB1D9;
    --color-primary-tint-400: #849ED0;
    --color-primary-tint-500: #6C8CC7;
    --color-primary-tint-600: #6C8CC7;
    --color-primary-tint-700: #495F87;
    --color-primary-tint-800: #384967;
    --color-primary-tint-900: #273248;
    --color-secondary-tint-10: #FFFFFF;
    --color-secondary-tint-50: #EBEBEB;
    --color-secondary-tint-100: #DADADA;
    --color-secondary-tint-200: #CFCFCF;
    --color-secondary-tint-300: #C3C3C3;
    --color-secondary-tint-400: #B8B8B8;
    --color-secondary-tint-500: #A3A3A3;
    --color-secondary-tint-600: #7A7A7A;
    --color-secondary-tint-700: #525252;
    --color-secondary-tint-800: #292929;
    --color-secondary-tint-900: #000000;
    --color-tertiary-tint-10: #F6F7FC;
    --color-tertiary-tint-50: #F4F6FB;
    --color-tertiary-tint-100: #F0F3F9;
    --color-tertiary-tint-200: #EAEEF7;
    --color-tertiary-tint-300: #E3E9F4;
    --color-tertiary-tint-400: #DDE4F2;
    --color-tertiary-tint-500: #D6DFEF;
    --color-tertiary-tint-600: #B4BBC9;
    --color-tertiary-tint-700: #9298A3;
    --color-tertiary-tint-800: #6F747C;
    --color-tertiary-tint-900: #4D5056;
    --color-success-tint-10: #D8EADD;
    --color-success-tint-50: #D1E6D6;
    --color-success-tint-100: #59A76D;
    --color-success-tint-200: #A9D1B3;
    --color-success-tint-300: #8eC39C;
    --color-success-tint-400: #74B584;
    --color-success-tint-500: #59A76D;
    --color-success-tint-600: #4B8C5C;
    --color-success-tint-700: #3D724A;
    --color-success-tint-800: #2E5739;
    --color-success-tint-900: #203C27;
    --color-danger-tint-10: #FCDBD2;
    --color-danger-tint-50: #FBD4CA;
    --color-danger-tint-100: #F26641;
    --color-danger-tint-200: #F8AF9C;
    --color-danger-tint-300: #F6977E;
    --color-danger-tint-400: #F47E5F;
    --color-danger-tint-500: #F26641;
    --color-danger-tint-600: #CB5637;
    --color-danger-tint-700: #A5452C;
    --color-danger-tint-800: #7E3522;
    --color-danger-tint-900: #572517;
    --color-warning-tint-10: #FFF1CF;
    --color-warning-tint-50: #FFEEC6;
    --color-warning-tint-100: #FFC233;
    --color-warning-tint-200: #FFDF95;
    --color-warning-tint-300: #FFD674;
    --color-warning-tint-400: #FFCC54;
    --color-warning-tint-500: #FFC233;
    --color-warning-tint-600: #D6A32B;
    --color-warning-tint-700: #AD8423;
    --color-warning-tint-800: #85651B;
    --color-warning-tint-900: #5C4612;
    --color-info-tint-10: #FCDBD2;
    --color-info-tint-50: #FBD4CA;
    --color-info-tint-100: #F26641;
    --color-info-tint-200: #F8AF9C;
    --color-info-tint-300: #F6977E;
    --color-info-tint-400: #F6977E;
    --color-info-tint-500: #F26641;
    --color-info-tint-600: #CB5637;
    --color-info-tint-700: #A5452C;
    --color-info-tint-800: #7E3522;
    --color-info-tint-900: #572517;
    --color-light-tint-10: #FFFFFF;
    --color-light-tint-10-rgba: rgba(255,255,255,1);
    --color-light-tint-50: #F4F6FB;
    --color-light-tint-100: #F0F3F9;
    --color-light-tint-200: #EAEEF7;
    --color-light-tint-300: #E3E9F4;
    --color-light-tint-400: #DDE4F2;
    --color-light-tint-500: #D6DFEF;
    --color-light-tint-600: #B4BBC9;
    --color-light-tint-700: #9298A3;
    --color-light-tint-800: #6F747C;
    --color-light-tint-900: #4D5056;
    --color-dark-tint-10: #EEEEEE;
    --color-dark-tint-50: #EBEBEB;
    --color-dark-tint-100: #E5E5E5;
    --color-dark-tint-200: #DADADA;
    --color-dark-tint-300: #CFCFCF;
    --color-dark-tint-400: #C3C3C3;
    --color-dark-tint-500: #A3A3A3;
    --color-dark-tint-600: #7A7A7A;
    --color-dark-tint-700: #000000;
    --color-dark-tint-800: #292929;
    --color-dark-tint-900: #000000;

    /* Newsletter colors */
    --color-examenblad: #007bc7;
    --image-examenblad: url('../images/sources/logo_bron_rijksoverheid.png');
    --color-nos: #c00;
    --image-nos: url('../images/sources/logo_bron_nos.png');
    --color-telegraaf: #27509a;
    --image-telegraaf: url('../images/sources/logo_bron_telegraaf.png');
    --color-parool: #111;
    --image-parool: url('../images/sources/logo_bron_parool.png');
    --color-volkskrant: #3f97aa;
    --image-volkskrant: url('../images/sources/logo_bron_volkskrant.png');
    --color-ad: #d10a10;
    --image-ad: url('../images/sources/logo_bron_ad.png');
    --color-rijksoverheid: #01689b;
    --image-rijksoverheid: url('../images/sources/logo_bron_rijksoverheid.png');
    --color-nrc: #000;
    --image-nrc: url('../images/sources/logo_bron_nrc.png');
    --color-trouw: #95885f;
    --image-trouw: url('../images/sources/logo_bron_trouw.png');
    --color-rtlnieuws: #b3d4fc;
    --image-rtlnieuws: url('../images/sources/logo_bron_rtlnieuws.png');
    --color-nu: #010050;
    --image-nu: url('../images/sources/logo_bron_nu.png');
    --color-hartvannederland: #008cff;
    --image-hartvannederland: url('../images/sources/logo_bron_hartvannederland.png');
    --color-omroepbrabant: #e00;
    --image-omroepbrabant: url('../images/sources/logo_bron_omroepbrabant.png');
    --color-leeuwardercourant: #5059b3;
    --image-leeuwardercourant: url('../images/sources/logo_bron_leeuwardercourant.png');
    --color-degelderlander: #d10a10;
    --image-degelderlander: url('../images/sources/logo_bron_degelderlander.png');
    --color-tubantia: #d10a10;
    --image-tubantia: url('../images/sources/logo_bron_tubantia.png');
    --color-bndestem: #d10a10;
    --image-bndestem: url('../images/sources/logo_bron_bndestem.png');
    --color-metronieuws: #34c600;
    --image-metronieuws: url('../images/sources/logo_bron_metronieuws.png');
    --color-nhnieuws: #0ba3e1;
    --image-nhnieuws: url('../images/sources/logo_bron_nhnieuws.png');

    /* Fonts */
    --fontawesome-fontname: "Font Awesome 5 Free";

    /* System variables */
    --preheader-background: var(--color-dark-tint-900);
    --preheader-color: var(--color-light-tint-10);

    --homepage-band-color: var(--color-secondary-tint-500);
}

/* Custom fixes for Studio BX */
/* Problem lies in the fact that btn-secondary uses tertiary colors on Methode M & MXPRIME */
.btn-secondary {
    --background-color: var(--color-secondary-tint-10);
    --border-color: var(--color-secondary-tint-900);
}

.header-lesson-buttons__check-request--rejected {
    background-color: transparent;
}

.header-lesson-buttons__check-request--pending {
    background-color: transparent;
}

.header-lesson-buttons__check-request--approved {
    background-color: transparent;
}

.header-lesson-buttons__action-btn {
    background-color: transparent;
    cursor: pointer;
}

.header-lesson-buttons__action-btn:hover {
    background-color: var(--color-primary-tint-400);
}

.header-lesson-buttons__action-btn--pdf {
    background-color: transparent;
    cursor: pointer;
}

.header-lesson-buttons__action-btn--pdf:hover {
    background-color: var(--color-danger-tint-400);
}

.avatar__wrapper .avatar__image:hover {
    background-color: var(--color-primary-tint-500);
}

body .footer {
    border-top:1px solid var(--color-dark-tint-900);
    background: var(--color-dark-tint-900);
    color: var(--color-light-tint-10);
}

footer .footer__content a {
  color: var(--color-light-tint-10);
}

footer .footer__content a:hover {
  color: var(--color-emphasis);
}