/* Variablendefinitionen */
:root {
    --renewin-white: #ffffff;
    --renewin-orange: #ef7c33;
    --renewin-blue: #005caa;
    --renewin-black: #000000;
}

/* Grundlegende Stile */
body {
    background-color: var(--renewin-white);
    color: var(--renewin-blue); /* Standardtextfarbe */
}

/* Stile für spezifische Klassen */
.primary-color {
    color: var(--renewin-blue);
}

.accent-color {
    color: var(--renewin-orange);
}

.background-color {
    background-color: var(--renewin-blue);
}

/* Button-Stile */
.button-primary {
    background-color: var(--renewin-orange);
    color: var(--renewin-white);
}

/* Stile für die Tabelle */
.table th, .table td {
    vertical-align: middle; /* Zentriert den Inhalt vertikal */
}

.btn-edit,
.btn-add {
    background-color: transparent;
    border: none;
    color: var(--renewin-blue);
    /* Zentriert das Icon im Button */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-edit:hover,
    .btn-add:hover {
        background-color: transparent;
    }

    .btn-edit:focus,
    .btn-add:focus {
        outline: none;
        box-shadow: none;
    }

/* Zusätzliche Stile */
.position-relative {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

/* Stile für die Add Button, die nicht Teil von .btn-edit sind */
.btn-add {
    color: var(--renewin-orange);
    margin-top: 22px;
}

/* Stile für größere Bildschirme */
.table-responsive-md {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* Stile für kleine Bildschirme (einschließlich iPad im Hochformat) */
@media (max-width: 1025px) {
    .table-responsive-md {
        display: none; /* Versteckt die horizontale Tabelle */
    }

    .mobile-view {
        display: block; /* Zeigt das mobile Layout an */
    }

    .btn-edit {
        /* Anpassungen für mobile Ansicht */
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .bi-pencil {
        /* Verkleinern der Icons für mobile Ansicht */
        font-size: 1.2rem;
    }
}

/* Stile für die horizontale Ansicht auf iPads und größeren Geräten */
@media (min-width: 577px) {
    .mobile-view {
        display: none; /* Versteckt das mobile Layout */
    }

    .table-responsive-md {
        display: block; /* Zeigt die horizontale Tabelle an */
        overflow-x: hidden;
    }
}

.option {
    color: var(--renewin-black);
    background-color: var(--renewin-white);
    padding: .375rem .75rem;
}

.option:hover {
    background-color: var(--renewin-orange);
}

.modal-dialog {
    max-height: 40%;
}

.toast-container-override {
    z-index: 999999 !important;
}

.modal {
    --bs-modal-zindex: 20 !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.loading-div {
    color: var(--renewin-blue);
    background-color: var(--renewin-white);
}

@media (max-width: 576px)  {
    .modal {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: var(--bs-box-shadow);
    }
}

@media (max-width: 640px) {
    #logout-bar {
        visibility: hidden;
        height: 0px;
    }
}

#canvas {
    width: 100%;
    margin: auto;
}

#wartungs-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 30%;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#wartungs-img-detailed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#components-reconnect-show, #components-reconnect-failed, #components-reconnect-rejected, #components-reconnect-modal {
    display: none;
}