header {
    background-color: var(--websiteHeaderBackgroundColor);
    position: fixed;
    top: 0;
    left: 0;
    padding-left: calc(var(--logoWidth) + var(--websiteHeaderPaddingLeft));
    width: calc(100vw - var(--logoWidth) - var(--websiteHeaderPaddingLeft));
    height: var(--websiteHeaderHeight);
    z-index: 100;
    display: grid;
    justify-content: end;
    align-items: center;
    grid-template-columns: var(--websiteHeaderGridTemplateColumns);
    /*box-shadow: var(--websiteHeaderBoxShadow);*/
    border-bottom: 4px solid #000000;
}

header #websiteTitle {
    letter-spacing: var(--websiteTitleLetterSpacing);
    color: var(--websiteTitleColor);
    user-select: none;
    text-transform: uppercase;
    font-size: var(--websiteTitleFontSize);
    /*text-shadow: var(--websiteTitleTextShadow);*/
    display: var(--websiteTitleDisplay);
    margin-left: 1rem;
}

header #websiteTitle span {
    color: var(--secondaryColor);
}

header #headerIcons {
    text-align: right;
    height: var(--webSiteHeaderIconsHeight);
}

header #headerIcons i {
    width: var(--webSiteHeaderIconsWidth);
    height: var(--webSiteHeaderIconsHeight);
}

header #headerIcons i svg {
    fill: var(--webSiteHeaderIconsFill);
    margin: var(--webSiteHeaderIconsMargin);
    cursor: pointer;
    width: var(--webSiteHeaderIconsWidth);
    height: var(--webSiteHeaderIconsHeight);
}

header #headerIcons i svg:hover {
    fill: var(--secondaryColor);
}

header #avatarIcon {
    width: var(--websiteHeaderAvatarWidth);
    height: calc(var(--websiteHeaderAvatarHeight) + 4px);
    margin: var(--websiteHeaderAvatarMargin);
    position: relative;
}

header #avatarIcon div:nth-child(1) {
    background-color: #DDDDDD;
    color: #000000;
    width: var(--websiteHeaderAvatarWidth);
    height: var(--websiteHeaderAvatarHeight);
    font-size: var(--websiteHeaderAvatarFontSize);
    border: solid 2px #999999;
    line-height: var(--websiteHeaderAvatarLineHeight);
    text-align: center;
    /*background-image: url("images/face.jpg");*/
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

header #avatarIcon label {
    border: 0;
    clip: rect(0 0 0 0);
    height: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

#userMenuTrigger {
    opacity: 0;
    position: absolute;
    width: var(--websiteHeaderAvatarWidth);
    height: var(--websiteHeaderAvatarHeight);
    left: 0;
    top: 0;
    cursor: pointer;
}

#userMenuTrigger:checked + nav#userMenu {
    display: grid !important;
}

#logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondaryColor);
    width: var(--logoWidth);
    height: var(--logoHeight);
    /*border-bottom-right-radius: var(--logoBottomRightRadius);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--logoBackgroundSize);
    transition: 0.4s;
    position: fixed;
    z-index: var(--logoZIndex);
    top: 1rem;
    left: 1rem;
    /*box-shadow: var(--logoBoxShadow);*/
    /*border-radius: 50%;*/
    border: 4px solid #FFFFFF;
}

#logo:hover {
    background-color: #666666;
}

#logo > img {
    width: 70%
}

#sidebar {
    background-color: var(--sidebarBackgroundColor);
    width: var(--sidebarWidth);
    height: calc(var(--sidebarHeight) - var(--sidebarPaddingTop));
    position: fixed;
    top: calc(var(--logoHeight) / 2);
    left: 0;
    padding-top: var(--sidebarPaddingTop);
    z-index: 1;
    justify-items: center;
    align-content: center;
    display: grid;
    grid-template-rows: var(--sidebarGridTemplateRows);
    grid-template-columns: var(--sidebarGridTemplateColumns);
    /*box-shadow: var(--sidebarBoxShadow);*/
}

#menuTrigger {
    opacity: 0;
    position: absolute;
    width: var(--quickLinksIconWidth);
    height: var(--quickLinksIconHeight);
    left: 0;
    top: 0;
    cursor: pointer;
}

#menuTrigger:checked + nav {
    display: block !important;
}

#quickLinks > ul > li:nth-child(1) > div {
    position: relative;
    width: var(--quickLinksIconWidth);
    height: var(--quickLinksIconHeight);
    margin: 0;
}

#quickLinks > ul > li:nth-child(1) > div > i > svg {
    width: var(--quickLinksIconWidth);
    height: var(--quickLinksIconHeight);
}

#quickLinks > ul > li:nth-child(1) > div > label {
    border: 0;
    clip: rect(0 0 0 0);
    height: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

#quickLinks {
    width: 100%;
}

#quickLinks > ul {
    display: flex;
    flex-direction: var(--quickLinksFlexDirection);
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--quickLinksFlexGap);
    width: 100%;
}

#quickLinks > ul > li {
    flex-shrink: 0;
    width: var(--quickLinksIconWidth);
    height: var(--quickLinksIconHeight);
}

#quickLinks > ul > li#subheaderMenuTriggerContainer {
    width: var(--subheaderMenuTriggerContainerWidth);
    display: flex;
    justify-content: center;
}

#quickLinks > ul > li#subheaderTitle {
    flex-grow: 1;
    height: var(--quickLinksIconHeight);
    line-height: var(--quickLinksIconHeight);
}

#quickLinks > ul > li#subheaderTitle > a {
    color: var(--quickLinksIconFill);
}

#quickLinks > ul > li#subheaderSort {
    display: flex;
    justify-content: center;
}

#quickLinks > ul > li#subheaderGrid{
    display: flex;
    justify-content: center;
}

#quickLinks > ul > li#subheaderSearch {
    display: flex;
    justify-content: center;
    margin-right: var(--subheaderSearchMarginRight);
}

#quickLinks > ul > li:first-child {
    margin-bottom: var(--quickLinksFirstChildBottomMargin);
}

#quickLinks > ul > li:last-child {
    margin-top: var(--quickLinksLastChildTopMargin);
}

#quickLinks > ul > li > a {
    display: block;
    position: relative;
}

#quickLinks > ul > li > a > i > svg {
    fill: var(--quickLinksIconFill);
    width: var(--quickLinksIconWidth);
    height: var(--quickLinksIconHeight);
}

#quickLinks > ul > li > a > i > svg:hover {
    fill: var(--secondaryColor) !important;
}

#quickLinks > ul > li > a > i > span {
    position: absolute;
    background-color: #000000;
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1rem;
    padding: 0.4rem 0.6rem 0.5rem 0.6rem;
    left: 3rem;
    top: 0;
    visibility: hidden;
    z-index: 4;
    box-shadow: 0 0 1px 1px rgb(200 200 200);
    /*border-radius: 4px;*/
}

#quickLinks > ul > li > a:hover > i > span {
    visibility: visible;
}

.quickLinksDesktop {
   display: var(--quickLinksDesktopDisplay) !important;
}

.quickLinksMobile {
   display: var(--quickLinksMobileDisplay) !important;
}

#languageSwitcher {
    display: var(--languageIconDisplay) !important;
    width: 2rem;
    height: 2rem;
}

#languageSwitcher > a {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-image: url("../images/en.svg");
    background-size: cover;
    background-position: center;
}

:root {

    /* Colors */
    --primaryColor: #336699;
    --primaryColorHover: #666666;
    --secondaryColor: #ED6639;
    --secondaryColorHover: #666666;
    --creditsColor: #009966;
    --creditsColorHover: #00bb7e;

    /* Margins */
    --smallMargin: 0.5rem;
    --defaultMargin: 1rem;
    --largeMargin: 2rem;

    /* H1 */
    --h1FontSize: 2rem;
    --h1Margin: 0 0 var(--defaultMargin) 0;

    /* Section header */
    --sectionHeaderMarginTop: var(--defaultMargin);
    --sectionHeaderMarginBottom: var(--smallMargin);

    /* Website header */
    --websiteHeaderHeight: 3rem;
    --websiteHeaderGridTemplateColumns: 1fr auto auto;
    --websiteHeaderBoxShadow: none;
    --websiteHeaderBackgroundColor: #00303F;
    --websiteHeaderPaddingLeft: 0.5rem;

    /* Logo */
    --logoWidth: 3rem;
    --logoHeight: 3rem;
    --logoBottomRightRadius: none;
    --logoBackgroundSize: 3rem;
    --logoBoxShadow: none;
    --logoZIndex: 101;

    /* Website title */
    --websiteTitleDisplay: inline-block;
    --websiteTitleLetterSpacing: normal;
    --websiteTitleColor: #FFFFFF;
    --websiteTitleFontSize: 1rem;
    --websiteTitleTextShadow: none;

    /* Website header icons */
    --webSiteHeaderIconsWidth: 24px;
    --webSiteHeaderIconsHeight: 24px;
    --webSiteHeaderIconsMargin: auto 0.5rem;
    --webSiteHeaderIconsFill: #FFFFFF;

    /* Communicator */
    --communicatorTop: calc(var(--websiteHeaderHeight) + var(--sidebarHeight));
    --communicatorHeight: calc(100vh - (var(--websiteHeaderHeight) - var(--sidebarHeight)));

    /* Messenger */
    --messengerDialogLeft: 0;
    --messengerDialogWidth: 100vw;

    /* Website avatar */
    --websiteHeaderAvatarWidth: 2rem;
    --websiteHeaderAvatarHeight: 2rem;
    --websiteHeaderAvatarMargin: auto 1rem;
    --websiteHeaderAvatarFontSize: 1rem;
    --websiteHeaderAvatarLineHeight: 2rem;

    /* Sidebar */
    --sidebarWidth: 100vw;
    --sidebarHeight: 2rem;
    --sidebarBackgroundColor: #DCAE1D;
    --sidebarBoxShadow: 0 2px 2px rgb(200 200 200);
    --sidebarGridTemplateRows: auto;
    --sidebarGridTemplateColumns: auto;
    --sidebarPaddingTop: 0rem;

    /* Sidebar icons */
    --quickLinksFlexDirection: row;
    --quickLinksFlexGap: 0.5rem;
    --quickLinksDesktopDisplay: none;
    --quickLinksMobileDisplay: block;
    --quickLinksFirstChildBottomMargin: 0;
    --quickLinksLastChildTopMargin: 0;
    --quickLinksIconFill: #000000;
    --quickLinksIconWidth: 24px;
    --quickLinksIconHeight: 24px;
    --subheaderSearchMarginRight: 0.5rem;
    --subheaderMenuTriggerContainerWidth: var(--logoWidth);

    /* Main navigation */
    --mainNavigationTop: calc(var(--websiteHeaderHeight) + var(--sidebarHeight));
    --mainNavigationLeft: 0;
    --mainNavigationZIndex: 999;
    --mainNavigationBackgroundColor: #000000;
    --mainNavigationMinimalWidth: 100vw;
    --mainNavigationHeight: calc(100vh - var(--mainNavigationPaddingTop));
    --mainNavigationPaddingTop: 0rem;
    --mainNavigationBoxShadow: 2px 0 2px rgb(100 100 100);
    --mainNavigationItemBorderTop: 1px solid #666666;
    --mainNavigationItemColor: #999999;
    --mainNavigationItemBackgroundColor: #000000;
    --mainNavigationItemPadding: 1rem 1rem 1rem 1rem;
    --mainNavigationItemMargin: 0 1rem 0 1rem;
    --mainNavigationIconRightMargin: 0.5rem;
    --mainNavigationIconWidth: 24px;
    --mainNavigationIconHeight: 24px;
    --mainNavigationItemColor: #FFFFFF;
    --mainNavigationItemHoverBackgroundColor: #000000;

    /* Language icon */
    --languageIconDisplay: none;

    /* Content */
    --contentMarginTop: calc(var(--websiteHeaderHeight) + var(--sidebarHeight));
    --contentWidth: 100vw;
    --contentMarginLeft: 0;

    /* Breadcrumbs */
    --breadcrumbsDisplay: none;

    /* Page grid */
    --pageGridDefaultTemplateColumns: 1fr;
    --pageGridDefaultTemplateColumnGap: 0;
    --pageGridDefaultAlignItems: stretch;
    --pageGridDefaultMarginLeft: 0;
    --pageGridDefaultMarginRight: 0;
    --pageGridDefaultMarginBottom: 0;
    --pageGridLeftTemplateColumns: 1fr;
    --pageGridRightTemplateColumns: 1fr;
    --pageGridSingleTemplateColumns: 1fr;

    /* Subnavigation */
    --subnavigationTriggerContainerDisplay: inline-block;
    --subnavigationDisplay: none;
    --subnavigationPosition: fixed;
    --subnavigationTop: calc(var(--websiteHeaderHeight) + var(--sidebarHeight));
    --subnavigationLeft: 0;
    --subnavigationBackgroundColor: #EEEEEE;
    --subnavigationWidth: 100vw;
    --subnavigationHeight: calc(100vh - var(--websiteHeaderHeight) - var(--sidebarHeight));
    --subnavigationMarginTop: 0;
    --subnavigationPadding: 1rem;
    --subnavigationOverflowY: auto;

    /* Main content element */
    --mainContentElementMargin: var(--defaultMargin);
    --mainContentElementPadding: var(--defaultMargin);

    /* Aside */
    --assideBackgroundColor: #000000;
    --assidePadding: 1rem;
    --asideSectionHeaderColor: #FFFFFF;
}

@media (min-width: 1025px) {

    :root {

        /* Margins */
        --smallMargin: 1rem;
        --defaultMargin: 2rem;
        --largeMargin: 3rem;

        /* H1 */
        --h1FontSize: 4rem;
        --h1Margin: 0 0 var(--largeMargin) 0;

        /* Section header */
        --sectionHeaderMarginTop: var(--largeMargin);
        --sectionHeaderMarginBottom: var(--smallMargin);

        /* Website header */
        --websiteHeaderHeight: 5rem;
        --websiteHeaderGridTemplateColumns: 1fr auto auto;
        --websiteHeaderBoxShadow: 0 0 2px 2px rgb(200 200 200);
        --websiteHeaderBackgroundColor: var(--primaryColor);
        --websiteHeaderPaddingLeft: 2rem;

        /* Logo */
        --logoWidth: 10rem;
        --logoHeight: 10rem;
        --logoBottomRightRadius: 0.5rem;
        --logoBackgroundSize: 10rem;
        --logoBoxShadow: 0 0 2px 2px rgb(100 100 100);
        --logoZIndex: 101;

        /* Website title */
        --websiteTitleDisplay: inline-block;
        --websiteTitleLetterSpacing: 2px;
        --websiteTitleColor: #FFFFFF;
        --websiteTitleFontSize: 1.5rem;
        --websiteTitleTextShadow: 0px 1px 0px rgba(255, 255, 255, 1);

        /* Website header icons */
        --webSiteHeaderIconsWidth: 32px;
        --webSiteHeaderIconsHeight: 32px;
        --webSiteHeaderIconsMargin: auto 1rem;
        --webSiteHeaderIconsFill: #FFFFFF;

        /* Communicator */
        --communicatorTop: var(--websiteHeaderHeight);
        --communicatorHeight: calc(100vh - var(--websiteHeaderHeight));

        /* Messenger */
        --messengerDialogLeft: calc(-40vw - 2rem);
        --messengerDialogWidth: 40vw;

        /* Website avatar */
        --websiteHeaderAvatarWidth: 3rem;
        --websiteHeaderAvatarHeight: 3rem;
        --websiteHeaderAvatarMargin: auto 2rem;
        --websiteHeaderAvatarFontSize: 1.5rem;
        --websiteHeaderAvatarLineHeight: 3rem;

        /* Sidebar */
        --sidebarWidth: 5rem;
        --sidebarHeight: calc(100vh - var(--logoHeight) / 2 );
        --sidebarBackgroundColor: #EEEEEE;
        --sidebarBoxShadow: 0 0 2px 2px rgb(200 200 200);
        --sidebarGridTemplateRows: 1fr 3rem;
        --sidebarGridTemplateColumns: auto;
        --sidebarPaddingTop: calc((var(--logoHeight) / 2) + 3rem);

        /* Sidebar icons */
        --quickLinksFlexDirection: column;
        --quickLinksFlexGap: 1rem;
        --quickLinksDesktopDisplay: block;
        --quickLinksMobileDisplay: none;
        --quickLinksFirstChildBottomMargin: 2rem;
        --quickLinksLastChildTopMargin: 2rem;
        --quickLinksIconFill: #000000;
        --quickLinksIconWidth: 32px;
        --quickLinksIconHeight: 32px;
        --subheaderSearchMarginRight: 0;
        --subheaderMenuTriggerContainerWidth: var(--sidebarWidth);

        /* Main navigation */
        --mainNavigationTop: var(--websiteHeaderHeight);
        --mainNavigationLeft: var(--sidebarWidth);
        --mainNavigationZIndex: 1;
        --mainNavigationBackgroundColor: #DDDDDD;
        --mainNavigationMinimalWidth: 20rem;
        --mainNavigationHeight: calc(100vh - var(--mainNavigationPaddingTop));
        --mainNavigationPaddingTop: calc(var(--logoHeight) - var(--websiteHeaderHeight) + 2rem);
        --mainNavigationBoxShadow: 2px 0 2px rgb(200 200 200);
        --mainNavigationItemBorderTop: 1px solid #999999;
        --mainNavigationItemColor: #999999;
        --mainNavigationItemBackgroundColor: #DDDDDD;
        --mainNavigationItemPadding: 1rem 2rem;
        --mainNavigationItemMargin: 0;
        --mainNavigationIconRightMargin: 0.5rem;
        --mainNavigationIconWidth: 24px;
        --mainNavigationIconHeight: 24px;
        --mainNavigationItemColor: #000000;
        --mainNavigationItemHoverBackgroundColor: #CCCCCC;

        /* Language icon */
        --languageIconDisplay: block;

        /* Content */
        --contentMarginTop: var(--websiteHeaderHeight);
        --contentWidth: calc(100vw - var(--sidebarWidth));
        --contentMarginLeft: var(--sidebarWidth);

        /* Breadcrumbs */
        --breadcrumbsDisplay: flex;

        /* Page grid */
        --collumnWidthSubnavigation: 15%;
        --collumnWidthMain: 1fr;
        --collumnWidthAside: 20%;
        --pageGridDefaultTemplateColumns: var(--collumnWidthSubnavigation) var(--collumnWidthMain) var(--collumnWidthAside);
        --pageGridDefaultTemplateColumnGap: var(--largeMargin);
        --pageGridDefaultAlignItems: start;
        --pageGridDefaultMarginLeft: var(--largeMargin);
        --pageGridDefaultMarginRight: var(--largeMargin);
        --pageGridDefaultMarginBottom: var(--largeMargin);
        --pageGridLeftTemplateColumns: var(--collumnWidthMain) var(--collumnWidthAside);
        --pageGridRightTemplateColumns: var(--collumnWidthSubnavigation) var(--collumnWidthMain);
        --pageGridSingleTemplateColumns: var(--collumnWidthMain);

        /* Subnavigation */
        --subnavigationTriggerContainerDisplay: none;
        --subnavigationDisplay: block;
        --subnavigationPosition: static;
        --subnavigationTop: auto;
        --subnavigationLeft: auto;
        --subnavigationBackgroundColor: transparent;
        --subnavigationWidth: auto;
        --subnavigationHeight: auto;
        --subnavigationMarginTop: 4rem;
        --subnavigationPadding: 0;
        --subnavigationOverflowY: visible;

        /* Main content element */
        --mainContentElementMargin: 0rem;
        --mainContentElementPadding: var(--largeMargin);

        /* Aside */
        --assideBackgroundColor: transparent;
        --assidePadding: 0;
        --asideSectionHeaderColor: #000000;
    }
}

html {
    font-size: 100%;
    overflow: hidden;
}

body {
    font-family: Ubuntu, 'Noto Sans', Arial, sans-serif;
    font-size: 1rem;
    color: #000000;
    background-color: #FFFFFF;
    background-image: url("../images/bg/triangles.png");
}

*, *::before, *::after {
    /*box-sizing: border-box;*/
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, var {
    font-style: italic;
}

strong, b, th {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

ol, ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
}

a {
    text-decoration: none;
    color: #000000;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

textarea {
    field-sizing: content;
}

#mainNavigation {
    position: fixed;
    top: var(--mainNavigationTop);
    left: var(--mainNavigationLeft);
    background-color: var(--mainNavigationBackgroundColor);
    min-width: var(--mainNavigationMinimalWidth);
    width: fit-content;
    height: var(--mainNavigationHeight);
    padding-top: var(--mainNavigationPaddingTop);
    overflow-y: auto;
    display: none;
    z-index: var(--mainNavigationZIndex);
    /*box-shadow: var(--mainNavigationBoxShadow);*/
}

#mainNavigation ul {
    display: block;
    width: 100%
}

#mainNavigation ul li {
    display: block;
    width: 100%;
}

#mainNavigation a {
    border-top: var(--mainNavigationItemBorderTop);
    color: var(--mainNavigationItemColor);
    background-color: var(--mainNavigationItemBackgroundColor);
    padding: var(--mainNavigationItemPadding);
    margin: var(--mainNavigationItemMargin);
    display: flex;
    align-items: center;
}

#mainNavigation a i {
    margin-right: var(--mainNavigationIconRightMargin);
}

#mainNavigation a i svg {
    display: block;
    width: var(--mainNavigationIconWidth);
    height: var(--mainNavigationIconHeight);
    fill: var(--mainNavigationItemColor);
}

#mainNavigation a p {
    color: var(--mainNavigationItemColor);
    display: inline-block;
}

#mainNavigation a:hover {
    background-color: var(--mainNavigationItemHoverBackgroundColor);
}

#mainNavigation li:first-child a {
    border-top: none;
}

#userMenu {
    display: none;
    position: fixed;
    z-index: 20;
    top: var(--websiteHeaderHeight);
    right: 0;
    box-shadow: -2px 2px 2px rgb(200 200 200);
}

#userMenu ul {
    display: grid;
    padding: 0;
    margin: 0;
    list-style: none;
}

#userMenu a {
    background-color: #DDDDDD;
    color: #999999;
    padding: 1rem 2rem 1rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.5rem;
    border-top: 1px solid #999999;
    text-decoration: none;
}

#userMenu a i {
    display: flex;
    align-items: center;
    justify-content: center;
}

#userMenu a i svg {
    display: block;
    width: 24px;
    height: 24px;
}

#userMenu a p {
    margin: 0;
    grid-column: 2;
}

#userMenu a p:first-of-type {
    color: #000000 !important;
}

#userMenu a:hover {
    background-color: #CCCCCC;
}

#userMenu li:first-child a {
    border-top: none;
}

#communicator {
    background-color: #DDDDDD;
    position: fixed;
    top: var(--communicatorTop);
    right: 0;
    height: var(--communicatorHeight);
    display: none;
    max-width: 100vw;
}

#communicator > div {
    height: 100%;
    position: relative;
}

/* Tabs */
#communicator > div > div:first-child {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    justify-content: center;
    position: relative;
}

#communicator > div > div:first-child > div {
    background-color: #CCCCCC;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
}

#communicator > div > div:first-child > div:hover {
    background-color: #DDDDDD;
}

.communicatorTabOn {
    background-color: #DDDDDD !important;
}

#communicator > div > div:first-child > div > i > svg {
    fill: #000000;
    width: 24px;
    height: 24px;
}

#communicator > div > div:first-child > div > p {
    font-size: 1rem;
    /*text-transform: uppercase;*/
    margin-top: 0.1rem;
}

/* Content */
#communicator > div > div:nth-child(2) {
    height: 100%;
}

#communicator > div > div:nth-child(2) > div {
    height: 100%;
    overflow-y: auto;
}

#dialogue {
    position: absolute;
    top: 0;
    left: var(--messengerDialogLeft);
    width: var(--messengerDialogWidth);
    height: var(--communicatorHeight);
    background-color: #CCCCCC;
    display: none;
    padding: 1rem;
    overflow-y: auto;
}


#dialogue > i { /* TEMP */
    margin-bottom: 1rem;
}

#breadcrumbs {
    display: var(--breadcrumbsDisplay);
    align-items: center;
    height: 3rem;
    /*padding-left: calc(var(--logoWidth) - var(--sidebarWidth) + 20rem + var(--logoLeft));*/
    padding-left: 8rem;
    font-size: 1rem;
    color: #000000;
    background-color: #DDDDDD;
}

#breadcrumbs p {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 4px;
}

#breadcrumbs i {
    display: flex;
    align-items: center;
}

#breadcrumbs svg {
    display: block;
    fill: #999999 !important;
}

#breadcrumbs a {
    color: #000000;
}

#breadcrumbs a:hover {
    color: var(--secondaryColor);
}

#content {
    margin-top: var(--contentMarginTop);
    height: calc(100vh - var(--contentMarginTop));
    width: var(--contentWidth);
    overflow-y: auto;
    margin-left: var(--contentMarginLeft);
}

#pageGridDefault {
    display: grid;
    grid-template-columns: var(--pageGridDefaultTemplateColumns);
    column-gap: var(--pageGridDefaultTemplateColumnGap);
    align-items: var(--pageGridDefaultAlignItems);
    margin-left: var(--pageGridDefaultMarginLeft);
    margin-right: var(--pageGridDefaultMarginRight);
    margin-bottom: var(--pageGridDefaultMarginBottom);
}

#pageGridLeft {
    display: grid;
    grid-template-columns: var(--pageGridLeftTemplateColumns);
    column-gap: var(--pageGridDefaultTemplateColumnGap);
    align-items: var(--pageGridDefaultAlignItems);
    margin-left: var(--pageGridDefaultMarginLeft);
    margin-right: var(--pageGridDefaultMarginRight);
    margin-bottom: var(--pageGridDefaultMarginBottom);
}

#pageGridRight {
    display: grid;
    grid-template-columns: var(--pageGridRightTemplateColumns);
    column-gap: var(--pageGridDefaultTemplateColumnGap);
    align-items: var(--pageGridDefaultAlignItems);
    margin-left: var(--pageGridDefaultMarginLeft);
    margin-right: var(--pageGridDefaultMarginRight);
    margin-bottom: var(--pageGridDefaultMarginBottom);
}

#pageGridSingle {
    display: grid;
    grid-template-columns: var(--pageGridSingleTemplateColumns);
    column-gap: var(--pageGridDefaultTemplateColumnGap);
    align-items: var(--pageGridDefaultAlignItems);
    margin-left: var(--pageGridDefaultMarginLeft);
    margin-right: var(--pageGridDefaultMarginRight);
    margin-bottom: var(--pageGridDefaultMarginBottom);
}

#subnavigation {
    margin-top: var(--subnavigationMarginTop);
    padding: var(--subnavigationPadding);
    overflow-y: var(--subnavigationOverflowY);
}

#subnavigation ul > li {
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

#subnavigation ul > li > a > span {
    color: #999999;
}

#subnavigation ul > li:has(a)::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #999999;
    margin-right: 12px;
    flex-shrink: 0;
}

#subnavigation a {
    font-size: 1.25rem;
    color: #000000;
}

#subnavigation a:hover {
    color: var(--secondaryColor);
}

.sch_cms_menu_on {
    color: var(--secondaryColor) !important;
}

#subnavigation p {
    font-size: 1.5rem;
    color: #CCCCCC;
    text-transform: uppercase;
}

#subnavigationContainer {
    text-align: right;
}

#subnavigationTriggerContainer {
    position: relative;
}

#subnavigationTriggerContainer i {
    display: var(--subnavigationTriggerContainerDisplay);
    width: 32px;
    height: 32px;
    margin: 0.5rem 0.5rem 0 0;
}

#subnavigationTriggerContainer svg {
    display: var(--subnavigationTriggerContainerDisplay);
    fill: #000000 !important;
    width: 32px;
    height: 32px;
    z-index: 5;
    position: relative;
}

#subnavigationTriggerContainer label {
    display: var(--subnavigationTriggerContainerDisplay);
    border: 0;
    clip: rect(0 0 0 0);
    height: 0;
    width: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    margin: 0.5rem 0.5rem 0 0;
}

#subnavigationTrigger {
    display: var(--subnavigationTriggerContainerDisplay);
    opacity: 0;
    position: absolute;
    width: 32px;
    height: 32px;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 6;
    margin: 0.5rem 0.5rem 0 0;
}

#subnavigationTrigger:checked + nav#subnavigation {
    display: block !important;
}

#subnavigation {
    text-align: left;
    display: var(--subnavigationDisplay);
    position: var(--subnavigationPosition);
    top: var(--subnavigationTop);
    left: var(--subnavigationLeft);
    background-color: var(--subnavigationBackgroundColor);
    width: var(--subnavigationWidth);
    height: var(--subnavigationHeight);
    z-index: 4;
}

main {
    /*background-color: #EEEEEE;*/
    /*padding: var(--largeMargin);*/
    /*box-shadow: 0 0 2px 2px rgb(200 200 200);*/
    /*border-radius: 1rem;*/
    /*margin-top: 6rem;*/
}

.mainContentElement {
    background-color: #EEEEEE;
    padding: var(--mainContentElementPadding);
    /*box-shadow: 0 0 2px 2px rgb(200 200 200);*/
    /*border-radius: 1rem;*/
    margin: var(--mainContentElementMargin);
    width: calc(100% - (var(--mainContentElementMargin) * 2)  - (var(--mainContentElementPadding) * 2));
    position: relative;
    margin-top: var(--pageGridDefaultTemplateColumnGap);
}

#cmsMode {
    position: absolute;
    top: 0;
    right: var(--mainContentElementPadding);
    display: inline-block;
}

#cmsMode p {
    background-color: #CCCCCC;
    color: #000000;
    text-align: center;
    line-height: 2rem;
    padding: 0 1rem;
}

#cmsMode p.cmsModeCreate {
    background-color: var(--primaryColor);
    color: #FFFFFF;
}

#cmsMode p.cmsModeUpdate {
    background-color: var(--secondaryColor);
    color: #FFFFFF;
}

.infinityHeading {
    text-transform: uppercase;
    color: var(--secondaryColor);
}

#defaultR {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-image: url("../temp/accenture.jpg");
    background-size: cover;
    background-position: center;
    border: 1px solid #333333;
    /*border-radius: 1rem;*/
    margin-top: var(--pageGridDefaultTemplateColumnGap);
}

aside {
    background-color: var(--assideBackgroundColor);
    padding: var(--assidePadding);
}

aside .sectionHeader p {
    color: var(--asideSectionHeaderColor);
}

aside .sectionHeader svg {
    fill: var(--asideSectionHeaderColor);
}

.sch_aside_first_element {
    /*margin-top: 0 !important;*/
}

.sectionHeader {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #999999;
    margin-top: var(--sectionHeaderMarginTop);
    margin-bottom: var(--sectionHeaderMarginBottom);
}

.sectionHeader i {
    display: flex;
    align-items: center;
}

.sectionHeader p {
    margin: 0;
    font-size: 2rem;
    line-height: 1;
/*    text-transform: uppercase;*/
}

.sectionHeader svg {
    display: block;
    fill: #000000;
    width: 2rem;
    height: 2rem;
}

.sectionHeaderLink {
    gap: 0 !important;
    border-bottom: 1px solid var(--secondaryColor);
}

.sectionHeaderLink a {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sectionHeaderLink a p {
    color: var(--secondaryColor) !important;
}

.sectionHeaderLink > a:hover p {
    color: #000000 !important;
}

.sectionHeaderLink svg {
    fill: var(--secondaryColor) !important;
}

.sectionHeaderLink > a:hover svg {
    fill: #000000 !important;
}

.sch_cms_form_widget:last-of-type {
  margin-bottom: 2rem;
}

.sch_cms_form_widget label {
  margin-top: 2rem;
  display: inline-block;
}

.sch_cms_form_description {
  color: #666666;
  margin-top: 4px;
}

.sch_cms_form_widget textarea,
.sch_cms_form_widget input[type="text"],
.sch_cms_form_widget input[type="number"],
.sch_cms_form_widget input[type="password"],
.sch_cms_form_widget input[type="email"],
.sch_cms_form_widget input[type="date"],
.sch_cms_form_widget select {
  margin-top: 4px;
  border: none;
  background-color: #FFFFFF;
  padding: 1rem;
  border-bottom: 4px solid #BBBBBB;
  width: calc(100% - 2rem);
  font-size: 1rem;
  /*font-family: Courier, Monaco, monospace;*/
  font-family: Ubuntu, InfinityTitle, Arial, sans-serif;
  /*border-radius: 0.5rem;*/
  field-sizing: content;
  transition: border-color 0.3s ease-in-out;
}

.sch_cms_form_widget select {
  margin-top: 0;
  padding: 0;
  border-bottom: none;
  width: 100% !important;
  font-size: 1rem;
  field-sizing: content;
  min-height: 200px;
  border-radius: 0px;
}

.sch_cms_form_image_row,
.sch_cms_form_widget_wrapper {
  margin-top: 4px;
  background-color: #FFFFFF;
  padding: 1rem;
  border-bottom: 4px solid #BBBBBB;
  width: calc(100% - 2rem);
  /*border-radius: 0.5rem;*/
}

.sch_cms_form_widget_wrapper select {
    min-height: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="black"><polygon points="0,0 20,0 10,12"/></svg>');
    background-repeat: no-repeat;
    background-position: 100% 60%; 
    background-size: 2rem; 
    padding-right: 3rem !important;
}

.sch_cms_buttons_container {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.sch_cms_button {
  background-color: var(--primaryColor);
  color: #FFFFFF;
  border: none;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  font-weight: bold;
  /*border-radius: 0.25rem;*/
}

.sch_cms_button:hover {
  background-color: var(--primaryColorHover);
}

.sch_cms_button:last-child {
  /*margin-right: 0;*/
}

.sch_cms_form_widget textarea:user-valid,
.sch_form_field input:user-valid {
  border-color: green
}

.sch_cms_form_widget textarea:user-invalid,
.sch_form_field input:user-invalid {
  border-color: red;
}

.sch_cms_form_widget textarea:focus,
.sch_form_field input:focus {
  outline: none;
  border-color: #BBBBBB;
}

.sch_form_field_row {
  margin: 0!important;
  padding: 0!important;
}

.sch_form_field_row label {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}

.sch_form_field_row:first-child label {
  margin-top: 0;
}

.sch_cms_form_image_row {
  display: flex;
  height: 5rem;
  align-items: center;
}

.sch_cms_form_image_thumb {
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
}

.sch_cms_form_image_thumb a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #CCCCCC;
    /*border-radius: 0.25rem;*/
}

.sch_cms_form_image_thumb a svg {
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.sch_cms_form_image_thumb a img {
  height: 100%;
  aspect-ratio: 1/1;
  /*border-radius: 0.5rem;*/
}

.sch_cms_form_browse_button_container {
  flex: 1;
  margin-left: 3rem;
}

.sch_cms_display_none {
  display: none!important;
}

/* RTE */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border: none !important;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box !important;
}

.ql-toolbar.ql-snow {
    background-color: #BBBBBB !important;
    margin-top: 4px;
    /*border-top-left-radius: 0.5rem;*/
    /*border-top-right-radius: 0.5rem;*/
    padding: 8px !important;
    display: flex;
    gap: 5px;
    box-sizing: border-box !important;
}

.ql-snow .ql-toolbar button {
    background: #eeeeee !important;
    /*border-radius: 3px;*/
    margin-right: 2px;
}
.ql-snow .ql-toolbar button:hover {
    background: #ffffff !important;
    color: #000 !important;
}

.ql-container.ql-snow {
    background-color: #FFFFFF;
    border-bottom: 4px solid #BBBBBB !important;
    /*border-bottom-left-radius: 0.5rem;*/
    /*border-bottom-right-radius: 0.5rem;*/
    min-height: 150px;
    font-size: 1rem;
}

.ql-editor {
    padding: 1rem !important;
    min-height: 150px;
    box-sizing: border-box !important;
}

.ql-container.ql-snow.ql-focus {
    border-color: #999999 !important;
    transition: border-color 0.3s ease-in-out;
}

.ql-snow .ql-stroke {
    stroke: #000000 !important;
}
.ql-snow .ql-fill {
    fill: #000000 !important;
}

.ql-editor ul, .content ul { list-style: disc; padding-left: 1.5rem; }
.ql-editor ol, .content ol { list-style: decimal; padding-left: 1.5rem; }


/* SORTABLE */
.sortable-ghost {
    opacity: 0.4;
    border: 1px dashed #999999 !important;
    background-color: #EEEEEE !important;
    /*border-radius: 0.5rem;*/
}

.sortable-chosen {
    background-color: #EEEEEE !important;
}

.sortable-drag {
    cursor: grabbing;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.accordionForms {
  background-color: #CCCCCC;
  color: #000000;
  cursor: pointer;
  padding: 1.5rem;
  text-align: center;
  transition: 0.4s;
  border-bottom: 1px solid #EEEEEE;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.accordionFormsActive, .accordionForms:hover {
  background-color: #BBBBBB;
}

.accordionForms:after {
  content: '\002B';
  color: #000000;
  font-weight: bold;
  float: right;
  /*margin-left: 2rem;*/
}

.accordionFormsActive:after {
  content: "\2212";
}

.accordionFormsPanel {
  padding: 0 2rem;
  background-color: #DDDDDD;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.sch_buttons_container_center {
   text-align: center;
   display: flex;
   gap: 1rem;
   justify-content: center;
}

.sch_buttons_container_center button,
.sch_buttons_container_center a {
  background-color: var(--primaryColor);
  color: #FFFFFF;
  border: none;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  font-weight: bold;
  /*border-radius: 0.25rem;*/
}

.sch_buttons_container_center a:hover {
  background-color: var(--primaryColorHover);
}

.sch_buttons_container_center a.sch_buttons_container_center_large {
  padding: 1rem 2rem;
  font-size: 1.5rem;
  /*border-radius: 0.5rem;*/
}

#sch_cms_graph {
    width: 100%;
    aspect-ratio: 16 / 9;
}

#sch_cms_change_log {
    font-family: Courier, Monaco, monospace;
    margin-bottom: 1rem;
}

#sch_cms_change_log li {
    margin-bottom: 0.5rem;
}

#sch_cms_change_log p {
    letter-spacing: 1px;
    font-weight: bold;
}

#sch_cms_change_log p span {
    font-weight: normal;
}

#sch_cms_change_log li:first-of-type p span,
#sch_cms_change_log li:first-of-type p {
    color: var(--secondaryColor);
    font-weight: bold;
}

:root {
    --sch-success-bg: #e2f3d5;
    --sch-success-border: #b8db9e;
    --sch-success-text: #5d8b3e;

    --sch-warning-bg: #fff4c3;
    --sch-warning-border: #f1df8d;
    --sch-warning-text: #8a6d3b;

    --sch-error-bg: #f8d7da;
    --sch-error-border: #e9b3b8;
    --sch-error-text: #a94442;

    --sch-info-bg: #d1ecf1;
    --sch-info-border: #bee5eb;
    --sch-info-text: #0c5460;
}

.sch-alert {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 2rem;
    /*border-radius: 0.5rem;*/
    border: 1px solid transparent;
    position: relative;
}

.sch-alert-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.sch-alert-icon svg {
    width: 30px;
    height: 30px;
}

.sch-alert-body {
    flex-grow: 1;
}

.sch-alert-title {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.sch-alert-message {
    font-size: 1rem;
    opacity: 0.9;
}

.sch-alert-close {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s;
    padding: 0;
    margin-left: 10px;
}

.sch-alert-close:hover { opacity: 1; }
.sch-alert-close svg { fill: currentColor; }

.sch-alert-success {
    background-color: var(--sch-success-bg);
    border-color: var(--sch-success-border);
    color: var(--sch-success-text);
}
.sch-alert-success .sch-alert-icon { background-color: rgba(93, 139, 62, 0.2); }
.sch-alert-success svg { fill: var(--sch-success-text); }

.sch-alert-warning {
    background-color: var(--sch-warning-bg);
    border-color: var(--sch-warning-border);
    color: var(--sch-warning-text);
}
.sch-alert-warning .sch-alert-icon { background-color: rgba(138, 109, 59, 0.2); }
.sch-alert-warning svg { fill: var(--sch-warning-text); }

.sch-alert-error {
    background-color: var(--sch-error-bg);
    border-color: var(--sch-error-border);
    color: var(--sch-error-text);
}
.sch-alert-error .sch-alert-icon { background-color: rgba(169, 68, 66, 0.2); }
.sch-alert-error svg { fill: var(--sch-error-text); }

.sch-alert-info {
    background-color: var(--sch-info-bg);
    border-color: var(--sch-info-border);
    color: var(--sch-info-text);
}
.sch-alert-info .sch-alert-icon { background-color: rgba(12, 84, 96, 0.2); }
.sch-alert-info svg { fill: var(--sch-info-text); }

#myGrid {
  --ag-font-family: 'Ubuntu', sans-serif;
  --ag-font-size: 1rem;
  --ag-row-height: 45px;
  --ag-header-height: 45px;
  width: 100%;
  /*border-radius: 0.5rem !important;*/
}

#table-header-actions {
  text-align: right;
  margin-bottom: 1rem;
}

#global-search {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1rem;
  /*border-radius: 0.5rem;*/
  padding: 1rem; 
  width: 30%;
  border: 1px solid #ccc;
}

.ag-header-cell.no-padding-cell {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #dde2eb !important;
}

.ag-row .ag-cell.no-padding-cell {
  padding: 0 !important;
  overflow: visible !important;
  z-index: 1;
}

.ag-row .ag-cell.no-padding-cell .ag-cell-wrapper,
.ag-row .ag-cell.no-padding-cell .ag-cell-value {
  display: flex !important;
  height: 100% !important;
  width: 100% !important;
  align-items: stretch !important;
  padding: 0 !important;
}

.action-btns-container {
  display: flex;
  width: 100%;
  height: calc(100% + 1px) !important;
  align-items: stretch;
  padding: 0 !important;
  margin: 0 !important;
}

.action-btns-container > a:not(:first-child) {
  border-left: solid 1px #FFFFFF !important;
}

.btn-grid-edit, .btn-grid-delete {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1rem;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: white !important;
  text-decoration: none;
  cursor: pointer;
  line-height: normal !important;
}

.btn-grid-edit {
  background-color: var(--secondaryColor);
  border-bottom: solid 1px #FFFFFF !important;
}

.btn-grid-delete {
  background-color: var(--primaryColor);
  border-bottom: solid 1px #FFFFFF !important;
}

.btn-grid-delete-blocked,
.btn-grid-delete-blocked:hover {
  background-color: #666666 !important;
  color: #999999 !important;
}

.btn-grid-edit:hover {
  background-color: #999999;
}

.btn-grid-delete:hover {
  background-color: #999999;
}

.ag-pinned-right-cols-container .ag-cell {
  border-left: none !important;
}

.ag-center-content {
  text-align: center;
}

.ag-center-content {
  .ag-header-cell-label {
    justify-content: center;
  }
}

.ag-right-content {
  text-align: right;
}

.ag-right-content {
  .ag-header-cell-label {
    justify-content: right;
  }
}

.sch_tag_cloud {
   justify-content: left;
   flex-wrap: wrap;
}

.sch_tag_cloud a {
  background-color: var(--secondaryColor);
  color: #FFFFFF;
}

.sch_tag_cloud a:hover {
  background-color: var(--secondaryColorHover);
}

.sch_tag_cloud div {
  flex: 1;
  border: 1px solid #D1D1D1;
  background-color: #FAFAFA;
  padding: 2rem;
}

.sch_tag_cloud p {
  text-transform: uppercase;
}

.sch_tag_cloud p.sch_signature {
    font-family: Caveat, 'Comic Sans MS', cursive;
  margin-top: 1rem;
  font-size: 3rem;
  text-align: right;
  color: var(--primaryColor);
  text-transform: none;
}

/**********************************************************************************/
/** Merriweather ***************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Merriweather'), 
       local('Merriweather-Regular'),
       url('../fonts/merriweather-v33-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Merriweather Italic'), 
       local('Merriweather-Italic'),
       url('../fonts/merriweather-v33-cyrillic_cyrillic-ext_latin_latin-ext-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Merriweather Bold'), 
       local('Merriweather-Bold'),
       url('../fonts/merriweather-v33-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Merriweather Bold Italic'), 
       local('Merriweather-BoldItalic'),
       url('../fonts/merriweather-v33-cyrillic_cyrillic-ext_latin_latin-ext-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Merriweather Sans *********************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Merriweather Sans'), 
       local('MerriweatherSans-Regular'),
       url('../fonts/merriweather-sans-v28-cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Merriweather Sans Italic'), 
       local('MerriweatherSans-Italic'),
       url('../fonts/merriweather-sans-v28-cyrillic-ext_latin_latin-ext-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Merriweather Sans Bold'), 
       local('MerriweatherSans-Bold'),
       url('../fonts/merriweather-sans-v28-cyrillic-ext_latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Merriweather Sans Bold Italic'), 
       local('MerriweatherSans-BoldItalic'),
       url('../fonts/merriweather-sans-v28-cyrillic-ext_latin_latin-ext-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Noto Sans ******************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans'), 
       local('NotoSans-Regular'),
       url('../fonts/noto-sans-v42-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Italic'), 
       local('NotoSans-Italic'),
       url('../fonts/noto-sans-v42-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans Bold'), 
       local('NotoSans-Bold'),
       url('../fonts/noto-sans-v42-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans Bold Italic'), 
       local('NotoSans-BoldItalic'),
       url('../fonts/noto-sans-v42-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Noto Serif *******************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif'), 
       local('NotoSerif-Regular'),
       url('../fonts/noto-serif-v33-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif Italic'), 
       local('NotoSerif-Italic'),
       url('../fonts/noto-serif-v33-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_vietnamese-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Serif Bold'), 
       local('NotoSerif-Bold'),
       url('../fonts/noto-serif-v33-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_vietnamese-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Serif Bold Italic'), 
       local('NotoSerif-BoldItalic'),
       url('../fonts/noto-serif-v33-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_math_vietnamese-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** PT Sans ********************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('PT Sans'), 
       local('PTSans-Regular'),
       url('../fonts/pt-sans-v18-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('PT Sans Italic'), 
       local('PTSans-Italic'),
       url('../fonts/pt-sans-v18-cyrillic_cyrillic-ext_latin_latin-ext-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('PT Sans Bold'), 
       local('PTSans-Bold'),
       url('../fonts/pt-sans-v18-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('PT Sans Bold Italic'), 
       local('PTSans-BoldItalic'),
       url('../fonts/pt-sans-v18-cyrillic_cyrillic-ext_latin_latin-ext-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Inter *************************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter'), 
       local('Inter-Regular'),
       url('../fonts/inter-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Inter Italic'), 
       local('Inter-Italic'),
       url('../fonts/inter-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Inter Bold'), 
       local('Inter-Bold'),
       url('../fonts/inter-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Inter Bold Italic'), 
       local('Inter-BoldItalic'),
       url('../fonts/inter-v20-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Ubuntu *********************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Ubuntu'), 
       local('Ubuntu-Regular'),
       url('../fonts/ubuntu-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Ubuntu Italic'), 
       local('Ubuntu-Italic'),
       url('../fonts/ubuntu-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Ubuntu Bold'), 
       local('Ubuntu-Bold'),
       url('../fonts/ubuntu-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Ubuntu Bold Italic'), 
       local('Ubuntu-BoldItalic'),
       url('../fonts/ubuntu-v21-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Roboto Condensed ********************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto Condensed'), 
       local('RobotoCondensed-Regular'),
       url('../fonts/roboto-condensed-v31-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto Condensed Italic'), 
       local('RobotoCondensed-Italic'),
       url('../fonts/roboto-condensed-v31-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Condensed Bold'), 
       local('RobotoCondensed-Bold'),
       url('../fonts/roboto-condensed-v31-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Condensed Bold Italic'), 
       local('RobotoCondensed-BoldItalic'),
       url('../fonts/roboto-condensed-v31-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Lora *************************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Lora'), 
       local('Lora-Regular'),
       url('../fonts/lora-v37-cyrillic_cyrillic-ext_latin_latin-ext_math_symbols_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Lora Italic'), 
       local('Lora-Italic'),
       url('../fonts/lora-v37-cyrillic_cyrillic-ext_latin_latin-ext_math_symbols_vietnamese-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Lora Bold'), 
       local('Lora-Bold'),
       url('../fonts/lora-v37-cyrillic_cyrillic-ext_latin_latin-ext_math_symbols_vietnamese-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Lora Bold Italic'), 
       local('Lora-BoldItalic'),
       url('../fonts/lora-v37-cyrillic_cyrillic-ext_latin_latin-ext_math_symbols_vietnamese-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Vollkorn *********************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Vollkorn'), 
       local('Vollkorn-Regular'),
       url('../fonts/vollkorn-v30-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Vollkorn Italic'), 
       local('Vollkorn-Italic'),
       url('../fonts/vollkorn-v30-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Vollkorn Bold'), 
       local('Vollkorn-Bold'),
       url('../fonts/vollkorn-v30-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Vollkorn Bold Italic'), 
       local('Vollkorn-BoldItalic'),
       url('../fonts/vollkorn-v30-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Alegreya ********************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Alegreya'), 
       local('Alegreya-Regular'),
       url('../fonts/alegreya-v39-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Alegreya Italic'), 
       local('Alegreya-Italic'),
       url('../fonts/alegreya-v39-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Alegreya Bold'), 
       local('Alegreya-Bold'),
       url('../fonts/alegreya-v39-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Alegreya Bold Italic'), 
       local('Alegreya-BoldItalic'),
       url('../fonts/alegreya-v39-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
}


/**********************************************************************************/
/** Caveat **********************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Caveat'), 
       local('Caveat-Regular'),
       url('../fonts/caveat-v23-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Caveat Bold'), 
       local('Caveat-Bold'),
       url('../fonts/caveat-v23-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2') format('woff2');
}


/**********************************************************************************/
/** Patrick Hand ***************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Patrick Hand'), 
       local('PatrickHand-Regular'),
       url('../fonts/patrick-hand-v25-latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}


/**********************************************************************************/
/** Great Vibes *****************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Great Vibes'), 
       local('GreatVibes-Regular'),
       url('../fonts/great-vibes-v21-cyrillic_cyrillic-ext_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}


/**********************************************************************************/
/** Marck Script ***************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Marck Script'), 
       local('MarckScript-Regular'),
       url('../fonts/marck-script-v22-cyrillic_latin_latin-ext-regular.woff2') format('woff2');
}


/**********************************************************************************/
/** Anton ************************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Anton'), 
       local('Anton-Regular'),
       url('../fonts/anton-v27-latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}


/**********************************************************************************/
/** Oswald **********************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Oswald'), 
       local('Oswald-Regular'),
       url('../fonts/oswald-v57-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Oswald Bold'), 
       local('Oswald-Bold'),
       url('../fonts/oswald-v57-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}


/**********************************************************************************/
/** Bebas Neue *****************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Bebas Neue'), 
       local('BebasNeue-Regular'),
       url('../fonts/bebas-neue-v16-latin_latin-ext-regular.woff2') format('woff2');
}


/**********************************************************************************/
/** Lobster **********************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Lobster'), 
       local('Lobster-Regular'),
       url('../fonts/lobster-v32-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}


/**********************************************************************************/
/** Amatic SC ******************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Amatic SC'), 
       local('AmaticSC-Regular'),
       url('../fonts/amatic-sc-v28-cyrillic_hebrew_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Amatic SC Bold'), 
       local('AmaticSC-Bold'),
       url('../fonts/amatic-sc-v28-cyrillic_hebrew_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}


/**********************************************************************************/
/** Gabriela *********************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Gabriela';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Gabriela'), 
       local('Gabriela-Regular'),
       url('../fonts/gabriela-v23-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
}


/**********************************************************************************/
/** Courier Prime **************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Courier Prime'), 
       local('CourierPrime-Regular'),
       url('../fonts/courier-prime-v11-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Courier Prime Italic'), 
       local('CourierPrime-Italic'),
       url('../fonts/courier-prime-v11-latin_latin-ext-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Courier Prime Bold'), 
       local('CourierPrime-Bold'),
       url('../fonts/courier-prime-v11-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Courier Prime Bold Italic'), 
       local('CourierPrime-BoldItalic'),
       url('../fonts/courier-prime-v11-latin_latin-ext-700italic.woff2') format('woff2');
}

/**********************************************************************************/
/** Cinzel ************************************************************************/
/**********************************************************************************/
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cinzel Regular'), 
       local('Cinzel-Regular'),
       url('../fonts/cinzel-v26-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Cinzel Bold'), 
       local('Cinzel-Bold'),
       url('../fonts/cinzel-v26-latin_latin-ext-700.woff2') format('woff2');
}

.my-swal-font {
  font-family: Ubuntu, InfinityTitle, Arial, sans-serif;
  font-size: 1rem;
  color: #000000;
}

.my-swal-confirm-btn, .my-swal-cancel-btn {
  font-family: Ubuntu, InfinityTitle, Arial, sans-serif;
  font-size: 1rem;
  color: #FFFFFF;
  background-color: #666666;
  display: inline-block;
  padding: 0.5rem 2rem;
  margin: 0.5rem;
  border: none;
  /*border-radius: 0.25rem;*/
  font-weight: bold;
  cursor: pointer;
}

.my-swal-confirm-btn {
  background-color: var(--primaryColor);
}

.my-swal-confirm-btn:hover, .my-swal-cancel-btn:hover {
  background-color: #777777;
}

.swal2-close {
    color: #999999 !important;
    outline: none !important;
}

.swal2-close:hover {
    color: #000000 !important;
}

#infinityBreakingNews {
    background-color: #BB0000;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

#infinityBreakingNews > div:first-child {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 1rem 1rem 1rem calc(var(--sidebarWidth) + 1rem);
    font-size: 2rem;
}

#infinityBreakingNews > div:last-child {
    background-color: #CC0000;
    flex: 1;
    padding: 1rem;
}

#infinityBreakingNews > div:last-child > p:first-child {
    font-size: 2rem;
}

#infinityBreakingNews > div:first-child {
    display: inline-flex;
}

#infinityBreakingNews > div:first-child i {
    font-style: normal;
    font-weight: bold;
    display: inline-block;
    color: #000000;
    animation: blackStep 4s infinite;
    animation-delay: calc(var(--i) * 0.08s);
}

@keyframes blackStep {
    0%, 20%, 100% {
        color: #000000;
    }
    10% {
        color: #FFFFFF;
    }
}

.infinityHero {
    margin-bottom: 2rem;
}

.infinityHero > a > img {
    width: 100%;
}

picture {
    display: block;
    width: 100%;
    overflow: hidden;
    /*border-top-left-radius: 1rem;*/
    /*border-top-right-radius: 1rem;*/
    position: relative;
}

picture img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

picture span {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: var(--secondaryColor);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.75rem;
}

.infinityDefaultItemsRow {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.infinityNewsArticleItem {
    background-color: #DDDDDD;
    /*border-radius: 1rem;*/
    display: block;
    position: relative;
    padding-bottom: 2rem;
}

.infinityNewsArticleItem div {
    padding: 1rem;
}

.infinityNewsArticleItem div > * {
    margin-bottom: 0.5rem;
}

.infinityNewsArticleItemAuthor {
    color: #666666;
    font-size: 0.8rem;
}

.infinityNewsArticleItem div > p:last-child {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: #666666;
    font-size: 0.8rem;
}

.infinityNewsArticleItem h2 {
    font-size: 2rem;
    color: var(--primaryColor);
}

.infinityNewsArticleItem:hover h2 {
    color: var(--secondaryColor);
}

.infinityHomepageWidgetNewsList {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: 100%;
    align-items: stretch !important;
}

.infinityHomepageGridModule:has(.infinityHomepageWidgetNewsList) {
    background-color: transparent;
}

.infinityArchiveButton {
    margin-top: 3em;
}

#infinityNewsArticleMainPhoto picture {
    /*border-radius: 1rem;*/
}

#infinityNewsArticleStats {
    width: 60%;
    margin: 2rem auto auto auto;
}

#infinityNewsArticleStats > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    border-bottom: 1px solid #999999;
    padding-bottom: 0.5rem;
}

#infinityNewsArticleStats > div:last-child {
    padding-top: 0.5rem;
}

#infinityNewsArticleStats > div:first-child p:first-child {
    flex: 1;
    margin: 0;
}

#infinityNewsArticleStats > div:first-child p:last-child {
    text-align: right;
    margin: 0;
    white-space: nowrap;
}

#infinityNewsArticleStats span {
    margin-right: 0.5rem;
    color: #999999;
}

.infinityNewsArticleText {
    /*display: block;*/
    font-size: 1.5rem;
    max-width: 60%;
    margin: 2rem auto auto auto;
    text-align: justify;
}

.infinityNewsArticleText > h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

#infinityNewsArticleLead * {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.infinityNewsArticleText blockquote {
    border-left: 4px solid #CCCCCC;
    padding-left: 1rem;
}

#infinityNewsArticleTextFirstLetter p:first-of-type::first-letter {
    float: left;
    font-size: 4rem;
    margin-right: 0.6rem;
    margin-top: 0.4rem;
    font-weight: bold;
    background-color: #000000;
    color: #FFFFFF;
    padding: 0 1rem;
    font-family: "Georgia", serif;
}

#infinityNewsArticleTextFirstLetter p:first-of-type {
    overflow: hidden;
}

.infinityNewsArticleBox {
    background-color: #DDDDDD;
    color: #999999;
    margin: 1rem 0;
    padding: 2rem;
}

.infinityNewsArticleBox {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.infinityNewsArticleBox svg {
    flex-shrink: 0;
    fill: var(--secondaryColor);
    width: 96px;
    height: auto;
}

.infinityNewsArticleBox p {
    flex-grow: 1;
}

.infinityNewsArticlePhoto {
    max-width: 75%;
    margin: 2rem auto auto auto;
}

.infinityNewsArticlePhoto picture {
    /*border-radius: 1rem;*/
}

.infinityNewsArticlePhotoDescription {
    text-align: right;
    margin-right: 1rem;
    margin-top: 4px;
    font-size: 0.8rem;
    color: #999999;
}

.infinityNewsArticleVideo {
    width: 75%;
    margin: 2rem auto auto auto;
}

.infinityNewsArticleVideo iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    /*border-radius: 1rem;*/
    display: block;
}

#infinityNewsArticleUndertext {
    background-color: #000000;
    color: #FFFFFF;
    padding: 2rem;
    width: calc(60% - 4rem);
}

.infinityNewsArticleTable {
    width: 60%;
    margin: 2rem auto auto auto;
}

.infinityNewsArticleTable table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 1px;
    /*border-radius: 1rem;*/
}

.infinityNewsArticleTable table th,
.infinityNewsArticleTable table td {
    background-color: #DDDDDD;
    padding: 0.5rem;
    border: none;
}

.infinityNewsArticleTable table th {
    background-color: #CCCCCC;
}

.infinityNewsArticleTable table td.left {
    text-align: left !important;
}

.infinityNewsArticleTable table td.center {
    text-align: center !important;
}

.infinityNewsArticleTable table td.right {
    text-align: right !important;
}

#infinityNewsArticleShare {
    width: 60%;
    margin: 2rem auto auto auto;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

#infinityNewsArticleShare svg {
    fill: #FFFFFF;
    height: 24px !important;
    width: auto !important;
}

#infinityNewsArticleShare a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    background-color: #000000;
    height: 48px;
    width: 48px;
    /*border-radius: 0.25rem;*/
}

#infinityNewsArticleShare a:hover svg {
    fill: var(--secondaryColor) !important;
}





#schCmsDeskHomeArticles > div {
    display: block;
    padding: 1rem;
    border-left: 4px solid #CCCCCC;
    margin-top: 1rem;
    position: relative;
}

#schCmsDeskHomeArticles > div:hover {
    background-color: #DDDDDD;
}

#schCmsDeskHomeArticles > div::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1rem;
    width: calc(100% - 1rem);
    height: 1px;
    background-color: #CCCCCC;
}

#schCmsDeskHomeArticles > div > h2 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
}

#schCmsDeskHomeArticles > div > p.schCmsDeskHomeArticlesData {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
}

#schCmsDeskHomeArticles > div > p.schCmsDeskHomeArticlesData > span:not(.schCmsDeskHomeArticlesAnnotation) {
    font-size: 1rem;
    background-color: #DDDDDD;
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-block;
    border: 1px solid #999999;
}

.schCmsStatusColor1 {
    background-color: #FFCCD5 !important;
    color: #99001D;
}

.schCmsStatusColor2 {
    background-color: #D4EDDA !important;
    color: #155724;
}

.schCmsStatusColor3 {
    background-color: #CCE5FF !important;
    color: #004085;
}

.schCmsStatusColor4 {
    background-color: #FFE8CC !important;
    color: #A65100;
}

.schCmsStatusColor5 {
    background-color: #009900 !important;
    color: #FFFFFF;
    font-weight: bold;
}

.schCmsStatusColor6 {
    background-color: #DDDDDD !important;
    color: #333333;
}

.schCmsStatusColor7 {
    background-color: #E2D9F3 !important;
    color: #4A148C;
}

.schCmsStatusColor8 {
    background-color: #D1ECF1 !important;
    color: #0C5460;
}

.schCmsDeskHomeArticlesHeading {
    color: var(--secondaryColor);
    text-transform: uppercase;
}

.schCmsDeskHomeArticlesButtons {
    justify-content: right !important;
}

/* Glavni kontejner legende */
#schDeskArticleReviewLegend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 1rem 0;
    font-family: inherit;
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
}

/* Pojedinačni omotač za svaku stavku */
.schDeskArticleLegendItem {
    display: flex;
    align-items: center;
}

/* --- Statusi / Stilovi oznaka --- */

.schDeskArticleStatusRemove {
    text-decoration: line-through solid #B71C1C;
    text-decoration-thickness: 2px;
    font-weight: bold;
    color: #B71C1C;
}

#.schDeskArticleStatusReplace {
#    border-bottom: 2px dashed #0D47A1;
#    font-weight: bold;
#    color: #0D47A1;
#}

.schDeskArticleStatusReplace {
    font-weight: bold;
    color: #0D47A1;
    position: relative;
    display: inline-block;
}

.schDeskArticleStatusReplace::after {
    content: "";
    position: absolute;
    left: -5%;
    top: 50%;
    width: 110%;
    border-bottom: 1.5px solid #0D47A1;
    transform: translateY(-50%) rotate(-7deg);
    transform-origin: center;
    pointer-events: none;
}

.schDeskArticleStatusReplace::before {
    content: "";
    position: absolute;
    left: -5%;
    top: 50%;
    width: 110%;
    border-bottom: 1.5px solid #0D47A1;
    transform: translateY(-50%) rotate(7deg);
    transform-origin: center;
    pointer-events: none;
}

.schDeskArticleStatusFix {
    border: 2px solid #F57F17;
    border-radius: 50%;
    padding: 2px 8px;
    font-weight: bold;
    color: #F57F17;
    display: inline-block;
    line-height: 1;
}

.schDeskArticleStatusReformulate {
    background: #FFD54F;
    color: #000000;
    padding: 2px 6px;
    font-weight: bold;
    border-radius: 2px;
}

.schDeskArticleStatusMove {
    font-weight: bold;
    color: #FF0000;
    padding: 0 8px;
    border-left: 2px solid #FF0000;
    border-right: 2px solid #FF0000;
    background-image:
        linear-gradient(#FF0000, #FF0000),
        linear-gradient(#FF0000, #FF0000),
        linear-gradient(#FF0000, #FF0000),
        linear-gradient(#FF0000, #FF0000);
    background-position:
        top left,
        bottom left,
        top right,
        bottom right;
    background-size: 5px 2px;
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 1.2;
}

.schDeskArticleStatusEmphasize {
    border: 2px solid #4A148C;
    border-radius: 0px;
    padding: 2px 6px;
    font-weight: bold;
    color: #4A148C;
    display: inline-block;
    line-height: 1;
}

.schDeskArticleStatusCheck {
    border-bottom: 3px solid #1B5E20;
    padding-bottom: 1px;
    font-weight: bold;
    color: #1B5E20;
}

.infinityHomepageGrid {
    display: none;
    gap: var(--defaultMargin);
    gap: 2px;
    grid-auto-rows: minmax(100px, auto);
    width: calc(100% - (var(--largeMargin) * 2));
    margin: var(--largeMargin);
}

.infinityHomepageGridModule {
    background: #DDDDDD;
    /*border-radius: 1rem;*/
    /*box-shadow: 0 0 2px 2px rgb(200 200 200);*/
}

@media (max-width: 575.98px) {
    .grid-res-1 { display: grid !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .grid-res-4 { display: grid !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .grid-res-6 { display: grid !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .grid-res-8 { display: grid !important; }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
    .grid-res-12 { display: grid !important; }
}

@media (min-width: 1440px) and (max-width: 2559.98px) {
    .grid-res-16 { display: grid !important; }
}

@media (min-width: 2560px) {
    .grid-res-20 { display: grid !important; }
}

.infinityHomepageWidgetDefault {
    padding: 2rem;
}

.infinityHomepageWidgetDefault > a {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.infinityHomepageWidgetDefault > a > i {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
}

.infinityHomepageWidgetDefault > a > i > svg {
    fill: var(--secondaryColor);
    width: 3rem;
    height: 3rem;
}

.infinityHomepageWidgetDefault > a > h1 {
    font-size: 3rem;
    margin: 0;
    flex: 1;
    color: var(--secondaryColor);
}


/***********************************************************/
/** TOP THEMES *******************************************/
/**********************************************************/
.homepageTopThemes {
    display: grid;
    grid-template-columns: 100%;
    width: 100%;
    height: 100%;
    /*border-radius: 1rem;*/
    overflow: hidden;
    position: relative;
}

.homepageTopThemes a {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 0.8rem;
}

.visibilityHidden {
    visibility: hidden;
    pointer-events: none;
}

.opacityNone {
    opacity: 0;
}

.homepageTopThemePhoto {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    /*flex-shrink: 0;*/
    flex-grow: 1;
    min-height: 0;
}

.homepageTopThemePhoto picture {
    display: block;
    width: 100%;
    height: 100%;
}

.homepageTopThemePhoto picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepageTopThemeNumbers {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 8px;
}

.homepageTopThemeNumbers span {
    display: inline-block;
    min-height: 1rem;
    width: 3rem;
    /*border-radius: 50%;*/
    background-color: #FFFFFF;
    cursor: pointer;
}

.homepageTopThemeNumbers .homepageTopThemeNumbersOn {
    background-color: var(--secondaryColor);
    color: #FFFFFF;
}

.homepageTopThemeTitle {
    background-color: #000000;
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /*position: absolute;
    bottom: 0;*/
}

.homepageTopThemeTitle p {
    font-size: 2rem;
    color: var(--secondaryColor);
    margin: 0;
}

.homepageTopThemeTitle h1 {
    font-size: 4rem;
    color: #FFFFFF !important;
    margin: 0;
    line-height: 1.1;
    /*word-break: normal !important;*/
    /*overflow-wrap: normal !important;*/
    /*white-space: normal !important;*/
    text-align: left !important;
}


/***********************************************************/
/** LOGIN *************************************************/
/**********************************************************/
#infinityLoginButton {
    padding: 1rem 2rem;
    font-size: 1.5rem;
    /*border-radius: 0.5rem;*/
    margin: auto;
}

#infinityHomepageWidgetLogin .sch_cms_form_widget label {
    margin-top: 1rem;
}

#infinityHomepageWidgetLogin .sch_cms_form_widget:first-child label {
    margin-top: 0;
}

#infinityHomepageWidgetLogin #homepageRememberMe {
    margin-right: 0.5rem;
}

#homepageRememberMe {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    /*border-radius: 0.25rem;*/
    background-color: #FFFFFF;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    display: inline-grid;
    place-content: center;
}

#homepageRememberMe:checked {
    background-color: #666666;
}

#homepageRememberMe::before {
    content: "";
    width: 12px;
    height: 12px;
    clip-path: polygon(14% 44%, 0% 58%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.1s ease-in-out;
    background-color: white;
}

#homepageRememberMe:checked::before {
    transform: scale(1);
}

#homepageRememberMe:focus-visible {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

#infinityHomepageWidgetLogin ul {
    margin-top: 1rem;
}

#infinityHomepageWidgetLogin ul li {
    border-bottom: none;
    padding-bottom: 0;
}


/***********************************************************/
/** STATISTICS *********************************************/
/**********************************************************/
.infinityHomepageGridModule:has(#infinityHomepageWidgetStatisticsCommunityTeaser) {
    background-color: #BBBBBB;
}

.infinityHomepageWidgetDefault ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.infinityHomepageWidgetDefault ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dotted #999999;
}

.infinityHomepageWidgetDefault ul li:last-child {
    border-bottom: none;
}

.infinityHomepageWidgetDefault ul li span {
    text-align: right;
    font-weight: bold;
    flex-shrink: 0;
    padding-left: 10px;
}

#infinityHomepageWidgetStatisticsCommunityTeaser {
    text-align: right;
    margin: 2rem 0 0 0;
}

#infinityHomepageWidgetStatisticsCommunityTeaser a {
    margin: 0;
    font-family: Caveat, 'Comic Sans MS', cursive;
    font-size: 3rem;
}

#infinityHomepageWidgetStatisticsCommunityTeaser a:hover {
    color: var(--secondaryColor);
}


/***********************************************************/
/** NEWS *************************************************/
/**********************************************************/
.infinityHomepageWidgetNewsList {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    height: 100%;
}

.infinityHomepageWidgetNewsList > a {
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: calc(100% - 2rem);
}

.infinityHomepageWidgetNewsList picture,
.infinityHomepageWidgetNewsList img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/***********************************************************/
/** FORUM ************************************************/
/**********************************************************/
.infinityHomepageGridModule:has(#infinityAsideForum) {
    background-color: #BBBBBB;
}

#infinityAsideForum {
    display: grid;
    gap: 0.5rem;
}

#infinityAsideForum > div > a {
    font-size: 1.5rem;
    color: var(--primaryColor);
    /*font-family: 'Noto Serif', Georgia, serif;*/
}

#infinityAsideForum > div > a:hover {
    color: var(--secondaryColor);
}

/*#infinityAsideProfiles > p {*/
/*    display: block;*/
/*    margin-bottom: 1rem;*/
/*}*/

.onlineUser {
    display: inline-block;
    border-bottom: 2px solid #00CC00;
    animation: blink-underline 2s step-end infinite;
}

@keyframes blink-underline {
    0%, 100% {
        border-color: #00CC00;
    }
    50% {
        border-color: transparent;
    }
}


/***********************************************************/
/** ADS ***************************************************/
/**********************************************************/
#homepageR {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    /*border: 1px solid #333333;*/
    /*border-radius: 1rem;*/
}


/***********************************************************/
/** NEWS SPECIAL *****************************************/
/**********************************************************/
.infinityHomepageNewsSpecial {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.infinityHomepageNewsSpecial picture {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.infinityHomepageNewsSpecial picture img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    /*border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;*/
}

.infinityHomepageNewsSpecial {
    position: relative;
}

.infinityHomepageNewsSpecial div {
    position: absolute;
    bottom: 3rem;
    left: 0;
}

.infinityHomepageNewsSpecial div p {
    background-color: rgb(51 51 51 / 80%);
    color: #FFFFFF;
    display: block;
    padding: 0.5rem 1rem;
    max-width: 70%;
}

.infinityHomepageNewsSpecial div p:first-child {
    display: inline-block;
}

.infinityHomepageNewsSpecial div p:last-child {
    font-size: 2rem;
    background-color: rgb(0 0 0 / 80%);
}


/***********************************************************/
/** PEOPLE ************************************************/
/**********************************************************/
#infinityAsideProfiles {
    display: grid;
    gap: 2px;
    grid-template-columns: 1fr 1fr 1fr;
}

#infinityAsideProfiles > a {
    display: block;
    width: 100%;
    overflow: hidden;
}

#infinityAsideProfiles > a img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    /*border-radius: 1rem;*/
}

#infinityHomepageWidgetProfilesStatements {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

#infinityHomepageWidgetProfilesStatements span {
    display: inline-block;
    line-height: 1.2;
    text-transform: lowercase;
    /*color: var(--secondaryColor);*/
}


/***********************************************************/
/** BLACKBOARD ******************************************/
/**********************************************************/
.infinityHomepageGridModule:has(#infinityHomepageWidgetBlackboard) {
    background-color: #BBBBBB;
}

#infinityHomepageWidgetBlackboard textarea {
    height: 10rem;
}

#infinityHomepageWidgetBlackboard > div.sch_cms_form_widget {
    margin-bottom: 0;
}

#infinityHomepageWidgetBlackboard > div.sch_cms_form_widget > div#button_row {
    display: flex;
    width: 100%;
    gap: 1rem;
}

#infinityHomepageWidgetBlackboard > div.sch_cms_form_widget > div#button_row > button {
    flex: 1;
    min-width: 0;
    background-color: #999999;
    color: #000000;
}

#infinityHomepageWidgetBlackboard > div.sch_cms_form_widget > div#button_row > button:hover {
    background-color: #BBBBBB;
}

#infinityHomepageWidgetBlackboard > div.sch_cms_form_widget > div#button_share {
    display: flex;
    justify-content: center;
    align-items: center;
}

#infinityHomepageWidgetBlackboard > div.sch_cms_form_widget > div#button_share > button {
    margin: 2rem auto 0 auto;
    font-size: 1.5rem;
}


/***********************************************************/
/** SEARCH ************************************************/
/**********************************************************/
#infinityHomepageWidgetSearch form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    align-self: stretch;
    gap: 1rem;
}

#infinityHomepageWidgetSearch form div.sch_cms_form_widget {
    flex: 1;
}

#infinityHomepageWidgetSearch form div.sch_cms_form_widget input {
    /*padding: 2rem;*/
}

#infinityHomepageWidgetSearch form div.sch_cms_buttons_container {
    flex-shrink: 1;
    margin: 0;
}

#infinitySearchButton {
    padding: 0.7rem 2rem;
    font-size: 1.5rem;
    /*border-radius: 0.5rem;*/
    margin: 0;
}


/***********************************************************/
/** ABOUT US *********************************************/
/**********************************************************/
#infinityHomepageWidgetAboutUs footer ul {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#infinityHomepageWidgetAboutUs footer ul li {
    display: flex;
    border-bottom: none !important;
    padding: 0 !important;
}

#infinityHomepageWidgetAboutUs footer li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    align-self: stretch;
    background-color: #CCCCCC;
    padding: 1rem;
    /*border-radius: 0.25rem;*/
    text-align: center;
    text-transform: none;
    /*font-size: 0.75rem;*/
    font-size: 1rem;
}

#infinityHomepageWidgetAboutUs footer li a:hover {
    color: #666666;
}

#infinityHomepageWidgetAboutUs #infinityAsideCopyright {
    font-size: 0.75rem;
    text-align: right;
    margin-top: 1rem;
}


/***********************************************************/
/** CREDITS ***********************************************/
/**********************************************************/
#infinityHomepageWidgetCredits p:not(:first-child) {
    margin-top: 0.5rem;
}

#infinityHomepageWidgetCredits ul {
    list-style-type: disc;
    padding-left: 2rem;
    margin-top: 0.5rem;
}

#infinityHomepageWidgetCredits ul li {
    border-bottom: none;
    margin: 0;
    padding: 0;
    display: list-item;
}

#infinityHomepageWidgetCredits p a,
#infinityHomepageWidgetCredits ul li a {
    font-weight: bold;
    color: var(--primaryColor);
}

#infinityHomepageWidgetCredits p a:hover,
#infinityHomepageWidgetCredits ul li a:hover {
    color: var(--secondaryColor);
}

/*#infinityHomepageWidgetCreditsTitle {*/
/*    font-size: 1.5rem;*/
/*    color: var(--primaryColor);*/
/*    margin-top: 1rem !important;*/
/*}*/

#infinityHomepageWidgetCreditsGetCredits {
    text-align: right;
    margin: 2rem 0 0 0;
}

#infinityHomepageWidgetCreditsGetCredits a {
    margin: 0;
    font-family: Caveat, 'Comic Sans MS', cursive;
    font-size: 3rem;
}

#infinityHomepageWidgetCreditsGetCredits a:hover {
    color: var(--secondaryColor);
}


/***********************************************************/
/** SUPERUSER ********************************************/
/**********************************************************/
#infinityHomepageWidgetSuperuser {
    display: flex;
    height: 100%;
}

#infinityAsideSuperuser {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-color: #6F29B5;
    color: #FFFFFF;
    text-align: center;
    padding: 1rem;
    /*border-radius: 1rem;*/
    text-decoration: none;
    height: calc(100% - 2rem);
}

#infinityAsideSuperuser:hover {
    background-color: #8444c5;
}

#infinityAsideSuperuser p {
    margin-bottom: 2rem;
    font-family: Caveat, 'Comic Sans MS', cursive;
    font-size: 3rem;
}


/***********************************************************/
/** EXPERTS ***********************************************/
/**********************************************************/
#infinityHomepageWidgetExperts {
    /*padding: 0;*/
}

#infinityHomepageWidgetExperts > a:first-child {
    /*margin-left: 2rem;*/
}

#infinityHomepageWidgetExpertsList {
    display: flex;
    /*gap: var(--defaultMargin);*/
    gap: 2px;
}

.infinityHomepageGridModule:has(#infinityHomepageWidgetExpertsList) {
    /*background-color: transparent;*/
    background-color: #BBBBBB;
}

.homepageExpertsExpertCard {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    /*color: inherit;*/
    /*border-radius: 1rem;*/
    overflow: hidden;
}

.homepageExpertsExpertCard img {
    width: 100%;
    aspect-ratio: 16 / 9 !important;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.homepageExpertsExpertInfo {
    padding: 1rem 1rem 4rem 1rem;
    background-color: var(--primaryColor);
    flex-grow: 1;
    position: relative;
    color: #FFFFFF;
}

.homepageExpertsExpertInfo h2, .homepageExpertsExpertInfo p {
    /*margin: 0 0 0.25rem 0;*/
    margin: 0;
    word-break: break-word;
}

.homepageExpertsExpertInfo h2 {
    color: #CCCCCC;
    font-size: 2rem;
}

.homepageExpertsExpertName {
    font-weight: bold;
}

.homepageExpertsListPrice {
    text-align: right;
    text-wrap: nowrap;
    margin-top: 2rem !important;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.homepageExpertsListPriceOff,
.homepageExpertsListPriceReduced {
    margin: 0;
    font-family: Caveat, 'Comic Sans MS', cursive;
}

.homepageExpertsListPriceOff {
    text-decoration: line-through;
    color: #666666;
    /*font-size: 2rem;*/
}

.homepageExpertsListPriceReduced {
    color: var(--secondaryColor);
    font-size: 2rem;
}


/***********************************************************/
/** MOBILE APPS ******************************************/
/**********************************************************/
.infinityHomepageGridModule:has(#infinityAsideMobileApps) {
    background-color: #BBBBBB;
}

#infinityHomepageWidgetMobileApps #infinityAsideMobileApps {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    /*margin: 2rem 2rem 0 2rem;*/
    margin: 4rem 2rem 0 2rem;
}

#infinityHomepageWidgetMobileApps #infinityAsideMobileApps a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background-color: #000000;
    color: #FFFFFF;
    padding: 1rem;
    /*border-radius: 0.5rem;*/
    text-align: center;
    /*font-size: 1.5rem;*/
}

#infinityHomepageWidgetMobileApps #infinityAsideMobileApps a img {
    height: 2rem;
    margin-right: 0.5rem;
}

h1 {
    font-size: var(--h1FontSize);
    /*background-color: #CCCCCCCC;*/
    color: var(--primaryColor);
    font-weight: normal;
    margin: var(--h1Margin);
    overflow-wrap: anywhere; 
    word-break: break-all;
    /*padding: var(--largeMargin);*/
    /*margin-top: calc(-1 * var(--largeMargin));*/
    /*margin-left: calc(-1 * var(--largeMargin));*/
    /*margin-right: calc(-1 * var(--largeMargin));*/
    /*border-top-left-radius: 1rem;*/
    /*border-top-right-radius: 1rem;*/
}

h2 {
    font-size: var(--h2FontSize);
    color: var(--primaryColor);
}