@font-face {
  font-family: Aller;
  src: url("../fonts/Aller_Rg.ttf"); }
:root {
  --color-primary: #e5056e;
  --color-text-level-1: #000;
  --color-text-level-2: #4c4c4c;
  --color-text-level-3: #58585a;
  --color-text-level-4: #727780;
  --color-text-disabled: #909090;
  --color-error: #e5056e;
  --color-focus-bg: #fa671a;
  --color-focus-fg: #000000;
  --border-color: #e0e1e5;
  --border-radius: 4px; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

p {
  margin: 0; }

html,
body {
  background-color: #fff;
  font-family: Aller;
  color: var(--color-text-level-2); }

a {
  color: var(--color-text-level-2); }
  a:hover, a:focus {
    color: var(--color-focus-bg); }

label {
  font-size: 1rem;
  margin-bottom: 0.4rem; }
  label.required::after {
    content: " *"; }

textarea {
  width: 100%;
  height: 30rem;
  background: #eee;
  font-size: 1.1rem;
  color: var(--color-text-level-1); }

input {
  font-family: Aller; }
  input:not([type="submit"]) {
    width: 100%;
    height: 1.8rem;
    border: none;
    border-bottom: 2px solid var(--color-text-level-2);
    background: transparent;
    font-size: 1.1rem;
    color: var(--color-text-level-1); }
    input:not([type="submit"]):focus {
      outline: none;
      background-color: inherit;
      border-bottom-color: var(--color-focus-bg); }
    input:not([type="submit"]):disabled {
      border-bottom-color: var(--color-text-disabled); }
  input[type="submit"] {
    cursor: pointer;
    width: auto;
    height: auto;
    padding: 0.6rem 0.8rem;
    color: #ffffff;
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
    border: none;
    font-size: 1.14rem;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    font-family: inherit;
    font-weight: bold;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none; }
    input[type="submit"]:disabled {
      background-color: #eee;
      color: var(--color-text-level-3); }
    input[type="submit"]:hover, input[type="submit"]:focus {
      color: var(--color-focus-fg);
      background-color: var(--color-focus-bg); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; }

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center; }

header {
  border-bottom: 4.8px solid var(--color-primary);
  padding: 0.6rem 0;
  font-weight: bold; }
  @media (width < 576px) {
    header {
      padding: 0.4rem 0; } }
  header .logo {
    gap: 1.6rem; }
    header .logo img {
      height: 50px; }
  header .title {
    display: inline-block;
    font-size: 1.75rem;
    line-height: 0.8; }
    @media (width < 576px) {
      header .title {
        display: none; } }

main {
  width: 100%;
  max-width: 732px;
  margin: 0 auto;
  padding: 1.5rem 0.9rem; }
  main .baseline {
    margin-bottom: 1.6rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-primary); }
  main .card {
    width: 100%;
    padding: 2.5rem;
    border-radius: var(--border-radius);
    border: 1.6px solid var(--border-color);
    margin-bottom: 1rem; }
    main .card .header-title {
      display: flex;
      align-items: center;
      margin-bottom: 1.8rem; }
      main .card .header-title .header-text,
      main .card .header-title .header-text-alone {
        font-weight: bold;
        font-size: 1.25rem;
        line-height: 1; }
        @media (width < 576px) {
          main .card .header-title .header-text,
          main .card .header-title .header-text-alone {
            font-weight: normal;
            font-size: 1.1rem; } }
    main .card .form-group {
      margin-bottom: 2.1rem;
      position: relative; }
      main .card .form-group input.form-control[aria-invalid="true"]:not(:focus),
      main .card .form-group .select-group [aria-invalid="true"],
      main .card .form-group .checkbox-group:has([aria-invalid="true"]) input[type="checkbox"],
      main .card .form-group .radio-group:has([aria-invalid="true"]) input[type="radio"] + span::before {
        box-shadow: 0px 0px 2px 1px var(--color-error);
        transition: 0.25s ease-out; }
      main .card .form-group .text-help {
        color: var(--color-primary);
        font-size: 1rem; }
        main .card .form-group .text-help.error {
          color: var(--color-error);
          font-weight: bold; }
    main .card .visibility {
      display: inline;
      position: absolute;
      top: 24px;
      right: 4px;
      cursor: pointer;
      border: none;
      background: transparent; }
      main .card .visibility:disabled {
        opacity: 0.5;
        cursor: default; }
      main .card .visibility:not(:disabled) > div {
        opacity: 0.7;
        cursor: pointer;
        transition: opacity 0.3s ease-in-out; }
        main .card .visibility:not(:disabled) > div:hover {
          opacity: 1; }
      main .card .visibility > div {
        border: none;
        margin-top: 0.35rem;
        width: 1rem;
        height: 1rem; }
        main .card .visibility > div.show {
          background-image: url("../img/eye-off.png");
          background-size: cover; }
        main .card .visibility > div.hide {
          background-image: url("../img/eye.png");
          background-size: cover; }
    main .card .select-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #999;
      border-radius: 4px;
      padding: 0.5rem 0.75rem;
      width: max-content;
      min-width: 200px;
      margin: 0; }
      @media (width < 576px) {
        main .card .select-wrapper {
          width: 100%; } }
      main .card .select-wrapper .label {
        font-weight: bold;
        color: #555; }
      main .card .select-wrapper select {
        border: none;
        background: transparent;
        font-weight: bold;
        color: #333;
        padding-left: 1rem;
        min-width: 2ch; }
        main .card .select-wrapper select:focus {
          outline: none; }
    main .card .message-sent {
      aspect-ratio: 1 / 1;
      width: 5rem;
      background: url("../img/message-sent.svg") center/contain no-repeat;
      margin: 2rem auto; }
    main .card .message-confirm {
      text-align: center; }
    main .card ul.booking-summary {
      font-size: 0.9rem;
      margin-bottom: 2rem;
      list-style: none; }
      @media (width < 576px) {
        main .card ul.booking-summary {
          display: inline-block;
          font-size: 0.8rem;
          margin-bottom: 0; } }
      main .card ul.booking-summary li {
        line-height: 1.5rem; }
        main .card ul.booking-summary li span:first-child {
          font-weight: bold; }
    main .card .responsive-table {
      overflow-x: auto; }
    main .card .booking-details {
      table-layout: fixed;
      width: 100%;
      min-width: 500px;
      font-size: 0.9rem; }
      main .card .booking-details thead {
        height: 4rem; }
      main .card .booking-details th, main .card .booking-details td {
        text-align: center;
        text-overflow: ellipsis; }
      main .card .booking-details th:nth-child(1),
      main .card .booking-details td:nth-child(1) {
        width: 15%; }
      main .card .booking-details th:nth-child(2),
      main .card .booking-details td:nth-child(2) {
        width: 30%; }
      main .card .booking-details th:nth-child(3),
      main .card .booking-details td:nth-child(3) {
        width: 15%; }
      main .card .booking-details th:nth-child(4),
      main .card .booking-details td:nth-child(4) {
        width: 30%; }
      main .card .booking-details th:nth-child(5),
      main .card .booking-details td:nth-child(5) {
        width: 10%; }
      @media (width < 576px) {
        main .card .booking-details {
          font-size: 0.8rem; } }
    main .card .footer {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      gap: 1.6rem;
      align-items: center;
      margin-top: 4rem; }
      main .card .footer.text-only {
        justify-content: center; }
      @media (width < 576px) {
        main .card .footer.booking {
          flex-direction: column;
          margin-top: 1rem; } }
      @media (width < 576px) {
        main .card .footer {
          flex-direction: column-reverse;
          gap: 1rem; } }
      main .card .footer .info a {
        text-decoration: none; }
      main .card .footer .info p a {
        text-decoration: underline; }
      main .card .footer .link-btn {
        cursor: pointer;
        width: auto;
        height: auto;
        padding: 0.6rem 0.8rem;
        color: #ffffff;
        background-color: var(--color-primary);
        border-radius: var(--border-radius);
        border: none;
        font-size: 1.14rem;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        font-family: inherit;
        font-weight: bold;
        text-decoration: none;
        -webkit-appearance: none;
        -moz-appearance: none; }
        main .card .footer .link-btn:disabled {
          background-color: #eee;
          color: var(--color-text-level-3); }
        main .card .footer .link-btn:hover, main .card .footer .link-btn:focus {
          color: var(--color-focus-fg);
          background-color: var(--color-focus-bg); }
      main .card .footer .link-btn, main .card .footer .submit {
        align-self: flex-end; }
        @media (width < 576px) {
          main .card .footer .link-btn, main .card .footer .submit {
            width: 100%; } }
    main .card #multi-days {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-top: 2rem; }
      main .card #multi-days button {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: inherit;
        font: inherit;
        cursor: pointer; }
        @media (width < 576px) {
          main .card #multi-days button {
            font-size: 0.8rem; } }
        main .card #multi-days button:hover, main .card #multi-days button:focus {
          color: var(--color-focus-bg); }
        main .card #multi-days button.loading {
          opacity: 0.5;
          pointer-events: none;
          cursor: wait; }
      main .card #multi-days .error {
        display: none;
        font-size: 0.8rem;
        color: var(--color-error);
        text-align: center; }
      main .card #multi-days #multi-days-result {
        font-size: 1rem; }
        @media (width < 576px) {
          main .card #multi-days #multi-days-result {
            font-size: 0.8rem; } }
        main .card #multi-days #multi-days-result .title {
          font-weight: bold; }
        main .card #multi-days #multi-days-result .additional-info {
          font-style: italic; }
        main .card #multi-days #multi-days-result .select-days {
          display: flex;
          justify-content: space-between;
          margin: 1.5rem auto;
          max-width: 80%;
          width: 100%;
          flex-wrap: nowrap; }
          @media (width < 576px) {
            main .card #multi-days #multi-days-result .select-days {
              max-width: 95%; } }
          main .card #multi-days #multi-days-result .select-days .day-check {
            display: flex;
            flex-direction: column;
            align-items: center; }
            main .card #multi-days #multi-days-result .select-days .day-check span {
              color: var(--color-text-level-3);
              margin-bottom: 0.3rem; }
              main .card #multi-days #multi-days-result .select-days .day-check span.unavailable-day {
                color: #ccc; }
            main .card #multi-days #multi-days-result .select-days .day-check input[type="checkbox"] {
              width: 30px;
              height: 30px;
              cursor: pointer; }
              @media (width < 576px) {
                main .card #multi-days #multi-days-result .select-days .day-check input[type="checkbox"] {
                  width: 20px;
                  height: 20px; } }
              main .card #multi-days #multi-days-result .select-days .day-check input[type="checkbox"]:disabled {
                cursor: not-allowed;
                opacity: 0.5; }
  main .disconnect {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem; }
  main .footer {
    font-size: 0.9rem;
    text-align: center; }
    @media (width < 576px) {
      main .footer {
        font-size: 0.8rem; } }