:root, *::before, *::after {
    /* -- Manage colors - default value -- */
    --tekstramme-palette-1: #b8a832;
    --tekstramme-palette-2: #276681;
    --tekstramme-palette-3: #357d57;
    --tekstramme-palette-4: #6590e7;
    --tekstramme-palette-5: #fd4F57;
    --tekstramme-palette-6: #ab5b3c;
    --tekstramme-palette-7: #ffda48;
    --tekstramme-palette-8: #ffffff;
    --tekstramme-palette-9: #ffffff;
    --tekstramme-palette-10: #ffffff;
    --seksjonside-palette-1: #b8a832;
    --seksjonside-palette-2: #276681;
    --seksjonside-palette-3: #357d57;
    --seksjonside-palette-4: #6590e7;
    --seksjonside-palette-5: #fd4F57;
    --seksjonside-palette-6: #ab5b3c;
    --seksjonside-palette-7: #ffda48;
    --seksjonside-palette-8: #ffffff;
    --seksjonside-palette-9: #ffffff;
    --seksjonside-palette-10: #ffffff;
    --nettstedspalett-farge-1: #3381C1;
    --nettstedspalett-farge-2: #E86F42;
    --nettstedspalett-farge-3: #99c0e0;
    --nettstedspalett-farge-4: #c2d9ec;
    --nettstedspalett-farge-5: #e0ecf6;
    --nettstedspalett-farge-6: #ecdcc2;
    --nettstedspalett-farge-7: #fcede0;
    --nettstedspalett-farge-8: #ecc7c2;
    --nettstedspalett-farge-9: #f6e2e0;
    --nettstedspalett-farge-10: #f3b7a0;
    --nettstedspalett-farge-11: #d1f9d6;
    --nettstedspalett-farge-12: #e4fce3;
    /* -- Manage colors end -- */
}

body, *::after, *::before {
    /* -- Typography -- */
        --r4-font-size-body: 1em;
        --r4-font-size-main-content: inherit;
        --r4-content-font-family-2: Roboto Slab;
        --r4-content-font-family-1: Roboto;
        --r4-content-font-family-serif-1: 'PT Serif', serif;
        --r4-line-height-xxlg: 2;
        --r4-line-height-xlg: 1.5;
        --r4-line-height-lg: 1.3;
        --r4-line-height-base: 1.1;
        --r4-font-weight-heavy: 600;
        --r4-font-weight-semi-heavy: 500;
        --r4-font-weight-normal: 400;
        --r4-font-weight-light: 300;
        --r4-font-size-scaler-default: 4vw;
        --r4-font-size-smaller: .875em;
        --r4-font-size-small: 1em;
        --r4-font-size-base: 1.125em;
        --r4-font-size-large: 1.5em;
        --r4-font-size-larger: 1.75em;
        --r4-font-size-largest: 2em;
        --r4-font-size-headline-1: 2em;
        --r4-font-size-headline-2: 1.75em;
        --r4-font-size-headline-3: 1.4em;
        --r4-font-size-headline-4: 1.125em;
        --r4-font-size-system-headline-1: 1.25em;
        --r4-font-size-system-headline-2: 1.125em;
        --r4-font-size-text-1: 1.125em;
        --r4-font-size-button-text-1: 1em;
        --r4-font-size-image-text-1: 1em;
        --r4-copyright-text-1: .875em;
        --r4-font-size-menu-title-1: 1em;
        --r4-font-size-menu-text-1: 1em;
        --r4-font-size-list-title-1: 1.125em;
        --r4-font-size-list-text-1: .875em;
        --r4-font-size-form-label-1: 1.125em;
        --r4-font-size-form-value-1: 1.125em;
        --r4-font-size-form-helper-1: .875em;
        --r4-letter-spacing-default: 0%;
        --r4-paragraph-spacing-default: 0;
        --r4-text-case-default: none;
        --r4-text-decoration-default: none;
        /* -- Typography end -- */

        /* -- Colors -- */
        --r4-primary-color: var(--nettstedspalett-farge-1);
        --r4-secondary-color: var(--nettstedspalett-farge-2);
        --r4-color-on-primary: #000;
        --r4-secondary-color: var(--nettstedspalett-farge-2);
        --r4-color-on-secondary: #000;
        --r4-interaction-color: #318185;
        --r4-correct-color: #D0ECA9;
        --r4-incorrect-color: #FFA0A0;
        --r4-rating-low-color: #FFA0A0;
        --r4-rating-neutral-color: #FFE497;
        --r4-rating-high-color: #D0ECA9;
        --r4-teacher-color: #0beefd;
        --r4-warning-color: #FFE497;
        --r4-notification-color: var(--r4-teacher-color);
        --splash-svg-fill: #fff;

        /* Standard colors */
        --r4-standard-color-yellow: #FFE500;
        --r4-standard-color-yellow-light: #FFF6A7;
        --r4-standard-color-yellow-dark: #8F7106;

        --r4-standard-color-red: #FF0000;
        --r4-standard-color-red-light: #FFE6E6;
        --r4-standard-color-red-dark: #D20202;

        --r4-standard-color-violet: #B31AFF;
        --r4-standard-color-violet-light: #EDD8F9;
        --r4-standard-color-violet-dark: #8513BE;

        --r4-standard-color-green: #5DBC7D;
        --r4-standard-color-green-light: #D0E9D8;
        --r4-standard-color-green-dark: #3D8053;

        --r4-standard-color-blue: #0089FF;
        --r4-standard-color-blue-light: #CCE7FF;
        --r4-standard-color-blue-dark: #0262B5;

        --r4-standard-color-cyan: #00CCFF;
        --r4-standard-color-cyan-light: #CAEFF8;
        --r4-standard-color-cyan-dark: #047B99;

        --r4-standard-color-orange: #FF7A00;
        --r4-standard-color-orange-light: #FFCA99;
        --r4-standard-color-orange-dark: #B65903;

        --r4-standard-color-greenyellow: #BFEB44;
        --r4-standard-color-greenyellow-light: #DFF5A1;
        --r4-standard-color-greenyellow-dark: #657C27;

        /* Section */
        --r4-mini-promo-content-background: #fff;
        --r4-node-content-background: var(--nettstedspalett-farge-5);
        --r4-promo-content-background: var(--nettstedspalett-farge-1);
        /* Begreper */
        --r4-begrep-header-background: var(--nettstedspalett-farge-4);
        --r4-begrep-content-background: var(--nettstedspalett-farge-5);
        /* Footer */
        --r4-footer-background-color: var(--nettstedspalett-farge-1);
        /* lesson summary */
        --r4-lesson-summary-expanded-background: var(--nettstedspalett-farge-3);
        --r4-lesson-summary-recommended-background: var(--nettstedspalett-farge-3);
        /* lesson intro */
        --r4-lesson-intro-lp-heading-background: var(--nettstedspalett-farge-11);
        --r4-lesson-intro-meta-background: var(--nettstedspalett-farge-3);
        --r4-lesson-intro-lp-background: var(--nettstedspalett-farge-10);
        /* Button */
        --r4-button-background-color-default: #000;
        --r4-button-text-color-default: #fff;
        --r4-button-border-color-default: #000;
        --r4-button-background-color-default-hover: #fff;
        --r4-button-text-color-default-hover: #000;
        --r4-button-border-color-default-hover: #000;
        --r4-button-background-color-default-pressed: #000;
        --r4-button-text-color-default-pressed: #fff;
        --r4-button-border-color-default-pressed: #000;
        --r4-button-background-color-default-disabled: #8C8C8C;
        --r4-button-text-color-default-disabled: #fff;
        --r4-button-border-color-default-disabled: #8C8C8C;
        /* Primary */
        --r4-button-primary-background-color-default: #000;
        --r4-button-primary-text-color-default: #fff;
        --r4-button-primary-border-color-default: #000;
        --r4-button-primary-background-color-default-hover: #fff;
        --r4-button-primary-text-color-default-hover: #000;
        --r4-button-primary-border-color-default-hover: #000;
        --r4-button-primary-background-color-default-pressed: #000;
        --r4-button-primary-text-color-default-pressed: #fff;
        --r4-button-primary-border-color-default-pressed: #000;
        --r4-button-primary-background-color-default-disabled: #8C8C8C;
        --r4-button-primary-text-color-default-disabled: #fff;
        --r4-button-primary-border-color-default-disabled: #8C8C8C;
        /* Secondary */
        --r4-button-secondary-background-color-default: transparent;
        --r4-button-secondary-text-color-default: currentColor;
        --r4-button-secondary-border-color-default: currentColor;
        --r4-button-secondary-background-color-default-hover: #000;
        --r4-button-secondary-text-color-default-hover: #fff;
        --r4-button-secondary-border-color-default-hover: #000;
        --r4-button-secondary-background-color-default-pressed: transparent;
        --r4-button-secondary-text-color-default-pressed: currentColor;
        --r4-button-secondary-border-color-default-pressed: currentColor;
        --r4-button-secondary-background-color-default-disabled: transparent;
        --r4-button-secondary-text-color-default-disabled: #8C8C8C;
        --r4-button-secondary-border-color-default-disabled: #8C8C8C;
        /* Tertiary */
        --r4-button-tertiary-background-color-default: transparent;
        --r4-button-tertiary-text-color-default: currentColor;
        --r4-button-tertiary-border-color-default: transparent;
        --r4-button-tertiary-background-color-default-hover: transparent;
        --r4-button-tertiary-text-color-default-hover: currentColor;
        --r4-button-tertiary-border-color-default-hover: currentColor;
        --r4-button-tertiary-background-color-default-pressed: transparent;
        --r4-button-tertiary-text-color-default-pressed: currentColor;
        --r4-button-tertiary-border-color-default-pressed: currentColor;
        --r4-button-tertiary-background-color-default-disabled: transparent;
        --r4-button-tertiary-text-color-default-disabled: #8C8C8C;
        --r4-button-tertiary-border-color-default-disabled: transparent;
        /* Pilllbox */
        --r4-pillbox-background-color-default: transparent;
        --r4-pillbox-border-color-default: currentColor;
        --r4-pillbox-text-color-default: currentColor;
        --r4-pillbox-background-color-default-hover: #000;
        --r4-pillbox-border-color-default-hover: #000000;
        --r4-pillbox-text-color-default-hover: #fff;
        --r4-pillbox-background-color-default-disabled: transparent;
        --r4-pillbox-text-color-default-disabled: #8C8C8C;
        --r4-pillbox-border-color-default-disabled: transparent;
        /* Filled */
        --r4-pillbox-filled-background-color-default: #000;
        --r4-pillbox-filled-text-color-default: #fff;
        --r4-pillbox-filled-border-color-default: #000;
        --r4-pillbox-filled-background-color-default-hover: #4E4E4E;
        --r4-pillbox-filled-text-color-default-hover: #fff;
        --r4-pillbox-filled-border-color-default-hover: #4E4E4E;
        --r4-pillbox-filled-background-color-default-disabled: #8C8C8C;
        --r4-pillbox-filled-text-color-default-disabled: #fff;
        --r4-pillbox-filled-border-color-default-disabled: #8C8C8C;
        /* Outlined */
        --r4-pillbox-outlined-background-color-default: transparent;
        --r4-pillbox-outlined-text-color-default: currentColor;
        --r4-pillbox-outlined-border-color-default: currentColor;
        --r4-pillbox-outlined-background-color-default-hover: #E3E3E3;
        --r4-pillbox-outlined-text-color-default-hover: currentColor;
        --r4-pillbox-outlined-border-color-default-hover: #4E4E4E;
        /* Filled Teacher */
        --r4-pillbox-filled-teacher-background-color-default: var(--r4-teacher-color);
        --r4-pillbox-filled-teacher-text-color-default: #000;
        --r4-pillbox-filled-teacher-border-color-default: var(--r4-teacher-color);
        --r4-pillbox-filled-teacher-background-color-default-hover: #000;
        --r4-pillbox-filled-teacher-text-color-default-hover: #fff;
        --r4-pillbox-filled-teacher-border-color-default-hover: #000;
        /* icon button */
        --r4-icon-button-background-color-default: transparent;
        --r4-icon-button-text-color-default: currentColor;
        --r4-icon-button-border-color-default: transparent;
        --r4-icon-button-background-color-default-hover: transparent;
        --r4-icon-button-text-color-default-hover: currentColor;
        --r4-icon-button-border-color-default-hover: currentColor;
        /* Filled */
        --r4-icon-button-filled-background-color-default: #000;
        --r4-icon-button-filled-text-color-default: #fff;
        --r4-icon-button-filled-border-color-default: #000;
        --r4-icon-button-filled-background-color-default-hover: transparent;
        --r4-icon-button-filled-text-color-default-hover: currentColor;
        --r4-icon-button-filled-border-color-default-hover: currentColor;
        /* Filled Teacher */
        --r4-icon-button-filled-teacher-background-color-default: var(--r4-teacher-color);
        --r4-icon-button-filled-teacher-text-color-default: #000;
        --r4-icon-button-filled-teacher-border-color-default: var(--r4-teacher-color);
        --r4-icon-button-filled-teacher-background-color-default-hover: #000;
        --r4-icon-button-filled-teacher-text-color-default-hover: #fff;
        --r4-icon-button-filled-teacher-border-color-default-hover: #000;
        /* Outlined */
        --r4-icon-button-outlined-background-color-default: transparent;
        --r4-icon-button-outlined-text-color-default: currentColor;
        --r4-icon-button-outlined-border-color-default: currentColor;
        --r4-icon-button-outlined-background-color-default-hover: #000;
        --r4-icon-button-outlined-text-color-default-hover: #fff;
        --r4-icon-button-outlined-border-color-default-hover: #000;
        /* Transparent */
        --r4-icon-button-transparent-background-color-default: transparent;
        --r4-icon-button-transparent-text-color-default: currentColor;
        --r4-icon-button-transparent-border-color-default: transparent;
        --r4-icon-button-transparent-background-color-default-hover: transparent;
        --r4-icon-button-transparent-text-color-default-hover: currentColor;
        --r4-icon-button-transparent-border-color-default-hover: currentColor;
        /* Segmented */
        --r4-segmented-button-container-background: var(--nettstedspalett-farge-3);
        --r4-segmented-button-active-background: var(--nettstedspalett-farge-1);
        /* Large button */
        --r4-large-button-background-color-default: transparent;
        --r4-large-button-border-color-default: #000;
        --r4-large-button-text-color-default: currentColor;
        --r4-large-button-background-color-default-hover: #000;
        --r4-large-button-text-color-default-hover: #fff;
        --r4-large-button-active-background-color-default: #000;
        --r4-large-button-active-text-color-default: #fff;
        /* Fliser */
        --r4-tile-background-color: #fff;
        --r4-tile-color: #000;
        --r4-tile-background-color-hover: #fff;
        --r4-tile-border-color-hover: #000;

        --r4-calendar-tile-background-color: var(--nettstedspalett-farge-5);
        --r4-calendar-tile-color: #000;
        --r4-calendar-tile-date-background-color: var(--nettstedspalett-farge-4);

        --r4-mini-promo-tile-background-color: #fff;
        --r4-mini-promo-tile-color: #000;
        --r4-mini-promo-tile-link-background-color: var(--nettstedspalett-farge-4);

        --r4-promo-tile-background-color: transparent;
        --r4-promo-tile-color: #000;
        --r4-promo-title-tile-background-color: rgba(255, 255, 255, 0.6);
        --r4-promo-title-tile-color: #000;
        --r4-promo-tile-link-background-color: var(--nettstedspalett-farge-4);

        --r4-link-tile-background-color: var(--nettstedspalett-farge-5);
        --r4-link-tile-color: #000;
        --r4-link-tile-link-background-color: var(--nettstedspalett-farge-4);

        /* Audio */
        --r4-audio-color-default: #000;
        --r4-audio-background-default: var(--nettstedspalett-farge-4);
        --r4-audio-handle-default: var(--r4-interaction-color);
        --r4-audio-border-default: #000;
        /* Table */
        --r4-table-header-background: var(--nettstedspalett-farge-5);
        /* Checkbox */
        --r4-exercise-checkbox-color-default: #000;
        --r4-exercise-checkbox-background-default: transparent;
        --r4-exercise-checkbox-border-default: #000;
        --r4-exercise-checkbox-label-color-default: #000;
        /* Exercise */
        --r4-exercise-task-background: var(--nettstedspalett-farge-5);
        --r4-exercise-repo-background: var(--nettstedspalett-farge-4);
        /* Exercise checkbox */
        --r4-exercise-checkbox-color-default: #000;
        --r4-exercise-checkbox-background-default: transparent;
        --r4-exercise-checkbox-border-default: #000;
        --r4-exercise-checkbox-label-color-default: #000;
        --r4-exercise-checkbox-background-correct: var(--r4-correct-color);
        --r4-exercise-checkbox-background-incorrect: var(--r4-incorrect-color);
        --r4-exercise-checkbox-background-partially-correct: #CBCBCD;
        /* Exercise radio */
        --r4-exercise-radio-color-default: #000;
        --r4-exercise-radio-background-default: transparent;
        --r4-exercise-radio-border-default: #000;
        --r4-exercise-radio-label-color-default: #000;
        --r4-exercise-radio-background-correct: var(--r4-correct-color);
        --r4-exercise-radio-background-incorrect: var(--r4-incorrect-color);
        --r4-exercise-radio-background-partially-correct: #CBCBCD;
        /* Exercise radio button */
        --r4-exercise-radio-button-border-default: #000;
        --r4-exercise-radio-button-label-color-default: #000;
        --r4-exercise-radio-button-background-correct: var(--r4-correct-color);
        --r4-exercise-radio-button-background-incorrect: var(--r4-incorrect-color);
        /* Exercise radio image */
        --r4-exercise-radio-image-color-default: #000;
        --r4-exercise-radio-image-background-default: transparent;
        --r4-exercise-radio-image-border-default: #000;
        --r4-exercise-radio-image-background-correct: var(--r4-correct-color);
        --r4-exercise-radio-image-background-incorrect: var(--r4-incorrect-color);
        --r4-exercise-radio-image-background-partially-correct: #CBCBCD;
        /* Exercise repos item */
        --r4-exercise-repos-item-color-default: #000;
        --r4-exercise-repos-item-background-default: #FFF;
        --r4-exercise-repos-item-border-default: #000;
        --r4-exercise-repos-item-height-default: 10em;
        --r4-exercise-repos-item-width-default: 10em;
        --r4-exercise-repos-item-background-correct: var(--r4-correct-color);
        --r4-exercise-repos-item-background-incorrect: var(--r4-incorrect-color);
        /* Exercise dropzone */
        --r4-exercise-dropzone-inline-color-default: #000;
        --r4-exercise-dropzone-inline-background-default: #FFF;
        --r4-exercise-dropzone-inline-border-default: #000;
        --r4-exercise-dropzone-inline-background-correct: var(--r4-correct-color);
        --r4-exercise-dropzone-inline-background-incorrect: var(--r4-incorrect-color);
        /* Exercise input */
        --r4-exercise-input-color-default: #000;
        --r4-exercise-input-background-default: #FFF;
        --r4-exercise-input-border-default: #000;
        --r4-exercise-input-background-correct: var(--r4-correct-color);
        --r4-exercise-input-background-incorrect: var(--r4-incorrect-color);
        /* Exercise select */
        --r4-exercise-select-color-default: #000;
        --r4-exercise-select-background-default: #FFF;
        --r4-exercise-select-border-default: #000;
        --r4-exercise-select-background-correct: var(--r4-correct-color);
        --r4-exercise-select-background-incorrect: var(--r4-incorrect-color);
        /* Select */
        --r4-select-background-default: #fff;
        --r4-select-border-default: #000;
        /* Exercise navigation item */
        --r4-exercise-navigation-item-color-default: #000;
        --r4-exercise-navigation-item-background-default: #fff;
        --r4-exercise-navigation-item-border-default: #000;
        --r4-exercise-navigation-item-background-correct: var(--r4-correct-color);
        --r4-exercise-navigation-item-background-incorrect: var(--r4-incorrect-color);
        --r4-exercise-navigation-item-background-partially-correct: #CBCBCD;
        /* Lesson navigation */
        --r4-lesson-navigation-item-background-default: #CBCBCD;
        --r4-lesson-navigation-item-background-active: var(--r4-notification-color);
        --r4-lesson-navigation-item-color-active: var(--r4-interaction-color);
        --r4-lesson-menu-background: #fff;
        --r4-lesson-menu-border: #C4C4C4;
        --r4-lesson-navigation-bottom-background: #F8F8F8;
        /* Menu */
        --r4-menu-background: #fff;
        --r4-menu-border: #C4C4C4;
        --r4-menu-color: #000;
        /* Main menu */
        --r4-main-menu-background-color: var(--nettstedspalett-farge-3);
        --r4-main-menu-item-active-indicator-active-background-color: #000;
        --r4-main-menu-item-expanded-background-color: var(--nettstedspalett-farge-4);
        --r4-main-menu-item-border-bottom-color: #000;
        /* Expandable panel */
        --r4-expandable-heading-background: #f2f2f2;
        --r4-expandable-heading-color: #000;
        --r4-expandable-body-background: #f2f2f2;
        --r4-expandable-body-color: #000;
        --r4-teacher-expandable-heading-background: #000;
        --r4-teacher-expandable-heading-color: var(--r4-teacher-color);
        --r4-teacher-expandable-body-background: #fff;
        --r4-teacher-expandable-body-color: #000;
        --r4-lp-expandable-heading-background: var(--nettstedspalett-farge-12);
        --r4-lp-expandable-heading-color: #000;
        --r4-lp-expandable-body-background: var(--nettstedspalett-farge-12);
        --r4-lp-expandable-body-color: #000;
        /* Verksforside */
        --r4-user-info-background-color: var(--nettstedspalett-farge-4);
        /* Card */
        --r4-card-background: #fff;
        --card-media-placeholder-bg: var(--nettstedspalett-farge-1);
        --card-media-placeholder-color: var(--r4-color-on-primary);
        /* Lesson feedback */
        --r4-lesson-feedback-background: var(--nettstedspalett-farge-5);
        /* -- Colors end -- */

        /* -- Size -- */
        /* topp logo - må justeres pr subsite */
        --r4-site-logo-width: 83px;
        --r4-site-logo-height: 14px;
        /* Footer logo - må justeres pr subsite */
        --r4-logo-width-footer: 178px;
        --r4-logo-height-footer: 30px;
        /* Audio */
        --r4-audio-height-default: 2.75em;
        /* Content */
        --r4-content-max-width: 2000px;
        --r4-content-max-width-sm: 1000px;
        /* Text */
        --r4-text-max-width: 50em;
        /* Button */
        --r4-button-border-radius-default: 2px;
        --r4-button-min-height-default: 2.25em;
        --r4-button-min-width-default: 3.875em;
        /* Icon button */
        --r4-icon-button-border-radius-default: 2.25em;
        --r4-icon-button-min-height-default: 2.25em;
        --r4-icon-button-min-width-default: 2.25em;
        /* Lesson nav */
        --r4-lesson-nav-bottom-height: 3.125em;
        /* Top-nav */
        --r4-top-nav-height: 4em;
        /* Top-bar */
        --r4-top-bar-height: 3em;
        /* Sti */
        --r4-sti-nav-bottom-height: 50px;
        /* Card */
        --r4-card-title-line-height: 1.5em;
        --r4-card-text-line-height: 1.5em;
        /* Bt-Dialog */
        --bt-dialog-border-radius: 3px;
        /* -- Size end -- */

        /* -- Space -- */
        --spacing-xs: .25em;
        --spacing-sm: .5em;
        --spacing-md: .75em;
        --spacing-lg: 1em;
        --spacing-xlg: 1.25em;
        /* Button */
        --r4-button-horizontal-padding-default: 8px;
        /* Nav */
        --r4-nav-horizontal-padding-default: 18px;
        /* Pillbox */
        --r4-pillbox-padding-default: .5em;
        /* Input */
        --r4-input-margin-default: 1em;
        --r4-input-padding-default: .5em;
        --r4-input-label-margin-default: .5em;
        /* Textarea */
        --r4-textarea-margin-default: 1em;
        /* Layout */
        --r4-layout-horisontal-padding-sm: 1em;
        --r4-layout-horisontal-padding: 1.125em;
        --r4-layout-gap-default: 1.25em;
        /* Blocks */
        --r4-block-vertical-space: 2em;
        /* Floors */
        --r4-floor-vertical-space: 3em;
        --r4-floor-node-menu-min-height: 600px;
        --r4-floor-node-menu-vertical-space: 4em;
        /* Card */
        --r4-card-vertical-space-sm: 0.25em;
        --r4-card-space: 1em;
        /* -- Space end -- */
        --scrollbar-width: 15px;

}