html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.hint-message {
    background-color: #f0f0f0;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    text-align: left;
}

.response-message {
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    width: 60%;
}

    .response-message.employee {
        background-color: #e0ffe0;
        margin-left: auto;
        text-align: right;
    }

    .response-message.company {
        background-color: #e0e0ff;
        margin-right: auto;
        text-align: left;
    }

.input-box {
    margin-top: 20px;
}

.card.employee {
    background-color: #e8f4e9; /* Ein sanfter Grünton */
    border: 1px solid #c0e0c5; /* Eine etwas dunklere grüne Umrandung für Kontrast */
}

.card.company {
    background-color: #fce8e8; /* Ein sanfter Rotton */
    border: 1px solid #f0c0c0; /* Eine etwas dunklere rote Umrandung für Kontrast */
}

.card.employee .card-body {
    background-color: #e8faf4; /* Ein blasserer Grünton */
    border-top: 1px solid #b0d8c2; /* Eine etwas dunklere grüne Umrandung für Kontrast */
    border-bottom: 1px solid #b0d8c2; /* Eine etwas dunklere grüne Umrandung für Kontrast */
}

.card.company .card-body {
    background-color: #fdf1f1; /* Ein noch blasserer Rotton */
    border-top: 1px solid #f5d5d5; /* Eine etwas dunklere rote Umrandung für Kontrast */
    border-bottom: 1px solid #f5d5d5; /* Eine etwas dunklere rote Umrandung für Kontrast */
}


/*Jetzt kommen die Styles für Priorität und Status des Hints*/

.priority-label,
.status-label {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    text-transform: capitalize;
}

    /* Priority Styles */
    .priority-label.irrelevant {
        background-color: #a3a3a3; /* grau */
    }

    .priority-label.low {
        background-color: #ffc107; /* gelb */
    }

    .priority-label.medium {
        background-color: #ff9f00; /* orange */
    }

    .priority-label.high {
        background-color: #ff5722; /* rot */
    }

    .priority-label.extreme {
        background-color: #b71c1c; /* dunkelrot */
    }

    /* Status Styles */
    .status-label.eingegangen {
        background-color: #9e9e9e; /* grau */
    }

    .status-label.bestaetigt {
        background-color: #4caf50; /* grün */
    }

    .status-label.inbearbeitung {
        background-color: #ffeb3b; /* gelb */
    }

    .status-label.abgeschlossen {
        background-color: #388e3c; /* dunkelgrün */
    }




    .priority-label.not-set,
    .status-label.not-set {
        background-color: #2196f3; /* blau */
    }

.paragraph-spacing {
    margin-bottom: 5px; /* Für das Impressum */
    margin-top: 2px;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Merriweather-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PTSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Georgia';
    src: url('../fonts/georgia.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana';
    src: url('../fonts/verdana.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Slabo';
    src: url('../fonts/Slabo27px-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSans3-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Flama';
    src: url('../fonts/Flama-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Flama Book';
    src: url('../fonts/Flama-Book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Flama Light';
    src: url('../fonts/Flama-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Flama Bold';
    src: url('../fonts/Flama-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* für den Swal-Aufruf bei Nutzung von ChatGPT */

.swal-text-left {
    text-align: left;
}

    .swal-text-left h2, .swal-text-left h3, .swal-text-left h1, .swal-text-left h4 {
        text-align: left;
    }


/* Verstecktes File-Upload*/


/*#hintFilesInput {
    display: none;
}

#customFileUploadButton {*/ /* Stil für Ihren benutzerdefinierten Button */
/*}*/

/* Für das Cetonis Design */

/*#header:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #fff transparent transparent;
    position: absolute;
    z-index: 99;
}*/

.header-before::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #fff transparent transparent;
    position: absolute;
    z-index: 99;
}

.img-fluid.w-100 {
    max-width: 100%;
    max-height: 33vh; /* Setzt die maximale Höhe auf ein Drittel der Bildschirmhöhe */
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover; /* Sorgt dafür, dass das Bild den verfügbaren Raum ausfüllt, ohne seine Seitenverhältnisse zu verzerren */
}


body, html {
    margin: 0;
    padding: 0;
}

/* Stil für den Banner-Hintergrund des H1-Elements */
#custom-h1-container {
    background-color: #f0f0f0;
    padding: 40px 0; /* Etwas Raum nach oben und unten */
}

/* Spezifischer Stil für das H1-Element */
#custom-h1 {
    text-align: center;
}

/* Optional: Responsive Anpassungen */
@media (max-width: 768px) {
    #custom-h1-container {
        padding: 5px 0;
    }
}

.h5-Intro {
    margin-top: 40px; /* Größerer Abstand oben */
    margin-bottom: 20px; /* Kleinerer Abstand unten */
}

.p-Intro {
    margin-top: 10px; /* Kleinerer Abstand oben */
    margin-bottom: 10px; /* Kleinerer Abstand unten */
    font-size: 1.15em;
}

.custom-toggler.navbar-toggler {
    border-color: white !important;
}

.label-container {
    display: inline-flex;
    align-items: center;
}

/* Klasse für Unsichtbarkeit eines Elementes bei der Berechnung */

.invisib {
    display: none !important;
}

.secrinvisib{
    display: none !important;
}

.toggleinvisib {
    display: none !important;
}

.headlineborder {
    border-top: 2px solid #fdf1f1;
    height: 1px;
    margin: 15px auto 0;
    position: relative;
    width: 50%;
}

.headlineborder:before {
    background-color: #fff;
    content: "";
    height: 6px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    top: -4px;
    width: 50px;
    background-color: #e32549;
}

.css-info-icon::before {
    content: "i";
    font-size: 16px;
    font-weight: bold;
    color: white; /* oder eine andere Farbe */
    margin-right: 5px;
}

/*So wird ein Text fett gesetzt*/

.custom-strong {
    font-family: 'Flama Book', sans-serif;
    letter-spacing: 1.2px;
    font-weight: bold;
}

.gray-row {
    background-color: #f2f2f2; /* Hier kannst du die gewünschte Hintergrundfarbe einstellen */
}

/* Modal-Grundstil */
.modal-custom {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content-custom {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.close-modal-custom {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-modal-custom:hover,
.close-modal-custom:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.customtextcolor {
    color: #0f1d3f; /* Custom text color */
}

.custom-select {
    appearance: none; /* Entfernt die Standard-Styles des Browsers */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M6%2011L0%205h12z%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%2F%3E%3C/svg%3E'); /* SVG-Pfeil */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
    border: 1px solid #ced4da;
    padding-right: 2rem; /* Platz für den Pfeil */
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}


.hr-thick-line {
    height: 5px; /* Stellt die Dicke des <hr> Elements ein */
    background-color: #000; /* Optional: Ändert die Farbe des Linie, standardmäßig ist sie grau */
    border: none; /* Entfernt die standardmäßige Rahmenlinie */
}