
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}



tableFixHead {
    overflow-y: auto;
    height: 100px;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
}

.tableFixHead {
    overflow-y: auto;
    height: 100px;
}

    .tableFixHead thead th {
        position: sticky;
        top: 50px;
    }

/* Just common table stuff. Really. */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 2px
}

th {
    background: #eee;
}



/*Kopfbereich*/

.microsoft-login-button {
    display: block;
    margin: auto;
    margin-top: 10px;
    width: 250px;
    border-radius: 4px;
    padding: 5px 10px;
    border: 1px solid #3b3a39;
    color: #3b3a39;
    background-color: white;
    text-decoration: none;
    text-align: center;
}


    .microsoft-login-button:hover {
        text-decoration: none;
        color: #3b3a39;
    }


    .microsoft-login-button img {
        width: 35px;
    }

.shadow-effect {
    transition: 0.3s;
}

    .shadow-effect:hover {
        -webkit-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
        box-shadow: 0px 4px 15px -6px rgba(0,0,0,0.75);
    }

/* Tabbellen Gestaltung */

.calender {
    table-layout: fixed;
}



.calender-table {
    background-color: #f3f2f1;
    text-align: center;
}


    .calender-table .day {
        border-radius: 2px;
        background-color: white;
        cursor: pointer;
    }

    .calender-table .dayleft {
        border-radius: 2px;
        background-color: white;
        text-align: left;
        cursor: pointer;
    }


.calender-toolbar {
    background: #0078d4;
    color: white;
}

.toolbar-button {
    background: #0078d4;
    border: white;
    margin: 0;
    padding: 5 10px;
    text-align: center;
    vertical-align: middle;
    outline: none;
    font-size: 25px;
    font-weight: 100;
    color: white;
}




.kalender-tabelle {
    margin: 4px;
    width: 100%;
    background-color: #f3f2f1;
    text-align: center;
}

    .kalender-tabelle thead {
        background-color: white;
    }

.calender-table {
    width: 100%;
    padding: 0;
    margin: 0;
}

    .calender-table .day {
        width: 10vw;
        border-radius: 5px;
        vertical-align: middle;
        cursor: pointer;
    }

.kalender-tabelle .dauer {
    height: 50px;
}


.current-day {
    border: 2px solid #0047d4;
    color: #0047d4;
}

.selected-day {
    border: 2px solid;
    color: #004578;
    background-color: #c7e0f4 !important;
}

.day .day-event {
    font-size: 10px;
    padding: 5px;
}

.event {
    border: 5px;
}

.card {
    margin: 10px;
}


/* farbendeffintion */

.red-orange {
    background: #da3b01;
    color: white;
}

.magenta {
    background: #881798;
    color: white;
}

.pink-red {
    background: #750b1c;
    color: white;
}

.yellow {
    background: #fce100;
    color: black;
}

.yellow-green {
    background: #8cbd18 !important;
    color: black;
}

.awabase-farbe {
    background: #038387;
    color: white;
}

.taks-farbe {
    background: #ffaa44;
    color: black;
}

.farbe1 {
    background: rgba(245, 24, 24, 0.7) !important;
    color: white;
}

.farbe2 {
    background: rgba(255, 210, 50, 0.7) !important;
    color: black;
}



.farbe3 {
    background: rgba(22, 119, 148, 0.7) !important;
    color: white;
}


.farbe4 {
    background: #8cbd18 !important;
    color: black;
}

.farbe5 {
    background: #881798 !important;
    color: white;
}


.farbe6 {
    background: #038387 !important;
    color: white;
}

.farbe7 {
    background: #ffaa44 !important;
    color: black;
}


/* Lüntenbeckfarben   l0 Grün, l1 gelb, l2 orange, l3 rot, l4 blau */

.lgruen {
    background: #70AD47;
    color: white;
}

.l0 {
    background: #70AD47;
    color: white;
}


.l1 {
    background: #fff100;
    color: black;
}



.l2 {
    background: #FFC101;
    color: black;
}

.lorange {
    background: #FFC101;
    color: black;
}

.l3 {
    background: #FF0101;
    color: white;
}

.lrot {
    background: #FF0101;
    color: white;
}


.l4 {
    background: #c7e0f4;
    color: black;
}

.lblau {
    background: #c7e0f4;
    color: black;
}

.feiertage {
    background-color: #e861c2 !important;
    color: white;
}

.urlaubstage {
    background-color: #f2ed49 !important;
    color: black;
}



.halbtage {
    background-color: #FF8800 !important;
    color: black;
}

.kranktage {
    background-color: #1d56f2 !important;
    color: white;
}


.wochenende {
    background-color: #F8EFFB !important;
    /*background-color: #e861c2 !important;*/
    color: black;
}

.swochenende {
    background-color: #F8EFFB !important;
}

.tagvoll {
    background-color: #C6EFCE !important;
}

.tagnichtvollg {
    background-color: #FFC7CE !important;
}


.gradient-blau {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}



/* Eingabefelder*/
.fluent-input {
    display: block;
    width: 100%;
    padding: 3px 7px;
    margin: 10px 0;
    border: 1px solid #3b3a39;
}

    .fluent-input:focus {
        outline: none;
        border: 2px dashed #0078d4;
    }


.awabasefooter {
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: lightgray;
}

.footer-navigation {
    display: flex;
    margin: auto 0;
    justify-content: end;
    gap: 40px;
}


.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    /*background-color: lightskyblue;*/
}



.suli-menu-btn span {
    color: white;
}



.modal-dialog {
    top: 10vh;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (max-width: 480px) {
    .HandyVersion {
        display: none;
    }
}
