body {
    background: #f3f3f3;
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
#content{
    max-width: 800px;
    text-align: center;
    margin:auto;
}
#shopping-cart{
    margin: auto;
    width:100%;
}
.order-header-container{
    background: #353535;
    text-align: center;
    margin: auto;
    padding: 15px 0;
    color: #fff;
    font-size: 13px;
}
.order-footer-forced{
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow:hidden;
}
.txt-heading {
	margin: 20px 0px;
	text-align: left;
    background: #cccccc;
    padding: 5px 10px;
    overflow: auto;
}

#shopping-cart .txt-heading {
	border-top: #607d8b 2px solid;
    background: #fff;
    border-bottom: #607d8b 2px solid;
    padding: 10px;
    font-size: 16px;
}

.txt-heading-label {
	display: inline-block;
}

#shopping-cart .txt-heading .txt-heading-label{
	margin-top:5px;
}

.btnAddAction {
    padding: 3px 10px;
    cursor: pointer;
    border: #CCC 1px solid;
    background: #f3f0f0;
}

.cart-item {
	border-bottom: #79b946 1px dotted;
	padding: 10px;
}

.cart-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
}

#product-grid {
	margin-bottom: 30px;
    text-align: center;
    padding-bottom: 20px;
}

.product-item {
	display: inline-block;
	margin: 8px;
	border: #CCC 1px solid;
}

.product-title {
	position: absolute;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    padding: 5px 0px;
    color: #f1f1f1;
}
.product-image {
	height: 110px;
	width:160px;
	position:relative;
}

.product-image img {
	width:100%;
    height: 110px;
}

.product-footer {
    padding: 20px 10px 10px;
    overflow: auto;
}
.float-left {
	float:left;
}
.float-right {
	float:right;
}
.align-right {
	text-align: right;
}

.input-cart-quantity {
	padding: 5px;
    margin: 0;
    vertical-align: top;
    border: #CCC 1px solid;
    border-right: 0px;
    width:35px;
}
.cart-info {
	text-align: right;
	display:inline-block;
	width:15%;
    font-size: 0.8em;
}
.cart-info.title {
	width:50%;
	text-align: left;
}
.cart-info.price {
	min-width:20%;
	position:relative;
}
.cart-info.action {
	width: 5%;
    float: right;
    padding: 10px 0px;
}
.cart-item-container {
	padding: 10px;
    border-bottom: #e2e2e2 1px solid;
    background: #fff;
}
.cart-status {
	color: #666;
    float: right;
    font-size: 0.8em;
    padding: 0px 10px;
    line-height: 18px;
}
#btnEmpty img{
	margin-top:6px;
	cursor:pointer;
}

.cart-item-container.header {
	background: #bf2424;
    border-bottom: #b9b8b8 1px solid;
    font-weight: bold;
    color:#fff;
    font-size: 14px;
}
.btn-action {
	margin: 20px 0px 20px;
    padding: 10px 30px;
    font-size: 1em;
    background: #3a9ee0;
    border: #3590cc 1px solid;
    color: #FFF;
    cursor: pointer;
}
.frm-customer-detail {
    background: #ebebeb;
    padding: 20px;
}

.frm-heading {
	margin: 20px 0px 0px;
	text-align: left;
    background: #bf2424	;
    padding: 10px;
    color:#fff;
}

.input-field {
	display:inline-block;
	margin:10px 0px;
}

.input-field input {
	margin-right:15px;
	padding:10px;
	min-width:200px;
}

.input-field #phone {
    margin-right:15px;
    width:200px;
}

.select-field {
    width: 100%;
    margin:10px 0;
}
.full-select-width {
    margin-right:15px;
    padding:10px;
    min-width: 200px;
    width: 84%;
}

.area-field{
    width: 84%;
    margin: auto;
    height:80px;
    padding:10px;
    margin-right: 15px;
}

.form-section-title{
    width: 85%;
    text-align: left;
    color: #666;
    font-size: 14px;
    margin: auto;
}

.success {
	margin-top: 20px;
    background: #d6ecd6;
    padding: 15px;
    border: #c4dac4 1px solid;
}
.btn-continue {
	margin: 20px 0px 20px;
    padding: 10px 30px;
    font-size: 1em;
    background: #FFF;
    border: #3a9ee0 1px solid;
    color: #3a9ee0;
    cursor: pointer;
}

.extra-charge-info{
    color: #3a9ee0;
    background: #d6ecd6;
    padding: 10px 30px;
    font-size: 1em;
    margin-top:10px
}
.paypal-extra-payment-note{
    color: #3a9ee0;
    background: #d6ecd6;
    padding: 10px 30px;
    font-size: 1em;
    margin-top:10px
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {
    padding: 15px 10px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.topping-holder{
    padding: 3px;
    background: #ebebeb;
    font-size: 13px;
    color: #353535;
    border-bottom: 1px solid #fff;
    cursor:pointer;
    line-height: 24px;
}

.text-center{
    margin: auto;
    text-align: center;
}
.button-holder{
    text-align: right;
    float:right;
}
.add-extra-topping{
    color: green;
    font-size: 24px;
}

.toppings-holder{
    max-height: 500px;
    overflow-x:hidden;
}
.pizza-image-holder{
    text-align: center;
    margin: auto;
}
.pizza-name-holder{
    text-align: center;
    margin: auto;
    font-size: 14px;
    padding-bottom: 10px;
}
img.img-configurator{
    max-width: 30%;
    border-radius:50%;
    text-align: center;
    margin: auto;
}
.native-topping,
.remove-extra-topping{
    display: block;
    width: auto;
    padding: 5px 15px 5px 35px;
    font-size: 13px;
    background: #ebebeb;
    border-bottom: 1px solid #fff;
}
.native-topping img,
.remove-extra-topping img{
    position: absolute;
    margin: -3px 0 0 -25px;
    cursor: pointer;
}
.strike{
    text-decoration: line-through;
}
.update-pizza-toppings-button{
    margin: 20px auto;
    text-align: center;
}

#updatePizza, .show-customisation-button {
    box-shadow:inset 0px 1px 0px 0px #9acc85;
    background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
    background-color:#74ad5a;
    border:1px solid #3b6e22;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:13px;
    font-weight:bold;
    padding:6px 12px;
    text-decoration:none;
}
#updatePizza:hover,
.show-customisation-button:hover{
    background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
    background-color:#68a54b;
}
#updatePizza:active,
.show-customisation-button:active{
    position:relative;
    top:1px;
}
.pizza-price-holder{
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    background: #5cb85c;
    color: #fff;
    font-weight: bold;
    padding: 10px 0;
}
.f13{
    font-size: 13px;
}
.extra-notes-in-product{
    padding: 5px;
    font-size: 12px;
    background: #f4f4f4;
}
.text-above-toppings{
    margin: auto;
    text-align: center;
    font-size: 14px;
    padding-bottom: 10px;
}

.topping-columns{
    column-count: 2;
}

.warning-mixed-cart-text{
    padding: 0 20px;
    font-size: 14px;
    text-align: center;
}
.warning-mixed-cart-text-bold{
    padding: 5px 0;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}

.small-warning-footer-note{
    padding: 15px 0;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .input-field input {
        margin-right: 15px;
        padding: 10px;
        min-width: 276px;
    }
    #myModal .row{
        margin-left: 0;
        margin-right: 26px;
    }
    .topping-columns{
        column-count: 1;
    }
    .topping-holder {
        font-size: 14px;
        line-height: 26px;
        padding: 5px;
    }
    .native-topping, .remove-extra-topping {
        padding: 7px 15px 8px 35px;
        font-size: 15px;
    }
}