div.component_OrderProcess_Checkout3 {
padding: 0;
}
.checkout h2,
.checkout h3,
.checkout h4,
.checkout h5 {
font-family: Open Sans, Sans-serif;
color: #444444;
font-weight: 400;
text-transform: uppercase;
}
.checkout h3 {
font-size: 23px;
margin-bottom: 15px;
}
.checkout input[type=text],
.checkout input[type=checkbox],
.checkout input[type=password],
.checkout input[type=email],
.checkout select,
.checkout label {
width: 100%;
}
.checkout label input {
margin-top: 2px;
}
.checkout .on {
display: block !important;
}
.checkout .off {
display: none !important;
}
.checkout {
margin: 35px 20px;
}
.checkout > header {
display: grid;
grid-template-columns: auto auto;
width: 100%;
}
.checkout .login {
position: relative;
padding-left: 40px;
align-self: center;
}
.checkout .login.complete {
visibility: hidden;
}
.checkout .login::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto 0;
display: block;
width: 29px;
height: 29px;
background: url(https://images.zeald.com/site/compasstrailersnew/images/basic_theme/ui_sprites.svg) no-repeat 0 -740px;
}
.checkout .login.on::before {
bottom: unset;
margin: 0;
top: 5px;
}
.checkout .login > p {
margin: 0;
white-space: nowrap;
line-height: 29px;
}
.checkout .login button.link {
background: none;
color: #EE3124;
text-transform: unset;
padding: unset;
margin-left: 8px;
}
.checkout .login .login-form {
display: none;
width: 300px;
}
.checkout .login.on .login-form {
display: block;
}
.checkout .login-form h3 {
margin-bottom: 20px;
text-align: center;
}
.checkout .login.on > p {
display: none;
}
.checkout .login .login-form a {
text-align: center;
display: block;
margin-top: 20px;
}
.checkout .login .login-form button {
width: 100%;
margin-top: 15px;
}
.checkout .login .login-form {
display: none;
z-index: 2001;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 400px;
height: 350px;
user-select: none;
}
.checkout .login .login-form .form-error {
display: none;
margin-top: -25px;
position: absolute;
width: 100%;
text-align: center;
font-size: 13px;
color: red;
}
.checkout .login .login-form.failed .form-error {
display: block;
}
body.pop-overlay-center.pop-overlay-login .checkout .login .login-form {
display: block;
}
body.pop-overlay-center.pop-overlay-login .pop-overlay {
background: #fff;
opacity: 0.9;
}
body.pop-overlay-center.pop-overlay-login .pop-overlay-inner.pop-center {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 500px;
height: 450px;
margin: auto;
box-shadow: 0px 17px 49px -9px rgba(0,0,0,0.3);
border: solid 1px #e4e4e4;
}
body.pop-overlay-center.pop-overlay-login .pop-overlay-inner.pop-center .close {
top: 10px;
right: 10px;
}
div .validation .login-form aside.error,
div .validation .login-form aside.help {
position: absolute;
bottom: 2px;
right: 0px;
display: none;
font-size: 13px;
font-weight: normal;
line-height: 100%;
margin: 5px 1px 0px;
}
.checkout .coupon,
.checkout .coupon-success {
justify-self: end;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.checkout .coupon-success {
white-space: normal;
}
.checkout .coupon aside.error {
display: none;
color: #ff5023;
font-weight: normal;
font-size: 13px;
}
.checkout .coupon .error.on {
display: block;
}
.checkout .coupon input#coupon_code {
margin: 0;
width: 340px;
color: #ccc;
border-color: #ddd;
padding-left: 60px;
background: #fff url(https://images.zeald.com/site/compasstrailersnew/images/basic_theme/zes4/bg-coupon.png) 10px center no-repeat;
outline: none;
}
.checkout .coupon.active input#coupon_code {
color: #999;
}
.checkout .coupon input::placeholder {
color: #ccc;
}
.checkout .coupon input#coupon_code.error {
border: solid 1px #ff5023;
font-weight: normal;
}
.checkout .coupon.active button {
color: #999;
}
.checkout .coupon button {
background: none;
color: #ccc;
font-weight: 300;
padding: 10px;
position: absolute;
right: 0;
}
.checkout .coupon button:active,
.checkout .coupon button:focus {
outline: none;
}
.checkout .coupon button:hover {
color: #ccc;
background: none;
}
.checkout .coupon.active button:hover {
color: #999;
background: #eee;
}
.checkout .coupon button.loading::before {
left: unset;
right: 15px;
margin: auto 0;
border-top-color: #555;
}
.checkout .errors {
position: relative;
display: none;
background: #ff5023;
color: #fff;
padding: 18px 20px 18px 60px;
margin: 20px 0;
}
.checkout .errors::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 18px;
margin: auto 0;
display: block;
width: 23px;
height: 30px;
background: url(https://images.zeald.com/site/compasstrailersnew/images/basic_theme/ui_sprites.svg) no-repeat 0 -790px;
}
.validation-failed .checkout .errors,
.checkout .errors.on {
display: block;
}
.checkout .errors ul {
margin-bottom: 0;
}
.checkout > form {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 30px;
}
.checkout .name,
.checkout .town {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
width: 100%;
}
.checkout .town {
grid-template-columns: 1fr 140px;
}
.checkout .address input:last-of-type,
.checkout .address input:last-of-type {
margin-top: -10px;
}
.checkout .address input.error + aside.error + input {
border: solid 1px #ff5023 !important;
}
.checkout .select-delivery-address {
display: block;
font-size: 23px;
margin: 20px 0;
}
.checkout input[type="checkbox"] {
position: relative;
width: 21px;
height: 21px;
-webkit-appearance: none;
outline: 0;
padding: 0;
margin: -3px 5px 0 0;
resize: none;
}
.checkout input[type="checkbox"]:checked:before {
content:'';
position: absolute;
color: #000;
outline: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 15px;
height: 11px;
background: url('https://images.zeald.com/site/compasstrailersnew/images//basic_theme/ui_sprites.svg') no-repeat 0 -150px;
}
.checkout .address-delivery {
display: none;
}
.checkout .address-delivery.on {
display: block;
}
.checkout .extra-info {
padding-top: 10px;
}
.checkout .extra-info textarea {
height: 150px;
}
.checkout .order {
background: #eee;
padding: 40px 20px 20px;
}
.checkout .order > div {
background: #fff;
padding: 20px;
}
.checkout .cart {
margin-bottom: 25px;
}
.checkout .cart-items .cart-row,
.checkout .cart .totals > section {
display: grid;
grid-template-columns: 1fr auto;
grid-row-gap: 7px;
padding: 20px 0;
border-bottom: solid 1px #eee;
align-items: start;
}
.checkout .cart-row .product-title {
font-size: 16px;
color: #222;
margin: 0;
}
.checkout .cart-row .quantity {
color: #999;
}
.checkout .cart-row .price,
.checkout .cart .totals aside {
font-weight: 500;
justify-self: end;
white-space: nowrap;
}
.checkout .cart-row .options {
margin: 0;
color: #999;
}
.checkout .cart .totals > section:last-child {
border-bottom: none;
}
.checkout .cart .totals h5 {
font-family: Open Sans, Sans-serif;
font-size: 20px;
font-weight: normal;
color: #222;
text-transform: capitalize;
margin: 0;
line-height: 20px;
}
.checkout .cart .totals aside {
line-height: 20px;
}
.checkout .cart .totals .subtotal aside {
color: #EE3124;
}
.checkout .cart .shipping-select {
margin-top: 5px;
}
.checkout .cart .shipping-select label {
display: block;
}
.checkout .cart .shipping-select input[type=radio],
.checkout .payment input[type=radio] {
margin-right: 10px;
}
.checkout .cart .shipping-message {
color: red;
border-top: 1px solid lightgray;
margin-top: 12px;
margin-bottom: 12px;
padding-top: 5px;
grid-column: span 2;
}
.checkout .cart .totals .total aside {
font-size: 22px;
color: #EE3124;
font-weight: 500;
}
.checkout .cart .totals .total h5 {
font-size: 22px;
}
.checkout .cart .totals .total h5 .gst-info {
font-size: 16px;
font-weight: 300;
}
.checkout .loyalty-points {
margin-bottom: 25px;
}
.loyalty-points input[type=submit] {
width: 100%;
background: #999;
border-bottom: solid 4px #777;
padding-bottom: 14px;
}
.checkout .payment .payment-option {
border-bottom: solid 1px #eee;
}
.checkout .payment .payment-option:last-child {
border-bottom: none;
}
.checkout .payment label {
color: #444444;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
.checkout .place-order-wrap {
position: relative;
margin-top: 20px;
}
.checkout .place-order-wrap.show-loading::before {
z-index: 100;
}
.checkout .place-order-wrap.show-loading {
opacity: 0.5;
}
.checkout .place-order {
width: 100%;
}
.checkout .empty-cart {
text-align: center;
margin: 100px 0;
}
.checkout .empty-cart h1 {
margin: 20px 0;
}
.checkout .empty-cart p {
display: inline-block;
max-width: 800px;
}
section.details section.address-finder {
margin: 0px 0 20px 0px;
}
ul.af_list {
box-shadow: 0 3px 6px 0px rgba(0,0,0,0.15);
margin-top: -2px;
border: solid 1px #efefef;
background: #fff;
padding: 0;
list-style: none;
}
ul.af_list li.af_item {
cursor: pointer;
padding: 9px 15px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
line-height: 20px;
border-bottom: none;
text-align: left;
}
ul.af_list li.af_item:first-of-type {
padding-top: 17px;
}
ul.af_list li.af_item:last-of-type {
padding-bottom: 17px;
}
ul.af_list li.af_item.af_cant_find {
padding-bottom: 17px;
background: #efefef;
padding-top: 17px;
text-decoration: underline;
}
ul.af_list li.af_item.af_hover {
background-color: #efefef;
color: #666;
}
ul.af_list li.af_item.af_cant_find:hover {
background-color: #e1e1e1 !important;
}
li.af_item .af_hl {
color: #000;
font-weight: 600;
}
li.af_footer {
background: #eee;
padding: 12px;
text-align: left;
}
li.af_footer span {
text-decoration: underline;
cursor: pointer;
}
li.af_empty {
display: none;
}
li.af_footer {
min-width: 350px;
}
.
.hide,
section.address-finder .search-address.hide,
.address-finder.hide,
.address-wrapper.hide {
display: none;
}
.details .country-wrap.hide {
display: none !important;
}
.address-finder .address {
margin-bottom: 10px;
}
.address-finder a {
text-decoration: underline;
color: #666;
}
@media screen and (max-width: 1100px) {
.checkout > form {
grid-template-columns: 1fr 1.5fr;
}
div .validation aside.help.error {
display: none !important;
}
}
@media screen and (max-width: 850px) {
.checkout > form {
grid-template-columns: unset;
grid-template-rows: auto auto;
}
}
.checkout .terms-conditions div.message {
display: inline-block;
}
.checkout .terms-conditions input.error + aside + div.message {
position: absolute;
display: inline-block;
top: -3px;
bottom: 0px;
left: 30px;
right: 0;
}
.checkout .terms-conditions aside.error, .checkout .terms-conditions aside.help {
display: block;
position: absolute;
top: 24px;
left: 0;
right: 0;
bottom: 0;
}
.validation .state.hide {
display: none;
}
}
.component_OrderProcess_Checkout3 {
margin: 0; margin: 0; padding: 0;  } .form table {
width: 100%;
border-spacing:0;
}
form td.felement table {
width: auto;
}
.form td {
padding:2px;
}
.form .fheading {
font-size: 1.4em;
border-top: solid 1px #ccc;
color: #333;
font-weight: bold;
padding:12px 0;
}
.form .req {
color: #444444;
font-weight: normal;
}
.felement {
vertical-align: top;
width: 80%;
}
.flabel {
vertical-align: top;
width: 20%;
}
.form .fhelp {
color: #666;
}
.felement img {
vertical-align: middle;
}
@media screen and ( max-width: 740px ) {
.form td {
display:block;
float:left;
width:100%;
}
.form input, .form textarea{
width:100%;	max-width:350px;
}
.form td table, form td.felement table { display:table;
width:100%;
}
.form td table tr{ display:table-row;
}
.form td table td{ display:table-cell;
width:auto;
}
}
.component_Misc_Form {
margin: 0; margin: 0; padding: 8px 0px;  } #c320.component_Misc_Form {
padding: 8px 0px;  } #c322.component_Misc_Form {
padding: 8px 0px;  } #c323.component_Misc_Form {
padding: 8px 0px;  } #c324.component_Misc_Form {
padding: 8px 0px;  } .component_OrderProcess_CheckoutComponents_DeliveryAddressOption {
margin: 0; margin: 0; padding: 8px 0px;  } #c321.component_OrderProcess_CheckoutComponents_DeliveryAddressOption {
padding: 8px 0px;  } .box_head {
background: #ddd;
padding: 5px;
}
.box_head h5 {
font-size: 1em;
font-weight: bold;
margin:0;
padding:0;
}
.box {
background: #eee;
}
.component_Layout_Box {
margin: 0; margin: 0; padding: 0;  } #c407.component_Layout_Box {
margin-top: 15px
;
margin-left: 0
;
margin-bottom: 15px
;
margin-right: 0;
padding: 0px;  } .plain_content {
height: 100%;
}
.component_ContentDisplay_Content {
margin: 0; margin: 0; padding: 0;  } #c295.component_ContentDisplay_Content {
padding: 8px 0;  } #c408.component_ContentDisplay_Content {
 } #c430.component_ContentDisplay_Content {
 } .component_OrderProcess_CheckoutComponents_Payment {
margin: 0; margin: 0; padding: 8px 0;  } #c287.component_OrderProcess_CheckoutComponents_Payment {
padding: 8px 0;  }