/***
****  Bitte immer zuerst mit Ctrl + F nach der gewünschten Klasse suchen, bevor eine neue Klasse erstellt wird.
****  Die Klasse muss immer mit tsz- beginnen, damit es nicht zu Konflikten mit anderen Klassen kommt.
***/

html, body {
    font-family: Verdana, Helvetica, Arial, sans-serif !important;
    font-size: 16px; 
}

/*Heading / Überschriften*/

h1 {
    font-size: 24px;
}

/*Heading / Überschriften -ende*/


/*Link / a */

a {
    text-decoration: none !important;
}

.tsz-link-fett a {
    font-weight: bold;
}

/*Link / a -ende */


/*Table / Tabelle*/

table.mud-table-root, td {
    white-space: nowrap;
}

/*    table.mud-table-root, td[data-label="Kommentar"] {
        white-space: normal;
    }*/


/*Table / Tabelle -ende*/



/* font-size / Schriftgrößen */

.tsz-fs-10 {
    font-size: 10px;
}

/* font-size / Schriftgrößen -ende */

/*width / länge*/

.tsz-w-200px {
    width: 200px;
}

/*width / länge*/

/* margin*/

.tsz-mt-6 {
    margin-top: 4.5rem;
}

.tsz-mt-7 {
    margin-top: 4.5rem;
}

.tsz-mt-8 {
    margin-top: 6rem;
}

.tsz-mt-9 {
    margin-top: 7.5rem;
}

.tsz-mt-10 {
    margin-top: 9rem;
}

@media (min-width: 575px) {
    .tsz-mt-sm-6 {
        margin-top: 4.5rem;
    }

    .tsz-mt-sm-7 {
        margin-top: 4.5rem;
    }

    .tsz-mt-sm-8 {
        margin-top: 6rem;
    }

    .tsz-mt-sm-9 {
        margin-top: 7.5rem;
    }

    .tsz-mt-sm-10 {
        margin-top: 9rem;
    }
}
/* margin*/



/*Disabled / Deaktiviert*/

.tsz-disabled {
    pointer-events: none;
    opacity: 0.6;
}

/*Disabled / Deaktiviert -ende*/


/*Overflow / Scrollbar */

.tsz-overflow-x-hidden {
    overflow-x: hidden !important;
}

/*Overflow / Scrollbar -ende*/


/*Background-Blur*/

.tsz-dialog-bg-blur {
    backdrop-filter: blur(10px);
}

/*Background-Blur -ende*/


.tsz-container {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - var(--mud-appbar-height)) !important; /* Die gesamte Höhe des Displays - MudAppBar einnehmen */
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
}

.tsz-form-container {
    width: max-content;
    max-height: max-content;
    overflow-y: auto;
    overflow-x: hidden;
}

.tsz-auto-größe {
    flex: 0 !important; /* Die Höhe, Breite wird vom Inhalt bestimmt */
}

.tsz-platz-auffüllen {
    flex: 1 !important; /* Die restliche verfügbare Höhe, Breite des im Eltern-Element wird genutzt*/
}

.tsz-VertikaleScrollbar {
    overflow-y: auto; /* Nur vertikales Scrollen */
    overflow-x: hidden; /* Horizontales Scrollen unterdrücken */
}

.tsz-AutomatischeScrollbar
{
    overflow:auto;
}


/*Styles die greifen wenn wir im Printmodus sind (ctrl + P)*/
@media print {

    @page {
        size: landscape;
    }

    body {
        position: relative;
        visibility: hidden !important;
    }

    div.mud-main-content {
        position: unset !important;
    }

    .tsz-print-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .tsz-print-container, tsz-print-container * {
        visibility: visible !important;
        transform: scale(0.85);
        transform-origin: 0 0;
        -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
        color-adjust: exact !important; /*Firefox*/
    }

    .tsz-spalte {
        max-width: 200px;
    }
}



/*Tagessummen*/
.tsz-tagesummen-text-Zukunft td {
    color: gray !important;
}

.tsz-tagesummen-text-Heute td {
    font-weight:bold !important;
}


.tsz-tagesummen-text img.mud-image {
    opacity: 0.5;
}
/*Tagessummen ende*/

.tsz-DropDownBreiteBegrenzen {
    width: 150px; /* Feste Breite */
    white-space: nowrap; /* Kein Zeilenumbruch */
    text-overflow: ellipsis; /* Text mit ... abschneiden */
}

.tsz-WT-Uhr {
    display: none;
    font-size: 40px;
}
.tsz-WT-Datum {
    font-size: 1.25rem;
    margin-bottom: 0rem;
}
.tsz-WT-Status {
    font-size: 1.25rem;
}



.tsz-webterminal-container {
    max-width: 700px;
}

.tsz-divider {
    position: relative;
    width: 100%;
    height: 1px; /* Adjust the height to your preference */
    background-color: black; /* Color of the line */
    opacity: 0.4;
}

    .tsz-divider::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px; /* Same height as the main divider */
        background-color: black; /* Color of the after element */
    }

.tsz-expandpanels-container .my-panels .mud-expand-panel .mud-expand-panel-header {
    padding: 0px !important;
}



.tsz-TabelleMitFixiertemHeader {
    height: -webkit-fill-available; /* Höhe des sichtbaren Bereichs */
    overflow-y: auto; /* Vertikales Scrollen ermöglichen */
}

/* Standardfilter */
.tsz-filter-container {
    width: 250px;
}


thead {
    position: sticky;
    top: 0;
    background-color: white; /* Hintergrund der fixierten Überschrift */
    z-index: 1; /* Damit die Überschrift über dem Inhalt bleibt */
}

.tsz-spalte .mud-typography-body1
{
    font-size: revert;
}



#account::before {
    content: "";
    display: block;
    background-image: url('/Zeiterfassung/Images/awato-logo.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 120px; /* Höhe des Logos */
    margin-bottom: 1rem;
}



/* Spezifische Stile für das Login-Formular innerhalb des <main>-Tags auf der Login-Seite */

/* Layout der .row im main-Tag */
main .row {
    display: flex; /* Flexbox fuer Layout */
    justify-content: center; /* Horizontale Ausrichtung der Inhalte auf der mittleren Achse */
    align-items: flex-start; /* Vertikale Ausrichtung am oberen Rand */
    padding-top: 50px; /* Abstand von oben fuer das Layout */
    margin: 0; /* Entfernt alle Standardabstaende (margin) */
    min-height: auto; /* Entfernt die Mindesthoehe von 100vh und laesst sie sich nach dem Inhalt richten */
}

/* Nur das h1 innerhalb des login-Formulars ausblenden */
main h1 {
    display: none !important; /* Verhindert, dass das h1-Tag angezeigt wird */
}

/* 2. Formularbox im Login-Bereich */
main #account {
    width: 100%; /* Formularbox nimmt volle Breite des Containers ein */
    max-width: 400px; /* Maximale Breite auf 400px begrenzt */
    padding: 20px; /* Innenabstand (Padding) fuer das Formular */
    border-radius: 8px; /* Abgerundete Ecken fuer das Formular */
    background-color: #fff; /* Hintergrundfarbe auf Weiss setzen */
}

/* 3. Eingabefelder im Login */
main #account input {
    width: 100%; /* Eingabefelder nehmen volle Breite der Formularbox ein */
    padding: 10px; /* Innenabstand innerhalb der Eingabefelder */
    margin-bottom: 15px; /* Abstand nach unten zwischen den Eingabefeldern */
    border-radius: 4px; /* Abgerundete Ecken fuer die Eingabefelder */
    border: 1px solid #ddd; /* Leichter Rand mit grauer Farbe */
}

/* 4. Floating Labels fuer das Login-Formular */
main #account .form-label {
    display: block; /* Label wird als Block angezeigt, damit es unter dem Eingabefeld steht */
    padding: 10px 0; /* Abstand oben und unten fuer das Label */
    font-weight: 500; /* Etwas dickere Schrift fuer das Label */
}

/* 5. Login-Button */
main #account button {
    width: 100%; /* Button nimmt volle Breite der Formularbox ein */
    padding: 12px; /* Innenabstand fuer den Button */
    background-color: #C51E2F; /* Hintergrundfarbe des Buttons */
    color: #fff; /* Textfarbe des Buttons */
    border: none; /* Kein Rand */
    border-radius: 4px; /* Abgerundete Ecken fuer den Button */
    cursor: pointer; /* Cursor wird zu einem Handzeiger, wenn man mit der Maus darueber faehrt */
}

/* Hover-Effekt fuer den Login-Button */
main #account button:hover {
    background-color: #991724; /* Hintergrundfarbe aendert sich beim Hover auf eine dunklere Rot-Variante */
}

/* 6. Checkbox-Layout */
main #account .checkbox {
    display: flex; /* Flexbox fuer das Layout der Checkbox */
    align-items: center; /* Vertikale Ausrichtung der Checkbox und des Textes */
    gap: 10px; /* Abstand zwischen Checkbox und Text */
}

/* Anpassungen fuer das Eingabefeld der Checkbox */
main #account .form-check-input {
    width: auto; /* Breite wird automatisch angepasst */
    height: auto; /* Hoehe wird automatisch angepasst */
    margin: 0; /* Entfernt den Standard-Abstand */
}

/* Layout des Labels fuer die Checkbox */
main #account .checkbox label {
    padding: 0; /* Kein Innenabstand fuer das Label */
    margin: 0; /* Kein Aussenabstand fuer das Label */
    border: none; /* Kein Rand */
    width: auto; /* Breite wird automatisch angepasst */
}

/* Anpassung fuer das Padding der form-control (Eingabefelder) */
.form-floating > .form-control {
    padding-top: 1.6rem; /* Platz fuer das Label oben im Eingabefeld */
    padding-bottom: 0.6rem; /* Weniger Platz unten im Eingabefeld */
}

/* Styling des Labels innerhalb von form-floating */
.form-floating > label {
    padding-left: 0.75rem; /* Abstand des Labels nach links */
    left: 0.75rem; /* Position des Labels von links */
    top: 0.35rem; /* Position des Labels von oben */
    font-size: 1rem; /* Standard-Schriftgroesse fuer das Label */
    color: #6c757d; /* Graue Farbe fuer das Label */
    pointer-events: none; /* Verhindert, dass das Label anklickbar ist */
    transition: all 0.2s ease-in-out; /* Sanfter Uebergang bei Aenderungen der Position oder Schriftgroesse */
}

/* Wenn das Eingabefeld fokussiert wird oder ein Wert eingegeben wurde */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    top: 0rem; /* Label wird nach oben verschoben */
    left: 0.5rem; /* Label wird leicht nach links verschoben */
    font-size: 0.85rem; /* Kleinere Schriftgroesse fuer das Label */
    background-color: transparent; /* Hintergrundfarbe wird transparent */
    padding: 0 0.25rem; /* Etwas Padding um das Label */
}

/* Styling der Navbar im Header */
header .navbar {
    background-color: #C51E2F !important; /* Hintergrundfarbe der Navbar auf Rot setzen */
    color: white !important; /* Textfarbe in der Navbar auf Weiss setzen */
}

/* Styling der Links in der Navbar */
header .navbar .navbar-brand,
header .navbar a,
header .navbar-nav .nav-link {
    color: white !important; /* Alle Links in der Navbar erhalten weisse Farbe */
}

/* Hover-Effekt fuer die Links in der Navbar */
header .navbar a:hover,
header .navbar-nav .nav-link:hover {
    color: #f1f1f1 !important; /* Beim Hover wird die Farbe der Links heller */
}

/* Styling des Footers */
footer.footer {
    background-color: #C51E2F !important; /* Hintergrundfarbe des Footers auf Rot setzen */
    color: white !important; /* Textfarbe im Footer auf Weiss setzen */
    padding: 1rem 0; /* Innenabstand fuer den Footer oben und unten */
    line-height: 0px; /* Kein zusaetzlicher Zeilenabstand im Footer */
}

/* Styling des Containers im Footer */
footer.footer .container {
    color: white !important; /* Textfarbe im Container auf Weiss setzen */
    text-align: center; /* Text im Footer zentrieren */
}

/* Fuegt am Ende des Containers eine zusaetzliche Textzeile mit Version hinzu */
footer.footer .container::after {
    content: "Version: 25.0.0.0"; /* Fuegt den Text "Version: 25.0.0.0" hinzu */
    display: block; /* Macht den Text zu einem Block-Element */
    color: white; /* Setzt die Farbe des Textes auf Weiss */
}

/* Weitere Styling-Eigenschaften fuer den Footer-Container */
footer.footer .container {
    color: transparent !important; /* Textfarbe auf transparent setzen */
    font-size: 1rem; /* Schriftgroesse auf 1rem setzen */
    padding: 0; /* Entfernt das Padding im Container */
}