#memorizerApp{
    background: linear-gradient(90deg,var(--headerTranslucentBackground) 0%, var(--headerTranslucentBackgroundMed) 100%);
    grid-template-columns: 1fr 1fr 1fr;
}

::-webkit-scrollbar {
    width: 10px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--themeMain);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--themeMain);
}

::-webkit-scrollbar-track {
    background: var(--themeMainMed);
}

:root {
    --uiDesktopHorizontalPadding: 7.5vw;
    --uiMobileHorizontalPadding: 0.5rem;
    --uiMobileVerticalPadding: 1rem;
    --uiElementsFontSizeXL:1.1rem;
    --uiElementsFontSizeL:1rem;
    --uiElementsFontSize:0.9rem;
    --uiElementsFontSizeS:0.8rem;
    --default-grid-gap: 2rem;
    --uiElementsPadding: 0.5rem 1rem;
    --uiElementBorderRadius: 0.5rem;

    --textColorMain: #000000;
    --textColorMedium: #353535;
    --textColorInvert: #FFFFFF;

    --backgroundFillMain:#ebeef1;
    --backgroundFillSecondary:#FFFFFF;
    --backgroundFillSecondaryHover:#F2F2F2;
    --backgroundFillButton: #d6d9dc;
    --backgroundFillSemiTransparent: #FFFFFF60;

    --borderColorMain: #d6dadf;
    --borderColorSecondary:#F2F2F2;
    --borderColorButton: #c6c9cc;

    --headerTranslucentBackgroundMed: #F2F2F2AA;
    --headerTranslucentBackground: #F2F2F2AA;

    --m5ColumnFillBackground: #ebeef1;
    --m5ColumnFillBackgroundTransparent: #FFFFFFAA;

    --m5BordersLite: #EAEAEA;

    --m5BoxBackgroundColor: #FFFFFF;

    --m5TableHeaderBackgroundColor: #DEDEDE;

    --m5MobileMenuBackground: #EDEDED;
    --m5MobileMenuTextColor: #323232;

    --m5InputTextColorInvert: #FFFFFF;
    --m5MobileMenuBorderColor: #DEDEDE;

    --m5InputBackground: #FFFFFF;
    --m5InputBorderColor: #DEDEDE;
    --m5InputTextColor: #434445;
    --m5InputPlaceholderColor: #E2E2E2;

    --m5InputSetElementBorderColor: #F2F2F2;

    --m5BoxButtonBackground: #EDF0F2;
    --m5ButtonBorder: #E1E3E6;
    --m5ButtonText: #000000;
    --m5ButtonTextInvert: #FFFFFF;
}

:root .themeSwitchDark,
:root .logo.themeLight{
    display: none !important;
}
:root .themeSwitchLight{
    display: flex !important;
}

/* Display blockers */

.responsive-show,
.responsive-show-flex {
    display: none !important;
}

/* Flex layout */
.flex {
    display: flex;
}

/* Color texts */

.ccT {
    color: var(--themeMain) !important;
}

.ccB {
    background-color: var(--themeMain) !important;
    color: #FFFFFF !important;
}

.ccC {
    color: var(--themeComplementaryColor) !important;
}

HTML {
    scrollbar-color: var(--themeMain) var(--themeMainMed);
    scrollbar-width: initial;
}

BODY{
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-size: var(--uiElementsFontSize);
    margin:0;padding:0;
}

A{
    color:var(--themeMain);
    text-decoration: inherit;
}

/* Common */

H3 {
    font-size: var(--uiElementsFontSizeL);
    margin-bottom: 0;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

DIV{
    box-sizing: border-box;
}

LABEL {
    font-size:0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom:0.5rem;
    display: block;
}

.h3Container {
    text-align: center;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
}

.h3Container:first-of-type {
    margin-top: 0;
}

/* Page Container Layout */

.pageContainer{
    padding: 4rem var(--uiDesktopHorizontalPadding) 4rem var(--uiDesktopHorizontalPadding);
    margin:0;
}

.pageContainer.appLayout{
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: var(--default-grid-gap);
}

.pageContainer.browser{
    display: grid;
    grid-template-columns: 20rem 1fr 20vw;
    gap: var(--default-grid-gap);

}

.pageContainer.landingDetails{
    display: grid;
    grid-template-columns: 1fr 1fr 25rem;
    gap: var(--default-grid-gap);
}

.pageContainer.dashboard{
    display: grid;
    grid-template-columns: 20rem 1fr 20rem;
    gap: var(--default-grid-gap);
}

/* SideBar */

.sidebar{

}

/* Page header */

.pageHeader {
    padding: 0 var(--uiDesktopHorizontalPadding);
    background-color: var(--m5BoxBackgroundColor);
    text-align: right;
    display: flex;
    align-items: center;
    height: 5rem;
    top: 0;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
    position: fixed;
}

.pageHeader.floating {
    animation: floatPageHeader 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.pageHeader.defloating {
    animation: defloatPageHeader 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.pageHeader .logo {
    display: inline-block;
    margin: 0 2rem 0 0;
    width: 10rem;
}

.pageHeaderMenu .menuElement{
    text-decoration: none;
    display: flex;
    border-right: 1px solid var(--themeColorModeHeaderBorder);
    height:3rem;
    align-items: center;
    padding:0 2rem;
    transition:all 400ms;
    cursor:pointer;
    background-color: var(--themeMainMed);
    color:var(--m5InputTextColorInvert);
}

.pageHeaderMenu .menuElement .icon{
    margin:0 0.5rem 0 0;
    font-size:0.75rem;
}

.pageHeaderMenu .menuElement.important{
    background-color: var(--themeMain);
}

.pageHeader .menuButtonsOpener {
    display: none;
}

/* Page header menu */

.pageHeaderMenu {
    padding: 0;
    text-align: right;
    flex: auto;
    display: flex;
    position: relative;
}

.pageHeaderMenu .userPanel{
    position: relative;
    z-index:100;
}

.pageHeaderMenu .searchContainer{
    display: flex;
    align-items: center;
    height:3rem;
    margin:0 1rem 0 1rem;
    flex:auto;
    text-align: left;
    position: relative;
}
.pageHeaderMenu .searchContainer .resultWindow{
    position: absolute;
    background-color: var(--backgroundFillSecondary);
    top:0;left:0;
    width:100%;
    border-bottom: 1px solid var(--borderColorMain);
    border-left: 1px solid var(--borderColorMain);
    border-right: 1px solid var(--borderColorMain);
}
.pageHeaderMenu .searchContainer .resultWindow .categoryHeader{
    margin: 1rem 0 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
}

.pageHeaderMenu .searchContainer .resultWindow .row{
    padding:0.5rem 1rem;
    border-bottom: 1px solid var(--borderColorMain);
    cursor:pointer;
}

.pageHeaderMenu .searchContainer .resultWindow .row:hover{
    background-color: var(--backgroundFillSecondaryHover);
}

.pageHeaderMenu .searchContainer .resultWindow .row SMALL{
    margin-left:1rem;
}


.pageHeaderMenu .userPanel .menuAvatar{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
    box-sizing: border-box;
    border: 1px solid var(--themeColorModeBordersLite);
    margin-top:0.25rem
}

.pageHeaderMenu .userPanel .submenu .userInfo{
    font-weight: bold;
    text-align: right;
    word-break: break-all;
    padding:1rem;
    background-color: var(--themeMainLite);
    color: var(--themeMain);
}

.pageHeaderMenu .userPanel .submenu{
    background-color: var(--m5BoxBackgroundColor);
    margin-top: -1px;
    width:300px;
    border-left: 1px solid var(--themeColorModeBorders);
    border-right: 10px solid var(--themeMain);
    border-bottom: 1px solid var(--themeColorModeBorders);
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 8px 8px 0 #00000044;
    position: absolute;
    right:0;
}

A.menuElement{
    color: inherit;
}

.pageHeaderMenu .userPanel .submenu .menuElement{
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--m5BordersLite);
    background-color: transparent;
    color:var(--m5InputTextColor);
}

.pageHeaderMenu .userPanel .submenu .menuElement:hover{
    background-color: var(--themeMainLiteMax);
}

.pageHeaderMenu .searchContainer INPUT[type=text]{
    width: 100%;
    background-color: var(--m5ColumnFillBackgroundTransparent);
    margin:0;
    padding:0.35rem 0.5rem;
    border:1px solid var(--m5BordersLite);
    border-radius: 0.25rem;
}

.pageHeaderMenu .searchContainer INPUT[type=text]:focus{
    outline: none;
    box-shadow: inset 0 0 6px var(--themeMainMed);
}

/* Page title bar */

HEADER.pageTitleBar{
    position: relative;
    background-color: var(--m5ColumnFillBackground);
    padding:6rem var(--uiDesktopHorizontalPadding) 2rem var(--uiDesktopHorizontalPadding);
    text-align: center;
    border-radius: 0 0 4rem 4rem;
    z-index: 1;
}

HEADER.pageTitleBar H1{
    font-size:2.5rem;
    margin:0.5rem 0 0 0;
}

HEADER.pageTitleBar H3{
    color:var(--themeMain);
    margin:0;
}

HEADER.pageTitleBar .description{
    color:var(--textColorMedium);
    margin:0.5rem 0 0 0;
}

    /* Status bar */

.statusBar{
    display: flex;
    padding: 0 var(--uiDesktopHorizontalPadding);
    align-items: center;
}

.statusBar .field{
    flex:auto;
    margin:0 0.5rem;
}


/* Type indicator */

.typeIndicator{
    display: inline-block;
    font-size: 0.7rem;
    padding:0.25rem 0.5rem;
    border:1px solid var(--m5InputTextColor);
    border-radius: 0.25rem;
    margin:0 0.5rem 0.05rem 0;
}

.typeIndicator.special{
    color: var(--m5themeMainComplementaryColor);
    border-color: var(--m5themeMainComplementaryColor);
}

.typeIndicator.important{
    color: var(--themeMain);
    border-color: var(--themeMain);
}

/* UI:ComboBox */

.uiComboBox{
    font-size:var(--uiElementsFontSize);
    padding: var(--uiElementsPadding);
    border: 1px solid var(--m5MobileMenuBorderColor);
    background-color: var(--m5InputBackground);
    color: var(--m5InputTextColor);
    border-radius: 0.25rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
    position: relative;
    cursor: pointer;
}

.uiComboBox .caret {
    position: absolute;
    transform: translateY(-50%);
    right:1rem;top:50%;
}


.uiComboBox .options{
    position: absolute;
    bottom:-1rem;
    left:0;
    transform: translateY(100%);
    background-color: var(--m5InputBackground);
    border: 1px solid var(--m5MobileMenuBorderColor);
    color:#000;
    z-index: 100;
    border-radius: 0.25rem;
    white-space: nowrap;
    display: block;
    width:100%;
    box-sizing: border-box;
}

.uiComboBox .options .option{
    padding: 0.5rem 1.5rem;
    box-sizing: border-box;
}

.uiComboBox .options .option:hover{
    background-color: var(--themeMainLiteMax);
}

.uiComboBox .options .option:first-of-type{
    border-radius:0.25rem 0.25rem 0 0;
}

.uiComboBox .options .option:last-of-type{
    border-radius:0 0 0.25rem 0.25rem;
}

/* UI:Color Picker */
.colorPicker {
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 0.5rem;
    margin: 1px;
}

.colorPicker.picked {
    color: #FFF;
    border: 1px solid #FFF;
    line-height: 1.8rem;
    text-align: center;
}

/* UI:Checkbox */

.uiCheckbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0 1rem 0.5rem 0.25rem;
}

.uiCheckbox .label {
    font-size: var(--uiElementsFontSize);
}

.uiCheckbox .checkbox {
    margin-right: 0.5rem;
    font-size:0.7rem;
    display: inline-block;
    text-align: center;
    border:1px solid var(--m5MobileMenuBorderColor);
    background-color: var(--m5InputBackground);
    border-radius: 0.25rem;
    width:1.2rem;
    height:1.2rem;
    box-sizing: border-box;
    padding: 0.1rem 0 0 0;
}

.uiCheckbox .checkbox.checked {

}

/* UI:Buttons and inputs */

INPUT[type=text], INPUT[type=email], INPUT[type=number], INPUT[type=password], TEXTAREA {
    font-size:var(--uiElementsFontSize);
    padding: var(--uiElementsPadding);
    width: 100%;
    border: 1px solid var(--m5InputBorderColor);
    background-color: var(--m5InputBackground);
    color: var(--m5InputTextColor);
    border-radius: 0.25rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
}
INPUT[type=text]::placeholder, INPUT[type=email]::placeholder, INPUT[type=number]::placeholder, INPUT[type=password]::placeholder, TEXTAREA::placeholder {
    color: var(--m5InputPlaceholderColor);
}

INPUT, TEXTAREA, SELECT {
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    font-size: var(--uiElementsFontSize);
}

.button, INPUT[type=submit], SELECT {
    font-size: var(--uiElementsFontSize);
    background-color: var(--backgroundFillButton);
    color: var(--m5InputTextColor);
    border: 1px solid var(--borderColorButton);
    padding: var(--uiElementsPadding);
    border-radius: 0.25rem;
    display: inline-block;
    cursor: pointer;
    text-decoration: none !important;
    margin:0.5rem 0.25rem;
}

.memoPlusButton{
    margin-right:1rem;
}

.memoPlusButton A{
    background-color: #FFFFFF;
    color: var(--themeMain);
    border:1px solid transparent;
    display: block;
    border-radius: 0.25rem;
    padding:0.35rem 0.5rem;
    margin-top:0.5rem;
    text-decoration: none;
    transition: all 400ms;
}

.memoPlusButton A:hover{
    background-color: var(--themeMain);
    color: #FFFFFF;
    border:1px solid #FFFFFF;
}

.pageNavButtons {
    margin: 2rem 0 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    border-radius: 1rem;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    text-align:center;
}

.pageNavButtons > .button {
    flex:auto;
    padding: 1rem;
    font-weight: bold;
    font-size: 1.2rem;
    align-content: center;
}

.pageNavButtons .button.important{
    background-color: var(--themeMain);
    color:#FFF;
}

.pageNavButtons .button SMALL {
    display: block;
    margin-top: 0.5rem;
    font-weight: normal;
    font-size: 0.9rem;
}

/* UI:Subject description */

.subjectDescription {
    font-size: 1.2rem;
    margin: 0;
    padding: 3rem var(--uiDesktopHorizontalPadding) 2rem var(--uiDesktopHorizontalPadding);
    text-align: center;
    background-color: var(--headerTranslucentBackground);
    background: linear-gradient(119deg,var(--headerTranslucentBackground) 0%, var(--headerTranslucentBackgroundMed) 100%);
    box-sizing: border-box;
    backdrop-filter: blur(0.3rem);
    display: block;
}

.subjectDescription.withButtons{
    padding: 8rem var(--uiDesktopHorizontalPadding) 4rem var(--uiDesktopHorizontalPadding);
    display: grid;
    grid-template-columns: 1fr 25rem;
    gap: 4rem;
    width:100%;
}

.subjectDescription .h3Container{
    margin-bottom:0.5rem;
}

.subjectDescription .buttons {
    background-color: var(--m5ColumnFillBackgroundTransparent);
    padding: 1rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(100rem);
}

.subjectDescription .buttons .button.main {
    font-size: 1.2rem;
    margin: 1rem 0.5rem;
    background-color: var(--themeMain);
    color: var(--m5ButtonTextInvert);
}

.subjectDescription .buttons .button {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    margin-left: 0.5rem;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}
.subjectDescription .mainModeButtons {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}


.subjectDescription .mainModeButtons .button {
    flex: 1 1;
    text-align: center;
    padding: 1rem !important;
    margin-bottom: 0.25rem;
}

.subjectDescription.withButtons .h3Container {
    border-bottom: 1px solid var(--headerTranslucentBackgroundMed);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.subjectDescription.withButtons .h3Container H3 {
    border-bottom: 5px solid var(--themeMain);
    padding: 0 1rem 0.25rem 1rem;
}

/* UI:Box */

.box {
    background-color: var(--m5BoxBackgroundColor);
    border:1px solid var(--m5BordersLite);
    padding: 0;
    margin: 0 0 1rem 0;
    border-radius: var(--uiElementBorderRadius);
}

.box.shade-no {
    background-color: transparent;
    border:none;
}

.box .h3Container {
    border-radius: 0.25rem 0.25rem 0 0;
    padding: 1.35rem 0 0 0;
    text-align: left;
}

.box .h3Container H3 {
   /*background: linear-gradient(90deg, var(--themeMain) 0%, var(--themeComplementaryColor) 100%);*/
    background-clip: text;
    font-size: 1.2rem;
    color: var(--themeMain);
    border-bottom: none;
    margin: 0 0 0 1rem;
}

.box .padding{
    padding:1rem;
}

.box .row{
    display: flex;
    padding: 0.75rem 0.5rem;
    border-bottom:1px solid var(--borderColorMain);
}

.box .row:last-of-type{
    border-bottom: none;
}

.cell{
    flex:1 1;
}

.box .row SELECT{
    width:100%;
}

.box .row .cell.label{
    flex:0.5 0.5;
    font-weight:bold;
    margin-right: 1rem;
}

/* UI: Tree Drawer */
.uiTreeDrawer {
    margin: 0.25rem 0;
    padding: 0.25rem 0;
    user-select: none;
}

.uiTreeDrawer UL {
    margin: 0.5rem 0 0.5rem 0;
    padding-inline-start: 1rem;
}

.uiTreeDrawer .uiTreeDrawer {
    margin: 0.25rem 0 0 0;
}


.uiTreeDrawer LABEL {
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
    display: inline-block;
    text-transform: none;
    font-size:var(--uiElementsFontSize);
    font-weight: normal;
    margin:unset;
}

.uiTreeDrawer LABEL.picked {
    background-color: var(--themeMainLite);
    border: 1px solid var(--themeMainMed);
}

.uiTreeDrawer LI {
    list-style: none;
    margin: 0;
    text-indent: 0;
}

.uiTreeDrawer LI .bullet {
    display: inline-block;
    width: 1.5rem;
}

/* UI: Tab Container */
.tabContainer {
    margin: 3rem 0 0 0;
}

.tabContainer.independent{
    margin:3rem 0;
}

.tabContainer .aligner{
    display: inline-block;
    border-radius: 0.5rem 0.5rem 0 0;
    margin:0 2rem;
}

.tabContainer .tabs{
    border-bottom: 1px solid var(--themeMainLiteMax);
    background-color: var(--backgroundFillSemiTransparent);
    padding: 0.5rem;
    display: inline-flex;
    flex-direction: row;
    border-radius: 0.5rem 0.5rem 0 0;
}

.tabContainer.independent .aligner{
    border-radius: 0.5rem;
    margin:0;
}
.tabContainer.independent .tabs {
    border-radius: 0.5rem;
}

.tabContainer .tab {
    display: inline-block;
    padding: 0.5rem 1rem 0.3rem 1rem;
    margin-right: 0.5rem;
    font-weight: bold;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 400ms;
    border-bottom: 5px solid transparent;
    text-decoration: none;
    color: var(--themeColorModeText);
}

.tabContainer .tab.active {
    background: var(--themeMain);
    color:#FFF;
    border-radius: 0.25rem;

}

/* UI:Tag */
A.tag {
    display: inline-block;
    color: var(--m5InputTextColor);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin: 0 0.5rem 0.5rem 0;
    background: var(--m5BoxButtonBackground);
    border: 1px solid var(--m5ButtonBorder);
    text-decoration: none;
    cursor: pointer;
}

A.tag.small {
    font-size: 0.8rem;
    padding: 0.15rem 0.25rem;
}

A.tag.tiny {
    font-size: 0.7rem;
    padding: 0.05rem 0.1rem;
}

A.tag:hover {
    background-color: var(--themeColorModeBackgroundDarker);
}

A.tag.popular {
    font-size:0.9rem;
    padding:0.2rem 0.4rem;
    margin: 0 0.5rem 0.5rem 0.5rem;
}

/* UI: Switch */

.uiSwitch {
    font-weight: bold;
    display: inline-block;
    letter-spacing: 0.075rem;
    background-color: #F2F2F2;
    border-radius: 0.25rem;
    margin-left: 3rem;
    padding: 0.25rem 1rem;
    cursor: pointer;
    width: 100px;
    min-width: 100px;
    text-align: right;
    transition: all 1s;
    font-size: 0.7rem;
    line-height: normal;
    position: relative;
    box-sizing: border-box;
    text-transform: uppercase;
}



.uiSwitch .dot {
    position: absolute;
    transition: all 400ms;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    background-color: #FFFFFFCC;
    top: 0.17rem;
}

.uiSwitch.true{
    background: linear-gradient(45deg, var(--m5BoxButtonBackground) 0%, var(--themeMainLiteMax) 100%);
    border: 1px solid var(--themeMainLiteMax);
    color: var(--themeMain);
}

.uiSwitch.true .dot {
    left: 3px;
    background-color: var(--themeMain);
}

.uiSwitch.false .dot {
    left: 80px;
    background-color: #323232CC;
}

.uiSwitch.false {
    border:1px solid var(--m5ButtonBorder);
    background-color: var(--m5BoxButtonBackground);
    color: var(--themeColorModeTextMed);
    text-align: left;
}

/* UI:Progress bar */
.uiProgressBar {
    display: block;
    position: relative;
    margin-top:1rem;
    height: 6px;
    background-color: var(--m5InputBackground);
    border:1px solid var(--m5InputSetElementBorderColor);
    border-radius: 3px;
}

.uiProgressBar .gauge {
    display: inline-block;
    position: absolute;
    top:0;left:0;
    background: linear-gradient(90deg,var(--themeMain) 0%, var(--m5themeMainComplementaryColor) 100%);
    height: 6px;
    border-radius: 3px;
    opacity:0.5;
}

.uiProgressBar .gaugePercent {
    font-size:0.7rem;
    position: absolute;
    bottom:0.5rem;
    left:0;
    white-space:nowrap;
}

/* UI:Window */

.uiWindow {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
    background-color: var(--m5BoxBackgroundColor);
    width: 60vw;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0px 12px 27px -12px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 12px 27px -12px rgba(0, 0, 0, 1);
    box-shadow: 0px 12px 27px -12px rgba(0, 0, 0, 1);
    z-index: 100;
    font-size: var(--uiElementsFontSize);
    max-height: 90vh;
    color: var(--themeColorText);
}

.uiWindow.narrow {
    width: 500px;
}

.uiWindow.fullscreen {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    box-sizing: border-box;
}

.uiWindow.open {
    display: block;
    animation: fadeIn 400ms forwards;
    transform: translate(-50%, -51%);
}

.uiWindow.fullscreen.open {
    transform: translate(0, 0);
}

.uiWindow HEADER {
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    display: flex;
}

.uiWindow.fullscreen HEADER {
    text-align: left;
}

.uiWindow HEADER .text {
    flex: auto;
    background-color: var(--themeColorModeButtonBackground);
    border-radius: 0.5rem 0 0 0;
    padding: 0.5rem;
}

.uiWindow.fullscreen HEADER .text {
    background-image: url("/lib/images/logo-inv.png"), url(/css/images/pageHeaderBg.jpg);
    background-size: 100px, cover;
    background-repeat: no-repeat;
    background-position: 98% 50%;
    padding: 1rem;
    background-blend-mode: normal, hard-light;
}

.uiWindow.fullscreen HEADER .text {
    background-color: var(--themeMain);
    color: var(--themeColorTextInvert);
}

.uiWindow.fullscreen HEADER .text {
    border-radius: 0;
}

.uiWindow HEADER .controls {
    background-color: var(--themeColorText);
    color: var(--themeColorTextInvert);
    border-radius: 0 0.5rem 0 0;
}

.uiWindow.fullscreen HEADER .controls {
    border-radius: 0;
}

.uiWindow HEADER .controls .control {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 400ms;
    border-radius: 0 0.5rem 0 0;
}

.uiWindow.fullscreen HEADER .controls .control {
    border-radius: 0;
    padding: 1rem;
}

.uiWindow HEADER .controls .icon {
    width: 1rem;
    height: 1rem;
}

.uiWindow .windowIcon{
    font-size:3rem;
    color:var(--themeMainMed);
    text-align: center;
}

.uiWindow > .body {
    padding: 2rem;
    text-align: left;
    overflow: auto;
    max-height: calc(90vh - 10rem);
    min-height: 4rem;
    scrollbar-width: thin;
    scrollbar-color: var(--themeMain) var(--themeColorModeBackground);
}

.uiWindow > .body.fullwidth{
    padding: 2rem 0;
}

.uiWindow .buttons {
    margin-top: 2rem;
    padding: 2rem 0 0 0;
    border-top: 1px solid #EAEAEA;
}

.uiWindow .buttons .button,
.uiWindow .buttons INPUT[type=submit]{
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}

.uiWindow .buttons INPUT[type=submit]{
    background-color: var(--themeMain);
    color:#FFF;
}

/* Table row */

.resultBox {
    display: flex;
    padding: 1rem;
    text-decoration: none;
    color: var(--themeColorModeTextMed);
    border-bottom: 1px solid var(--m5BordersLite);
    transition: all 1s;
    min-height: 3rem;
}

.resultBox A.label{
    font-size:var(--uiElementsFontSizeXL);
    color: var(--textColorMain);
    font-weight: bold;
}

.resultBox A{
    color:inherit;
}

.resultBox:first-of-type{
    border-radius: 0.5rem 0.5rem 0 0;
    padding-top:0;
}

.resultBox:last-of-type{
    border-radius: 0 0 0.5rem 0.5rem;
    border-bottom: none;
}

.resultBox .header {
    font-size: 1.1rem;
    color: inherit;
    text-decoration: none;
}

.resultBox .textSmaller {
    font-size: 0.8rem;
    color: #777;
    margin: 0.25rem 0;
    text-decoration: none !important;
}

.resultBox .details {
    padding: 0.5rem 0 0.85rem 0;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--themeColorModeBackgroundDarker);
    text-decoration: none;
}

.resultBox .details .icon{
    margin-right: 0.25rem;
}

.resultBox .coverImg {
    max-width: 10rem;
    min-width: 10rem;
    margin-right: 2rem;
    border-radius: 1rem;
    background-size: cover;
    background-position: center;
    flex: auto;
}

.resultBox .coverImgSmall {
    width: 4rem;
    min-width: 4rem;
    height: 3rem;
    object-fit: cover;
    margin:0.5rem;
    border-radius: 0.5rem;
}

.resultBox .coverImg IMG {
    width: 10rem;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

/* Set link */

.setLinkSmall{
    margin-bottom:1rem;
    font-size:var(--uiElementsFontSizeS);
    cursor: pointer;
    border-bottom:1px solid var(--m5InputSetElementBorderColor);
    padding:1rem;
}

.setLinkSmall .body{
    display: grid;
    gap:1rem;
    grid-template-columns: 4rem 1fr;
}

.setLinkSmall .body IMG{
    border-radius: var(--uiElementBorderRadius);
    width:100%;
}

.setLinkSmall .title{
    font-size: 100%;
    font-weight: bold;
    margin-bottom:0.5rem;
}

/* Page footer */

BODY FOOTER.pageFooter {
    padding: 6rem 15vw 6rem 15vw;
    border-top: 3rem solid var(--themeMainMed);
    background-color: var(--themeMainMed) !important;
    background-image: url("images/pageFooterBg.jpg");
    background-blend-mode:luminosity;
    background-position: 50% 0;
    background-size: cover;
    position: relative;
}

BODY FOOTER.pageFooter .footerBox {
    display: flex;
}

BODY FOOTER.pageFooter .footerBox .column1 {
    flex: 1 1;
    margin-right: 4rem;
    padding:1rem;
}

BODY FOOTER.pageFooter .footerBox .column2 {
    flex: 3 3;
    text-align: right;
}

BODY FOOTER.pageFooter H3,
BODY FOOTER.pageFooter H4{
    font-size:1.3rem;
    color: var(--themeMain);
    border: none;
    margin: 4rem 0 1rem 0;
    padding: 0;
}

BODY FOOTER.pageFooter H4{
    font-size:1.2rem
}

BODY FOOTER.pageFooter H3:first-of-type{
    margin: 0 0 1rem 0;
    color:var(--themeColorText) !important;
    opacity:0.7;
}

BODY FOOTER.pageFooter .footerBox .linkBlock A {
    display: block;
    padding:0.5rem 1rem;
    border-radius:0.5rem;
    border-bottom: 1px solid var(--themeMainLite);
    color:var(--themeColorModeText) !important;
    text-decoration: none;
    transition: all 400ms;
}

BODY FOOTER.pageFooter .footerBox .linkBlock A:hover{
    background-color: var(--themeMainLiteMax);
}

/* UI:Curtain */
#uiCurtain {
    background: var(--themeMain) linear-gradient(315deg, var(--themeMainMed), var(--themeMain) 100%);
    background-blend-mode: luminosity;
    opacity: 0.9;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    box-sizing: border-box;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    pointer-events: none;
    visibility: hidden;
    transition: all 400ms;
    color: #000000;
}

#uiCurtain.show {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    visibility: visible;
    pointer-events: auto;
}

#uiCurtain .effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    object-fit: cover;
}

@media screen and (max-width: 1000px){
    :root {
        --uiDesktopHorizontalPadding: 0.5rem;
    }

    HEADER.pageTitleBar H1{
        font-size:1.3rem;
    }

    HEADER.pageTitleBar H3{
        font-size:1.1rem;
    }

    BODY FOOTER.pageFooter{
        padding: 1rem 0.5rem;
    }
    BODY FOOTER.pageFooter  .footerBox {
        flex-direction: column;
    }

    .pageContainer.appLayout{
        display: block;
    }

    .sidebar{
        position: fixed;
        display: none;
    }
}

/* Animations */
@keyframes floatPageHeader {
    0% {
        top: -3rem;
    }
    100% {
        top: 0;
    }
}

@keyframes defloatPageHeader {
    0% {
        top: 0;
    }
    100% {
        top: -5rem;
    }
}