/* mdesk custom styles */

/* Change font size according to resolution. */
/* Maybe there is less complex way, but zoom causes permanent page scrolling. */
@media screen and (min-device-width: 480px) and (min-device-height: 480px) {
  html {
    font-size:120%;
  }

  .ui-btn {
    font-size:19px; /* standard:16px */
  }

  .ui-mini {
    font-size:15px; /* standard:12.5px */
  }

  .ui-header .ui-btn, .ui-footer .ui-btn {
    font-size: 15px; /* standard:12.5px */
  }

  .ui-mini .ui-input-text input, .ui-mini .ui-input-search input, .ui-input-text.ui-mini input, .ui-input-search.ui-mini input, .ui-mini textarea.ui-input-text, textarea.ui-mini {
    font-size: 17px; /* standard: 14px */
  }

  .ui-mobile label, div.ui-controlgroup-label {
    font-size: 19px; /* standard: 16px */
  }

  .ui-mini.ui-btn-icon-notext, .ui-mini .ui-btn-icon-notext, .ui-header .ui-btn-icon-notext, .ui-footer .ui-btn-icon-notext {
    font-size: 19px; /* standard: 16px */
  }

  .ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
    width: 25px; /* standard:22px; */
    height: 25px; /* standard:22px; */
  }

  .ui-btn-icon-notext:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after {
      margin-left: -13px;
  }

  .ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after {
    margin-top: -13px;
  }
}

@media screen and (min-device-width: 720px) and (min-device-height: 720px) {
  html {
    font-size: 150%;
  }

  .ui-btn {
    font-size: 24px; /* standard:16px */
  }

  .ui-mini {
    font-size: 18px; /* standard:12.5px */
  }

  .ui-header .ui-btn, .ui-footer .ui-btn {
    font-size: 18px; /* standard:12.5px */
  }

  .ui-mini .ui-input-text input, .ui-mini .ui-input-search input, .ui-input-text.ui-mini input, .ui-input-search.ui-mini input, .ui-mini textarea.ui-input-text, textarea.ui-mini {
    font-size: 21px; /* standard: 14px */
  }

  .ui-mobile label, div.ui-controlgroup-label {
    font-size: 24px; /* standard: 16px */
  }

  .ui-mini.ui-btn-icon-notext, .ui-mini .ui-btn-icon-notext, .ui-header .ui-btn-icon-notext, .ui-footer .ui-btn-icon-notext {
    font-size: 24px; /* standard: 16px */
  }

  .ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
    width: 32px; /* standard:22px; */
    height: 32px; /* standard:22px; */
  }

  .ui-btn-icon-notext:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after {
    margin-left: -16px;
  }

  .ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after {
    margin-top: -16px;
  }
}

/* flash message */
.mdesk-flash-message {
  left: 0;
  right: 0;
  top: 2rem;
}

.mdesk-flash-message .ui-popup {
  width: max-content;
  max-width: 80%;
  display: block;
  margin: auto;
  display: none;
}

/* Product picker style. */
.mdesk-product-picker-button {
  position:relative;
  width:12em;
}

/* product category color bar. */
.mdesk-product-picker-button-color-bar {
  position:absolute;
  width:.4em;
  height:100%;
  left:0;
  bottom:0;
  opacity:0.7;
}

.mdesk-region-type {
  display:inline-block;
  padding:.1em .3em;
  margin:.1em;
  border-radius: .25em;
  text-shadow: none;
}