/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}

/*
 *   Styles
 */

* {box-sizing:border-box;}

body {display:flex; flex-direction:column;}

body,
textarea,
select,
button,
input[type="password"],
input[type="text"] {font-family:'Fira Sans', sans-serif; font-size:14px; line-height:1.6em; color:#333;}

body {background:linear-gradient( to right, #fff, #eee );}
body > .inner {max-width:575px; width:100%; margin:0 auto 20px auto;}
body > .inner > .content {display:inline-block; width:100%; margin:20px auto 0 auto; background:#fff; padding:40px;}

a:link,
a:visited {color:#333;}

p {display:block; margin:0 0 1em 0; text-align:justify;}
p:last-child {margin-bottom:0;}

ul {display:block; margin:0 0 1em 0;}
ul:last-child {margin-bottom:0;}

h1 {font-weight:bold; font-size:24px;}
h2 {font-weight:bold; font-size:20px;}

textarea,
select,
button,
input[type="password"],
input[type="number"],
input[type="text"] {padding:3px 8px; background:#fff; border:1px solid rgba( 0,0,0, .1 ); border-radius:3px;}

select {padding:5px 8px; font-size:14px; line-height:1em;}

button,
a.button {display:inline-flex; padding:10px; background:linear-gradient( to bottom, #fefefe, #eee ); border:1px solid rgba( 0,0,0, .05 ); border-radius:3px; font-size:14px; line-height:1em; text-decoration:none; cursor:pointer;}
button:hover,
a.button:hover {background:linear-gradient( to bottom, #eee, #ddd );}

.float-left {float:left;}
.float-right {float:right;}

.text-center {text-align:center;}
.text-right {text-align:right;}

header {display:flex; flex-direction:column; align-items:center; margin-bottom:20px;}
header .logo {margin-bottom:20px;}
header h1 {margin-bottom:20px;}
header h1 a {text-decoration:none;}
header h1:last-child {margin-bottom:0;}

.dd {float:right; width:25px; margin:20px 0;}

.pageresponse {margin:0 0 20px 0; padding:10px 15px; background:#ffc; color:#000; font-weight:bold;}

.preview-mode {display:inline-block; width:100%; margin:10px 0 0 0; padding:10px; background:rgba( 0,0,0, .75 ); color:#fff; font-weight:bold; text-align:center; text-transform:uppercase;}

.logo img {height:80px;}

.businessinfo {margin-bottom:30px; text-align:center; font-size:15px; color:rgba( 0,0,0, .6 );}

.category {margin-bottom:30px; border-bottom:1px solid rgba( 0,0,0, .05 );}
.category h3 {margin-bottom:20px; font-size:18px; font-weight:bold;}

.product {display:flex; align-items:center; padding:20px 0; border-top:1px solid rgba( 0,0,0, .05 );}
.product .info {flex:1; margin:0 0 0 15px;}
.product .name {font-size:18px;}
.product .description {margin-top:5px; font-size:11px; line-height:1.4em; color:rgba( 0,0,0, .4 );}
.product .image {display:flex; justify-content:center; align-items:center; width:75px; height:75px;}
.product .image img {max-width:75px; max-height:75px;}
.product .quantity {display:flex; flex-direction:column; align-self:stretch; justify-content:center; align-items:center; margin-right:15px;}
.product .quantity input {width:35px; padding:3px; font-size:18px; font-weight:bold; border:1px solid rgba( 0,0,0, .05 ); text-align:center;}
.product .quantity button {padding:3px; font-size:14px; background:none; border:0; outline:none; color:rgba( 0,0,0, .1 );}
.product .quantity .plusminus {display:flex;}
.product:hover .quantity button {color:rgba( 0,0,0, .4 );}
.product .quantity button:hover {color:rgba( 0,0,0, .8 );}
.product .hide {visibility:hidden;}
.product .price {margin-left:40px; font-size:18px; font-weight:bold; text-align:right;}

.business .total {display:flex; padding:0 0 20px 0;}
.business .total label {flex:1; text-align:right;}
.business .total .price {margin-left:50px; font-size:18px; font-weight:bold; text-align:right;}
.business .total .price.zero {color:rgba( 0,0,0, .2 );}

.proceedNotice {margin:15px 0 0 0; padding:10px 15px; background:#ffc; font-weight:bold;}

.business .buttons {display:flex; margin-top:10px;}
.business .buttons button:first-child {margin-right:10px;}
.business .buttons button:last-child {margin-left:10px;}
.business .buttons button:only-child {margin:0;}
.business .buttons button.proceed {display:flex; flex-direction:column; align-items:center; font-size:18px;}
.business .buttons button.proceed .minimum {margin-top:5px; color:rgba( 255,255,255, .5 ); font-size:11px;}

.order {margin-bottom:20px;}
.order h3 {margin-bottom:10px; font-weight:bold;}
.order .item {display:flex; padding:10px 0; border-bottom:1px solid rgba( 0,0,0, .05 );}
.order .item .name {flex:1;}
.order .item:first-of-type {border-top:1px solid rgba( 0,0,0, .05 );}
.order .item .quantity {width:50px; text-align:left;}
.order .item .price {width:80px; text-align:right;}
.order .item.discount {flex-wrap:wrap; color:rgba( 0,0,0, .5 );}
.order .item.discount .remove {display:inline-flex; align-items:center; margin-left:10px; font-size:11px; color:#c00; text-decoration:none;}
.order .item.discount .remove i {margin:0 3px 0 0;}
.order .item.discount a.remove:hover span {text-decoration:underline;}
.order .item.discount .note {width:100%; margin:10px 0 0 0; padding:12px; background:#ffc; border:1px solid rgba( 0,0,0, .1 ); color:#000; line-height:1.4em;}
.order .button {margin-top:10px;}
.order .total {margin-top:10px; border-bottom:0;}
.order .total .name {font-size:18px;}
.order .total .price {font-size:18px; font-weight:bold;}

form.discount {display:flex; margin:0 0 20px 0; padding:12px; background:rgba( 0,0,0, .05 ); border-radius:3px;}
form.discount input[type="text"] {width:100%; margin:0 5px 0 0;}
form.discount button {white-space:nowrap; background:#000; color:#fff;}

.ordernotes {width:100%; text-align:center; font-size:11px; color:rgba( 0,0,0, .3 ); white-space:pre-wrap;}

a.back {display:inline-block; margin:10px 0 0 0; color:rgba( 0,0,0, .5 ); font-size:11px; text-decoration:none;}
a.back i {margin:0 5px 0 0;}
a.back:hover {text-decoration:underline;}

.order-status {display:inline-block; width:100%; margin:0 0 15px 0; padding:10px 15px; background:rgba( 0,0,0, .05 ); text-align:center; font-size:18px;}
.order-status-new {background:#ffc;}
.order-status-confirmed {background:#29a7e3; color:#fff;}
.order-status-in-transit {background:#e2af1f; color:#fff;}
.order-status-delivered,
.order-status-completed {background:#00bc29; color:#fff;}

.field {display:flex; flex-direction:column; margin-bottom:10px;}
.field label {font-size:14px; color:rgba( 0,0,0, .5 );}

.StripeElement {background-color:white; height:40px; padding:10px 12px; border-radius:4px; border:1px solid transparent; box-shadow:0 1px 3px 0 #e6ebf1; -webkit-transition:box-shadow 150ms ease; transition:box-shadow 150ms ease;}
.StripeElement--focus {box-shadow:0 1px 3px 0 #cfd7df;}
.StripeElement--invalid {border-color:#fa755a;}
.StripeElement--webkit-autofill {background-color:#fefde5 !important;}
.stripe-field .errors {color:#f00; font-size:14px;}

button.proceed,
.business button[type="submit"],
#payment-form button {width:100%; margin-top:15px; padding:15px 20px; background:#000; border:0; color:#fff; justify-content:center; text-align:center;}
button.proceed:hover,
.business button[type="submit"]:hover,
#payment-form button:hover {background:rgba( 0,0,0, .8 );}
.business button[type="submit"]:disabled {background:rgba( 0,0,0, .25 ); cursor:default;}


@media all and ( min-width:701px ){
  
  .dd {position:fixed; bottom:20px; right:20px; margin:0;}
  
}

@media all and ( max-width:600px ){
  
  body > .inner {margin:0;}
  body > .inner > .content {margin:0; padding:30px;}
  
  .dd {margin:20px;}
  
}