:root {
    /*Achtung: Farben werden ggf. von Theme.css überschrieben! */
    --marginTopbar: 45px;
    --primary: var(--mds-green);
    --primaryText: #fff;
    --secondary: var(--mds-gray);
    --secondaryText: #fff;
    --tertiary: var(--mds-light-gray);
    --tertiaryText: #000;
    --complimentary: var(--mds-orange);
    /*--currentBackgroundColor: var(--mds-gray);
    --currentTextcolor: var(--primaryText);*/
    --borderColor: var(--medium);
    --special: var(--mds-blue);
    --specialText: #fff;
    --bright: #fff;
    --mediumBright: var(--mds-light-gray);
    --medium: var(--mds-gray);
    --mediumDark: #333;
    --dark: #222222;
    /*var(--mds-gray);*/
    --veryDark: black;
    --brightTransparent: var(--mds-bright-transparent);
    --mediumBrightTransparent: var(--mds-light-gray-transparent);
    --mediumTransparent: var(--mds-dark-transparent);
    --mediumDarkTransparent: var(--mds-dark-transparent);
    --darkTransparent: var(--mds-dark-transparent);
    --brightInput: white;
    /*Achtung: Farben werden ggf. von Theme.css überschrieben! */
    /* ab hier ergänzende Variablen :*/
    --warningBG: var(--w3PaleRed);
    --warningText: #fff;
    --warning: var(--w3Red);
    --warningYellow: var(--w3PaleYellow);
    --success: var(--w3Green);
    --successBG: var(--w3PaleGreen);
    --round: var(--w3Round);
    --rounder: calc(2 * var(--round));
    --roundest: 20em;
    --paddingX: var(--w3PaddingX);
    /*0.8rem;*/
    --paddingXSmall: var(--w3PaddingSmallX);
    /*0.4rem;*/
    --paddingY: var(--w3PaddingY);
    /* 0.4rem;*/
    --paddingYSmall: var(--w3PaddingSmallY);
    /*0.2rem;*/
    --padding: var(--paddingY) var(--paddingX);
    --paddingSmall: var(--paddingYSmall) var(--paddingXSmall);
    --transparent: rgb(0, 0, 0, 0);
    --fontawesome: "Font Awesome 5 Free";
    --boxShadowSmallLight: 1px 3px 3px 0px var(--darkTransparent);
    --boxShadowSmallMedium: 2px 3px 6px 0px var(--darkTransparent);
    --boxShadowSection: 0px 2px 3px var(--darkTransparent);
    --boxShadowMediumLight: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.10);
    --boxShadowMediumMedium: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --boxShadowLargeMedium: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
    --boxShadowMediumDark: 0 2px 5px 0 rgba(0, 0, 0, 0.4), 0 2px 10px 0 rgba(0, 0, 0, 0.25);
    --boxShadowLargeDark: 0 4px 10px 0 rgba(0, 0, 0, 0.4), 0 4px 20px 0 rgba(0, 0, 0, 0.25);
    --font: 'Trebuchet MS', Arial, sans-serif;
    --transitionDurationShort: 0s;
    --transitionDurationLong: 0.15s;
    --userSubstitutionColor: var(--primary);
    --userSubstitutionColorContrasting: var(--primaryText);
}

@media screen and (max-width: 800px) {
    :root {
        --paddingX: var(--paddingXSmall);
        /*0.8rem;*/
        --paddingY: var(--paddingYSmall);
        /* 0.4rem;*/
    }

    html {
        font-size: 14px;
    }
}

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

    html {
        font-size: 12px;
        font-stretch: 90%;
        letter-spacing: -0.2px;
    }
}

#sidebarLogoBottom {
    background-image: none !important;
    display: none !important;

    /* background-image: url('img/evis_logo_2023_small.png');
    margin-left:var(--paddingXSmall);
    margin-bottom:var(--paddingYSmall);
    min-height: 2em;
    max-height: 5em;
    
    background-size: contain;
    background-repeat: no-repeat;*/
}

html,
body {
    color: var(--dark);
    --currentTextcolor: currentColor;
    scroll-behavior: smooth;
    font-family: var(--font);
    user-select: none;
    /* weil die ständige Markierei und der Textcursor nerven; besser gezielt wo aktivieren */
}

html {
    /*line-height:1.3;*/
    /* bissl kompakter als w3 es vorgibt. aber falls wer pixelgenau geschweindelt hat gibts dadurch probleme */
    /*    height: 100%;
    width: 100%;
*/
    border: 0;
    margin: 0;
    padding: 0;
    background-image: url("img/bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    /*color: var(--dark);*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
    font-weight: 700;
    --textShadow: 0.7px 0.8px var(--tertiary);
    text-shadow: var(--textShadow);
    text-wrap: balance;
}

*:is(h1, h2, h3, h4, h5, h6)+p {
    margin-top: 0;
    line-height: 1.3;
}

.darkTheme .hideIfDark {
    display: none;
}

body:not(.darkTheme) .showIfDark {}

.darkTheme .hideIfBright {}

body:not(.darkTheme) .hideIfBright {
    display: none;
}

body.subsitutionActive .hideIfSubstitutionActive {
    display: none;
}

.repeatingStripesBG {
    --stripe1Color: var(--mediumTransparent);
    --stripe2Color: var(--brightTransparent);
    --stripe1Width: 10px;
    --stripe2Width: var(--stripe1Width, 6px);
    --smooth1to2: 1px;
    --smooth2to1: 1px;
    --angle: -35deg;
    background-image: repeating-linear-gradient(var(--angle), var(--stripe1Color) 0px, var(--stripe1Color) var(--stripe1Width), var(--stripe2Color) calc(var(--stripe1Width) + var(--smooth1to2)), var(--stripe2Color) calc(var(--stripe1Width) + var(--stripe2Width)), var(--stripe1Color) calc(var(--stripe1Width) + var(--stripe2Width) + var(--smooth2to1)));
}

html:has(body.subsitutionActive)::after {
    --stripe1Color: rgba(255, 255, 255, 0.05);
    --stripe2Color: rgba(0, 0, 0, 0.05);
    --stripe1Width: 2rem;
    --stripe2Width: 2rem;
    --smooth1to2: 0.4rem;
    --smooth2to1: 0.4rem;
    --angle: -35deg;
    background-image: repeating-linear-gradient(var(--angle), var(--stripe1Color) 0px, var(--stripe1Color) var(--stripe1Width), var(--stripe2Color) calc(var(--stripe1Width) + var(--smooth1to2)), var(--stripe2Color) calc(var(--stripe1Width) + var(--stripe2Width)), var(--stripe1Color) calc(var(--stripe1Width) + var(--stripe2Width) + var(--smooth2to1)));
    content: '';
    position: fixed;
    inset: 0;
    top: var(--marginTopbar);
    /*left:var(--sidebarWidth);*/
    height: calc(100vh - var(--marginTopbar));
    width: 100vw;
    z-index: -1;
    outline: 4px solid var(--userSubstitutionColor);
    outline-offset: -4px;
    pointer-events: none;
}

.showIfSubstitutionActive {}

body:not(.subsitutionActive) .showIfSubstitutionActive {
    display: none;
}

.hidden {
    visibility: hidden !important;
}

td.transparent {
    visibility: hidden;
}

button {
    border-style: solid;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"]{
    accent-color:var(--primary);
}


.april1st *:is(h1, h2, h3, h4, h5, h6) {
    --textShadow: 0.7px 0.8px var(--primary);
}

.april1st *:is(h1, h2, h3, h4, h5, h6, button),
.april1st #dynamicSidebar {
    font-family: 'Comic Sans MS', var(--font);
}

.stateMonitorRoot {
    position: fixed;
    inset: 0;
    z-index: 999;
    backdrop-filter: blur(2px), grayscale();
    background-color: var(--darkTransparent);
    padding: 2em;
}

.stateMonitorRoot pre {
    display: inline-block;
    background-color: var(--mediumTransparent);
    min-width: 25vw;
    max-width: 80vw;
}

.stateMonitorRoot>#overlayContainer {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: auto;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    justify-content: center;
    /* kommt von repeatingStripesBG:*/
    --stripe1Color: var(--mediumTransparent);
    --stripe2Color: var(--transparent);
    --stripe1Width: 1em;
    --stripe2Width: 1em;
    --smooth1to2: 1px;
    --smooth2to1: 1px;
    --angle: -35deg;
}



.darkTheme .stateMonitorRoot>#overlayContainer {
    outline: 1px solid var(--medium);
    display: flex;
}

.stateMonitorRoot *:is(#offlineIndicatorContainer, #requestDurationContainer) {
    text-align: center;
}

.stateMonitorRoot #offlineIndicatorContainer .fas {
    color: var(--secondary);
    position: relative;
}

.stateMonitorRoot #offlineIndicatorContainer .fas>.fas {
    color: var(--secondaryText);
    inset: 0;
    position: absolute;
    font-size: 0.8em;
}

#mainContent:has(.webcalenderRoot) #mainFooter {
    display: none;
}

#mainContent.hideFooter #mainFooter {
    display: none;
}

#mainFooter {
    color: var(--secondary);
    font-size: 0.8em;
    margin-top: 6rem;
    margin-bottom: 1rem;
}

#mainFooter img.logo {
    max-width: 250px;
}

#globalSpinnerContainer {
    display: flex;
    visibility: hidden;
    padding: var(--paddingSmall);
    color: var(--accentThemeD2);
    --fa-animation-duration: calc(6 * var(--transitionDurationLong));
}

#globalSpinnerContainer.show {
    visibility: visible;
}

body.backgroundActivity #globalSpinnerContainer,
body.globalSpinner #globalSpinnerContainer {
    display: flex !important;
}

body.backgroundActivity #globalSpinnerContainer>i,
body.globalSpinner #globalSpinnerContainer>i {
    animation: fa-spin 1s infinite linear;
    font-size: 1.1rem;
}

/* GANZ WICHTIG: zentrale Akzentfarben, Sekundär und Tertiär!*/
/* Reihenfolge beachten: untere sind "wichtiger" wenn gleichzeitig in Benutzung*/
.tertiaryBG {
    background-color: var(--tertiary);
    color: var(--tertiaryText);
    --currentBackgroundColor: var(--tertiary);
    --currentTextcolor: var(--tertiaryText);
}

.tertiaryTXT {
    color: var(--tertiary) !important;
}

.secondaryBG {
    background-color: var(--secondary);
    color: var(--secondaryText);
    --currentBackgroundColor: var(--secondary);
    --currentTextcolor: var(--secondaryText);
}

.secondaryOutline {
    outline: 2px solid var(--secondary);
    outline-color: var(--secondary) !important;
    /* nochmal separat, falls andere Stelle schon eine Outline setzt*/
}

.secondaryTXT {
    color: var(--secondary) !important;
}

.accentBG,
.primaryBG {
    background-color: var(--primary);
    color: var(--primaryText);
    --currentBackgroundColor: var(--primary);
    --currentTextcolor: var(--primaryText);
}

.accentTransparentBG,
.primaryTransparentBG {
    background-color: var(--accentThemeTransparent);
}

.accentOutline,
.primaryOutline {
    outline: 2px solid var(--primary);
    outline-color: var(--primary) !important;
    /* nochmal separat, falls andere Stelle schon eine Outline setzt*/
}

.accentTXT,
.primaryTXT {
    color: var(--primary) !important;
}

.complimentaryBG {
    background-color: var(--complimentary);
    color: var(--complimentaryText);
    --currentBackgroundColor: var(--complimentary);
    --currentTextcolor: var(--complimentaryText);
}

.complimentaryTransparentBG {
    background-color: var(--complimentaryThemeTransparent);
}

.complimentaryTXT {
    --currentTextcolor: var(--complimentary);
    color: var(--complimentary) !important;
}

.complimentaryOutline {
    outline: 2px solid var(--complimentary);
    outline-color: var(--complimentary) !important;
    /* nochmal separat, falls andere Stelle schon eine Outline setzt*/
}

.brightTransparentBG {
    background-color: var(--brightTransparent);
    /*backdrop-filter:blur(2px);*/
    /* das führt manchmal dazu dass absolut positionierte Container, die drüberlappen, geblurred werden */
}

.brightOpaqueBG {
    background-color: var(--veryBright);
    color: var(--veryDark);
}

.mediumDarkBG {
    background-color: var(--mediumDark);
    color: var(--bright);
}

.mediumDarkTXT {
    color: var(--mediumDark) !important;
}

.mediumTXT {
    color: var(--medium) !important;
}

.mediumBG {
    background-color: var(--medium);
}

.mediumBrightBG {
    background-color: var(--mediumBright);
}

.mediumBrightTXT {
    color: var(--secondaryThemeL4);
}

.mediumBrightTransparentBG {
    background-color: var(--mediumBrightTransparent);
}

.mediumBrightTransparentTXT {
    color: var(--mediumBrightTransparent);
}

.mediumTransparentBG {
    background-color: var(--mediumTransparent);
}

.mediumTransparentTXT {
    color: var(--mediumTransparent);
}

.darkTransparentBG {
    background-color: var(--darkTransparent);
}

.darkTransparentTXT {
    color: var(--darkTransparent);
}

.invisible {
    visibility: hidden;
}

.transparent,
.transparentBG {
    background-color: var(--transparent) !important;
}

.transparentTXT {
    color: transparent !important;
}

.highlightBG,
.specialBG {
    background-color: var(--special);
    color: var(--specialText);
    --currentBackgroundColor: var(--special);
    --currentTextcolor: var(--specialText);
}

.highlightTXT,
.specialTXT {
    color: var(--special);
}

.warningYellowBG {
    background-color: var(--w3PaleYellow);
    color: var(--dark);
    outline: 1px solid var(--w3Yellow);
    padding: 2px;
    line-height: 1.4;

    .darkTheme & {
        outline-color: var(--w3Orange);
        border-collapse: var(--w3Orange);
        background-color: transparent;
        box-shadow: inset 0px 0px 6em -3em var(--w3Orange);
        color: inherit;
    }
}

.warningYellowBG.icon {
    display: flex;
    align-items: center;
}

.warningYellowBG.icon::before {
    content: '\f071';
    font-family: var(--fontawesome);
    font-weight: bold;
    padding: var(--paddingSmall);
    color: var(--w3Orange);
    align-self: flex-start;
    font-size: 1.2em;
    height: 2lh;
    align-content: center;
}

.infoBG {
    background-color: var(--w3PaleBlue);
    color: var(--dark);
    outline: 1px solid var(--w3LightBlue);
    padding: 2px;
        border-radius: var(--round);
    line-height: 1.4;
    .darkTheme & {
        background-color: transparent;
        box-shadow: inset 0px 0px 6em -3em var(--w3PaleBlue);
        color: inherit;
    }
}

.infoBG:not(.big, .large) {
    font-size: var(--w3SmallFont);
    margin: var(--padding);
}

.infoBG:not(.noIcon) {
    display: flex;
    align-items: center;
}

    .infoBG:not(.noIcon)::before {
        content: '\f05a';
        font-family: var(--fontawesome);
        font-weight: bold;
        padding: var(--paddingSmall);
        color: var(--w3LightBlue);
        align-self: flex-start;
        font-size: 1.2em;
        height: 2lh;
        align-content: center;
        display: flex;
        /* Chrome braucht noch mehr: */
        flex-direction: row;
        align-items: center;
    }

.infoBG.border {
    border-color: var(--w3LightBlue);
    outline: none;
}

.warningYellowBG.border {
    border-color: var(--w3Amber);
    outline: none;
}

.warningBG {
    color: var(--warning);
    background-color: var(--warningBG) !important;
    outline: 1px solid var(--warning);
    padding: 2px;
}

.warningBG.border {
    outline: none;
    border-color: var(--warning);
}

.warningTXT {
    color: var(--warning) !important;
}

button:is(.warning, .delete, .deleteBtn) {
    background-color: var(--warning) !important;
    color: var(--warningText) !important;
}

.hoverDark,
.hoverBright,
.hoverTxtBright,
.hoverTxtDark,
.hoverPrimary,
.hoverTxtPrimary,
.hoverComplimentary,
.hoverTxtComplimentary {
    cursor: pointer;
    --hoverColor: var(--medium);
    transition: var(--transitionDurationLong);
}

button.mds-button-base>i:is(.fas, .far, .fa) {
    font-size: 0.95em;
    /*vertical-align:middle;*/
}

.square {
    border-radius: 0;
}

.round {
    border-radius: var(--round);
}

.rounder {
    border-radius: calc(2 * var(--round));
}

.roundest {
    border-radius: calc(20 * var(--round));
}

.smallerFont{
    font-size:0.86em;
}
.largerFont{
    font-size:1.24em;
}

ol, ul {
    padding-left: var(--paddingX);
    /*margin: var(--paddingY) 0;*/ 
    margin: 0; /* Anm: is vielleicht nicht so gut allgemein. falls nötig obere Zeile stattdessen aktivieren; - RJ */
}

    /*ul > li::marker {
        content: '\f0da';
        font-weight:bold;
        font-size:0.5em;
        font-family: var(--fontawesome);
    }*/

    .coloredElement, .coloredNode {
        background-color: var(--bgColor);
        color: var(--txtColor);
        padding: 1px 2px;
        border-radius: var(--round);
        width: fit-content;
        margin-bottom: 1px;
        .darkTheme &
        {
            --bgColorDarktheme: hsl(from var(--bgColor) h s calc(l * 0.8) / 30%);
            --txtColorDarkTheme: unset; /*var(--txtColor);*/
            background-color: var(--bgColorDarktheme);
            color: var(--txtColorDarkTheme);
        }
    }

.border,
.w3-input.border {
    --borderColor: var(--medium);
    border: 1px solid var(--borderColor);
}

.currentColorBorder{
    border-color:currentColor;
}

.borderTop {
    --borderColor: var(--medium);
    border-top: 1px solid var(--borderColor);
}

.borderBottom {
    --borderColor: var(--medium);
    border-bottom: 1px solid var(--borderColor);
}

.borderLeft {
    --borderColor: var(--medium);
    border-left: 1px solid var(--borderColor);
}

.borderRight {
    --borderColor: var(--medium);
    border-right: 1px solid var(--borderColor);
}

.noBorder {
    border: none;
    outline: none;
}


.tertiaryBorder {
    --borderColor: var(--tertiary);
    border-color: var(--borderColor);
}

.secondaryBorder {
    --borderColor: var(--secondary);
    border-color: var(--borderColor);
}

.darkBorder {
    --borderColor: var(--dark);
    border-color: var(--borderColor);
}

.brightBorder {
    --borderColor: var(--bright);
    border-color: var(--borderColor);
}

.complimentaryBorder {
    --borderColor: var(--complimentary);
    border-color: var(--complimentary);
}

.warningBorder {
    --borderColor: var(--w3Red);
    border-color: var(--w3Red);
}

.successBorder {
    --borderColor: var(--w3Green);
    border-color: var(--w3Green);
}

.primaryBorder,
.accentBorder {
    --borderColor: var(--primary);
    border-color: var(--borderColor);
}

.thick:is(.border, .primaryBorder, .tertiaryBorder, .secondaryBorder, .darkBorder, .brightBorder) {
    border-width: 2px;
}

.warningText {
    color: var(--w3Red);
}

.successText {
    color: var(--w3Green);
}

.hoverDark {
    --hoverColor: var(--darkTransparent);
}

.hoverTxtDark {
    --hoverColor: var(--dark);
}

.hoverBright {
    --hoverColor: var(--brightTransparent);
}

.hoverTxtBright {
    --hoverColor: var(--bright);
}

.hoverPrimary {
    --hoverColor: var(--accentThemeTransparent);
}

.hoverTxtPrimary {
    --hoverColor: var(--primary);
}

.hoverComplimentary {
    --hoverColor: var(--complimentaryThemeTransparent);
}

.hoverTxtComplimentary {
    --hoverColor: var(--complimentary);
}

.hoverBright:hover,
.hoverBright.hover,
.hoverDark:hover,
.hoverDark.hover,
.hoverPrimary:hover,
.hoverPrimary.hover,
.hoverComplimentary:hover,
.hoverBright.hover {
    transition: var(--transitionDurationShort);
    --hoverBoxShadow: inset 0 0 0 500px var(--hoverColor);
    box-shadow: var(--hoverBoxShadow);
    cursor: pointer;
}

.hoverTxtBright:hover,
.hoverTxtBright.hover,
.hoverTxtDark:hover,
.hoverTxtDark.hover,
.hoverTxtPrimary:hover,
.hoverTxtPrimary.hover,
.hoverTxtComplimentary:hover,
.hoverTxtComplimentary.hover {
    transition: var(--transitionDurationShort);
    cursor: pointer;
    color: var(--hoverColor);
}

@supports (color: color-mix(in lch, white, black)) {
    /* maybe irgendwann hover-Farben intelligenter machen mit color-mix?
        aber dazu braucht es immer eine definierte Ausgangsfarbe, könnnen wir nicht dynamisch ermitteln...
    */
}

.backdropblur {
    backdrop-filter: blur(2px);
}

.blur {
    filter: blur(2px);
}

.noInteraction {
    pointer-events: none;
}

.noSelection,
.noUserselect {
    user-select: none;
}

.noMargin {
    margin: 0;
}

.noPadding {
    padding: 0;
}

.noBreak {
    flex-wrap: nowrap;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.underlined {
    text-decoration: underline;
}

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

.padding {
    padding: var(--padding);
}

.paddingLeft {
    padding-left: var(--paddingX);
}

.paddingRight {
    padding-right: var(--paddingX);
}

.paddingSmallLeft {
    padding-left: var(--paddingXSmall);
}

.paddingSmallRight {
    padding-right: var(--paddingXSmall);
}

.paddingSmall {
    padding: var(--paddingSmall);
}

.padding-X {
    padding-left: var(--paddingX);
    padding-right: var(--paddingX);
}

.padding-Y {
    padding-top: var(--paddingY);
    padding-bottom: var(--paddingY);
}

.paddingSmall-X {
    padding-left: var(--paddingXSmall);
    padding-right: var(--paddingXSmall);
}

.paddingSmall-Y {
    padding-top: var(--paddingYSmall);
    padding-bottom: var(--paddingYSmall);
}

img.circle,
img.round {
    object-fit: cover;
    border-radius: 50%;
    /*height: 100px;*/
    /*width: 100px;*/
}

#topBar_layout .mds-button-base {
    /*background-color:transparent;*/
}

#topBar_layout {
    box-shadow: 0px 2px 10px 2px var(--darkTransparent);
}

#top_login_info {
    text-decoration: none;
}

#top_login_info.loading {
    position: relative;
    min-width: 7ch;
    pointer-events: none;
}

#top_login_info.loading>* {
    opacity: 0.6;
}

#top_login_info.loading.w3-hide {
    display: block !important;
    /* übersteuern!*/
}

#top_login_info.loading.w3-hide>* {
    display: none;
}

#top_login_info img.profilePic,
#login_info img.profilePic {
    position: absolute;
    top: -25%;
    left: -25%;
    right: 0;
    bottom: 0;
    width: 150%;
    height: 150%;
    pointer-events: none;
}

.sectionBG {
    background-color: var(--brightTransparent);
    /*backdrop-filter: blur(2px);*/
    box-shadow: var(--boxShadowSection);
    border-radius: var(--round);
    padding: var(--padding);
    margin-bottom: var(--paddingY);
    /*backdrop-filter:blur(2px);*/
    position: relative;
    /*transition-duration: 0.15s;
    transition-property: outline-color;
    outline: 2px solid transparent;
    outline-offset: -1px;*/
    /*    color: var(--dark);
    transition-property: color;
    transition-duration: 1s;
*/
    overflow: auto;
    /*width: max-content;
    */
}

/* BRANDNEU (Browser-Support ab 2023 halbwegs ok..!)*/
div:is(.sectionBG, .w3-section) {}

@container section (max-width: 700px) {
    /* für Elemente, die sich in einem solchen Container befinden */

    /* zb: Elemente in flex-containern sollen statt 49% lieber doch 100% flex-basis verwenden */
}

.sectionBG.overflow {
    overflow: unset;
}

.sectionBG:not(.w3-content) {
    max-width: 100%;
}

.sectionBG.StartNavigationMain {
    max-width: 650px;
}

@media screen and (max-width: 1205px) {
    .sectionBG {
        width: unset;
    }
}

.sectionBG:hover {
    /*outline-color: var(--mds-bright-transparent);*/
    /*color: var(--veryDark);*/
    /*transition-duration: 3s;*/
}

.sectionBG::after {
    content: '';
    position: absolute;
    /*z-index: -1;*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 1px 4px 8px 0px var(--darkTransparent);
    opacity: 0;
    pointer-events: none;
    /*transition-duration: 3s;*/
    /*transition-timing-function: ease-out;*/
    /*transition-property: opacity;*/
}

.sectionBG:hover::after {
    /*opacity: 1;*/
}

.sectionBG.center {
    display: flex;
    justify-content: center;
}

.sectionBG.primary {
    border: 1px solid var(--primary);
    background-color: var(--accentThemeTransparent);
}

.sectionBG.secondary {
    border: 1px solid var(--secondary);
    background-color: var(--secondaryThemeTransparent);
}

.sectionBG.tertiary {
    border: 1px solid var(--tertiary);
    background-color: var(--mediumTransparent);
}

.sectionBG.complimentary {
    border: 1px solid var(--complimentary);
    background-color: var(--complimentaryThemeTransparent);
}

.sectionBG .sectionBG {
    border: 1px solid var(--medium);
    box-shadow: none;
}

#topBarTitle {
    margin: auto;
    overflow: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;

}

#mainContent {
    padding-top: calc(var(--marginTopbar) + var(--paddingY));
}

.boxShadow {
    box-shadow: inset 0 0 0px 2px var(--darkTransparent);
}

.boxShadowInsetTopMedium {
    box-shadow: inset 0px 4px 4px -4px var(--mediumDark);
}

.boxShadowInsetBottomMedium {
    box-shadow: inset 0px -4px 4px -4px var(--mediumDark);
}

.boxShadowInsetRightMedium {
    box-shadow: inset -12px 0px 8px -14px var(--mediumDark);
}

pre {
    white-space: pre-wrap;
    line-height: 1.35;
    font-family: inherit;
    /*border: 1px solid var(--medium);*/
    background-color: var(--mediumBrightTransparent);
    border-radius: var(--round);
    padding: var(--paddingSmall);
    margin: 0;
    user-select: initial;
}

textarea,
textarea.resizeNone {
    display: block;
    resize: none;
}

textarea.resizeV {
    resize: vertical;
}

textarea.resizeH {
    resize: horizontal
}

textarea.resize {
    resize: both;
}

textarea.w3-input {
    border: 1px solid var(--borderColor, #ccc);
}

label.w3-disabled {
    opacity: 0.6;
}

.w3-disabled,
.w3-input[disabled]:not(.w3-disabled),
.w3-input:disabled:not(.w3-disabled) {
    transition-duration: var(--transitionDurationLong);
    transition-property: opacity;
}

.w3-input[disabled]:not(.w3-disabled),
.w3-input:disabled:not(.w3-disabled) {
    opacity: 0.6;
}

.fa-rotate-20 {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
}

/* Spacer for absolute positioned elements*/
.spacer {
    height: 50px;
    /* margin: 0 0 -50px 0;*/
    margin: 50px 0 -50px 0;
    /* use this if you want #container to have a 'bottom padding', in this case of 20px */
    background: transparent;
    /* you'll need this if #container's parent element has a different background from #container itself */
}

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

@media screen and (min-width: 1300px) {

    .medium_screen {
        display: none;
    }

    .small_screen {
        display: none;
    }

    .large_screen {
        display: block;
    }
}

@media screen and (max-width: 1300px) {
    .small_screen {
        display: none;
    }

    .large_screen {
        display: none;
    }

    .medium_screen {
        display: block;
    }
}

@media screen and (max-width: 900px) {
    .medium_screen {
        display: none;
    }

    .large_screen {
        display: none;
    }

    .small_screen {
        display: block;
    }
}

.quickHighlightBg {
    animation-name: quickHighlightPuls;
    animation-duration: 325ms;
    animation-iteration-count: 3;
}

@keyframes quickHighlightPuls {
    0% {
        background: radial-gradient(ellipse 35% 0%, transparent, var(--accentThemeD1));
        box-shadow: 0 0 0px var(--accentThemeD1);
        transform: scale(0.99);
    }

    5% {
        background: radial-gradient(ellipse 40% 0%, transparent, var(--accentThemeD1));
    }

    10% {
        background: radial-gradient(ellipse 45% 5%, transparent, var(--accentThemeD1));
    }

    15% {
        background: radial-gradient(ellipse 50% 10%, transparent, var(--accentThemeD1));
    }

    20% {
        background: radial-gradient(ellipse 55% 15%, transparent, var(--accentThemeD1));
    }

    25% {
        background: radial-gradient(ellipse 60% 20%, transparent, var(--accentThemeD1));
    }

    30% {
        background: radial-gradient(ellipse 65% 25%, transparent, var(--accentThemeD1));
    }

    35% {
        background: radial-gradient(ellipse 70% 30%, transparent, var(--accentThemeD1));
    }

    40% {
        background: radial-gradient(ellipse 75% 35%, transparent, var(--accentThemeD1));
    }

    45% {
        background: radial-gradient(ellipse 80% 40%, transparent, var(--accentThemeD1));
    }

    50% {
        background: radial-gradient(ellipse 85% 45%, transparent, var(--accentThemeD1));
        box-shadow: 0 0 1px var(--accentThemeD1);
    }

    55% {
        background: radial-gradient(ellipse 90% 50%, transparent, var(--accentThemeD1));
    }

    60% {
        background: radial-gradient(ellipse 95% 55%, transparent, var(--accentThemeD1));
    }

    65% {
        background: radial-gradient(ellipse 100% 60%, transparent, var(--accentThemeD1));
    }

    70% {
        background: radial-gradient(ellipse 100% 65%, transparent, var(--accentThemeD1));
    }

    75% {
        background: radial-gradient(ellipse 100% 70%, transparent, var(--accentThemeD1));
    }

    80% {
        background: radial-gradient(ellipse 100% 75%, transparent, var(--accentThemeD1));
    }

    85% {
        background: radial-gradient(ellipse 100% 80%, transparent, var(--accentThemeD1));
    }

    90% {
        background: radial-gradient(ellipse 100% 85%, transparent, var(--accentThemeD1));
    }

    95% {
        background: radial-gradient(ellipse 100% 90%, transparent, var(--accentThemeD1));
    }

    100% {
        background: radial-gradient(ellipse 100% 95%, transparent, var(--accentThemeD1));
        box-shadow: 0 0 2px var(--accentThemeD1);
        transform: scale(1);
    }
}