:root, [data-md-color-scheme=default] {
    /* Grey gradients */
    --celum-bluegrey-50: #ECEFF1;
    --celum-bluegrey-100: #CFD8DC;
    --celum-bluegrey-200: #B0BEC5;
    --celum-bluegrey-300: #90A4AE;
    --celum-bluegrey-400: #78909C;
    --celum-bluegrey-500: #607D8B;
    --celum-bluegrey-600: #546E7A;
    --celum-bluegrey-700: #455A64;
    --celum-bluegrey-800: #37474F;
    --celum-bluegrey-900: #263238;

    /* Blue gradients */
    --celum-blue-primary: #01A9CA;
    --celum-blue-secondary: #005682;
    --celum-blue-tertiary: #006B9C;
    --celum-blue-quarternary: #62CAE1;
    --celum-blue-quinary: #E1F3FA;

    /* Other colors */
    --celum-color-1: #E43570;
    --celum-color-2: #F46319;
    --celum-color-3: #F3A901;
    --celum-color-4: #9DB917;
    --celum-color-5: #13B676;
    --celum-color-6: #2BB1CF;
    --celum-color-7: #2882D1;
    --celum-color-8: #794BE8;
    --celum-color-9: #b641CB;
    --celum-color-10: #8F9FA6;
    --celum-blue-2: #56C4Cf;
    --celum-blue-3: #005682;

    /* Primary and accent color */
    --md-primary-fg-color: #ffffff; /* Used for header/tabs background color */
    --md-primary-bg-color: var(--celum-blue-primary); /* Used for header/tabs font color */
    --md-accent-fg-color: var(--celum-blue-primary); /* Used for links and scrollbar on hover */

    /* Typeset color */
    --md-typeset-color: var(--celum-bluegrey-600); /* Blue grey 600 */
    --md-typeset-a-color: var(--celum-bluegrey-600); /* Used for links normally */

    /* Links */
    --celum-link-hover-bg-color: #37474F14;
    --celum-link-active-bg-color: #37474F1F;

    /* Button Hover */
    /*--celum-button-hover-bg-color: #62CAE1EB;*/
    --celum-button-hover-bg-color: #62CAE133;
    --celum-card-hover-bg-color: #01A9CAEB;

    /*Table color */
    --celum-table-header-fg-color: var(--md-primary-fg-color);
    --celum-table-header-special-bg-color: #01A9CA1A;
    --celum-table-header-bg-color: var(--celum-blue-tertiary);
    --celum-table-cell-special-bg-color: #FF7D091A;
    --celum-table-cell-grey: var(--celum-bluegrey-50);

    /* Admonition color */
    --celum-admonition-info-border-color: var(--celum-blue-primary);
    --celum-admonition-info-bg-color: #01A9CA1A;
    --celum-admonition-danger-border-color: #FF3F3F;
    --celum-admonition-danger-bg-color: #FF3F3F1A;
    --celum-admonition-warning-border-color: #FF7D09;
    --celum-admonition-warning-bg-color: #FF7D091A;
    --celum-admonition-tip-border-color: #37BA63;
    --celum-admonition-tip-bg-color: #37BA631A;

    /* HTML icons */
    --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1-2.05-2.05 1-1c.1-.11.24-.16.38-.16m-1.97 1.74 2.06 2.06-6.06 6.06H7.07v-2.06l6.06-6.06Z"/></svg>');
    --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>');
    --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg>');
    --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27Z"/></svg>');
    --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="M32,2C15.431,2,2,15.432,2,32c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30C62,15.432,48.568,2,32,2z M25.025,50  l-0.02-0.02L24.988,50L11,35.6l7.029-7.164l6.977,7.184l21-21.619L53,21.199L25.025,50z"/></svg>');
    --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10Z"/></svg>');
    --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21Z"/></svg>');
    --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" width="20px" height="20px"><path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1.5 1.78l1.5 1.5 1.5-1.5.72.72-1.5 1.5 1.5 1.5-.72.72-1.5-1.5-1.5 1.5-.72-.72 1.5-1.5-1.5-1.5.72-.72z"/></svg>');
    --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m11.5 20 4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2Z"/></svg>');
    --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 13h2v1h-2v-1m10-8v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4 9 4m-4 5h-2.2c-.2-.6-.6-1.1-1.1-1.5l1.2-1.2-.7-.7L12.8 8H12c-.2 0-.5 0-.7.1L9.9 6.6l-.8.8 1.2 1.2c-.5.3-.9.8-1.1 1.4H7v1h2v1H7v1h2v1H7v1h2.2c.4 1.2 1.5 2 2.8 2s2.4-.8 2.8-2H17v-1h-2v-1h2v-1h-2v-1h2v-1m-6 2h2v-1h-2v1Z"/></svg>');
    --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2v2h1v14a4 4 0 0 0 4 4 4 4 0 0 0 4-4V4h1V2H7m4 14c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1m2-4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1m1-5h-4V4h4v3Z"/></svg>');
    --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4Z"/></svg>');


    /* Grid color */
    --celum-grid-item-bg-color: var(--celum-blue-primary);
    --celum-grid-item-hover-color: #01A9CA1A;

    /* Footer colors */
    --celum-footer-fg-color: var(--celum-blue-primary);
    --celum-footer-bg-color: var(--md-primary-fg-color);
}

::placeholder {
    color: var(--md-typeset-color);
    opacity: 1;
}

::-ms-input-placeholder {
    color: var(--md-typeset-color);
    opacity: 1;
}

/********** TEMPLATE STYLES **********/

/* global styles */
body, p, ul, ol, a {
    font-family: "Open Sans", sans-serif;
    /*font-size: .7rem;*/
}

/*p, ul, ol {
    margin: 0.3em 0;
}*/

.md-typeset a {
    color: var(--md-typeset-color);
}

/* Header / Tabs */
.md-tabs__item--active .md-tabs__link {
    border-bottom: 0.2rem solid var(--md-primary-bg-color);
}

/* Search */
.md-search__form {
    background-color: var(--md-primary-fg-color);
    border: 1px solid var(--md-typeset-color);
    border-radius: 3px;
}

.md-search__form:hover {
    background-color: var(--celum-link-hover-bg-color);
    color:  var(--md-typeset-color);
}

.md-search__input,
.md-search-result__meta {
    font-size: .7rem;
    color: var(--md-typeset-color);
}

.md-search-result__more>summary>div {
    color: var(--md-typeset-color);
    font-size: .7rem;
}

.md-search-result__more>summary:focus>div,
.md-search-result__more>summary:hover>div,
.md-search-result__link:focus, .md-search-result__link:hover,
.md-search-result__link:focus, .md-search-result__link:hover {
    background-color: var(--celum-link-hover-bg-color);
}

/* Nav links */
.md-nav {
    font-size: .7rem;
    line-height: 21px;
}

.md-nav__link {
    padding-left: 5px;
    margin-top: .325em;
}

.md-nav__link.md-nav__container {
    padding-left: 0px;
}

@media screen and (max-width: 76.234375em) {
    .md-nav__link.md-nav__container {
        padding: .6rem .8rem;
    }
}

/* Padding nav link */
.md-nav__link .md-ellipsis {
    padding: 2px;
}

/* Hover nav link */
.md-nav__item--active .md-nav__container:hover {
    background-color: var(--celum-link-hover-bg-color);
    color: var(--md-typeset-color);
    border-radius: 4px;
}

.md-nav__link[for]:focus,
.md-nav__link[for]:hover,
.md-nav__link[href]:focus,
.md-nav__link[href]:hover {
    background-color: var(--celum-link-hover-bg-color);
    color: var(--md-typeset-color);
    border-radius: 4px;
}

.md-nav__item--active .md-nav__container .md-nav__link:hover {
    background-color: initial;
}

.md-nav__icon:hover {
    background-color: initial;
}

/* Active nav link */
.md-nav__item--active .md-nav__container:has(.md-nav__link--active),
.md-nav__item .md-nav__link--active {
    font-weight: 700;
    background-color: var(--celum-link-active-bg-color);
    border-radius: 4px;
}

.md-nav__item--active .md-nav__container > .md-nav__link--active {
    background-color: initial;
}

/* Nav-link parents of active */
.md-nav__item--active:not(.md-nav__item--section) .md-nav__container > .md-nav__link,
.md-nav__item--active:not(.md-nav__item--section) > .md-nav__toggle + .md-nav__link {
    font-weight: 600;
}

/* On this page */
.md-nav__title {
    color: var(--md-typeset-color);
}

/* Footer */
.md-footer, .md-footer-meta,
.md-copyright,
.md-copyright__highlight {
    color: var(--celum-footer-fg-color);
    background-color: var(--celum-footer-bg-color);
    font-size: .7rem;
    line-height: 21px;
}

/* Search explanation */

/* Info button */
#searchInfoBtn {
    display: inline-block;
    cursor: pointer;
    height: 1.2rem;
    opacity: 1;
    transform: unset;
    float:right;
    pointer-events: auto;
}

#searchInfoBtn.md-icon svg {
    width: 16px;
    height: 16px;
}

/* Modal */
#searchExplanationModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: #263238D9;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.strike {
    text-decoration: line-through;
}

.modal-content {
    overflow-y: auto;
    background-color: var(--md-primary-fg-color);
    margin: 10% auto;
    border-radius: 10px;
    width: 50%;
    height: auto;
    max-height: 70%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* The Close Button */
#closeBtnContainer {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 60px;
    padding-top: 10px;
    padding-right: 10px;
}

/*#closeBtn {*/
#closeBtn {
    color: var(--md-primary-fg-color);
    fill: currentColor;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#closeBtn:hover,
#closeBtn:focus {
    color: #FFFFFFCC;
    text-decoration: none;
    cursor: pointer;
}

/* Azure Login/Logout button and login-status */

.accountInfo {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.2rem 0;
}

.userInfo {
    min-width: 0;
    max-width: 50%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
}

.loginButtonContainer,
.logoutButtonContainer {
    background-color: var(--md-primary-bg-color);
    color: var(--md-primary-fg-color);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    border-radius: 3px !important;
}

a.loginButton,
a.logoutButton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: auto;
    padding: 4px 10px 4px 10px;
}

a.loginButton:hover,
a.logoutButton:hover {
    background-color: var(--celum-button-hover-bg-color);
}

@media screen and (max-width: 59.984375em) {

    .md-nav__source {
        background-color: var(--md-primary-fg-color);
    }

}

@media screen and (min-width: 76.25em) {

    [dir=ltr] .md-header__source {
        margin-left: 0.7rem;
    }
}

/* Cookie consent banner */

.md-consent__form.md-typeset .md-button--primary {
    /*color: var(--celum-bluegrey-600);*/
    background-color: var(--md-primary-bg-color);
    color: var(--md-primary-fg-color);
}

.md-consent__form.md-typeset .md-button--primary:hover {
    background-color: #01A9CAD9;
    border-color: #ffffff;
}

/* Feedback widget */

.md-feedback {
    width: 60%;
    min-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.md-feedback fieldset {
    width: 100%;
    padding-top: 2em;
    padding-bottom: 2em;
    border: 1px solid var(--md-typeset-color);
}

/* Tablet/Mobile view */
@media screen and (max-width: 76.2344em) {

    .md-feedback {
        width: 100%;
    }

    .md-feedback fieldset {
        width: 100%;
    }

}

/* Footer */
.md-copyright {
    margin-left: auto;
    margin-right: auto;
}

.md-footer,
.md-footer-meta,
.md-copyright,
.md-copyright__highlight,
.md-footer-meta.md-typeset a,
html .md-footer-meta.md-typeset a,
html .md-footer-meta.md-typeset a:focus,
html .md-footer-meta.md-typeset a:hover {
    color: var(--md-typeset-color);
    background-color: var(--celum-footer-bg-color);
    font-size: .7rem;
    line-height: 21px;
}

html .md-footer-meta.md-typeset a:focus,
html .md-footer-meta.md-typeset a:hover {
    color: var(--md-primary-bg-color);
}

/********** TOPIC STYLES **********/

.md-grid {
    max-width: 95%;
}

.md-typeset {
    font-size: 16px;
    font-weight: 300;
}

.md-typeset h1 {
    font-size: 34px;
    line-height: 42px;
    margin: 0 0 0.5em 0;
    color: var(--md-typeset-color);
}

.md-typeset h2 {
    font-size: 24px;
    line-height: 32px;
    margin: 1em 0 0.5em 0;
    color: var(--md-typeset-color);
}

.md-typeset h3 {
    font-size: 20px;
    line-height: 28px;
    margin: 1em 0 0.5em 0;
    color: var(--md-typeset-color);
}

.md-typeset h4 {
    font-size: 16px;
    line-height: 28px;
    margin: 1em 0 0.5em 0;
    color: var(--md-typeset-color);
}

.md-typeset h5 {
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    margin: 1em 0 0.3em 0;
    color: var(--md-typeset-color);
}

article a {
    text-decoration: underline;
}

.md-typeset code {
    font-size: .7rem;
}

.md-typeset pre {
    white-space: pre-wrap;
}

/* Table styles */
table {
    table-layout: auto;
    width: 100%;
}

.md-typeset table:not([class]) {
    font-size: 16px;
}

.md-typeset table:not([class]) th:not([align]) {
    color: var(--celum-table-header-fg-color);
    background-color: var(--celum-table-header-bg-color);
    text-align: center;
    /*white-space: nowrap !important;*/
    word-break: break-word;
}

table, table td,
table, table td p {
    /*word-wrap: normal !important;*/
    word-break: break-word;
}

table th,
table th p {
    /*white-space: nowrap !important;*/
    word-break: break-word;
}

.md-typeset table:not([class]) th:not([align]).alignLeft {
    text-align: left;
}

.md-typeset table:not([class]) td:not([align]).alignCenter,
.md-typeset table:not([class]) th:not([align]).alignCenter {
    text-align: center;
}

.unsupported-highlight {
    background-color: rgba(255, 63, 63, 0.1)
}

.future-highlight {
    background-color: rgba(207, 216, 220, 0.28);
}

.md-typeset table:not([class]) td:not([align]).highlighted {
    background-color: var(--celum-table-cell-special-bg-color);
    color: var(--md-typeset-color);
}

.md-typeset table:not([class]) td:not([align]).grey {
    background-color: var(--celum-table-cell-grey);
    color: var(--md-typeset-color);
}


.md-typeset table:not([class]) th:not([align]).highlighted {
    background-color: var(--celum-table-header-special-bg-color);
    color: var(--md-typeset-color);
}

.md-typeset table:not([class]) a {
    word-break: break-all;
}

.table-no-header table thead {
    display: none;
}

/* Admonition styles */
html .md-typeset .admonition-title, html .md-typeset summary {
    margin: -6.5px -10px;
}

html .md-typeset .admonition, html .md-typeset details {
    padding: 5px 10px 0 10px;
    border-radius: 2px;
    font-size: 16px;
}

html .md-typeset .admonition p, html .md-typeset details p {
    font-size: 16px;
}

.md-typeset ol li .admonition p:not(.admonition-title), .md-typeset ul li .admonition p:not(.admonition-title) {
    margin: revert;
}

/* Danger */
.admonition.danger {
    border-color: var(--celum-admonition-danger-border-color);
}
.admonition.danger .admonition-title:before {
    background-color: var(--celum-admonition-danger-border-color);
}
.md-typeset .warning>.admonition-title, .md-typeset .warning>summary {
    background-color: var(--celum-admonition-danger-bg-color);
}

/* Info */
.admonition.info {
    border-color: var(--celum-admonition-info-border-color);
}
.admonition.info .admonition-title:before {
    background-color: var(--celum-admonition-info-border-color);
}
.md-typeset .info>.admonition-title, .md-typeset .info>summary {
    background-color: var(--celum-admonition-info-bg-color);
}

/* Tip */
.admonition.tip {
    border-color: var(--celum-admonition-tip-border-color);
}
.admonition.tip .admonition-title:before {
    border-color: var(--celum-admonition-tip-border-color);
}
.md-typeset .tip>.admonition-title, .md-typeset .tip>summary {
    background-color: var(--celum-admonition-tip-bg-color);
}

/* Warning */
.admonition.warning {
    border-color: var(--celum-admonition-warning-border-color);
}
.admonition.warning .admonition-title:before {
    background-color: var(--celum-admonition-warning-border-color);
}
.md-typeset .warning>.admonition-title, .md-typeset .warning>summary {
    background-color: var(--celum-admonition-warning-bg-color);
}


/* Image styles */

.resize-icons img {
    width: 16px !important;
    height: auto;
}

.resize-image-small img {
    width: 150px !important;
    height: auto;
}

.resize-image-medium img {
    width: 512px !important;
    height: auto;
}

.resize-image-large img {
    width: 1024px;
    max-width: 100%;
    height: auto;
}

.resize-image-xlarge img {
    width: 1280px;
    max-width: 100%;
    height: auto;
}

.resize-image-xxlarge img {
    width: 1560px;
    max-width: 100%;
    height: auto;
}

.resize-image-third img {
    width: 33% !important;
    height: auto;
}

.resize-image-third-inline img {
    width: 32%;
    height: auto;
    display: inline;
}

.resize-image-half img {
    width: 50% !important;
    height: auto;
}

.resize-image-half-inline img {
    width: 49%;
    height: auto;
    display: inline;
}

.resize-image-twothirds img {
    width: 75% !important;
    height: auto;
}

.hidden {
    display: none;
}


/* HTML emojis */

span.checkmark:before {
    width: 20px;
    height: 20px;
    vertical-align: text-top;
    content: "";
    display: inline-block;
    background-color: var(--celum-admonition-tip-border-color);
    -webkit-mask-image: var(--md-admonition-icon--success);
    mask-image: var(--md-admonition-icon--success);
    mask-size: contain;
    mask-repeat: no-repeat;
}

span.cross:before {
    width: 20px;
    height: 20px;
    vertical-align: text-top;
    content: "";
    display: inline-block;
    background-color: var(--celum-admonition-danger-border-color);
    -webkit-mask-image: var(--md-admonition-icon--failure);
    mask-image: var(--md-admonition-icon--failure);
    mask-size: contain;
    mask-repeat: no-repeat;
}

span.info:before {
    width: 20px;
    height: 20px;
    vertical-align: text-top;
    content: "";
    display: inline-block;
    background-color: var(--celum-admonition-info-border-color);
    -webkit-mask-image: var(--md-admonition-icon--info);
    mask-image: var(--md-admonition-icon--info);
    mask-size: contain;
    mask-repeat: no-repeat;
}

span.warning:before {
    width: 20px;
    height: 20px;
    vertical-align: text-top;
    content: "";
    display: inline-block;
    background-color: var(--celum-admonition-warning-border-color);
    -webkit-mask-image: var(--md-admonition-icon--warning);
    mask-image: var(--md-admonition-icon--warning);
    mask-size: contain;
    mask-repeat: no-repeat;
}

/* index page TOCs */

.md-grid {
    max-width: 95%;
}

.md-typeset .grid {
    /*grid-template-columns: repeat(auto-fill, minmax(300px, 48%));*/
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    justify-content: center;
}

/* card general */
/* Lighter background for contrast */
/* Accent color on the side for modernity */
/* Lighter shadow for subtlety */
/* Smooth transition for hover effect */
.card {
    background: var(--celum-bluegrey-50);
    border-left: 5px solid var(--md-primary-bg-color);
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px var(--celum-bluegrey-600);
    transition: transform 0.2s;
}

.card p {
    margin-bottom: 0.5rem;
    line-height: 1.4;
    text-align: left;
}

.md-typeset .grid.cards>ol>li,
.md-typeset .grid.cards>ul>li,
.md-typeset .grid>.card,
.md-typeset .grid.cards>a {
    border: 1px solid var(--celum-grid-item-bg-color);
    background-color: var(--celum-grid-item-bg-color);
    text-align: center;
    padding: 1rem;
}

/*.md-typeset .grid.cards>a p {
    text-align: center;
}*/

.md-typeset .grid.cards>ol>li a, .md-typeset .grid.cards>ul>li a, .md-typeset .grid>.card a,
.md-typeset .grid.cards>ol>li p, .md-typeset .grid.cards>ul>li p, .md-typeset .grid>.card p,
.md-typeset .grid.cards>a p {
    color: var(--md-primary-fg-color);
}

.md-typeset .grid.cards > a,
.md-typeset .grid.cards > a > p {
    text-decoration: none;
}

.md-typeset .grid.cards>ol>li a, .md-typeset .grid.cards>ul>li a, .md-typeset .grid>.card a {
    font-weight: bold;
}

.md-typeset .grid.cards>ol>li:hover, .md-typeset .grid.cards>ul>li:hover, .md-typeset .grid>.card:hover,
.md-typeset .grid.cards>a:hover {
    background-color: var(--celum-card-hover-bg-color);
}

.hidden {
    display: none;
}

/* YouTube embedding */

.md-typeset .youtube-embed-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 60%;
    padding-top: calc(56.25%*0.6); /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    min-width: 300px; /* Smallest emulatable phone width is 344px */
    margin-left: 20%;
    margin-right: 20%;
}

.md-typeset .user-academy-resized,
.md-typeset .user-academy-resized_headline {
    width: 60%;
    min-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/*.md-typeset .user-academy-resized_headline {
    text-align: center;
}*/

.youtube-placeholder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38%, 50%, 56%, 0.5);
}

.youtube-cookie-hint-container {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    max-width: calc(100% - 70px);
    max-height: calc(100% - 35px);
    transform: translateX(-50%) translateY(-50%);
    flex-direction: column;
    width: 60%;
    padding: 2%;
    z-index: 4;
    background-color: var(--md-primary-fg-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    overflow: auto;
}

.youtube-cookie-hint-title {
    font-weight: bold;
}

/* Tablet/Mobile view */
@media screen and (max-width: 76.2344em) {

    .md-typeset .youtube-embed-container {
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
        margin-left: 0;
        margin-right: 0;
    }

    .md-typeset .user-academy-resized,
    .md-typeset .user-academy-resized_headline {
        width: 100%;
    }

}

.md-typeset .youtube-embed-container iframe,
.md-typeset img#youtube-placeholder-img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}