/* =========================================================
   RSYS typeC - Calendar base
   ========================================================= */

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont.eot?v=4.7.0");
  src:
    url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0")
      format("embedded-opentype"),
    url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
    url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"),
    url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"),
    url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

:root {
  --rsys-typec-icon-loading: "\f1ce";
  --rsys-typec-icon-vacant: "\f10c";
  --rsys-typec-icon-partially: "\f06a";
  --rsys-typec-icon-info: "\f05a";
  --rsys-typec-icon-full: "\f00d";
  --rsys-typec-icon-close: "\f057";
  --rsys-typec-icon-closed: "\f056";
  --rsys-typec-icon-disabled: "\f05e";

  --rsys-typec-icon-prev: "\f053";
  --rsys-typec-icon-next: "\f054";
  --rsys-typec-icon-info-circle: "\f05a ";
  --rsys-typec-icon-exclamation: "\f071";

  --rsys-typec-day-min-width: 56px;
  --rsys-typec-day-height: 76px;
  --rsys-typec-day-radius: 2px;
  --rsys-typec-day-gap: 6px;
  --rsys-typec-day-padding: 6px 4px;

  --rsys-typec-week-font-size: 12px;
  --rsys-typec-date-font-size: 14px;
  --rsys-typec-status-font-size: 18px;

  --rsys-typec-input_normal-border_color: #797979;

  --rsys-typec-color-primary: #e33c51;
  --rsys-typec-color-error: #e91e63;

  --rsys-typec-color-text: #333;

  --rsys-typec-color-disabled-bg: #9e9e9e;
  --rsys-typec-color-disabled-border: #9e9e9e;
  --rsys-typec-color-disabled-text: #fff;

  --rsys-typec-color-invalid-border: #0071a1;
  --rsys-typec-color-invalid-bg: #fbfbfb;

  --rsys-typec-status-color-loading: #9e9e9e;
  --rsys-typec-status-color-vacant: #4296c3;
  --rsys-typec-status-color-partially: #37c191;
  --rsys-typec-status-color-full: #c62828;
  --rsys-typec-status-color-closed: #c62828;
  --rsys-typec-status-color-disabled: #9e9e9e;
}
.rsys-typec {
  width: 100%;
  box-sizing: border-box;
}

.rsys-typec-calendar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.rsys-typec-days {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.rsys-typec-days-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 7.2);
  gap: 0;
  width: 100%;
}

.rsys-typec-day-slot {
  box-sizing: border-box;
  padding: 0 3px;
}

.rsys-typec-day {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: var(--rsys-typec-day-height);
  padding: var(--rsys-typec-day-padding);
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--rsys-typec-color-disabled-border);
  border-radius: var(--rsys-typec-day-radius);
  background: #fff;
}

.rsys-typec-day-week,
.rsys-typec-day-date,
.rsys-typec-day-status {
  display: block;
  line-height: 1.2;
  white-space: nowrap;
}

.rsys-typec-day-week {
  font-size: var(--rsys-typec-week-font-size);
  font-weight: bold;
}

.rsys-typec-day-date {
  font-size: var(--rsys-typec-date-font-size);
  font-weight: 600;
}

.rsys-typec-day-status {
  width: 1.25em;
  height: 1.25em;
  text-align: center;
  font-size: var(--rsys-typec-status-font-size);
}

.rsys-typec-day-status::before {
  font-family: "FontAwesome";
  display: inline-block;
  line-height: 1;
}

.rsys-typec button:focus,
.rsys-typec button:focus-visible {
  outline: none !important;
}

.rsys-typec-nav {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  cursor: pointer;
  border: 1px solid var(--rsys-typec-color-disabled-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rsys-typec-nav::before {
  font-family: "FontAwesome";
  display: inline-block;
  line-height: 1;
}

.rsys-typec-nav-prev::before {
  content: var(--rsys-typec-icon-prev);
}

.rsys-typec-nav-next::before {
  content: var(--rsys-typec-icon-next);
}

.rsys-typec-day-status.is-loading::before {
  content: var(--rsys-typec-icon-loading);
  font-size: 13px;
  animation: rsys-typec-spin 1s linear infinite;
  color: var(--rsys-typec-status-color-loading);
}

.rsys-typec-day-status.is-vacant::before {
  content: var(--rsys-typec-icon-vacant);
  color: var(--rsys-typec-status-color-vacant);
}

.rsys-typec-day-status.is-partially::before {
  content: var(--rsys-typec-icon-info);
  color: var(--rsys-typec-status-color-partially);
}

.rsys-typec-day-status.is-full::before {
  content: var(--rsys-typec-icon-full);
  color: var(--rsys-typec-status-color-full);
  opacity: 1;
}

.rsys-typec-day-status.is-closed::before {
  content: var(--rsys-typec-icon-closed);
  color: var(--rsys-typec-color-error);
  opacity: 1;
}

.rsys-typec-day-status.is-disabled::before {
  content: var(--rsys-typec-icon-disabled);
  color: var(--rsys-typec-status-color-disabled);
}

.rsys-typec-day.is-selected .rsys-typec-day-status::before {
  color: #fff;
}

.rsys-typec-day:disabled,
.rsys-typec-day[aria-disabled="true"] {
  cursor: default;
  color: inherit;
  background: #fff;
  cursor: not-allowed;
}

.rsys-typec-day:not(.is-selected) .rsys-typec-day-week.is-saturday {
  color: #0071a1;
}

.rsys-typec-day:not(.is-selected) .rsys-typec-day-week.is-sunday {
  color: #d80000;
}

.rsys-typec-day.is-selected {
  background: var(--rsys-typec-color-primary);
  border-color: var(--rsys-typec-color-primary);
  color: #fff;
}

@media (max-width: 768px) {
  :root {
    --rsys-typec-day-min-width: 52px;
    --rsys-typec-day-height: 72px;
    --rsys-typec-week-font-size: 11px;
    --rsys-typec-date-font-size: 13px;
    --rsys-typec-status-font-size: 17px;
  }

  .rsys-typec-nav {
    display: none;
  }
}

/* =========================================================
   typeC TimeSlot
   ========================================================= */

.rsys-typec-time-slot-wrapper {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
}

.rsys-typec-time-slot-wrapper.is-entering {
  opacity: 0;
  transform: translateY(-8px);
  will-change: opacity, transform;
}

.rsys-typec-time-slot-wrapper.is-entering.is-entered {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 300ms ease,
    transform 420ms ease;
}

.rsys-typec-time-slot-wrapper[hidden] {
  display: none;
}

.rsys-typec-time-slots {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.rsys-typec-time-slots-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 7.2);
  gap: 0;
  width: 100%;
}

.rsys-typec-time-slot-list[hidden] {
  display: none;
}

.rsys-typec-time-slot-nav {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
}

.rsys-typec-time-slot-nav-prev::before {
  content: var(--rsys-typec-icon-prev);
}

.rsys-typec-time-slot-nav-next::before {
  content: var(--rsys-typec-icon-next);
}

.rsys-typec-time-slot-item {
  box-sizing: border-box;
  padding: 0 3px;
}

.rsys-typec-time-slot {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: var(--rsys-typec-day-height);
  padding: var(--rsys-typec-day-padding);
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--rsys-typec-color-disabled-border);
  border-radius: var(--rsys-typec-day-radius);
  background: #fff;
}

.rsys-typec-time-slots::-webkit-scrollbar {
  display: none;
}

.rsys-typec-time-slot-label,
.rsys-typec-time-slot-status {
  display: block;
  line-height: 1.2;
  white-space: nowrap;
}

.rsys-typec-time-slot-label {
  font-size: var(--rsys-typec-date-font-size);
  font-weight: 600;
}

.rsys-typec-time-slot-status {
  width: 1.25em;
  height: 1.25em;
  text-align: center;
  font-size: var(--rsys-typec-status-font-size);
}

.rsys-typec-time-slot-status::before {
  font-family: "FontAwesome";
  display: inline-block;
  line-height: 1;
}

.rsys-typec-time-slot-status.is-loading::before {
  content: var(--rsys-typec-icon-loading);
  font-size: 13px;
  animation: rsys-typec-spin 1s linear infinite;
  color: var(--rsys-typec-status-color-loading);
}

.rsys-typec-time-slot.is-available .rsys-typec-time-slot-status::before {
  content: var(--rsys-typec-icon-vacant);
  color: var(--rsys-typec-status-color-vacant);
}

.rsys-typec-time-slot.is-limited .rsys-typec-time-slot-status::before {
  content: var(--rsys-typec-icon-info);
  color: var(--rsys-typec-status-color-partially);
}

.rsys-typec-time-slot.is-full .rsys-typec-time-slot-status::before {
  content: var(--rsys-typec-icon-full);
  color: var(--rsys-typec-status-color-full);
}

.rsys-typec-time-slot.is-closed .rsys-typec-time-slot-status::before {
  content: var(--rsys-typec-icon-closed);
  color: var(--rsys-typec-status-color-closed);
}

.rsys-typec-time-slot.is-selected {
  background: var(--rsys-typec-color-primary);
  border-color: var(--rsys-typec-color-primary);
  color: #fff;
}

.rsys-typec-time-slot.is-selected .rsys-typec-time-slot-status::before {
  color: #fff;
}

.rsys-typec-time-slot:disabled,
.rsys-typec-time-slot[aria-disabled="true"] {
  cursor: default;
  color: inherit;
  background: #fff;
  border-color: var(--rsys-typec-color-disabled-border);
  cursor: not-allowed;
}

@media (min-width: 769px) {
  .rsys-typec-days,
  .rsys-typec-time-slots {
    overflow: hidden;
  }

  .rsys-typec-days-track,
  .rsys-typec-time-slots-track {
    grid-auto-columns: calc(100% / 7);
  }
}

/* =========================================================
   typeC Actions
   ========================================================= */

.rsys-typec-actions {
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
}

.rsys-typec-reserve-button {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--rsys-typec-color-primary);
  border-radius: var(--rsys-typec-day-radius);
  background: var(--rsys-typec-color-primary);
  color: #fff;
  font-weight: 600;
}

.rsys-typec-reserve-button:disabled,
.rsys-typec-reserve-button[aria-disabled="true"] {
  cursor: default;
  border-color: var(--rsys-typec-input_normal-border_color);
  background: var(--rsys-typec-color-invalid-bg);
  color: var(--rsys-typec-input_normal-border_color);
  opacity: 1;
  cursor: not-allowed;
}

@keyframes rsys-typec-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   typeC Modal
   ========================================================= */

.rsys-typec-modal[hidden] {
  display: none;
}

.rsys-typec-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.rsys-typec-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.rsys-typec-modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;

  width: calc(100% - 24px);
  max-width: 560px;
  max-height: calc(100vh - 24px);

  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;

  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.rsys-typec-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  border-bottom: 1px solid #d7d4d4;
}

.rsys-typec-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.rsys-typec-modal-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.close_button::before {
  font-family: "FontAwesome";
  content: var(--rsys-typec-icon-close);
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  color: var(--rsys-typec-color-disabled-bg);
}

.rsys-typec-modal-body {
  overflow-y: auto;
  padding: 16px;
}

.rsys-typec-modal-step[hidden] {
  display: none;
}

.rsys-typec-form-row + .rsys-typec-form-row {
  margin-top: 12px;
}

.rsys-typec-form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.rsys-typec-required {
  margin-left: 6px;
  padding: 0 5px 2px;
  font-size: 11px;
  background: var(--rsys-typec-status-color-closed);
  color: var(--rsys-typec-color-disabled-text);
  border-radius: 4px;
}

.rsys-typec-input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 10px;

  border: 1px solid var(--rsys-typec-input_normal-border_color);
  border-radius: 2px;
  background: #fff;
}

.rsys-typec-input.is-invalid {
  border-color: var(--rsys-typec-color-invalid-border);
  background: var(--rsys-typec-color-invalid-bg);
}

.rsys-typec-form-row small.error_sign {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--rsys-typec-color-invalid-border);
  visibility: hidden;
}

.rsys-typec-form-row small.error_sign.is-visible {
  visibility: visible;
}

.rsys-typec-input.is-invalid {
  border-color: var(--rsys-typec-color-invalid-border);
  background: var(--rsys-typec-color-invalid-bg);
}

.rsys-typec-input:focus {
  outline-width: 1.2px;
  outline-color: var(--rsys-typec-color-invalid-border);
}

.rsys-typec-form-row small.error_sign {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--rsys-typec-color-error);
  visibility: hidden;
}
.rsys-typec-form-row small.error_sign::before {
  font-family: "FontAwesome";
  display: inline-block;
  margin-right: 4px;
  content: var(--rsys-typec-icon-exclamation);
}

.rsys-typec-form-row small.error_sign.is-visible {
  visibility: visible;
}

.rsys-typec-confirm-list {
  margin: 0;
  padding: 0;
}

.rsys-typec-confirm-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  align-items: center;

  padding: 6px 0;

  border-bottom: 1px solid #ececec;
}

.rsys-typec-confirm-row dt {
  margin: 0;

  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.rsys-typec-confirm-row dd {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--rsys-typec-color-text);
  word-break: break-word;
}

.rsys-typec-privacy-consent {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 10px;

  font-size: 13px;
  line-height: 1.4;
}

.rsys-typec-privacy-consent input[type="checkbox"] {
  accent-color: var(--rsys-typec-color-primary);
}

.rsys-typec-privacy-consent input[type="checkbox"]:focus,
.rsys-typec-privacy-consent input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.rsys-typec-submit-loader[hidden],
.rsys-typec-complete[hidden] {
  display: none;
}

.rsys-typec-submit-loader {
  text-align: center;
  padding: 24px 0;
}

.rsys-typec-submit-loader-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  font-size: 28px;
  line-height: 1;
}

.rsys-typec-submit-loader-icon::before {
  font-family: "FontAwesome";
  content: var(--rsys-typec-icon-loading);
  display: inline-block;
  animation: rsys-typec-spin 1s linear infinite;
}

.rsys-typec-submit-loader-text {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 500;
}

.rsys-typec-complete {
  text-align: center;
  padding: 24px 0;
  font-size: 14px;
  font-weight: 400;
}

.rsys-typec-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.rsys-typec-modal-button {
  flex: 1 1 auto;
  min-height: 44px;

  border: 1px solid #d7d4d4;
  background: #fff;

  cursor: pointer;
}

.rsys-typec-modal-button-primary {
  border-color: var(--rsys-typec-color-primary);
  background: var(--rsys-typec-color-primary);
  color: #fff;
}

.rsys-typec-modal-button:disabled,
.rsys-typec-modal-button[aria-disabled="true"] {
  cursor: default;
}

.rsys-typec-modal-button-primary:disabled,
.rsys-typec-modal-button-primary[aria-disabled="true"] {
  border-color: var(--rsys-typec-color-disabled-border);
  background: var(--rsys-typec-color-disabled-bg);
  color: var(--rsys-typec-color-disabled-text);
  opacity: 1;
}

@media (max-width: 768px) {
  .rsys-typec-modal-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
  }

  .rsys-typec-modal-actions {
    flex-direction: column;
  }

  .rsys-typec-confirm-row {
    grid-template-columns: 76px 1fr;
    gap: 6px;

    padding: 5px 0;
  }

  .rsys-typec-confirm-row dt,
  .rsys-typec-confirm-row dd {
    font-size: 12px;
    line-height: 1.35;
  }
}
/* =========================================================
   typeC Policy
   ========================================================= */

.rsys-typec-policy-link {
  display: inline-block;
  cursor: pointer;
  color: var(--rsys-typec-color-invalid-border);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rsys-typec-policy-modal[hidden] {
  display: none;
}

.rsys-typec-policy-modal {
  margin-top: 8px;

  max-height: 0;
  overflow: hidden;

  opacity: 0;

  border: 1px solid #d7d4d4;
  border-radius: 2px;

  background: #fff;

  transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
}

.rsys-typec-policy-modal.is-open {
  max-height: 320px;

  opacity: 1;

  overflow-y: auto;

  padding: 10px;
}

.rsys-typec-policy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 12px;
}

.rsys-typec-policy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  border-bottom: 1px solid #d7d4d4;
}

.rsys-typec-policy-title {
  margin: 0;

  font-size: 16px;
  font-weight: 600;
}

.rsys-typec-policy-close {
  width: 32px;
  height: 32px;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}

.rsys-typec-policy-content {
  font-size: 13px;
  line-height: 1.7;
}

.rsys-typec-policy-body h3,
.rsys-typec-policy-body h4 {
  font-size: small;
  font-weight: 600;
}

.rsys-typec-policy-body p {
  font-size: small;
  font-weight: 500;
}