/*
seitenleiste heller machen
login hintergrundfarbe anpassen
eingeloggt bleiben checkbox
*/

/* ======================================
              GENERAL LAYOUT
   ====================================== */

.row {
    max-width: none;
}

a {
    color: rgb(202, 1, 1);
}

a:hover {
    color: rgb(140, 1, 1);
}

h2 {
    font-size: 2em;
}

.no-padding-left {
    padding-left: 0;
}

table tr th, table tr td {
    padding: 0.3625rem 0.625rem;
}

/* ======================================
                  LOGIN
   ====================================== */

body.login {
    background: rgb(202, 1, 1);
    height: 100vh;
}

.login-wrapper {
    background: #fff;
    width: 450px;
    position: relative;
    top: 40%;
    margin: -250px auto 0;
    border-radius: 15px;
    padding: 15px 15px 0;
}

.login-wrapper h1 {
    color: #fff;
    line-height: 70px;
    font-size: 0;
    background-size: contain;
    max-width: 315px;
    background: url(../img/logo.png) no-repeat center center;
    margin: 0 auto;
    background-size: 100%;
}

/* ======================================
              HEADER MAIN
   ====================================== */

#topbar {
    background: #fff;
    color: rgb(202, 1, 1);
}

#topbar > p {
    margin: 0;
    padding-left: 2em;
}

#nav-main {
    background: rgb(202, 1, 1);
    height: 60px;
}

#header-main {
    background: rgb(202, 1, 1) !important;
}

/* ======================================
              MAIN NAVIGATION
   ====================================== */

.top-bar .name {
    padding-left: 2em;
}

.top-bar .name h1,
.top-bar .name h2 {
    color: #fff;
    margin:0;
    padding:0;
    line-height: normal;
}

.top-bar .name h1 {
    font-weight: bold;
    font-size: 1.4em;
    padding-top: 0.35em;
}

.top-bar .name h2 {
    font-size: 1em;
}

.top-bar.expanded,
.top-bar.expanded > .title-area{
    background: none !important;
}

.top-bar-section > ul{
    height: 100%;
}

.top-bar-section > ul > li{
    height: 60px;
    background: none !important;
}

.top-bar-section > ul > li > a{
    line-height: 60px !important;
    height: 60px;
    background: none !important;
}

.top-bar-section > ul > li > a:hover{
    background: rgb(165, 20, 0) !important;
}

.top-bar-section .has-dropdown > a:after {
    top: 2.15625rem;
}

.top-bar-section .has-dropdown .active > a {
    background: rgb(165, 20, 0) !important;
}

/* ======================================
              CONTENT CONTAINER
   ====================================== */

#content-container {
    display: flex;
    min-height: 400px;
}

#content-container:before {
    display: none;
}

label.inline {
    margin: 0;
    padding: 0.4rem 0;
}

.textarea label.inline {
    padding: 0 !important;
}


/* ======================================
              SIDE NAVIGATION
   ====================================== */

#nav-side {
    background: #333;
    align-items: stretch;
}

#nav-side a {
    color: #fff;
    font-weight: bold;
}

#nav-side li:hover,
#nav-side li.active{
    background: #222;
}

/* ======================================
             CONTENT
   ====================================== */

#content-main {
    padding-top: 20px;
}

#content-container table tr th,
#evaluation table tr th{
    background:#c1c1c1;
}

#content-container table tr th,
#content-container table tr td,
#evaluation table tr th,
#evaluation table tr td{
    font-size: 0.775rem;
    padding: 0.2625rem 0.225rem;
}

table tr.even, table tr.alt, table tr:nth-of-type(2n) {
    background: #E8E8E8;
}

.row-green {
    background: #CBF39F !important;
}

.sortable > tr {
    border-bottom: 1px dashed #333;
}

.sortable > tr:last-child {
    border-bottom: none;
}

.ui-sortable-helper {
    background: #ff0000 !important;
}

.date > select {
    width: auto;
    padding: 0 15px;
    margin-right: 5px;
}

#content-container input[type="text"],
#content-container input[type="password"],
#content-container input[type="email"],
#content-container input[type="tel"],
#content-container input[type="number"],
#content-container select {
    padding: 0.2rem 0.5rem !important;
    width: 18em !important;
    margin: 0.4rem 0 !important;
    font-size: 0.8em;
}

#content-container input[type="text"],
#content-container input[type="password"],
#content-container input[type="email"],
#content-container input[type="tel"],
#content-container input[type="number"]{
    height: 1.5125rem !important;
}

textarea[rows] {
    height: 3em !important;
    width: 18em !important;
}

#content-container select {
    padding: 0.2rem 1rem 0.2rem 0.5rem !important;
    width: auto;
    height: auto !important;
}

#content-container select {
    padding: 0.1rem 1rem 0.1rem 0.5rem !important;
    width: auto;
    height: auto !important;
}

fieldset {
    margin-top:0
}

.button.tiny,
button.tiny {
    font-size: 0.8rem;
}

button, .button {
    border-radius: 3px !important;
    background: #8c8c8c;
}

button:hover, .button:hover {
    background: rgb(62, 62, 62);
}

button[type="submit"],
.button[type="submit"]{
    background: rgb(202, 1, 1)
}

table.clickable tr {
    cursor: pointer;
}

.datepicker thead tr:first-child th {
    color: #fff;
    background: rgb(202, 1, 1);
}

.datepicker thead tr:nth-child(2) th {
    color: #333;
    background: rgb(199, 199, 199);
}

.datepicker td span.active,
.datepicker td.active.day,
.datepicker td.active.year {
    background: #CA0101;
    color: #fff;
}

.container-search-submit{
    height: 25px !important;position: relative;top: 2px;line-height: 5px;
}

/* ======================================
             CALCULATOR
   ====================================== */

.calculator-open {
    position: absolute;
    top: -61px;
    margin-left: 16.2rem;
    padding: 12px 12px !important;
}

.calculator-open > i {
    font-size: 14px;
}

.calc-open-box {
    height: 0 !important;
}

.calculator-result {
    font-size: 220%;
    margin-right: 30px;
}

.calculator-space {
    width: 83px;
}

.calculator-row button {
    font-size: 24px;
    color: #333;
    height: 60px;
    width: 83px;
    border: 1px solid #bdb5b5;
    background: #fff;
}

.calculator-focussed {
    background: #f6f6f6;
}

.calculator-row .calculator-ctrl {
    width: 83px;
    font-size: 18px;
}

.calculator-row button:hover {
    background: inherit !important;
}

.calculator-row .calculator-ctrl {
    background-color: #ca0101;
    color: #fff;
}

.calculator-row .calculator-ctrl:hover {
    background: #ca0101 !important;
}

.calculator-result {
    border: 1px solid #ca0101;
}
    /* ======================================
                 SEARCH
       ====================================== */

.search-bar {
    padding-top: 0.3rem;
    width: 100%;
    overflow: hidden;
}

.search-bar .columns{
    float:none !important;
    width: 100%;
}

.search-bar label {
    color:#fff;
    text-align: left;
}

.search-bar input,
.search-bar select{
    padding-bottom: 0;
    margin-bottom: 0.2rem;
    width: 100% !important;
    display: inline-block;
}

.search-bar button,
.search-bar input[type="submit"] {
    margin-top: 0.3rem;
}

/* ======================================
             EVALUATION
   ====================================== */

#evaluation p {
    margin: 0.1em 0;
    font-size:0.95rem;
}

#evaluation table tr th,
#evaluation table tr td {
    padding: 0 0.225rem
}

#evaluation table tr td{
    border-bottom: 1px solid #333;
}

#evaluation table tr:last-child td {
    border-bottom: none;
}

.tour-table td > .columns {
    padding-left:0;
    margin-left:0;
}


.tour-print {
    height: auto !important;
}

.tour-print h2 {
    color: rgb(202, 1, 1);
}


@media print {

    .tour-print h2 {
        color: rgb(202, 1, 1) !important;
    }

    thead {
        display: table-header-group;
    }

    table tr.even, table tr.alt, table tr:nth-of-type(2n) {
        /*background: #CECECE !important;*/
    }

    .print-button {
        display: none;
    }
}

input.red { color: rgb(202, 1, 1); font-weight: bold; }
.red { color: rgb(202, 1, 1); font-weight: bold; }

/* Tourenplan/Container: Adresssuche & Kartenanzeige
   Formular links, Karte rechts - nebeneinander im selben fieldset-Kasten.
   Flexbox statt Foundation-Spalten, damit kein grosser Leerraum entsteht. */
/* Der Kasten umschliesst nur Formular + Karte und geht NICHT ueber die ganze
   Bildschirmbreite (begrenztes Viereck wie in der Kundenvorlage). */
.tour-edit-fieldset {
    /* Kasten gedeckelt: bleibt ein begrenztes Viereck und geht nicht ueber den
       ganzen Monitor. Auf schmalen Screens schrumpft er auf 100%. */
    max-width: 1040px;
}
#tour-edit-row {
    display: flex;
    flex-wrap: nowrap; /* Karte bleibt IMMER neben dem Formular, rutscht nie darunter */
    align-items: flex-start;
    gap: 1.5rem;
}
/* Wachsen NICHT ueber den gedeckelten Kasten hinaus, duerfen auf kleinen
   Aufloesungen aber SCHRUMPFEN (flex-shrink 1), damit sie nebeneinander
   bleiben statt umzubrechen. */
#tour-form-col { flex: 0 1 380px; min-width: 240px; }
/* margin-left haelt die Karte vom (leicht ueberstehenden) Taschenrechner-Icon frei */
#tour-map-col { flex: 1 1 540px; min-width: 220px; margin-left: 40px; }
/* Verschachtelte Foundation-Negativmargins neutralisieren, Felder/Read-only-Bloecke
   fuellen ihre Spalte, Eingabefelder fuellen ihre Breite. */
#tour-form-col .row { margin-left: 0; margin-right: 0; }
#tour-form-col .row > .small-8.columns,
#tour-form-col > .small-8.columns { width: 100%; }
#tour-form-col input:not([type="checkbox"]):not([type="radio"]),
#tour-form-col select,
#tour-form-col textarea { width: 100%; }
/* Lange Labels (z. B. "Rechnungs-Anschrift") umbrechen statt abschneiden, wenn
   die Formularspalte auf kleinen Aufloesungen schrumpft. */
#tour-form-col label { white-space: normal; overflow-wrap: break-word; }
.tour-map-hint { font-size: 0.85rem; color: #555; margin-bottom: 0.5rem; }
.tour-map {
    width: 100%;
    height: 420px;
    border: 1px solid #ccc;
    background: #eef1f4;
}
/* Aktionsleiste unter der Karte: Button rechtsbündig */
.tour-map-actions { margin-top: 0.5rem; text-align: right; }
/* Autocomplete-Vorschläge über Foundation-Elementen halten */
.pac-container { z-index: 100000; }