@font-face {
  font-family: "Ubuntu";
  src: url("ubuntu/Ubuntu-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth !important;
}

html,
body {
  width: 100%;
}

body.logged-in ons-navigator {
  margin-top: 46px;
}

ons-pull-hook,
#banner-list,
.list-title,
.list {
  background: #fff;
}

.toolbar__title,
#logo .logo-title,
.button,
.list-title,
#store-cta span,
.cat-wrapper span,
.item-title,
.my-product-title,
.my-product-remove,
.info-title,
#footer .footer-address p,
#footer .footer-logo-title,
#chat .chatTitle h4,
.form-list,
.orderan-title,
.orderan-qty {
  font-family: 'Ubuntu', sans-serif;
}

img {
  width: 100%;
}

img#background {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 99vw;
  height: 99vh;
  max-width: 99vw;
  max-height: 99vh;
}

#splash {
  position: fixed;
  z-index: 999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  width: 100%;
}

#splash .loader-wrapper {
  background: #efeff4;
  min-height: 100vh;
  max-width: 480px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

#splash.fade {
  opacity: 0;
  -webkit-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}

.toolbar__title {
  font-weight: 700;
}

.toolbar .bookmarked.showBookmark {
  color: red;
}

#cart .toolbar__title,
#extra #cart .toolbar__title {
  font-size: 18px;
}

.button--outline,
.button--outline:hover {
  color: #03AA0E;
  border-color: #03AA0E;
}

.back-button--material__icon,
.back-button__icon {
  fill: #000;
  cursor: pointer;
}

.list-title {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  text-transform: inherit;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0;
  letter-spacing: 0;
}

#infoToko .list-title {
  padding-bottom: 0;
  padding-left: 10px;
}

.products {
  position: relative;
  border-top: 1px solid #ddd;
}

.item-list-title {
  background: #fff;
  z-index: 1;
  padding: 10px 15px;
  position: -webkit-sticky;
  position: sticky;
  top: 63px;
}

.item-list-title ons-icon {
  vertical-align: middle !important;
  line-height: 1 !important;
  margin-right: 5px;
  margin-top: -4px;
  font-size: 24px;
}

.button--material {
  text-transform: inherit;
}

.toolbar--material {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff;
}

.toolbar-button--material {
  color: #666;
  cursor: pointer;
}

.toolbar--material__left,
.toolbar--material__right {
  min-width: inherit;
}

.toolbar__right .toolbar-button--material {
  padding: 0 8px;
}

.toolbar__right .toolbar-button--material:last-child {
  padding-right: 12px;
}

#logo {
  font-weight: 700;
  font-size: 18px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  cursor: pointer;
}

#logo .logo-icon {
  height: 32px;
  width: auto;
}

#logo .logo-icon,
#logo .logo-title {
  vertical-align: middle;
}

#logo .logo-title {
  margin-left: 5px;
  color: #000;
}

#home ons-toolbar.shadow-header {
  -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, .15);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, .15);
}

#home ons-toolbar #search,
#home ons-toolbar>.center {
  display: none;
}

#home ons-toolbar #search {
  width: 100%;
  margin-left: 15px;
}

#home ons-toolbar #search input {
  padding: 5px 0 15px;
  height: inherit;
  background-image: -o-linear-gradient(bottom, transparent 1px, #ddd 1px);
  background-image: linear-gradient(to top, transparent 1px, #ddd 1px);
}

#home ons-toolbar #search span {
  line-height: 46px;
}

#home ons-toolbar .closeSearch {
  display: none;
  position: relative;
  top: -5px;
  right: 20px;
  color: #666;
  cursor: pointer;
}

#home ons-toolbar.white-text .toolbar-button--material,
#home ons-toolbar.white-text #logo .logo-title,
#home ons-toolbar.white-text #search input,
#home ons-toolbar.white-text #search span,
#home ons-toolbar.white-text .closeSearch,
ons-toolbar.white-text .center,
ons-toolbar.white-text .back-button {
  color: #fff !important;
}

ons-toolbar.white-text .back-button__icon {
  fill: #fff !important;
}

#home .page__content {
  padding-bottom: 120px;
}

#cart .page__content {
  padding-bottom: 90px;
}

body.admin-bar #cart .page__content {
  padding-bottom: 120px;
}

#extra .page__content {
  padding-bottom: 170px;
}

#banner-list {
  border-bottom: 1px solid #ddd;
}

#banner-list .banner-item .thumbnail {
  padding: 10px 7px;
}

#banner-list.full-banner .banner-item .thumbnail {
  padding: 10px;
}

#banner-list:not(.full-banner) .banner-item:first-child {
  margin-left: 8px;
}

#banner-list:not(.full-banner) .banner-item:last-child {
  margin-right: 8px;
}

#banner-list .banner-item .thumbnail img {
  border-radius: 12px;
  cursor: pointer;
  background: #ced4da;
  height: inherit !important;
}

#banner-loader .ph-item {
  padding: 0;
  margin-bottom: 5px;
}

#banner-loader .ph-item>* {
  padding: 0;
}

#banner-loader .ph-item>.ph-col-10 {
  padding-right: 10px;
  padding-left: 15px;
}

#banner-loader .ph-item .ph-picture {
  border-radius: 12px;
  height: 160px;
}

#banner-loader .ph-item .ph-col-2 .ph-picture {
  border-radius: 12px 0 0 12px;
}

#sliderBanner,
.item-img-wrapper {
  position: relative;
}

#sliderBanner .left,
#sliderBanner .right,
.item-img-wrapper .left,
.item-img-wrapper .right {
  position: absolute;
  top: calc(50% - 25px);
  padding: 0;
}

#sliderBanner .left .button,
#sliderBanner .right .button,
.item-img-wrapper .left .button,
.item-img-wrapper .right .button {
  color: #fff;
  font-size: 36px;
  line-height: 0;
  cursor: pointer;
  opacity: .5;
}

#sliderBanner .left .button:hover,
#sliderBanner .right .button:hover,
.item-img-wrapper .left .button:hover,
.item-img-wrapper .right .button:hover {
  opacity: 1;
}

#sliderBanner .right,
.item-img-wrapper .right {
  right: 15px;
}

#sliderBanner .left,
.item-img-wrapper .left {
  left: 15px;
}

#sliderBanner:not(.full-slide) .left,
#sliderBanner:not(.full-slide) .right {
  display: none;
}

#info-loader .ph-item {
  padding: 15px 0 0;
  margin-bottom: 10px;
}

#kat-loader .ph-item {
  background: transparent;
  border: none;
  padding: 0;
  margin: 10px 0;
}

#kat-loader .ph-item>div {
  padding: 0 6px;
}

#kat-loader .ph-item>div:first-child {
  padding-left: 10px;
}

#kat-loader .ph-item>div:last-child {
  padding-right: 0;
}

#kat-loader .ph-item>div .ph-picture {
  border-radius: 12px;
  height: 70px;
  margin: 0;
}

#kat-loader .ph-item>div:last-child .ph-picture {
  border-radius: 12px 0 0 12px;
}

#store-cta {
  background: #fff;
  margin-top: 5px;
  padding: 5px 0;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  border-bottom: 1px dashed #ccc;
  border-top: 1px solid #ddd;
}

#store-cta .cta {
  width: 100%;
  border-right: 1px dashed #ccc;
  padding: 0 10px;
}

#store-cta ons-col {
  width: 0;
}

#store-cta ons-col:last-child .cta {
  border-right: none;
}

#store-cta .cta a {
  display: block;
  text-decoration: none;
  color: #000;
  line-height: 1;
  padding: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  cursor: pointer;
}

#store-cta .cta a ons-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 10px;
  color: #2979ff;
}

ons-icon[icon^="ion-custom"] {
  width: 24px;
  height: 24px;
  margin: 0 auto 10px;
}

#store-cta .cta a ons-icon[icon^="ion-custom"]:before {
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  width: 24px;
  height: 24px;
}

#store-cta .cta a ons-icon.ion-custom-gojek:before {
  background-image: url(../img/icon-gojek.png);
}

#store-cta .cta a ons-icon.ion-custom-grab:before {
  background-image: url(../img/icon-grab.png);
}

#store-cta .cta a ons-icon.ion-custom-tokopedia:before {
  background-image: url(../img/icon-tokopedia.png);
}

#store-cta .cta a ons-icon.ion-custom-shopee:before {
  background-image: url(../img/icon-shopee.png);
}

#store-cta .cta a ons-icon.ion-custom-bukalapak:before {
  background-image: url(../img/icon-bukalapak.png);
}

#store-cta .cta a ons-icon.ion-custom-lazada:before {
  background-image: url(../img/icon-lazada.png);
}

#store-cta .cta a ons-icon.ion-custom-tiktok:before {
  background-image: url(../img/icon-tiktok.png);
}

#store-cta .cta a ons-icon.ion-custom-x:before {
  background-image: url(../img/icon-x.png);
}

#store-cta .cta a ons-icon.ion-custom-threads:before {
  background-image: url(../img/icon-threads.png);
}

.info-list {
  padding: 0 10px;
}

.info-list:last-child {
  margin-bottom: 10px;
}

.info-list .info-content {
  display: none;
}

.info-list .center {
  position: relative;
  overflow: hidden;
  padding: 10px 15px 10px 0;
  min-height: inherit;
  cursor: pointer;
}

.info-list:last-child .center {
  background: transparent;
}

.info-list .center span {
  padding: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.info-list .center ons-icon {
  position: absolute;
  right: 0;
}

#cat-list {
  padding: 10px 0;
}

#cat-list .cat-item {
  overflow: hidden;
  border-radius: 12px;
}

#sliderKat.default #cat-list .cat-item a:before {
  content: "";
  background: rgba(0, 0, 0, .4);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#cat-list .cat-item a {
  height: 70px;
  color: #fff;
  text-decoration: none;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  justify-self: center;
  justify-content: center;
  padding: 0;
  font-weight: 700;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  width: 100%;
  margin: 0 auto;
}

#cat-list .cat-item a span {
  position: relative;
  z-index: 1;
}

#cat-list .cat-item {
  padding: 0 5px;
}

#cat-list .cat-item .cat-wrapper {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}

#cat-list .cat-item:first-child {
  margin-left: 5px;
}

#sliderKat.alternate #cat-list .cat-item {
  width: 80px !important;
  text-align: center;
  border-radius: 0;
}

#sliderKat.alternate #cat-list .cat-item a {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  padding: 0;
  margin: 0 auto 25px;
}

#sliderKat.alternate #cat-list .cat-item a span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 50px;
  font-size: 14px;
  color: #111;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}

#sliderKat.grid #cat-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

#sliderKat.grid #cat-list .cat-item {
  width: inherit !important;
  margin: 10px 0;
}

#sliderKat.grid #cat-list .cat-item a {
  width: 85%;
  height: 0;
  padding-bottom: 85%;
}

.kategori-produk {
  cursor: pointer;
}

#sliderKat.tabbed {
  position: sticky;
  top: 63px;
  z-index: 1;
  background: #eceff1;
  margin-bottom: 10px;
  width: 100%;
  overflow-x: auto;
}

#sliderKat.tabbed #cat-list {
  padding: 0;
  display: flex;
}

#sliderKat.tabbed #cat-list .cat-item {
  width: inherit !important;
  max-width: inherit !important;
  border-radius: 0;
  flex: none !important;
}

#sliderKat.tabbed #cat-list .cat-item .cat-wrapper {
  border-radius: 0;
}

#sliderKat.tabbed #cat-list .cat-item .cat-wrapper.active {
  border-bottom: 2px solid #000;
  font-weight: 700;
}

#sliderKat.tabbed #cat-list .cat-item a {
  background: transparent !important;
  height: inherit;
  color: #111;
  font-weight: 400;
  padding: 15px 10px;
}

#sliderKat.tabbed #cat-list .cat-item a:before,
.cat-tabbed .item-list-title {
  display: none;
}

.cat-tabbed .item-list-wrapper {
  background: transparent;
}

.cat-tabbed .products {
  border-top: none;
}

.info-list-wrapper {
  border-bottom: 1px solid #ddd;
}

.info-list-wrapper .loadmore {
  padding: 0;
  cursor: pointer;
}

.info-list-wrapper .loadmore .center {
  display: block;
  text-align: center;
  font-size: 13px;
  padding: 10px 0;
  min-height: inherit;
  color: #03AA0E;
}

.info-list-wrapper .loadmore .center .ons-icon {
  font-size: 18px;
  margin-left: 5px;
}

.item-list-wrapper,
#list-orderan {
  padding: 5px 10px 10px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 100%);
}

.item-list-wrapper .item-list,
#list-orderan .list-item {
  border-top: 1px solid #eee;
}

.item-list-wrapper .item-list:first-child,
#list-orderan .list-item:first-child {
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .1) !important;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .1) !important;
}

.item-list-wrapper .list-item:not(.loadmore),
.info-list-wrapper .list-item:not(.loadmore) {
  display: none;
}

.bookmarkActive .products,
.bookmarkActive .products .item-list-wrapper,
.searchActive .products,
.searchActive .products .item-list-wrapper {
  background: transparent;
  border: none;
}

.item-list-wrapper .item-list .item-open {
  cursor: pointer;
}

.item-list,
#list-orderan .list-item {
  padding: 0 10px;
  background: #fff;
  margin: 0 0 10px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .1) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1) !important;
}

.item-list .center {
  border-bottom: none;
  background: transparent;
  padding: 10px 0;
}

.item-list.loadmore {
  border-top: none;
  cursor: pointer;
}

.item-list.loadmore .center {
  text-align: center;
  display: block;
  line-height: 1.8;
  font-size: 15px;
  color: #03AA0E;
}

.item-list.loadmore .center .ons-icon {
  font-size: 22px;
  margin-left: 5px;
}

.item-list .item-title,
.item-list .item-price,
#list-orderan .list-item .orderan-title,
#list-orderan .list-item .orderan-tgl {
  line-height: 1.2;
}

.item-list.outofstock .item-price,
#detailItem.outofstock .action-sheet-button small.item-price {
  color: red;
}

.item-list .item-title,
#list-orderan .list-item .orderan-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}

.item-list .item-desc {
  line-height: 1.5;
  max-height: calc(15px * 4);
  display: block;
}

.item-list .item-desc-full {
  display: none;
}

.item-list .item-desc,
#list-orderan .list-item p.orderan-tgl {
  margin: 0 0 8px;
  color: #666;
  font-size: 14px;
  display: -webkit-box;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-list .item-title,
.item-list .item-desc {
  padding-right: 10px;
}

#detailItem .action-sheet-button .item-desc h1,
#detailItem .action-sheet-button .item-desc h2,
#detailItem .action-sheet-button .item-desc h3,
#detailItem .action-sheet-button .item-desc h4 {
  font-size: 18px;
}

.item-list .item-desc p,
#detailItem .action-sheet-button .item-desc p,
#detailItem .action-sheet-button .item-desc h3,
#detailItem .action-sheet-button .item-desc ul {
  margin: 0 0 5px;
}

.item-list .item-price,
.item-list .item-price-was {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
}

.item-list .item-action {
  margin-top: 10px;
}

.item-list .item-price-was span,
#detailItem .item-price-was span {
  color: #666;
  text-decoration: line-through;
  margin-left: 5px;
  font-size: 15px;
}

.item-list .item-price-was:after,
#detailItem.promo .item-price-was:after {
  content: "Promo";
  background: -webkit-gradient(linear, left top, right top, from(#6db3f2), color-stop(25%, #54a3ee), to(#1e69de));
  background: -o-linear-gradient(left, #6db3f2 0%, #54a3ee 25%, #1e69de 100%);
  background: linear-gradient(to right, #6db3f2 0%, #54a3ee 25%, #1e69de 100%);
  color: #fff;
  margin-left: 10px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  position: relative;
  top: -1px;
}

#detailItem.promo .item-price-was:after {
  position: absolute;
  top: 30px;
  right: 30px;
}

.item-list .item-thumbnail {
  border-radius: 6px;
  margin-top: 5px;
  height: inherit !important;
}

.item-list.outofstock .item-thumbnail {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.item-list .bookmark-item {
  background: #e9ecee;
  color: #666;
  padding: 10px 15px 10px 20px;
  border-radius: 0 20px 20px 0;
  margin-left: -10px;
  margin-right: 10px;
  margin-top: -5px;
  cursor: pointer;
}

.item-list.fav .bookmark-item {
  opacity: 1;
  color: red;
}

.item-list .extra-sign {
  color: #666;
  cursor: pointer;
}

.item-list .extra-sign:before {
  margin-right: 10px;
}

.item-list .notesBtn-wrapper {
  float: right;
  margin-right: 10px;
}

.item-list .add-item,
.item-list .add-notes,
#list-orderan .list-item a .button {
  border-radius: 6px;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.item-list.outofstock .add-item {
  color: #aaa;
  border-color: #aaa;
}

.item-list .add-notes {
  padding: 7px 10px;
  border-color: #ccc;
  color: #666;
  margin-top: -1px;
}

.item-list .add-notes ons-icon {
  margin-right: 5px;
}

.item-list .item-qty,
.item-list .notesBtn-wrapper {
  display: none;
}

.item-list .item-qty {
  background: #eceff1;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 2px 5px;
}

.item-list .item-qty ons-button,
#extra .extra-cta .right .item-qty ons-button,
#cart #my-cart-table tbody>tr td .my-product-qty ons-button {
  padding: 0;
  text-align: center;
  width: 100%;
  line-height: 1;
  font-size: 22px;
  height: 22px;
  min-height: inherit;
  color: #03AA0E;
  cursor: pointer;
}

.item-list .item-qty ons-button ons-icon,
#extra .extra-cta .right .item-qty ons-button ons-icon,
#cart #my-cart-table tbody>tr td .my-product-qty ons-button ons-icon,
.item-list .add-notes ons-icon {
  vertical-align: top !important;
  line-height: 1 !important;
}

.item-list .item-qty input,
#extra .extra-cta .right .item-qty input,
#cart #my-cart-table tbody>tr td .my-product-qty input {
  text-align: center;
  border: none;
  color: #000;
  background: transparent !important;
  height: 22px;
  padding: 0;
}

#list-orderan .list-item .orderan-status {
  font-weight: 700;
  color: #0076ff;
}

#list-orderan .list-item .orderan-status.Diproses {
  color: #e2bc00;
}

#list-orderan .list-item .orderan-status.Diantar {
  color: #9913ff;
}

#list-orderan .list-item .orderan-status.Dibatalkan {
  color: red;
}

#list-orderan .list-item .orderan-status.Selesai {
  color: #03AA0E;
}

#list-orderan .list-item .orderan-status,
#list-orderan .list-item .orderan-status small {
  font-size: 14px;
}

#list-orderan .list-item .orderan-qty {
  text-align: center;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  background: #fafafa;
  padding: 10px;
  line-height: 1;
  border-radius: 6px;
}

#list-orderan .list-item a {
  margin-top: 5px;
  display: block;
}

#list-orderan .list-item .orderan-qty span {
  display: block;
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 0;
}

#list-orderan .list-item .catatan-order {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  color: #666;
}

.action-sheet .closeSheet {
  color: #666;
  font-size: 24px;
  right: 13px;
  position: absolute;
  top: -50px;
  background: #fff;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  line-height: 36px !important;
  text-align: center;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  cursor: pointer;
}

#detailItem .action-sheet,
#detailInfo .action-sheet,
#chat .action-sheet,
#paymentMethod .action-sheet,
#delivTime .action-sheet {
  left: 0;
  right: 0;
  bottom: 0;
}

body.admin-bar .action-sheet {
  bottom: 32px !important;
}

#detailItem .action-sheet-button,
#detailInfo .action-sheet-button,
#delivTime .action-sheet-button,
#chat .action-sheet-button {
  background: #fff;
  height: inherit;
  padding: 15px;
  line-height: 1.5;
  white-space: normal;
}

#detailItem .action-sheet-button:last-of-type,
#detailInfo .action-sheet-button:last-of-type,
#chat .action-sheet-button:last-of-type,
#paymentMethod .action-sheet-button:first-of-type,
#delivTime .action-sheet-button:first-of-type,
#itemNotes .action-sheet .action-sheet-title {
  border-radius: 12px 12px 0 0;
}

#detailItem .action-sheet-button:last-of-type:active,
#detailInfo .action-sheet-button:last-of-type:active,
#delivTime .action-sheet-button:last-of-type:active,
#chat .action-sheet-button:last-of-type:active {
  background: #fff;
}

#detailItem .action-sheet-button:last-of-type,
#detailInfo .action-sheet-button:last-of-type,
#delivTime .action-sheet-button:last-of-type,
#chat .action-sheet-button:last-of-type {
  max-height: calc(100vh - 195px);
  max-height: calc(var(--vh, 1vh) * 100 - 65px);
  overflow-y: auto;
  position: relative;
}

#paymentMethod .action-sheet,
#delivTime .action-sheet {
  max-height: calc(100vh - 195px);
  max-height: calc(var(--vh, 1vh) * 100 - 65px);
}

#paymentMethod .action-sheet-button,
#paymentMethod .action-sheet-button .list-item,
#delivTime .action-sheet-button,
#delivTime .action-sheet-button .list-item {
  padding: 0;
}

#paymentMethod .action-sheet-button .list-item label,
#delivTime .action-sheet-button .list-item label {
  padding-left: 15px;
  cursor: pointer;
}

#delivTime .action-sheet-button.disabled .list-item label {
  color: #bbb;
}

#paymentMethod .action-sheet-button .list-item input,
#delivTime .action-sheet-button .list-item input {
  cursor: pointer;
}

#detailItem .action-sheet-button img,
#detailInfo .action-sheet-button img {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .25);
  box-shadow: 0 0 2px rgba(0, 0, 0, .25);
  border-radius: 10px;
  margin-bottom: 10px;
}

#detailItem .action-sheet-button #galeri-list img {
  cursor: grab;
}

#detailItem .action-sheet-button span.item-title,
#detailItem .action-sheet-button .item-desc,
#detailItem .action-sheet-button small.item-price,
#detailInfo .action-sheet-button h4.info-title,
#detailInfo .action-sheet-button div.info-desc {
  display: block;
  text-align: left;
  color: #000;
}

#detailItem .action-sheet-button span.item-title,
#detailInfo .action-sheet-button h4.info-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 3px;
  display: -webkit-box;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#detailInfo .action-sheet-button img {
  margin-bottom: 5px;
}

#detailInfo .action-sheet-button h4.info-title {
  margin-top: 0;
  margin-bottom: 10px;
}

#detailItem .action-sheet-button .item-desc {
  font-size: 15px;
  margin: 0 0 5px;
  overflow: hidden;
  line-height: 1.5;
  max-height: 4.5em;
  position: relative;
}

#detailItem .item-desc[aria-expanded=false]:after,
#detailInfo .info-desc[aria-expanded=false]:after {
  content: "";
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

#detailItem .item-desc+[data-readmore-toggle],
#detailInfo .info-desc+[data-readmore-toggle] {
  text-decoration: none;
  color: #03aa0e;
  font-size: 13px;
  font-weight: 700;
  margin: -5px 0 0;
  z-index: 1;
  position: relative;
}

#detailInfo .action-sheet-button div.info-desc {
  font-size: 14px;
  margin: 0;
}

#detailInfo .action-sheet-button div.info-desc p {
  margin: 0 0 5px;
}

#detailInfo .action-sheet-button div.info-desc {
  font-size: 14px;
  margin: 0;
  position: relative;
}

#detailInfo .action-sheet-button div.info-desc img,
#detailItem .action-sheet-button .item-desc img {
  max-width: 100%;
  height: inherit;
  margin: 0;
}

#detailInfo .action-sheet-button div.info-desc iframe,
#detailItem .action-sheet-button .item-desc iframe {
  max-width: 100%;
}

#detailItem .action-sheet-button small.item-price {
  font-size: 15px;
  font-weight: 700;
  display: inline-block;
}

#detailItem .add-item-popup,
#itemNotes .add-notes-popup,
#delivTime .choose-delivery-time,
#extra .extra-cta .add-item-extra {
  width: 100%;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 10px;
  background: #03AA0E;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 3px;
  border-bottom: 5px solid rgba(0, 0, 0, .2);
  text-shadow: 1px 1px #02880b, -1px -1px #028b0b;
  cursor: pointer;
}

#detailItem .action-sheet-button {
  padding-bottom: 77px;
}

#detailItem .add-item-popup {
  position: fixed;
  bottom: 10px;
  left: 15px;
  width: calc(100% - 30px);
  z-index: 2;
}

#detailItem .action-sheet-button:after {
  content: "";
  width: 100%;
  height: 67px;
  background: #fff;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 3px rgb(0 0 0 / 10%);
}

#delivTime .xdsoft_datetimepicker.xdsoft_inline {
  width: 100%;
  max-width: calc(100% - 30px);
  display: flex;
  border: none;
  position: relative;
  padding: 0;
  margin: 15px auto 0;
}

#delivTime .xdsoft_datetimepicker .xdsoft_datepicker {
  flex: 1;
  margin: 0;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar {
  margin-top: 35px;
}

#delivTime .xdsoft_datetimepicker .xdsoft_year,
#delivTime .xdsoft_datetimepicker .xdsoft_today_button,
#delivTime .xdsoft_datetimepicker .xdsoft_label i,
#delivTime .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
#delivTime .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
  display: none;
}

#delivTime .xdsoft_datetimepicker .xdsoft_monthpicker {
  display: flex;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}

#delivTime .xdsoft_datetimepicker .xdsoft_month {
  flex: 1;
  width: 100%;
  text-align: center;
}

#delivTime .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select {
  width: 100%;
  left: 0;
  border-radius: 4px;
}

#delivTime .xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
  margin-top: 40px;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar td,
#delivTime .xdsoft_datetimepicker .xdsoft_calendar th {
  border: none;
  background: none;
  text-align: center;
  border-radius: 20px;
  height: 36px;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar th {
  color: #111;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar th:last-child,
#delivTime .xdsoft_datetimepicker .xdsoft_calendar tr td:last-child {
  color: red;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
#delivTime .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
#delivTime .xdsoft_datetimepicker .xdsoft_calendar td:hover {
  background: transparent !important;
  border: none;
  box-shadow: none;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default div,
#delivTime .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current div,
#delivTime .xdsoft_datetimepicker .xdsoft_calendar td:hover div {
  background: #3af;
  box-shadow: #178fe5 0 1px 3px 0 inset;
  color: #fff;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 24px;
  margin: 0 auto;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar td:hover div {
  background: #ff8000;
  box-shadow: none;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar td>div {
  padding: 0;
  border-radius: 4px;
}

#delivTime .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
  height: 215px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#delivTime .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
  border: none;
  background: transparent;
}

#delivTime .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
#delivTime .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
#delivTime .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
  background: #3af;
}

#itemNotes .add-notes-popup,
#delivTime .choose-delivery-time {
  margin: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: calc(100vw - 30px);
}

#detailItem .add-item-popup[disabled] {
  background: #ddd;
  color: #999;
  text-shadow: none;
}

#itemNotes .action-sheet-button--material:last-of-type {
  padding: 0;
  height: inherit;
  line-height: 1;
}

#itemNotes .action-sheet .action-sheet-title {
  border-radius: 12px 12px 0 0;
  font-weight: 700;
  color: #000;
}

#itemNotes textarea {
  display: block;
  width: 100%;
  height: 50vh;
  border: 1px dashed #ccc;
  border-right: 0;
  border-left: 0;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.4;
}

.share-button {
  position: absolute;
  top: 25px;
  left: 25px;
  opacity: .8;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 28px;
  color: #777;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  line-height: 28px;
  height: 28px;
  padding: 0 9px;
  text-decoration: none;
  box-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.05);
}

.share-button .label i:before {
  line-height: 28px;
  margin-left: -2px;
}

.share-button .sites {
  display: none;
  line-height: 30px;
  vertical-align: middle;
}

.share-button .sites a {
  color: #777;
  font-size: 20px;
  margin-left: 8px;
  width: 16px;
  display: inline-block;
  text-align: center;
}

.share-button .sites a:hover.facebook {
  color: #385797;
}

.share-button .sites a:hover.twitter {
  color: #03abea;
}

.share-button .sites a:hover.telegram {
  color: #0396DE;
}

.share-button .sites a:hover.whatsapp {
  color: #128c7e;
}

.share-button:hover .sites {
  display: inline-block;
}

#chat .action-sheet-button:last-of-type {
  padding: 0;
}

#chat .chatTitle {
  padding: 20px 15px;
}

#chat .chatTitle h4 {
  margin: 0 0 5px;
  color: #000;
  font-size: 28px;
  line-height: 1.2;
}

#chat .chatTitle span {
  font-size: 14px;
}

#chat .chatCS {
  width: 100%;
  padding: 15px;
  border-top: 1px solid #ddd;
}

#chat .chatCS ons-row {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#chat .chatCS ons-row>ons-col:last-child {
  padding-left: 15px;
}

#chat .chatCS a {
  text-decoration: none;
  color: #000;
}

#chat .chatCS .avatar-wrapper {
  border-radius: 100%;
  display: block;
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
  height: 0;
}

#chat .chatCS .avatar-wrapper img {
  display: block;
}

#chat .chatCS h5,
#chat .chatCS span,
#chat .chatCS small {
  margin: 0;
  line-height: 1;
  text-align: left;
  display: block;
}

#chat .chatCS small {
  display: inline-block;
  position: relative;
  float: left;
}

#chat .chatCS small:before {
  content: "";
  background: #0dc152;
  width: 7px;
  height: 7px;
  border-radius: 7px;
  position: absolute;
  top: 3px;
  right: -10px;
}

#chat .chatCS .Offline small:before {
  background: #aaa;
}

#chat .chatCS h5 {
  padding: 5px 0;
}

.cartBtn-wrapper {
  position: fixed;
  text-align: center;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.menu-cat ons-icon {
  margin-right: 10px;
  font-size: 18px;
  vertical-align: initial !important;
  line-height: 1 !important;
  top: 1px;
  position: relative;
}

#menu .popover {
  left: 10px !important;
}

#menu .popover .popover__content {
  width: calc(100vw - 20px);
  max-height: 260px;
}

#menu .popover .list .center {
  padding: 0;
  min-height: inherit;
}

#menu .popover .list .center a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 100%;
  padding: 14px 0;
}

.cartBtn-wrapper .cartBtn,
.cartBtn-wrapper .menu-cat {
  width: calc(100vw - 25px);
  border-radius: 6px 6px 0 0;
  text-align: left;
  font-size: 15px;
  position: absolute;
  bottom: 0;
  left: 10px;
  height: 52px;
  background: #03AA0E;
  -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .2);
  cursor: pointer;
}

.cartBtn-wrapper .cartBtn ons-col {
  line-height: 1;
  font-size: 14px;
}

.cartBtn-wrapper .cartBtn .right ons-row>ons-col:first-child {
  margin-right: 10px;
}

.cartBtn-wrapper .cartBtn .right {
  text-align: right;
}

.cart-tutup .cartBtn {
  text-transform: uppercase;
}

.cartBtn-wrapper .cartBtn .cart-total,
.cart-tutup .cartBtn .cart-status {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-top: 4px;
}

.cartBtn-wrapper .cartBtn .ion-md-cart {
  font-size: 36px;
  vertical-align: middle !important;
  line-height: 1 !important;
  position: absolute;
  right: 20px;
}

.cartBtn-wrapper .menu-cat {
  width: 120px;
  z-index: 1;
  border-radius: 6px 6px 0 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #079c10;
  padding: 8px 16px;
}

div:not(.cartActive) .cartBtn-wrapper .menu-cat {
  bottom: 10px;
  border-radius: 6px;
  height: inherit;
}

.cartActive .cartBtn-wrapper .menu-cat {
  border-radius: 6px 0 0 0;
}

.cartBtn-wrapper .cartBtn {
  padding: 8px 0;
  width: calc(100vw - 20px);
  bottom: -52px;
}

.cartActive .cartBtn-wrapper .cartBtn {
  bottom: 0;
}

.cart-tutup .cartBtn {
  background: #999;
}

.cart-tutup .menu-cat {
  background: #888;
}

.cartActive .cartBtn-wrapper.cart-floating {
  bottom: 10px;
}

.cartBtn-wrapper.cart-floating .cartBtn,
.cartBtn-wrapper.cart-floating .menu-cat,
div:not(.cartActive) .cartBtn-wrapper.cart-floating .menu-cat {
  border-radius: 52px;
}

.cartActive .cartBtn-wrapper.cart-floating .menu-cat {
  border-radius: 52px 0 0 52px;
}

.cartBtn-wrapper.cart-full .cartBtn,
.cartBtn-wrapper.cart-full .menu-cat {
  border-radius: 0;
  left: 0;
}

.cartBtn-wrapper.cart-full .cartBtn {
  width: 100%;
}

div:not(.cartActive) .cartBtn-wrapper.cart-full .menu-cat {
  bottom: 0;
  border-radius: 0 6px 0 0;
}

.cartActive .cartBtn-wrapper.cart-mini {
  bottom: 10px;
}

.cartBtn-wrapper.cart-mini .menu-cat,
.cartBtn-wrapper.cart-mini .cartBtn .cart-total {
  display: none;
}

.cartBtn-wrapper.cart-mini .cartBtn {
  width: 52px;
  border-radius: 52px;
  overflow: visible;
  right: 15px;
  left: inherit;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}

.cartBtn-wrapper.cart-mini .cartBtn .right ons-row>ons-col:first-child {
  font-size: 0;
}

.cartBtn-wrapper.cart-mini .cartBtn .cart-qty {
  font-size: 14px;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 20px;
  text-align: center;
  background: red;
  z-index: 1;
}

.cartBtn-wrapper.cart-mini .cartBtn .ion-md-cart {
  right: 0;
  width: 52px;
  height: 52px;
  text-align: center;
}

#site-menu .popover--top {
  top: 6px !important;
}

#site-menu .popover--material__content {
  border-radius: 6px;
}

#menu-list .list-item {
  border-bottom: 1px solid #f1f1f1;
  background: transparent;
}

#menu-list a {
  color: #1f1f21;
  background: transparent;
  text-decoration: none;
  line-height: 1;
  font-size: 15px;
}

#menu-list a ons-icon {
  vertical-align: middle !Important;
  margin-right: 10px;
}

#menu-list .expandable-content {
  padding: 0;
}

#menu-list .expandable-content .list-item:last-child {
  border-bottom: 0;
}

#extra .extra-option label .extra-price {
  float: right;
  position: absolute;
  right: 15px;
}

#extra .extra-title span.left {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: inline-block;
}

#extra .extra-title span.right {
  font-weight: 700;
}

#extra .list-item label,
#extra .list-item input {
  cursor: pointer;
}

#extra .extra-option {
  border-bottom: 1px solid #ddd;
}

#extra .extra-cta {
  position: fixed;
  bottom: 0;
  background: #fff;
  padding: 15px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#extra .extra-cta .left {
  font-weight: 700;
}

#extra .extra-notes {
  background: #fff;
  margin-top: 5px;
  padding: 15px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

#extra .extra-notes textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 12px;
  margin-top: 15px;
  border-color: #ccc;
  background: #fafafa;
  line-height: 1.4;
}

#cart #my-cart-table {
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#cart #my-cart-table tbody>tr {
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 10px;
  padding: 10px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .1) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1) !important;
}

#cart #my-cart-table tbody>tr:first-child {
  border-top: 1px solid #eee;
}

#cart #my-cart-table tbody>tr#coupon-results {
  display: none;
  background: transparent;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

#cart #my-cart-table tbody>tr#coupon-results td {
  text-align: center;
  display: block;
  padding: 10px 10px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#cart #my-cart-table tbody>tr#coupon-results td strong {
  color: #03AA0E;
}

#cart #my-cart-table tbody>tr td {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  position: relative;
}

#cart #my-cart-table tbody>tr td.my-product-title-wrapper {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
  padding-bottom: 25px;
}

#cart #my-cart-table tbody>tr .my-product-title,
#cart #my-cart-table tbody>tr .my-product-total {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 8px;
  padding-right: 10px;
}

#cart #my-cart-table tbody>tr .my-product-weight {
  margin: -5px 0 10px;
  font-size: 14px;
  display: none;
}

#cart #my-cart-table tbody>tr td.my-product-image {
  padding-bottom: 25px;
}

#cart #my-cart-table tbody>tr td.my-product-image img {
  border-radius: 6px;
  margin-top: 5px;
  margin-bottom: 10px;
}

#cart #my-cart-table tbody>tr td .my-product-cta,
#cart #my-cart-table tbody>tr td .my-product-qty {
  position: absolute;
  bottom: 0;
}

#cart #my-cart-table tbody>tr td .my-product-qty {
  background: #eceff1;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 2px 5px;
}

#cart #my-cart-table tbody>tr td .my-product-cta a.my-product-remove,
#cart #my-cart-table tbody>tr td .my-product-cta .my-product-notes {
  color: #ef3a34;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 7px 10px;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  margin-right: 10px;
}

#cart #my-cart-table tbody>tr td .my-product-cta .my-product-notes {
  color: #666;
  font-weight: 700;
  font-size: 14px;
  vertical-align: middle !important;
  line-height: 1 !important;
  cursor: pointer;
}

#cart #my-cart-table tbody>tr td .my-product-cta a.my-product-remove ons-icon,
#cart #my-cart-table tbody>tr td .my-product-cta .my-product-notes ons-icon {
  display: block;
  font-weight: 700;
  font-size: 14px;
  vertical-align: middle !important;
  line-height: 1 !important;
}

#cart #my-cart-table tbody>tr td .my-product-cta .my-product-notes ons-icon {
  display: inline-block;
  vertical-align: top !Important;
}

#cart #my-cart-table tbody>tr td .my-product-cta a.my-product-remove ons-icon:before,
#cart #my-cart-table tbody>tr td .my-product-cta .my-product-notes ons-icon:before {
  margin-right: 5px;
}

#cart #my-cart-table tbody>tr td .my-product-qty input {
  width: 100%;
}

#cart #my-cart-table tbody>tr.coupon-wrapper td {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

#cart #my-cart-table tbody>tr.coupon-wrapper td.text-right {
  width: 50%;
  text-align: right;
}

#cart #my-cart-table tbody>tr.coupon-wrapper td.text-right .add-coupon {
  font-size: 14px;
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
}

#cart .checkout-cta {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  padding: 10px;
  text-align: center;
  line-height: 1;
  -webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, .1);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, .1);
}

#cart .checkout-cta .checkout-btn {
  width: 100%;
  border-radius: 6px;
  font-weight: 700;
  font-size: 16px;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #03AA0E;
  box-shadow: none;
  padding: 6px 15px;
  border-bottom: 5px solid rgba(0, 0, 0, .2);
  text-shadow: 1px 1px #02880b, -1px -1px #028b0b;
  text-align: left;
  cursor: pointer;
}

#cart .checkout-cta .checkout-btn span {
  background: rgba(0, 0, 0, .2);
  float: right;
  padding: 0 15px;
  border-radius: 6px;
  margin-right: -8px;
}

#cart .checkout-cta .checkout-info {
  font-size: 12px;
  margin: 8px 0 0;
  display: block;
}

#cart .checkout-cta .checkout-info ons-icon {
  vertical-align: top !Important;
  line-height: 1 !important;
}

#cart .form-list {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

#cart .form-list #checkout-form input[type=submit] {
  display: none;
}

#cart .form-list .list-item {
  padding: 0 15px;
}

#cart .form-list .list-item .list-item__center {
  background: transparent;
}

#cart .form-list .cust-kec-wrapper.list-item .list-item__center {
  padding: 0 !important;
}

#cart .form-list .list-item.cust-checkout .list-item__center {
  padding-bottom: 5px;
}

#cart .form-list .list-item.cust-kec-wrapper,
#cart .form-list .list-item.cust-loc-wrapper {
  display: none;
}

#cart .form-list .switch-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

#cart .form-list .switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

#cart .form-list .switch-field label {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 10px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

#cart .form-list .switch-field label:hover {
  cursor: pointer;
}

#cart .form-list .switch-field input:checked+label {
  background-color: #c4c4c4;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

#cart .form-list .switch-field label:first-of-type {
  border-radius: 6px 0 0 6px;
}

#cart .form-list .switch-field label:last-of-type {
  border-radius: 0 6px 6px 0;
}

#cart .form-list .switch-field label ons-icon {
  vertical-align: middle !important;
  line-height: 1 !Important;
  margin-right: 4px;
  margin-top: -2px;
}

#cart .form-list .list-item .list-title {
  padding: 0;
}

#cart .form-list .list-item:nth-child(2) .center {
  padding: 0;
}

#cart .form-list textarea {
  background: #fff;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #afafaf;
  padding-left: 0;
  padding-right: 0;
}

#cart .form-list textarea:focus {
  border-color: #3d5afe;
}

#cart .form-list ons-input,
#cart .form-list textarea,
#cart .form-list select {
  width: 100%;
  cursor: pointer;
}

#cart .form-list .text-input {
  background: transparent;
  border-bottom: 1px solid #ccc;
}

#cart #cust-kec-dropdowns select {
  height: 40px;
  padding: 0 !important;
  font-size: 15px;
}

#cart .form-list select#cust-table+span {
  left: 15px;
  top: 15px;
}

#cart .form-list .cust-loc-wrapper ons-icon {
  position: absolute;
  right: 20px;
  top: 18px;
}

#cart .form-list .cust-loc-wrapper #map-wrapper {
  position: relative;
  width: 100%;
}

#cart .form-list .cust-loc-wrapper #map-wrapper>.map-info {
  background: #fbffc3;
  font-size: 14px;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  border: 1px solid #dce0a0;
  -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

#cart .form-list .cust-loc-wrapper #map-wrapper #map {
  width: 100%;
  height: 200px;
  margin-top: 10px;
}

#cart .form-list .cust-hint {
  font-size: 13px;
  margin-top: 5px;
  color: #666;
}

#cart #shipping-switcher {
  padding: 0;
}

#cart #shipping-switcher span.text-input__label {
  position: relative;
  font-size: 13px;
  padding: 0 15px;
  margin-bottom: 5px;
  display: block;
  transform: none;
}

#cart #shipping-switcher .list-item,
#cart #shipping-switcher .list-item label {
  cursor: pointer;
}

#cart #shipping-switcher .list-item .left {
  min-width: 30px;
}

#cart #shipping-switcher .list-item .left,
#shipping-switcher .list-item .list-item__center {
  min-height: 30px;
  padding: 10px 0;
}

#cart #shipping-switcher .list-item .left span.radio-button__checkmark {
  transform: translate(0, 20%) scale(.75);
}

#cart .checkout-summary {
  padding: 10px;
  background: url("../img/arches.png");
}

#cart .checkout-summary>ons-col {
  background: #fff;
  border-radius: 6px;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .1) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1) !important;
  overflow: hidden;
}

.checkout-summary .list-title {
  padding-left: 10px;
}

.checkout-summary .list-item {
  padding: 0 10px;
}

.checkout-summary .list-item .ion-md-calendar {
  vertical-align: middle;
  line-height: 1;
  margin-right: 2px;
  font-size: 18px;
  top: -2px;
  position: relative;
}

.checkout-summary .list-item.checkout-delivtime-wrapper {
  cursor: pointer;
}

.checkout-summary .list-item.checkout-total-wrapper {
  font-weight: 700;
}

.checkout-summary .list-item.checkout-payment-wrapper {
  font-weight: 700;
  cursor: pointer;
}

.checkout-summary .list-item.checkout-payment-wrapper ons-icon {
  line-height: 1;
  vertical-align: middle;
  margin-left: 5px;
}

.checkout-summary .list-item.checkout-payment-wrapper .checkout-payment-instruction {
  display: block;
  font-weight: 400;
  font-size: 14px;
  border-top: 1px solid #ddd;
  margin-top: 10px;
  padding-top: 10px;
}

.checkout-summary .checkout-payment[data-id=metode-cod],
#paymentMethod .action-sheet-button .list-item label[for=metode-cod] {
  text-transform: uppercase;
}

#paymentMethod .action-sheet-button .list-item label.center:after,
#delivTime .action-sheet-button .list-item label.center:after {
  margin-left: 5px;
}

.checkout-summary .list-item .text-right {
  text-align: right;
}

#history #orderan #list-orderan {
  padding-top: 10px;
}

#history #orderan .history-kosong {
  width: 60%;
  margin: 0 auto;
  text-align: center;
}

#history #orderan .history-kosong img {
  margin: 30px 0 15px;
}

#history #orderan .history-kosong span {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

#success .notifikasi-sukses {
  background: #fff;
  text-align: center;
  padding: 50px 50px 75px;
}

#success .notifikasi-sukses img {
  max-width: 150px;
  margin: 0 auto 20px;
  display: block;
}

#success .notifikasi-sukses span {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

#success .notifikasi-sukses small {
  font-size: 14px;
}

#success .notifikasi-sukses small a {
  display: inline-block;
  text-decoration: none;
  background: #fafafa;
  border: 1px solid #ddd;
  padding: 3px 5px;
  border-radius: 4px;
  color: green;
}

#success .detail-sukses .btn-sukses {
  text-align: center;
  width: 60%;
  margin: -25px auto 0;
}

#success .detail-sukses .btn-sukses ons-button {
  width: 100%;
  cursor: pointer;
}

#success .detail-sukses .btn-sukses .btn-struk {
  border-radius: 6px;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 5px;
  font-size: 15px;
}

#success .detail-sukses .btn-sukses .btn-back-home {
  margin-top: 5px;
}

#success .detail-sukses .btn-sukses ons-button a {
  color: #fff;
  text-decoration: none;
}

#success .detail-sukses .btn-sukses ons-button a ons-icon {
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
  line-height: 1;
}

#success .detail-sukses .ringkasan-order {
  max-width: 80%;
  margin: 30px auto 0;
}

#success .detail-sukses .ringkasan-order span {
  font-weight: 700;
  text-align: center;
  display: block;
}

#success .detail-sukses .ringkasan-order table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 6px;
  margin-top: 10px;
  background: #fff;
}

#success .detail-sukses .ringkasan-order table tr td {
  border: 1px solid #ccc;
  padding: 6px 10px;
}

#success .detail-sukses .ringkasan-order table tr td:first-child {
  font-weight: 700;
}

#myToast {
  position: fixed;
}

#myToast .toast {
  padding: 36px 10px;
}

#myToast .toast .toast__message {
  margin: 0;
}

#myToast .toast button {
  padding-right: 0;
  cursor: pointer;
}

ons-toast .toast .ion-ios-share {
  vertical-align: middle !important;
  line-height: 1 !important;
  font-size: 18px;
  margin: -3px 2px 0;
}

#footer {
  padding: 5px 15px 0;
}

#footer .footer-logo {
  vertical-align: middle !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 0;
}

#footer .footer-logo-icon {
  height: 40px;
  width: auto;
}

#footer .footer-logo-title {
  font-size: 22px;
  font-weight: 700;
  margin-left: 10px;
}

#footer .footer-address p {
  line-height: 1.4;
  margin: 0 0 10px;
}

#footer .footer-address small {
  display: block;
  margin-bottom: 10px;
}

#footer .footer-address small a {
  text-decoration: none;
  color: #000;
  font-weight: 700;
}

#footer .footer-address ons-button {
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 30px;
  padding: 0 20px;
  color: #777;
  background: #fff;
  cursor: pointer;
}

#footer .footer-address ons-button ons-icon {
  margin-right: 10px;
  vertical-align: middle !important;
  line-height: 1 !important;
  position: relative;
  font-size: 20px;
  color: #b9c500;
}

.bookmarkActive #footer,
.searchActive #footer {
  display: none;
}

#salesPopup {
  position: fixed;
  text-align: center;
  width: 100%;
  bottom: 45px;
  left: 0;
  z-index: 1;
}

#salesPopup .sales {
  display: none;
}

#salesPopup .sales .sale {
  width: calc(100vw - 40px);
  margin: 0 auto;
  padding: 10px 10px 17px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-radius: 6px;
  -webkit-box-shadow: 0 -2px 15px rgba(0, 0, 0, .25);
  box-shadow: 0 -2px 15px rgba(0, 0, 0, .25);
  background-color: #fff;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

#salesPopup .sales .sale img {
  float: left;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  margin-right: 10px;
}

#salesPopup .sales .sale strong {
  display: block;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

#salesPopup .sales .sale small {
  font-style: italic;
  font-size: 14px;
}

#salesPopup .sales .sale ons-icon {
  position: absolute;
  right: 15px;
  top: 10px;
}

#salesPopup.adjust-floating {
  bottom: 55px;
}

#salesPopup.adjust-mini,
.page__content:not(.cartActive) #salesPopup.adjust-mini {
  bottom: 10px;
}

#salesPopup.adjust-mini .sales .sale {
  width: calc(100vw - 90px);
  left: -35px;
}

.page__content:not(.cartActive) #salesPopup {
  bottom: 65px;
}

.page__content:not(.cartActive) #salesPopup .sales .sale {
  width: calc(100vw - 20px);
  left: 0;
}

.bookmarkActive ons-pull-hook,
.searchActive ons-pull-hook {
  margin-bottom: 10px;
}

.bookmarkActive #banner-list,
.searchActive #banner-list,
.bookmarkActive #store-cta,
.searchActive #store-cta,
.bookmarkActive .info-list-wrapper,
.searchActive .info-list-wrapper,
.bookmarkActive .info-list-title,
.searchActive .info-list-title,
.bookmarkActive #cat-list,
.searchActive #cat-list,
.bookmarkActive .item-list-title,
.searchActive .item-list-title {
  display: none;
}

.bookmarkActive .item-list:not(.fav),
.searchActive .loadmore {
  display: none !important;
}

.bookmarkActive .item-list.fav {
  display: block !important;
}

.bookmarkActive .item-list-wrapper,
.searchActive .item-list-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ui-helper-hidden {
  display: none
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse
}

.ui-helper-clearfix:after {
  clear: both
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0)
}

.ui-front {
  z-index: 100
}

.ui-state-disabled {
  cursor: default !important;
  pointer-events: none
}

.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -.25em;
  position: relative;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat
}

.ui-widget-icon-block {
  left: 50%;
  margin-left: -8px;
  display: block
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default
}

.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: 0
}

.ui-menu .ui-menu {
  position: absolute
}

.ui-menu .ui-menu-item {
  margin: 0;
  cursor: pointer;
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 3px 1em 3px .4em
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: -1px
}

.ui-menu-icons {
  position: relative
}

.ui-menu-icons .ui-menu-item-wrapper {
  padding-left: 2em
}

.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: .2em;
  margin: auto 0
}

.ui-menu .ui-menu-icon {
  left: auto;
  right: 0
}

.ui-autocomplete {
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
  margin-top: -2px;
  font-family: sans-serif;
  font-size: 15px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.ui-autocomplete li.ui-menu-item {
  border-bottom: 1px solid #f1f1f1;
  padding: 15px;
}

.ui-autocomplete li.ui-menu-item:last-child {
  border-bottom: none;
}

.ui-autocomplete li.ui-menu-item div {
  padding: 0;
}

.ui-autocomplete li.ui-menu-item:hover,
.ui-autocomplete li.ui-menu-item:active {
  color: #fff;
  background: #3d5afe;
}

.checkout-shipping .list-item {
  padding: 5px 10px;
  background: #fafafa;
  margin-bottom: 5px;
  border-radius: 6px;
  border: 1px solid #e1e1e1;
}

.checkout-shipping .list-item__center {
  padding: 0 0 0 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  background: 0 0;
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 0;
}

.checkout-shipping .list-item__center strong,
.checkout-shipping .list-item__center small {
  align-self: start;
}

.checkout-shipping .list-item__center br {
  display: none;
}

.checkout-shipping .list-item__left {
  min-width: 20px;
  padding: 0;
}

.checkout-shipping .list-item__left input {
  cursor: pointer;
}

.item-list .qty input::-webkit-outer-spin-button,
.item-list .qty input::-webkit-inner-spin-button,
#extra .extra-cta .right .item-qty .qty input::-webkit-outer-spin-button,
#extra .extra-cta .right .item-qty .qty input::-webkit-inner-spin-button,
#cart .form-list ons-input input[type=number]::-webkit-outer-spin-button,
#cart .form-list ons-input input[type=number]::-webkit-inner-spin-button,
#cart #my-cart-table tbody>tr td .my-product-qty input::-webkit-outer-spin-button,
#cart #my-cart-table tbody>tr td .my-product-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.modal {
  background: transparent;
}

.modal .modal__content .loader-wrapper {
  background: #fff;
  -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 20%);
  box-shadow: 0 0 30px rgb(0 0 0 / 20%);
  width: 150px;
  margin: 0 auto;
  padding: 20px 15px;
  border-radius: 12px;
  color: #000;
  font-size: 14px;
}

.spinner {
  margin: 0 auto 15px;
  width: 90px;
  text-align: center;
}

.spinner>div {
  width: 24px;
  height: 24px;
  background-color: #2979ff;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0)
  }

  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {

  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

#success .modal {
  background: #eceff1;
}

/* Loader Style */
.loader.style1,
.loader.style1:before,
.loader.style1:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.loader.style1 {
  color: #2979ff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader.style1:before,
.loader.style1:after {
  content: '';
  position: absolute;
  top: 0;
}

.loader.style1:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader.style1:after {
  left: 3.5em;
}

@-webkit-keyframes load7 {

  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes load7 {

  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.loader.style2 {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes load5 {

  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #2979ff, 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.5), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.7);
  }

  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.7), 1.8em -1.8em 0 0em #2979ff, 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.5);
  }

  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.5), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.7), 2.5em 0em 0 0em #2979ff, 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.5), 2.5em 0em 0 0em rgba(41, 121, 255, 0.7), 1.75em 1.75em 0 0em #2979ff, 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.5), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.7), 0em 2.5em 0 0em #2979ff, -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.5), 0em 2.5em 0 0em rgba(41, 121, 255, 0.7), -1.8em 1.8em 0 0em #2979ff, -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.5), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.7), -2.6em 0em 0 0em #2979ff, -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.5), -2.6em 0em 0 0em rgba(41, 121, 255, 0.7), -1.8em -1.8em 0 0em #2979ff;
  }
}

@keyframes load5 {

  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #2979ff, 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.5), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.7);
  }

  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.7), 1.8em -1.8em 0 0em #2979ff, 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.5);
  }

  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.5), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.7), 2.5em 0em 0 0em #2979ff, 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.5), 2.5em 0em 0 0em rgba(41, 121, 255, 0.7), 1.75em 1.75em 0 0em #2979ff, 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.5), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.7), 0em 2.5em 0 0em #2979ff, -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.2), -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.5), 0em 2.5em 0 0em rgba(41, 121, 255, 0.7), -1.8em 1.8em 0 0em #2979ff, -2.6em 0em 0 0em rgba(41, 121, 255, 0.2), -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.5), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.7), -2.6em 0em 0 0em #2979ff, -1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2);
  }

  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(41, 121, 255, 0.2), 1.8em -1.8em 0 0em rgba(41, 121, 255, 0.2), 2.5em 0em 0 0em rgba(41, 121, 255, 0.2), 1.75em 1.75em 0 0em rgba(41, 121, 255, 0.2), 0em 2.5em 0 0em rgba(41, 121, 255, 0.2), -1.8em 1.8em 0 0em rgba(41, 121, 255, 0.5), -2.6em 0em 0 0em rgba(41, 121, 255, 0.7), -1.8em -1.8em 0 0em #2979ff;
  }
}

.loader.style3,
.loader.style3:before,
.loader.style3:after {
  background: #2979ff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}

.loader.style3 {
  color: #2979ff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader.style3:before,
.loader.style3:after {
  position: absolute;
  top: 0;
  content: '';
}

.loader.style3:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader.style3:after {
  left: 1.5em;
}

@-webkit-keyframes load1 {

  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }

  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

@keyframes load1 {

  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }

  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

.loader.style4,
.loader.style4:before,
.loader.style4:after {
  border-radius: 50%;
}

.loader.style4 {
  color: #2979ff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader.style4:before,
.loader.style4:after {
  position: absolute;
  content: '';
}

.loader.style4:before {
  width: 5.2em;
  height: 10.2em;
  background: #2979ff;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.1em 5.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}

.loader.style4:after {
  width: 5.2em;
  height: 10.2em;
  background: #2979ff;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  -webkit-transform-origin: 0.1em 5.1em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}

@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

.loader.style5 {
  color: #2979ff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }

  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }

  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }

  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }

  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

.loader.style6 {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #2979ff;
  background: -moz-linear-gradient(left, #2979ff 10%, rgba(41, 121, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #2979ff 10%, rgba(41, 121, 255, 0) 42%);
  background: -o-linear-gradient(left, #2979ff 10%, rgba(41, 121, 255, 0) 42%);
  background: -ms-linear-gradient(left, #2979ff 10%, rgba(41, 121, 255, 0) 42%);
  background: linear-gradient(to right, #2979ff 10%, rgba(41, 121, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader.style6:before {
  width: 50%;
  height: 50%;
  background: #2979ff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}

.loader.style6:after {
  background: #2979ff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

.loader.style7 {
  color: #2979ff;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes load4 {

  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }

  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }

  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }

  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

@keyframes load4 {

  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }

  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }

  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }

  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

.loader.style8,
.loader.style8:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader.style8 {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(41, 121, 255, 0.2);
  border-right: 1.1em solid rgba(41, 121, 255, 0.2);
  border-bottom: 1.1em solid rgba(41, 121, 255, 0.2);
  border-left: 1.1em solid #2979ff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

/* Compact Version */
body.compact .products {
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

body.compact .item-list-wrapper,
body.compact #list-orderan {
  padding: 0;
  background: transparent;
  margin-bottom: 0;
}

body.compact .item-list-wrapper .item-list,
body.compact #list-orderan .list-item {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-radius: 0;
  margin: 0;
  border-top: 1px solid #ddd;
}

body.compact .item-list-wrapper .item-list:first-child,
body.compact #list-orderan .list-item:first-child {
  margin-top: 0;
}

body.compact #cart #my-cart-table {
  background: transparent;
}

body.compact #cart #my-cart-table tbody>tr {
  margin: 0 0 10px;
  border-radius: 0;
  border-bottom: 1px solid #eee;
  -webkit-box-shadow: none;
  box-shadow: none;
}

body.compact #cart #my-cart-table tbody>tr:first-child {
  margin-top: 10px;
}

/* Grid Version */
body.grid2 .item-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px 10px;
}

body.grid2 .item-list-wrapper .item-list {
  flex-basis: calc(50% - 10px);
  max-width: 50%;
  margin: 5px;
}

body.grid2 .item-list-wrapper .item-list .item-open ons-col:first-child {
  order: 2;
  flex-basis: 100% !important;
  max-width: 100% !important;
  min-height: 95px;
}

body.grid2 .item-list-wrapper .item-list .item-open ons-col:last-child {
  order: 1;
  flex-basis: 100%;
  max-width: 100%;
  margin-bottom: 5px;
}

body.grid2 .item-list-wrapper .item-list .item-thumbnail {
  margin-top: 0;
}

body.grid2 .item-list .add-notes,
body.grid2 .item-list .extra-sign {
  font-size: 0;
}

body.grid2 .item-list .add-notes ons-icon {
  font-size: 14px;
  margin: 0;
}

body.grid2 .item-list .item-action>ons-col:first-child {
  flex-basis: 50% !important;
  max-width: 50% !important;
  order: 2;
}

body.grid2 .item-list .item-action>ons-col:last-child {
  order: 1;
}

body.grid2 .item-list .extra-sign {
  margin-top: 15px;
  float: right;
}

body.grid2 .item-list .extra-sign span {
  font-size: 16px;
}

body.grid2 .item-list .extra-sign:before {
  margin-right: 0;
  font-size: 16px;
  float: right;
  margin-left: 5px;
  margin-top: -8px;
}

body.grid2 .item-list .item-price {
  margin-right: 5px;
}

body.grid2 .item-list .item-price-was span {
  margin-left: 0;
}

body.grid2 .item-list .item-price-was:after {
  position: absolute;
  top: 25px;
  left: 20px;
  margin: 0;
}

body.grid2 .item-list .bookmark-item {
  position: absolute;
  top: 25px;
  right: 20px;
  padding: 0;
  margin: 0;
  opacity: .7;
  background: #fff;
  border-radius: 25px;
  width: 25px;
  height: 25px;
  line-height: 28px;
  text-align: center;
}

body.grid2 .item-list .notesBtn-wrapper {
  margin: 0;
}

body.grid2 .item-list.loadmore {
  flex-basis: 100%;
  max-width: 100%;
}

body.grid1 .item-list-wrapper .item-list {
  flex-basis: 100%;
  max-width: 100%;
}

body.grid1 .item-list .item-action>ons-col:first-child {
  order: 1;
  flex-basis: 100% !important;
  max-width: 100% !important;
}

body.grid1 .item-list .item-action>ons-col:last-child {
  order: 2;
}

body.grid1 .item-list .extra-sign {
  float: none;
  margin-top: 0;
  margin-bottom: 15px;
}

body.grid1 .item-list .extra-sign:before {
  float: none;
  margin-left: 0;
  margin-right: 10px;
}

body.grid1 .item-list .add-notes,
body.grid1 .item-list .extra-sign {
  font-size: 16px;
}

body.grid1 .item-list .add-item {
  padding: 12px 0;
  background: #03AA0E;
  color: #fff;
}

body.grid1 .item-list.outofstock .add-item {
  background: #aaa;
  color: #fff;
}

body.grid1 .item-list .notesBtn-wrapper {
  float: left;
  margin-bottom: 15px;
}

body.grid1 .item-list .add-notes {
  border: none;
  padding: 0;
  border-radius: 0;
}

body.grid1 .item-list .add-notes ons-icon {
  margin: 1px 10px 0 0;
  font-size: 16px;
}

body.grid1 .item-list .item-qty {
  padding: 8px 5px;
}

body.grid1 .item-list .item-qty .qty {
  width: 100%;
}

body.grid1 .item-list .item-qty ons-col:nth-child(2) {
  flex: 0 0 70% !important;
  max-width: 70% !important;
}

body.grid1 .item-list .item-qty ons-col:first-child,
body.grid1 .item-list .item-qty ons-col:last-child {
  flex: 0 0 15% !important;
  max-width: 15% !important;
}

body.invalid #splash {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  opacity: 1 !important;
}

.hidden {
  display: none;
}

.alert-dialog--material {
  border-radius: 6px;
}

.alert-dialog-content--material {
  margin: 0;
  line-height: 1.6;
}

.alert-dialog-button {
  cursor: pointer;
}

@media only screen and (min-width: 480px) {
  body.admin-bar {
    margin-top: 32px;
  }

  body.page-template-page-katalog {
    background-color: #efeff4 !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  .toolbar__right .toolbar-button--material {
    padding: 0 12px;
  }

  ons-navigator,
  #extra .extra-cta,
  .cartBtn-wrapper .cart-menu,
  .action-sheet,
  ons-toast,
  #cart .checkout-cta {
    max-width: 480px;
    margin: 0 auto;
  }

  #cart .checkout-cta {
    left: calc(50% - 240px);
  }

  .cartBtn-wrapper .cart-menu {
    position: relative;
  }

  .cartBtn-wrapper .cartBtn,
  #itemNotes .add-notes-popup,
  #delivTime .choose-delivery-time {
    width: calc(480px - 25px);
  }

  .cartBtn-wrapper.cart-full .cartBtn {
    width: 480px;
  }

  #menu .popover {
    left: 12px !important;
  }

  #menu .popover .popover__content {
    width: calc(480px - 28px);
  }

  #salesPopup .sales .sale {
    width: calc(480px - 50px);
    left: -3px;
  }

  #salesPopup.adjust-mini .sales .sale {
    width: calc(480px - 90px);
    left: -35px;
  }

  .page__content:not(.cartActive) #salesPopup {
    bottom: 10px;
  }

  .page__content:not(.cartActive) #salesPopup .sales .sale {
    width: calc(480px - 155px);
    left: 60px;
  }

  .page__content:not(.cartActive) #salesPopup.adjust-mini .sales .sale {
    width: calc(480px - 25px);
    left: -3px;
  }

  .cartBtn-wrapper .cartBtn .right ons-row>ons-col:first-child {
    margin-right: 10px;
  }

  #success .detail-sukses .ringkasan-order {
    max-width: 60%;
  }

  #detailItem .add-item-popup {
    left: calc(50% - 225px);
    width: calc(480px - 30px);
  }

  #detailItem .action-sheet-button:after {
    left: calc(50% - 240px);
    width: 480px;
  }

  .page__content::-webkit-scrollbar-track,
  .action-sheet-button::-webkit-scrollbar-track,
  .popover__content::-webkit-scrollbar-track,
  .ui-autocomplete::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .page__content::-webkit-scrollbar,
  .action-sheet-button::-webkit-scrollbar,
  .popover__content::-webkit-scrollbar,
  .ui-autocomplete::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
  }

  .page__content::-webkit-scrollbar-thumb,
  .action-sheet-button::-webkit-scrollbar-thumb,
  .popover__content::-webkit-scrollbar-thumb,
  .ui-autocomplete::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 6px;
  }
}

@media only screen and (min-width: 768px) {
  body.admin-bar {
    margin-top: 32px;
    height: 100%;
  }

  #sliderKat.tabbed {
    overflow-x: hidden;
  }

  body.logged-in ons-navigator {
    margin-top: 0;
    height: 100%;
  }

  body.desktop-layout #banner-loader {
    max-width: 960px;
    margin: 15px auto 0;
  }

  body.desktop-layout #banner-loader .ph-item {
    background: transparent;
    border: none;
    margin: 0;
  }

  body.desktop-layout #banner-loader .ph-item>.ph-col-10 {
    padding: 0 5px;
    flex: 100%;
  }

  body.desktop-layout #banner-loader .ph-item>.ph-col-2 {
    display: none;
  }

  body.desktop-layout #banner-loader .ph-item .ph-picture {
    height: 500px;
  }

  body.desktop-layout #info-loader {
    max-width: 960px;
    margin: 0 auto;
  }

  body.desktop-layout #info-loader .ph-item {
    margin: 15px 5px;
    border-radius: 8px;
  }

  body.desktop-layout ons-navigator,
  body.desktop-layout #splash .loader-wrapper {
    max-width: 100%;
  }

  body.desktop-layout .toolbar--material {
    margin: 0 auto;
    max-width: 960px;
  }

  body.desktop-layout .toolbar--material:before {
    content: "";
    width: 100vw;
    height: 56px;
    left: 0;
    top: 0;
    background: #fff;
    position: fixed;
    z-index: -1;
    box-shadow: 0px 0px 30px rgb(0 0 0 / 15%);
  }

  body.logged-in.desktop-layout .toolbar--material:before {
    top: 32px;
  }

  body.logged-in.desktop-layout #cart .page__content {
    padding-bottom: 125px;
  }

  body.desktop-layout #home .toolbar__left {
    width: 100%;
    max-width: 100%;
    padding-right: 25px;
  }

  body.desktop-layout #sliderBanner .left,
  body.desktop-layout #sliderBanner .right {
    display: block;
  }

  body.desktop-layout #sliderBanner {
    max-width: 960px;
    margin: 0 auto;
  }

  body.desktop-layout #banner-list {
    background: transparent;
    border: none;
  }

  body.desktop-layout #banner-list .banner-item {
    width: 100% !important;
    padding: 0 5px;
  }

  body.desktop-layout #banner-list:not(.full-banner) .banner-item:first-child {
    margin-left: 0;
  }

  body.desktop-layout #banner-list .banner-item .thumbnail {
    padding: 15px 0 5px;
    border-radius: 12px;
    overflow: hidden;
  }

  body.desktop-layout #store-cta {
    background: transparent;
    border: none;
    max-width: 960px;
    margin: 0 auto;
  }

  body.desktop-layout #store-cta ons-col {
    padding: 0 5px;
  }

  body.desktop-layout #store-cta .cta {
    border: none;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    box-shadow: 0px 5px 5px rgb(0 0 0 / 3%);
  }

  body.desktop-layout #infoToko {
    max-width: 960px;
    margin: 10px auto 5px;
  }

  body.desktop-layout #infoToko .list-title {
    background: transparent;
    padding-top: 0;
    padding-bottom: 15px;
  }

  body.desktop-layout .info-list-wrapper {
    background: transparent;
    border: none;
    padding: 0 5px;
  }

  body.desktop-layout .info-list-wrapper .info-list {
    background: #fff;
    padding: 5px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0px 5px 5px rgb(0 0 0 / 3%);
  }

  body.desktop-layout .info-list-wrapper .info-list .center {
    background: transparent;
  }

  body.desktop-layout #sliderKat {
    max-width: 960px;
    margin: 0 auto;
  }

  body.desktop-layout #sliderKat.grid #cat-list {
    padding-left: 0;
    padding-right: 0;
  }

  body.desktop-layout #sliderKat.tabbed {
    margin-bottom: 25px;
  }

  body.desktop-layout #cat-list .cat-item:first-child {
    margin-left: 0;
  }

  body.desktop-layout #produk {
    max-width: 960px;
    margin: 0 auto;
  }

  body.desktop-layout .products {
    border: none;
  }

  body.desktop-layout .products .item-list-title {
    background: transparent;
    padding: 5px 10px 10px;
    top: 0;
    position: relative;
  }

  body.desktop-layout .item-list-wrapper {
    background: transparent;
    padding: 0 5px;
  }

  body.desktop-layout .item-list-wrapper .item-list {
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%) !important;
  }

  body.desktop-layout.grid2 .item-list-wrapper .item-list {
    flex-basis: calc(25% - 10px);
    max-width: 25%;
    box-shadow: 0 2px 5px rgb(0 0 0 / 10%) !important;
  }

  body.desktop-layout:not(.grid2) .item-list-wrapper .item-list .item-open>ons-col:first-child,
  body.desktop-layout:not(.grid2) .item-list-wrapper .item-list .item-action>ons-col:first-child {
    max-width: 88% !important;
    flex: 0 0 88% !important;
  }

  body.desktop-layout .item-list.loadmore {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  body.desktop-layout #footer {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
  }

  body.desktop-layout #footer .footer-logo {
    justify-content: center;
  }

  body.desktop-layout .cartBtn-wrapper .cart-menu {
    max-width: 960px;
  }

  body.desktop-layout .cartBtn-wrapper .cartBtn,
  body.desktop-layout .cartBtn-wrapper .menu-cat {
    left: inherit;
    right: 5px;
  }

  body.desktop-layout #salesPopup {
    bottom: 0;
  }

  body.desktop-layout #salesPopup .sales {
    max-width: 960px;
    margin: 0 auto 5px;
  }

  body.desktop-layout #salesPopup .sales .sale {
    margin: 0 5px;
  }

  body.desktop-layout .page__content:not(.cartActive) #salesPopup .sales .sale {
    width: calc(480px - 50px);
    left: -3px;
  }

  body.desktop-layout #extra .extra-option {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 10px;
    border: none;
    background: transparent;
  }

  body.desktop-layout #extra .extra-option .list-item:not(.extra-title) {
    background: #fff;
    margin-bottom: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 15px rgb(0 0 0 / 10%);
  }

  body.desktop-layout #extra .extra-notes {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 10px;
    background: transparent;
    border: none;
  }

  body.desktop-layout #extra .extra-cta {
    max-width: 100%;
  }

  body.desktop-layout #extra .extra-cta>ons-row {
    max-width: 960px;
    margin: 0 auto;
  }

  body.desktop-layout #extra .extra-cta .left {
    max-width: 85% !important;
    flex: 0 0 85% !important;
  }

  body.desktop-layout #cart #my-cart-table {
    max-width: 960px;
    margin: 0 auto;
    background: transparent;
  }

  body.desktop-layout #cart #my-cart-table tbody>tr {
    margin: 10px 0;
  }

  body.desktop-layout #cart #my-cart-table tbody>tr td.my-product-title-wrapper {
    flex: 0 0 90%;
    max-width: 90%;
  }

  body.desktop-layout #cart .form-list {
    max-width: 960px;
    margin: 0 auto;
    border: none;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  }

  body.desktop-layout #cart .checkout-summary {
    max-width: 960px;
    margin: 0 auto;
    background: transparent;
    padding: 15px 0;
  }

  body.desktop-layout .checkout-summary .list-title {
    padding-left: 15px;
    padding-right: 15px;
  }

  body.desktop-layout .checkout-summary .list-item {
    padding: 0 15px;
  }

  body.desktop-layout #cart .checkout-cta {
    max-width: 100%;
    left: 0;
  }

  body.desktop-layout #cart .checkout-cta>ons-col {
    margin: 0 auto;
    max-width: 960px;
  }

  body.desktop-layout #history #list-orderan,
  body.desktop-layout #history #orderan .history-kosong {
    max-width: 960px;
    margin: 0 auto;
    background: transparent;
  }

  body.desktop-layout #history #list-orderan .list-item>.center>ons-row>ons-col:first-child {
    flex: 0 0 85% !important;
    max-width: 85% !important;
  }

  body.desktop-layout #history #orderan .history-kosong {
    width: 100%;
  }

  body.desktop-layout #history #orderan .history-kosong img {
    max-width: 30%;
  }

  body.desktop-layout ons-toast {
    max-width: 100%;
  }

  body.desktop-layout ons-toast .toast {
    padding: 18px;
  }

  body.desktop-layout ons-toast .toast .toast__message {
    text-align: center;
  }

  body.desktop-layout ons-toast#myToast .toast {
    padding: 36px;
  }

  body.desktop-layout ons-toast .toast .toast__message div {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
  }

  body.desktop-layout ons-toast .toast .toast__message div button {
    background: transparent;
    border: none;
    border-left: 1px solid #fff;
    color: #fff;
    font-weight: 700;
    float: right;
  }
}

@media all and (display-mode: standalone) {
  .install {
    display: none;
  }
}