:root {
  /* $spinnerSize is defined in assets/styles/components/_ladda. Unfortunately we cannot use that because that is in SCSS and we are writing pure CSS. As a result, I am redefining it here: */
  --spinner-size: 32px;
  --simple-banner-height: 46px;
}

/* Ensures that all general modals will overflow as expected */
#general_modal #frame_modal .modal-content {
  overflow: auto;
  max-height: 275px;
}

/* Every general modal was scrolling because the ladda-button's spinner is absolutely positioned and overflowing the height of the button. This ensures that the spinner is actually in the middle. */
.modal-actions .ladda-button .ladda-spinner {
  top: calc(50% - (var(--spinner-size) / 2));
}

/* ISD-1877: The payment button text is now populated by the CMS, which means the content will have variable width. */
.modal-right-content .content .online-offline-choice .button {
  width: auto;
  padding: 0 20px;
  min-width: 135px;
  margin-bottom: 10px; /* In case the buttons stack */
}

/* Fixes loading spinner appearing to have a border on two sides of it due to horizontal and vertical scrollbars */
.modal-right-content.loading-section .content:after {
  overflow: visible;
}

.panago-delivery--notification {
  position: fixed;
  max-height: var(--simple-banner-height);
  width: 100%;
  background-color: transparent;
  z-index: 1001;
  top: 0;
}