@font-face {
    font-display: swap;
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/quicksand-v37-latin_latin-ext/quicksand-v37-latin_latin-ext-regular.woff2') format('woff2'),
    url('/fonts/quicksand-v37-latin_latin-ext/quicksand-v37-latin_latin-ext-regular.ttf') format('truetype');
}

@font-face {
    font-display: swap;
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/quicksand-v37-latin_latin-ext/quicksand-v37-latin_latin-ext-700.woff2') format('woff2'),
    url('/fonts/quicksand-v37-latin_latin-ext/quicksand-v37-latin_latin-ext-700.ttf') format('truetype');
}

/* Utils */

* { box-sizing: border-box; }

:root {
    --uiBodyTopPadding: 64px;
    --uiDesktopHorizontalPadding: 7.5vw;
    --uiMobileHorizontalPadding: 0.5rem;
    --uiMobileVerticalPadding: 1rem;
    --uiElementsFontSizeXL: 1.1rem;
    --uiElementsFontSizeL: 1rem;
    --uiElementsFontSize: 0.9rem;
    --uiElementsFontSizeS: 0.8rem;
    --uiElementsFontSizeXS: 0.7rem;
    --default-grid-gap: 2rem;
    --uiElementsPadding: 0.5rem 1rem;
    --uiElementBorderRadius: 0.5rem;
    --uiPageMaxWidth: 1160px;

    --themePageHeaderBackground: #FFFFFF;

    --themeColorText: #323232;
    --themeColorTextLite1: #404040;
    --themeColorTextLite2: #535353;
    --themeColorTextLite3: #707070;
    --themeColorTextLite4: #ACACAC;
    --themeColorTextLite5: #DADADA;
    --themeColorTextInvert: #FFFFFF;
    --themeColorModeBackground: #F2F2F2;
    --themeColorTextInputFocus: #FFFFFF;
    --themeColorModeBackgroundDarkify: #00000020;
    --themeColorModeBackgroundDarker: #454545;
    --themeColorModeButtonBackground: #EAEAEA;
    --themeColorModeButtonBackgroundHover: #D8D8D8;
    --themeColorModeButtonBorder: #AAA;
    --themeColorModeBorders: #DDD;
    --themeColorModeBordersLite: #EAEAEA;
    --themeColorModeText: #000000;
    --themeColorModeTextMed: #424242;
    --themeColorModeUiElementBackground: #F8F8F8;
    --themeColorModeUiElementBackgroundTransparent: #F8F8F8CC;
    --themeColorModeUiQuizElementBackground: #FFFFFF;
    --themeColorModeUiQuizElementBackgroundHover: #F0F0F0;
}

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

:root.darkTheme{
    --themePageHeaderBackground: #111111;

    --themeColorText: #FFFFFF;
    --themeColorTextLite1: #DADADA;
    --themeColorTextLite2: #ACACAC;
    --themeColorTextLite3: #909090;
    --themeColorTextLite4: #707070;
    --themeColorTextLite5: #404040;
    --themeColorTextInvert: #323232;
    --themeColorModeBackground: #323232;
    --themeColorTextInputFocus: #252525;
    --themeColorModeBackgroundDarkify: #00000020;
    --themeColorModeBackgroundDarker: #858585;
    --themeColorModeButtonBackground: #252525;
    --themeColorModeButtonBackgroundHover: #444;
    --themeColorModeButtonBorder: #666;
    --themeColorModeBorders: #555;
    --themeColorModeBordersLite: #666;
    --themeColorModeText: #DDD;
    --themeColorModeTextMed: #CCC;
    --themeColorModeUiElementBackground: #424242;
    --themeColorModeUiElementBackgroundTransparent: #424242CC;
    --themeColorModeUiQuizElementBackground: #505050;
    --themeColorModeUiQuizElementBackgroundHover: #383838;
}

:root.darkTheme .themeSwitchLight,
:root.darkTheme .logo.themeDark{
    display: none !important;
}

:root.darkTheme .logo.themeLight{
    display: inline-block !important;
}

:root.darkTheme .themeSwitchDark{
    display: flex !important;
}

:root.darkTheme .pageHeader{
    background-blend-mode:luminosity;
}


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

[v-cloak] {
    display: none;
}

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

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

/* Flexbox layout */
.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;
}

/* Body */

BODY {
    font-family: 'Quicksand', sans-serif;
    padding: 0;
    margin: 0;
    background-color: var(--themeColorModeBackground);
    color: var(--themeColorModeText);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

/* PAGE FOOTER */

BODY FOOTER.pageFooter {
    padding: 4rem var(--uiDesktopHorizontalPadding);
    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);
}

.box HEADER{
    margin-bottom:2rem;
}

.box HEADER H4{
    font-size:var(--uiElementsFontSizeL);
    margin:0;
}

.box HEADER H4 .icon{
    color:var(--themeMain);
}

HEADER H1{
    margin:0 0 2rem 0;
}

HEADER H1 .icon{
    color:var(--themeMain);
    margin:0 1rem 0 0;
}

/*
.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);
    margin:0 0 0.5rem 0;
}

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

/* 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: 0;
    z-index: 99;
    box-sizing: border-box;
    pointer-events: none;
    visibility: hidden;
    transition: all 400ms;
    color: #000000;
    -webkit-user-select: none;
    user-select: none;
}

#uiCurtain.show {

    visibility: visible;
    pointer-events: auto;
    height: 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;
}

TABLE{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
}

THEAD TH {
    border-right: 1px solid var(--themeMain);
    border-bottom: 2px solid var(--themeMain);
    padding: 0.5rem;
    text-align: left;
    background-color: var(--themeMainMed);
}

THEAD TH:first-child{
    border-radius:0.5rem 0 0 0;
}

THEAD TH:last-child{
    border-radius:0 0.5rem 0 0;
}

TBODY TD.centered{
    text-align:center;
}

TBODY TD.strictWidth{
    width: 1%;
    white-space: nowrap;
}

TBODY TD{
    border-right:1px solid var(--themeColorModeBordersLite);
    border-bottom:1px solid var(--themeColorModeBordersLite);
    padding:0.25rem 0.5rem;
}

TBODY TD .detail{
    margin:0 0 0.5rem 0;
    font-size:var(--uiElementsFontSizeS);
}

TBODY TD .detail:last-of-type{
    margin:0;
}

TBODY TD:first-child{
    border-left:1px solid var(--themeColorModeBordersLite);
}

TBODY TD:last-child,
THEAD TH:last-child {
    border-right: none;
}

/* UI: Window */

.uiWindow {
    display: none;
    position: fixed;
    top: 50vh;
    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: 100%;
    max-height: 100%;
    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 .windowHeader{
    background-color: var(--themeMainMed);
}

.uiWindow .header{
    font-size:2.2rem;
    text-align: center;
}
.uiWindow .subHeader{
    font-size:1.2rem;
    text-align: center;
}

.uiWindow .headerExplanation{
    font-size:1rem;
    font-style: italic;
    padding:1rem;
    text-align: center;
    border-bottom:1px solid var(--themeColorModeBorders);
}

.uiWindow .windowHeader IMG{
    display: block;
    width: 100%;
    object-fit: contain;
    height:8rem;
}

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

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

.pageHeader {
    padding: 0.5rem 0;
    text-align: right;
    /*background-image: url("/css/images/pageHeaderBg.jpg");
    background-size: cover;
    background-blend-mode: hard-light;*/

    background-color: var(--themePageHeaderBackground);
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
    border-bottom:6px solid var(--themeMainLite);
    border-image: linear-gradient(to right, var(--themeMain) 0%, var(--themeMainLiteMax) 100%) 1;
}

.pageHeader .pageHeaderContainer{
    max-width:var(--uiPageMaxWidth);
    margin:0 auto;
    display: flex;
    align-items: center;
}

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

.pageHeader .menuButtonsOpener {
    display: none;
}

.pageHeaderUser {
    min-width: 12rem;
}

.pageHeaderMenu .menuButtons {
    flex: 3 3;
    padding: 0;
    display: flex;
    flex-direction: row;
    position: relative;
    gap:1rem;
}

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

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

.pageHeader .menuElement.important:hover{
    background-color: var(--themeMainMed);
}

.pageHeader .menuElement {
    padding: 0.5rem 1rem;
    color: var(--themeMain);
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 400ms;
}

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

.pageHeader .menuElement .icon {
    order: 1;
    margin: 0 0.5rem 0 0;
    width: 1rem;
    height: 1rem;
}

.pageHeader .menuElement SPAN {
    order: 2;
}

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

/* User Panel */
.pageHeaderAvatar {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    box-sizing: border-box;
    border: 1px solid var(--themeColorModeBordersLite);
}

.userPanel {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-color: var(--themeMainLite);
    border-radius: 0.25rem;
    transition: all 400ms;
    z-index: 10;
    align-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

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

.userPanel .userMenu{
    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;
    box-shadow: 0 5px 5px 0 #42424288;
}

.userPanel .userMenu .menuElement{
    font-weight: normal;
    padding: 1rem 1rem 1rem 6rem;
    color: var(--themeColorModeText);
    border-bottom: 1px solid var(--themeColorModeBorders);
    background-color: var(--themeColorModeButtonBackground);
    display: flex;
    cursor:pointer;
}

.userPanel .userMenu .menuElement:hover{
    background-color: var(--themeColorModeButtonBackgroundHover);
}

.userPanel .userMenu .menuElement SPAN{
    flex: auto;
    white-space: nowrap;
}

.userPanel .userMenu .menuElement .icon{
    width: 2rem;
    text-align: right;
    font-size: 1rem;
    margin-left: 1rem;
    opacity: 0.5;
    color:var(--themeMain);
}

/*

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



.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 .userPanel:hover .submenu {
    display: block;
    animation: fadeIn 400ms ease-out forwards;
}


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


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

.pageHeader.floating .headerToolbar {
    bottom: 0;
    height: 0;
    display: none;
}

.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.defloating {
    transform: translateY(-100%);
}

.pageLogoContainer {
    width:9rem;
    height: auto;
    line-height: 0;
    margin-right:2rem;
}

.pageHeader .logo {
    width:100%;
    height: auto;
    display: block;
    /* Odblokowanie widoczności ścieżek poza granicami obszaru roboczego */
    overflow: visible;
}

.pageHeader .logo .logoPath{
    fill:var(--themeMain);
}



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


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

.pageTitle{
    padding: 0;
    max-width:var(--uiPageMaxWidth);
}

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

.pageTitle H3{
    margin:0;
    font-size:1rem;
    color:var(--themeMain);
}



.pageContainer {
    margin:6rem auto 0 auto;
    max-width:var(--uiPageMaxWidth);
}

.pageContainer.browser{
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    gap:2rem;
}

.pageContainer.appSideAd .sideBar {
    display: none;
}

/*
.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: 50vh;
    padding: 0;
    box-sizing: border-box;
    background-size: cover;
    background-position: 50% 50%;
}

.subjectCover IMG{
    width: 100%;
}

.subjectCover.half {
    height: 32.5vh;
}


.subjectDescription {
    position:absolute;
    left:50%;bottom:0;
    transform:translateX(-50%);
    min-width:var(--uiPageMaxWidth);
    font-size: 1.2rem;
    /*margin: -30vh auto 0 auto;*/
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2rem 1rem;
    text-align: center;
    background-color: var(--themeColorModeUiElementBackgroundTransparent);
    box-sizing: border-box;
    border-radius: 1rem 1rem 0 0;
    max-width:var(--uiPageMaxWidth);
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, var(--themeMainMed) 0%, var(--themeMainLite) 100%) 1;
}

.subjectDescription .subjectH3{
    font-size:var(--uiElementsFontSizeXS);
    color:var(--themeMain);
    text-transform:uppercase;
    margin-bottom:0.5rem;
}

.subjectH3 H3{
    margin:0;
    border:1px solid var(--themeMain);
    border-radius:var(--uiElementBorderRadius);
    display:inline-block;
    padding:0.25rem 1rem;
}

.subjectDescription .subjectTitle{
    margin:1rem 0 0 0;
    letter-spacing:-3%;
}

/*
.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 {
    font-size:var(--uiElementsFontSizeL);
    margin: 0.5rem 0 0 0;
}

.subjectDescription .details {
    font-size:var(--uiElementsFontSizeS);
    margin-top: 0.5rem;
    padding:0.5rem;

}

.subjectDescription .details SPAN {
    margin:0 0.5rem;
}

.subjectDescription .buttons {
    text-align: right;
    padding: 0;
    margin-top: 3rem;
}

.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;
    border:1px solid #00000044;
    font-weight: bold;
    background-color: var(--themeMain) !important;
}

.subjectDescription .buttons .button.main:hover{
    background-color: var(--themeMainMed) !important;
}

.subjectDescription .buttons .button.main .icon{
    color:#FFFFFFAA;
}


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(--themeColorModeBackground);
}

A.tag.popular {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem 0.5rem 0.5rem;
}

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

A.resultBox {
    color: inherit;
}

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

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

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

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

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

.resultBox .header {
    font-size: var(--uiElementsFontSizeXL);
    color: inherit;
}

.resultBox .textSmaller {
    font-size: 0.9rem;
    color: #777;
}

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

.resultBox .coverContainer{
    margin:0 1rem 0 0;
}

.resultBox .noResult{
    font-size:var(--uiElementsFontSizeXS);
    text-align:center;
    padding: .25rem .5rem;
    border: 1px solid var(--themeColorModeTextMed);
    border-radius: 0.25rem;
    color:var(--themeColorModeTextMed);
    white-space: nowrap;
    margin:0.5rem 0 0 0;
}

.resultBox .progressGaugeContainer{
    position:relative;
    border-radius: 0.25rem;
    background-color:var(--themeMainLiteMax);
    margin:0.5rem 0 0 0;
}

.resultBox .progressGaugeContainer .gauge{
    height:6px;
    background-color:var(--themeMain);
    border-radius: 3px;
}

.resultBox .progressGaugeContainer .percentageScore{
    font-size:var(--uiElementsFontSizeXS);
    color:var(--themeColorModeTextMed);
    position:absolute;
    bottom:-0.85rem;left:50%;
    transform: translateX(-50%);
}

.resultBox .coverImg {
    width: 6rem;
    min-width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.25rem;
    display:block;
}

.resultBox .coverImgSmall {
    width: 4rem;
    min-width: 4rem;
    height: 3rem;
    object-fit: cover;
    margin:0 1rem 0 0;
    border-radius: 0.25rem;
    display:block;
}
/*
.resultBox .coverImg IMG {
    width: 10rem;
    height: 100%;

    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 H3{
    color:var(--themeMain) !important;
    margin: .25rem 0 1.5rem;
    color: var(--uiElementsFontSizeL);
    font-size: var(--ui);
}

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

.box .row .cell{
    flex:1 1;
    align-content:center;
}

.box .row .cell.label {
    flex: 0.5 0.5;
    font-weight: bold;
    margin-right: 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;
}

/* 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(--themeColorText);
    background-color: var(--themeColorModeUiElementBackground);
    border-radius: 0.25rem;
    width:1.2rem;
    height:1.2rem;
    box-sizing: border-box;
    padding: 0.1rem 0 0 0;
}

/* UI:ComboBox */

.uiComboBox{
    font-size:var(--uiElementsFontSize);
    padding: var(--uiElementsPadding);
    border: 1px solid var(--themeColorModeBorders);
    background-color: var(--themeColorModeUiElementBackground);
    color: var(--themeColorText);
    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(--themeColorModeUiElementBackground);
    border: 1px solid var(--themeColorModeBorders);
    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;
}



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: 3rem 0 6rem 0;
    /* Safe for older */
    padding-bottom:3rem;
    /* Retarded Safari 11.0 - 11.2 */
    padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
    /* Civilized Browsers */
    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.important {
    background-color: var(--themeMain);
    color: #FFF;
}

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

.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 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px auto;
    min-height: 280px;
    width: 100%;
    background-color: var(--themeColorModeUiElementBackground);
}

.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 (min-width: 1600px) {
    H1.subject{
        font-size:3rem;
        line-height:3.3rem;
    }

    .subjectDescription .buttons .button.main{
        font-size:1.5rem;
        padding:1.5rem;
    }

    .subjectDescription .buttons .button{
        font-size:1rem;
    }

}


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


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

    .pageHeader{
        padding: 0 2vw;
    }

    .memoPlusButton{
        right:14.6vw;
    }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {

    .appSideAdBody .pageHeader{
        padding-left: var(--uiDesktopHorizontalPadding);
        padding-right: var(--uiDesktopHorizontalPadding);
    }

    .appSideAdBody .subjectDescription{
        width:80vw;
    }

    .nAdsenseInterQuestion{
        display: none;
    }

    .pageContainer.appSideAd {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 2rem;
    }

    .pageContainer.appSideAd .sideBar {
        position: relative;
        display: block;
    }

    .pageContainer.appSideAd .sideBar .ad {
        position: sticky;
        top: 5rem;
        width: 300px;
        height: 600px;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --uiPageMaxWidth: 100vw;
    }

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

    .pageTitle{
        margin:6rem auto 0 auto;
    }

    .pageTitle H1{
        font-size: 1.5rem;
        line-height: 1.5rem;
        margin: 0 0.5rem 0.5rem 0.5rem;
    }

    .pageTitle H3{
        margin: 0 0.5rem;
        font-size:0.9rem;
        color:var(--themeMain);
    }


    /*
    .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 1rem;
    }

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

    .pageHeader .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 {
        position:static;
        padding: 1rem;
        transform:none;
    }
    /*
    .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.subjectTitle {
        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;
    }

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

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

    .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: 90vw;
    }

    .uiWindow > .body{
        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%);
        padding: 1rem;
        text-align: center;
    }

    .box{
        margin:0 0 1rem 0;
    }
}

@media screen and (device-width: 414px){

    .pageHeader {
        will-change: auto !important;
        transform: none !important;
        transition: none !important;
        position: absolute !important;
    }

    /*
    html, body {
        -webkit-overflow-scrolling: auto !important;
        touch-action: manipulation !important;
        -webkit-user-select: none !important;
    }

     */
}

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

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