@layer components {
  .day-appointment-container {
    width: 100%;
  }
  .day-appointment-container .appointment-grid {
    display: grid;
    grid-auto-rows: 2rem;
    gap: 0.2rem;
    width: 100%;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .collapsed-slot-row {
    width: 100%;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    height: 100%;
    width: 12rem;
    width: 100%;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .time-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    height: 100%;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .time-column .time {
    height: 2rem;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    color: darkgray;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .time-column .time.full-hour {
    font-weight: bold;
    color: var(--mud-palette-text-primary);
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .time-column .time.current-time {
    font-weight: 600;
    color: var(--mud-palette-info);
    position: relative;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .time-column .time.current-time::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    background: var(--mud-palette-info);
    border-radius: 5px;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot {
    height: 2rem;
    border: 1px solid #f0f0f0;
    border-radius: var(--mud-default-borderradius);
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot.full-hour:not(.booked) {
    color: #546E7A;
    font-weight: bold;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot:not(.full-hour):not(.booked) {
    color: #90A4AE;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot.available {
    background-color: #E8F5E9 !important;
    border-color: #C8E6C9;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot.available:hover {
    background-color: #ECEFF1 !important;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot.weekend {
    background-color: #FFFDF2;
    border-color: #FFE082 !important;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot.booked {
    background-color: #E8EAF6;
    border-color: #D1C4E9;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot.inactive .mud-icon-default {
    color: #ccc;
  }
  .day-appointment-container .appointment-grid .appointment-grid-row .slot-row .value-slot.inactive:hover {
    background-color: #ECEFF1 !important;
  }
  .appointment-list {
    width: 100%;
  }
  .week-appointment-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
  }
  .week-appointment-container .week-appointment-grid {
    display: grid;
    grid-template-columns: 2rem repeat(7, 8rem);
    gap: 1rem;
    align-items: center;
  }
  .week-appointment-container .week-appointment-grid .day {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    border: 1px solid #f0f0f0;
    border-radius: var(--mud-default-borderradius);
    background-color: #ECEFF1;
  }
  .week-appointment-container .week-appointment-grid .day.weekend {
    background-color: #FFF8E1;
  }
  .week-appointment-container .week-appointment-grid .day .day-of-week {
    font-weight: 600;
    text-align: center;
    font-size: 0.8rem;
  }
  .week-appointment-container .week-appointment-grid .day .day-of-week.today {
    color: var(--mud-palette-info);
  }
  .week-appointment-container .week-appointment-grid .day .day-value {
    font-size: 1.2rem;
  }
  .week-appointment-container .week-appointment-grid .day .day-value.today {
    color: var(--mud-palette-info);
  }
  .week-appointment-container .week-appointment-grid .time-column {
    display: grid;
    grid-auto-rows: 2rem;
    gap: 0.2rem;
  }
  .week-appointment-container .week-appointment-grid .time-column .time {
    height: 2rem;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    color: darkgray;
  }
  .week-appointment-container .week-appointment-grid .time-column .time.full-hour {
    font-weight: bold;
    color: var(--mud-palette-text-primary);
  }
  .week-appointment-container .week-appointment-grid .time-column .time.current-time {
    font-weight: 600;
    color: var(--mud-palette-info);
    position: relative;
  }
  .week-appointment-container .week-appointment-grid .time-column .time.current-time::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    background: var(--mud-palette-info);
    border-radius: 5px;
  }
  .week-appointment-container .week-appointment-grid .week-appointment-collapse-marker {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .week-appointment-container .week-appointment-grid .week-appointment-collapse-control {
    grid-column: 2/-1;
    min-width: 0;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid {
    display: grid;
    grid-auto-rows: 2rem;
    gap: 0.2rem;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .collapsed-slot-row {
    width: 100%;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 1rem;
    height: 100%;
    width: 100%;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot {
    border: 1px solid #f0f0f0;
    border-radius: var(--mud-default-borderradius);
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot.full-hour:not(.booked) {
    color: #546E7A;
    font-weight: bold;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot:not(.full-hour):not(.booked) {
    color: #90A4AE;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot.available {
    background-color: #E8F5E9 !important;
    border-color: #C8E6C9;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot.available:hover {
    background-color: #ECEFF1 !important;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot.weekend {
    background-color: #FFFDF2;
    border-color: #FFE082 !important;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot.booked {
    background-color: #E8EAF6;
    border-color: #D1C4E9;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot.inactive .mud-icon-default {
    color: #ccc;
  }
  .week-appointment-container .week-appointment-grid .appointment-grid .appointment-grid-row .slot-row .value-slot.inactive:hover {
    background-color: #ECEFF1 !important;
  }
  .customer-selector-height {
    height: 30rem;
  }
  .customer-selector-list {
    max-height: 20rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

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