/*
    Webform example
    ===============

    Dunkelgrün: #7A9E19
    Grün: #95C11F
    Hellgrün: #A6D723

    Dunkelorange: #c45b05
    Orange: #EB6E07
    Hellorange: #e9822f


*/

/*
    Webformulare
    Diese Änderungen beziehen sich auf die öffentlichen Webformulare und die Formulare, welche man per E-Mail zum Kunden senden kann
*/
.webform .background {
    position: fixed; /* Position am Browserfenster fixieren und beim Scrollen beibehalten */
    background-image: url(celos_building.png);
    background-repeat: no-repeat;
    width: 780px; /* Breite und Höhe des Bildes muss angegeben werden */
    height: 438px;
    bottom: 0; /* Unten rechts mit einem Abstand von 0 positionieren */
    right: 0;
}

.webform .description {
    border-color: #c45b05 !important; /* DunkelOrange */
}

.webform h4 {
    border-color: #EB6E07 !important; /* Orange */
}

.field-description {
    border-left: 1px dashed #c45b05 !important;
    padding: 5px 8px;
}

.dx-form-group-content {
    border-top-color: #c45b05 !important;
}

.dx-field-item-label-text {
    font-weight: 500;
}

/* Warteanzeige beim Laden des Webformulars */
.sk-cube-grid .sk-cube {
    background-color: #c45b05 !important; /* Dunkelorange */
}

/* 
    Bilder
    Bei Änderungen sollte eine neue Bilddatei mit anderem Namen angelegt werden, da sonst weiterhin die
    Datei aus dem Browser-Cache geladen wird.
*/

.logo {
    background-image: url(logo_white_small.png) !important;
    background-color: #eceff1; /* hellgrau */
    background-size: contain; /* oder cover, je nach gewünschtem Effekt */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    background-position: center; /* Zentriert das Bild */
    max-height: 50px; /* Setzt eine maximale Breite, falls nötig */
    margin-top: 5px; /* Margin-Wert, um das Feld nach unten zu verschieben */
}

.login-logo {
    background-image: url(logo_lg.png) !important;
    background-size: contain; /* oder cover, je nach gewünschtem Effekt */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    background-position: center; /* Zentriert das Bild */
    width: 100%; /* Passt die Breite des Logos an die Breite des Containers an */
    max-width: 246px; /* Setzt eine maximale Breite, falls nötig */
    height: auto; /* Erhält das Seitenverhältnis des Logos */
}


.login-form {
    background-image: url(background-8422123.png) !important;
    background-size: cover; /* Skaliert das Bild, um das gesamte Element zu bedecken */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    height: 100vh; /* Setzt die Höhe des Elements auf 100% der Ansichtshöhe */
    width: 100vw; /* Setzt die Breite des Elements auf 100% der Ansichtsbreite */
    position: fixed; /* Fixiert das Element im Hintergrund */
    top: 0;
    left: 0;
}

.login-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Halbtransparente weiße Überlagerung */
    z-index: -1; /* Stellt sicher, dass die Überlagerung hinter dem Inhalt liegt */
}

.form-signin {
    border: 2px solid #4CAF50; /* Grüner Rahmen */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 20px; /* Innenabstand */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    background-color: #fff; /* Weißer Hintergrund */
    max-width: 400px; /* Maximale Breite des Formulars */
    margin: 0 auto; /* Zentriert das Formular horizontal */
    position: relative; /* Position relativ setzen */
    z-index: 1; /* Stellt sicher, dass das Formular über dem Hintergrundbild liegt */
}

.form-signin .form-group {
    margin-bottom: 15px; /* Abstand zwischen den Eingabefeldern */
}

.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="submit"] {
    border-radius: 5px; /* Abgerundete Ecken für Eingabefelder und Button */
    position: relative; /* Sicherstellen, dass die Eingabefelder relativ positioniert sind */
    z-index: 2; /* Stellt sicher, dass die Eingabefelder über dem Formular liegen */
}


/* Grundlage */
.app-wrapper.desktop {
    font-family: Roboto, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/* Kopfleiste */
.secondary-navbar {
    background-color: #EB6E07; /* Orange */
}

    /* Kopfleiste - ausgewähltes Element */
    .secondary-navbar a.active {
        background-color: #e9822f; /* Hellorange */
        border-color: #EB6E07; /* Orange */
    }

.pattern-item {
    border-bottom-color: #EB6E07 !important;
}

/* Kopfleiste - Cursor über Element */
.secondary-navbar a:hover {
    background-color: #e9822f; /* Hellorange */
    border-color: #e9822f; /* Hellorange */
}

/* Tabelle - ausgewählte Zeile */
tr.selectedTicket td:first-child {
    border-left-color: #c45b05; /* Dunkelorange */
}

/* Tabellen - Spaltenauswahl und Aktualisieren Buttons */
.table-settings, .table-reset {
    background-color: #c45b05 !important; /* Dunkelorange */
}

/* Ticketüberschrift */
.ticketHeader-v2 {
    border-color: #EB6E07; /* Orange */
}

/* Ticket - ausgewählter Menüpunkt */
.navbar-link-wrapper a.active {
    background-color: #EB6E07; /* Orange */
}

/* Eingabefelder */
.inline-form input, .inline-form select, .datetime-picker {
    border-color: #EB6E07; /* Orange */
}

/* Kleine Überschriften */
h5 {
    background-color: #c45b05; /* Dunkelorange */
}


#quickfilter {
    border: 1px solid #4CAF50; /* Grüner Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    padding: 5px; /* Innenabstand */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
    margin-top: -10px; /* Negativer Margin-Wert, um das Feld nach oben zu verschieben */
}