body, html {
    box-sizing: border-box;
}
* {
    box-sizing: inherit;
}

#content_area.wrap.payments {
    margin-top: 4em;
}

#fancybox-content {
  border-color: #dedede !important; /* or whatever */
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9c0c3+0,f7aab7+36,93304a+100 */
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9c0c3+0,f7aab7+90,93304a+100 */
   background: #dedede; /* Old browsers */
}

a {
  cursor: pointer;
}
#content_area.payments #content {
  width: 100%;
}

#cartContainer, #cpShipContainer {
    border:1px dashed;
    padding:1em;
    display: flex;
    margin-top: 1em;
}

#cpShipContainer {
    border: none;
    flex-direction: column;
}
#cpShipContainer .borderedFieldset {
    border: 1px dashed #000;
}
#cpShipContainer .cartRow {
    xxborder-bottom: 1px dashed #000;
	padding: 5px;
}

#cartHeaderRow, .cartRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
	padding-bottom:5px;
}

#cartHeaderRow span {
    font-weight: 800;
}

.cartRow span:first-child {
    width: 40%;
}
#cpShipContainer .cartRow span:first-child {
    width: 40%;
}

.cartRow span:nth-child(2) {
    width: 30%;
}

.cartRow span:nth-child(3) {
    width: 20%;
}

.cartRow span:nth-child(4) {
    width: 15%;
}


@media screen and (max-width: 400px) {
    #cartHeaderRow {
        display: none;
    }

    #cmsPopup h2 {
        font-size: 1.05rem;
    }

    .cartRow span:first-child {
        width: 100%;
    }
    #cpShipContainer .cartRow span:first-child {
        width: 100%;
    }
    
    .cartRow span:nth-child(2) {
        width: 100%;
    }
    #cpShipContainer .cartRow span:nth-child(2)  {
        width: 30%;
    }
    
    .cartRow span:nth-child(3) {
        width: 100%;
    }
    #cpShipContainer .cartRow span:nth-child(3)  {
        width: 70%;
    }
    
    .cartRow span:nth-child(4) {
        width: 100%;
    }

    .cartRow .removeOrderItem::after {
        vertical-align: top;
        font-size: .9rem;
        content: '- remove item';
    }
}

#cmsPopup {
  padding: .5em 1em;
}

div.payButton, a.clearCart {
  padding-left: 1em;
}

div.error {
  font-size: 1.2em;
  font-weight: 600;
  color: #ff0000;
  margin-bottom: 1em;
}

/* form elements */
form#purchaseForm {
  padding: 1em;
  border: 1px solid #cccccc;
  border-radius: 3px;
  xxmin-width: 380px;
  xxmax-width: 25%;
  margin-top: 2em;
  background: #fff;
  display: flex;
  flex-direction: column;
}

form#confirmForm input.confirmButton, form#confirmForm input.cancelbtn, button.confirmPay {
    width: 100%;
    padding: 1rem 2rem;
    text-transform: uppercase;
    font-size: 1.15em;
    border: none;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: .25rem;
    cursor: pointer;
}
form#confirmForm input.cancelbtn {
    background: #ccc;
    color: #000;
}
form#confirmForm input.cancelbtn:hover {
    background: #aaa;
}
form#confirmForm input.confirmButton, button.confirmPay {
    background: #0f75bc;
    color: #ffffff;
}
form#confirmForm input.confirmButton:hover, button.confirmPay:hover, button.altPayButton:hover {
    background: #225880;
}

@media all and (max-width: 550px) {
    form#purchaseForm {
        margin: 2em auto;
    }
}
form#purchaseForm h2 {
  margin-top: 0;
  color: #293032;
}
form#purchaseForm fieldset {
  display: block;
  clear: both;
  margin: 1em 0;
  width: 100%;
}
#purchaseForm label, #purchaseForm input[type=text], #purchaseForm input[type=email], #purchaseForm select {
  display: block;
}
#purchaseForm input[type=email], #purchaseForm input[type=text], #purchaseForm select {
  font-size: 1.1em;
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #c0c0c0;
}
#purchaseForm select {
  width: 100%;
}
#purchaseForm a.purButton, #purchaseForm a.purButton.set, #purchaseForm input.purButton, #cmsPopup a.payButton, input.purButton {
    display: block;
    padding:5px;
    font-size: 1.1em;
    font-weight: 300;
    background: #4f4f4f;
    text-align:center;
    color: #fff;
    margin-bottom: 10px;
}
#purchaseForm a.purButton, #cmsPopup a.payButton {
  width: 100%;
}
#purchaseForm input.purButton, #cmsPopup a.payButton {
  border: none;
  cursor: pointer;
}
#purchaseForm input.purButton:disabled {
  background: #cdcdcd;
}
#purchaseForm .purButton:hover, #purchaseForm .purButton.set, #cmsPopup a.payButton.set, #cmsPopup a.payButton:hover {
  background: #000000;
}
#purchaseForm fieldset.shipto {
  display: none;
}

.receipt {
  width: 50%;
}
.receipt hr {
  margin-bottom: 1em;
}

/* cart */
table.cartTable {
  min-width: 360px;
}
.cartTable th {
  font-size: 1.1em;
  font-weight: 600;
  border: none;
}
.cartTable td {
  vertical-align: middle;
  padding-right: 5px;
}
.cartTable a.removeOrderItem {
  font-size: 2em;
  font-weight: 600;
  float: right;
  color: #293032 !important;
}
.cartTable button#updateCartBtn {
  padding: 5px 15px;
  color: #fff;
  background: #4f4f4f;
  xborder-radius: 6px;
  border: 1px solid #999;
  cursor: pointer;
  font-size: 1em;
  font-weight: 400;
  margin-top: 1em;
}
.cartTable button#updateCartBtn:hover, .cartTable button#updateCartBtn:active {
  background: #000000;
}

td.addremoveContainer {
  font-size: 1.5em;
}
td.addremoveContainer a {
  font-size: 1.2em;
}

.cartTable hr.dashed { 
  border: 0; 
  border-bottom: 1px dashed #ccc; 
  background: #999; 
}

button.cartButton {
  margin: 1em 0;
  font-size: .9em;
  padding: 3px 5px;
  border: 1px solid #464646;
  border-radius: 6px;
  cursor: pointer;
}

button.cartButton:hover {
  box-shadow: 1px 1px 2px 3px #bbb;
}

#discountbox {
	margin-top:1em; 
	padding-bottom: 1em;
	text-align: right; 
	border-bottom: 1px dashed #464646; 
}

#discountbox label {
	padding-bottom: 6px;
	width:auto;
}

#discountbox input {
	width: 200px; 
	margin-left:1em;
    margin-bottom:1em;
    padding: 4px 6px;
}

.returnbtnContainer {
  padding: 0 1em;
  text-align: right;
  margin-bottom: -.5em;
}

.addDiscount, a.addDiscount, a.displayAddDiscount {
	padding: 4px 10px;
  	color: #ffffff !important;
  	background: #4f4f4f;
  	cursor: pointer;
  	font-weight: 400;
    margin-left: 1em;
    vertical-align: middle;
}

.addDiscount:hover, .addDiscount:active, .displayAddDiscount:hover, .displayAddDiscount:active {
	background-color:#000000;
}

.checkoutbtn, a.checkoutbtn {
	padding: 5px 10px;
  	color: #ffffff !important;
  	background: #4f4f4f;
  	cursor: pointer;
  	font-weight: 400;
    float:right;
    margin-top: 6px;
}

a.returnbtn {
  padding: 5px 10px;
  color: #ffffff !important;
  background: #4f4f4f;
  cursor: pointer;
  font-weight: 400;
  margin-top: 6px;
}

.checkoutbtn:hover, .checkoutbtn:active, .returnbtn:hover, .returnbtn:active, input[type=submit].confirmDelivery:hover {
    background: #000;
}

.hilite {
    float: left;
    padding: .35em;
    background: rgba(255, 255, 0, .5);
}

.creditnote {
  color: var(--brand-a);
}

#paybuttonform input[type=image] {
  opacity: 100%;
}

#paybuttonform input[type=image]:hover, #paybuttonform input[type=image]:active, button#alternatePaymentBtn:hover,
button#alternatePaymentBtn:active, button.altPayButton:hover, button.altPayButton:active {
  opacity: 70%;
}

input[type=submit].confirmDelivery {
  display: block;
  padding: 5px;
  font-size: 1.1em;
  font-weight: 300;
  background: #4f4f4f;
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
  cursor: pointer;
}

button#alternatePaymentBtn, button.altPayButton {
  background-color: var(--brand-a);
  border: none;
  color: var(--brand-a-color);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 25px;
  width: 227px;
  height: 44px;
  opacity: 100%;
}

#payChoicesContainer {
  display: flex;
  justify-content: space-between;
}