.account-booking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

.account-booking-grid--limits {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.account-booking-limit-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
}

.account-booking-grid--limits .account-booking-limit-field label {
  display: block;
  min-height: 0;
  margin: 0;
}

.account-booking-grid--limits
  .account-booking-limit-field
  .account-booking-input {
  margin-top: 0;
  justify-self: end;
}

.account-booking-reminder-list {
  display: grid;
  gap: 12px;
}

.account-booking-reminder-row {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #d9e0e7;
  border-radius: 12px;
  background: #fafcfe;
}

.account-booking-reminder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-booking-reminder-title {
  min-width: 0;
}

.account-booking-reminder-row .account-inline-check {
  white-space: nowrap;
}

.account-booking-reminder-row .account-booking-input:disabled {
  opacity: 0.65;
}

.account-booking-grid--row {
  align-items: end;
  margin-bottom: 0;
}

.account-booking-grid--service-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.account-booking-grid--schedule-row {
  grid-template-columns:
    minmax(120px, 150px) minmax(120px, 150px)
    max-content max-content;
  grid-template-areas: "schedule-start schedule-end schedule-active schedule-actions";
}

.account-booking-grid--exception-row {
  grid-template-columns:
    minmax(135px, 160px) minmax(145px, 180px) minmax(110px, 125px)
    minmax(110px, 125px);
  grid-template-areas:
    "exception-date exception-mode exception-start exception-end"
    "exception-note exception-note exception-note exception-note";
  column-gap: 24px;
}

.account-booking-grid--service-row .account-repeat-field--service-label {
  min-width: 0;
}

.account-booking-grid--service-row .account-repeat-field--service-label input {
  border: 1px solid rgba(33, 33, 39, 0.12);
}

.account-service-row-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.account-service-row-section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(33, 33, 39, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.account-service-row-section-title {
  margin-bottom: 10px;
  color: rgba(33, 33, 39, 0.72);
  font-family: "Roboto Medium", sans-serif;
  font-size: 12pt;
}

.account-service-row-fields {
  display: grid;
  gap: 12px;
  align-items: end;
}

.account-service-row-fields--time {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-service-row-fields--price {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-repeat-row[data-vat-mode="0"] .account-service-row-fields--price {
  grid-template-columns: minmax(140px, 220px);
}

.account-service-row-fields .account-repeat-field label {
  display: flex;
  align-items: flex-end;
  min-height: 2.35em;
}

.account-service-row-fields--price .account-repeat-field label {
  min-height: 0;
}

.account-service-row-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 16px;
  min-width: 0;
  padding-top: 2px;
}

.account-booking-grid--service-row .account-repeat-field--service-active {
  padding-bottom: 0;
}

.account-booking-grid--service-row .account-repeat-field--service-actions {
  min-width: 0;
}

.account-booking-grid--schedule-row .account-repeat-field--schedule-start {
  grid-area: schedule-start;
}

.account-booking-grid--schedule-row .account-repeat-field--schedule-end {
  grid-area: schedule-end;
}

.account-booking-grid--schedule-row .account-repeat-field--schedule-active {
  grid-area: schedule-active;
  justify-self: end;
}

.account-booking-grid--schedule-row .account-repeat-field--schedule-actions {
  grid-area: schedule-actions;
  justify-self: end;
}

.account-booking-grid--schedule-row
  .account-repeat-field--schedule-active
  .account-inline-check,
.account-booking-grid--schedule-row
  .account-repeat-field--schedule-actions
  .app-button {
  white-space: nowrap;
}

.account-booking-grid--exception-row .account-repeat-field--exception-note {
  grid-area: exception-note;
}

.account-booking-grid--exception-row .account-repeat-field--exception-date {
  grid-area: exception-date;
}

.account-booking-grid--exception-row .account-repeat-field--exception-mode {
  grid-area: exception-mode;
  padding-left: 0;
}

.account-booking-grid--exception-row .account-repeat-field--exception-start {
  grid-area: exception-start;
}

.account-booking-grid--exception-row .account-repeat-field--exception-end {
  grid-area: exception-end;
}

#accountBookingEnabledWrap {
  margin-bottom: 12px;
}

#accountBookingEnabledWrap .checkGroupBody {
  padding-top: 0;
}

@media (max-width: 1040px) {
  .account-booking-grid--schedule-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content max-content;
    grid-template-areas:
      "schedule-start schedule-start schedule-end schedule-end"
      ". . schedule-active schedule-actions";
  }

  .account-booking-grid--schedule-row .account-repeat-field--schedule-active,
  .account-booking-grid--schedule-row .account-repeat-field--schedule-actions {
    justify-self: start;
  }

  .account-booking-grid--schedule-row
    .account-repeat-field--schedule-actions
    .app-button {
    width: auto;
  }
}

@media (max-width: 820px) {
  .account-booking-grid,
  .account-booking-grid--row,
  .account-booking-grid--service-row,
  .account-booking-grid--schedule-row,
  .account-booking-grid--exception-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .account-booking-grid--service-row .account-repeat-field--service-label,
  .account-booking-grid--service-row .account-repeat-field--service-duration,
  .account-booking-grid--service-row .account-repeat-field--service-buffer,
  .account-booking-grid--service-row .account-repeat-field--service-price,
  .account-booking-grid--service-row .account-repeat-field--service-vat,
  .account-booking-grid--service-row .account-repeat-field--service-price-gross,
  .account-booking-grid--service-row .account-repeat-field--service-active,
  .account-booking-grid--service-row .account-repeat-field--service-actions,
  .account-booking-grid--schedule-row .account-repeat-field--schedule-start,
  .account-booking-grid--schedule-row .account-repeat-field--schedule-end,
  .account-booking-grid--schedule-row .account-repeat-field--schedule-active,
  .account-booking-grid--schedule-row .account-repeat-field--schedule-actions,
  .account-booking-grid--exception-row .account-repeat-field--exception-date,
  .account-booking-grid--exception-row .account-repeat-field--exception-mode,
  .account-booking-grid--exception-row .account-repeat-field--exception-start,
  .account-booking-grid--exception-row .account-repeat-field--exception-end,
  .account-booking-grid--exception-row .account-repeat-field--exception-note {
    grid-area: auto;
  }

  .account-booking-grid--schedule-row
    .account-repeat-field--schedule-actions
    .app-button {
    width: 100%;
  }

  .account-service-row-fields,
  .account-service-row-fields--time,
  .account-service-row-fields--price,
  .account-repeat-row[data-vat-mode="0"] .account-service-row-fields--price {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-service-row-fields .account-repeat-field label {
    min-height: 0;
  }

  .account-service-row-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .account-booking-grid--service-row
    .account-repeat-field--service-actions
    .app-button {
    width: 100%;
  }

  .account-booking-grid--limits .account-booking-limit-field {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .account-booking-grid--limits .account-booking-limit-field label {
    min-height: 0;
  }

  .account-booking-grid--limits
    .account-booking-limit-field
    .account-booking-input {
    justify-self: stretch;
  }

  .account-booking-reminder-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-repeat-field--checkbox,
  .account-repeat-field--actions {
    padding-bottom: 0;
  }
}