.w3-button {
    transition: var(--mds-hover-transition-out);
}

    .w3-button:hover {
        background-color: var(--currentBackgroundColor);
        color: var(--currentTextcolor);
        box-shadow: inset 0 0 0 300px var(--brightTransparent);
        transition: var(--mds-hover-transition-in);
    }

.w3-animate-exittop {
    position: relative;
    animation: exittop var(--transitionDurationLong, 0.4s);
    transition-timing-function: ease-in;
    transition-property: top, opacity;
    animation-play-state: running;
    animation-fill-mode: both;
}

.darkTheme .w3-card {
    outline: 1px solid var(--borderColor, var(--medium));
    box-shadow: 0 2px 10px 0 var(--mediumBrightTransparent);
}
.darkTheme .w3-card-4 {
    outline: 1px solid var(--borderColor, var(--medium));
    box-shadow: 0 4px 20px 0 var(--mediumBrightTransparent);
}

@keyframes animateleft {
    from {
        left: calc(-1 * var(--elementWidth, 300px));
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

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

    html, body {
        font-size: 14px;
    }
}

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

    html, body {
        font-size: 13px;
    }
}

h1 {
    font-size: 2.4rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.6rem;
}

h4 {
    font-size: 1.34rem;
}

h5 {
    font-size: 1.2rem
}

h6 {
    font-size: 1.05rem;
}

hr{
    border-color:var(--borderColor);
    margin:1em 0;
}

.w3-serif {
    font-family: serif
}

h1, h2, h3, h4, h5, h6 {
    margin: var(--paddingY) 0;
}

.w3-wide {
    letter-spacing: 4px
}

.w3-padding {
    padding: var(--padding) !important;
}

.w3-tiny {
    font-size: var(--w3TinyFont);
}

.w3-small {
    font-size: var(--w3SmallFont);
}

.w3-medium {
    font-size: var(--w3MediumFont);
}

.w3-large {
    font-size: var(--w3LargeFont);
}

.w3-xlarge {
    font-size: var(--w3XLargeFont);
}

.w3-xxlarge {
    font-size: var(--w3XXLargeFont);
}

.w3-xxxlarge {
    font-size: var(--w3XXXLargeFont);
}

.w3-jumbo {
    font-size: var(--w3JumboFont);
}

:root {
    --w3TinyFont: 0.7rem !important;
    --w3SmallFont: 0.85rem !important;
    --w3MediumFont: 1rem !important;
    --w3LargeFont: 1.25rem !important;
    --w3XLargeFont: 1.65rem !important;
    --w3XXLargeFont: 2.5rem !important;
    --w3XXXLargeFont: 3.3rem !important;
    --w3JumboFont: 4.45rem !important;
}

.w3-disabled, .w3-btn:disabled, .w3-button:disabled {
    opacity: 0.6; /* statt 0.3, bissl besser sichtbar.*/
}

.w3-white{
    color: var(--dark);
}

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

.w3-border, .w3-border-right, .w3-border-left, .w3-border-bottom, .w3-border-top {
    border-color: var(--mediumBright);
}

@keyframes exittop {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: -50%;
        opacity: 0;
    }
}


input.w3-padding.mds-border {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

/*.w3-button:before, .w3-button:after {
    content: 'bitte nicht w3-button verwenden, sondern mds-button-base!!'!important;
    color:red;
    font-weight:bold;
    font-family:'Consolas', Arial, sans-serif;
    font-size:10px;
}*/
.w3-panel {
    margin-top: var(--paddingX);
    margin-bottom: var(--paddingX);
}

.w3-container, .w3-panel {
    padding: 0.01em var(--paddingX);
}

.w3-container {
    padding-top: unset;
    padding-bottom: unset;
}

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

.w3-input{
    padding: var(--paddingY);
}

.w3-input[type=date] {
    /*padding: 4px;*/ /* im Filterpanel ist das zu wenig */
    padding: var(--w3PaddingY);
}

select.w3-input {
    padding: var(--w3PaddingY);
    display: block;
    background-color: white;
    width: 100%;
    height: 40.5px !important;
}


.w3-padding-x {
    padding-left: 16px;
    padding-right: 16px;
}

.w3-padding-y {
    padding-top: 8px;
    padding-bottom: 8px;
}

p.w3-padding.w3-large {
    padding: 4px 8px 3px 8px !important;
    margin-top: 0px;
    margin-bottom: 0px;
}

.w3-padding.w3-left, .w3-padding-x.w3-left {
    /*padding-right: 0px !important;*/
}

.w3-bar-item {
    user-select: none;
}


.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.w3-disabled {
    cursor: default !important;
    pointer-events: none !important;
}


.w3-modal {
    z-index: 20;
    backdrop-filter: blur(2px);
}

.w3-modal-content {
    position: absolute;
    left: 0;
    right: 0;
}

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

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


@media (max-width:1205px) {
    .w3-modal {
        position: fixed;
        /*width: 100vw;
        height: 100vh;*/
        z-index: 100;
        overflow-y: auto;
    }

    .w3-modal, .w3-modal-content {
        left: 0;
        top: 0;
    }

    .w3-modal-content {
        width: 100%;
        position: relative;
        margin: 0;
    }
}


.w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child {
    padding-left: var(--paddingXSmall);
}

.w3-table-all th {
    font-weight: bold;
}

.w3-dropdown-hover > .mds-button-small, .w3-dropdown-click > .mds-button-small {
    margin-top: 0px !important;
}

.tabulator-row .tabulator-cell {
    white-space: break-spaces;
}

.tabulator {
    user-select: none;
    position: relative;
    background-color: var(--brightTransparent);
    border-radius: var(--round);
    color: inherit;
}

    .tabulator .tabulator-tableHolder .tabulator-table {
        background-color: transparent;
        border-radius: var(--round);
        color: inherit;
    }

.tabulator-row, .tabulator-row:nth-child(2n) {
    background-color: transparent;
    color: inherit;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: var(--mediumBright);
    color: var(--brighter);
    border-radius: var(--round);
    border: 0;
    box-shadow: 0px 3px 6px -2px var(--darkTransparent);
}

.tabulator .tabulator-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: transparent;
    color: inherit;
    border: 0;
}

.w3-padding-top {
    padding-top: var(--w3PaddingY);
}

.w3-padding-bottom {
    padding-bottom: var(--w3PaddingY);
}

.w3-padding-left {
    padding-left: var(--w3PaddingX);
}

.w3-padding-right {
    padding-right: var(--w3PaddingX);
}

/* w3-Breiten l1-l12, m1-12, s1-s12 in Kombination mit Flex usw */
.w3-col {
    --subtractValue: 0px;
}

    .w3-col.s1 {
        width: calc(8.33333% - var(--subtractValue));
    }

    .w3-col.s2 {
        width: calc(16.66666% - var(--subtractValue));
    }

    .w3-col.s3 {
        width: calc(24.99999% - var(--subtractValue));
    }

    .w3-col.s4 {
        width: calc(33.33333% - var(--subtractValue));
    }


    .w3-col.s5 {
        width: calc(41.66666% - var(--subtractValue));
    }

    .w3-col.s6 {
        width: calc(49.99999% - var(--subtractValue));
    }

    .w3-col.s7 {
        width: calc(58.33333% - var(--subtractValue));
    }

    .w3-col.s8 {
        width: calc(66.66666% - var(--subtractValue));
    }

    .w3-col.s9 {
        width: calc(74.99999% - var(--subtractValue));
    }

    .w3-col.s10 {
        width: calc(83.33333% - var(--subtractValue));
    }

    .w3-col.s11 {
        width: calc(91.66666% - var(--subtractValue));
    }

    .w3-col.s12 {
        width: calc(99.99999% - var(--subtractValue));
    }

@media (min-width:601px) {
    .w3-col.m1 {
        width: calc(8.33333% - var(--subtractValue));
    }

    .w3-col.m2 {
        width: calc(16.66666% - var(--subtractValue));
    }

    .w3-col.m3 /*, .w3-quarter*/ {
        width: calc(24.99999% - var(--subtractValue));
    }

    .w3-col.m4 /*, .w3-third */ {
        width: calc(33.33333% - var(--subtractValue));
    }

    .w3-col.m5 {
        width: calc(41.66666% - var(--subtractValue));
    }

    .w3-col.m6 /*, .w3-half*/ {
        width: calc(49.99999% - var(--subtractValue));
    }

    .w3-col.m7 {
        width: calc(58.33333% - var(--subtractValue));
    }

    .w3-col.m8 /*, .w3-twothird*/ {
        width: calc(66.66666% - var(--subtractValue));
    }

    .w3-col.m9 /*, .w3-threequarter */ {
        width: calc(74.99999% - var(--subtractValue));
    }

    .w3-col.m10 {
        width: calc( 83.33333% - var(--subtractValue));
    }

    .w3-col.m11 {
        width: calc( 91.66666% - var(--subtractValue));
    }

    .w3-col.m12 {
        width: calc(99.99999% - var(--subtractValue));
    }
}

@media (min-width:993px) {
    .w3-col.l1 {
        width: calc(8.33333% - var(--subtractValue));
    }

    .w3-col.l2 {
        width: calc(16.66666% - var(--subtractValue));
    }

    .w3-col.l3 {
        width: calc(24.99999% - var(--subtractValue));
    }

    .w3-col.l4 {
        width: calc(33.33333% - var(--subtractValue));
    }

    .w3-col.l5 {
        width: calc(41.66666% - var(--subtractValue));
    }

    .w3-col.l6 {
        width: calc(49.99999% - var(--subtractValue));
    }

    .w3-col.l7 {
        width: calc(58.33333% - var(--subtractValue));
    }

    .w3-col.l8 {
        width: calc(66.66666% - var(--subtractValue));
    }

    .w3-col.l9 {
        width: calc(74.99999% - var(--subtractValue));
    }

    .w3-col.l10 {
        width: calc(83.33333% - var(--subtractValue));
    }

    .w3-col.l11 {
        width: calc(91.66666% - var(--subtractValue));
    }

    .w3-col.l12 {
        width: calc(99.99999% - var(--subtractValue));
    }
}

/* wichtig bei iOS Safari */
@supports (-webkit-hyphens:none) {
    .moreCoreCheckBox label {
        padding-left: 16px;
    }

    .moreCoreCheckBox .inputContainer input::before {
        font-size: 1em !important;
    }
}
/*---- iOS ----*/