body {
    font-family: "Arial";
    font-size: 14px;
}

table {
    border-collapse: collapse;
}

@media screen {
    .toolsHeadline {
        font-size: 20px;
        font-weight: bold;
    }
}

@media print {
    .toolsHeadline {
        display: none !important;
    }
}

.login {
    width: 20em;
    border: 1px solid #333;
    box-shadow: 8px 8px 5px #444;
    padding: 8px 12px;
    background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); 
    margin: auto;
    margin-top: 50px;
}

.loginHeadline {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
}

.loginUsernameDescription {
    clear: both;
    float: left;
    font-style: italic;
    padding-bottom: 10px;
}

.loginUsername {
    font-weight: bold;
    float: right;
    padding-bottom: 10px;
}

.loginPasswordDescription {
    clear: both;
    float: left;
    font-style: italic;
    padding-bottom: 10px;
}

.loginPassword {
    font-weight: bold;
    float: right;
    padding-bottom: 10px;
}

.loginPinNumberDescription {
    clear: both;
    float: left;
    font-style: italic;
    padding-bottom: 10px;
}

.loginPinNumber {
    font-weight: bold;
    float: right;
    padding-bottom: 10px;
}

.loginSubmit {
    clear: both;
    text-align: center;
}

textarea {
    resize: none;
}

@media print {
    .no-print {
        display: none !important;
    }
}

@media screen {
    .loginSubmitButton {
        transition-duration: 0.4s;
        background-color: #AAAAAA;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
}

@media print {
    .loginSubmitButton {
        display: none !important;
    }
}

.loginSubmitButton:hover {
    background-color: #000000;
}

.rowhover:hover {
    background-color: #CCCCCC;
}

.cellHover:hover {
    background-color: #CCCCCC;
}

/* carReservation */

.carReservationCarEntry {
    clear: both;
    padding-top: 30px;
}

.carReservationCarEntryName {
    padding: 8px 12px;
    background-color: lightgrey;
    font-size: 16px;
    font-weight: bold;
}

.carReservationEntry {
    width: 20em;
    border: 1px solid #333;
    box-shadow: 8px 8px 5px #444;
    padding: 8px 12px;
    background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
    float: left;
    margin: 10px;
}

.carReservationEntryDateStartDescription {
    clear: both;
    float: left;
    font-style: italic;
}

.carReservationEntryDateStart {
    font-weight: bold;
    float: right;
}

.carReservationEntryDateEndDescription {
    clear: both;
    float: left;
    font-style: italic;
}

.carReservationEntryDateEnd {
    font-weight: bold;
    float: right;
}

.carReservationEntryNameDescription {
    clear: both;
    float: left;
    font-style: italic;
}
.carReservationEntryName {
    font-weight: bold;
    float: right;
}

.carReservationEntryDescription {
    clear: both;
    padding-top: 10px;
    font-weight: bold;
    height: 40px;
}

/* roomReservation */

.roomReservationRoomEntry {
    clear: both;
    padding-top: 30px;
}

.roomReservationRoomEntryName {
    padding: 8px 12px;
    background-color: lightgrey;
    font-size: 16px;
    font-weight: bold;
}

.roomReservationEntry {
    width: 20em;
    border: 1px solid #333;
    box-shadow: 8px 8px 5px #444;
    padding: 8px 12px;
    background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
    float: left;
    margin: 10px;
}

.roomReservationEntryDateStartDescription {
    clear: both;
    float: left;
    font-style: italic;
}

.roomReservationEntryDateStart {
    font-weight: bold;
    float: right;
}

.roomReservationEntryDateEndDescription {
    clear: both;
    float: left;
    font-style: italic;
}

.roomReservationEntryDateEnd {
    font-weight: bold;
    float: right;
}

.roomReservationEntryNameDescription {
    clear: both;
    float: left;
    font-style: italic;
}
.roomReservationEntryName {
    font-weight: bold;
    float: right;
}

.roomReservationEntryDescription {
    clear: both;
    padding-top: 10px;
    font-weight: bold;
    height: 40px;
}

/* Tooltip CENTER */
.tooltipCenter {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltipCenter .tooltiptextCenter {
  visibility: hidden;
  width: 620px;
  background-color: #006bb6;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -310px;
}

.tooltipCenter .tooltiptextCenter::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #006bb6 transparent transparent transparent;
}

.tooltipCenter:hover .tooltiptextCenter {
  visibility: visible;
}
/* TOOLTIP CENTER */

/* Tooltip LEFT */
.tooltipLeft {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltipLeft .tooltiptextLeft {
  visibility: hidden;
  width: 620px;
  background-color: #006bb6;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -100px;
}

.tooltipLeft .tooltiptextLeft::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #006bb6 transparent transparent transparent;
  margin-left: -220px;
}

.tooltipLeft:hover .tooltiptextLeft {
  visibility: visible;
}
/* TOOLTIP LEFT */

/* Tooltip RIGHT */
.tooltipRight {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltipRight .tooltiptextRight {
  visibility: hidden;
  width: 620px;
  background-color: #006bb6;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -540px;
}

.tooltipRight .tooltiptextRight::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #006bb6 transparent transparent transparent;
  margin-left: 220px;
}

.tooltipRight:hover .tooltiptextRight {
  visibility: visible;
}
/* TOOLTIP RIGHT */