body,
h1,
h2,
h3,
h4,
h5,
h6,
#app {
  font-family: 'Titillium Web', sans-serif; }

body,
html {
  height: 100%;
  width: 100%; }

body {
  color: #ffffff;
  background-color: #191919; }

.credentials-error {
  text-align: center; }

#fb__spinner-wrap {
  text-align: center; }
  #fb__spinner-wrap #fb__spinner {
    width: 100px;
    height: 100px;
    margin: 20px; }

.row {
  max-width: 99%; }

.title-bar {
  background: #333;
  padding: 0;
  border-bottom: 1px solid #474747; }

.title-bar-title {
  padding-left: 25px; }

.menu-icon {
  padding-right: 25px; }

.fb__nav-menu i,
.fb__nav-menu-right i {
  font-size: 24px;
  padding-right: 8px; }

.fb__nav-menu a {
  color: #ffffff; }
.fb__nav-menu li {
  text-transform: uppercase;
  font-size: 1.3vw;
  line-height: 2;
  color: #ffffff;
  padding: 8px 30px; }
.fb__nav-menu img {
  max-height: 70px; }
.fb__nav-menu .fb__dropdown {
  margin-top: -15px; }
  .fb__nav-menu .fb__dropdown li {
    line-height: normal;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px; }
    .fb__nav-menu .fb__dropdown li .fb__child-dropdown li {
      min-width: 250px;
      font-size: 12px;
      padding: 0.7rem 1rem;
      color: #474747 !important;
      cursor: pointer; }
      .fb__nav-menu .fb__dropdown li .fb__child-dropdown li a {
        color: #474747 !important; }

.fb__nav-menu-right li {
  text-transform: uppercase;
  padding: 8px 30px;
  border-left: 1px solid #474747;
  color: #ffffff;
  font-size: 28px;
  line-height: 2; }
.fb__nav-menu-right li:first-child {
  border: 0; }
.fb__nav-menu-right li:first-child:hover {
  background: #333; }

.fb__nav-menu li:hover,
.fb__nav-menu-right li:hover {
  background-color: rgba(69, 89, 117, 0.1); }

.fb__menu-button,
.fb__menu-button a {
  color: #ffffff;
  font-size: 36px; }

.row-padder {
  padding: 2px 0; }

.tracker-wrap {
  padding-top: 15px; }

.full-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: initial; }

.meeting-room {
  border: 1px solid #474747;
  border-left: 8px solid #3adb76;
  width: 100%;
  background-color: #333;
  padding: 10px 50px; }
  .meeting-room .meeting-busy {
    font-size: 24px;
    color: #f04124; }
  .meeting-room .meeting-open {
    font-size: 24px;
    color: #3adb76; }
  .meeting-room .meeting-upcoming {
    font-size: 24px;
    color: #ffae00; }
  .meeting-room .meeting-error {
    font-size: 24px;
    color: #f3840e; }
  .meeting-room .meeting-room__name {
    font-size: 30px;
    color: #eceef1; }
  .meeting-room .meeting-room__name:first-letter {
    text-transform: uppercase; }
  .meeting-room .meeting-subject {
    font-size: 24px; }
  .meeting-room .meeting-time {
    color: #d4d6d8; }
  .meeting-room .meeting-fullscreen a {
    font-size: 36px;
    color: #d4d6d8; }
    .meeting-room .meeting-fullscreen a:hover {
      color: white; }

.meeting-room-busy {
  border-left: 8px solid #f04124 !important; }

.meeting-room-error {
  border-left: 8px solid #f3840e !important; }

#single-room__wrap {
  height: 100vh;
  width: 100%; }
  #single-room__wrap .full-height {
    height: 100vh;
    width: 100%; }
    #single-room__wrap .full-height .columns {
      height: 130%; }
    #single-room__wrap .full-height .left-col {
      background: black;
      padding: 30px; }
      #single-room__wrap .full-height .left-col #single-room__room-name {
        font-size: 2.5vw; }
      #single-room__wrap .full-height .left-col #single-room__room-status {
        text-transform: uppercase;
        padding: 0;
        font-size: 14vw;
        font-weight: lighter; }
      #single-room__wrap .full-height .left-col #single-room__meeting-title {
        font-size: 2.3vw;
        font-weight: lighter; }
        #single-room__wrap .full-height .left-col #single-room__meeting-title #single-room__next-up {
          font-weight: bold; }
      #single-room__wrap .full-height .left-col #single-room__meeting-time {
        font-size: 1.8vw;
        font-weight: lighter; }
      #single-room__wrap .full-height .left-col #single-room__meeting-organizer {
        font-size: 1.5vw;
        font-weight: lighter; }
    #single-room__wrap .full-height .busy {
      background: #f04124; }
    #single-room__wrap .full-height .open {
      background: #289952; }
    #single-room__wrap .full-height .right-col {
      background: white;
      padding: 30px;
      color: black; }
      #single-room__wrap .full-height .right-col #single-room__clock-wrap {
        padding-bottom: 80px;
        font-weight: lighter; }
        #single-room__wrap .full-height .right-col #single-room__clock-wrap #single-room__clock {
          text-align: center; }
          #single-room__wrap .full-height .right-col #single-room__clock-wrap #single-room__clock #single-room__time {
            font-size: 4vw; }
          #single-room__wrap .full-height .right-col #single-room__clock-wrap #single-room__clock #single-room__date {
            font-size: 2.7vw;
            color: #474747; }
      #single-room__wrap .full-height .right-col #upcoming-title {
        font-size: 2.2vw;
        text-transform: uppercase;
        font-weight: lighter; }
      #single-room__wrap .full-height .right-col table tr {
        border-bottom: 1px solid #eceef1; }
        #single-room__wrap .full-height .right-col table tr td {
          padding: 10px 8px; }
        #single-room__wrap .full-height .right-col table tr td.up__meeting-title {
          font-size: 1.1vw; }
        #single-room__wrap .full-height .right-col table tr td.up__meeting-time {
          font-size: 0.9vw;
          color: #474747; }
  #single-room__wrap #error-wrap {
    width: 600px;
    margin: 0 auto;
    padding-top: 50px; }
    #single-room__wrap #error-wrap #error-text {
      font-size: 2.8vw; }
      #single-room__wrap #error-wrap #error-text #error-header {
        font-weight: bold;
        font-size: 3.2vw;
        padding-bottom: 25px; }

@media screen and (min-width: 40em) {
  .valign-middle {
    display: table;
    width: 100%; }
    .valign-middle > .columns {
      display: table-cell;
      vertical-align: middle; }
    .valign-middle > .columns, .valign-middle > [class*="column"] + [class*="column"]:last-child {
      float: none; } }

.btn {
  border-radius: 50px;
  border: 1px #ffffff;
  font-size: 22px;
  padding: 5px 5px;
  text-align: center;
  background-color: #5a5a5a;
  display: inline-block;
  height: 50px;
  width: 50%;
  box-shadow: 4px 4px #ffffff;
}
.btn:active {
  background-color: #ffffff;
  color: #000000;
}

/* .user_name_group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 50%;
}

.user_name_field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #fff;
  outline: 0;
  font-size: 1.3rem;
  color: #fff;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;

  &::placeholder {
    color: transparent;
  }

  &:placeholder-shown ~ .form__label {
    font-size: 1.3rem;
    cursor: text;
    top: 20px;
  }
}

.user_name_label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #fff;
}

.user_name_field:focus {
  ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: #252525;
    font-weight:700;    
  }
  padding-bottom: 6px;  
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #ff9100,#f7cb92);
  border-image-slice: 1;
}
/* reset input */
/* .user_name_field{
  &:required,&:invalid { box-shadow:none; }
} */ */

.book_details{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.date_time_field{
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 10px;
}

.start_field{
  display: flex;
  flex-direction: column;
}

.end_field{
  display: flex;
  flex-direction: column;
}

.date_field{
  display: flex;
  flex-direction: column;
}

label{
  color: #fff;
}

input[type="time"]{
  background-color: #5a5a5a;
  border-radius: 10px;
  box-shadow: 4px 4px #ffffff;
  /* border-width: 2px #ffffff; */
}

input[type="date"]{
  background-color: #5a5a5a;
  border-radius: 10px;
  box-shadow: 4px 4px #ffffff;
  /* border-width: 2px #ffffff; */
}

.bookConfirmButtons{
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 45%;
}

/*# sourceMappingURL=styles.css.map */
/* Add this CSS to your main CSS file or component styles */

.image-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999; /* Set a high z-index to overlap other components */
}

.image-popup {
  background: white;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
}

.image-popup img {
  max-width: 100%;
  max-height: 90vh; /* Limit the height of the image to the viewport height */
}

.image-popup button {
  margin-top: 10px;
  cursor: pointer;
  color: white;
  font-size: 30px;
  background-color: #555555;
  border-radius: 8px;
  padding: 15px;
}