@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');

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

::-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);
}

BODY {
    font-family: 'Quicksand', sans-serif;
    padding: 0;
    margin: 0;
    /*background-color:#F2F2F2;*/
    background-color: var(--themeColorModeBackground);
    color: var(--themeColorModeText);
}

BODY FOOTER.pageFooter {
    margin-top:4rem;
    padding: 6rem 15vw 6rem 15vw;
    border-top: 3rem solid var(--themeMainMed);
    background-color: var(--themeMainMed);
    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);
}

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

[v-cloak] {
    display: none;
}

H3 {
    font-size: 1rem;
    margin-bottom: 0;
    border-bottom: 5px solid #EAEAEA;
    padding: 0 1rem 0.25rem 1rem;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

.h3Container {
    border-bottom: 1px solid var(--themeColorModeBorders);
    text-align: center;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
}

.box .h3Container {
    margin-top: 0;
    margin-bottom: 1rem;
}

.box .h3Container H3 {
    border-bottom-color: var(--themeMain);
}

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

H3 .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #F2F2F2;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    text-align: center;
    border-radius: 0.15rem;
}

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

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

.ccBH:hover {
    background-color: var(--themeMain);
}

.ccBR, .mainText H3 {
    border-color: var(--themeMain) !important;
}

.ccBLite {
    background-color: var(--themeMainMed) !important;
}

.ccBLiteMax {
    background-color: var(--themeMainLiteMax) !important;
}

.ccBLiteMed {
    background-color: var(--themeMainLite) !important;
}

INPUT {
    box-sizing: border-box;
}

.flex {
    display: flex;
}

.flex1 {
    flex: 1 1;
    padding: 0;
}

.flex2 {
    flex: 2 2;
    padding: 0;
    margin-right: 3rem;
}

.flex3 {
    flex: 3 3;
    padding: 1rem 3rem;
}

.mrR,
.mrM {
    margin-right: 3rem;
}

.trFast {
    transition: all 400ms;
}

.button, INPUT[type=submit], SELECT {
    background: #EEE;
    border: 1px solid var(--themeColorModeBorders);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    display: inline-block;
    cursor: pointer;
    text-decoration: none !important;
}

SELECT OPTION {
    padding: 0.5rem 1rem;
    line-height: 2rem;
}

.button {
    margin: 0 0.5rem 0.5rem 0;
    background-color: var(--themeColorModeButtonBackground);
    color: var(--themeColorModeTextMed);
    transition: all 400ms;
}

.button.ccB {
    border-color: var(--themeMain);
}

.button:hover.ccB {
    border-color: var(--themeMain);
    background-color: var(--themeMainMed) !important;
}

.button.pulse {
    position: fixed;
    animation: lookAtMe 10s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.button .icon {
    margin-right: 1rem;
}

.button:hover {
    background-color: var(--themeColorModeButtonBackgroundHover);
    border-color: var(--themeColorModeButtonBorder);
}

A,
A:visited {
    color: var(--themeMain);
}

A.button {
    color: inherit;
}

.button.small {
    padding: 0.25rem 1rem;
    font-size: 0.9rem;
}

.button.tiny {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}

.button.tiny .icon{
    margin-right:0.25rem;
}

#uiCurtain {
    background-color: #EAEAEA;
    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);
    transition: all 400ms;
    color: #000000;
}

#uiCurtain.show {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

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

.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;
}

.uiWindow {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
    background-color: var(--themeColorModeUiElementBackground);
    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: 1rem;
    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 > .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 .body .row {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--themeColorModeBorders);
}

.uiWindow .searchRowContainer{
    scrollbar-width: thin;
    scrollbar-color: var(--themeMain) var(--themeColorModeBackground);
    max-height: calc(90vh - 12rem);
    overflow-y: auto;
    margin-top: 3.7rem;
}

.uiWindow .searchRow {
    text-align: left;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--themeColorModeBordersLite);
    display: flex;
    text-decoration: none;
    color: var(--themeColorText);
}

.uiWindow .searchRow .title{
    color: var(--themeColorText);
    font-weight:bold;
    display: inline-block;
    margin-bottom:0.25rem;
}

.uiWindow .searchRow .description{
    font-size:0.8rem;
}

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

.uiWindow .searchRow .tags {
    font-size: 0.7rem;
}

.uiWindow .searchContainer {
    position: fixed;
    width: 100%;
    top: 2.5rem;
    left: 0;
    padding: 1rem;
    box-sizing: border-box;
    background-color: var(--themeColorModeUiElementBackground);
}

.uiWindow INPUT[type=text].search {
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
    color: #FFFFFF;
    border: 1px solid var(--themeMain);
    background-color: var(--themeMainMed);
    box-shadow: inset 0 0 0.5rem var(--themeMainMed);
}

.uiWindow INPUT[type=text]:focus {
    outline: none;
}

.uiWindow INPUT[type=text].search::placeholder {
    color: #FFFFFFAA;
}

.uiWindow .inputField {
    padding: 1rem 0;
    align-items: center;
}

.uiWindow .inputField LABEL {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.uiWindow INPUT[type=text]::placeholder, .uiWindow INPUT[type=password]::placeholder {
    color: #DDD;
}

.uiWindow INPUT[type=text], .uiWindow INPUT[type=email], .uiWindow INPUT[type=number], .uiWindow INPUT[type=password] {
    padding: 0.5rem;
    border-color: #CACACA;
}

.uiWindow .errorMessage {
    color: #810a27;
    background-color: #f9e9ed;
    padding: 1rem;
    border-radius: 0.5rem;
}

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

.uiWindow .buttons.floating {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 0.25rem 1rem;
    box-sizing: border-box;
    background-color: var(--themeColorModeBackground);
}

.uiWindow .buttons INPUT[type=submit], .uiWindow .buttons .button {
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 0 0 0.5rem 0;
}



.uiToolTipContainer{
    display: none;
    position: absolute;
    padding:40px;
    z-index: 101;
}

.uiToolTipContainer.open{
    display: block;
}


.uiToolTip{
    background-color: var(--themeColorModeBackground);
    font-size:0.9rem;
    padding:1rem;
    border-radius: 0.5rem;
    width:250px;
    max-width: 250px;
}

.uiTreeDrawer {
    margin: 0.25rem 0;
    padding: 0.25rem 0;
    background-color: var(--themeColorModeUiElementBackground);
    border-radius: 1rem;
    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;
}

.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;
}

.uiMessageTrack {
    position: fixed;
    right: 4rem;
    bottom: 2rem;
    min-width: 25vw;
    max-width: 25vw;
    z-index: 101;
}

.uiMessageTrack .notification {
    position: relative;
    background-color: var(--themeMain);
    color: #FFFFFF;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 2rem;
    -webkit-animation: bounce-in-bottom 1.1s both;
    animation: bounce-in-bottom 1.1s both;
}

.uiMessageTrack .notification .controls {
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    cursor: pointer;
}

.uiMessageTrack .notification HEADER {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #FFFFFFAA;
}

.uiMessageTrack .notification .message {
    font-size: 0.9rem;
    color: #FFFFFF;
}

.uiMessageTrack .notification .buttons {
    margin: 2rem 0 0 0;
    text-align: center;
}

.uiMessageTrack .notification .buttons .button {
    background-color: var(--themeColorModeBackgroundDarkify);
    color: var(--themeColorTextInvert);
    border: 1px solid var(--themeColorTextInvert);
}


.uiCheckbok {
    display: flex;
    align-items: center;
}

.uiCheckbok .unchecked {
    width: 1.4rem;
    height: 1.3rem;
    border: 2px solid var(--themeMain);
    border-radius: 0.25rem;
    box-sizing: border-box;
    cursor: pointer;
}

.uiCheckbok .checked {
    width: 1.4rem;
    height: 1.3rem;
    border: 2px solid var(--themeMain);
    background-color: var(--themeMain);
    border-radius: 0.25rem;
    box-sizing: border-box;
    cursor: pointer;
}

.uiCheckbok .label {
    flex: auto;
    font-size: 0.9rem;
    margin-left: 1rem;
}

.uiSwitchContainer {
    display: flex;
}

.uiSwitchContainer.vertical{
    display: inline-flex;
    flex-direction: column;
}

.uiSwitchContainer .label {
    flex: auto;
    font-weight: bold;
    font-size: 0.9rem;
}

.uiSwitchContainer.vertical .label{
    margin-bottom:1rem;
}

.uiSwitchContainer.vertical .uiSwitch{
    margin-left: 0;
}


.uiSwitch {
    font-weight: bold;
    display: inline-block;
    letter-spacing: 0.075rem;
    background-color: #F2F2F2;
    border-radius: 0.75rem;
    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.5rem;
    background-color: #FFFFFFCC;
    top: 0.25rem;
}

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

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

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

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

.uiTopBar {
    background-color: #323232;
    color: #FFFFFF;
    border-bottom: 0.5rem solid var(--themeMain);
    display: flex;
    align-items: center;
    width: 98%;
    box-sizing: border-box;
    z-index: 101;
    bottom: 1rem;
    left: -98%;
    transition: all 400ms;
    border-radius: 0.5rem;
    position: fixed;
}

.uiTopBar.open {
    left: 1%;
}

.uiTopBar .message {
    flex: auto;
    padding: 1rem;
}

.uiTopBar .button {
    padding: 0.5rem 1rem;
    background-color: var(--themeMain);
    border: none;
    color: #000000;
    margin: 0 2rem;
}

.pageHeaderMenu {
    padding: 0 1rem;
    text-align: right;
    margin-right: 3rem;
    flex: auto;
}

.pageHeaderMenu .menuButtonsOpener {
    display: none;
}

.pageHeaderUser {
    min-width: 12rem;
}

.pageHeaderMenu .menuButtons {
    flex: 3 3;
    padding: 0;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 98;
}

.pageHeaderUser .menuButtons {
    position: relative;
}

.memoPlusButton{
    margin-right:0;
    position: absolute;
    right:calc(14.6vw + 160px);
    top:0;
    z-index:100;
}

.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;
}


.pageHeaderMenu .menuButtons .submenu,
.pageHeaderUser .menuButtons .submenu {
    position: absolute;
    top: 2.95rem;
    right: -6px;
    flex-direction: column;
    background-color: #F2F2F2;
    text-align: right;
    border-right: 6px solid;
    border-radius: 0 0 0.5rem 0.5rem;
    -webkit-box-shadow: 0px 5px 5px 0px #42424288;
    -moz-box-shadow: 0px 5px 5px 0px #42424288;
    box-shadow: 0px 5px 5px 0px #42424288;
    display: none;
}

.pageHeaderUser .menuButtons .submenu .userInfo {
    word-break: break-all;
    color: var(--themeColorModeText);
    background-color: var(--themeColorModeBackground);
    font-weight: bold;
    padding: 1rem;
    cursor: default;
}

.pageHeaderMenu .menuButtons .submenu A,
.pageHeaderUser .menuButtons .submenu A {
    font-weight: normal;
    padding: 1rem 1rem 1rem 6rem;
    border-bottom: 1px solid var(--themeColorModeBorders);
    background-color: var(--themeColorModeButtonBackground);
    display: flex;
}

.pageHeaderMenu .menuButtons .submenu A SPAN,
.pageHeaderUser .menuButtons .submenu A SPAN {
    flex: auto;
    white-space: nowrap;
}

.pageHeaderMenu .menuButtons .submenu A .fa-regular,
.pageHeaderUser .menuButtons .submenu A .fa-regular {
    width: 2rem;
    text-align: right;
    font-size: 1rem;
    margin-left: 1rem;
    opacity: 0.5;
}

.pageHeaderMenu .menuButtons .submenu A:last-of-type {
    border-bottom: none;
}

.pageHeaderMenu .menuButtons .menuElement:hover .submenu,
.pageHeaderUser .menuButtons .menuElement:hover .submenu {
    display: block;
    animation: fadeIn 400ms ease-out forwards;
}

.pageHeaderUser .menuButtons .menuElement.portrait:hover .submenu {
    right: 0;
    top: 3rem;
}

.pageHeaderMenu .menuButtons .menuElement,
.pageHeaderUser .menuButtons .menuElement {
    position: relative;
    font-size: 0.9rem;
    box-sizing: border-box;
    margin: 0;
    color: var(--themeColorText);
    transition: all 600ms;
    cursor: pointer;
    text-decoration: none;
    display: flex;
}

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

.pageHeaderMenu .menuButtons > .menuElement {
    padding: 0 2rem;
    color: var(--themeColorTextInvert);
    height: 3rem;
    display: flex;
    align-items: center;
}

.menuElement.doLogonButton{
    background-color: var(--themeColorModeButtonBackground);
    color:var(--themeMain) !important;
}

.pageHeaderMenu .menuButtons > .menuElement .icon {
    order: 1;
    margin: 0 0.5rem 0 0;
    width: 1rem;
    height: 1rem;
}

.pageHeaderMenu .menuButtons > .menuElement SPAN {
    order: 2;
}

.pageHeaderUser .menuButtons > .menuElement {
    padding: 0 1rem;
    color: var(--themeColorTextInvert);
    height: 3rem;
    display: flex;
    align-items: center;
}


.pageHeaderUser .menuButtons > .menuElement.portrait {
    padding: 0.75rem;
    background-color: #00000070;
    border-radius: 0.25rem;
    transition: all 400ms;
}

.pageHeaderUser .menuButtons > .menuElement.portrait:hover {
    background-color: #F2F2F2;
    border-radius: 0.25rem 0.25rem 0 0;
}

.pageHeaderMenu .menuButtons .menuElement:hover,
.pageHeaderUser .menuButtons .menuElement:hover {
    background-color: var(--themeMainMed);
    border-color: var(--themeMain);
    color: var(--themeColorModeButtonBackground) !important;
}

.pageHeader {
    padding: 0 14.6vw;
    text-align: right;
    background-image: url("/css/images/pageHeaderBg.jpg");
    background-size: cover;
    background-blend-mode: hard-light;
    display: flex;
    align-items: center;
    background-color: var(--themeMain);
    height: 3rem;
    top: 0;
    position: absolute;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
}

.pageHeader .headerToolbar {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3rem;
    bottom: -3rem;
    background-color: var(--themeColorModeButtonBackground);
    border-bottom: 1px solid var(--themeColorModeBorders);
    color: var(--themeColorText);
    display: flex;
    transition: all 200ms;
    font-size: 0.9rem;
}

.pageHeader.floating .headerToolbar {
    bottom: 0;
    height: 0;
    overflow-y: hidden;
}

.pageHeader .headerToolbar .tButton {
    color: var(--themeColorText);
    border-right: 1px solid var(--themeColorModeBorders);
    line-height: 3rem;
    padding: 0 1rem;
    cursor: pointer;
    text-decoration: none;
}

.pageHeader .headerToolbar .tButton:hover {
    background-color: var(--themeMainLite);
}

.pageHeader .headerToolbar .tButton .icon {
    margin-right: 0.5rem;
}

.pageHeader .headerToolbar .tSelect {
    padding: 0 1rem;
    position: relative;
}

.pageHeader .headerToolbar .tSelect .tSelectBox {
    position: absolute;
    left: 1rem;
    top: 0.7rem;
}

.pageHeader .headerToolbar .tSelect .tSelectBox .tCurrentOption {
    background-color: var(--themeColorModeUiQuizElementBackground);
    border: 1px solid var(--themeColorModeBorders);
    display: none;
    cursor: pointer;
}

.pageHeader .headerToolbar .tSelect .tSelectBox .tCurrentOption.open {
    display: block;
    padding: 0.25rem 1rem;
    border-radius: 0.15rem;
}

.pageHeader .headerToolbar .tSelect .tSelectBox .tOptionList {
    display: none;
    border: 1px solid var(--themeColorModeBorders);
}

.pageHeader .headerToolbar .tSelect .tSelectBox .tOptionList.open {
    display: block;
}

.pageHeader .headerToolbar .tSelect .tSelectBox .tOption.selected {
    display: block;
    cursor: pointer;
}

.pageHeader .headerToolbar .tSelect .tOption {
    background-color: var(--themeColorModeUiQuizElementBackground);
    border-bottom: 1px solid var(--themeColorModeBorders);
    display: block;
    cursor: pointer;
    padding: 0.25rem 1rem;
}

.pageHeader .headerToolbar .tSelect .tOption:hover {
    background-color: var(--themeColorModeUiQuizElementBackgroundHover);
}

.pageHeader .headerToolbar .tField {
    padding: 0 1rem;
    display: grid;
    place-items: center;
    height: 3rem;
    border-right: 1px solid var(--themeColorModeBorders);
}

.pageHeader .headerToolbar .progressBar {
    position: absolute;
    bottom: -3px;
    height: 3px;
    width: 100%;
    left: 0;
}


.pageHeader .headerToolbar .progressBar .gauge {
    background-color: var(--themeMain);
    height: 3px;
    transition: all 400ms;
}

.pageHeader .headerToolbar .progressBar .gaugePercent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pageHeader .headerToolbar .tSelect SELECT {
    height: 3rem;
    border: none;
    background-color: var(--themeColorModeButtonBackground);
    color: var(--themeColorText);
}

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

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


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

.pageHeaderUser .menuAvatar {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    box-sizing: border-box;
    border: 1px solid var(--themeColorModeBordersLite);
}

.pageTitleBar {
    padding: 0;
    margin: 0;
}


.pageTitleBar .statusBar {
    color: #777;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.pageTitleBar .statusBar .field {
    display: inline-block;
    flex: auto;
    margin-right: 1rem;
    padding-right: 1rem;
    border-right: 1px solid #CCC;
}

.pageTitleBar .statusBar .field .button {
    padding: 0.25rem 1rem;
    transition: all 400ms;
}

.pageTitleBar .statusBar .field .button .icon {
    transition: all 400ms;
}

.pageTitleBar .statusBar .field .button:hover {
    background-color: #757575;
    color: #FFF !important;
}

.pageTitleBar .statusBar .field .button:hover .icon {
    color: #FFF !important;
}

.pageTitleBar .statusBar .field:last-of-type {
    border: none;
}

H1.pageTitle {
    font-size: 3rem;
    line-height: 3.3rem;
    font-weight: bold;
    margin: 3rem 0 0 0;
    letter-spacing:-1px;
}


.pageContainer {
    padding: 0 14.6vw;
    margin-top: 3rem;
}

.pageContainer.wide {
    padding: 3rem 0;
}

.pageContainer.pro {
    padding: 0;
}

.pageContainer.pro .sideBar {
    margin: 5rem 3rem 0 0;
    border-left: 1px solid #EAEAEA;
    padding-left: 3rem;
}


.box INPUT[type=text], .box INPUT[type=password],
.subjectDescription INPUT[type=text], .subjectDescription INPUT[type=password] {
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--themeMainLite);
}

.pageContainer INPUT[type=text]::placeholder {
    color: #E0E0E0;
}

.pageContainer INPUT[type=text]:focus {
    outline: none;
    -webkit-box-shadow: inset 0px 0px 10px 0px var(--themeColorModeButtonBackground);
    -moz-box-shadow: inset 0px 0px 10px 0px var(--themeColorModeButtonBackground);
    box-shadow: inset 0px 0px 10px 0px var(--themeColorModeButtonBackground);
    border-color: var(--themeMain);
}

.resultRow {
    padding: 0.5rem;
    border-bottom: 1px solid #EAEAEA;
}

.subjectCover {
    display: block;
    height: 65vh;
    padding: 0;
    box-sizing: border-box;
    background-size: cover;
    background-position: 50% 50%;
}

.subjectCover IMG{
    width: 100%;
}

.subjectCover.half {
    height: 32.5vh;
}


.subjectDescription {
    font-size: 1.2rem;
    width: 70.7vw;
    margin: -30vh auto 0 auto;
    padding: 1rem;
    text-align: center;
    background-color: var(--themeColorModeUiElementBackground);
    box-sizing: border-box;
    border-radius: 1rem;
}



.subjectDescription.home {
    margin: -2rem auto 0 auto;
}

.subjectDescription.noCover H1.pageTitle,
.subjectDescription.noCover .mainDescription{
    margin:0 0 1rem 0;
}

.pageTitleBar.pro .subjectDescription {
    width: auto;
    margin-right: 3rem;
    margin-left: 3rem;
}

.subjectDescription.half {
    margin: -8rem auto 0 auto;
}

.subjectDescription.noCover {
    margin: 6rem auto 0 auto;
}

.subjectDescription .mainDescription {
    margin: 2rem 0 0 0;
}

.subjectDescription .details {
    font-size: 0.8rem;
    margin-top: 1rem;
}

.subjectDescription .buttons {
    text-align: right;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--themeColorModeBorders);
}

.subjectDescription .buttons .button {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    color: var(--themeColorModeTextMed);
    background-color: var(--themeColorModeButtonBackground);
    margin-left: 0.5rem;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

.subjectDescription .buttons .button.main {
    font-size: 1.2rem;
    margin: 1rem 0.5rem;
}


A.tag {
    display: inline-block;
    color: var(--themeColorModeText);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin: 0 0.5rem 0.5rem 0;
    background: var(--themeColorModeButtonBackground);
    border: 1px solid var(--themeColorModeBorders);
    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: 1.1rem;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem 0.5rem 0.5rem;
}

.tableRow {
    display: flex;
    padding: 1rem;
    text-decoration: none;
    color: var(--themeColorModeTextMed);
    transition: all 400ms;
    margin-bottom: 0.5rem;
    border-radius: 1rem;
    background-color: var(--themeColorModeUiElementBackground);
    transition: all 1s;
    min-height: 3rem;
}

A.tableRow {
    color: inherit;
}

.tableRow.browser {
    min-height: 7rem;
}

.tableRow:hover {
    background-color: var(--themeMainLiteMax);
}

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

.tableRow .header {
    font-size: 1.3rem;
    color: inherit;
}

.tableRow .textSmaller {
    font-size: 0.9rem;
    color: #777;
    margin-top: 1rem;
}

.tableRow .details {
    padding: 0.25rem 0 0.85rem 0;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--themeColorModeBackgroundDarker);
}

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

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

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

.settingsBox {
    padding: 0;
    margin: 1rem 0 0 0;
    border-radius: 0.5rem;
    background-color: var(--themeColorModeBackground);
    display: flex;
}

.settingsBox .button {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin: 0;
    border: none;
    border-right: 1px solid var(--themeColorModeBorders);
}

.settingsBox .button.important {
    background-color: var(--themeMainLite);
    border-color: var(--themeMainMed);
}

.settingsBox .button.important:hover {
    background-color: var(--themeMainLiteMax);
}

.box {
    background-color: var(--themeColorModeUiElementBackground);
    padding: 1rem;
    margin: 0 0 3rem 0;
    border-radius: 1rem;
}

.box IMG
{
    width: 100%;
}

.box .buttons{
    margin-top: 2rem;
    padding-top:2rem;
    border-top:1px solid var(--themeColorModeBorders);
}

.box.wall {
    padding: 2rem 2rem 1rem 2rem;
}

.box.wall .entryDetails {
    font-size: 0.8rem;
    border-top: #EAEAEA;
    padding: 0.5rem 0 0 0;
    border-top: 1px solid #EAEAEA;
    margin-top: 1rem;
}

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

.box.shade-light {
    background-color: #EAEAEA;
}

.nAdsenseUI_Box {
    margin: 0 auto 3rem auto;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

.sidebarSkyscraper {
    width: 300px;
    height: 600px;
}

.mainModeButtons {
    display: flex;
    margin-top: 2rem;
}

.modeButtons {
    display: flex;
    flex-direction: column;
}

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


.mainModeButtons .separator {
    width: 2rem;
    margin-right: 2rem;
    border-right: 1px solid var(--themeColorModeBorders);
}

.mainModeButtons .button:hover {
    background-color: var(--themeMainLite);
    border-color: var(--themeMainMed);
}

.mainModeButtons .button .fa-regular {
    margin: 0 1rem 0 0;
}

.colRB {
    border-right: 1px dashed #EAEAEA;
}

.colPad4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.colPad8 {
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.carousel {
    display: flex;
    background-color: var(--themeMainLite);
    overflow: hidden;
}


.carousel .slide {
    width: 12rem;
    min-width: 12rem;
    max-width: 12rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 400ms ease-out;
    margin:2rem;
}

.carousel .slide:hover{
    width:15rem;
    max-width: 12rem;
}

.carousel .slide:hover .caption {
    background-color: var(--themeColorModeButtonBackground) !important;
    color: var(--themeMain) !important;
}

.carousel .slide:hover .caption .description {
    color: var(--themeColorText) !important;
}

.carousel .slide .coverImg {
    height: 15vw;
    background-size: cover;
    background-position: center;
    border-radius:0.5rem 0.5rem 0 0;
}

.carousel .slide .caption {
    background-color: var(--themeMain);
    color: #EEE;
    padding: 1rem;
    flex: auto;
    text-align: center;
    transition: all 400ms ease-out;
    border-radius:0 0 0.5rem 0.5rem;
}

.carousel .slide .caption LABEL {
    display: block;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--themeMainMed);
    font-weight: bold;
    font-size: 0.9rem;
}

.carousel .slide:nth-child(odd) .caption LABEL {
    border-bottom: 1px solid var(--themeMainMed);
}

.carousel .slide .caption .description {
    font-size: 0.8rem;
    color: #CACACA;
}



INPUT[type=text], INPUT[type=email], INPUT[type=number], INPUT[type=password], TEXTAREA {
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    padding: 0.5rem 0.5rem;
    width: 100%;
    border: 1px solid var(--themeColorModeBorders);
    background-color: var(--themeColorModeUiElementBackground);
    color: var(--themeColorModeText);
    border-radius: 0.25rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
}


.modeButtons A.button {
    border: 1px solid var(--themeColorModeBorders);
    padding: 0.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(----themeColorModeTextMed);
}

.pageNavButtons {
    margin: 2rem 0;
    /*background-color: var(--themeColorModeUiElementBackground);
    border: 1px solid var(--themeColorModeBorders); */
    border-radius: 1rem;
    /*padding: 2rem 1rem;*/
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    text-align:center;
}

.pageNavButtons .button {
    padding: 1rem;
    font-weight: bold;
    font-size: 1.2rem;
}

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

.tabContainer {
    margin: 3rem 0;
    border-bottom: 1px solid var(--themeColorModeBorders);
}

.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.5rem 0.5rem 0 0;

}

.preloadBlockTransition * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

.browserSearchPanel {

}

.browserSearchPanel .searchBox {
    padding: 0;
    margin: 0;
}

.resultTab {

}


.browserSearchPanel .searchBox INPUT[type=text] {
    margin: 0;
}

.topicRow {
    display: block;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    color: var(--themeColorModeText);
    border-bottom: 1px solid var(--themeColorModeBorders);
    transition: all 600ms ease-out;
}

A.topicRow {
    color: inherit;
}

.topicRow.active {
    font-weight: bold;
    padding: 1rem 0.5rem;
    background-color: var(--themeMain);
    color: #FFF !important;
}

.structureTreeChildren {
    position: relative;
    background-color: #FFF;
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    overflow: hidden;
    opacity: 0;
    height: 1px;
    transition: all 400ms;
    width: 100%;
}

.structureTreeChildren.open {
    background-color: #F2F2F2;
    margin: 0;
    opacity: 1;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.nAdsenseTopBox {
    margin: 32px auto 32px auto;
    display: block;
    text-align: center;
}

.nAdsenseInterQuestion {
    margin: 32px auto 32px auto;
    text-align: center;
    min-height: 100px;
    width: 100%;
}

.nAdsenseInterRow {
    margin: 16px auto;
    text-align: center;
}

.portalInfo UL, .portalInfo OL {
    margin: 2rem 0;
}

.portalInfo UL LI, .portalInfo OL LI {
    margin-bottom: 1rem;
}

.mpPopup .body{
    font-size: 1.2rem;
}

.mpTopBanner {
    display: block;
    position: relative;
    width: 100%;
    min-height: 100px;
    background-color: var(--themeMain);
    background-image: url("/lib/images/covers/misc/memoplus.jpg");
    background-size: cover;
    background-blend-mode: soft-light;
    border-radius: 1rem;
    margin: 0 0 4rem 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #FFF;
}

.mpTopBanner .logo {
    position: absolute;
    top: 2rem;
    right: 1.5rem;
}

.mpTopBanner .bullet,
.mpPopup .bullet{
    display: inline-block;
    background-color: #00000022;
    border: 1px solid #00000022;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    margin: 0 0.5rem 0.5rem 0;
    border-radius: 0.25rem;
}

.mpTopBanner .button.activate,
.mpPopup .button.activate
{
    position: absolute;
    bottom: 1rem;
    right: 2rem;
    background-color: #FFFFFFCC;
    border-color: var(--themeMain);
    color: #000000;
    padding: 1rem 2rem;
    font-weight: bold;
    text-transform: uppercase;
}

.mpTopBanner .button.activate:hover {
    background-color: #FFFFFF88;
}

.mpTopBanner .content {
    border-radius: 1rem 0 0 1rem;
    text-align: center;
    padding: 1rem 1rem;
    color: #FFFFFF;
    width: 60%;
    background-color: var(--themeMain);

    box-sizing: border-box;
}

.mpTopBanner .content HEADER {
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: #FFFFFF33;
    padding: 1rem 0;
    margin: 0;
}

.disableSelect {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


@media screen and (max-width: 1600px) {
    H1.pageTitle{
        font-size:3rem;
        line-height:3.3rem;
    }

    .mainModeButtons .button{
        padding:0.5rem 1rem !important;
    }
}

@media screen and (max-width: 640px) {

    .responsive-hide {
        display: none !important;
    }

    .responsive-show {
        display: block !important;
    }

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

    BODY FOOTER .footerBox {
        flex-direction: column;
    }

    BODY FOOTER.pageFooter{
        border-top-width: 1px;
        padding: 2rem 2rem 4rem 2rem;
    }

    BODY FOOTER.pageFooter .footerBox .column1 {
        padding: 0;
        margin:0;
        text-align: center;
    }

    BODY FOOTER.pageFooter .footerBox .column2 {
        margin-bottom: 2rem;
        margin-top: 4rem;
        text-align: center;
    }

    .flex2 {
        margin-right: 0;
    }

    .colPad4 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .pageTitleBar {
        padding: 0;
    }

    .pageTitleBar .statusBar .field {
        border-right: none;
        padding-right: 0;
        margin-right: 1rem;
    }

    .pageHeader {
        background-size: 900px;
        background-position: 50% 50%;
        padding: 0;
        left:0;
    }

    .pageHeader .logo {
        width: 120px;
        margin: 0;
    }

    .pageHeader .headerToolbar {
        font-size: 0.8rem;
    }

    .pageHeader .headerToolbar .tButton .icon {
        margin:0;
    }

    .pageLogoContainer {
        flex: 1.5 1.5;
        max-width: 180px;
        min-width: 180px;
    }

    .pageHeaderMenu {
        position: absolute;
        left: 0.5rem;
        text-align: left;
        border-bottom: none;
        margin-right: 1rem;
        padding: 0;
        background-color: transparent;
    }

    .pageHeaderMenu .menuButtonsOpener {
        display: block;
        color: var(--themeColorTextInvert);
        font-size: 1.2rem;
        border-right: 1px solid var(--themeColorTextInvert);
        width: 1.8rem;
        text-align: center;
        border-radius: 0.25rem;
    }

    .button, INPUT[type=submit], SELECT{
        font-size:0.9rem;
    }

    .pageHeaderMenu .menuButtons {
        position: absolute;
        left: 0;
        width: 100%;
        flex-direction: column-reverse;
        display: none;
    }

    .pageHeaderMenu .menuButtons .submenu {
        position: relative;
        top: 0;
        right: 0;
        width: calc(100% + 2rem);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        box-sizing: border-box;
        border-right: none;
        margin: 1rem -1rem;
        text-align: left;
        border-radius: 0;
    }

    .pageHeaderMenu .menuButtons .submenu A {
        background-color: transparent;
        flex-direction: row-reverse;
        padding: 1rem;
    }

    .pageHeaderMenu .menuButtons.open {
        display: flex;
        width: 100vw;
        left: -0.5rem;
        top: 2.2rem;
        animation: fadeIn 1s forwards;
        background-color: var(--themeColorModeBackgroundDarker);
        flex-direction: column;
    }

    .pageHeaderMenu .menuButtons > .menuElement {
        padding: 1rem;
        border-bottom: 1px solid #EAEAEA33;
        font-weight: normal;
        width: 100%;
    }

    .pageHeaderUser {
        flex: 2 2;
        padding: 0;
        width: auto;
        min-width: auto;
    }

    .memoPlusButton{
        right:1rem;
        top:2.5rem;
        z-index:99;
        display: none;
    }

    .settingsBox{
        flex-wrap: wrap;
        justify-content: center;
    }

    .settingsBox .button{
        margin:0.25rem;
    }

    .pageHeaderUser .menuButtons > .menuElement {
        padding: 0 0.8rem;
    }

    .pageHeaderUser .menuButtons > .menuElement.portrait {
        background-color: transparent;
    }

    .pageContainer {
        padding: 3rem 0.5rem;
    }

    .subjectDescription {
        padding: 1rem;
        width: 100vw;
        z-index: 2;
        margin: -2rem auto 0 auto;
    }

    .subjectDescription.half{
        margin: -4rem auto 0 auto;
    }

    .subjectDescription .h3Container H3 {
        font-size: 0.8rem;
    }

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

    .subjectDescription .buttons {
        display: flex;
        flex-wrap: wrap;
    }

    .subjectDescription .mainDescription {
        font-size: 0.9rem;
        line-height:1.1rem;
        margin-top: 0;
    }

    .subjectDescription .buttons .button.main {
        display: block;
        text-align: center;
        margin: 1rem 0;
        padding: 1rem;
        width: 100%;
        box-sizing: border-box;
        order: -1;
    }

    .subjectDescription .buttons .button {
        flex: auto;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        margin: 0 0 0.5rem 0 !important;
    }

    .subjectDescription .buttons .separator {
        min-height: 1px;
        width: 100%;
        border-bottom: 1px solid var(--themeColorModeBorders);
        border-right: none;
        margin: 1rem 0;
    }

    H1.pageTitle {
        font-size: 1.6rem;
        line-height:1.8rem;
        letter-spacing: -0.5px;
        margin: 1rem 0;
    }

    .subjectCover {
        margin-right: 0;
        background-position: 50% 25%;
        height:35vh;
    }

    .resultTab {
        padding: 0;
    }

    .tableRow {
        padding: 0.5rem;
        border-radius: 0.25rem;
    }

    .tableRow .coverImg {
        max-width: 6rem;
        min-width: 6rem;
        height: 6rem;
        max-width: none;
    }

    .row .responsive-column .cell{
        margin: 0.15rem 0;
    }

    .responsive-column {
        flex-direction: column;
    }

    .responsive-column-reverse {
        flex-direction: column-reverse !important;
    }

    .uiWindow, .uiWindow.narrow {
        width: 96vw;
    }

    .uiWindow > .body{
        padding: 0.5rem;
        max-height:calc(90vh - 14rem);
    }


    .uiWindow .searchRow {
        font-size: 0.8rem;
    }

    .uiWindow .searchRowContainer{
        margin-top:5.7rem;
        max-height: calc(90vh - 19rem);
    }

    .uiWindow.fullscreen .body {
        padding: 0.5rem;
    }

    .testBox .buttons .learnIndicator .message {
        font-size: 0.8rem;
    }

    .carousel .slide {
        width: 80vw;
        min-width: 80vw;
        max-width: 80vw;
    }

    .carousel .slide .coverImg {
        height: 40vh;
    }

    .carousel .slide .description {
        display: none;
    }

    .tabContainer .tab {
        font-size: 0.7rem;
        margin-right: 1px;
        padding: 0.5rem;
    }

    .uiMessageTrack {
        right: 0.5rem;
        bottom: 0.5rem;
        max-width: calc(100% - 1rem);
        min-width: calc(100% - 1rem);
    }

    .nAdsenseInterRow {
        margin: 16px auto 3rem auto;
        text-align: center;
    }
    

    .sidebarSkyscraper {
        width: auto;
        height: auto;
    }

    .mainModeButtons {
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
        margin-top: 0;
    }

    .mpTopBanner {
        padding-bottom: 6rem;
    }

    .mpTopBanner .content {
        width: 100%;
        border-radius: 1rem 1rem 0 0;
    }

    .mpTopBanner .logo {
        display: none;
    }

    .mpTopBanner .bullet {
        font-size: 0.75rem;
    }

    .mpTopBanner .content HEADER {
        font-size: 1.3rem;
    }

    .mpTopBanner .button.activate {
        bottom: 1rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .pageNavButtons{
        margin:-2rem 0 4rem 0;
    }

}

@keyframes lookAtMe {
    3% { transform: scale(1.1); }
    4%, 6% { transform: rotate(-2deg) scale(1.1); }
    5% { transform: rotate(2deg) scale(1.1); }
    7% { transform: rotate(0deg) scale(1.1); }
    10% { transform: scale(1); }
}

@keyframes buttonPulseEffect {
    0% {
        border-color: var(--themeColorModeBorders);
    }
    50% {
        border-color: var(--themeMainMed);
    }
    100% {
        border-color: var(--themeColorModeBorders);
    }
}

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

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

/* ----------------------------------------------
 * Generated by Animista on 2024-5-11 23:48:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-bottom {
    0% {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: translateY(65px);
        transform: translateY(65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: translateY(28px);
        transform: translateY(28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-bottom {
    0% {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: translateY(65px);
        transform: translateY(65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: translateY(28px);
        transform: translateY(28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}