:root{
    /***************/
    /* CORE COLORS */
    /***************/
    --primary-color: #4d4d4d;
    --secondary-color: #ed0000;
    /* used solely for tile boxes */
    --ternary-color: #37BE82;
    --quarternary-color: #FAB432;
    --quinary-color: #5D5D5D;
    --senary-color: #B690C1;

    --success-green: green;

    --primary-color-15pc: #141E5015;
    --primary-color-light: #ECECF1;

    /* Greyscale */
    --white: #ffffff;
    --grey05: #f2f2f2;
    --grey10: #e5e5e5;
    --grey20: #cccccc;
    --grey30: #afb0b2;
    --grey40: #999999;
    --grey50: #808080;
    --grey60: #666666;
    --grey70: #34383c;
    --grey80: #333333;
    --grey90: #1a1a1a;
    --black: #000000;

    --epss-background-grey: #F5F5F5;

    /***************/
    /*    FONTS    */
    /***************/

    /* Font family and sources must still be defined inside common.css
     * It is not possible to use variables within a @font-face definition sadly
     */
    --header-font-fallbacks: "Segoe UI Black", "Segoe UI", Segoe, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
    --main-font-fallbacks: "Segoe UI", Segoe, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
    --epss-font-fallbacks: "Segoe UI", Segoe, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
	
	--ttsTimelineFontFamily: var(--main-font-fallbacks, var(--ttsFontFamilyFallback));
	--ttsTimelineMarkerDotColor: var(--primary-color, var(--ttsPrimaryColorFallback));
	--ttsTimelineMarkerTextColor: var(--black, var(--ttsOverlayColorFallback));
	--ttsTimelineLineColor: var(--secondary-color, var(--ttsPrimaryColorFallback));
	--ttsTimelineContentTitleColor: var(--white, var(--ttsOnPrimaryColorFallback));
	--ttsTimelineContentTitleBackgroundColor: var(--secondary-color, var(--ttsPrimaryColorFallback));
	--ttsTimelineContentTextColor: var(--black, var(--ttsOverlayColorFallback));
	--ttsTimelineContentTextBackgroundColor: var(--grey05, var(--grey-10pc-fallback));

    /***************/
    /*  FONT SIZES */
    /***************/
    --default-font-size: var(--font-size-16px);

    --font-size-10px: 0.625rem;
    --font-size-11px: 0.6875rem;
    --font-size-12px: 0.75rem;
    --font-size-13px: 0.8125rem;
    --font-size-14px: 0.875rem;
    --font-size-15px: 0.9375rem;
    --font-size-16px: 1rem;
    --font-size-17px: 1.0625rem;
    --font-size-18px: 1.125rem;
    --font-size-19px: 1.1875rem;
    --font-size-20px: 1.25rem;

    /***************/
    /* CORE STYLES */
    /***************/

    /* Main text colors */
    --main-text: var(--grey90);
    --header-text: var(--grey80);

    --property-title: var(--grey80);
    --property-text: var(--grey80);

    --hyperlink: var(--grey60);
    --hyperlink-hover: var(--primary-color);

    --node-class-text: var(--black);

    /* Buttons */
    --btn-bg: var(--primary-color);
    --btn-bg-hover: var(--secondary-color);
    --btn-bg-disabled: var(--grey30);
    --btn-font-color: var(--white);
    --btn-font-color-disabled: var(--grey05);

    --btn-close-icon: var(--secondary-color);
    --btn-close-hover-bg: var(--secondary-color);
    --btn-close-hover-icon: var(--white);

    /* Sections */
    --subsection-separator: var(--grey30);
    --section-background: var(--grey05);
    --section-border: var(--grey05);
    --section-title: #afb0b2;
    --section-title-hover: var(--secondary-color);
    --section-border-bottom: var(--grey60);
    --section-icon: var(--grey60);
    --section-icon-hover: var(--secondary-color);

    --subsection-title: var(--grey60);

    /* Deeplinks */
    --deeplink-icon: var(--grey60);
    --deeplink-icon-hover: var(--secondary-color);

    /* New icon */
    --new-button-bg: var(--secondary-color);
    --new-button-text: var(--white);

    /***************/
    /*   NAVPANE   */
    /***************/
    --np-background: var(--white);

    --np-tile-bg: var(--white);
    --np-tile-icon: var(--secondary-color);

    --np-tile-hover: var(--secondary-color);
    --np-tile-hover-icon: var(--white);

    --np-tile-active: var(--secondary-color);
    --np-tile-active-icon: var(--white);

    --np-tile-caption: var(--grey60);
    --np-tile-caption-hover: var(--white);

    --np-search-hover-active: var(--primary-color);
    --np-search-expand-hover: var(--white);
    --np-search-icon: var(--white);
    --np-search-expand-icon-hover: var(--primary-color);

    --np-profile-bg: var(--white);
    --np-profile-bg-hover: var(--secondary-color);
    --np-profile-text-hover: var(--white);
    --np-profile-icon: var(--secondary-color);
    --np-profile-icon-hover: var(--white);
    --np-profile-user-text: var(--grey60);
    --np-profile-user-text-hover: var(--white);

    --np-submenu-bg: var(--white);
    --np-menu-item: var(--grey60);
    --np-menu-item-hover: var(--secondary-color);

    /* Mobile */
    --np-mobile-small-tile-bg: var(--white);
    --np-mobile-small-tile-icon: var(--grey60);

    --np-mobile-search-expand-hover: var(--primary-color);
    --np-mobile-search-expand: var(--white);
    --np-mobile-search-expand-icon: var(--secondary-color);
    --np-mobile-search-expand-icon-hover: var(--white);

    /***************/
    /*  ENTITYBOX  */
    /***************/

    --eb-background: var(--primary-color);
    --eb-background-hover: var(--secondary-color);
    --eb-background-disabled: var(--grey30);

    --eb-node-icon: var(--white);
    --eb-comment-icon: var(--white);

    /* New button background uses the inverse of the entity box background by default */
    --eb-new-icon: var(--white);
    --eb-new-icon-hover: var(--grey60);

    --eb-title-color: var(--white);
    --eb-content-color: var(--white);

    /***************/
    /*  TILE BOX   */
    /***************/

    --tile-link-color: var(--white);

    --tile-color-one: var(--primary-color);
    --tile-color-two: var(--secondary-color);
    --tile-color-three: var(--ternary-color);
    --tile-color-four: var(--quarternary-color);
    --tile-color-five: var(--quinary-color);
    --tile-color-six: var(--senary-color);

    /***************/
    /*  DOCS BOX   */
    /***************/

    --doc-background: var(--primary-color);
    --doc-background-hover: var(--secondary-color);

    --doc-placeholder-bg: var(--grey30);

    --doc-title-color: var(--white);
    --doc-text-color: var(--grey60);
    --doc-details-bg: var(--white);

    /* New button background uses the inverse of the doc box background by default */

    --doc-format-icon-bg: transparent;
    --doc-format-icon-fill: var(--white);
    --doc-format-icon-hover-fill: var(--secondary-color);

    --doc-content-file-formats: var(--grey60);
    --doc-content-file-formats-hover: var(--secondary-color);

    --doc-elearning-options-bg: var(--white);
    --doc-elearning-options-text: var(--grey60);
    --doc-elearning-options-text-hover: var(--secondary-color);

    --doc-comment-icon: var(--grey60);
    --doc-comment-icon-hover: var(--secondary-color);

    --doc-progress-bg: #e3f0de;
    --doc-progress-pc: #74b65b;

    /* Doc Search Metadata */
    --doc-search-details-text: var(--grey60);
    --doc-search-details-context-path: var(--grey30);

    /***************/
    /*   SIDEBAR   */
    /***************/

    --sidebar-title: var(--grey80);
    --sidebar-text: var(--grey60);
    --sidebar-comment-icon: var(--grey80);

    /***************/
    /*  COVER IMG  */
    /***************/

    --cover-img-border: var(--grey30);
    --cover-img-icon: var(--grey30);
    --cover-img-icon-hover: var(--secondary-color);

    /***************/
    /*    COURSE   */
    /***************/

    --course-bg-color: var(--white);
    --progress-caption: var(--grey60);
    --progress-bg-color: #e3f0de;
    --progress-bar-color: #74b65b;

    /* Certificates */
    --cert-button-container-bg: transparent;
    --cert-button-container-text: var(--grey80);
    --cert-input-bg: #ebeef1;
    --cert-dialog-text: var(--grey90);

    --cert-view-bg: var(--white);
    --cert-title: var(--grey60);
    --cert-result-table-text: var(--grey90);
    --cert-result-summary-text: var(--secondary-color);

    /***************/
    /*   DOCUMENT  */
    /***************/

    /* Landing page */
    --instance-box-general-bg: var(--grey60);
    --instance-box-general-bg-hover: var(--secondary-color);
    --instance-box-learning-bg: var(--primary-color);
    --instance-box-assess-bg: var(--secondary-color);
    --instance-box-document-bg: #b690c1;
    --instance-box-si-bg: #74b65b;
    --instance-box-exercise-bg: #fdc207;
    --instance-box-guide-bg: var(--grey60);
    --instance-box-qac-bg: var(--grey60);

    --instance-box-title: var(--white);
    --instance-box-type-icon: var(--white);
    --file-format-icon: var(--white);
    --file-format-icon-bg-hover: var(--white);
    --learning-file-format-icon-hover: var(--primary-color);
    --assess-file-format-icon-hover: var(--secondary-color);
    --document-file-format-icon-hover: #b690c1;
    --si-file-format-icon-hover: #74b65b;
    --exercise-file-format-icon-hover: #fdc207;
    --guide-file-format-icon-hover: var(--grey60);
    --qac-file-format-icon-hover: var(--grey60);

    --content-play-button-text: var(--white);
    --content-play-button-bg: var(--grey60);
    --content-play-button-text-hover: var(--white);
    --content-play-button-bg-hover: var(--secondary-color);

    --document-box-border-radius-first-box: var(--border-radius-8px) var(--border-radius-8px) 0 0;
    --document-box-border-radius-last-box: 0 0 var(--border-radius-8px) var(--border-radius-8px);
    --document-box-border-radius-solo-box: var(--border-radius-8px);
    --document-box-border-radius-solo-box-expanded: var(--document-box-border-radius-first-box);
    --document-box-details-box-border-radius: 0 0 var(--border-radius-8px) var(--border-radius-8px);

    --document-toggle-button: var(--border-radius-8px);
    --document-toggle-button-arrow-color: var(--grey80);
    --document-toggle-button-arrow-color-hover: var(--primary-color);

    /*****************/
    /* BORDER RADIUS */
    /*****************/

    --border-radius-6px: 6px;
    --border-radius-8px: 8px;
    --border-radius-10px: 10px;
    --border-radius-12px: 12px;

    /***************/
    /*    EPSS     */
    /***************/

    --epss-page-bg: var(--white);
    --epss-default-spacing-value: 12px;
    --epss-default-max-width: clamp(1024px, 75%, 1440px);
    --epss-mobile-outer-padding: 10px;

    --epss-default-border-radius: var(--border-radius-8px);
    --epss-default-icon-button-size: 36px;

    --epss-search-bg: var(--grey30);
    --epss-search-border: var(--primary-color);
    --epss-search-autocomplete-bg: var(--white);
    --epss-search-text: var(--grey60);
    --epss-search-text-hover: var(--secondary-color);

    --epss-search-input-border-width: 1px;
    --epss-search-input-outer-padding-left: var(--epss-default-spacing-value);
    --epss-search-input-inner-padding-left: var(--epss-default-spacing-value);

    --epss-launchbar-bg: var(--grey05);
    --epss-launchbar-related-bg: var(--grey60);
    --epss-launchbar-related-hover: var(--secondary-color);

    --epss-related-link-feedback-bg: var(--grey60);
    --epss-related-link-bg-hover: var(--secondary-color);

    --epss-psc-title: var(--primary-color);
    --epss-psc-title-hover: var(--secondary-color);

    --epss-result-bg: var(--grey05);
    --epss-result-title: var(--grey80);
    --epss-result-icon: var(--grey60);
    --epss-result-title-hover-icon: var(--primary-color);
    --epss-result-icon-hover: var(--secondary-color);
    --epss-glossary-icon: var(--grey60);

    --epss-result-details: var(--grey60);

    --epss-copy-clipboard: var(--primary-color);

    --epss-not-found-text: var(--grey80);
    --epss-not-found-top-message: var(--primary-color);
    --epss-not-found-overlay-bg: var(--white);

    --epss-language-select: var(--primary-color);
    --epss-language-select-hover: var(--secondary-color);

    --epss-options-button-bg: var(--grey30);
    --epss-options-button-icon-bg: var(--primary-color);
    --epss-options-button-bg-icon-hover: var(--secondary-color);

    /* More results */
    --epss-more-bg: transparent;
    --epss-more-link: var(--primary-color);
    --epss-more-link-hover: var(--secondary-color);

    /* Loading animation */
    --epss-loading-bg: var(--white);
    --epss-loading-circles:var(--primary-color);

    /* Content viewport */
    --viewport-bg: var(--white);
    --viewport-header-text: var(--primary-color);
    --viewport-header-bg: var(--grey05);
    --viewport-header-text-hover: var(--white);
    --viewport-header-bg-hover: var(--primary-color);

    --viewport-transition-time: 800ms;

    /* Playback */
    --playback-button-bg: var(--grey60);
    --playback-button-text: var(--white);
    --playback-button-bg-hover: var(--secondary-color);
    --playback-button-text-hover: var(--white);

    /***************/
    /*  GLOSSARY   */
    /***************/

    /* Header letters */
    --glossary-letter-text: var(--grey60);
    --glossary-letter-text-active: var(--white);
    --glossary-letter-bg-active: var(--grey60);
    --glossary-letter-text-hover: var(--white);
    --glossary-letter-bg-hover: var(--secondary-color);

    /* Content */
    --open-entry-border-bottom: var(--secondary-color);
    --categories-text-color: var(--grey60);
    --glossary-entry-link: var(--grey80);
    --glossary-entry-link-hover: var(--secondary-color);
    --glossary-list-letter-caption: var(--grey90);

    /* Mobile */
    --open-entry-border-mobile: var(--secondary-color);

    /***************/
    /*    GUIDE    */
    /***************/

    /* Ignored for now as deprecated */

    /***************/
    /*   LAYOUT    */
    /***************/

    /* EPSS */
    --epss-layout-header-bg: var(--white);
    --epss-layout-toolbar-border: var(--grey30);
    --epss-layout-toolbar-btn-text: var(--grey60);
    --epss-layout-toolbar-btn-text-hover: var(--grey30);

    --epss-layout-headline-bg: var(--white);
    --epss-layout-h1-text: var(--grey60);

    --epss-menu-transition-time: 200ms ease-in-out;
    --default-transition-duration: 250ms;
    --transition-duration-350ms: 350ms;
    --default-transition-timing-func: cubic-bezier(0, 1.2, 1, 0.99);

    /* Standard layout */
    --layout-header-bg: var(--white);
    --layout-search-container-bg: var(--primary-color);

    --layout-content-wide-borders: var(--white);

    --layout-rating-caption: var(--property-text);

    --layout-comment-count: var(--white);
    --layout-comment-icon: var(--grey80);
    --layout-comment-icon-hover: var(--secondary-color);

    --layout-headline-bg: var(--white);

    --layout-search-result-caption: var(--black);

    --layout-footer-text: var(--white);
    --layout-footer-bg: var(--grey05);
    --layout-footer-link: var(--hyperlink);
    --layout-footer-link-hover: var(--hyperlink-hover);
    --layout-footer-backtotop: var(--grey80);
    --layout-footer-backtotop-hover: var(--secondary-color);

    /***************/
    /*    LOGIN    */
    /***************/

    --login-box-bg: var(--white);
    --login-box-borders: var(--grey30);
    --login-input-caption: var(--grey60);

    /* Mobile */
    --login-mobile-bg: var(--white);

    /***************/
    /*   NEWSFEED  */
    /***************/

    --nf-form-border: var(--grey30);
    --nf-initial-title-text: var(--grey30);
    --nf-active-title-text: var(--header-text);
    --nf-initial-description-text: var(--grey30);
    --nf-active-description-text: var(--main-text);

    --nf-toolbar-bg: var(--grey05);

    --nf-language-select-bg: var(--white);
    --nf-language-select-text: var(--grey60);
    --nf-language-select-text-hover: var(--secondary-color);

    --nf-timestamp: var(--grey30);

    --nf-remove-icon: var(--secondary-color);
    --nf-remove-icon-hover: var(--white);
    --nf-remove-bg-hover: var(--secondary-color);

    /***************/
    /*   PASSWORD  */
    /***************/

    /* EPSS */
    --pw-epss-box-bg: var(--white);
    --pw-epss-borders: var(--grey30);
    --pw-epss-welcome-text: var(--grey60);
    --pw-epss-caption: var(--grey60);

    --pw-epss-button-bg: var(--grey60);
    --pw-epss-button-text: var(--white);
    --pw-epss-button-bg-hover: var(--secondary-color);

    /* Landing page */
    --pw-lp-button-bg: var(--grey60);
    --pw-lp-button-text: var(--white);
    --pw-lp-button-bg-hover: var(--secondary-color);
    --pw-lp-caption: var(--grey60);

    /* Normal */
    --pw-box-bg: var(--white);
    --pw-borders: var(--grey30);
    --pw-welcome-text: var(--grey60);
    --pw-caption: var(--grey60);

    --pw-button-bg: var(--grey60);
    --pw-button-text: var(--white);
    --pw-button-bg-hover: var(--secondary-color);

    /***************/
    /*   PROFILE   */
    /***************/

    --profile-default-avatar-icon: var(--grey30);
    --profile-avatar-upload: var(--grey60);
    --profile-avatar-upload-hover: var(--secondary-color);

    --profile-pw-reset: var(--grey60);
    --profile-pw-reset-hover: var(--secondary-color);

    /***************/
    /*   PROCESS   */
    /***************/

    --process-chainchild-width: 210px;
    --process-chainchild-width-redesign: 200px;
    --process-chainchild-grid-gap-vertical: 25px;
    --process-chainchild-grid-gap-horizontal: 70px;
    --process-chainchild-grid-line-gap: 5px;

    --process-role-link: var(--property-text);
    --process-role-link-hover: var(--hyperlink-hover);
    --process-results-text: var(--property-text);
    --process-results-font-size: var(--font-size-12px);
    --process-results-color: var(--primary-color);
    --process-results-icon-fill: var(--primary-color);

    /* Process chain */
    --process-chain-bg: var(--primary-color);
    --process-chain-bg-hover: var(--secondary-color);
    --process-chain-disabled: var(--grey30);

    --process-chain-text: var(--white);
    --process-chain-text-hover: var(--white);
    --process-chain-text-disabled: var(--white);

    --process-chain-tile-min-height: 110px;

    --process-chain-new-bg-hover: var(--grey60);

    --process-tooltip-content-bg: var(--white);
    --process-tooltip-content-border: var(--grey60);
    --process-tooltip-content-outline: var(--white);

    /* Mobile */
    --process-mobile-link-text: var(--white);
    --process-chain-mobile-bg: var(--primary-color);
    --process-chain-mobile-bg-hover: var(--secondary-color);
    --process-chain-mobile-disabled-bg: var(--grey30);

    /***************/
    /*     QA      */
    /***************/

    --qa-bg: var(--white);
    --qa-search-bg: var(--white);
    --qa-authoring-text-bg: var(--white);

    --qa-search-submit-bg: var(--white);
    --qa-search-cancel-bg: var(--white);

    --qa-search-type-title: var(--header-text);
    --qa-search-type-title-subline: var(--grey30);
    --qa-language-select-title: var(--property-title);
    --qa-language-select-hover: var(--secondary-color);

    --qa-result-bg: var(--grey05);
    --qa-result-title: var(--header-text);

    --qa-start-button-hover: var(--secondary-color);

    --qa-more-results-text: var(--grey60);
    --qa-more-results-text-hover: var(--secondary-color);
    --qa-more-results-bg-hover: var(--white);

    --qa-results-details-bg: var(--grey05);
    --qa-results-details-text: var(--property-text);

    --qa-options-button-bg: var(--white);
    --qa-options-authoring-button-bg: var(--grey30);
    --qa-options-page-bg: var(--grey30);
    --qa-options-element: var(--property-text);
    --qa-options-back-bg: var(--grey60);
    --qa-options-back-text: var(--white);
    --qa-options-back-bg-hover: var(--secondary-color);

    --qa-options-language-text-bg: var(--grey60);
    --qa-options-language-text: var(--white);
    --qa-options-language-text-bg-hover: var(--secondary-color);
    --qa-options-language-text-hover: var(--white);

    --qa-options-on-off-bg: var(--grey30);
    --qa-options-on-off-text:var(--grey60);
    --qa-options-on-off-text-hover-checked: var(--white);
    --qa-options-on-off-bg-hover-checked: var(--grey60);

    /***************/
    /*   RATING    */
    /***************/

    --rating-bg-white: var(--white);
    --rating-bg-grey: var(--grey05);

    --rating-spreading-layer: var(--grey60);
    --rating-spreading-layer-hover: var(--secondary-color);
    --rating-spreading-layer-readonly: var(--grey30);
    --rating-spreading-layer-readonly-hover: var(--white);

    --rating-dot-frame: transparent;
    --rating-dot-white-frame: var(--white);
    --rating-dot-cover: var(--white);

    --rating-entity-dot-cover: var(--primary-color);
    --rating-entity-dot-cover-hover: var(--secondary-color);
    --rating-entity-dot-cover-disabled: var(--grey30);

    --rating-separator: var(--grey30);
    --rating-count-white: var(--white);
    --rating-count-blue: var(--grey60);
    --rating-count-black: var(--grey80);
    --rating-count-grey: var(--grey30);

    /* EPSS ratings */
    --rating-normal: var(--grey30);
    --rating-current: var(--primary-color);
    --rating-cover: var(--grey05);
    --rating-fill: var(--secondary-color);

    /***************/
    /*    SEARCH   */
    /***************/

    --search-box-text: var(--grey60);
    --search-box-text-hover: var(--primary-color);
    --search-box-autocomplete-bg: var(--white);

    --search-submit-border: var(--white);
    --search-submit-bg: transparent;
    --search-submit-bg-hover: var(--primary-color);

    --search-submit-icon: var(--primary-color);
    --search-submit-icon-hover: var(--white);

    --search-last-link-hover: var(--primary-color);
    --search-last-icon: var(--primary-color);
    --search-last-icon-hover: var(--white);
    --search-last-link-disabled: transparent;
    --search-last-icon-disabled: var(--grey30);

    --search-result-filter-link: var(--grey60);
    --search-result-filter-bg: var(--white);
    --search-result-filter-link-hover: var(--secondary-color);
    --search-result-filter-bg-hover: var(--white);
    --search-result-filter-active-link: var(--white);
    --search-result-filter-active-bg: var(--secondary-color);

    --search-result-filter-icon: var(--grey60);
    --search-result-filter-icon-hover: var(--secondary-color);
    --search-result-filter-icon-active: var(--white);

    --search-result-primary-transparent: var(--primary-color-15pc);
    --search-result-toggle-button-hover: #e1dfdd;

    /***************/
    /*    TOPIC    */
    /***************/

    --topic-doc-list-outline: var(--grey05);
    --topic-doc-list-bg: var(--grey05);

    --topic-tile-gap: 10px;
    --topic-tile-minwidth: 170px;
    --topic-tile-aspect-ratio: 1;

    /*******************************/
    /*    FLUENT DESIGN COLORS    */
    /*******************************/

    --search-result-hover-arrow-color: #bdbdbd;

    /*******************************/
    /*          BREAKPOINTS        */
    /*******************************/
    --breakpoint-mobile-max: 767px;
    --breakpoint-mobile-min: 768px;

    /*******************************/
    /*           NEW LABEL         */
    /*******************************/
    --new-label-background-color: var(--secondary-color);
    --new-label-border-radius: var(--border-radius-6px);
    --new-label-font-size: var(--font-size-12px);
    --new-label-font-size-mobile: var(--font-size-14px);

    /*******************************/
    /*    FLUENT UI BOX SHADOWS    */
    /*******************************/
    --shadow-elevation-1: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
    --shadow-elevation-childrenList-custom: -2px 1px 3px -2px rgba(0,0,0,0.12), 1px 4px 7px -2px rgba(0,0,0,0.14);
    --shadow-elevation-2: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
    --dropshadow-elevation-1: 0 0 2px rgba(0,0,0,0.12);
    --dropshadow-elevation-2: 0 2px 2px rgba(0,0,0,0.14);
}

@media screen and (max-width: 767px) {
    :root {
        --topic-tile-aspect-ratio: 0;
    }
}