/* for print friendly views */
.print-only-caption {
  display: none;
}

@media print {
  html,
  body {
    margin: 2em;
    height: max-content;
  }

  .print-only-caption {
    display: table-caption;
    caption-side: top;
    font-weight: bold;
    font-size: x-large;
  }

  .hide-for-print {
    display: none;
  }

  table {
    page-break-inside: avoid;
  }
  .table tbody > tr.active:after {
    border: none;
  }
}

/* ideally this would be added to base styles */
button:disabled,
input:disabled,
select:disabled,
.styled-check.disabled,
.styled-check.disabled .icon {
  pointer-events: initial !important;
  cursor: not-allowed;
}

.styled-check.disabled .icon::after {
  opacity: 0.5;
}

/* this allows the calendar indicator to appear on date fields
Frank has indicated that he will remove the hiding from the base
styles in the future so then this could be removed */
input[type="date"]::-webkit-calendar-picker-indicator {
  position: unset;
  opacity: 1;
}

/* this was required to make the left side menu show on top of anything
screens, modals, etc, it could probably be done better */
.col-sidebar-primary.collapse.show + .dim-primary-sidebar,
.col-sidebar-primary.collapsing + .dim-primary-sidebar {
  z-index: 9999;
}

.col-sidebar-primary.collapse.show,
.col-sidebar-primary.collapsing {
  z-index: 10000;
}

@media (max-width: 991.98px) {
  .content-viewport.slide-in-sidebar .col-sidebar {
    z-index: 1049;
  }
}

/* needed to make the user menu be no top of slide-in-sidebar */
.app-header {
  z-index: 1050;
}

/* these are needed for the current implementation of inquiry form but that
design isn't finalized yet so likely these can go away in the future */
.inquiry-form-close-tab-icon {
  font-size: 1rem;
  font-weight: 550;
  margin-left: 10px;
}

.inquiry-form-close-tab-icon:hover {
  color: #c9178d;
}

/* UX never created a design for the "login" screen and error boundary */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background-color: #f5f5f5;
}

.login-container > .content-pad .card {
  padding: 20px;
  background-color: var(--bs-primary);
}

.login-container > .content-pad h2 {
  color: var(--bs-white);
}

.login-container > .content-pad button {
  width: 100%;
}

.error-boundary-message-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background-color: #f5f5f5;
}

.error-boundary-message-container > .content-pad {
  width: 90%;
  max-width: 500px;
  color: var(--bs-white);
}

.error-boundary-message-container > .content-pad .card {
  padding: 20px;
  background-color: var(--bs-primary);
}

.error-boundary-message-container > .content-pad button {
  width: 100%;
}

/* without this floating labels get weirdly positioned */
.col.form-floating label {
  left: unset;
  padding-left: 16px;
}

/* these support "nested" modals, i.e., modals on top of modals */
.modal:nth-of-type(2) {
  z-index: 1080;
}

.modal-backdrop:nth-of-type(2) {
  z-index: 1070;
}

.modal:nth-of-type(3) {
  z-index: 1100;
}

.modal-backdrop:nth-of-type(3) {
  z-index: 1090;
}

.modal:nth-of-type(4) {
  z-index: 1120;
}

.modal-backdrop:nth-of-type(4) {
  z-index: 1110;
}

.modal:nth-of-type(5) {
  z-index: 1140;
}

.modal-backdrop:nth-of-type(5) {
  z-index: 1130;
}

.modal:nth-of-type(6) {
  z-index: 1160;
}

.modal-backdrop:nth-of-type(6) {
  z-index: 1140;
}

.modal:nth-of-type(7) {
  z-index: 1180;
}

.modal-backdrop:nth-of-type(7) {
  z-index: 1170;
}

/* really we never had a proper Frank design for the onboarding wizard, but I got it to this minimal for now */
.onboarding-wizard-modal-body {
  height: 460px;
  max-height: 90vh;
}

/* these are used by search-select and opt-out-multiselect, these should become widgets designed by Frank/Elliot */
.combobox-container {
  position: relative;
}
.combobox-container label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 48px);
}
.combobox-container ul.form-select.combobox-select-list {
  margin-top: 5px;
  list-style: none;
  position: absolute;
  overflow: auto;
  height: auto;
  max-height: 200px;
  width: 100%;
  background: white;
  z-index: 1000;
}
.combobox-container ul.form-select.combobox-select-list li {
  cursor: pointer;
}
.combobox-container.multi-select label {
  left: 0px !important;
}
.combobox-container.multi-select .form-control {
  padding-left: 1rem;
}
.combobox-container.multi-select .fal.fa-search {
  right: 0.75rem;
  top: 65%;
  left: unset;
}
input.disabled-custom-toggle:disabled {
  cursor: not-allowed;
  /* overrides !important property on bg-white class */
  background-color: #e9ecef !important;
}
input.disabled-custom-toggle:enabled {
  cursor: pointer;
}

/* we're kind of stuck with these short of completely replacing our toast infrastructure */
#utility-root {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

#utility-root * {
  pointer-events: initial;
}

.toasts__wrapper {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2000;
}

.toasts__wrapper .transition-enter {
  opacity: 0.1;
}

.toasts__wrapper .transition-enter-active {
  opacity: 1;
  transition: all 400ms;
}

.toasts__wrapper .transition-exit {
  opacity: 1;
}

.toasts__wrapper .transition-exit-active {
  opacity: 0.1;
  transition: all 400ms;
}

.toasts__wrapper__small .alert-dismissible {
  min-width: 216px;
  max-width: 539px;
}

.toasts__wrapper__large .alert-dismissible {
  min-width: 539px;
}

@media only screen and (max-width: 600px) {
  .toasts__wrapper__small .alert-dismissible {
    max-width: 380px;
  }

  .toasts__wrapper__large .alert-dismissible {
    min-width: 380px;
  }
}

.modal-toast-container {
  width: calc(100% - 30px);
  font-size: 14px;
}

.modal-toast-container .modal-toast {
  width: 100%;
}

/* some styles to account for differences between bootstrap and bootstrap react */
.dropdown button::after {
  display: inline-block;
}

.dropdown .dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 58px;

  &::after {
    vertical-align: unset;
    border-top: unset;
    border-right: unset;
    border-bottom: unset;
    border-left: unset;
  }
}

/* added style to show a border around an invalid calendar */
.calendar-widget.is-invalid {
  border-color: #dc3545;
}

/* social media links using short textboxes that aren't currently styled in app.css */
.form-control.off-brand-input:invalid,
.outside-standard-hours {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.off-brand-input:invalid:focus,
.outside-standard-hours {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.outside-standard-hours.no-border {
  border-color: none;
  box-shadow: none;
  color: #dc3545;
}

.form-select.is-loading {
  background-image: none !important;
}

.fixed-utility .post-utility-bar button {
  margin-left: 10px;
  margin-right: auto;
  font-size: 0.875rem !important;
  background: #c9178d;
}