* {
  box-sizing: var(--air-box-sizing, border-box);
}

.modal-overlay, .modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal {
  display: none;
  z-index: var(--air-modal-z-index, 40);
  position: fixed;
  flex-direction: var(--air-modal-flex-direction, column);
  justify-content: var(--air-modal-flex-justify-position, center);
  align-items: var(--air-modal-flex-align-items, center);
  overflow: hidden;
}
.modal.is-visible {
  display: flex;
}

.modal-overlay {
  background-color: var(--air-modal-overlay-background-color, rgba(0, 0, 0, 0.38));
}

.modal-content {
  display: block;
  position: relative;
  width: var(--air-modal-content-width, 28rem);
  max-width: var(--air-modal-max-width, calc(100% - var(--air-spacing-05, 2rem)));
  max-height: var(--air-modal-max-height, 100vh);
  border-radius: var(--air-modal-border-radius, var(--air-border-radius, 4px));
  background-color: var(--air-modal-body-background-color, var(--air-color-white, #ffffff));
  box-shadow: var(--air-modal-box-shadow, var(--air-box-shadow-02, 0px 0px 10px rgba(0, 0, 0, 0.25)));
}
@media (max-width: 992px) {
  .modal-content {
    max-height: var(--air-mobile-modal-max-height, 100vh);
  }
}

.modal-header {
  padding-top: var(--air-modal-header-padding-top, var(--air-spacing-03, 1rem));
  padding-right: var(--air-modal-header-padding-right, var(--air-spacing-05, 2rem));
  padding-bottom: var(--air-modal-header-padding-bottom, var(--air-spacing-03, 1rem));
  padding-left: var(--air-modal-header-padding-left, var(--air-spacing-05, 2rem));
}
@media (max-width: 992px) {
  .modal-header {
    padding-top: var(--air-mobile-modal-header-padding-top, var(--air-spacing-02, 0.5rem));
    padding-right: var(--air-mobile-modal-header-padding-right, var(--air-spacing-03, 1rem));
    padding-bottom: var(--air-mobile-modal-header-padding-bottom, var(--air-spacing-02, 0.5rem));
    padding-left: var(--air-mobile-modal-header-padding-left, var(--air-spacing-03, 1rem));
  }
}

.modal-footer {
  padding-top: var(--air-modal-footer-padding-top, var(--air-spacing-03, 1rem));
  padding-right: var(--air-modal-footer-padding-right, var(--air-spacing-05, 2rem));
  padding-bottom: var(--air-modal-footer-padding-bottom, var(--air-spacing-03, 1rem));
  padding-left: var(--air-modal-footer-padding-left, var(--air-spacing-05, 2rem));
}
@media (max-width: 992px) {
  .modal-footer {
    padding-top: var(--air-mobile-modal-footer-padding-top, var(--air-spacing-02, 0.5rem));
    padding-right: var(--air-mobile-modal-footer-padding-right, var(--air-spacing-03, 1rem));
    padding-bottom: var(--air-mobile-modal-footer-padding-bottom, var(--air-spacing-02, 0.5rem));
    padding-left: var(--air-mobile-modal-footer-padding-left, var(--air-spacing-03, 1rem));
  }
}

.modal-body {
  padding-top: var(--air-modal-padding-top, var(--air-spacing-05, 2rem));
  padding-right: var(--air-modal-padding-right, var(--air-spacing-05, 2rem));
  padding-bottom: var(--air-modal-padding-bottom, var(--air-spacing-05, 2rem));
  padding-left: var(--air-modal-padding-left, var(--air-spacing-05, 2rem));
}
@media (max-width: 992px) {
  .modal-body {
    padding-top: var(--air-mobile-modal-padding-top, var(--air-spacing-03, 1rem));
    padding-right: var(--air-mobile-modal-padding-right, var(--air-spacing-03, 1rem));
    padding-bottom: var(--air-mobile-modal-padding-bottom, var(--air-spacing-03, 1rem));
    padding-left: var(--air-mobile-modal-padding-left, var(--air-spacing-03, 1rem));
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--air-modal-header-box-shadow, var(--air-box-shadow-02, 0px 0px 10px rgba(0, 0, 0, 0.25)));
}

.modal-body {
  overflow: auto;
  max-height: var(--air-modal-body-max-height, 65vh);
}

.modal-footer {
  box-shadow: var(--air-modal-footer-box-shadow, var(--air-box-shadow-02, 0px 0px 10px rgba(0, 0, 0, 0.25)));
}

.modal-close {
  position: relative;
  cursor: pointer;
  width: var(--air-modal-close-size, 24px);
  height: var(--air-modal-close-size, 24px);
  margin: var(--air-modal-close-margin, 0);
}