@charset "utf-8";
html {
    height: 100%;
    font-size: 2vh;
}

body {
    height: 100%;
    margin: 0;
    background-color: white;
    color: #004b86;
    /*font-family: Calibri, Helvetica, Arial, Geneva, sans-serif;*/
    font-family: Montserrat, sans-serif;
}

.hidden {
    display: none !important;
}

button {
    color: white;
    background-color: #004b86;
    padding: 11px;
    border-radius: 1ex;
    padding-left: 1.5ex;
    padding-right: 1.5ex;
}

#settings {
    color: white;
    background-color: #004b86;
    padding: 11px;
    border-radius: 1ex;
    padding-left: 1.5ex;
    padding-right: 1.5ex;
}
.table {
    display: table;
    border-collapse: collapse;
}

.table td{
    padding:5px;
}
.table div {
    display: table-row;
}
.table div div {
    display: table-cell;
    padding: 11px;
    border: none;
}
.tableHeader {
    font-weight: bold;
    border: none;
}
.tableBody {
    border: 1px solid #004b86;
}
.tableBodyBox {
    border: 1px solid #004b86;
    cursor: zoom-in;
}
.tableBodyClickable {
  /*  border: 1px solid #004b86;*/
    cursor: zoom-in;
}
.Clickable {
  /*  border: 1px solid #004b86;*/
    cursor: zoom-in;
}

.wrapper {
    position: relative;
    min-height: 100%;
}

.alert_message {
    border: 5px solid red;
    border-radius: 10px;
    color:red;
    font-weight: bold;
}

/***********************************/
/******** Kopfzeile ****************/
/***********************************/

div.header {
    display: flex;
    align-items: center;
    border-collapse: collapse;
    background-color: white;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 75px;
    overflow: hidden;
    box-shadow: 0 0ex 1ex rgba(0, 0, 0, 0.2);
    z-index: 999;
}

div.headerLeft {
    flex: 0 0 auto;
    /*width: 33%;*/
    text-align: left;
    padding: 20px;
}

div.headerRight {
    flex: 0 0 auto;
    /*width: 33%;*/
    text-align: right;
    padding: 20px;
}

div.headerMiddle {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 4vh;
    flex-direction: column;
  
  position: relative;
}

img.header {
    display: block;
    /*float: right;*/
}

/***********************************/
/******** Inhalt *******************/
/***********************************/

#pricelist{
    background-color: light blue;
    border: solid 1px black;
    Margin-bottom: 5px;
}

div.tableHeader {
    background-color: lightgrey;
}
div.main {
    margin: 0;
    padding: 1em 1em 3.5em 1em;
    text-align: center;
}

div.mainIndex {
    display: flex;
    justify-content: center;
    margin-top: 141px;
}

div.content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 120px;
}

/* Top navigation below header */
.topnav {
    position: fixed;
    top: 75px;
    left: 0;
    right: 0;
    height: 52px;
    background: linear-gradient(90deg,#0b4f7a,#0b7a4f);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    z-index: 1001; /* above header */
    box-shadow: 0 6px 18px rgba(3,10,24,0.08);
}
.topnav a {
    color: #fff;
    text-decoration: none;
    padding: 10px 14px;
    margin-right: 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
     transition: background-color 0.3s ease;
}
.topnav a:hover,
.topnav a.active {
    background: rgba(255,255,255,0.08);
}
.topnav .spacer { flex: 1 1 auto; }

div.overviewClient,
div.overviewLocation,
div.overviewBox,
div.SupportMail {
    margin: 0 11px;
}

div.overviewBooking {
    position: fixed;
    width: 777px;
    border: 1px solid #004b86;
    background-color: white;
}
div.overviewSettings {
    position: fixed;
    width: min(90vw, 920px);
    max-height: 90vh;
    border: 1px solid #d0d9e6;
    background-color: white;
    overflow: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
    border-radius: 14px;
}

div.SupportMail {
    position: fixed;
    width: 50vw;
    border: 3px solid #004b86;
    background-color: yellowgreen;
}

div.overviewLocation div.table {
    width: 100%;
}

div.overviewBox div.table {
    width: 100%;
}

div.boxHeader,
div.bookingHeader {
    font-weight: bold;
    padding: 11px;
}

div.boxEmergencyOpening {
    padding: 11px;
    border: 5px solid red;
}

div.tableBookings,
div.tableOpenings {
    display: table;
    margin: 11px 0;
}

div.tableBookings div {
    display: table-row;
    cursor: cell;
}

div.tableOpenings div {
    display: table-row;
}

div.tableBookings div div,
div.tableOpenings div div {
    display: table-cell;
    padding: 0 11px;
    vertical-align: middle;
}

div.closeDiv {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 39px;
    background-color: #004b86;
    color: white;
    cursor: pointer;
}

.admin-user-table,
.admin-user-locations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.45vh;
    margin-top: 12px;
}

.admin-user-table th,
.admin-user-table td,
.admin-user-locations-table th,
.admin-user-locations-table td {
    border: 1px solid #e2e8f0;
    padding: 11px 12px;
    vertical-align: top;
}

.admin-user-table th,
.admin-user-locations-table th {
    background-color: #f3f6fb;
    color: #1f3a5a;
    text-align: left;
    font-weight: 700;
}

.admin-user-table tr:nth-child(even),
.admin-user-locations-table tr:nth-child(even) {
    background-color: #fafcff;
}

.admin-user-table tr:hover,
.admin-user-locations-table tr:hover {
    background-color: #eef4ff;
}

.admin-user-table tr.user-row {
    cursor: pointer;
}

.admin-user-table tr.user-row.selected {
    outline: 2px solid #2f6cc4;
    outline-offset: -2px;
    background-color: #d8e6ff;
}

.location-chip {
    display: inline-block;
    background-color: #dceeff;
    color: #10386d;
    border-radius: 14px;
    padding: 5px 12px;
    margin: 2px 2px 2px 0;
    font-size: 0.95em;
    border: 1px solid #a4c7f5;
}

.location-chip--all {
    background-color: #004b86;
    color: #ffffff;
    border-color: #003a6d;
}

.user-info-block,
.time-info-block {
    display: grid;
    gap: 4px;
}

.user-info-line,
.time-info-line {
    line-height: 1.4;
    color: #203248;
}

.user-info-label,
.time-info-label {
    font-weight: 700;
    color: #102639;
    min-width: 100px;
    display: inline-block;
}

.overlay-card {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 14px;
    border: 1px solid #dbe3ec;
}

.overlay-card h2 {
    margin: 0 0 12px 0;
    font-size: 2.1vh;
    color: #002f5f;
}

.overlay-card p {
    margin: 0 0 18px 0;
    color: #34495e;
}

.button.small {
    padding: 8px 14px;
    font-size: 1.4vh;
}

button.button.reset {
    background-color: #667789;
}

.success_message {
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #e6fbf0;
    color: #186c4d;
}

.alert_message {
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #fff1f1;
    color: #a52a2a;
    border: 1px solid #f5c0c0;
}

/***********************************/
/******** Login ********************/
/***********************************/

form.login {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    justify-items: center;
    flex-direction: column;
}

form.login div.row {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
}

form.login div.label {
    width: 5rem;
}

form.login div.input {
    width: 10rem;
    margin-left: 0.3rem;
}

input.loginbutton {
    margin-top: 0.8rem;
    margin-bottom: 3ex;
    width: 8rem;
}

p.loginError {
    color: red;
}

/***********************************/
/********** Fußzeile ***************/
/***********************************/

div.footer {
    /*position: absolute;*/
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
    box-shadow: 0 0ex 1ex rgba(0, 0, 0, 0.2);
    z-index: 999;
    padding: 0.6rem;
}

div.footer a {
    color: white;
    text-decoration: none;
}

/***************************************/
/********** Tabs ***************/
/***************************************/

.container {
    max-width: 100%;
    margin: 20px auto;
    border: 1px solid #ccc;
    margin-top: 140px; /* header (75) + topnav (52) + gap */
  }
  
  /* Tab-Styles */
  .tab-container {
    overflow: hidden;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
  }
  
  .tab {
    float: left;
    cursor: pointer;
    font-size: 15px; /* reduced for professional look */
    border-right: 1px solid #ccc;
    background-color: inherit;
    margin: 20px;
     padding: 10px 20px;
     border-radius: 8px 8px 0 0;
     transition: background-color 0.3s ease;
  }
  
  .tab:hover {
    background-color: #ddd;
  }
  
  .tab.active {
    background-color: white;
  }
  
  .tab-content {
    display: none;
    padding: 20px;
  }
  
  /* Zeigen des aktiven Tabs */
  .tab-content.active {
    display: block;
  }

/***************************************/
/********** TableSorter ***************/
/***************************************/

.tablesorter-dropbox {
    font-size: 12px !important;
}
  .tablesorter-dropbox .header {
    font-size: 12px; /* Schriftgröße kleiner */
  }
  
  .tablesorter-dropbox th, .tablesorter-dropbox td {
    min-width: 30px; /* Minimale Breite für Tabellenspalten */
    font-size: 12px; /* Schriftgröße kleiner */
  }
/***************************************/
/********** Statusfarben ***************/
/***************************************/

.heartbeatOk {
    background-color: lime;
    color:green;
}
.heartbeatOkActive {
    background-color: limegreen;
}
.heartbeatMalfunction {
    background-color: orange;
    color: orange;
}
.heartbeatMalfunctionActive {
    background-color: sandybrown;
}
.heartbeatFailure {
    background-color: red;
    color:red !important;
}
.heartbeatFailureActive {
    background-color: crimson;
}
.boxStatusFree {
    background-color: white;
}
.boxStatusFreeActive {
    /*background-color: limegreen;*/
    border: 3px solid orange !important;
    z-index:2;
}
.boxStatusOccupied {
    background-color: blue;
    color: white;
    font-weight: bold;
    z-index: 1;
}
.boxStatusDisabled {
    background-color: gray;
    color: white;
    /*font-weight: bold;*/
}
.boxStatusReserved {
    background-color: orange;
    color: white;
    /*font-weight: bold;*/
}
.boxStatusBookBuffer {
    background-color: lightblue;
    color: black;
    /*font-weight: bold;*/
}
.boxStatusOccupiedActive {
    /*background-color: crimson;*/
    border: 4px solid orange;
    background-color: blue;
    color: white;
    font-weight: bold;
}
.boxControlReceived,
.boxControlConfirmed {
    background-color: lime;
}
.boxControlNotReceived,
.boxControlNotConfirmed {
    background-color: red;
}
.boxinfotext {
    font-size: 2vh;
}
.prespan {
    border: black 1px solid;
    margin: 1px;
    padding: 5px;
    display: inline-block;
    width: 300px;
    font-size: 1vh;
}

#setStandort {
    width: 100%;
    border-collapse: collapse;
  }
  
  #setStandort th, #setStandort td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #setStandort th {
    background-color: #f2f2f2;
    text-align: left;
  }
  
  #setStandort td:first-child {
    background-color: #e0e0e0; /* Grau für die erste Spalte */
  }