html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Barlow";
}

body {
  overflow: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /**
   * Flex is needed to make following work:
   * Container should has a min-height of 100% if content is lower than view-height
   * but keep the scroll functionality
   **/
  display: flex;
  min-height: 100%;
}

p,
a {
  font-size: 13px;
  line-height: 15px;
}

p + ul,
p + ol,
p + p,
ol + ul,
ol + ol,
ol + p,
ul + ul,
ul + ol,
ul + p {
  margin-top: 8px;
}

.main {
  width: 100%;
  height: 100%;
  position: relative;
}

.ui-navigation-drawer__content.nav-drawer-is-hidden {
  padding-left: 0;
}

:not(.ui-checkbox__box):not(.ui-loading-page) > svg {
  fill: currentColor;
}

/* for html content */
p,
a {
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}

.payment-grid {
  width: 100%;
  display: grid;
  max-width: 800px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 8px;
}
.payment-grid .av-payment-type-card {
  height: 160px;
}

.ui-modal-loading-center {
  margin: auto;
}

.new-order-dialog-order .order-element {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 32px;
  grid-template-areas: "label right" "content right";
  min-height: 24px;
}

.new-order-dialog-order .order-element .label {
  grid-area: label;
}

.new-order-dialog-order .order-element .content {
  grid-area: content;
}

.new-order-dialog-order .order-element .right {
  grid-area: right;
}

.treatments-select-dialog .ui-input-container, .products-select-dialog .ui-input-container {
  margin: 0;
}

@media (min-width: 640px) {
  .new-order-dialog-order .order-element {
    grid-template-columns: 156px 1fr auto;
    grid-template-areas: "label content right";
  }
}
.ui-form-switch {
  height: 40px;
}
.ui-form-switch .ui-switch {
  margin: 0;
}
.ui-form-switch .ui-switch .ui-switch__container {
  height: 16px;
}

.ui-image-gallery {
  width: 100%;
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  grid-gap: 8px;
}
@media screen and (min-width: 600px) {
  .ui-image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 16px;
  }
}
.ui-image-gallery > * {
  max-width: 100%;
}

.av-template-grid {
  width: 100%;
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 16px;
}

/* Prevent opening select when in read-only mode */
.av-shipping-price.read-only:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.select-read-only:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.ui-modal-container .ui-modal.voucher-preview-dialog {
  background: #000;
}
.ui-modal-container .ui-modal.voucher-preview-dialog .mm-media-gallery__header {
  pointer-events: none;
  z-index: 50;
}
.ui-modal-container .ui-modal.voucher-preview-dialog .mm-media-gallery__header div[role=button],
.ui-modal-container .ui-modal.voucher-preview-dialog .mm-media-gallery__header .ui-action-button {
  pointer-events: all;
}
.ui-modal-container .ui-modal.voucher-preview-dialog .navigation-button {
  z-index: 40;
}
.ui-modal-container .ui-modal.voucher-preview-dialog .navigation-button svg {
  width: 24px;
  height: 24px;
}
.ui-modal-container .ui-modal.voucher-preview-dialog__fit-content {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  width: fit-content;
  height: auto;
}

.voucher-preview-iframe {
  max-height: 100%;
  overflow: auto;
  transition: 0.3s;
}
.voucher-preview-iframe .voucher-template-preview-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: 0.3s;
}
.voucher-preview-iframe__is-read-only .voucher-template-preview-wrapper:before {
  pointer-events: all;
}
.voucher-preview-iframe__is-loading {
  opacity: 0;
  transition: opacity 0s;
}
.voucher-preview-iframe .voucher-template-preview-width {
  width: calc(100vw - 32px);
  min-width: 400px;
}
.voucher-preview-iframe .voucher-template-preview-width .voucher-template-preview-wrapper {
  height: 0;
}
.voucher-preview-iframe .voucher-template-preview-width__portrait {
  max-width: 564px;
}
.voucher-preview-iframe .voucher-template-preview-width__portrait .voucher-template-preview-wrapper {
  padding-top: 144%;
}
.voucher-preview-iframe .voucher-template-preview-width__landscape {
  max-width: 800px;
}
.voucher-preview-iframe .voucher-template-preview-width__landscape .voucher-template-preview-wrapper {
  padding-top: 69.35%;
}
.voucher-preview-iframe .voucher-template-preview-loading {
  z-index: 2;
}

.scroll-offset-multiform {
  max-width: 240px;
}
.scroll-offset-multiform .unit-select {
  max-width: 80px;
}

.av-order_customer-detail {
  display: grid;
  grid-template-areas: "customer" "shipping";
  grid-gap: 16px;
  grid-auto-flow: column;
}
@media screen and (min-width: 600px) {
  .av-order_customer-detail {
    grid-template-areas: "customer shipping";
  }
}
.av-order_customer-detail .customer-data {
  grid-area: customer;
  width: 100%;
}
.av-order_customer-detail .shipping-data {
  grid-area: shipping;
  width: 100%;
}

.av-history-item:not(:last-child) {
  border-left: 1px solid rgba(143, 158, 164, 0.15);
}
.av-history-item > .time {
  margin-top: -6px;
}
.av-history-item::before {
  content: "";
  width: 3px;
  height: 3px;
  background-color: rgb(143, 158, 164);
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(143, 158, 164, 0.15);
}
.av-history-item.redeemed::before {
  border-color: #22b867;
  background-color: #22b867;
}
.av-history-item.redeemed .state-message {
  color: #22b867;
}
.av-history-item.canceled::before {
  border-color: #f6374e;
  background-color: #f6374e;
}
.av-history-item.canceled .state-message {
  color: #f6374e;
}

.ui-navigation-drawer .order-note {
  white-space: pre-wrap;
  word-break: break-word;
}

.new-voucher-dialog.ui-modal[size=sm] .ui-modal__content {
  padding: 16px 4px 4px 4px;
}
.new-voucher-dialog.ui-modal[size=sm] .ui-modal__content .ui-modal__intro {
  padding-left: 16px;
  padding-right: 16px;
}
.new-voucher-dialog.ui-modal[size=sm] .ui-modal__content .ui-modal__content-body {
  padding: 0;
}
.new-voucher-dialog.ui-modal[size=sm] .ui-modal__content .ui-modal__content-body .ui-item-group {
  padding: 0;
}
.new-voucher-dialog.ui-modal[size=sm] .ui-modal__content .ui-modal__content-body .ui-item-group .h4 {
  height: auto;
}
.new-voucher-dialog.ui-modal[size=sm] .ui-modal__content .ui-modal__content-body .ui-item-group .ellipsis {
  white-space: normal;
}

@media (max-width: 599px) {
  .categories-container {
    margin-bottom: 64px;
  }
}

.status-badge__container {
  min-width: 80px;
}

.integration-info-dialog.ui-modal[size=md] {
  min-height: 0;
}

/* These styles are necessary for the content select to look the same as the language select */
.content-select .ui-input-container:not([theme=dark]) .ui-form-item {
  background-color: rgba(143, 158, 164, 0.15);
  border: 1px solid rgba(143, 158, 164, 0.15);
  height: 32px;
  font-size: 14px;
  font-weight: 500;
}

.audit-log-table {
  margin-left: -16px;
  margin-right: -16px;
}
.audit-log-table__body {
  vertical-align: top;
  box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* 1hr */
  transition: background-color 3600s ease-in-out 0s, color 3600s ease-in-out 0s;
}

#mm-fullscreen-view-container > * {
  z-index: 181;
}

.redeemed,
.partial_redeemed,
.paid {
  color: #22b867;
}

.canceled {
  color: #f6374e;
}

.ordered {
  color: rgba(143, 158, 164, 0.6);
}

.issued {
  color: #f3a100;
}

.line-through {
  text-decoration: line-through;
}

.order-link {
  text-align: right;
}
.order-link svg {
  transform: rotate(180deg);
}