/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h1 {
  font-size: 5.6rem;
  line-height: 1;
}
@media (max-width: 1024px) {
  h1 {
    font-size: 4.6rem;
  }
}

h2 {
  font-size: 5rem;
  line-height: 1;
}
@media (max-width: 1024px) {
  h2 {
    font-size: 4rem;
  }
}

h3 {
  font-size: 4rem;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  h3 {
    font-size: 3rem;
  }
}

h4 {
  font-size: 3rem;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  h4 {
    font-size: 2.4rem;
  }
}

h5 {
  font-size: 2.4rem;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  h5 {
    font-size: 2rem;
  }
}

h6 {
  font-size: 2rem;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  h6 {
    font-size: 1.8rem;
  }
}

p, span, li, ol, a {
  font-size: 1.6rem;
  line-height: 1.5;
  color: #000;
}

a {
  color: #005ba6;
}
a:hover {
  text-decoration: none;
}

.nunito-regular, form select, form textarea, form input, body, p, span, li, ol, a {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.nunito-bold, h1, h2, h3, h4, h5, h6, a {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  color: #000;
  background-color: #fafafa;
  line-height: 1.5;
  font-size: 1.6rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
}

.container {
  max-width: 1024px;
  width: 95%;
  margin: 0 auto;
}

.columns {
  display: flex;
}
.columns--is-reversed {
  flex-direction: row-reverse;
}
@media (max-width: 1024px) {
  .columns {
    flex-direction: column;
  }
}
.columns .column {
  flex-basis: 50%;
}
.columns .column:first-of-type {
  padding-right: 10px;
}
.columns .column--small {
  flex-basis: 45%;
}
@media (max-width: 1024px) {
  .columns .column {
    flex-basis: 100%;
  }
  .columns .column:first-of-type {
    padding-right: 0px;
  }
}

@media only screen and (max-width: 560px) {
  .aos-animate {
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
  }
}
.has-spacing {
  padding: 50px 0px;
}
@media (max-width: 1024px) {
  .has-spacing {
    padding: 25px 0px;
  }
}

.dot {
  display: inline-flex;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  margin: 0px 4px;
  border-radius: 100%;
}
.dot--brand-blue-lighter {
  background-color: #005ba6;
}
.dot--brand-blue-lightest {
  background-color: #0070cc;
}
.dot--black {
  background-color: #000;
}

.is-visible {
  display: flex !important;
}

.is-hidden {
  display: none;
}

.pre-line {
  white-space: pre-line;
}

.hide-overflow {
  overflow: hidden;
}

.margin-auto {
  margin: 0 auto;
}

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

.error {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  margin: 10px auto;
  border-radius: 8px;
  background: #ffe8be;
  border: 2px solid #e79f25;
}
.error i {
  color: #bf8218;
  margin-right: 5px;
}
.error ul {
  display: flex;
  flex-direction: column;
}

.text-dark-gray {
  color: #9c9c9c;
}

.text-red {
  color: #ed2c00;
}

.text-green {
  color: #1c9d51;
}

.mr-10 {
  margin-right: 10px;
}

.font-18 {
  font-size: 1.8rem;
}

.justify-center {
  justify-content: center;
}

.bg-purple {
  background-color: #6a4c93 !important;
}

.bg-green {
  background-color: #1c9d51 !important;
}

.bg-pink {
  background-color: #ec4069 !important;
}

.desktop-only {
  display: none !important;
}
@media (min-width: 768px) {
  .desktop-only {
    display: inline-flex !important;
  }
}

.flex {
  display: flex !important;
}

.items-center {
  align-items: center;
}

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

.align-normal {
  align-items: normal !important;
}

.divider {
  border-top: 2px solid #e7e7e7;
  margin: 20px 0px 15px 0px;
}
.divider h4 {
  margin-top: 15px;
}

.font-bold {
  font-weight: 700;
}

.button {
  display: inline-flex;
  justify-content: center;
  text-align: center;
  background: #005ba6;
  text-decoration: none;
  padding: 10px 15px;
  font-weight: 700;
  color: #eeeeee;
  border-radius: 8px;
  border: 2px solid #005ba6;
  transition: 0.3s ease all;
  cursor: pointer;
}
.button:hover {
  background-color: transparent;
  color: #005ba6;
}
.button--green {
  background-color: #1c9d51;
  border: 2px solid #1c9d51;
}
.button--green:hover {
  background-color: transparent;
  color: #1c9d51;
}
.button--purple {
  background-color: #6a4c93;
  border: 2px solid #6a4c93;
}
.button--purple:hover {
  background-color: transparent;
  color: #6a4c93;
}
.button--red {
  background-color: #ed2c00;
  border: 2px solid #ed2c00;
}
.button--red:hover {
  background-color: transparent;
  color: #ed2c00;
}
.button--pink {
  background-color: #ec4069;
  border: 2px solid #ec4069;
}
.button--pink:hover {
  background-color: transparent;
  color: #ec4069;
}

.button-border {
  display: inline-flex;
  background: transparent;
  text-decoration: none;
  padding: 15px 20px;
  font-weight: 700;
  color: #005ba6;
  border-radius: 8px;
  border: 2px solid #005ba6;
  transition: 0.3s ease all;
}
.button-border:hover {
  background-color: #005ba6;
  color: #ffffff;
}

.button-alt {
  display: inline-flex;
  background: transparent;
  text-decoration: none;
  padding: 15px 20px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 8px;
  border: 2px solid #ffffff;
  transition: 0.3s ease all;
}
.button-alt:hover {
  background-color: #ffffff;
  color: #000;
}

form {
  display: flex;
  flex-direction: column;
  max-width: 600px;
}
form label {
  display: block;
  font-weight: 700;
  margin-top: 10px;
}
form p {
  margin: 10px 0px;
}
form input {
  padding: 5px 10px;
  display: block;
  width: 100%;
}
form input[type=time] {
  font-size: 2rem;
  cursor: pointer;
}
form input[type=time]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
form input[type=time]::-moz-focus-inner {
  cursor: pointer;
}
form input[type=time]::-moz-placeholder {
  cursor: pointer;
}
form input[type=time]::-ms-clear {
  cursor: pointer;
}
form textarea {
  padding: 5px 10px;
  height: 150px;
  margin-bottom: 10px;
  display: block;
  width: 100%;
}
form select {
  display: block;
  width: 100%;
  padding: 5px 10px;
}
form .form-checkbox {
  display: flex;
  align-items: center;
  margin: 10px 0px 15px 0px;
}
form .form-checkbox label {
  padding-left: 5px;
  margin: 0px;
}
form .form-checkbox input[type=checkbox] {
  width: auto;
}
form .form-radio {
  display: flex;
  align-items: center;
  margin: 5px 0px;
}
form .form-radio label {
  margin: 0px 15px 0px 0px;
  font-weight: 400;
  display: flex;
}
form .form-radio input[type=radio] {
  width: auto;
  margin-right: 5px;
}
form input[type=checkbox] {
  min-width: 24px;
  min-height: 24px;
}
form input[type=radio] {
  min-width: 24px;
  min-height: 24px;
}
form .button {
  margin-top: 15px;
  text-align: center;
  align-self: center;
  width: 250px;
}
form .button:disabled {
  opacity: 0.5;
}

/* Captcha */
.submit__generated {
  display: inline-block;
}
.submit__generated span {
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: center;
  line-height: 35px;
  font-weight: bold;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.submit__generated.valid:after, .submit__generated.unvalid:after {
  font-family: FontAwesome;
  font-size: 18px;
  margin-left: 10px;
}
.submit__generated.valid:after {
  content: "\f00c";
  color: #2ecc71;
}
.submit__generated.valid .submit__input {
  border: 1px solid #2ecc71;
  color: #2ecc71 !important;
}
.submit__generated.unvalid:after {
  content: "\f00d";
  color: #e74c3c;
}
.submit__generated.unvalid .submit__input {
  border: 1px solid #e74c3c;
  color: #e74c3c;
}
.submit__generated .submit__input {
  position: relative;
  outline: 0;
  height: 35px;
  width: 35px;
  border-radius: 4px;
  border: 1px solid #42A0DD;
  color: #42A0DD;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  top: -2px;
  padding: 0;
  display: inline-block;
  margin-bottom: 0;
}

i.fa-refresh {
  margin: 4px 0 0px 5px;
  padding: 5px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.2s ease-out, color 0.2s ease-out;
}
i.fa-refresh:hover {
  color: rgba(0, 0, 0, 0.4);
  transform: rotate(180deg);
}

span.submit__error,
span.submit__error--empty {
  color: #e74c3c;
  position: absolute;
  margin-top: 5px;
  margin-left: 75px;
}

.submit {
  display: block;
  margin: 50px 0;
  padding: 7px 15px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  outline: none;
  border: 0;
  background-color: #42A0DD;
  background-clip: padding-box;
  border-radius: 3px;
  box-shadow: 0 4px 0 #2C81BA;
  opacity: 1;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.submit:hover {
  background-color: #3498db;
}
.submit:active, .submit.enter-press, .submit.overlay {
  margin: 55px 0 46px 0;
  box-shadow: none;
}

.submit__overlay {
  height: 50px;
  width: 110px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  margin-top: -90px;
  margin-left: -5px;
}

.hide {
  display: none !important;
}

.swing {
  animation: swing ease-in-out 1s infinite alternate;
  transform-origin: center -20px;
  animation-delay: 0s;
}

@keyframes swing {
  0% {
    transform: rotate(3deg);
  }
  30% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(0deg);
  }
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e7e7e7;
  padding: 30px 0px;
}
@media (max-width: 768px) {
  .header__inner {
    padding: 15px 0px;
  }
}
.header__inner__left img {
  max-width: 150px;
}
@media (max-width: 768px) {
  .header__inner__left img {
    max-width: 115px;
  }
}
.header__inner__right {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .header__inner__right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    padding-left: 30px;
  }
}
.header__inner__right__notifications {
  margin-right: 15px;
  position: relative;
}
@media (max-width: 768px) {
  .header__inner__right__notifications {
    text-align: right;
    position: static;
  }
}
.header__inner__right__notifications .open-notifications {
  color: #000;
  font-size: 2.8rem;
  position: relative;
}
.header__inner__right__notifications .open-notifications span {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #ed2c00;
  position: absolute;
  top: 0;
  right: 0;
}
.header__inner__right__notifications .open-notifications.has-new-notification span {
  display: block;
}
.header__inner__right__notifications .notifications-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 350px;
  top: 100%;
  background-color: #ffffff;
  border: 2px solid #9c9c9c;
  left: 0;
  border-radius: 8px;
  overflow: hidden;
  z-index: 10;
  text-align: left;
}
@media (max-width: 768px) {
  .header__inner__right__notifications .notifications-dropdown {
    width: 100%;
    top: calc(100% - 50px);
    left: 5px;
  }
}
.header__inner__right__notifications .notifications-dropdown h6 {
  margin: 10px;
}
.header__inner__right__notifications .notifications-dropdown ul li {
  padding: 10px;
  border-top: 2px solid #e7e7e7;
}
.header__inner__right__notifications .notifications-dropdown ul li:nth-child(even) {
  background-color: #fafafa;
}
.header__inner__right__notifications .notifications-dropdown ul li .notification-summary {
  display: flex;
  justify-content: space-between;
}
.header__inner__right__notifications .notifications-dropdown ul li .notification-summary-title {
  font-weight: 700;
}
.header__inner__right__notifications .notifications-dropdown ul li .notification-summary-date {
  color: #000;
  text-align: right;
  padding-left: 10px;
  max-width: 150px;
}
.header__inner__right__notifications .notifications-dropdown ul li .notification-description a {
  font-size: 1.4rem;
}
.header__inner__right__notifications .notifications-dropdown ul li .notification-description .mark-completed {
  display: flex;
  width: auto;
  justify-content: flex-end;
  margin-top: 30px;
}
.header__inner__right__profile {
  display: flex;
  align-items: center;
}
.header__inner__right__profile__image {
  width: 60px;
  min-width: 60px;
  height: 60px;
  border: 2px solid #003b6c;
  background-color: #003b6c;
  margin-left: 15px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.header__inner__right__profile__image img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain;
  object-position: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  scale: 1.5;
}
.header__inner__right__links {
  margin-left: 15px;
}
@media (max-width: 768px) {
  .header__inner__right__links {
    grid-column: span 2;
    text-align: right;
    margin-top: 10px;
  }
}

.login__title {
  margin-bottom: 50px;
}

.guide .info-section {
  padding: 25px 0px;
}

.greeting {
  margin: 25px 0px;
}

.logout h4 {
  text-align: center;
  margin-bottom: 8px;
}
.logout p {
  text-align: center;
}

.info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-section h2 {
  margin-bottom: 8px;
}
.info-section h4 {
  margin-bottom: 8px;
}
.info-section__options {
  margin: 25px 0px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 768px) {
  .info-section__options {
    flex-direction: column;
    margin: 15px 0px;
  }
}
.info-section__options a {
  margin-right: 15px;
}
@media (max-width: 768px) {
  .info-section__options a {
    margin-right: 0px;
    margin-bottom: 15px;
  }
}
.info-section__options a:last-of-type {
  margin-right: 0px;
}
.info-section .info-tag {
  margin: 5px auto;
}

.info-tag {
  display: inline-flex;
  align-items: center;
  background-color: #cfeaff;
  border-radius: 8px;
  border: 2px solid #003b6c;
  padding: 8px;
  line-height: 1;
}
.info-tag i {
  margin-right: 5px;
  color: #003b6c;
}
.info-tag--green {
  background-color: #c2f5d7;
  border: 2px solid #1c9d51;
}
.info-tag--green i {
  color: #1c9d51;
}
@media (max-width: 768px) {
  .info-tag br {
    display: none;
  }
}

.delete-form {
  max-width: 600px;
  margin: 15px auto;
  border-top: 2px solid #e7e7e7;
  padding: 50px 0px;
}
.delete-form h6 {
  margin-bottom: 8px;
}

.dashboard-nav {
  border-bottom: 2px solid #e7e7e7;
  margin: 30px 0px;
}
.dashboard-nav:last-of-type {
  border-top: none;
}
.dashboard-nav__title h2 {
  margin-bottom: 8px;
}
.dashboard-nav__links {
  margin: 15px 0px;
}
.dashboard-nav__links ul {
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
}
.dashboard-nav__links ul li {
  display: inline-flex;
  margin-top: 10px;
  margin-right: 10px;
}
.dashboard-nav__links ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 170px;
  height: 115px;
  padding: 15px;
  line-height: 1.2;
  background: #003b6c;
  color: #eeeeee;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.3s ease all;
}
.dashboard-nav__links ul li a:hover {
  opacity: 0.9;
}

.journal__worklines {
  border-bottom: 2px solid #e7e7e7;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.journal__worklines p {
  margin: 10px 0px;
}
.journal__worklines__input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.journal__worklines .saved-worklines {
  margin-bottom: 15px;
}
.journal__images__inner {
  margin: 10px 0px 25px 0px;
}
.journal__images__inner__input {
  border-bottom: 1px solid #ccc;
  padding: 5px 0px;
}
.journal__images__inner__input .image-preview {
  margin-bottom: 5px;
}
.journal__images__inner input[type=file] {
  margin: 10px 0px;
}
.journal__images__options {
  display: flex;
  align-items: center;
}
.journal__images__options .button:first-of-type {
  margin-right: 10px;
}
.journal__images__current {
  margin: 10px 0px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  align-items: center;
}
.journal__images__current__image {
  display: flex;
  align-items: center;
}
.journal__images__current__image:last-of-type {
  margin-right: 0px;
}
.journal__images__current__image img.open-modal {
  max-width: 150px;
  cursor: pointer;
}
.journal__images__current__image img.open-modal:hover {
  opacity: 0.9;
}
.journal__images__current__image a.button {
  max-width: 50px;
  margin-left: 10px;
}
.journal .add-workline {
  width: 50px;
  margin-top: 0px;
  font-size: 1.8rem;
}
.journal .remove-workline {
  width: 50px;
  margin-top: 0px;
  font-size: 1.8rem;
  margin-left: 15px;
}
.journal .remove-existing-workline {
  width: 50px;
  margin-top: 0px;
  font-size: 1.8rem;
  margin-left: 15px;
}
.journal .add-journal-image {
  width: 50px;
  margin-top: 0px;
  font-size: 1.8rem;
}
.journal .remove-journal-image {
  width: 50px;
  margin-top: 0px;
  font-size: 1.8rem;
}
.journal .dt-filters-container {
  display: flex;
}
.journal .worklines-modal table {
  border-collapse: collapse;
  width: 100%;
  margin: 50px 0px;
}
.journal .worklines-modal table th, .journal .worklines-modal table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.journal .worklines-modal table th {
  background-color: #f2f2f2;
  text-align: left;
}
.journal .worklines-modal .add-modal-workline-input-container {
  margin: 15px 0px;
}
.journal .worklines-modal .add-modal-workline-button {
  max-width: 150px;
  margin-top: 0px;
}
.journal .worklines-modal .add-modal-workline-button.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.roomcheck .dt-filters-container {
  display: flex;
}
.roomcheck form .form-temperature input[type=text],
.roomcheck form .form-temperature input[type=number],
.roomcheck form .form-time input[type=time] {
  margin-bottom: 10px;
  max-width: 150px;
}
.roomcheck form .form-multiple input[type=text] {
  margin-bottom: 10px;
}
.roomcheck .personnel-list p {
  display: flex;
  align-items: center;
}
.roomcheck .personnel-list a {
  display: flex;
  align-items: center;
  padding: 5px;
  text-decoration: none;
}
.roomcheck .personnel-list a i {
  font-size: 2.4rem;
  color: #ed2c00;
}

.repairs .modal-container,
.profile .modal-container {
  margin-bottom: 10px;
}
.repairs .modal-container img.open-modal,
.profile .modal-container img.open-modal {
  max-width: 150px;
  cursor: pointer;
}
.repairs .modal-container img.open-modal:hover,
.profile .modal-container img.open-modal:hover {
  opacity: 0.9;
}

.resident .modal-container {
  margin: 10px 0px;
}
.resident .modal-container img.open-modal {
  max-width: 300px;
  cursor: pointer;
}
.resident .modal-container img.open-modal:hover {
  opacity: 0.9;
}

.noticeboard__inner {
  max-width: 800px;
  margin: 0 auto;
}
.noticeboard__inner__notice {
  padding: 30px 0px;
  border-bottom: 2px solid #e7e7e7;
}

.first-aid p {
  white-space: pre-line;
}

.modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  z-index: 10;
}
.modal__inner {
  max-width: 75%;
  max-height: 90%;
  padding: 50px;
  background-color: #eeeeee;
  margin: 3% auto;
  overflow-y: scroll;
  position: relative;
}
.modal__inner .close-modal {
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background-color: #005ba6;
  padding: 10px 15px;
  position: absolute;
  top: 15px;
  right: 15px;
}
.modal__inner .close-modal span {
  color: #eeeeee;
  font-weight: 700;
}
@media (max-width: 560px) {
  .modal__inner .close-modal span {
    display: none;
  }
}
@media (max-width: 768px) {
  .modal__inner {
    padding: 15px;
    max-width: 90%;
  }
}
@media (min-width: 1440px) {
  .modal__inner__content img {
    max-width: 75%;
    display: block;
    margin: 0 auto;
  }
}

table.dataTable {
  border-collapse: collapse;
  width: 100%;
}
table.dataTable th, table.dataTable td {
  border: 1px solid #ddd;
  padding: 8px;
}
table.dataTable th {
  background-color: #f2f2f2;
  text-align: left;
}

.dt-filters-container {
  display: none;
  justify-content: flex-end;
  margin: 20px 0px;
}
@media (max-width: 768px) {
  .dt-filters-container {
    justify-content: center;
  }
}
.dt-filters-container .dt-filters {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.dt-filters-container .dt-filters td {
  padding: 10px;
  width: 50%;
  border: 1px solid #ddd;
}
.dt-filters-container .dt-filters td input[type=date] {
  padding: 5px 10px;
  display: block;
  width: 100%;
  border: 1px solid #9c9c9c;
  border-radius: 3px;
  background-color: #ffffff;
}
.dt-filters-container .roomcheck table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.dt-filters-container .roomcheck th, .dt-filters-container .roomcheck td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left; /* Default alignment for other columns */
}
.dt-filters-container .roomcheck td:nth-child(1) { /* Targeting the first column for date */
  width: 150px; /* Setting the width of the date column */
  text-align: left; /* Aligning the date to the left */
}
.dt-filters-container .roomcheck td:nth-child(2) { /* Targeting the second column for room number */
  width: 100px; /* Setting the width of the room number column */
  text-align: left; /* Aligning the room number to the left */
}
.dt-filters-container .roomcheck th {
  background-color: #f2f2f2;
  font-weight: bold;
}
.dt-filters-container .roomcheck tr:nth-child(even) {
  background-color: #f9f9f9;
}
.dt-filters-container .roomcheck tr:hover {
  background-color: #f1f1f1;
}

.dt-paging-button {
  padding: 8px 4px !important;
  min-width: 42px !important;
}
.dt-paging-button.last, .dt-paging-button.first, .dt-paging-button.previous, .dt-paging-button.next {
  font-size: 22px;
}

div.dt-container .dt-search input,
div.dt-container .dt-input {
  border: 1px solid #9c9c9c;
  background-color: #ffffff;
}
div.dt-container div.dt-layout-row:not(.dt-layout-table) {
  display: flex !important;
}
@media (max-width: 768px) {
  div.dt-container div.dt-layout-row:not(.dt-layout-table) {
    flex-direction: column-reverse;
  }
}

.hide-dt-date-filter .dt-filters-container {
  display: none !important;
}

.overview h4 {
  margin: 30px 0px 5px 0px;
}
.overview .calendar-container {
  overflow-x: scroll;
}
.overview .calendar {
  width: 1024px;
}
.overview .table-container {
  overflow-x: auto;
  /* Table styling */
  /* Table header */
  /* Table rows */
  /* Alternate row colors */
  /* Table borders */
  /* Hover effect for rows */
}
.overview .table-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.overview .table-container th {
  background-color: #005ba6;
  color: #eeeeee;
  padding: 10px;
  text-align: left;
}
.overview .table-container td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.overview .table-container tr:nth-child(even) {
  background-color: #f2f2f2;
}
.overview .table-container table, .overview .table-container th, .overview .table-container td {
  border: 1px solid #ddd;
}
.overview .table-container th:first-child, .overview .table-container td:first-child {
  position: sticky; /* Make the first column sticky */
  left: 0; /* Align it to the left */
  z-index: 10; /* Ensure it stays above other content */
}
.overview .table-container td:first-child {
  background-color: #fff; /* Background color for the sticky column */
}
.overview .table-container tr:hover {
  background-color: #ddd;
}

.calendar-nav {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.calendar-nav a {
  text-decoration: none;
  color: #007BFF;
  font-weight: bold;
  flex-basis: 25%;
  transition: 0.3s ease all;
  opacity: 0.5;
}
.calendar-nav a:first-of-type {
  text-align: left;
}
.calendar-nav a:last-of-type {
  text-align: right;
}
.calendar-nav span {
  font-size: 1.4em;
  font-weight: 700;
  flex-basis: 50%;
  text-align: center;
  transition: 0.3s ease all;
  opacity: 0.5;
}

.calendar {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0px 30px 0px;
  transition: 0.3s ease all;
}
.calendar .table-container {
  overflow-x: auto; /* Allow horizontal scrolling */
  position: relative; /* Position relative for absolute positioning of the first column */
}
.calendar table {
  width: 100%; /* Full width for the table */
  border-collapse: collapse; /* Collapse borders for a cleaner look */
}
.calendar th, .calendar td {
  padding: 10px; /* Default padding for better readability */
  border: 1px solid #ddd; /* Add border for clarity */
  width: 14.28%; /* Ensure 7 columns fit evenly */
}
.calendar th {
  background-color: #f4f4f4; /* Light gray background for headers */
  font-weight: bold; /* Bold font for headers */
  text-align: center;
}
.calendar td {
  height: 60px; /* Set a fixed row height */
  vertical-align: top; /* Align content to the top */
  position: relative; /* Enable positioning for child elements */
}
.calendar th:first-child, .calendar td:first-child {
  background-color: #fff; /* Background color for the sticky column */
  z-index: 10; /* Ensure it stays above other content */
}
.calendar td small {
  display: flex; /* Use flex for alignment */
  align-items: center; /* Align items vertically */
  color: #000; /* Use CSS variable for text color */
  margin-top: 5px; /* Add spacing above */
  font-size: 1.4rem; /* Set small font size */
  line-height: 1.2; /* Set line height */
}
.calendar td:hover {
  background-color: #f0f8ff; /* Light blue background on hover */
}

.pattest .copy {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 2px solid #e7e7e7;
}
.pattest .copy:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.pattest .add-item {
  width: 50px;
  margin-top: 0px;
  font-size: 1.8rem;
  align-self: flex-start;
}
.pattest .remove-item {
  width: 50px;
  margin-top: 0px;
  margin-bottom: 25px;
  font-size: 1.8rem;
  align-self: flex-start;
}

.locations .copy {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 2px solid #e7e7e7;
}
.locations .copy:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.locations .copy .form-checkbox:last-of-type {
  margin-bottom: 30px;
}
.locations .add-item {
  width: 50px;
  margin-top: 0px;
  font-size: 1.8rem;
  align-self: flex-start;
}
.locations .remove-item {
  width: 50px;
  margin-top: 0px;
  margin-bottom: 25px;
  font-size: 1.8rem;
  align-self: flex-start;
}

.footer {
  text-align: center;
  margin: 50px 0px 10px 0px;
}
.footer p,
.footer a {
  font-size: 1.4rem;
}

/*# sourceMappingURL=main.css.map */