:root {
    --mds-example: #ec6707;
}

  

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index:1;
}

dialog {
    border-radius: var(--round);
    border-color: var(--medium);
    box-shadow: var(--boxShadowMediumMedium);
    border: 0px solid var(--medium);
    min-width: min(55rem, 95vw);
    width: min(55rem, 100vw);
    min-height: 5rem;
    padding: 0;
    --headingColor: var(--secondary);
    --headingColorTxt: var(--secondaryText);
    --headingShadow: unset;
}
    dialog > *:first-child:is(h1, h2, h3, h4, h5, h6, .heading, .header) {
        background-color: var(--headingColor);
        color: var(--headingColorTxt);
        width: 100%;
        margin: 0;
        padding:var(--padding);
        font-size:1.2rem;
        box-shadow:var(--headingShadow);
        margin-bottom:var(--paddingY);
    }

    dialog::backdrop {
        background-color: var(--darkTransparent); /* variablen funktionieren nicht! */
        background-color:rgba(0,0,0,0.1);
        backdrop-filter: blur(2px);
    }

input[type=color] {
    background-color: var(--mediumTransparent);
    border: none;
   /* display: block;
    width: 100%;*/
}
    
    input[type=color].border{
        padding:2px;
    }

label + input[type=color]{

}

/* FORM verwenden für Eingabemasken? */
/* irgendwas nach irgendwas: */
form:not(.flex_row, .flex_row_center, .flex_row_stretch) > * + * {
    margin-top: var(--paddingYSmall);
}
form:is(.flex_row, .flex_row_center, .flex_row_stretch) {
    gap: var(--paddingYSmall);
}

.dojoStandby img {
    display: none !important;
}

.dojoStandby {
}

    .dojoStandby > div:first-child {
        border-radius: var(--round) !important;
        outline: 3px solid var(--mediumTransparent);
        background-color: rgba(var(--rgbSL1), 0.7) !important;
        opacity: 1 !important;
        overflow: hidden;
        backdrop-filter:blur(2px);
    }

.darkTheme .dojoStandby > div:first-child {
    background-color: rgba(var(--rgbSD5), 0.7) !important;
}

    .dojoStandby:has(div.waitingText) > div:first-child {
        /*z-index: 99999 !important;*/ /* führt dazu, dass Ladeanimtion mit Text aggressiv über Dialoge etc drübergeht */
    }

    /* der ganze zentrierte Container, der Progressbar und ggf. Schritte enthält*/
.dojoStandby #progressContainer {
    background-color: none;
    position: absolute;
    opacity: 1;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    max-width: 350px;
    max-height: 100%;
    overflow: hidden;
    padding: var(--padding);
}

/* Loadingbar nicht mehr absolut ausrichten, wenn sie im Progresscontainer vorkommt */
.dojoStandby:has(#progressContainer) .loadingBar {
    position: relative;
    width: 100%;
}

/* der Container der Einzelschritte enthält */
.dojoStandby #progressContainer .stepsContainer {
    display: flex;
    /*overflow: hidden;*/
    gap: 1em;
    justify-content: center;
    /*max-height:50%;*/
}

/* ein Schritt, bestehende aus Markierung und Text */
    .dojoStandby #progressContainer .stepsContainer .progressStep {
        /*border: 1px solid lime;*/
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.5em;
        align-items: center;
        /*max-height:100%;*/
        min-width: 1.5em;
    }

    /* Markierung (einfach ein rundes Element) */
        .dojoStandby #progressContainer .stepsContainer .progressStep > .progressStepIndicator {
            border-radius: var(--roundest);
            background-color: var(--mediumBrightTransparent);
            /*border: 1px solid red;*/
            width: 1em;
            height: 1em;
            position: relative;
        }
                .dojoStandby #progressContainer .stepsContainer .progressStep > .progressStepIndicator::after {
                    content: '';
                    font-family:var(--fontawesome);
                    border-radius:inherit;
                    position: absolute;
                    inset: 0;
                    background-color:transparent;
                    transition: background-color var(--transitionDurationLong);
                }

        .dojoStandby #progressContainer .stepsContainer .progressStep.finished > .progressStepIndicator::after {
            background-color: var(--accentTheme);
            /*color: var(--accentThemeTxt);
            content: '\f00c';*/
        }

        /* Beschriftung des Einzelschritts */
        .dojoStandby #progressContainer .stepsContainer .progressStep > label.progressStepLabel {
            writing-mode: sideways-lr;
            color: var(--mediumBright);
            text-shadow: 0px 0px 4px var(--darkTransparent);
            opacity: 0.8;
            font-weight: 600;
            transition: opacity var(--transitionDurationLong);
            transition-property: opacity, color;
            text-overflow: ellipsis;
            overflow: hidden;
            max-height: 100%;
        }
        .dojoStandby #progressContainer .stepsContainer .progressStep.finished > label.progressStepLabel {
            color: var(--accentThemeL1);
            opacity:1;
        }
    .dojoStandby .loadingBar {
        /*min-width:20px;
        max-width:200px;*/
        position: absolute;
        opacity: 1;
        top: 50%;
        left: 50%;
        width: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--mediumTransparent);
        max-width: 350px;
    }
    .darkTheme .dojoStandby .loadingBar {
       
        background-color: transparent;
        box-shadow:0px 0px 8px -2px var(--darkTransparent);
    }

.loadingBar:has(.waitingText) {
    height: calc( 1rem + var(--paddingYSmall));
}
.dojoStandby .waitingText {
    text-align: center;
    /*text-transform: uppercase;*/
    font-weight: bold;
    /*top: calc(100% + 0em);*/
    inset: -1em;
    overflow: visible;
    text-wrap: balance;
    line-height: 1.1;
    /*transform: translateY(-50%);*/
    z-index: 1;
    position: absolute;
    user-select: none;
    display: inline-flex;
    justify-content: center; /* H */
    align-items: center; /* V */
    color: var(--bright);
    text-shadow: 0px 0px 4px var(--darkTransparent);
    animation-name: opacityBounce;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}

select{

}

.darkTheme select {
    color-scheme: dark;
}

.darkTheme select > option {
    /* muss für Chrome-Browser explizit gesetzt sein, sonst inheritet es im Darkmode von irgendwo weißen Text auf weißem Grund */
    background-color: var(--darkThemeBG);
    color: var(--brightText);
}


.mds-button-base, .buttonBase {
    border: 0px;
    text-align: center;
    vertical-align: middle;
    padding: var(--paddingSmall);
    user-select: none;
    position:relative;
    --hoverColor:var(--medium);
    border-radius:var(--round); /* eigentlich brauchen wir immer rund. opt-out mit .square*/
    /*background-color: var(--mediumBrightTransparefnt);*/ /* nicht färben. das macht mehr kaputt als es hilft. */
}

.buttonBase {
    background-color: var(--secondaryThemeL5);
    --currentBackgroundColor: var(--secondaryThemeL5);
    color: var(--secondaryThemeL5txt);
    --hoverColor: hsl(from currentColor h 0 100);
}

    .buttonBase:not(.disabled, .w3-disabled, :disabled, .noInteraction) {
        cursor: pointer;
        transition-duration: var(--transitionDurationLong);
        transition-property:/* filter; */background-color;

        &:hover, &:focus, &:active

{
    transition-duration: var(--transitionDurationShort);
    background-color: color-mix(in lab, var(--currentBackgroundColor) 80%, var(--hoverColor, currentColor));
    /*filter:brightness(110%); *//* ist bei hellen Farben viel zu hell! bei niedrigeren Werten und dunklen Farben quasi kein Effekt! */
}

}

.buttonBase.submitBtn, .buttonBase.okBtn, .buttonBase.mainBtn, buttonBase.saveBtn{
    padding:var(--padding);
    background-color:var(--primary);
    --currentBackgroundColor:var(--primary);
    color:var(--primaryText);
}
.buttonBase.addElementBtn{
    border-radius:var(--roundest);
}
    .buttonBase.addElementBtn::after {
        content: '\f0d7';
        margin-right: 0.3em;
        font-weight: bold;
        font-family: var(--fontawesome);
        /* aber es sollte LINKS am Button sein ... */
    }
    .buttonBase.smallBtn {
        padding: var(--paddingSmall);
    } .buttonBase.largeBtn {
        padding: var(--padding);
    }
.buttonBase.xlargeBtn{
    padding:var(--padding);
    font-size:var(--w3Large);
}

    .buttonBase.dropdownBtn:after {
        content: '\f0d7';
        padding-left: 0.3em;
        border-left: 1px solid currentColor;
        margin-left: 0.3em;
        font-weight: bold;
        font-family: var(--fontawesome);
    }

/*:is(.mds-button-base, .buttonBase):focus{
    outline: 2px dashed var(--medium);
    outline-offset: 1px;
}*/

button:is(.mds-button-base, .buttonBase) > *:is(i, span, label, a) {
    pointer-events:none; /* damit Klick-Events als Target immer den ganzen Button bekommen; mehr als Beschriftung und Icon sollte eh nicht drin sein*/
}
button:is(.mds-button-base, .buttonBase) > *:first-child:is(.fas, .far, .fa, .fa-solid, .fa-regular) {
    /* Icon ist erstes Element im Button */
    
}

/* die Klickanimation eines Buttons mittels before-Pseudoelement */
/* Hinweis: Furchtbar lästig, weil dann Icons an anderen Stellen nicht mehr damit gehn, wenn diese das :before dafür benutzen wollen */
/*button:not(#newButton, #submitButton, #createNew):is(.mds-button-base, .buttonBase):before {
    content: '';
    pointer-events: none;
    display: block;
    position: absolute;
    z-index: 100;
    border-radius: inherit;
    inset: 0;
    opacity: 0;
    transition-property: box-shadow, opacity;
    transition-duration: var(--transitionDurationLong);
    transition-timing-function: ease-out;
    box-shadow: inset 0 0 8px var(--paddingX) var(--currentBackgroundColor);
}

button:not(#newButton, #submitButton, #createNew):is(.mds-button-base, .buttonBase):active:before {
    box-shadow: inset 0 0 0 0 var(--currentBackgroundColor);
    position: absolute;
    opacity: 0.6;
    transition: 0s;
}
*/
    a:is(.mds-button-base, .buttonBase), *:is(.mds-button-base, .buttonBase) a {
        text-decoration: none;
        text-align: center;
        display: flex;
        flex-flow: row;
        align-items: center;
    }

    .strike, .textLineThrough{
        text-decoration:line-through;
    }

    span.nowrap{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }



.mds-button-base:disabled, .buttonBase:disabled {
    pointer-events:none;
}


   

	

	.mds-card {
		padding-top: 0px !important;
		border-top: 0px solid var(--mds-gray);
		box-shadow: none !important;
	}

  

    .mds-border {
        border: 1px solid var(--mds-light-gray);
        margin-top: -1px;
    }
	
	
	.mds-nopadding, .w3-container.mds-nopadding, .w3-panel.mds-nopadding, .w3-section.mds-nopadding {
		padding-right:0px;
		padding-left:0px;
		padding-top:0px;
		padding-bottom:0px;
	}

    .mds-nomargin {
		margin-right:0px;
		margin-left:0px;
		margin-top:0px;
		margin-bottom:0px;
	}

    .mds-nomargin_h {
		margin-right:0px;
		margin-left:0px;
	}

    .mds-nomargin_v {
		margin-top:0px;
		margin-bottom:0px;
	}
	
	
    .mds-margin-small {
        margin: 4px;
    }

    .mds-margin-small-x {
        margin-left: 4px;
        margin-right: 4px;
    }

    .mds-margin-small-y {
        margin-top: 4px;
        margin-bottom: 4px;
    }
	
	.mds-paragraph-small {
		margin-top:8px;
		margin-bottom:8px;
        white-space: nowrap;
	}

    .mds-negative-margin-y {
        margin-top: -1px;
        margin-bottom: -1px;
    }

    .mds-negative-margin-x {
        margin-left: -1px;
        margin-right: -1px;
    }




    .mds-hover-bright, .mds-hover-dark, .mds-text-hover-bright, .mds-text-hover-dark, .mds-text-hover-orange
    {
       cursor:pointer; 
    }

	

    @keyframes shake {
        0%, 100% {transform: translateX(0);}
        10%, 30%, 50%, 70%, 90% {transform: translateX(-6px);}
        20%, 40%, 60%, 80% {transform: translateX(6px);}
    }

    .mds-shake {
        animation-duration: 0.8s;
        animation-fill-mode: both;
        animation-name: shake;
    }


.mds-fade:not(.w3-disabled, [disabled], .disabled) {
    transition-duration: 1s;
    transition-property: opacity;
    opacity: 1;
}

    .mds-fade.delay {
        transition-delay: 1s;
    }

    .mds-fade.slow.delay {
        transition-delay: 1.5s;
    }

    .mds-fade.slow {
        transition-duration: 1.5s;
    }

    .mds-fade.fast {
        transition-duration: 0.5s;
    }

    .mds-fade.transparent,
    .mds-fade.hide,
    .mds-fade.hidden
    {
        opacity: 0;
    }


@media (max-width:1205px) {
    
}

@media (min-width:1206px) {
    
}


dialog#modalContainer {
    .darkTheme & {
                     background-color:var(--darkThemeBG);
                     color:var(--brightText);
                 }
}

dialog#modalContainer #dialogHeader.heading{

}

dialog#modalContainer #dialogContent{
    background-color:var(--brighter);
    color:var(--dark);
    .darkTheme & {
                     background-color:var(--darkThemeBG);
                     color:var(--brightText);
                 }
}

.fa-user.fa-mds-user-substitution {
    position: relative;
    width: 1.25em;
}
.fa-user.fa-mds-user-substitution::after {
    content: "\f007";
    position: absolute;
    inset: 0;
    left: 0.3em;
    font-family: inherit;
    font-weight: bold;
    text-shadow: none;
    color: var(--complimentaryThemeD2);
    opacity: 0.5;
}