: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);
    --currentColor: var(--mds-gray);
    --currentTextcolor: var(--primaryText);
    --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);
    /*Achtung: Farben werden ggf. von Theme.css überschrieben! */
    /* ab hier ergänzende Variablen :*/
    --warningBG: var(--w3PaleRed);
    --warningText: #fff;
    --warning: var(--w3Red);
    --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;
}

@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);
    scroll-behavior: smooth;
    font-family: var(--font);
    user-select: none; /* weil die ständige Markierei und der Textcursor nerven; besser gezielt wo aktivieren */
    color-scheme: light;
}
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: 6px;
    --smooth1to2: 3px;
    --smooth2to1: 0px;
    --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: var(--mediumTransparent);
    --stripe2Color: var(--brightTransparent);
    --stripe1Width: 10px;
    --stripe2Width: 6px;
    --smooth1to2: 3px;
    --smooth2to1: 0px;
    --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;
    height: 100vh;
    width: 100vw;
    z-index: -1;
    opacity: 0.3;*/
    /* ??? hmmm, nicht so leicht, alles glei viel zu heavy */
}

.showIfSubstitutionActive {

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

.hidden{
    visibility:hidden!important;
}

td.transparent{
    visibility:hidden;
}


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

#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);
    --currentColor: var(--tertiary);
    --currentTextcolor: var(--tertiaryText);
}

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

.secondaryBG {
    background-color: var(--secondary);
    color: var(--secondaryText);
    --currentColor: 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);
    --currentColor: 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);
    --currentColor: 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);
    --currentColor: 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;
    line-height: 1.4;

    .darkTheme &
{
    background-color: transparent;
    box-shadow: inset 0px 0px 6em -3em var(--w3PaleBlue);
    color:inherit;
}
}
    .infoBG.icon {
        display: flex;
        align-items: center;
    }
        .infoBG.icon::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;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

.thick:is(.border, .primaryBorder, .tertiaryBorder, .secondaryBorder, .darkBorder, .brightBorder) {
    border-width: 2px;
}
.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 {
    position:sticky;
}
*/
#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;
}
#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;
        }
    }