* {
  text-align: center;
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', sans-serif;
  transition: 0.2s; }

html {
  height: 100%; }

body {
  height: 100%; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; }

input[readonly] {
  background-color: #ebebe4;
  color: #545454;
  border: 1px solid #A9A9A9;
  padding: 2px; }

input[readonly]:hover {
  cursor: not-allowed; }

#lock {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../images/locked.svg"); }

#lock:hover {
  background-image: url("../images/unlocked.svg");
  cursor: pointer; }

.content {
  width: 100%;
  min-height: 85%;
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  .content #confirmUnlockBox {
    opacity: 0;
    margin-top: -100%;
    background-color: white;
    left: 0;
    right: 0;
    margin-left: auto;
    padding: 3%;
    margin-right: auto;
    position: fixed;
    width: 20%;
    min-width: 120px;
    z-index: 1;
    border-radius: 50px;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.5); }
    @media only screen and (max-width: 900px) {
      .content #confirmUnlockBox {
        width: 80%; } }
    .content #confirmUnlockBox .buttonFloating {
      background-color: #464F59;
      padding: 10px;
      margin: 2%;
      min-height: 20px;
      width: 150px;
      color: white;
      text-decoration: none;
      cursor: pointer;
      border: none;
      display: inline-block; }
    .content #confirmUnlockBox .buttonFloating:hover {
      background-color: #262a30; }
  .content .active {
    opacity: 1 !important;
    margin-top: 10% !important; }
  .content .tableContainer {
    overflow: auto; }
  .content table {
    overflow: auto;
    border-collapse: collapse;
    display: inline-table;
    margin: 5%; }
    .content table th {
      padding: 8px;
      border: 1px solid black; }
    .content table td {
      border: 1px solid #464F59;
      padding: 8px;
      height: 50px;
      min-width: 100px; }
    .content table tr:nth-child(even) {
      background-color: #f2f2f2; }
    .content table tr:hover {
      cursor: pointer !important;
      background-color: #ddd !important; }
    .content table .unclickable:hover {
      cursor: default !important;
      background-color: #ddd !important; }
    .content table th {
      padding-top: 12px;
      padding-bottom: 12px;
      background-color: #464F59;
      color: white; }
  .content ::-webkit-scrollbar {
    width: 17px; }
  .content ::-webkit-scrollbar-track {
    background: #f1f1f1; }
  .content ::-webkit-scrollbar-thumb {
    background: #888; }
  .content ::-webkit-scrollbar-thumb:hover {
    background: #555; }
  .content #calendar {
    margin-top: 40px;
    opacity: 0;
    margin: auto;
    width: 100%;
    height: 0px;
    overflow: scroll;
    overflow-x: hidden;
    padding: 1px;
    border: 5px solid black; }
    .content #calendar .dayBox {
      float: left;
      text-align: center;
      width: 100px;
      height: 100px;
      outline: 1px solid black;
      background-color: white; }
      .content #calendar .dayBox p {
        margin-top: 20px; }
  .content .cyrcleIconSmall {
    margin: 20px;
    width: 60px;
    height: 60px;
    border-radius: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.3); }
  .content .invisibleBtn {
    transition: 0s;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    width: 15%;
    margin: 25px; }
    @media only screen and (max-width: 600px) {
      .content .invisibleBtn {
        width: 80%; } }
  .content .decisionBtn {
    width: 10%;
    margin: 2%;
    min-width: 100px;
    cursor: pointer; }
  .content .cartButton {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0px 20px 20px 0px;
    width: 60px;
    height: 60px;
    border-radius: 500px;
    background-color: #FFD500;
    background-image: url("../images/shopping-cart.svg");
    background-position: 45% 50%;
    background-repeat: no-repeat;
    background-size: 50%;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.3);
    cursor: pointer; }
  .content .cartButton:hover {
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.5); }
  .content .contentContainer {
    margin: 5% 0% 2% 0%;
    display: inline-block;
    width: 60%; }
    @media only screen and (max-width: 600px) {
      .content .contentContainer {
        width: 100%;
        padding: 0% 20px 0% 20px;
        box-sizing: border-box; } }
    .content .contentContainer h1 {
      font-size: 3em;
      margin-top: 100px; }
    .content .contentContainer h2, .content .contentContainer h3 {
      margin: 1%; }
    .content .contentContainer .button {
      background-color: #464F59;
      padding: 10px;
      margin: 2% auto 2% auto;
      min-width: 150px;
      width: 150px;
      color: white;
      text-decoration: none;
      display: block;
      cursor: pointer;
      border: none; }
    .content .contentContainer .buttonFloating {
      background-color: #464F59;
      padding: 10px;
      margin: 2%;
      min-height: 20px;
      width: 150px;
      color: white;
      text-decoration: none;
      cursor: pointer;
      border: none;
      display: inline-block; }
    .content .contentContainer .buttonFloating:hover {
      background-color: #262a30; }
    .content .contentContainer .button:hover {
      background-color: #262a30; }
    .content .contentContainer a {
      color: #0071C3; }
    .content .contentContainer .indexContainer h1 {
      margin-top: 100px; }
    @media only screen and (max-width: 1000px) {
      .content .contentContainer .indexContainer #loginBtn {
        display: block;
        margin-top: 40px;
        font-size: 1.2em; } }
    .content .contentContainer .reservationOverview {
      background-color: white;
      border: 2px solid black;
      padding: 2%;
      width: 60%;
      display: inline-block;
      text-align: left !important; }
      @media only screen and (max-width: 1000px) {
        .content .contentContainer .reservationOverview {
          width: 90%;
          overflow: auto; } }
      .content .contentContainer .reservationOverview h1, .content .contentContainer .reservationOverview h2, .content .contentContainer .reservationOverview p {
        margin: 10px;
        text-align: left; }
    .content .contentContainer .formSection {
      
      background-color: white;
      border: 2px solid black;
      padding: 2%;
      width: 80%;
      display: inline-block; }
    .content .contentContainer .inputSection {
      margin: 2% auto 0% auto;
      width: 60%;
      height: 50px;
      text-align: left; }
      @media only screen and (max-width: 1000px) {
        .content .contentContainer .inputSection {
          width: 90%; } }
      .content .contentContainer .inputSection .inputTextFieldBig {
        padding-left: 2%;
        text-align: left;
        width: 100%;
        height: 100%;
        font-size: 1.5em; }
      .content .contentContainer .inputSection .inputTextField {
        padding-left: 2%;
        text-align: left;
        width: 10%;
        height: 60%;
        font-size: 1em;
        margin-top: 3px; }
      .content .contentContainer .inputSection h3 {
        display: inline-block; }
    .content .contentContainer .settingsForm {
      overflow: auto;
      margin: auto;
      text-align: left;
      border: 3px solid black;
      background-color: white;
      padding: 30px; }
      .content .contentContainer .settingsForm .inputSectionFloat {
        width: 100%; }
        .content .contentContainer .settingsForm .inputSectionFloat .inputTextField {
          width: 40%;
          margin-top: 5px; }
      .content .contentContainer .settingsForm .buttonFloating {
        margin-left: 0px; }
      .content .contentContainer .settingsForm h3 {
        margin-left: 0px;
        margin-top: 20px; }
      .content .contentContainer .settingsForm #send {
        margin-top: 30px; }
    .content .contentContainer .inputSectionFloat {
      margin: 5px auto 5px auto;
      width: 35%;
      height: 60px;
      text-align: left;
      display: inline-block; }
      @media only screen and (max-width: 1260px) {
        .content .contentContainer .inputSectionFloat {
          width: 100%;
          display: block;
          margin: 40% 0% 40% 0%; } }
      .content .contentContainer .inputSectionFloat .inputTextFieldBig {
        padding-left: 2%;
        text-align: left;
        width: 100%;
        height: 100%;
        font-size: 1.5em; }
      .content .contentContainer .inputSectionFloat .inputTextField {
        padding-left: 2%;
        text-align: left;
        width: 90%;
        height: 50%;
        font-size: 1em; }
      .content .contentContainer .inputSectionFloat select {
        width: 93.5% !important; }
      .content .contentContainer .inputSectionFloat textarea {
        resize: vertical;
        width: 100% !important; }
      .content .contentContainer .inputSectionFloat h3 {
        text-align: left; }
    .content .contentContainer #profileIconBig {
      width: 300px;
      height: 300px;
      border-radius: 500px;
      margin: auto;
      background-image: url("../images/user-default.png");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: white;
      box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.3); }
      @media only screen and (max-width: 400px) {
        .content .contentContainer #profileIconBig {
          width: 200px;
          height: 200px; } }
    .content .contentContainer .profileInfo h1 {
      margin: 20px auto 0px auto; }
    .content .contentContainer .profileInfo .buttonFloating {
      margin: 10px 5px 10px 5px; }