/* Define nav bar colour variables for brand */
body {
    --ou-digital-mid-blue: #1f55a5;
    --vle-yellow: #facb4e;
    --ou-digital-yellow: #fdf289;
    --ou-digital-core-brand-blue: #24285c;
    --ou-digital-core-brand-blue-alternative-90pc: #4e478e;
    --vle-grey-superlight: #b3b3b3;
    --vle-blue-fairly-dark: #3a3381;
    --vle-purple-borders: #d8d6e6;
    --vle-blue-fairly-dark-10pc: #ebeaf2;
    --vle-blue-old-focus: #0a3c75;

    --filter-24285c: brightness(0) invert(0.642) sepia(1) hue-rotate(198deg) brightness(0.217) saturate(4.5);
    --filter-29245a: brightness(0) invert(0.642) sepia(1) hue-rotate(206deg) brightness(0.205) saturate(4.75);
    --filter-000000: brightness(0) saturate(100%);
    --filter-191c40: brightness(0) invert(0.642) sepia(1) hue-rotate(197deg) brightness(0.152) saturate(4.45);
    --filter-3a3381: brightness(0) invert(0.642) sepia(1) hue-rotate(206deg) brightness(0.293) saturate(4.76);
    --filter-ffffff: brightness(0) saturate(100%) invert(100%);
    --filter-636363: brightness(0) invert(0.642) sepia(1) hue-rotate(0deg) brightness(0.498) saturate(0);
    --filter-1f55a5: brightness(0) invert(0.642) sepia(1) hue-rotate(176.5deg) brightness(0.399) saturate(4.86);

    --vle-background: #e9eef6;

    --vle-header-stripe: white;
    --vle-header-stripe-text: var(--ou-digital-core-brand-blue);
    --vle-header-stripe-selected: #f05937;
    --vle-header-stripe-selected-text: var(--vle-header-stripe-text);
    --vle-header-stripe-hover: var(--ou-digital-core-brand-blue);
    --vle-header-stripe-filter: var(--filter-24285c);
    --vle-header-stripe-focus: var(--vle-blue-old-focus);

    --vle-module-pres: var(--vle-blue-fairly-dark);
    --vle-progress-bar: #3f887d;
    --vle-sections-border: var(--vle-purple-borders);
    --vle-sections-insert-background: #37317c;
    --vle-future-section-header: #eff9f7;
    --vle-generic-section-header: #e6e6e6;
    --vle-generic-section-text: #4d4d4d;
    --vle-block-border: #d8d6e6;
    --vle-block-header: #615c9a;
    --vle-block-header-hover: #3a3381;
    --vle-unselected-tab: #666666;
    --vle-staff-block: var(--vle-unselected-tab);
    --vle-staff-block-hover: #333333;
    --vle-link-hover: #29245a;
    --vle-link-normal: var(--ou-digital-mid-blue);
    --vle-link-other-type: var(--vle-blue-fairly-dark);
    --vle-link-list-rule: var(--vle-block-border);
    --vle-assessment-orange: #f9a034;
    --vle-assessment-orange-past: #eabb82;
    --vle-grey-background: #f4f7fa;

    --vle-button-normal: var(--vle-blue-fairly-dark);
    --vle-button-normal-background: white;
    --vle-button-normal-text: var(--ou-digital-core-brand-blue);
    --vle-button-normal-filter: var(--filter-24285c);
    --vle-primarybutton-normal-background: var(--vle-button-normal);
    --vle-primarybutton-normal-text: white;
    --vle-primarybutton-normal-filter: var(--filter-ffffff);
    --vle-button-hover: var(--vle-blue-fairly-dark-10pc);
    --vle-button-hover-text: #29245a;
    --vle-button-hover-filter: var(--filter-29245a);
    --vle-primarybutton-hover: var(--vle-button-hover-text);
    --vle-primarybutton-hover-text: white;
    --vle-primarybutton-hover-filter: var(--filter-ffffff);
    --vle-button-active: var(--vle-purple-borders);
    --vle-button-active-text: #191c40;
    --vle-button-active-filter: var(--filter-191c40);
    --vle-primarybutton-active: var(--vle-button-active-text);
    --vle-primarybutton-active-text: white;
    --vle-primarybutton-active-filter: var(--filter-ffffff);
    --vle-button-focus: var(--ou-digital-yellow);
    --vle-button-focus-text: black;
    --vle-button-focus-filter: var(--filter-000000);
    --vle-button-disabled: #ccc;
    --vle-button-disabled-text: var(--ou-digital-core-brand-blue);
    --vle-button-disabled-filter: var(--filter-29285c);

    --vle-modal-border: var(--vle-blue-fairly-dark);
    --vle-modal-header: var(--vle-purple-borders);
    --vle-modal-header-text: var(--ou-digital-core-brand-blue);
    --vle-modal-header-filter: var(--filter-24285c);
    --vle-modal-focus: var(--ou-digital-yellow);

    --vle-activity-tab-unselected: #bfcce2;
    --vle-activity-tab-unselected-transparent: #bfcce200;
    --vle-activity-tab-outline: #6288c0;
    --vle-activity-tab-hover-border: var(--ou-digital-mid-blue);

    --vle-oucontent-contents-rules: var(--vle-purple-borders);

    --vle-green-box-background: #eff9f7;
    --vle-green-box-stripe: #287755;
    --vle-green-box-heading: #002158;

    --vle-section-rule: #bfe2ef;
    --vle-section-heading: #002158;

    --vle-hidden-background: repeating-linear-gradient(-45deg, transparent, transparent 20px,
    rgba(255,255,255,0.25) 20px, rgba(255,255,255,0.25) 25px);

    /* Left/right padding around page */
    --vle-page-padding: 66px;
    /* Padding inside page when it has a backgrounded area (33px - 2px border) */
    --vle-page-inner-padding: 31px;
    /* Width of right blocks */
    --vle-right-block-width: 318px;
    /* Width of right blocks on course page */
    --vle-right-block-width-course: 275px;
    /* Spacing between main column and right blocks */
    --vle-right-block-spacing: 48px;
    /* Spacing above right blocks */
    --vle-right-blocks-above: 109px;
    /* Spacing between left blocks and main column */
    --vle-left-block-spacing: 66px;
    /* For use on areas of text in very wide containers, so lines of text don't get too long. */
    --vle-readable-width-limit: 625px;
    /* Margin between page border and start of left blocks */
    --vle-left-block-margin: var(--vle-page-inner-padding);
    /* Spacing above blocks at bottom */
    --vle-bottom-blocks-above: 40px;
    /* Gap between columns for multicolumn blocks */
    --vle-blocks-column-gap: 20px;
    /* Spacing above bottom buttons (most pages) */
    --vle-bottom-buttons-padding: 30px;
    /* Spacing from top of area to start of main content */
    --vle-top-padding: 33px;
    /* Padding at top of backgrounded area in page */
    --vle-page-inner-top-padding: 14px;
    /* Padding at bottom of backgrounded area in page */
    --vle-page-inner-bottom-padding: 60px;
    /* Extra spacing at bottom of page before footer */
    --vle-bottom-padding: 60px;
    /* Left/right padding in side blocks. */
    --vle-block-inner-padding: 16px;
    --vle-block-bottom-padding: 24px;
    --vle-block-top-padding: 16px;
    /* Margin between blocks */
    --vle-block-bottom-margin: 40px;
    /* Margin between activity tabs */
    --vle-activity-tab-spacing: 5px;
    /* Padding above and below activity icon (visual) */
    --vle-activity-padding-above: 16px;
    --vle-activity-padding-below: 16px;
    /* Space between page tool icons (visual) */
    --vle-page-tool-spacing: 40px;

    /* Left column is same width as activity tab. The 4px is left + right borders below, 2px is
      left border. We calculate this using 100vw minus page padding rather than 100% of the actual
      main width at that point, because now the variable can be used in all locations.
      The hardcoded -0.25px here is to make it very slightly narrower same as it would be if it
      rounds, in certain situations that broke CI server behat tests - the rounded one below should
      be used normally. */
    --vle-left-col-width: calc((min(100vw, 1280px) - 2 * var(--vle-page-padding) + var(--vle-activity-tab-spacing))/4 - var(--vle-activity-tab-spacing) - 2px - 0.25px);
}
@supports (width: round(100.1px, 1px)) {
    body {
        /* Rounding means we don't have subpixel positioning. If browser is old and does not support
           round(), the line from above will work and we can just cope with subpixels. */
        --vle-left-col-width: round(calc((min(100vw, 1280px) - 2 * var(--vle-page-padding) + var(--vle-activity-tab-spacing))/4 - var(--vle-activity-tab-spacing) - 2px), 1px);
    }
}

@media (max-width: 1023px) {
    body {
        --vle-page-padding: 32px;
        --vle-page-inner-padding: 22px;
        --vle-right-block-width: 238px;
        --vle-right-block-width-course: 238px;
        --vle-right-block-spacing: 40px;
        --vle-left-block-spacing: 16px;
        --vle-left-block-margin: var(--vle-block-inner-padding);
    }
}

@media (max-width: 767px) {
    body {
        --vle-page-padding: 16px;
        --vle-top-padding: 16px;
        --vle-block-bottom-margin: 20px;
    }
}
