/*
 * Übergangsschicht Bootstrap 2.3.1 -> Bootstrap 5.3
 *
 * Hält Abstände, Schriftgrößen und Farben nah am bisherigen Erscheinungsbild
 * und ersetzt Komponenten, die es in Bootstrap 5 nicht mehr gibt.
 * Wird nach bootstrap.min.css und vor den OEM-Stylesheets geladen.
 */

/* Typografie und Links wie in Bootstrap 2 */
:root {
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.4286;
    --bs-body-color: #333333;
    --bs-body-color-rgb: 51, 51, 51;
    --bs-link-color: #0088cc;
    --bs-link-color-rgb: 0, 136, 204;
    --bs-link-hover-color: #005580;
    --bs-link-hover-color-rgb: 0, 85, 128;
}

a {
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin: 10px 0;
    font-weight: bold;
    line-height: 20px;
}
h1, h2, h3 { line-height: 40px; }
h1 { font-size: 38.5px; }
h2 { font-size: 31.5px; }
h3 { font-size: 24.5px; }
h4 { font-size: 17.5px; }
h5 { font-size: 14px; }
h6 { font-size: 11.9px; }

p {
    margin: 0 0 10px;
}

.lead {
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: 200;
    line-height: 30px;
}

/* Formularfelder ohne .form-control wie bisher gestalten */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="time"], select, textarea {
    padding: 4px 6px;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border linear 0.2s, box-shadow linear 0.2s;
}

/* Maße wie in Bootstrap 2: content-box, Standardbreite 206px, Abstand nach unten */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="time"], textarea {
    display: inline-block;
    box-sizing: content-box;
    margin-bottom: 10px;
    vertical-align: middle;
}

/* Breiten ohne Spezifität, damit Klassen wie .wd30 oder Inline-Stile gewinnen (wie in Bootstrap 2) */
:where(input, textarea) {
    width: 206px;
}

:where(input[type="file"], input[type="image"], input[type="submit"], input[type="reset"],
       input[type="button"], input[type="radio"], input[type="checkbox"]) {
    width: auto;
}

:where(select) {
    width: 220px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="time"] {
    height: 20px;
}

select {
    height: 30px;
    margin-bottom: 10px;
    vertical-align: middle;
}

select[multiple], select[size] {
    height: auto;
}

input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    line-height: normal;
}

/* Felder mit Bootstrap-5-Klassen behalten ihr eigenes Maß */
input.form-control, select.form-select, textarea.form-control {
    box-sizing: border-box;
    height: auto;
    margin-bottom: 0;
}

input:focus, select:focus, textarea:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

/* Gesperrte Felder grau wie in Bootstrap 2 */
input[disabled], select[disabled], textarea[disabled],
input[readonly], select[readonly], textarea[readonly] {
    cursor: not-allowed;
    background-color: #eeeeee;
}

input[type="radio"][disabled], input[type="checkbox"][disabled],
input[type="radio"][readonly], input[type="checkbox"][readonly] {
    background-color: transparent;
}

/* Seitenränder des fluiden Containers wie in Bootstrap 2 */
.container-fluid {
    padding-right: 20px;
    padding-left: 20px;
}

/*
 * Viele Views setzen die Breite von #main_content per JavaScript passend zum Fenster.
 * Bootstrap 2 kannte keine max-width am .container, Bootstrap 5 würde sie deckeln.
 */
.container[style*="width"] {
    max-width: none;
}

/* Navbar: hell mit Verlauf wie die Standard-Navbar von Bootstrap 2 */
.navbar-background > .container-fluid {
    padding-left: 0;
}

.navbar-background {
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fafafa;
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    border-bottom: 1px solid #d4d4d4;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.navbar-background .navbar-brand {
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-background .nav-link {
    padding: 10px 15px;
    color: #777777;
    text-shadow: 0 1px 0 #ffffff;
}

.navbar-background .nav-link:hover,
.navbar-background .nav-link:focus,
.navbar-background .nav-link.show {
    color: #333333;
    text-decoration: none;
    background-color: #e5e5e5;
}

/* Menüeinträge ohne .dropdown-item (z. B. Anlagenauswahl in den Views) */
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 20px;
    color: #333333;
    white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: #0081c2;
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover {
    color: #999999;
    background: none;
    cursor: default;
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 1px;
    overflow: hidden;
    background-color: #e5e5e5;
    border-bottom: 1px solid #ffffff;
}

/* Lange Anlagenlisten scrollbar halten */
.dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
}

/* Entfallene Komponenten */
.hide {
    display: none;
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.page-header {
    padding-bottom: 9px;
    margin: 20px 0 30px;
    border-bottom: 1px solid #eeeeee;
}

.thumbnail {
    display: block;
    padding: 4px;
    line-height: 20px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
}

.thumbnail img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* Bootstrap 2 hatte schmalere Alerts */
.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
}

.alert .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

/*
 * Grid-Abstände wie in Bootstrap 2: Der Spaltenabstand ist Außenabstand (margin),
 * nicht Innenabstand (padding). Sonst stoßen umrandete Kacheln wie .overview_box
 * oder .well direkt aneinander.
 */
@media (min-width: 768px) {
    .row {
        --bs-gutter-x: 30px;
    }

    .row > [class*="col-md-"],
    .row > .row-contents > [class*="col-md-"] {
        padding-right: 0;
        padding-left: 0;
        margin-right: 15px;
        margin-left: 15px;
    }

    .row > .col-md-1,
    .row > .row-contents > .col-md-1 { width: calc(1 / 12 * 100% - 30px); }
    .row > .col-md-2,
    .row > .row-contents > .col-md-2 { width: calc(2 / 12 * 100% - 30px); }
    .row > .col-md-3,
    .row > .row-contents > .col-md-3 { width: calc(3 / 12 * 100% - 30px); }
    .row > .col-md-4,
    .row > .row-contents > .col-md-4 { width: calc(4 / 12 * 100% - 30px); }
    .row > .col-md-5,
    .row > .row-contents > .col-md-5 { width: calc(5 / 12 * 100% - 30px); }
    .row > .col-md-6,
    .row > .row-contents > .col-md-6 { width: calc(6 / 12 * 100% - 30px); }
    .row > .col-md-7,
    .row > .row-contents > .col-md-7 { width: calc(7 / 12 * 100% - 30px); }
    .row > .col-md-8,
    .row > .row-contents > .col-md-8 { width: calc(8 / 12 * 100% - 30px); }
    .row > .col-md-9,
    .row > .row-contents > .col-md-9 { width: calc(9 / 12 * 100% - 30px); }
    .row > .col-md-10,
    .row > .row-contents > .col-md-10 { width: calc(10 / 12 * 100% - 30px); }
    .row > .col-md-11,
    .row > .row-contents > .col-md-11 { width: calc(11 / 12 * 100% - 30px); }
    .row > .col-md-12,
    .row > .row-contents > .col-md-12 { width: calc(12 / 12 * 100% - 30px); }
    .row > .offset-md-1 { margin-left: calc(1 / 12 * 100% + 15px); }
    .row > .offset-md-2 { margin-left: calc(2 / 12 * 100% + 15px); }
    .row > .offset-md-3 { margin-left: calc(3 / 12 * 100% + 15px); }
    .row > .offset-md-4 { margin-left: calc(4 / 12 * 100% + 15px); }
    .row > .offset-md-5 { margin-left: calc(5 / 12 * 100% + 15px); }
    .row > .offset-md-6 { margin-left: calc(6 / 12 * 100% + 15px); }
    .row > .offset-md-7 { margin-left: calc(7 / 12 * 100% + 15px); }
    .row > .offset-md-8 { margin-left: calc(8 / 12 * 100% + 15px); }
    .row > .offset-md-9 { margin-left: calc(9 / 12 * 100% + 15px); }
    .row > .offset-md-10 { margin-left: calc(10 / 12 * 100% + 15px); }
    .row > .offset-md-11 { margin-left: calc(11 / 12 * 100% + 15px); }
}

/* Containerbreite wie in Bootstrap 2 (max. 1170px) */
@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* Anlagenauswahl: jQuery UI legt den Text in einen Block-Span, der Pfeil soll daneben stehen */
.ui-button.dropdown-toggle .ui-button-text {
    display: inline-block;
}

/*
 * Festes Grid wie in Bootstrap 2 für Spalten, die dort nicht in .row-fluid lagen
 * (Wrapper mit .row-fixed). Die Views rechnen per JavaScript mit diesen festen
 * Breiten, z. B. Grafikbreite = Fensterbreite - Seitenleiste.
 */
@media (min-width: 768px) {
    .container {
        padding-right: 0;
        padding-left: 0;
    }

    .row.row-fixed {
        margin-right: 0;
        margin-left: 0;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .row.row-fixed > [class*="col-md-"],
    .row.row-fixed > .row-contents > [class*="col-md-"] {
        margin-left: 20px;
        margin-right: 0;
    }

    .row.row-fixed > .col-md-1,
    .row.row-fixed > .row-contents > .col-md-1 { width: 42px; }
    .row.row-fixed > .col-md-2,
    .row.row-fixed > .row-contents > .col-md-2 { width: 104px; }
    .row.row-fixed > .col-md-3,
    .row.row-fixed > .row-contents > .col-md-3 { width: 166px; }
    .row.row-fixed > .col-md-4,
    .row.row-fixed > .row-contents > .col-md-4 { width: 228px; }
    .row.row-fixed > .col-md-5,
    .row.row-fixed > .row-contents > .col-md-5 { width: 290px; }
    .row.row-fixed > .col-md-6,
    .row.row-fixed > .row-contents > .col-md-6 { width: 352px; }
    .row.row-fixed > .col-md-7,
    .row.row-fixed > .row-contents > .col-md-7 { width: 414px; }
    .row.row-fixed > .col-md-8,
    .row.row-fixed > .row-contents > .col-md-8 { width: 476px; }
    .row.row-fixed > .col-md-9,
    .row.row-fixed > .row-contents > .col-md-9 { width: 538px; }
    .row.row-fixed > .col-md-10,
    .row.row-fixed > .row-contents > .col-md-10 { width: 600px; }
    .row.row-fixed > .col-md-11,
    .row.row-fixed > .row-contents > .col-md-11 { width: 662px; }
    .row.row-fixed > .col-md-12,
    .row.row-fixed > .row-contents > .col-md-12 { width: 724px; }
}

@media (min-width: 980px) and (max-width: 1199px) {
    .row.row-fixed > [class*="col-md-"],
    .row.row-fixed > .row-contents > [class*="col-md-"] {
        margin-left: 20px;
        margin-right: 0;
    }

    .row.row-fixed > .col-md-1,
    .row.row-fixed > .row-contents > .col-md-1 { width: 60px; }
    .row.row-fixed > .col-md-2,
    .row.row-fixed > .row-contents > .col-md-2 { width: 140px; }
    .row.row-fixed > .col-md-3,
    .row.row-fixed > .row-contents > .col-md-3 { width: 220px; }
    .row.row-fixed > .col-md-4,
    .row.row-fixed > .row-contents > .col-md-4 { width: 300px; }
    .row.row-fixed > .col-md-5,
    .row.row-fixed > .row-contents > .col-md-5 { width: 380px; }
    .row.row-fixed > .col-md-6,
    .row.row-fixed > .row-contents > .col-md-6 { width: 460px; }
    .row.row-fixed > .col-md-7,
    .row.row-fixed > .row-contents > .col-md-7 { width: 540px; }
    .row.row-fixed > .col-md-8,
    .row.row-fixed > .row-contents > .col-md-8 { width: 620px; }
    .row.row-fixed > .col-md-9,
    .row.row-fixed > .row-contents > .col-md-9 { width: 700px; }
    .row.row-fixed > .col-md-10,
    .row.row-fixed > .row-contents > .col-md-10 { width: 780px; }
    .row.row-fixed > .col-md-11,
    .row.row-fixed > .row-contents > .col-md-11 { width: 860px; }
    .row.row-fixed > .col-md-12,
    .row.row-fixed > .row-contents > .col-md-12 { width: 940px; }
}

@media (min-width: 1200px) {
    .row.row-fixed > [class*="col-md-"],
    .row.row-fixed > .row-contents > [class*="col-md-"] {
        margin-left: 30px;
        margin-right: 0;
    }

    .row.row-fixed > .col-md-1,
    .row.row-fixed > .row-contents > .col-md-1 { width: 70px; }
    .row.row-fixed > .col-md-2,
    .row.row-fixed > .row-contents > .col-md-2 { width: 170px; }
    .row.row-fixed > .col-md-3,
    .row.row-fixed > .row-contents > .col-md-3 { width: 270px; }
    .row.row-fixed > .col-md-4,
    .row.row-fixed > .row-contents > .col-md-4 { width: 370px; }
    .row.row-fixed > .col-md-5,
    .row.row-fixed > .row-contents > .col-md-5 { width: 470px; }
    .row.row-fixed > .col-md-6,
    .row.row-fixed > .row-contents > .col-md-6 { width: 570px; }
    .row.row-fixed > .col-md-7,
    .row.row-fixed > .row-contents > .col-md-7 { width: 670px; }
    .row.row-fixed > .col-md-8,
    .row.row-fixed > .row-contents > .col-md-8 { width: 770px; }
    .row.row-fixed > .col-md-9,
    .row.row-fixed > .row-contents > .col-md-9 { width: 870px; }
    .row.row-fixed > .col-md-10,
    .row.row-fixed > .row-contents > .col-md-10 { width: 970px; }
    .row.row-fixed > .col-md-11,
    .row.row-fixed > .row-contents > .col-md-11 { width: 1070px; }
    .row.row-fixed > .col-md-12,
    .row.row-fixed > .row-contents > .col-md-12 { width: 1170px; }
}

/*
 * Tabellen: responsivetable.css hat früher über .table auch echte Tabellen gestaltet
 * (kleine graue Schrift, Abstand oben 0). Seit der Umbenennung in .rtable gilt das hier.
 */
table.table {
    --bs-table-color: #8d8d8d;
    --bs-table-striped-color: #8d8d8d;
    --bs-table-hover-color: #8d8d8d;
    margin: 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    border-bottom: 2px solid #dddddd;
}

/* Bilder wie in Bootstrap 2 auf die Breite des Elternelements begrenzen (z. B. Wetter-Symbole in Diagrammen) */
img {
    max-width: 100%;
    height: auto;
}

/* Formular als Teil einer .row (z. B. Gerät hinzufügen): bildet keine eigene Zeile,
   seine Spalten stehen neben den anderen. Bootstrap gibt Abstände und Breite nur
   direkten Kindern der Zeile, daher hier nachgereicht (ohne Spezifität, col-* gewinnt). */
.row-contents {
    display: contents;
}
:where(.row > .row-contents) > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}