.banner-overlay {
  position: absolute;
  left: 0;
  top: 5%;
  width: 100%;
  height: 100%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 5%;
}

.banner-overlay h1,
.banner-overlay p,
.banner-overlay h3 {
  text-overflow: ellipsis !important;
}

.banner-text {
  font-weight: 400;
}

.banner {
  position: relative;
  width: 75% !important;
  overflow: hidden;
  word-wrap: normal;
  word-break: normal;
}

.banner-reduced {
  max-height: 250px;
}

.banner img {
  max-height: 350px;
  opacity: 0.80;
}

.banner-overlay a {
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

/**
* MOBILE SPECIFIC STYLING
**/

@media (max-width: 767px) {
  .banner {
    display: none !important;
  }

  .mobile-banner {
    margin-top: 20%;
  }
}

/**
* TABLET SPECIFIC STYLING
**/

@media (max-width: 1024px) and (min-width: 768px) {
  .mobile-banner {
    display: none !important;
  }
}

/**
* DESKTOP SPECIFIC STYLING
**/

@media (min-width: 1024px) {
  .mobile-banner {
    display: none !important;
  }
}

@media (min-width: 990px) {
  #mobileLocation {
    visibility: hidden;
    display: none;
    margin: none;
    padding: 0px;
  }
}

#demoBanner {
  color: white;
  background-color: red;
  border: 3px yellow thick;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#offlineBanner {
  color: white;
  background-color: darkgoldenrod;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.portion {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 2%;
  margin-left: 2%;
}

.topping-wheel {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.3rem;
}

.topping-wheel-included {
  width: 40px;
  margin: none;
  padding: none;
  line-height: 1;
}

.topping-selector {
  width: 50% !important;
  display: inline-block;
}

.larger-circle {
  font-size: 150%;
}

.medium-circle {
  font-size: 125%;
}

.mobile-friendly-buttongroup {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.mobile-friendly-buttongroup .button {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

@media (max-width: 390px) {
  .mobile-friendly-buttongroup .button {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    display: block;
  }

  .mobile-friendly-buttongroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@font-face {
  font-family: "toppings";
  src: url("https://s3.us-east-2.amazonaws.com/arrowpos-assets/topping_font/toppings.eot");
  src: url("https://s3.us-east-2.amazonaws.com/arrowpos-assets/topping_font/toppings.eot?#iefix") format("embedded-opentype"), url("https://s3.us-east-2.amazonaws.com/arrowpos-assets/topping_font/toppings.woff") format("woff"), url("https://s3.us-east-2.amazonaws.com/arrowpos-assets/topping_font/toppings.ttf") format("truetype"), url("https://s3.us-east-2.amazonaws.com/arrowpos-assets/topping_font/toppings.svg#toppings") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "toppings" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "toppings" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-empty-circle:before {
  content: "a";
}

.icon-full-circle:before {
  content: "b";
}

.icon-left-circle:before {
  content: "c";
}

.icon-right-circle:before {
  content: "d";
}

.customSpinner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 75%;
}

.customSpinner > span.mif-minus,
.customSpinner > span.mif-plus {
  margin: 0.5rem;
}

.customSpinner > span.mif-minus:hover,
.customSpinner > span.mif-plus:hover {
  cursor: pointer;
}

.customSpinner > input {
  text-align: center;
}

select.main-item-selector {
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  border-radius: 0px;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.w-80 {
  width: 80% !important;
}

.shim-map {
  background-image: url("https://s3.us-east-2.amazonaws.com/arrowpos-assets/recurve_filler_images/filler_map.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
}

.sticky-dialog {
  position: absolute;
}

div.address-selector {
  height: 100%;
}

.vantivContainer {
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.vantivCheckout {
  width: 100%;
  height: 70vh;
  min-height: 550px;
  text-align: center;
}

@media (max-width: 768px) {
  .vantivCheckout {
    width: 100%;
    height: 500px;
    text-align: center;
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
}

.loading {
  -webkit-animation: spin 2.00s ease-in-out infinite;
          animation: spin 2.00s ease-in-out infinite;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

/*
img.card-img-top.card-img{
    height: 350px !important;
    max-height: 350px !important;
    min-height: 350px !important;
}*/

@-webkit-keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }

  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0);
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }

  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0);
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }

  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}

@keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }

  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0);
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }

  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0);
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }

  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}

.highlight-continue {
  -webkit-animation: shake 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
          animation: shake 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

.h1 {
  font-size: 4rem !important;
}

main.container {
  min-height: 700px;
}

.user-signup-input {
  min-width: 150px;
}

#serviceTypePanel {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.cart-options-section {
  max-width: 480px !important;
  min-width: 275px !important;
}

@media (max-width: 1080px) {
  .cart-options-section {
    max-width: 300px !important;
    min-width: 250px !important;
  }
}

.cart {
  width: 90%;
}

.address-input {
  width: 40%;
  min-width: 200px;
}

.cart-address-selector {
  width: 350px;
}

.no-pointer:hover {
  cursor: default;
}

.no-border {
  border: none !important;
}

.quantity-input {
  width: 75px !important;
}

.fg-light-gray-translucent {
  color: rgba(114, 108, 108, 0.5);
}

footer {
  bottom: 0px;
}

div[id*="ReactContainer"] {
  min-height: 500px !important;
}

/*
TODO: Address sizing issues with showcase on screens smaller than 330px wide
est ~4% users impacted
*/

.showcase {
  display: inline-block;
}

.custom-checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.clickable-element:hover {
  cursor: pointer !important;
}

.accordion > .frame > .heading {
  font-size: 125%;
}

.selected-radio {
  font-weight: 500;
}

div.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}

div.loader {
  width: 100% !important;
  height: 750px;
}

form.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}

#mainItemSelect {
  width: 50%;
  max-width: 400px;
}

/**
* MOBILE SPECIFIC STYLING
**/

.accordion .card .card-body .card.checkbox-card {
  border-bottom-width: 1px !important;
}

@media (max-width: 767px) {
  #mainItemSelect {
    width: 100%;
  }

  img.store-logo {
    display: none;
  }

  div.loader {
    max-height: 250px;
  }

  .base-cart {
    min-width: 300px;
  }
}

/* Obnoxiously small screens, buy a new phone */

@media (max-width: 320px) {
  .base-cart {
    min-width: 225px;
  }
}

/**
* TABLET SPECIFIC STYLING
**/

@media (max-width: 1024px) and (min-width: 768px) {
  div.loader {
    max-height: 350px;
  }

  .base-cart {
    min-width: 300px;
  }
}

/**
* DESKTOP SPECIFIC STYLING
**/

@media (min-width: 1024px) and (max-width: 1439px) {
  div.loader {
    max-height: 450px;
  }

  .base-cart {
    min-width: 380px;
  }
}

/**
* LARGE MONITOR STYLING
**/

@media (min-width: 1440px) {
  div.loader {
    max-height: 750px;
  }

  div[id*="ReactContainer"] {
    min-height: 600px !important;
  }

  .base-cart {
    min-width: 500px;
  }
}

@media (min-width: 1600px) {
  div[id*="ReactContainer"] {
    min-height: 800px !important;
  }

  .base-cart {
    min-width: 500px;
  }
}