/*Background Color*/
/*Font*/
/*Text Color*/
/*Border Color*/
/*Navigation Icon*/
/*Site Icon*/
/*List Part*/
/* Drop Down */
/*Overall Padding Part*/
/*Overall Margin Part*/
/*Input Part*/
.drop-down-60 .quantity, .drop-down-60 .drop-down-arrow {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  width: 60px;
  height: 60px;
  line-height: 60px;
  padding: 0 !important;
  color: #9a9ea2;
  font-size: 40px !important; }
  @media (max-width: 453px) {
    .drop-down-60 .quantity, .drop-down-60 .drop-down-arrow {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .drop-down-60 .quantity, .drop-down-60 .drop-down-arrow {
      width: 40px;
      height: 40px;
      line-height: 40px; } }
  @media (max-width: 453px) {
    .drop-down-60 .quantity, .drop-down-60 .drop-down-arrow {
      width: 30px;
      height: 30px;
      line-height: 30px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .drop-down-60 .quantity, .drop-down-60 .drop-down-arrow {
      font-size: 26.66667px !important; } }
  @media (max-width: 453px) {
    .drop-down-60 .quantity, .drop-down-60 .drop-down-arrow {
      font-size: 20px !important; } }
.drop-down-60 .drop-down-arrow {
  background: #767b7f repeat;
  border: 1px solid #bdc4c7;
  color: white; }
.drop-down-60 .drop-down-arrow:hover {
  color: black; }
.drop-down-60 ul {
  padding: 0 !important;
  min-width: 60px !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .drop-down-60 ul {
      min-width: 40px !important; } }
  @media (max-width: 453px) {
    .drop-down-60 ul {
      min-width: 30px !important; } }
  .drop-down-60 ul li {
    padding: 0 !important;
    min-height: 60px !important;
    line-height: 60px;
    text-align: center;
    font-size: 26.66667px !important; }
    @media (min-width: 454px) and (max-width: 618px) {
      .drop-down-60 ul li {
        min-height: 40px !important;
        line-height: 40px; } }
    @media (max-width: 453px) {
      .drop-down-60 ul li {
        min-height: 30px !important;
        line-height: 30px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .drop-down-60 ul li {
        font-size: 17.77778px !important; } }
    @media (max-width: 453px) {
      .drop-down-60 ul li {
        font-size: 13.33333px !important; } }
    .drop-down-60 ul li a {
      line-height: 60px;
      padding: 0 !important;
      cursor: pointer; }
      @media (min-width: 454px) and (max-width: 618px) {
        .drop-down-60 ul li a {
          line-height: 40px; } }
      @media (max-width: 453px) {
        .drop-down-60 ul li a {
          line-height: 30px; } }

.drop-down-40 .quantity, .drop-down-40 .drop-down-arrow {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0 !important;
  color: #9a9ea2;
  font-size: 26.66667px !important; }
  @media (max-width: 453px) {
    .drop-down-40 .quantity, .drop-down-40 .drop-down-arrow {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .drop-down-40 .quantity, .drop-down-40 .drop-down-arrow {
      width: 26.66667px;
      height: 26.66667px;
      line-height: 26.66667px; } }
  @media (max-width: 453px) {
    .drop-down-40 .quantity, .drop-down-40 .drop-down-arrow {
      width: 20px;
      height: 20px;
      line-height: 20px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .drop-down-40 .quantity, .drop-down-40 .drop-down-arrow {
      font-size: 17.77778px !important; } }
  @media (max-width: 453px) {
    .drop-down-40 .quantity, .drop-down-40 .drop-down-arrow {
      font-size: 13.33333px !important; } }
.drop-down-40 .drop-down-arrow {
  background: #767b7f repeat;
  border: 1px solid #bdc4c7;
  color: white; }
.drop-down-40 .drop-down-arrow:hover {
  color: black; }
.drop-down-40 ul {
  padding: 0 !important;
  min-width: 40px !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .drop-down-40 ul {
      min-width: 26.66667px !important; } }
  @media (max-width: 453px) {
    .drop-down-40 ul {
      min-width: 20px !important; } }
  .drop-down-40 ul li {
    padding: 0 !important;
    min-height: 40px !important;
    line-height: 40px;
    text-align: center;
    font-size: 17.77778px !important; }
    @media (min-width: 454px) and (max-width: 618px) {
      .drop-down-40 ul li {
        min-height: 26.66667px !important;
        line-height: 26.66667px; } }
    @media (max-width: 453px) {
      .drop-down-40 ul li {
        min-height: 20px !important;
        line-height: 20px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .drop-down-40 ul li {
        font-size: 11.85185px !important; } }
    @media (max-width: 453px) {
      .drop-down-40 ul li {
        font-size: 8.88889px !important; } }
    .drop-down-40 ul li a {
      line-height: 40px;
      padding: 0 !important;
      cursor: pointer; }
      @media (min-width: 454px) and (max-width: 618px) {
        .drop-down-40 ul li a {
          line-height: 26.66667px; } }
      @media (max-width: 453px) {
        .drop-down-40 ul li a {
          line-height: 20px; } }

.checkbox .btn {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  background: #fdfdfd no-repeat !important;
  border: solid 1px black !important;
  border-radius: 0 !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .checkbox .btn {
      width: 26.66667px;
      height: 26.66667px; } }
  @media (max-width: 453px) {
    .checkbox .btn {
      width: 20px;
      height: 20px; } }
.checkbox .active {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  background: #fdfdfd url("assets/img/checked40.png") no-repeat !important;
  border: solid 1px black !important;
  border-radius: 0 !important;
  box-shadow: 0px 0px 0px !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .checkbox .active {
      background: #fdfdfd url("assets/img/checked30.png") no-repeat !important; } }
  @media (max-width: 453px) {
    .checkbox .active {
      background: #fdfdfd url("assets/img/checked20.png") no-repeat !important; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .checkbox .active {
      width: 26.66667px;
      height: 26.66667px; } }
  @media (max-width: 453px) {
    .checkbox .active {
      width: 20px;
      height: 20px; } }

.whole-span-button {
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.6);
  max-width: 757px;
  width: 100%;
  color: white;
  position: fixed;
  bottom: 0px;
  min-height: 60px;
  line-height: 60px;
  text-align: center;
  z-index: 20;
  cursor: pointer; }
  @media (min-width: 454px) and (max-width: 618px) {
    .whole-span-button {
      min-height: 60px;
      line-height: 60px; } }
  @media (max-width: 453px) {
    .whole-span-button {
      min-height: 45px;
      line-height: 45px; } }
  .whole-span-button .content {
    max-width: 757px;
    text-align: center;
    border-radius: 12px;
    font-family: "Arial";
    font-size: 24px;
    font-weight: bold;
    background: #d1883d; }
    @media (min-width: 454px) and (max-width: 618px) {
      .whole-span-button .content {
        border-radius: 6px; } }
    @media (max-width: 453px) {
      .whole-span-button .content {
        border-radius: 6px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .whole-span-button .content {
        font-size: 24px; } }
    @media (max-width: 453px) {
      .whole-span-button .content {
        font-size: 18px; } }
  .whole-span-button .order {
    display: inline-block;
    border-radius: 8px;
    background: #d1883d;
    width: 46% !important;
    font-size: 20px;
    color: white;
    font-weight: bold;
    border: none;
    text-decoration: none; }
    .whole-span-button .order:disabled {
      background-color: #AFAEAE !important; }
    @media (max-width: 453px) {
      .whole-span-button .order {
        border-radius: 4px;
        width: 42% !important;
        font-size: 14px; } }
    @media (max-width: 320px) {
      .whole-span-button .order {
        border-radius: 4px;
        width: 42% !important;
        font-size: 12px; } }
  .whole-span-button .left {
    margin-right: 10px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .whole-span-button .left {
        margin-right: 14px; } }
  .whole-span-button .right {
    margin-left: 10px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .whole-span-button .right {
        margin-left: 14px; } }
  .whole-span-button .single-button {
    text-align: center;
    border-radius: 12px;
    font-family: "Arial";
    font-size: 24px;
    font-weight: bold;
    background: #d1883d;
    color: white;
    text-decoration: none;
    width: 100%;
    line-height: 45px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .whole-span-button .single-button {
        font-size: 24px; } }
    @media (max-width: 453px) {
      .whole-span-button .single-button {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .whole-span-button .single-button {
        line-height: 30px;
        border-radius: 6px; } }
    @media (max-width: 453px) {
      .whole-span-button .single-button {
        border-radius: 6px;
        line-height: 30px; } }
  .whole-span-button .single-button:hover {
    color: white; }

.inactive {
  background-color: darkgray !important; }

.closed {
  background-color: rgba(0, 0, 0, 0.6) !important; }

.btn-green {
  background-color: #4bd562; }

.btn-green:hover {
  background-color: #4bd562; }

.small-round-button {
  border-radius: 10px;
  height: 70px;
  width: 50px; }
  @media (max-width: 640px) {
    .small-round-button {
      min-height: 60px;
      line-height: 60px; } }
  @media (max-width: 480px) {
    .small-round-button {
      min-height: 45px;
      line-height: 45px; } }

.btn-checkout {
  border-radius: 12px;
  margin: 10px 0;
  width: 100%;
  height: 65px;
  font-size: 20px;
  background-color: #E19B38;
  color: white;
  font-weight: bold; }

.btn-checkout:hover {
  color: white; }

.btn-bottom-continue:hover {
  background-color: #555555; }

.bottom-button-container {
  margin-top: 15px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 15px 30px; }
  @media (max-width: 453px) {
    .bottom-button-container {
      font-size: 14px;
      padding: 15px 15px; } }

.btn-bottom-continue {
  background-color: #555555; }

.btn-send-code:hover, .btn-enter-code:hover, .btn-cancel-code:hover, .btn-resend-code:hover {
  color: white; }

.btn-send-code, .btn-enter-code, .btn-cancel-code, .btn-resend-code {
  font-size: 20px;
  width: 30%;
  color: white; }
  @media (max-width: 453px) {
    .btn-send-code, .btn-enter-code, .btn-cancel-code, .btn-resend-code {
      font-size: 14px;
      width: 35%; } }

.btn.btn-margin-bottom {
  margin-bottom: 60px; }

.btn {
  background-color: #d1883d;
  color: white;
  font-size: 20px;
  height: 65px;
  border-radius: 12px;
  font-weight: bold; }
  @media (min-width: 454px) and (max-width: 618px) {
    .btn {
      border-radius: 6px;
      height: 45px; } }
  @media (max-width: 453px) {
    .btn {
      border-radius: 6px;
      font-size: 16px;
      height: 45px; } }

.btn:hover {
  color: white;
  background-color: #885520; }

.btn-full {
  width: 100%; }

.btn-gray-shaded {
  background-color: #A9A9A9 !important; }
  .btn-gray-shaded:hover {
    background-color: #767676 !important; }

html {
  height: 100%; }

body {
  height: 100%;
  background-color: transparent !important;
  line-height: 1.3; }

/* Fix when body becomes unscrollable*/
body.modal-open {
  overflow: auto; }

div.my-wrapper {
  max-width: 757px;
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  position: relative;
  overflow-y: hidden; }

.container {
  width: 757px !important; }

.row {
  margin-left: 0px !important;
  margin-right: 0px !important; }

#popup {
  max-width: 4000px !important; }

.modal-backdrop {
  max-width: 4000px !important; }

/*Main Wrapper*/
.my-wrapper {
  width: 100%;
  margin: 0 auto;
  /*Top Navigation*/ }
  .my-wrapper .my-navbar {
    padding: 15px 0px !important;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: white; }
    @media (min-width: 454px) and (max-width: 618px) {
      .my-wrapper .my-navbar {
        min-height: 60px;
        line-height: 60px; } }
    @media (max-width: 453px) {
      .my-wrapper .my-navbar {
        min-height: 44px;
        line-height: 44px; } }
    .my-wrapper .my-navbar h2 {
      font-family: 'Ubuntu', sans-serif;
      font-weight: 300;
      font-size: 28px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .my-navbar h2 {
          font-size: 22px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar h2 {
          font-size: 15px; } }
    .my-wrapper .my-navbar img {
      width: 40%;
      height: auto; }
    .my-wrapper .my-navbar .back img, .my-wrapper .my-navbar .cancel img, .my-wrapper .my-navbar .search img {
      width: 60px;
      height: 60px;
      cursor: pointer; }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .my-navbar .back img, .my-wrapper .my-navbar .cancel img, .my-wrapper .my-navbar .search img {
          width: 40px;
          height: 40px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .back img, .my-wrapper .my-navbar .cancel img, .my-wrapper .my-navbar .search img {
          width: 30px;
          height: 30px; } }
    .my-wrapper .my-navbar .back {
      width: 60px;
      height: 60px;
      cursor: pointer;
      float: left;
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      font-weight: bold; }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .my-navbar .back {
          width: 40px;
          height: 40px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .back {
          width: 30px;
          height: 30px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .back {
          font-size: 18px; } }
    .my-wrapper .my-navbar .logo {
      min-height: 89px;
      line-height: 89px;
      width: 250px;
      float: left;
      font-family: "Arial";
      font-size: 24px;
      font-weight: bold;
      font-weight: bold; }
      .my-wrapper .my-navbar .logo img {
        width: 60px;
        height: 60px;
        cursor: pointer;
        margin-top: -10px; }
        @media (min-width: 454px) and (max-width: 618px) {
          .my-wrapper .my-navbar .logo img {
            width: 40px;
            height: 40px; } }
        @media (max-width: 453px) {
          .my-wrapper .my-navbar .logo img {
            width: 30px;
            height: 30px; } }
        @media (min-width: 454px) and (max-width: 618px) {
          .my-wrapper .my-navbar .logo img {
            margin-top: -6px; } }
        @media (max-width: 453px) {
          .my-wrapper .my-navbar .logo img {
            margin-top: -5px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .my-navbar .logo {
          min-height: 60px;
          line-height: 60px;
          width: 167px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .logo {
          min-height: 44px;
          line-height: 44px;
          width: 125px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .my-navbar .logo {
          font-size: 24px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .logo {
          font-size: 18px; } }
    .my-wrapper .my-navbar .cancel {
      float: left; }
    .my-wrapper .my-navbar .search {
      float: right;
      margin-right: 12px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .my-navbar .search {
          margin-right: 8px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .search {
          margin-right: 6px; } }
    .my-wrapper .my-navbar .title {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      text-align: center;
      width: relative;
      line-height: 89px; }
      .my-wrapper .my-navbar .title img {
        width: 60px;
        height: 60px;
        cursor: pointer; }
        @media (min-width: 454px) and (max-width: 618px) {
          .my-wrapper .my-navbar .title img {
            width: 40px;
            height: 40px; } }
        @media (max-width: 453px) {
          .my-wrapper .my-navbar .title img {
            width: 30px;
            height: 30px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .title {
          font-size: 18px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .my-navbar .title {
          line-height: 60px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .title {
          line-height: 44px; } }
    .my-wrapper .my-navbar .title-with-logo {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      width: relative;
      line-height: 89px; }
      .my-wrapper .my-navbar .title-with-logo img {
        width: 60px;
        height: 60px;
        cursor: pointer; }
        @media (min-width: 454px) and (max-width: 618px) {
          .my-wrapper .my-navbar .title-with-logo img {
            width: 40px;
            height: 40px; } }
        @media (max-width: 453px) {
          .my-wrapper .my-navbar .title-with-logo img {
            width: 30px;
            height: 30px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .title-with-logo {
          font-size: 18px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .my-navbar .title-with-logo {
          line-height: 60px; } }
      @media (max-width: 453px) {
        .my-wrapper .my-navbar .title-with-logo {
          line-height: 44px; } }
  .my-wrapper .header {
    max-width: 757px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0; }
    .my-wrapper .header h3 {
      margin: 10px 10px !important;
      display: inline-block;
      vertical-align: middle;
      font-weight: normal; }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .header h3 {
          font-size: 24px; } }
      @media (max-width: 453px) {
        .my-wrapper .header h3 {
          font-size: 20px; } }
    .my-wrapper .header img {
      margin: 5px 5px !important;
      display: inline-block;
      width: 7%;
      height: auto;
      vertical-align: middle; }
    .my-wrapper .header i {
      float: left;
      padding-top: 20px;
      padding-left: 20px; }
      @media (max-width: 453px) {
        .my-wrapper .header i {
          padding-top: 10px; } }
    .my-wrapper .header a {
      text-decoration: none;
      color: white; }
    .my-wrapper .header .orderspoon-logo {
      padding-top: 5px;
      width: 70%; }
      @media (min-width: 454px) and (max-width: 618px) {
        .my-wrapper .header .orderspoon-logo {
          padding-top: 10px;
          width: 80%; } }
      @media (max-width: 453px) {
        .my-wrapper .header .orderspoon-logo {
          padding-top: 10px;
          width: 90%; } }

.clear {
  clear: both; }

.space {
  clear: both;
  min-height: 45px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .space {
      min-height: 30px; } }
  @media (max-width: 453px) {
    .space {
      min-height: 25px; } }

.space1 {
  clear: both;
  min-height: 30px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .space1 {
      min-height: 20px; } }
  @media (max-width: 453px) {
    .space1 {
      min-height: 15px; } }

.space-whole-button {
  clear: both;
  min-height: 97px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .space-whole-button {
      min-height: 65px; } }
  @media (max-width: 453px) {
    .space-whole-button {
      min-height: 48px; } }

/*Popup Part */
.modal {
  top: 200px !important;
  max-width: 4000px !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .modal {
      top: 140px !important;
      max-width: 4000px !important; } }
  @media (max-width: 453px) {
    .modal {
      top: 100px !important;
      max-width: 4000px !important; } }

.my-modal-dialog {
  width: 400px !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .my-modal-dialog {
      width: 280px !important; } }
  @media (max-width: 453px) {
    .my-modal-dialog {
      width: 200px !important; } }

.my-modal-content {
  padding: 0;
  margin: 0;
  border: 0px !important; }

.my-modal-header {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  padding: 0 !important;
  line-height: 30px;
  background: #dbcc91;
  width: 100%; }
  @media (max-width: 453px) {
    .my-modal-header {
      font-size: 18px; } }

.my-modal-header label {
  border: 0;
  color: white;
  cursor: pointer;
  text-align: right !important;
  float: right !important;
  margin-right: 2%; }

.loading-notification {
  max-width: 757px;
  width: 100%;
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  padding-left: 30px;
  padding-right: 30px;
  min-height: 40px;
  line-height: 40px;
  text-align: left;
  overflow: auto;
  clear: both;
  padding-left: 30px;
  padding-right: 30px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  position: fixed;
  bottom: 0; }
  @media (max-width: 453px) {
    .loading-notification {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .loading-notification {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .loading-notification {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (max-width: 453px) {
    .loading-notification {
      min-height: 30px;
      line-height: 30px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .loading-notification {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .loading-notification {
      padding-left: 15px;
      padding-right: 15px; } }

.system-notification-wrapper {
  position: relative; }

.system-notification {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  line-height: 1em;
  font-weight: bold;
  position: relative;
  margin: 0 3% 20px 3%;
  min-height: 83px;
  height: auto;
  text-align: center;
  padding: 0 10px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  padding-top: 30px;
  padding-bottom: 30px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  color: white; }
  @media (max-width: 453px) {
    .system-notification {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .system-notification {
      min-height: 55px;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      padding-top: 20px;
      padding-bottom: 20px; } }
  @media (max-width: 453px) {
    .system-notification {
      min-height: 42px;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
      padding-top: 15px;
      padding-bottom: 20px; } }

/*Input Part*/
input {
  font-family: "Arial" !important;
  font-size: 24px !important;
  font-weight: bold !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  height: 102px !important;
  line-height: 102px !important;
  font-weight: normal !important; }
  @media (max-width: 453px) {
    input {
      font-size: 18px !important; } }
  @media (min-width: 454px) and (max-width: 618px) {
    input {
      padding-left: 20px !important;
      padding-right: 20px !important; } }
  @media (max-width: 453px) {
    input {
      padding-left: 15px !important;
      padding-right: 15px !important; } }
  @media (min-width: 454px) and (max-width: 618px) {
    input {
      height: 68px !important;
      line-height: 68px !important; } }
  @media (max-width: 453px) {
    input {
      height: 51px !important;
      line-height: 51px !important; } }

input.success {
  background: white url("assets/img/success.png") no-repeat;
  background-position: calc(100% - 30px); }
  @media (min-width: 454px) and (max-width: 618px) {
    input.success {
      background: white url("assets/img/success-3-2.png") no-repeat;
      background-position: calc(100% - 20px); } }
  @media (max-width: 453px) {
    input.success {
      background: white url("assets/img/success-2.png") no-repeat;
      background-position: calc(100% - 15px); } }

input.error, input.ng-invalid.ng-dirty, input.ng-invalid-required.ng-dirty {
  background: white url("assets/img/error.png") no-repeat;
  background-position: calc(100% - 30px);
  border-color: #88152d !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    input.error, input.ng-invalid.ng-dirty, input.ng-invalid-required.ng-dirty {
      background: white url("assets/img/error-3-2.png") no-repeat;
      background-position: calc(100% - 20px); } }
  @media (max-width: 453px) {
    input.error, input.ng-invalid.ng-dirty, input.ng-invalid-required.ng-dirty {
      background: white url("assets/img/error-2.png") no-repeat;
      background-position: calc(100% - 15px); } }

.show {
  display: block !important;
  opacity: 1; }

.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0; }

.nopadding-left {
  padding-left: 0px !important; }

.orderspoon-text {
  color: #D1883D; }

.flat {
  border-radius: 0 !important; }

.private-browser-alert {
  margin-top: 30px;
  padding: 15px;
  font-size: 18px;
  line-height: 20px;
  background-color: white;
  border: 3px solid red;
  border-radius: 12px; }

#fetch-loc {
  display: inline-block;
  float: right;
  top: -63px;
  position: relative;
  right: 0;
  height: 55px;
  width: 55px;
  cursor: pointer; }
  @media (min-width: 454px) and (max-width: 618px) {
    #fetch-loc {
      top: -50px;
      height: 45px;
      width: 45px;
      right: 0; } }
  @media (max-width: 453px) {
    #fetch-loc {
      top: -42px;
      height: 40px;
      width: 40px;
      right: 0; } }

#search-btn {
  display: inline-block;
  float: right;
  top: -50px;
  position: relative;
  right: 0;
  cursor: pointer; }
  @media (min-width: 454px) and (max-width: 618px) {
    #search-btn {
      width: 30px;
      height: 30px;
      top: -40px;
      right: 0; } }
  @media (max-width: 453px) {
    #search-btn {
      width: 25px;
      height: 25px;
      top: -33px;
      right: 0; } }

.controlled-height {
  height: 68px !important;
  line-height: 68px !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .controlled-height {
      height: 50px !important;
      line-height: 50px !important;
      padding-right: 85px; } }
  @media (max-width: 453px) {
    .controlled-height {
      height: 40px !important;
      line-height: 40px !important;
      padding-right: 75px; } }

#main .form-control {
  display: block;
  width: 100%;
  height: 70px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 8px;
  padding-right: 95px !important;
  font-size: 24px;
  line-height: 1.42857143;
  color: #656565;
  border-radius: 4px; }
  @media (min-width: 454px) and (max-width: 618px) {
    #main .form-control {
      padding-right: 85px !important; } }
  @media (max-width: 453px) {
    #main .form-control {
      padding-right: 73px !important; } }

.menu-heading {
  background-color: black !important; }

input[type=text]::-ms-clear {
  display: none; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */ }

@media (max-width: 5000px) {
  .navbar-header {
    float: none; }

  .navbar-left, .navbar-right {
    float: none !important; }

  .navbar-toggle {
    display: block; }

  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }

  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px; }

  .navbar-collapse.collapse {
    display: none !important; }

  .navbar-nav {
    float: none !important;
    margin-top: 7.5px; }

  .navbar-nav > li {
    float: none; }

  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px; }

  .collapse.in {
    display: block !important; } }
.navbar-brand {
  padding: 15px 0 !important; }

.navbar {
  background-color: black !important;
  padding: 3px 0;
  margin-bottom: 0 !important; }
  .navbar img {
    margin: 5px 5px !important;
    display: inline-block;
    width: 40px;
    height: 40px; }
  .navbar .title {
    color: white !important;
    height: 50px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 20px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .navbar .title {
        font-size: 20px; } }
    @media (max-width: 453px) {
      .navbar .title {
        font-size: 14px; } }

.navbar-toggle {
  margin-right: 5px !important; }

.no-margin-bottom {
  margin-bottom: 0 !important; }

.small-col-padding {
  padding: 15px 15px !important;
  margin: 0 !important; }
  @media (max-width: 453px) {
    .small-col-padding {
      padding: 5px 5px !important; } }

span.info {
  margin: 3px 0;
  color: white;
  font-size: 18px;
  padding-top: 5px;
  padding-bottom: 5px; }
  @media (max-width: 453px) {
    span.info {
      font-size: 14px; } }

span.error {
  color: red;
  padding-top: 5px;
  padding-bottom: 5px; }

#smartbanner {
  position: absolute;
  left: 0;
  top: -82px;
  border-bottom: 1px solid #e8e8e8;
  width: 100%;
  height: 78px;
  font-family: 'Helvetica Neue',sans-serif;
  background: -webkit-linear-gradient(top, #f4f4f4 0%, #cdcdcd 100%);
  background-image: -ms-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%);
  background-image: -moz-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 9998;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-text-size-adjust: none; }

#smartbanner, html.sb-animation {
  -webkit-transition: all .3s ease; }

#smartbanner .sb-container {
  margin: 0 auto; }

#smartbanner .sb-close {
  position: absolute;
  left: 5px;
  top: 5px;
  display: block;
  border: 2px solid #fff;
  width: 14px;
  height: 14px;
  font-family: 'ArialRoundedMTBold',Arial;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  color: #fff;
  background: #070707;
  text-decoration: none;
  text-shadow: none;
  border-radius: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  -webkit-font-smoothing: subpixel-antialiased; }

#smartbanner .sb-close:active {
  font-size: 13px;
  color: #aaa; }

#smartbanner .sb-icon {
  position: absolute;
  left: 30px;
  top: 10px;
  display: block;
  width: 57px;
  height: 57px;
  background: rgba(0, 0, 0, 0.6);
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

#smartbanner.no-icon .sb-icon {
  display: none; }

#smartbanner .sb-info {
  position: absolute;
  left: 98px;
  top: 18px;
  width: 44%;
  font-size: 11px;
  line-height: 1.2em;
  font-weight: bold;
  color: #6a6a6a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }

#smartbanner #smartbanner.no-icon .sb-info {
  left: 34px; }

#smartbanner .sb-info strong {
  display: block;
  font-size: 13px;
  color: #4d4d4d;
  line-height: 18px; }

#smartbanner .sb-info > span {
  display: block; }

#smartbanner .sb-info em {
  font-style: normal;
  text-transform: uppercase; }

#smartbanner .sb-button {
  position: absolute;
  right: 20px;
  top: 24px;
  border: 1px solid #bfbfbf;
  padding: 0 10px;
  min-width: 10%;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  font-weight: bold;
  color: #6a6a6a;
  background: -webkit-linear-gradient(top, #efefef 0%, #dcdcdc 100%);
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.7) inset; }

#smartbanner .sb-button:active, #smartbanner .sb-button:hover {
  background: -webkit-linear-gradient(top, #dcdcdc 0%, #efefef 100%); }

#smartbanner .sb-icon.gloss:after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 50%;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
  border-radius: 10px 10px 12px 12px; }

#smartbanner.android {
  border-color: #212228;
  background: #3d3d3d url("data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7");
  border-top: 5px solid #88B131;
  box-shadow: none; }

#smartbanner.android .sb-close {
  border: 0;
  width: 17px;
  height: 17px;
  line-height: 17px;
  color: #b1b1b3;
  background: #1c1e21;
  text-shadow: 0 1px 1px #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 1px rgba(255, 255, 255, 0.3); }

#smartbanner.android .sb-close:active {
  color: #eee; }

#smartbanner.android .sb-info {
  color: #ccc;
  text-shadow: 0 1px 2px #000; }

#smartbanner.android .sb-info strong {
  color: #fff; }

#smartbanner.android .sb-button {
  min-width: 12%;
  border: 1px solid #DDDCDC;
  padding: 1px;
  color: #d1d1d1;
  background: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 28px; }

#smartbanner.android .sb-button span {
  text-align: center;
  display: block;
  padding: 0 10px;
  background-color: #42B6C9;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#42B6C9), to(#39A9BB));
  background-image: -moz-linear-gradient(top, #42B6C9, #39A9BB);
  text-transform: none;
  text-shadow: none;
  box-shadow: none; }

#smartbanner.android .sb-button:active, #smartbanner.android .sb-button:hover {
  background: none; }

#smartbanner.android .sb-button:active span, #smartbanner.android .sb-button:hover span {
  background: #2AC7E1; }

#smartbanner.windows .sb-icon {
  border-radius: 0px; }

.sub-heading {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  padding-left: 30px;
  padding-right: 30px;
  min-height: 40px;
  line-height: 40px;
  text-align: left;
  overflow: auto;
  clear: both;
  padding-left: 40px;
  padding-right: 40px;
  background: #323336;
  color: white;
  cursor: pointer; }
  @media (max-width: 453px) {
    .sub-heading {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .sub-heading {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .sub-heading {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (max-width: 453px) {
    .sub-heading {
      min-height: 30px;
      line-height: 30px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .sub-heading {
      padding-left: 27px;
      padding-right: 27px; } }
  @media (max-width: 453px) {
    .sub-heading {
      padding-left: 20px;
      padding-right: 20px; } }
  .sub-heading img {
    width: 44px;
    height: 60px;
    margin-right: 26px;
    display: inline-block; }
    @media (min-width: 454px) and (max-width: 618px) {
      .sub-heading img {
        width: 29px;
        height: 40px;
        margin-right: 17px; } }
    @media (max-width: 453px) {
      .sub-heading img {
        width: 22px;
        height: 30px;
        margin-right: 13px; } }
  .sub-heading .item-subtotal {
    float: left;
    display: inline-block;
    margin-top: 10px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .sub-heading .item-subtotal {
        margin-top: 0; } }
    @media (max-width: 453px) {
      .sub-heading .item-subtotal {
        margin-top: 0; } }

.shop-info {
  max-width: 800px;
  padding-top: 15px;
  margin-left: 0px !important;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  vertical-align: middle; }
  @media (max-width: 453px) {
    .shop-info {
      font-size: 16px; } }
  .shop-info .merchant-info {
    padding-left: 0px !important; }
  .shop-info img {
    float: right;
    padding: 0px 15px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .shop-info img {
        width: 35%;
        height: auto;
        padding: 10px; } }
    @media (max-width: 453px) {
      .shop-info img {
        width: 30%;
        height: auto;
        padding: 5px; } }
  .shop-info div:first-child {
    padding-right: 0; }
  .shop-info ul li {
    list-style-type: none;
    padding-left: 15px;
    line-height: 30px; }
    @media (max-width: 453px) {
      .shop-info ul li {
        line-height: 25px;
        padding-right: 0; } }
  .shop-info .service-info {
    background: black;
    padding-top: 15px;
    padding-left: 0px !important; }
  .shop-info .phoneNumber {
    line-height: 30px; }

.header-text {
  font-family: "Arial";
  font-size: 30px;
  padding: 20px 0 !important;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  line-height: 1; }
  @media (min-width: 454px) and (max-width: 618px) {
    .header-text {
      font-size: 24px; } }
  @media (max-width: 453px) {
    .header-text {
      font-size: 18px; } }
  @media (max-width: 453px) {
    .header-text {
      font-size: 24px; } }

.recommended {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  margin: 0px !important;
  padding: 20px 20px !important; }
  .recommended .shop-name {
    font-family: "Arial";
    font-size: 30px;
    float: left;
    display: inline-block;
    padding-left: 0px !important;
    width: 75%;
    line-height: 1; }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .shop-name {
        font-size: 24px; } }
    @media (max-width: 453px) {
      .recommended .shop-name {
        font-size: 18px; } }
    @media (max-width: 453px) {
      .recommended .shop-name {
        font-size: 24px; } }
    @media (min-width: 421px) and (max-width: 480px) {
      .recommended .shop-name {
        width: 70%; } }
    @media (min-width: 321px) and (max-width: 420px) {
      .recommended .shop-name {
        width: 65%; } }
    @media (max-width: 320px) {
      .recommended .shop-name {
        width: 60%; } }
  .recommended .shop-logo {
    float: right;
    display: inline-block;
    /** @Arsh 
      Making it bigger for small mobile screens **/ }
    @media (min-width: 421px) and (max-width: 480px) {
      .recommended .shop-logo {
        width: 30%; } }
    @media (min-width: 321px) and (max-width: 420px) {
      .recommended .shop-logo {
        width: 35%; } }
    @media (max-width: 320px) {
      .recommended .shop-logo {
        width: 40%; } }
  .recommended .shop-address {
    font-family: "Arial";
    font-size: 30px;
    font-weight: normal;
    line-height: 43px;
    color: black;
    padding-left: 40px;
    padding-right: 40px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .shop-address {
        font-size: 20px;
        line-height: 22px; } }
    @media (max-width: 453px) {
      .recommended .shop-address {
        font-size: 15px;
        line-height: 17px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .shop-address {
        padding-left: 27px;
        padding-right: 27px; } }
    @media (max-width: 453px) {
      .recommended .shop-address {
        padding-left: 20px;
        padding-right: 20px; } }
    .recommended .shop-address a {
      font-family: "Arial";
      font-size: 30px;
      font-weight: normal;
      line-height: 43px;
      color: black;
      text-decoration: underline; }
      @media (min-width: 454px) and (max-width: 618px) {
        .recommended .shop-address a {
          font-size: 20px;
          line-height: 22px; } }
      @media (max-width: 453px) {
        .recommended .shop-address a {
          font-size: 15px;
          line-height: 17px; } }
  .recommended .shop-phoneNo {
    font-family: "Arial";
    font-size: 30px;
    font-weight: normal;
    line-height: 43px;
    color: black;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 10px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .shop-phoneNo {
        font-size: 20px;
        line-height: 22px; } }
    @media (max-width: 453px) {
      .recommended .shop-phoneNo {
        font-size: 15px;
        line-height: 17px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .shop-phoneNo {
        padding-left: 27px;
        padding-right: 27px; } }
    @media (max-width: 453px) {
      .recommended .shop-phoneNo {
        padding-left: 20px;
        padding-right: 20px; } }
    .recommended .shop-phoneNo a {
      font-family: "Arial";
      font-size: 30px;
      font-weight: normal;
      line-height: 43px;
      color: black;
      text-decoration: underline; }
      @media (min-width: 454px) and (max-width: 618px) {
        .recommended .shop-phoneNo a {
          font-size: 20px;
          line-height: 22px; } }
      @media (max-width: 453px) {
        .recommended .shop-phoneNo a {
          font-size: 15px;
          line-height: 17px; } }
    .recommended .shop-phoneNo .btn-phone, .recommended .shop-phoneNo .btn-map {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      background: #b6babe;
      text-decoration: none;
      border: 1px solid black;
      border-radius: 0px;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      min-height: 30px;
      line-height: 30px;
      padding: 5px 30px 5px 30px; }
      @media (max-width: 453px) {
        .recommended .shop-phoneNo .btn-phone, .recommended .shop-phoneNo .btn-map {
          font-size: 18px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .recommended .shop-phoneNo .btn-phone, .recommended .shop-phoneNo .btn-map {
          min-height: 20px;
          line-height: 20px;
          padding: 5px 20px 5px 20px; } }
      @media (max-width: 453px) {
        .recommended .shop-phoneNo .btn-phone, .recommended .shop-phoneNo .btn-map {
          min-height: 15px;
          line-height: 15px;
          padding: 5px 15px 5px 15px; } }
  .recommended .recommended-info {
    font-family: "Arial";
    font-size: 30px;
    font-weight: normal;
    line-height: 43px;
    color: black;
    padding-left: 40px;
    padding-right: 40px;
    color: black; }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .recommended-info {
        font-size: 20px;
        line-height: 22px; } }
    @media (max-width: 453px) {
      .recommended .recommended-info {
        font-size: 15px;
        line-height: 17px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .recommended-info {
        padding-left: 27px;
        padding-right: 27px; } }
    @media (max-width: 453px) {
      .recommended .recommended-info {
        padding-left: 20px;
        padding-right: 20px; } }
    .recommended .recommended-info span {
      font-weight: bold; }
  .recommended .recommended-carryout-delivery {
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 33px;
    margin-bottom: 20px;
    font-family: "Arial";
    font-size: 30px;
    font-weight: normal;
    line-height: 43px;
    color: black;
    color: black;
    line-height: 43px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .recommended-carryout-delivery {
        padding-left: 27px;
        padding-right: 27px; } }
    @media (max-width: 453px) {
      .recommended .recommended-carryout-delivery {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .recommended-carryout-delivery {
        margin-top: 22px;
        margin-bottom: 14px; } }
    @media (max-width: 453px) {
      .recommended .recommended-carryout-delivery {
        margin-top: 8px;
        margin-bottom: 10px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .recommended-carryout-delivery {
        font-size: 20px;
        line-height: 22px; } }
    @media (max-width: 453px) {
      .recommended .recommended-carryout-delivery {
        font-size: 15px;
        line-height: 17px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .recommended .recommended-carryout-delivery {
        line-height: 22px; } }
    @media (max-width: 453px) {
      .recommended .recommended-carryout-delivery {
        line-height: 17px; } }
    .recommended .recommended-carryout-delivery .delivery-line {
      clear: both; }
    .recommended .recommended-carryout-delivery .carryout-line {
      clear: both;
      font-weight: bold; }
    .recommended .recommended-carryout-delivery span {
      font-weight: bold; }
    .recommended .recommended-carryout-delivery span.delivery-desc {
      font-size: 20px;
      font-weight: lighter !important;
      padding-left: 15px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .recommended .recommended-carryout-delivery span.delivery-desc {
          font-size: 15px; } }
      @media (max-width: 453px) {
        .recommended .recommended-carryout-delivery span.delivery-desc {
          font-size: 12px; } }

.notification {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  background: rgba(255, 255, 255, 0);
  color: white;
  min-height: 60px;
  line-height: 60px;
  margin-top: 5%;
  text-align: center;
  overflow: auto;
  clear: both; }
  @media (max-width: 453px) {
    .notification {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .notification {
      min-height: 45px;
      line-height: 45px;
      margin-top: 7px; } }
  @media (max-width: 453px) {
    .notification {
      min-height: 30px;
      line-height: 30px;
      margin-top: 5px; } }

.pop-menu-body .grey-heading {
  text-align: left;
  overflow: auto;
  font-size: 24px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  cursor: pointer;
  border-bottom: 1px solid black; }
  @media (min-width: 454px) and (max-width: 618px) {
    .pop-menu-body .grey-heading {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 5px; } }
  @media (max-width: 453px) {
    .pop-menu-body .grey-heading {
      font-size: 18px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 0px; } }
  .pop-menu-body .grey-heading .category-name {
    float: left;
    line-height: 30px;
    width: 75%;
    padding-bottom: 15px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .pop-menu-body .grey-heading .category-name {
        margin-top: 8px; } }
    @media (max-width: 453px) {
      .pop-menu-body .grey-heading .category-name {
        line-height: 22px; } }
  .pop-menu-body .grey-heading .expand {
    float: right;
    height: 50px;
    width: 70px;
    margin-right: -20px;
    padding: 0px;
    margin-top: 5px;
    cursor: pointer; }
    .pop-menu-body .grey-heading .expand img {
      height: 26px;
      width: 44px;
      margin-left: 12px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .pop-menu-body .grey-heading .expand img {
          margin-left: 8px;
          height: 17px;
          width: 29px; } }
      @media (max-width: 453px) {
        .pop-menu-body .grey-heading .expand img {
          margin-left: 6px;
          height: 13px;
          width: 22px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pop-menu-body .grey-heading .expand {
        height: 33px;
        width: 46px;
        margin-top: 13px;
        margin-right: -13px; } }
    @media (max-width: 453px) {
      .pop-menu-body .grey-heading .expand {
        height: 25px;
        width: 35px;
        margin-bottom: 8px;
        margin-right: -10px; } }
.pop-menu-body .main-menu-list {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  font-weight: bold; }
  @media (max-width: 453px) {
    .pop-menu-body .main-menu-list {
      font-size: 18px; } }
  .pop-menu-body .main-menu-list .my-row {
    padding-left: 30px;
    padding-right: 30px;
    min-height: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-bottom: 1px solid black;
    overflow: auto;
    overflow-y: hidden;
    clear: both;
    cursor: pointer; }
    @media (min-width: 454px) and (max-width: 618px) {
      .pop-menu-body .main-menu-list .my-row {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pop-menu-body .main-menu-list .my-row {
        padding-left: 15px;
        padding-right: 15px; } }
  .pop-menu-body .main-menu-list .my-row {
    border: 1px solid black;
    border-top: 0px;
    cursor: pointer; }
    .pop-menu-body .main-menu-list .my-row .item-info-left {
      padding: 0 !important; }
      .pop-menu-body .main-menu-list .my-row .item-info-left .item-title {
        text-align: left;
        padding: 0 !important;
        float: left;
        font-weight: bold;
        margin-top: 10px;
        width: 70%;
        line-height: 25px; }
        @media (min-width: 454px) and (max-width: 618px) {
          .pop-menu-body .main-menu-list .my-row .item-info-left .item-title {
            width: 60%; } }
        @media (max-width: 453px) {
          .pop-menu-body .main-menu-list .my-row .item-info-left .item-title {
            margin-top: 5px;
            line-height: 22px;
            width: 60%; } }
      .pop-menu-body .main-menu-list .my-row .item-info-left .item-ingredients, .pop-menu-body .main-menu-list .my-row .item-info-left .item-modifiers {
        text-align: left;
        padding: 0 !important;
        float: left;
        font-weight: normal;
        margin-top: 15px;
        line-height: 30px; }
        @media (max-width: 453px) {
          .pop-menu-body .main-menu-list .my-row .item-info-left .item-ingredients, .pop-menu-body .main-menu-list .my-row .item-info-left .item-modifiers {
            margin-top: 5px;
            line-height: 20px; } }
    .pop-menu-body .main-menu-list .my-row .item-info-right {
      padding: 0 !important;
      float: right; }
      .pop-menu-body .main-menu-list .my-row .item-info-right .item-price {
        text-align: left;
        padding-left: 5px;
        float: right;
        margin-top: 15px; }
        @media (max-width: 453px) {
          .pop-menu-body .main-menu-list .my-row .item-info-right .item-price {
            margin-top: 5px;
            line-height: 20px; } }
      .pop-menu-body .main-menu-list .my-row .item-info-right .item-command {
        padding: 0 !important;
        cursor: pointer;
        float: right;
        margin-left: 25px; }
        .pop-menu-body .main-menu-list .my-row .item-info-right .item-command img {
          width: 40px;
          height: 40px; }
          @media (max-width: 453px) {
            .pop-menu-body .main-menu-list .my-row .item-info-right .item-command img {
              width: 30px;
              height: 30px; } }
        @media (min-width: 454px) and (max-width: 618px) {
          .pop-menu-body .main-menu-list .my-row .item-info-right .item-command {
            margin-left: 18px; } }
        @media (max-width: 453px) {
          .pop-menu-body .main-menu-list .my-row .item-info-right .item-command {
            margin-left: 12px; } }
      .pop-menu-body .main-menu-list .my-row .item-info-right .item-check {
        margin-left: 25px;
        padding: 0 !important;
        margin-top: 10px; }
        .pop-menu-body .main-menu-list .my-row .item-info-right .item-check .btn {
          width: 40px;
          height: 40px;
          padding: 0 !important;
          background: #fdfdfd no-repeat !important;
          border: solid 1px black !important;
          border-radius: 0 !important; }
          @media (min-width: 454px) and (max-width: 618px) {
            .pop-menu-body .main-menu-list .my-row .item-info-right .item-check .btn {
              width: 26.66667px;
              height: 26.66667px; } }
          @media (max-width: 453px) {
            .pop-menu-body .main-menu-list .my-row .item-info-right .item-check .btn {
              width: 20px;
              height: 20px; } }
        .pop-menu-body .main-menu-list .my-row .item-info-right .item-check .active {
          width: 40px;
          height: 40px;
          padding: 0 !important;
          background: #fdfdfd url("assets/img/checked40.png") no-repeat !important;
          border: solid 1px black !important;
          border-radius: 0 !important;
          box-shadow: 0px 0px 0px !important; }
          @media (min-width: 454px) and (max-width: 618px) {
            .pop-menu-body .main-menu-list .my-row .item-info-right .item-check .active {
              background: #fdfdfd url("assets/img/checked30.png") no-repeat !important; } }
          @media (max-width: 453px) {
            .pop-menu-body .main-menu-list .my-row .item-info-right .item-check .active {
              background: #fdfdfd url("assets/img/checked20.png") no-repeat !important; } }
          @media (min-width: 454px) and (max-width: 618px) {
            .pop-menu-body .main-menu-list .my-row .item-info-right .item-check .active {
              width: 26.66667px;
              height: 26.66667px; } }
          @media (max-width: 453px) {
            .pop-menu-body .main-menu-list .my-row .item-info-right .item-check .active {
              width: 20px;
              height: 20px; } }
        @media (min-width: 454px) and (max-width: 618px) {
          .pop-menu-body .main-menu-list .my-row .item-info-right .item-check {
            margin-top: 0; } }
        @media (max-width: 453px) {
          .pop-menu-body .main-menu-list .my-row .item-info-right .item-check {
            margin-top: -10px; } }
  .pop-menu-body .main-menu-list .my-row-final {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    cursor: pointer; }
    @media (min-width: 454px) and (max-width: 618px) {
      .pop-menu-body .main-menu-list .my-row-final {
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px; } }
    @media (max-width: 453px) {
      .pop-menu-body .main-menu-list .my-row-final {
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px; } }

.pop-menu-body:last-child {
  border-bottom: 0; }

.add-item-top-content .btn-group-qty .btn {
  height: auto;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 10px;
  border-radius: 3px; }

.item-order-top {
  background-color: rgba(0, 0, 0, 0.6);
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: white; }

.add-item-top {
  padding-left: 15px !important;
  padding-right: 15px !important;
  background-color: rgba(38, 38, 38, 0.6); }
  .add-item-top .add-item-top-left {
    float: left;
    padding: 0 !important; }
    .add-item-top .add-item-top-left .item-name {
      font-family: "Arial";
      font-size: 24px;
      font-weight: bold;
      padding-top: 15px;
      color: white;
      text-align: left;
      line-height: 1.3; }
      @media (max-width: 453px) {
        .add-item-top .add-item-top-left .item-name {
          font-size: 18px; } }
    .add-item-top .add-item-top-left .item-ingredients {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      color: #9a9ea2;
      line-height: 35px;
      margin-bottom: 20px;
      text-align: left;
      margin-top: 8px; }
      @media (max-width: 453px) {
        .add-item-top .add-item-top-left .item-ingredients {
          font-size: 18px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-item-top .add-item-top-left .item-ingredients {
          line-height: 26px;
          margin-bottom: 13px; } }
      @media (max-width: 453px) {
        .add-item-top .add-item-top-left .item-ingredients {
          line-height: 20px;
          margin-bottom: 10px; } }
    .add-item-top .add-item-top-left .item-description {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      color: white;
      line-height: 35px;
      margin-bottom: 20px;
      font-style: italic;
      text-align: left; }
      @media (max-width: 453px) {
        .add-item-top .add-item-top-left .item-description {
          font-size: 18px; } }
      @media (max-width: 640px) {
        .add-item-top .add-item-top-left .item-description {
          line-height: 26px;
          margin-bottom: 13px; } }
      @media (max-width: 480px) {
        .add-item-top .add-item-top-left .item-description {
          line-height: 20px;
          margin-bottom: 10px; } }
    .add-item-top .add-item-top-left .item-warning {
      font-family: "Arial";
      font-size: 20px;
      font-weight: bold;
      color: white;
      text-align: right;
      padding-right: 20px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-item-top .add-item-top-left .item-warning {
          font-size: 16px; } }
      @media (max-width: 453px) {
        .add-item-top .add-item-top-left .item-warning {
          font-size: 12px; } }
  .add-item-top .add-item-top-right {
    float: right;
    padding: 0 !important;
    margin-top: 9px;
    text-align: right; }
    .add-item-top .add-item-top-right .quantity-label {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      color: #9a9ea2;
      margin-bottom: 10px;
      margin-top: 6px;
      text-align: right; }
      @media (max-width: 453px) {
        .add-item-top .add-item-top-right .quantity-label {
          font-size: 18px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-item-top .add-item-top-right .quantity-label {
          margin-bottom: 6px;
          margin-top: 0; } }
      @media (max-width: 453px) {
        .add-item-top .add-item-top-right .quantity-label {
          margin-bottom: 5px;
          margin-top: 0;
          display: none; } }
    .add-item-top .add-item-top-right .drop-down {
      margin-bottom: 10px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-item-top .add-item-top-right .drop-down {
          margin-bottom: 6px; } }
      @media (max-width: 453px) {
        .add-item-top .add-item-top-right .drop-down {
          margin-bottom: 5px; } }

.add-item-top-image {
  height: 100px;
  position: relative; }
  .add-item-top-image .add-item-top-content {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    padding: 10px;
    position: absolute;
    width: 100%; }
    .add-item-top-image .add-item-top-content .add-item-top-left {
      left: 15px;
      padding: 0 !important; }
      .add-item-top-image .add-item-top-content .add-item-top-left .item-name {
        font-family: "Arial";
        font-size: 24px;
        font-weight: bold;
        padding-top: 5px;
        color: white;
        text-align: left;
        line-height: 1.3; }
        @media (max-width: 453px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-name {
            font-size: 18px; } }
      .add-item-top-image .add-item-top-content .add-item-top-left .item-ingredients {
        font-family: "Arial";
        font-size: 22px;
        font-weight: normal;
        color: #9a9ea2;
        line-height: 35px;
        margin-bottom: 20px;
        text-align: left;
        margin-top: 8px; }
        @media (max-width: 453px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-ingredients {
            font-size: 18px; } }
        @media (min-width: 454px) and (max-width: 618px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-ingredients {
            line-height: 26px;
            margin-bottom: 13px; } }
        @media (max-width: 453px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-ingredients {
            line-height: 20px;
            margin-bottom: 10px; } }
      .add-item-top-image .add-item-top-content .add-item-top-left .item-description {
        font-family: "Arial";
        font-size: 22px;
        font-weight: normal;
        color: white;
        line-height: 35px;
        margin-bottom: 20px;
        font-style: italic;
        text-align: left; }
        @media (max-width: 453px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-description {
            font-size: 18px; } }
        @media (max-width: 640px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-description {
            line-height: 26px;
            margin-bottom: 13px; } }
        @media (max-width: 480px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-description {
            line-height: 20px;
            margin-bottom: 10px; } }
      .add-item-top-image .add-item-top-content .add-item-top-left .item-warning {
        font-family: "Arial";
        font-size: 20px;
        font-weight: bold;
        color: white;
        text-align: right;
        padding-right: 20px; }
        @media (min-width: 454px) and (max-width: 618px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-warning {
            font-size: 16px; } }
        @media (max-width: 453px) {
          .add-item-top-image .add-item-top-content .add-item-top-left .item-warning {
            font-size: 12px; } }
    .add-item-top-image .add-item-top-content .add-item-top-right {
      right: 15px;
      padding: 0 !important;
      margin-top: 9px;
      text-align: right; }
      .add-item-top-image .add-item-top-content .add-item-top-right .quantity-label {
        font-family: "Arial";
        font-size: 22px;
        font-weight: normal;
        color: white;
        margin-bottom: 10px;
        margin-top: 6px;
        text-align: right; }
        @media (max-width: 453px) {
          .add-item-top-image .add-item-top-content .add-item-top-right .quantity-label {
            font-size: 18px; } }
        @media (min-width: 454px) and (max-width: 618px) {
          .add-item-top-image .add-item-top-content .add-item-top-right .quantity-label {
            margin-bottom: 6px;
            margin-top: 0; } }
        @media (max-width: 453px) {
          .add-item-top-image .add-item-top-content .add-item-top-right .quantity-label {
            margin-bottom: 5px;
            margin-top: 0;
            display: none; } }
      .add-item-top-image .add-item-top-content .add-item-top-right .drop-down {
        margin-bottom: 10px; }
        @media (min-width: 454px) and (max-width: 618px) {
          .add-item-top-image .add-item-top-content .add-item-top-right .drop-down {
            margin-bottom: 6px; } }
        @media (max-width: 453px) {
          .add-item-top-image .add-item-top-content .add-item-top-right .drop-down {
            margin-bottom: 5px; } }

.minAlert, .maxAlert {
  font-family: "Arial";
  font-size: 20px;
  font-weight: bold;
  color: #9a9ea2;
  float: right; }
  @media (min-width: 454px) and (max-width: 618px) {
    .minAlert, .maxAlert {
      font-size: 16px; } }
  @media (max-width: 453px) {
    .minAlert, .maxAlert {
      font-size: 12px; } }

.splitter {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  color: #9a9ea2;
  float: right; }
  @media (max-width: 453px) {
    .splitter {
      font-size: 18px; } }

.alert {
  color: red;
  font-family: "Arial";
  font-size: 20px;
  font-weight: bold;
  margin: 0 !important;
  padding: 0 !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .alert {
      font-size: 16px; } }
  @media (max-width: 453px) {
    .alert {
      font-size: 12px; } }

.mini-notification {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  background: rgba(255, 255, 255, 0);
  color: white;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  overflow: auto;
  clear: both; }
  @media (max-width: 453px) {
    .mini-notification {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .mini-notification {
      min-height: 33px;
      line-height: 33px; } }
  @media (max-width: 453px) {
    .mini-notification {
      min-height: 25px;
      line-height: 25px; } }

@media (min-width: 454px) and (max-width: 618px) {
  .add-item-list {
    line-height: 54px !important;
    margin-bottom: 20px; } }
@media (max-width: 453px) {
  .add-item-list {
    line-height: 20px !important;
    margin-bottom: 15px; } }
.add-item-list .my-row {
  padding-left: 30px;
  padding-right: 30px;
  font-size: 24px;
  padding-top: 15px;
  padding-bottom: 15px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-bottom: 1px solid black;
  overflow: auto;
  overflow-y: hidden;
  clear: both;
  cursor: pointer; }
  @media (min-width: 454px) and (max-width: 618px) {
    .add-item-list .my-row {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .add-item-list .my-row {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (max-width: 453px) {
    .add-item-list .my-row {
      font-size: 18px; } }
.add-item-list .my-row-title {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  padding-left: 30px;
  padding-right: 30px;
  clear: both;
  overflow: auto;
  overflow-y: hidden;
  font-weight: bold;
  color: white;
  background: #000000;
  min-height: 52px;
  line-height: 52px;
  margin-top: 40px;
  border: 1px solid black;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px; }
  @media (max-width: 453px) {
    .add-item-list .my-row-title {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .add-item-list .my-row-title {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .add-item-list .my-row-title {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .add-item-list .my-row-title {
      min-height: 35px;
      line-height: 35px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px; } }
  @media (max-width: 453px) {
    .add-item-list .my-row-title {
      min-height: 26px;
      line-height: 26px;
      border-top-right-radius: 6px;
      border-top-left-radius: 6px; } }
.add-item-list .my-row {
  border: 1px solid black;
  border-top: 0px;
  cursor: pointer; }
  .add-item-list .my-row .item-info-left {
    padding: 0 !important; }
    .add-item-list .my-row .item-info-left .item-title {
      text-align: left;
      padding: 0 !important;
      float: left;
      font-weight: bold; }
    .add-item-list .my-row .item-info-left .item-ingredients, .add-item-list .my-row .item-info-left .item-modifiers {
      text-align: left;
      padding: 0 !important;
      float: left;
      font-weight: normal;
      margin-top: 10px;
      line-height: 30px; }
      @media (max-width: 453px) {
        .add-item-list .my-row .item-info-left .item-ingredients, .add-item-list .my-row .item-info-left .item-modifiers {
          margin-top: 8px;
          line-height: 20px; } }
  .add-item-list .my-row .item-info-right {
    padding: 0 !important;
    float: right;
    text-align: right; }
    .add-item-list .my-row .item-info-right .item-price {
      text-align: left;
      padding: 0 !important;
      float: right;
      margin-top: 10px;
      line-height: 30px; }
      @media (max-width: 453px) {
        .add-item-list .my-row .item-info-right .item-price {
          margin-top: 5px;
          line-height: 20px; } }
    .add-item-list .my-row .item-info-right .item-check {
      margin-left: 25px;
      padding: 0 !important;
      margin-top: 5px; }
      .add-item-list .my-row .item-info-right .item-check .btn {
        width: 40px;
        height: 40px;
        padding: 0 !important;
        background: #fdfdfd no-repeat !important;
        border: solid 1px black !important;
        border-radius: 0 !important; }
        @media (min-width: 454px) and (max-width: 618px) {
          .add-item-list .my-row .item-info-right .item-check .btn {
            width: 26.66667px;
            height: 26.66667px; } }
        @media (max-width: 453px) {
          .add-item-list .my-row .item-info-right .item-check .btn {
            width: 20px;
            height: 20px; } }
      .add-item-list .my-row .item-info-right .item-check .active {
        width: 40px;
        height: 40px;
        padding: 0 !important;
        background: #fdfdfd url("assets/img/checked40.png") no-repeat !important;
        border: solid 1px black !important;
        border-radius: 0 !important;
        box-shadow: 0px 0px 0px !important; }
        @media (min-width: 454px) and (max-width: 618px) {
          .add-item-list .my-row .item-info-right .item-check .active {
            background: #fdfdfd url("assets/img/checked30.png") no-repeat !important; } }
        @media (max-width: 453px) {
          .add-item-list .my-row .item-info-right .item-check .active {
            background: #fdfdfd url("assets/img/checked20.png") no-repeat !important; } }
        @media (min-width: 454px) and (max-width: 618px) {
          .add-item-list .my-row .item-info-right .item-check .active {
            width: 26.66667px;
            height: 26.66667px; } }
        @media (max-width: 453px) {
          .add-item-list .my-row .item-info-right .item-check .active {
            width: 20px;
            height: 20px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-item-list .my-row .item-info-right .item-check {
          margin-top: 0; } }
.add-item-list .my-row-final {
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  cursor: pointer; }
  @media (min-width: 454px) and (max-width: 618px) {
    .add-item-list .my-row-final {
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px; } }
  @media (max-width: 453px) {
    .add-item-list .my-row-final {
      border-bottom-right-radius: 6px;
      border-bottom-left-radius: 6px; } }

.unclickable .my-row, .unclickable .my-row-final {
  background: #eeeeee !important;
  color: darkgray; }
  .unclickable .my-row .item-modifiers, .unclickable .my-row-final .item-modifiers {
    color: darkgray !important; }
.unclickable .yet-clickable {
  background: rgba(0, 0, 0, 0.6) !important; }

.cus-note-container {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white; }
  @media (max-width: 453px) {
    .cus-note-container {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .cus-note-container {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .cus-note-container {
      padding-left: 15px;
      padding-right: 15px; } }
  .cus-note-container .cus-note-label {
    font-weight: normal !important;
    margin-bottom: 10px !important; }
  .cus-note-container .cus-note-body {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    max-width: 100%;
    border: 1px solid black; }
    @media (max-width: 453px) {
      .cus-note-container .cus-note-body {
        font-size: 18px; } }
  .cus-note-container .cus-note-description {
    font-family: "Arial";
    font-size: 20px;
    line-height: 25px;
    margin-top: 8px;
    font-weight: lighter; }
    @media (max-width: 453px) {
      .cus-note-container .cus-note-description {
        font-size: 14px;
        line-height: 10px; } }

.add-addr-body {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
  font-size: 24px !important;
  margin-top: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-weight: normal !important;
  border-bottom: 1px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .add-addr-body {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .add-addr-body {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (max-width: 453px) {
    .add-addr-body {
      font-size: 16px !important; } }
  .add-addr-body label {
    color: white !important;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: normal; }
    @media (max-width: 453px) {
      .add-addr-body label {
        margin-top: 10px;
        margin-bottom: 5px; } }
  .add-addr-body .form-group {
    margin-bottom: 0px; }
  .add-addr-body input {
    font-family: "Arial" !important;
    font-size: 26px !important;
    font-weight: bold;
    border-radius: 0px !important;
    border: 1px solid black !important;
    border-bottom: 0px;
    font-weight: normal !important; }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body input {
        font-size: 20px !important; } }
    @media (max-width: 453px) {
      .add-addr-body input {
        font-size: 16px !important; } }
  .add-addr-body .input-group {
    border-radius: 1px; }
  .add-addr-body .addr-panel {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    background: white;
    border: 2px solid black;
    width: 100%;
    cursor: pointer;
    transition: all 0.5s ease; }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body .addr-panel {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .add-addr-body .addr-panel {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body .addr-panel {
        padding-top: 6px; } }
    @media (max-width: 453px) {
      .add-addr-body .addr-panel {
        padding-top: 5px; } }
    .add-addr-body .addr-panel .left {
      font-family: "Arial";
      font-size: 26px;
      font-weight: bold;
      max-width: calc(100% - 80px);
      float: left; }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-addr-body .addr-panel .left {
          font-size: 20px; } }
      @media (max-width: 453px) {
        .add-addr-body .addr-panel .left {
          font-size: 16px; } }
      .add-addr-body .addr-panel .left .addr {
        font-weight: normal;
        clear: both;
        line-height: 35px; }
        @media (min-width: 454px) and (max-width: 618px) {
          .add-addr-body .addr-panel .left .addr {
            line-height: 24px; } }
        @media (max-width: 453px) {
          .add-addr-body .addr-panel .left .addr {
            line-height: 18px; } }
    .add-addr-body .addr-panel .arrow {
      float: right;
      font-family: "Arial";
      font-size: 60px;
      font-weight: bold;
      font-weight: bold;
      cursor: pointer; }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-addr-body .addr-panel .arrow {
          font-size: 30px; } }
      @media (max-width: 453px) {
        .add-addr-body .addr-panel .arrow {
          font-size: 30px; } }
    .add-addr-body .addr-panel .arrow:hover {
      float: right;
      font-family: "Arial";
      font-size: 60px;
      font-weight: bold;
      font-weight: bold;
      color: #9a9ea2;
      cursor: pointer; }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-addr-body .addr-panel .arrow:hover {
          font-size: 30px; } }
      @media (max-width: 453px) {
        .add-addr-body .addr-panel .arrow:hover {
          font-size: 30px; } }
  .add-addr-body .addr-panel:hover {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    -moz-box-shadow: 0px 3px 10px 0.5px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 3px 10px 0.5px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 3px 10px 0.5px rgba(0, 0, 0, 0.8);
    background: white;
    border: 1px solid black;
    width: 100%; }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body .addr-panel:hover {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .add-addr-body .addr-panel:hover {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body .addr-panel:hover {
        padding-top: 20px;
        padding-bottom: 20px; } }
    @media (max-width: 453px) {
      .add-addr-body .addr-panel:hover {
        padding-top: 15px;
        padding-bottom: 15px; } }
  .add-addr-body .add-new-addr {
    font-weight: bold;
    width: 100%;
    width: 100%;
    background: rgba(228, 183, 99, 0.8);
    border-radius: 12px;
    margin-top: 30px;
    margin-bottom: 30px; }
    .add-addr-body .add-new-addr:hover {
      background: rgba(192, 136, 33, 0.8); }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body .add-new-addr {
        margin-bottom: 20px;
        border-radius: 8px;
        margin-top: 20px;
        margin-bottom: 20px; } }
    @media (max-width: 453px) {
      .add-addr-body .add-new-addr {
        margin-bottom: 15px;
        border-radius: 6px;
        margin-top: 15px;
        margin-bottom: 0px; } }
  .add-addr-body .add-new-addr-inactive {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    width: 100%;
    min-height: 83px;
    color: white !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid black;
    border-radius: 12px;
    margin-top: 30px;
    margin-bottom: 30px; }
    @media (max-width: 453px) {
      .add-addr-body .add-new-addr-inactive {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body .add-new-addr-inactive {
        margin-bottom: 20px;
        border-radius: 8px;
        min-height: 55px;
        margin-top: 20px;
        margin-bottom: 20px; } }
    @media (max-width: 453px) {
      .add-addr-body .add-new-addr-inactive {
        margin-bottom: 15px;
        border-radius: 6px;
        min-height: 42px;
        margin-top: 15px;
        margin-bottom: 15px; } }
  .add-addr-body button.new-address {
    /*@include heading35;*/
    font-weight: bold;
    width: 100%;
    color: white !important;
    border: 1px solid #bdc4c7;
    border-radius: 6px;
    margin-top: 15px;
    width: 100%; }
  .add-addr-body button.cancel-address {
    background-color: rgba(0, 0, 0, 0.6);
    margin-bottom: 40px; }
  .add-addr-body button.new-address,
  .add-addr-body button.cancel-address {
    /*font-weight:normal;
    font-size:20px*/ }
  .add-addr-body button.save-address {
    background-color: rgba(228, 183, 99, 0.8); }
  .add-addr-body .alert-notify {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    color: #88152d; }
    @media (max-width: 453px) {
      .add-addr-body .alert-notify {
        font-size: 18px; } }
  .add-addr-body .notify {
    font-size: 20px !important;
    line-height: 28px; }
    @media (max-width: 453px) {
      .add-addr-body .notify {
        font-size: 12px !important;
        line-height: 15px; } }
  .add-addr-body .notify-small {
    font-family: "Arial";
    font-size: 20px;
    font-weight: bold; }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body .notify-small {
        font-size: 16px; } }
    @media (max-width: 453px) {
      .add-addr-body .notify-small {
        font-size: 12px; } }
  .add-addr-body .notify-text {
    margin-top: 50px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-addr-body .notify-text {
        margin-top: 33px; } }
    @media (max-width: 453px) {
      .add-addr-body .notify-text {
        margin-top: 25px; } }
  .add-addr-body .dropdown-toggle {
    border: 1px solid gray;
    padding: 10px 15px 10px 15px;
    vertical-align: middle; }
    .add-addr-body .dropdown-toggle a {
      color: white !important;
      font-size: 22px;
      line-height: 28px;
      text-decoration: none;
      max-width: 85%; }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-addr-body .dropdown-toggle a {
          font-size: 20px; } }
      @media (max-width: 453px) {
        .add-addr-body .dropdown-toggle a {
          font-size: 14px;
          line-height: 20px; } }
    .add-addr-body .dropdown-toggle li a {
      font-size: 22px;
      color: black !important;
      line-height: 26px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-addr-body .dropdown-toggle li a {
          font-size: 20px; } }
      @media (max-width: 453px) {
        .add-addr-body .dropdown-toggle li a {
          font-size: 16px;
          line-height: 20px; } }
    .add-addr-body .dropdown-toggle img {
      height: 100%;
      margin-top: 3px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .add-addr-body .dropdown-toggle img {
          height: 36px; } }
      @media (max-width: 453px) {
        .add-addr-body .dropdown-toggle img {
          height: 30px; } }
  .add-addr-body .dropdown-menu {
    width: 100%; }
    .add-addr-body .dropdown-menu li {
      color: black !important;
      overflow: auto; }
  .add-addr-body .addr-panel-label {
    padding-top: 20px; }
    .add-addr-body .addr-panel-label .availability {
      font-size: 16px;
      margin-bottom: 16px; }
    .add-addr-body .addr-panel-label .yes {
      color: #49df49; }
    .add-addr-body .addr-panel-label .no {
      color: #e43b3b; }

.confirm-order-top {
  background-color: rgba(0, 0, 0, 0.6);
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: white; }
  .confirm-order-top h4 {
    font-size: 22px; }
    @media (max-width: 453px) {
      .confirm-order-top h4 {
        font-size: 18px;
        font-weight: normal; } }

.small-header {
  font-family: "Arial";
  font-size: 22px;
  font-weight: normal;
  padding-left: 30px;
  padding-right: 30px;
  clear: both;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: auto;
  overflow-y: hidden;
  font-weight: bold;
  color: white;
  background: black;
  min-height: 52px;
  line-height: 52px;
  border: 1px solid black; }
  @media (max-width: 453px) {
    .small-header {
      font-size: 18px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .small-header {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .small-header {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .small-header {
      font-size: 18px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px; } }
  @media (max-width: 453px) {
    .small-header {
      font-size: 18px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px; } }

.serviceType {
  margin-left: 30px;
  margin-right: 30px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .serviceType {
      margin-left: 20px;
      margin-right: 20px; } }
  @media (max-width: 453px) {
    .serviceType {
      margin-left: 15px;
      margin-right: 15px; } }
  .serviceType .carryout-delivery {
    width: 100%;
    clear: both;
    margin-top: 20px; }
    .serviceType .carryout-delivery .half {
      width: 50%; }
    .serviceType .carryout-delivery .whole {
      width: 100%; }
      .serviceType .carryout-delivery .whole img {
        width: 7% !important;
        height: auto; }
    .serviceType .carryout-delivery .delivery, .serviceType .carryout-delivery .carryout, .serviceType .carryout-delivery .delivery-active, .serviceType .carryout-delivery .carryout-active {
      min-height: 100px;
      border: 1px solid black;
      font-size: 24px;
      color: white;
      font-weight: bold; }
      @media (min-width: 454px) and (max-width: 618px) {
        .serviceType .carryout-delivery .delivery, .serviceType .carryout-delivery .carryout, .serviceType .carryout-delivery .delivery-active, .serviceType .carryout-delivery .carryout-active {
          margin-bottom: 20px;
          min-height: 87px;
          font-size: 20px; } }
      @media (max-width: 453px) {
        .serviceType .carryout-delivery .delivery, .serviceType .carryout-delivery .carryout, .serviceType .carryout-delivery .delivery-active, .serviceType .carryout-delivery .carryout-active {
          margin-bottom: 15px;
          min-height: 65px;
          font-size: 18px; } }
      .serviceType .carryout-delivery .delivery img, .serviceType .carryout-delivery .carryout img, .serviceType .carryout-delivery .delivery-active img, .serviceType .carryout-delivery .carryout-active img {
        width: 15%;
        height: auto; }
    .serviceType .carryout-delivery .delivery-active {
      border-left: 0px;
      background-image: linear-gradient(#3a3a3a, #595959) !important; }
    .serviceType .carryout-delivery .carryout-active {
      border-right: 0px;
      background-image: linear-gradient(#3a3a3a, #595959) !important; }
    .serviceType .carryout-delivery .carryout {
      border-right: 0px;
      background-color: #c2c2c2 !important; }
    .serviceType .carryout-delivery .delivery {
      border-left: 0px;
      background-color: #C2C2C2 !important; }
    .serviceType .carryout-delivery button {
      border-radius: 12px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .serviceType .carryout-delivery button {
          border-radius: 6px; } }
      @media (max-width: 453px) {
        .serviceType .carryout-delivery button {
          border-radius: 6px; } }

.confirm-order-body {
  padding-top: 30px; }
  .confirm-order-body .pick-up-notification {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: 30px;
    margin-right: 30px;
    background: white;
    font-weight: bold;
    min-height: 100px;
    line-height: 35px;
    margin-bottom: 50px;
    border: 1px black solid;
    overflow: auto;
    overflow-y: hidden;
    padding-top: 35px;
    padding-bottom: 35px; }
    @media (max-width: 453px) {
      .confirm-order-body .pick-up-notification {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .confirm-order-body .pick-up-notification {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .confirm-order-body .pick-up-notification {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .confirm-order-body .pick-up-notification {
        margin-left: 20px;
        margin-right: 20px; } }
    @media (max-width: 453px) {
      .confirm-order-body .pick-up-notification {
        margin-left: 15px;
        margin-right: 15px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .confirm-order-body .pick-up-notification {
        min-height: 67px;
        line-height: 23px;
        margin-top: 20px;
        margin-bottom: 33px;
        padding-top: 23px;
        padding-bottom: 23px; } }
    @media (max-width: 453px) {
      .confirm-order-body .pick-up-notification {
        min-height: 50px;
        line-height: 22px;
        margin-top: 15px;
        margin-bottom: 25px;
        padding-top: 18px;
        padding-bottom: 18px; } }
    .confirm-order-body .pick-up-notification .notify-text {
      float: left; }
    .confirm-order-body .pick-up-notification .alert1 {
      font-weight: bold;
      color: red;
      clear: both; }
    .confirm-order-body .pick-up-notification .alert2 {
      font-weight: normal;
      color: red;
      clear: both; }
    .confirm-order-body .pick-up-notification .arrow {
      color: text-color3;
      float: right; }
  .confirm-order-body .confirm-order-list {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    margin-left: 30px;
    margin-right: 30px;
    line-height: 80px !important;
    margin-bottom: 30px; }
    @media (max-width: 453px) {
      .confirm-order-body .confirm-order-list {
        font-size: 18px; } }
    .confirm-order-body .confirm-order-list .my-row {
      padding-left: 30px;
      padding-right: 30px;
      min-height: 250px;
      padding-top: 15px;
      padding-bottom: 15px;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      border-bottom: 1px solid black;
      overflow: auto;
      overflow-y: hidden;
      clear: both;
      cursor: pointer; }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-body .confirm-order-list .my-row {
          padding-left: 20px;
          padding-right: 20px; } }
      @media (max-width: 453px) {
        .confirm-order-body .confirm-order-list .my-row {
          padding-left: 15px;
          padding-right: 15px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .confirm-order-body .confirm-order-list {
        margin-left: 20px;
        margin-right: 20px; } }
    @media (max-width: 453px) {
      .confirm-order-body .confirm-order-list {
        margin-left: 15px;
        margin-right: 15px; } }
    @media (max-width: 460px) {
      .confirm-order-body .confirm-order-list {
        line-height: 40px !important;
        margin-bottom: 15px; } }
    .confirm-order-body .confirm-order-list .my-row-title {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      padding-left: 30px;
      padding-right: 30px;
      clear: both;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      overflow: auto;
      overflow-y: hidden;
      font-weight: bold;
      color: white;
      background: black;
      min-height: 52px;
      line-height: 52px;
      border: 1px solid black; }
      @media (max-width: 453px) {
        .confirm-order-body .confirm-order-list .my-row-title {
          font-size: 18px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-body .confirm-order-list .my-row-title {
          padding-left: 20px;
          padding-right: 20px; } }
      @media (max-width: 453px) {
        .confirm-order-body .confirm-order-list .my-row-title {
          padding-left: 15px;
          padding-right: 15px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-body .confirm-order-list .my-row-title {
          font-size: 16px;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px; } }
      @media (max-width: 453px) {
        .confirm-order-body .confirm-order-list .my-row-title {
          font-size: 12px;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px; } }
    .confirm-order-body .confirm-order-list .my-row {
      border: 1px solid black;
      border-top: 0px;
      padding-top: 30px !important;
      min-height: 100px !important;
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      cursor: initial;
      overflow: auto; }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-body .confirm-order-list .my-row {
          padding-top: 20px !important; } }
      @media (max-width: 453px) {
        .confirm-order-body .confirm-order-list .my-row {
          padding-top: 10px !important; } }
      @media (max-width: 453px) {
        .confirm-order-body .confirm-order-list .my-row {
          font-size: 18px; } }
      .confirm-order-body .confirm-order-list .my-row .item-name-row {
        overflow: auto;
        overflow-y: hidden;
        line-height: 24px;
        margin-bottom: 24px;
        color: white;
        font-weight: bold; }
        @media (min-width: 454px) and (max-width: 618px) {
          .confirm-order-body .confirm-order-list .my-row .item-name-row {
            min-height: 29px;
            line-height: 29px;
            margin-bottom: 22px; } }
        @media (max-width: 453px) {
          .confirm-order-body .confirm-order-list .my-row .item-name-row {
            min-height: 22px;
            line-height: 22px;
            margin-bottom: 16px; } }
        .confirm-order-body .confirm-order-list .my-row .item-name-row .item-name {
          padding: 0 !important;
          float: left; }
        .confirm-order-body .confirm-order-list .my-row .item-name-row .item-price {
          padding: 0 !important;
          float: right; }
        .confirm-order-body .confirm-order-list .my-row .item-name-row .item-delete {
          text-decoration: none !important;
          color: red !important;
          font-size: 32px;
          vertical-align: bottom; }
      .confirm-order-body .confirm-order-list .my-row .item-modifiers {
        color: #9a9ea2;
        font-weight: lighter;
        margin-top: 15px;
        margin-right: 100px;
        line-height: 35px; }
        @media (min-width: 454px) and (max-width: 618px) {
          .confirm-order-body .confirm-order-list .my-row .item-modifiers {
            margin-top: 5px;
            line-height: 25px; } }
        @media (max-width: 453px) {
          .confirm-order-body .confirm-order-list .my-row .item-modifiers {
            margin-top: 0;
            line-height: 20px; } }

.confirm-order-bottom {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
  height: 100%; }
  @media (min-width: 454px) and (max-width: 618px) {
    .confirm-order-bottom {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .confirm-order-bottom {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .confirm-order-bottom .total {
      font-size: 120%; } }
  @media (max-width: 453px) {
    .confirm-order-bottom .total {
      font-size: 100%; } }
  @media (min-width: 619px) {
    .confirm-order-bottom .total {
      font-size: 140%; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .confirm-order-bottom .others_price {
      font-size: 120%; } }
  @media (max-width: 453px) {
    .confirm-order-bottom .others_price {
      font-size: 100%; } }
  @media (min-width: 619px) {
    .confirm-order-bottom .others_price {
      font-size: 140%; } }
  .confirm-order-bottom .tips-header {
    font-size: 22px;
    font-weight: normal;
    padding-left: 30px;
    padding-right: 30px;
    clear: both;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: auto;
    overflow-y: hidden;
    font-weight: bold;
    color: white;
    background: black;
    min-height: 52px;
    line-height: 52px;
    border: 1px solid black; }
  .confirm-order-bottom .tips-percentage {
    width: 100%;
    height: 50px; }
    .confirm-order-bottom .tips-percentage .tips-tab {
      width: 20%;
      float: left;
      height: 40px;
      line-height: 3em;
      outline: 3px solid #585858;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      background-color: #FFF;
      color: #FFF; }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-bottom .tips-percentage .tips-tab {
          font-size: 18px;
          line-height: 2.3em; } }
      @media (max-width: 453px) {
        .confirm-order-bottom .tips-percentage .tips-tab {
          font-size: 14px; } }
      @media (min-width: 619px) {
        .confirm-order-bottom .tips-percentage .tips-tab {
          font-size: 20px;
          line-height: 2.1em; } }
      .confirm-order-bottom .tips-percentage .tips-tab input {
        width: 100%;
        height: 40px !important;
        padding: 0px;
        margin: 0px;
        line-height: 1.2em !important;
        text-align: center;
        font-size: 1.1em !important;
        background-color: #E19B38; }
    @media (max-width: 334px) {
      .confirm-order-bottom .tips-percentage .tips-tab-text {
        line-height: 1.4em; } }
    .confirm-order-bottom .tips-percentage .tips-tab.sel {
      cursor: default;
      background-color: #d1883d;
      color: #FFF; }
    .confirm-order-bottom .tips-percentage .tips-tab.no-sel {
      cursor: pointer;
      background-color: #FFF !important;
      color: #585858; }
  .confirm-order-bottom .subtotal {
    width: 100%;
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    min-height: 83px;
    height: auto;
    border: 1px solid black;
    padding-top: 15px;
    padding-bottom: 15px;
    z-index: 100;
    background: white;
    margin-bottom: 20px; }
    @media (max-width: 453px) {
      .confirm-order-bottom .subtotal {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .confirm-order-bottom .subtotal {
        min-height: 55px;
        padding-top: 10px;
        padding-bottom: 10px; } }
    @media (max-width: 453px) {
      .confirm-order-bottom .subtotal {
        min-height: 42px;
        padding-top: 10px;
        padding-bottom: 10px; } }
    .confirm-order-bottom .subtotal .row {
      line-height: 30px;
      padding-bottom: 5px; }
      .confirm-order-bottom .subtotal .row h4 {
        margin: 0; }
      .confirm-order-bottom .subtotal .row h3 {
        margin: 0; }
    .confirm-order-bottom .subtotal .alert1 {
      font-family: "Arial";
      font-size: 20px;
      font-weight: bold;
      color: red;
      margin-top: 10px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-bottom .subtotal .alert1 {
          font-size: 16px; } }
      @media (max-width: 453px) {
        .confirm-order-bottom .subtotal .alert1 {
          font-size: 12px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-bottom .subtotal .alert1 {
          margin-top: 6px; } }
      @media (max-width: 453px) {
        .confirm-order-bottom .subtotal .alert1 {
          margin-top: 3px; } }
    .confirm-order-bottom .subtotal .delivery {
      font-family: "Arial";
      font-size: 20px;
      font-weight: bold;
      margin-top: 10px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-bottom .subtotal .delivery {
          font-size: 16px; } }
      @media (max-width: 453px) {
        .confirm-order-bottom .subtotal .delivery {
          font-size: 12px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-bottom .subtotal .delivery {
          margin-top: 6px; } }
      @media (max-width: 453px) {
        .confirm-order-bottom .subtotal .delivery {
          margin-top: 3px; } }
    .confirm-order-bottom .subtotal .content {
      height: 100%;
      width: 100%;
      font-weight: bold;
      line-height: 24px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .confirm-order-bottom .subtotal .content {
          line-height: 18px; } }
      @media (max-width: 453px) {
        .confirm-order-bottom .subtotal .content {
          line-height: 14px; } }
      .confirm-order-bottom .subtotal .content .title {
        float: left;
        margin-top: 6px; }
      .confirm-order-bottom .subtotal .content .price {
        float: right; }

.btn.confirm-options {
  font-family: "Arial";
  font-size: 30px;
  font-weight: normal;
  min-height: 42px;
  color: white !important;
  border: 1px solid #bdc4c7;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 12px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .btn.confirm-options {
      font-size: 16px;
      margin: 10px auto;
      border-radius: 6px; } }
  @media (max-width: 453px) {
    .btn.confirm-options {
      font-size: 12px;
      margin: 5px auto;
      border-radius: 6px; } }

.btn.add-more-items {
  font-family: "Arial";
  font-size: 24px;
  font-weight: bold;
  background: rgba(228, 183, 99, 0.8); }
  @media (min-width: 454px) and (max-width: 618px) {
    .btn.add-more-items {
      font-size: 24px; } }
  @media (max-width: 453px) {
    .btn.add-more-items {
      font-size: 18px; } }

.btn.clear-cart {
  font-family: "Arial";
  font-size: 24px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.6) !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .btn.clear-cart {
      font-size: 24px; } }
  @media (max-width: 453px) {
    .btn.clear-cart {
      font-size: 18px; } }

.more-to-cart {
  font-family: "Arial";
  background: #bdc4c7 !important; }

.terms-of-use-wrap {
  color: #585858;
  font-size: 12px;
  margin-top: 10px;
  font-weight: normal; }

.shop-list-item {
  padding-top: .7em;
  padding-bottom: .7em;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-bottom: 1px solid black;
  overflow: auto;
  overflow-y: hidden;
  clear: both;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 22px;
  line-height: 1.5;
  cursor: pointer;
  display: flex; }
  @media (min-width: 454px) and (max-width: 618px) {
    .shop-list-item {
      font-size: 18px; } }
  @media (max-width: 453px) {
    .shop-list-item {
      font-size: 15px; }
      .shop-list-item .shop-list-item-distance,
      .shop-list-item .shop-list-item-content {
        padding-top: .2em; } }

.shop-list-item-content {
  flex: 1 1 auto;
  vertical-align: baseline; }

.shop-list-item-right {
  flex: 0 0 auto;
  background: url(/assets/img/arrow.png) right center no-repeat;
  min-height: 27px;
  padding-right: 20px; }

.shop-list-item-distance {
  vertical-align: baseline;
  display: inline-block;
  margin-left: .2em;
  margin-right: .5em;
  min-width: 3em;
  font-size: 100%;
  color: #c7c7cc; }

.add-phone-body {
  padding-left: 30px;
  padding-right: 30px;
  font-family: "Arial";
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
  /*margin-bottom: 65px;*/
  font-weight: normal !important;
  background-color: rgba(0, 0, 0, 0.6);
  padding-bottom: 10px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .add-phone-body {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .add-phone-body {
      padding-left: 15px;
      padding-right: 15px; } }
  @media (max-width: 453px) {
    .add-phone-body {
      font-size: 18px; } }
  .add-phone-body label {
    color: white !important; }
  .add-phone-body .alert-notify {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    color: #d1883d; }
    @media (max-width: 453px) {
      .add-phone-body .alert-notify {
        font-size: 18px; } }
  .add-phone-body #phoneLabel {
    margin-top: 20px;
    margin-bottom: 10px; }
  .add-phone-body .name-label {
    margin-bottom: 10px; }
  .add-phone-body .notify-text {
    color: #9a9ea2;
    margin-top: 30px;
    margin-bottom: 20px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-phone-body .notify-text {
        margin-top: 15px;
        line-height: 25px; } }
    @media (max-width: 453px) {
      .add-phone-body .notify-text {
        margin-top: 8px;
        margin-bottom: 8px;
        line-height: 20px; } }
  .add-phone-body input {
    font-family: "Arial" !important;
    font-size: 26px !important;
    font-weight: bold;
    font-weight: normal !important; }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-phone-body input {
        font-size: 20px !important; } }
    @media (max-width: 453px) {
      .add-phone-body input {
        font-size: 16px !important; } }
  .add-phone-body .add-name {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    width: 100%;
    min-height: 83px;
    color: white !important;
    background: #30a3ce !important;
    border: 2px solid #007daa;
    border-radius: 12px;
    background: -webkit-linear-gradient(#30a3ce, #026f92) !important;
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#30a3ce, #026f92) !important;
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#30a3ce, #026f92) !important;
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#30a3ce, #026f92) !important;
    /* Standard syntax */
    margin-top: 30px;
    margin-bottom: 30px; }
    @media (max-width: 453px) {
      .add-phone-body .add-name {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-phone-body .add-name {
        margin-bottom: 20px;
        border-radius: 8px;
        min-height: 55px;
        margin-top: 20px;
        margin-bottom: 20px; } }
    @media (max-width: 453px) {
      .add-phone-body .add-name {
        margin-bottom: 15px;
        border-radius: 6px;
        min-height: 42px;
        margin-top: 15px;
        margin-bottom: 15px; } }
  .add-phone-body .add-name-inactive {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    width: 100%;
    min-height: 83px;
    color: white !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid black;
    border-radius: 12px;
    margin-top: 30px;
    margin-bottom: 30px; }
    @media (max-width: 453px) {
      .add-phone-body .add-name-inactive {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .add-phone-body .add-name-inactive {
        margin-bottom: 20px;
        border-radius: 8px;
        min-height: 55px;
        margin-top: 20px;
        margin-bottom: 20px; } }
    @media (max-width: 453px) {
      .add-phone-body .add-name-inactive {
        margin-bottom: 15px;
        border-radius: 6px;
        min-height: 42px;
        margin-top: 15px;
        margin-bottom: 15px; } }

.bottom-button-container .btn-bottom-continue:hover {
  background-color: #ac6e2f; }

.pay-top {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .pay-top {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .pay-top {
      padding-left: 15px;
      padding-right: 15px; } }
  .pay-top .wrapper {
    position: relative;
    height: 100%; }
    .pay-top .wrapper err {
      top: 65px !important;
      border-radius: 12px;
      position: relative !important; }
    .pay-top .wrapper .prepay-required-notification {
      width: 100%;
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      position: absolute;
      top: 0;
      min-height: 83px;
      height: auto;
      border-bottom-right-radius: 12px;
      border-bottom-left-radius: 12px;
      padding-top: 30px;
      padding-bottom: 30px;
      z-index: 100;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      clear: both; }
      @media (max-width: 453px) {
        .pay-top .wrapper .prepay-required-notification {
          font-size: 18px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .pay-top .wrapper .prepay-required-notification {
          min-height: 55px;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          padding-top: 20px;
          padding-bottom: 20px; } }
      @media (max-width: 453px) {
        .pay-top .wrapper .prepay-required-notification {
          min-height: 42px;
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;
          padding-top: 15px;
          padding-bottom: 20px; } }
      .pay-top .wrapper .prepay-required-notification .content {
        height: 100%;
        font-weight: bold;
        line-height: 1.3;
        text-align: center;
        font-weight: normal;
        clear: both; }
        @media (min-width: 454px) and (max-width: 618px) {
          .pay-top .wrapper .prepay-required-notification .content {
            line-height: 1.3; } }
        @media (max-width: 453px) {
          .pay-top .wrapper .prepay-required-notification .content {
            line-height: 1.3; } }

.payoption {
  padding-left: 30px;
  padding-right: 30px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .payoption {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .payoption {
      padding-left: 15px;
      padding-right: 15px; } }
  .payoption .inperson-now {
    width: 100%;
    clear: both; }
    .payoption .inperson-now .inperson, .payoption .inperson-now .now {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      width: 50%;
      min-height: 83px;
      color: #30a3ce;
      background: transparent;
      border: 2px solid #30a3ce;
      border-radius: 12px; }
      @media (max-width: 453px) {
        .payoption .inperson-now .inperson, .payoption .inperson-now .now {
          font-size: 18px; } }
      @media (min-width: 454px) and (max-width: 618px) {
        .payoption .inperson-now .inperson, .payoption .inperson-now .now {
          margin-bottom: 20px;
          border-radius: 8px;
          min-height: 55px; } }
      @media (max-width: 453px) {
        .payoption .inperson-now .inperson, .payoption .inperson-now .now {
          margin-bottom: 15px;
          border-radius: 6px;
          min-height: 42px; } }
    .payoption .inperson-now .active {
      color: white !important;
      background: #30a3ce !important; }

.inactive {
  background: darkgray !important; }

.pay-body {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px; }
  @media (max-width: 453px) {
    .pay-body {
      margin-left: 15px;
      margin-right: 15px; } }
  .pay-body .saved-payment-list-group,
  .pay-body input {
    font-family: "Arial" !important;
    font-size: 26px !important;
    font-weight: bold; }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .saved-payment-list-group,
      .pay-body input {
        font-size: 20px !important; } }
    @media (max-width: 453px) {
      .pay-body .saved-payment-list-group,
      .pay-body input {
        font-size: 16px !important; } }
  .pay-body .saved-payment-list-group .list-group-item {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: normal; }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .saved-payment-list-group .list-group-item {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pay-body .saved-payment-list-group .list-group-item {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .saved-payment-list-group .list-group-item {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 16px; } }
    @media (max-width: 453px) {
      .pay-body .saved-payment-list-group .list-group-item {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 14px; } }
  .pay-body input {
    border-radius: 0px !important;
    border: 1px solid black !important; }
    @media (max-width: 453px) {
      .pay-body input {
        height: 45px; } }
  .pay-body .input-group:last-child {
    border-bottom: 1px; }
  .pay-body .input-group {
    border-radius: 1px; }
  .pay-body .prep-notification {
    font-family: "Arial";
    font-size: 24px;
    font-weight: bold;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: normal !important;
    text-align: center;
    color: white !important;
    line-height: 1.3; }
    @media (max-width: 453px) {
      .pay-body .prep-notification {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .prep-notification {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pay-body .prep-notification {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (max-width: 453px) {
      .pay-body .prep-notification {
        line-height: 1.3; } }
  .pay-body .prep-notification-delivery {
    font-family: "Arial";
    font-size: 24px;
    font-weight: bold;
    padding-left: 30px;
    padding-right: 30px;
    color: black !important;
    font-weight: normal !important;
    text-align: center;
    color: white !important;
    line-height: 1.3; }
    @media (max-width: 453px) {
      .pay-body .prep-notification-delivery {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .prep-notification-delivery {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pay-body .prep-notification-delivery {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (max-width: 453px) {
      .pay-body .prep-notification-delivery {
        line-height: 1.3; } }
  .pay-body .action-notification {
    font-family: "Arial";
    font-size: 24px;
    font-weight: bold;
    padding-left: 30px;
    padding-right: 30px;
    color: black !important;
    font-weight: normal !important;
    text-align: center;
    color: white !important;
    margin-top: 15px;
    margin-bottom: 15px; }
    @media (max-width: 453px) {
      .pay-body .action-notification {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .action-notification {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pay-body .action-notification {
        padding-left: 15px;
        padding-right: 15px; } }
  .pay-body .cus-addr-panel {
    font-family: "Arial";
    font-size: 24px;
    font-weight: bold;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: normal !important;
    text-align: center;
    color: white;
    line-height: 1.3; }
    @media (max-width: 453px) {
      .pay-body .cus-addr-panel {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .cus-addr-panel {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pay-body .cus-addr-panel {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (max-width: 453px) {
      .pay-body .cus-addr-panel {
        line-height: 1.3; } }
  .pay-body .shop-information {
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: bold !important;
    text-align: center;
    color: white !important; }
    @media (max-width: 453px) {
      .pay-body .shop-information {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .shop-information {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pay-body .shop-information {
        padding-left: 15px;
        padding-right: 15px; } }
    .pay-body .shop-information .shop-name {
      font-family: "Arial";
      font-size: 60px;
      font-weight: bold;
      line-height: 1.3;
      margin-top: 30px; }
      @media (min-width: 454px) and (max-width: 618px) {
        .pay-body .shop-information .shop-name {
          font-size: 30px; } }
      @media (max-width: 453px) {
        .pay-body .shop-information .shop-name {
          font-size: 30px; } }
    .pay-body .shop-information .shop-address {
      line-height: 1.3; }
    .pay-body .shop-information .shop-address, .pay-body .shop-information .shop-phoneNo {
      font-family: "Arial";
      font-size: 22px;
      font-weight: normal;
      margin-top: 30px;
      color: white !important; }
      @media (max-width: 453px) {
        .pay-body .shop-information .shop-address, .pay-body .shop-information .shop-phoneNo {
          font-size: 18px; } }
  .pay-body .amount-notification {
    font-family: "Arial";
    font-size: 24px;
    font-weight: bold;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: normal !important;
    margin-top: 40px;
    line-height: 1.3;
    color: white !important; }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .amount-notification {
        font-size: 24px; } }
    @media (max-width: 453px) {
      .pay-body .amount-notification {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .amount-notification {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pay-body .amount-notification {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-body .amount-notification {
        margin-top: 20px; } }
    @media (max-width: 453px) {
      .pay-body .amount-notification {
        margin-top: 20px;
        line-height: 1.3; } }

.order-summary ul li {
  font-size: 26px;
  padding-top: 15px;
  padding-bottom: 5px;
  font-weight: bold; }
  @media (min-width: 454px) and (max-width: 618px) {
    .order-summary ul li {
      padding-top: 10px;
      padding-bottom: 5px;
      font-size: 16px; } }
  @media (max-width: 453px) {
    .order-summary ul li {
      padding-top: 10px;
      padding-bottom: 5px;
      font-size: 14px; } }
.order-summary .small-text {
  font-size: 22px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .order-summary .small-text {
      padding-top: 10px;
      padding-bottom: 5px;
      font-size: 14px; } }
  @media (max-width: 453px) {
    .order-summary .small-text {
      padding-top: 10px;
      padding-bottom: 5px;
      font-size: 14px; } }

.done {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px 0 !important; }

.pay-name-field {
  margin-right: 30px !important;
  margin-left: 30px !important; }

.pay-name-control-label {
  font-size: 36px;
  font-weight: bold;
  color: black !important; }

.pay-bottom {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .pay-bottom {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 453px) {
    .pay-bottom {
      padding-left: 15px;
      padding-right: 15px; } }
  .pay-bottom .save-for-later {
    padding-left: 30px;
    padding-right: 30px;
    font-family: "Arial";
    font-size: 22px;
    font-weight: normal;
    min-height: 83px;
    max-height: 83px;
    line-height: 1.3;
    height: auto;
    border: 1px solid black;
    width: 100%;
    z-index: 100;
    background: white; }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-bottom .save-for-later {
        padding-left: 20px;
        padding-right: 20px; } }
    @media (max-width: 453px) {
      .pay-bottom .save-for-later {
        padding-left: 15px;
        padding-right: 15px; } }
    @media (max-width: 453px) {
      .pay-bottom .save-for-later {
        font-size: 18px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .pay-bottom .save-for-later {
        min-height: 55px;
        max-height: 55px;
        line-height: 1.3; } }
    @media (max-width: 453px) {
      .pay-bottom .save-for-later {
        min-height: 42px;
        max-height: 42px;
        line-height: 1.3; } }
    .pay-bottom .save-for-later .content {
      height: 100%;
      width: 100%;
      font-weight: bold; }
      .pay-bottom .save-for-later .content .title {
        float: left; }
      .pay-bottom .save-for-later .content .choice {
        margin-top: 17px;
        float: right; }
        @media (min-width: 454px) and (max-width: 618px) {
          .pay-bottom .save-for-later .content .choice {
            margin-top: 12px; } }
        @media (max-width: 453px) {
          .pay-bottom .save-for-later .content .choice {
            margin-top: 9px; } }
        .pay-bottom .save-for-later .content .choice label {
          min-height: 50px;
          line-height: 1.3;
          border-radius: 25px;
          border: 1px black solid;
          width: 100px;
          height: auto;
          padding-top: 0; }
          @media (min-width: 454px) and (max-width: 618px) {
            .pay-bottom .save-for-later .content .choice label {
              min-height: 33px;
              line-height: 1.3;
              border-radius: 17px;
              width: 67px; } }
          @media (max-width: 453px) {
            .pay-bottom .save-for-later .content .choice label {
              min-height: 25px;
              line-height: 1.3;
              border-radius: 13px;
              width: 50px; } }
        .pay-bottom .save-for-later .content .choice .active {
          background: #4bd562; }
        .pay-bottom .save-for-later .content .choice span {
          min-height: 50px;
          line-height: 1.3;
          border-radius: 25px;
          cursor: pointer; }
          @media (min-width: 454px) and (max-width: 618px) {
            .pay-bottom .save-for-later .content .choice span {
              min-height: 33px;
              line-height: 1.3;
              border-radius: 17px; } }
          @media (max-width: 453px) {
            .pay-bottom .save-for-later .content .choice span {
              min-height: 25px;
              line-height: 1.3;
              border-radius: 13px; } }
        .pay-bottom .save-for-later .content .choice a {
          -moz-box-shadow: 0px 1px 2px 0.5px rgba(0, 0, 0, 0.8);
          -webkit-box-shadow: 0px 1px 2px 0.5px rgba(0, 0, 0, 0.8);
          box-shadow: 0px 1px 2px 0.5px rgba(0, 0, 0, 0.8);
          border-radius: 25px;
          cursor: pointer;
          background: white;
          border-color: black; }
          @media (min-width: 454px) and (max-width: 618px) {
            .pay-bottom .save-for-later .content .choice a {
              border-radius: 17px; } }
          @media (max-width: 453px) {
            .pay-bottom .save-for-later .content .choice a {
              border-radius: 13px; } }
        .pay-bottom .save-for-later .content .choice input {
          border-radius: 25px;
          height: 100% !important; }
          @media (min-width: 454px) and (max-width: 618px) {
            .pay-bottom .save-for-later .content .choice input {
              border-radius: 17px; } }
          @media (max-width: 453px) {
            .pay-bottom .save-for-later .content .choice input {
              border-radius: 13px; } }

.saved-payments {
  padding: 15px 30px;
  font-size: 22px;
  color: white;
  margin-bottom: 15px;
  background-color: white;
  border: 1px black solid; }
  @media (max-width: 453px) {
    .saved-payments {
      font-size: 14px;
      margin: 10px 5px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .saved-payments {
      font-size: 14px; } }
  .saved-payments a {
    color: black;
    text-decoration: none; }
  .saved-payments a:hover {
    cursor: default; }

.payment-selected {
  background-color: #94c6ff;
  font-weight: bold !important; }

.checkbox-text {
  margin-left: 5px;
  position: absolute;
  height: 102px;
  line-height: 102px;
  font-size: 22px; }
  @media (max-width: 453px) {
    .checkbox-text {
      font-size: 14px;
      margin-top: 16px;
      line-height: 1.3; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .checkbox-text {
      font-size: 18px;
      margin-top: 22px;
      line-height: 1.3; } }

.checkbox-save-payment {
  margin: 0px 0px !important; }

.save-new-card {
  padding-left: 30px;
  margin-bottom: 40px; }
  @media (max-width: 453px) {
    .save-new-card {
      padding-left: 15px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .save-new-card {
      padding-left: 15px; } }

.order-complite {
  font-size: 21px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .order-complite {
      font-size: 19px; } }
  @media (max-width: 453px) {
    .order-complite {
      font-size: 13px; } }

.my-wrapper .header.header_orange {
  display: flex;
  align-items: center;
  font-size: 100%;
  padding: .1em 0;
  background: #E19B38; }
.my-wrapper .header .orderspoon-logo {
  width: 60%; }
.my-wrapper .header .header_orange-menu {
  /*flex: 0 0 auto;*/
  /*margin-left: $margin-left;*/
  color: #fff;
  cursor: pointer;
  display: block;
  margin-top: 10px; }
  .my-wrapper .header .header_orange-menu .icon-menu48 {
    font-size: 170%;
    padding: 0; }
.my-wrapper .header .header_orange-content {
  /*flex: 1 1 auto;
  margin-left: -3em;*/ }

.payment-info {
  color: #E19B38;
  line-height: 1.3;
  font-size: 150%;
  text-align: center;
  padding: .6em 0; }

.order-merchant {
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column; }

.order-merchant-name {
  width: 40%;
  color: #E19B38;
  padding: 0.65em 0.7em;
  text-shadow: 0 0 3px #000;
  font-weight: bold;
  font-size: 200%;
  line-height: 1.15;
  flex: 1 1 auto; }

.order-merchant-footer {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  /*flex: 0 0 auto;
  display: flex;*/
  font-size: 130%;
  /*padding: .4em ($margin-left/$font-size-ratio) .6em;*/
  padding: .4em 0;
  line-height: 1.25; }

.order-merchant-footer-left {
  /*flex: 1 1 auto;*/ }

.order-merchant-footer-right {
  /*flex: 0 0 auto;

  display: flex;
  align-items: center;
  
  a {
    flex: 1 1 auto;
  }
  */
  text-align: right; }
  .order-merchant-footer-right img {
    /*display: block;*/
    transition: all .3s;
    padding: 2px 15px; }
    @media (min-width: 454px) and (max-width: 618px) {
      .order-merchant-footer-right img {
        width: 2.5em;
        height: auto;
        padding: 0 10px; } }
    @media (max-width: 453px) {
      .order-merchant-footer-right img {
        width: 2em;
        height: auto;
        padding: 0 5px; } }

.order-merchant-phone-number {
  color: #fff;
  display: inline-block; }

.order-info {
  color: #E19B38;
  line-height: 1.2;
  font-size: 155%;
  padding: 0.8em 0.90323em 0.4em; }

.order-info_pickup,
.order-info_delivery {
  color: #333; }

.order-info-customer-address {
  margin-top: 1em;
  font-size: 120%;
  text-align: left; }

.order-info order-info_howto-change,
.order-info_sms {
  color: #777;
  font-size: 130%; }

.order-info order-info_howto-change {
  font-size: 110%; }

.order-map {
  margin: 1em 0 0;
  box-shadow: 0 -1px 3px #E19B38; }
  .order-map .angular-google-map-container {
    height: 20em; }

.order-delivery-emails {
  cursor: pointer;
  padding: .5em;
  color: white;
  min-height: 60px;
  line-height: 1.3;
  text-align: center;
  max-width: 757px;
  border-radius: 12px;
  font-family: "Arial";
  font-size: 24px;
  font-weight: bold;
  margin: 0 5%;
  background: #d1883d; }
  @media (max-width: 453px) {
    .order-delivery-emails {
      font-size: 18px;
      min-height: 45px; } }
  @media (min-width: 454px) and (max-width: 618px) {
    .order-delivery-emails {
      font-size: 24px;
      min-height: 60px; } }

.order-notif {
  width: 100%;
  text-align: center;
  color: #777;
  font-size: 1.05em;
  line-height: 1.5; }

.store-announcement {
  color: #fff;
  font-size: 16px;
  font-style: italic; }

/**
 * Mobile Landscape mode.
 * Show all stores button isnt showing
 */
@media (max-height: 375px) {
  .my-wrapper .my-navbar {
    line-height: 30px; }
    .my-wrapper .my-navbar h2 {
      margin-bottom: 5px !important; } }
.schedule {
  color: white; }
  .schedule .row {
    background-color: rgba(0, 0, 0, 0.6) !important; }
  .schedule .time {
    padding: 5px 20px 20px 20px; }
    .schedule .time select {
      border: none;
      font-size: 18px;
      color: black;
      height: 38px;
      padding: 5px;
      width: 100%; }
      @media (max-width: 453px) {
        .schedule .time select {
          font-size: 14px;
          height: 26px; } }
    @media (min-width: 454px) and (max-width: 618px) {
      .schedule .time h4 {
        font-size: 16px; } }
    @media (max-width: 453px) {
      .schedule .time h4 {
        font-size: 14px; } }
  .schedule .notes {
    padding: 5px 20px 20px 20px;
    margin-bottom: 125px; }
    .schedule .notes textarea {
      width: 100%;
      color: black;
      font-size: 20px;
      resize: none;
      line-height: 20px; }
  .schedule .servicetype-button {
    min-height: 100px;
    border: 1px solid black !important;
    font-size: 24px;
    font-weight: bold;
    color: white !important; }
    .schedule .servicetype-button img {
      width: 15%;
      height: auto; }
    @media (min-width: 454px) and (max-width: 618px) {
      .schedule .servicetype-button {
        border-radius: 6px;
        margin-bottom: 20px;
        min-height: 87px;
        font-size: 20px; } }
    @media (max-width: 453px) {
      .schedule .servicetype-button {
        margin-bottom: 15px;
        min-height: 65px;
        font-size: 18px; } }
  .schedule .active {
    background-image: linear-gradient(#3a3a3a, #595959) !important; }
  .schedule .not-active {
    background-color: #C2C2C2 !important; }
  .schedule .disabled {
    opacity: 1 !important; }
  .schedule .whole {
    border-radius: 12px !important; }
    @media (min-width: 454px) and (max-width: 618px) {
      .schedule .whole {
        border-radius: 12px !important; } }
    @media (max-width: 453px) {
      .schedule .whole {
        border-radius: 12px !important; } }

.reorder-hero {
  background-color: rgba(0, 0, 0, 0.6);
  color: #c78832;
  margin-top: 30px;
  font-size: 20px;
  line-height: 1.3; }
  @media (min-width: 454px) and (max-width: 618px) {
    .reorder-hero {
      font-size: 18px; } }
  @media (max-width: 453px) {
    .reorder-hero {
      font-size: 14px; } }

.reorder-title {
  font-size: 150%;
  color: #fff;
  line-height: 1.5; }

.reorder-shop-name {
  font-size: 100%; }

.reorder-address {
  color: #fff; }

.reorder-body {
  background-color: rgba(0, 0, 0, 0.6); }

.reorder-btn {
  line-height: 50px;
  width: 100% !important; }
  @media (min-width: 454px) and (max-width: 618px) {
    .reorder-btn {
      border-radius: 6px;
      line-height: 30px; } }
  @media (max-width: 453px) {
    .reorder-btn {
      border-radius: 6px;
      line-height: 30px; } }

.saved-address-notify {
  top: 0px;
  margin-bottom: 10px; }
  .saved-address-notify .text {
    position: relative !important; }

.saved-address .notify {
  color: white;
  font-size: 20px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.6);
  line-height: 60px;
  min-height: 60px; }
.saved-address .del-icon {
  padding: 0px; }
.saved-address .red {
  color: red; }
.saved-address .list-opacity {
  opacity: 0.9; }
.saved-address .addr-details {
  font-size: 18px;
  line-height: 30px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .saved-address .addr-details {
      font-size: 16px;
      line-height: 26px; } }
  @media (max-width: 453px) {
    .saved-address .addr-details {
      font-size: 14px;
      line-height: 22px; } }
.saved-address .form-address {
  background-color: rgba(0, 0, 0, 0.6);
  line-height: 48px;
  min-height: 48px;
  font-size: 22px;
  color: white;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px; }
  .saved-address .form-address .ng-dirty.ng-valid {
    background: white url("assets/img/success.png") no-repeat;
    background-position: calc(100% - 30px); }
    @media (min-width: 454px) and (max-width: 618px) {
      .saved-address .form-address .ng-dirty.ng-valid {
        background: white url("assets/img/success-3-2.png") no-repeat;
        background-position: calc(100% - 20px);
        font-size: 18px; } }
    @media (max-width: 453px) {
      .saved-address .form-address .ng-dirty.ng-valid {
        background: white url("assets/img/success-2.png") no-repeat;
        background-position: calc(100% - 15px);
        font-size: 16px; } }
.saved-address .btn-left, .saved-address .btn-right {
  border-radius: 12px;
  width: 45%;
  font-size: 22px;
  font-weight: bold;
  color: white;
  padding: 15px 0;
  background: #d1883d;
  line-height: 0; }
  @media (min-width: 454px) and (max-width: 618px) {
    .saved-address .btn-left, .saved-address .btn-right {
      border-radius: 6px;
      font-size: 16px;
      width: 45%; } }
  @media (max-width: 453px) {
    .saved-address .btn-left, .saved-address .btn-right {
      border-radius: 6px;
      font-size: 14px;
      width: 45%; } }
.saved-address .btn-container {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px 0;
  margin-bottom: 50px; }
  @media (min-width: 454px) and (max-width: 618px) {
    .saved-address .btn-container {
      margin-bottom: 40px; } }

.saved-payment .cc-list {
  font-size: 18px;
  min-height: 24px;
  line-height: 24px; }

.detail-payment {
  padding: 30px 30px 15px;
  background-color: rgba(0, 0, 0, 0.6); }
  .detail-payment .panel-heading {
    font-size: 22px;
    font-weight: bold; }
  .detail-payment .panel-body {
    font-size: 20px; }
  .detail-payment .list-group-item {
    font-size: 16px; }
  .detail-payment .red {
    color: red; }

.profile-body {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 30px 50px 30px;
  color: white;
  margin-top: 0px; }
  .profile-body label {
    font-size: 22px; }
  .profile-body span#phone {
    font-size: 30px !important; }
  .profile-body span.info {
    font-size: 16px; }
  .profile-body div.info {
    font-size: 20px; }

.messages-profile {
  position: relative !important; }

.view-menu-wrapper {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px; }
  .view-menu-wrapper .view-menu {
    cursor: pointer;
    border-radius: 12px;
    width: 100%;
    background-color: #d1883d;
    margin: 0px auto;
    height: 50px;
    text-align: center;
    line-height: 3em;
    font-size: 150%;
    color: #FFF; }

.editphone-body {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 27px 50px 27px;
  color: white; }
  .editphone-body label {
    font-size: 22px; }
  .editphone-body button:hover {
    color: white !important; }
  .editphone-body div.info {
    font-size: 20px; }

body.menu-is-open .b-menu {
  pointer-events: auto;
  width: 60%; }
body.menu-is-open .b-app {
  -webkit-transform: translate3d(-60%, 0, 0);
  transform: translate3d(-60%, 0, 0); }
body.has-overlay .b-app {
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px); }

.b-menu {
  position: absolute;
  width: 60%;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  z-index: 0;
  background-color: black;
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  transition: width 0.3s; }

.close-menu {
  width: 0px; }

.b-menu__logo {
  text-align: center;
  padding: 12px 0 11px;
  position: absolute;
  width: 100%;
  top: 0; }
  .b-menu__logo img {
    width: 188px;
    height: 30px; }

.b-menu_scrollable {
  padding-top: 55px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.b-menu__list {
  width: 100%;
  height: 100%;
  padding-left: 0px;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }
  .b-menu__list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 150% !important;
    cursor: pointer; }
    .b-menu__list li:last-of-type {
      margin-bottom: 15px; }
  .b-menu__list li a:active {
    text-decoration: none; }
  .b-menu__list li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2); }

.b-menu__link {
  font-size: 1.2em;
  line-height: 2em;
  display: block;
  padding: 0 15px;
  color: #999;
  text-decoration: none; }
  .b-menu__link:hover, .b-menu__link:focus, .b-menu__link:visited {
    color: white !important;
    text-decoration: none !important; }

.b-app {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transition: -webkit-transform 300ms ease;
  -moz-transition: -moz-transform 300ms ease;
  -o-transition: -o-transform 300ms ease;
  transition: transform 300ms ease;
  z-index: 1; }

.b-app .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  z-index: 100000;
  top: 0px; }

.phone-number.ng-valid {
  background: white url("assets/img/success-2.png") no-repeat;
  background-position: calc(100% - 15px); }

.invalid-phone {
  color: red;
  padding: 3px 0 3px 5px; }

.code.ng-valid {
  background: white url("assets/img/success-2.png") no-repeat;
  background-position: calc(100% - 15px); }

.error-auth {
  font-size: 16px;
  margin-top: 12px;
  text-align: center;
  color: red; }

/*!
   angular-block-ui v0.2.0
   (c) 2015 (null) McNull https://github.com/McNull/angular-block-ui
   License: MIT
*/
.block-ui {
  position: relative; }

body.block-ui {
  /* IE8 doesn't support .block-ui:not(body) */
  position: static; }

body.block-ui > .block-ui-container,
.block-ui-main > .block-ui-container {
  position: fixed; }

.block-ui-container {
  position: absolute;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  filter: alpha(opacity=0); }

.block-ui-active > .block-ui-container {
  height: 100%;
  cursor: wait; }

.block-ui-active .block-ui-active > .block-ui-container {
  height: 0; }

.block-ui-visible > .block-ui-container {
  opacity: 1;
  filter: alpha(opacity=100); }

.block-ui-overlay {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  background-color: white; }

.block-ui-message-container {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  height: 0;
  text-align: center;
  z-index: 10001; }

.block-ui-message {
  display: inline-block;
  text-align: left;
  background-color: #333;
  color: #f5f5f5;
  padding: 20px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: bold;
  /* needed for IE */
  filter: alpha(opacity=100); }

/* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.block-ui-anim-fade > .block-ui-container {
  -webkit-transition: height 0s linear 200ms, opacity 200ms ease 0s;
  transition: height 0s linear 200ms, opacity 200ms ease 0s; }

.block-ui-anim-fade.block-ui-active > .block-ui-container {
  /*this resets the initial delay of the height */
  /*and sizes the block to full height at once at the start of the block. */
  -webkit-transition-delay: 0s;
  transition-delay: 0s; }

/* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*# sourceMappingURL=angular-block-ui.css.map */

/*# sourceMappingURL=app.css.map */