/* General Commerce Styles */ #commerce h1 { margin: 0% 0% 0.5em 0%; padding: 0.5em 0% 0% 0%; font-size: 2.25em; line-height: 1.25em; font-weight: 600; color: #333333; } #commerce h2 { margin: 0.5em 0% 0.5em 0%; padding: 0% 0% 0% 0%; font-size: 1em; line-height: 1.25em; font-weight: 600; color: #333333; } #commerce h3 { margin: 0.5em 0% 0.5em 0%; padding: 0% 0% 0% 0%; font-size: 1em; line-height: 1.25em; font-weight: 600; color: #333333; } #commerce h4 { margin: 0.5em 0% 0.5em 0%; padding: 0% 0% 0% 0%; font-size: 1em; line-height: 1.25em; font-weight: 600; color: #333333; } #commerce p { margin: 0.5em 0% 0.5em 0%; padding: 0% 0% 0% 0%; font-size: 1em; line-height: 1.25em; font-weight: 400; color: #000000; } #commerce table { margin: 0% 0% 0% 0%; width: 100%; font-size: 1em; border: 0px none; } #commerce table tr { margin: 0% 0% 0% 0%; padding: 0% 0% 0% 0%; font-size: 1em; border: 0px none; } #commerce table th { margin: 0% 0% 0% 0%; padding: 10px; font-size: 1em; border: 0px none; background-color:transparent; color:#333333; } #commerce table td { margin: 0% 0% 0% 0%; padding: 10px; font-size: 1em; border: 0px none; background-color:transparent; color:#333333; vertical-align: middle; } #commerce .button, #commerce button { min-width:0px; } #commerce #basket-summary div.button, #commerce #basket-summary .button { margin: 0.5em 0% 0.5em 0%; } #commerce table td .item_description span.discount_label { color:#EC0000; } #commerce table tr.line_container { border-bottom: 1px solid #9A9A9A; } #commerce table tr.line_container .item_description .reference { display:inline-block; margin-left: 2%; font-size: 0.8em; font-weight: 500; } #commerce table tr.line_container:last-child { border-bottom: 0px none; } #commerce table td.qty { text-align: center; } #commerce table td.price { text-align: center; } #commerce table td.price .discounted_price { display:block; text-decoration: line-through; color:#EC0000; } #commerce table td.pricetotal { text-align: center; } #commerce table td.pricetotal .discounted_price { display:block; text-decoration: line-through; color:#EC0000; } #commerce label { display: block; } #commerce input, #commerce select, #commerce textarea { margin: 0% 0% 0% 0%; padding: 0.25em 0.25em 0.25em 0.25em; width: 90%; font-size: 1em; line-height: 1.25em; font-weight: 400; color: #000000; border: 1px solid #808080; } #commerce textarea { min-height: 5em; } #commerce textarea { padding: 0.5rem; border-radius: 0; } #commerce h3.order_notes { text-transform: none; } #commerce input[type=checkbox], #commerce input[type=radio] { width: auto; } #commerce .disabled { opacity: 0.35; } #commerce #delivery-panel .disabled { opacity: 1; } /* Restore opacity for all elements, eg. edit delivery button */ #commerce #delivery-panel .disabled h3, #commerce #delivery-panel .disabled .existing_address, #commerce #delivery-panel .disabled .details { opacity: 0.35; } #commerce #delivery-panel .disabled .edit_address button { display: flex; } #commerce .button, #commerce button { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display: inline-block; } #commerce .button a { display: block; } #commerce .button a, #commerce button { padding: 5px; font-size: 1em; line-height: initial; font-weight: bold; color: #FFFFFF; border: 0px none; text-align: center; } #commerce .color-1st { background-color: #FA7D23; } #commerce .color-1st:hover { background-color: #454545; } #commerce .color-2nd { background-color: #FA7D23; } #commerce .color-2nd:hover { background-color: #454545; } #commerce .color-3rd { background-color: #FA7D23; } #commerce .color-3rd:hover { background-color: #454545; } #commerce button.update { background-color: #808080; } #commerce button.update:hover { background-color: #909090; } #commerce button.remove { background-color: #FF0000; } #commerce button.remove:hover { background-color: #FF4040; } #commerce span.icon { width: auto; font-size: 1em; display: inline; position: relative; } #commerce span.icon:after { font-style: normal; font-weight: normal; line-height: 1em; text-align: center; } #commerce span.icon.update { font-size: 0.875em; } #commerce span.icon.update:after { content: '\f021'; } #commerce span.icon.delete:after { content: '\f00d'; } #commerce hr { margin: 0% 0% 0% 0%; border-color: #9A9A9A; } /* Basket Styles */ #commerce.basket { background-color: #fafafa; } #commerce.basket h1 { font-size: 1.85rem; font-weight: 400; padding: 1.5rem 0 0.5rem; } #commerce #basket-items td.image .image_dimensions { border: none; } #commerce #basket-items { padding: 10px; width: 66%; background-color: #EFEFEF; float: left; } #commerce #basket-items #basket-count { margin: 4px 0%; width: 50%; font-size: 1.125em; float: left; } #commerce #basket-items #continue-shopping { margin: 4px 0%; width: 30%; text-align: center; float: left; } #commerce #basket-items #continue-shopping a { color: #676858; } #commerce #basket-items #continue-shopping a:hover { text-decoration: underline; } #commerce #basket-items #checkout { width: 20%; } #commerce #basket-items #empty-basket { margin: 10px 0% 0% 10px; } #commerce #basket-items #empty-basket a { font-size: 0.75em; color: #D3C199; } #commerce #basket-items #empty-basket a:hover { text-decoration: underline; } #commerce #basket-items table { margin: 0.625em 0% 0% 0%; border-bottom: 1px solid #9A9A9A; } #commerce #basket-items th { padding: 5px; font-size: 0.875em; border-bottom: 1px solid #9A9A9A; text-align: center; } #commerce #basket-items td { margin: 0% 0% 0% 0%; } #commerce #basket-items td.image { width: 15%; } #commerce #basket-items td.image .image_dimensions { border: 1px solid #9A9A9A; } #commerce #basket-items td.item { width: 40%; } #commerce #basket-items td.qty { width: 25%; } #commerce #basket-items td.price { width: 10%; } #commerce #basket-items td.pricetotal { width: 10%; } #commerce #basket-items td img { max-width: 100%; max-height: 100%; vertical-align: middle; display: inline-block; } #commerce #basket-items td input, #commerce #basket-items td select, #commerce #basket-items td textarea { margin: 0% 0% 5px 0%; width: 100%; padding: 4px; font-size: 1em; } #commerce #basket-items .item_quantity { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; } #commerce #basket-items .quantity-change { padding: 0.25em 0.25em; width: 30%; color: #FFFFFF; background-color: #808080; text-align: center; /* display: none; */ cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #commerce #basket-items .item_quantity input { margin: 0; width: 40%; min-width: 40px; max-width: 50px; text-align: center; margin: 0 0 5px; } #commerce #basket-items .item_quantity .update { margin: 0 0 5px; } #commerce #basket-items table.recipient_assign { margin: 10px 0% 10px 0%; border: 0px none; } #commerce #basket-items table.recipient_assign .recipient { border-width: 10px 0px 30px 0px; border-style: solid; border-color: transparent; } #commerce #basket-items table.recipient_assign td { padding: 0% 0% 0% 0%; font-size: 0.9375em; vertical-align: baseline; } #commerce #basket-items table.recipient_assign td input, #commerce #basket-items table.recipient_assign td select, #commerce #basket-items table.recipient_assign td textarea { font-size: 1.07em; } #commerce #basket-items table.recipient_assign td.recipient_right { text-align: right; } #commerce .save-buttons button { margin: 0.5em 0 0.5em 0.5em; } #commerce .save-buttons button:first-child { margin-left: 0; } #commerce #basket-summary { padding: 10px; width: 27%; background-color: #EFEFEF; float: right; } #commerce #basket-summary #heading { margin: 4px 0%; font-size: 1.125em; } #commerce #basket-summary table { margin: 1em 0% 0% 0%; } #commerce #basket-summary table th { padding: 4px 10px; font-size: 0.875em; border-bottom: 1px solid #9A9A9A; text-align: left; vertical-align: middle; } #commerce #basket-summary table td { padding: 4px 10px; font-size: 1.125em; border-bottom: 1px solid #9A9A9A; text-align: right; vertical-align: middle; } #commerce #basket-summary p { padding: 5px; font-size: 0.85em; } #commerce #basket-summary p strong { font-size: 1em; display: inline-block; margin-bottom: 0.25rem; } #commerce .basket-footer-buttons { margin-top:1.5em; } #commerce .empty_basket { margin-top:2em; font-size:1em; } /* Checkout Styles */ #commerce .checkout-left { width: 100%; float: left; } #commerce .checkout-right { width: 100%; float: right; } /* Checkout Basket Styles */ #commerce.checkout { padding: 0 10px; } #commerce.checkout h1 { text-align: center; text-transform: uppercase; color: #595959; font-size: 1.85rem; font-weight: 400; padding: 1.5rem 0 0.5rem; } #commerce #checkout-details { background-color: #FFF; padding: 1.5rem 1rem; margin-top: 0.75rem; margin-bottom: 2.5rem; border: 1px solid #e8e8e8; border-radius: 6px; } #commerce #checkout-details table { margin: 0% 0% 2em 0%; border-bottom: 0px none; } #commerce #checkout-details th { padding: 5px; font-size: 0.875em; border-bottom: 1px solid #9A9A9A; text-align: center; } #commerce #checkout-details td { width: 20%; vertical-align: middle; } #commerce #checkout-details td.adjusment_label { width: 100%; } #commerce #checkout-details td.product_label { width: 100%; } #commerce #checkout-details td.image { width: 15%; } #commerce #checkout-details td.image .image-container { width: 60%; padding-top: 60%; height: 0; position: relative; } #commerce #checkout-details td.image .image_container .image_dimensions { border: 1px solid #D0D0D0; background-color: #FFF; } #commerce #checkout-details td.image .image-container .thumb { margin: 0em auto 0em auto; padding: 1px 1px 1px 1px; left: 0; right: 0; top: 0; bottom: 0; background-color: #FFFFFF; border: 1px solid #9A9A9A; text-align: center; vertical-align: middle; position: absolute; display: inline-block; } #commerce #checkout-details td.image .image-container .thumb:before { width: 0; height: 100%; content: ""; vertical-align: middle; display: inline-block; } #commerce #checkout-details td.image .image-container .thumb img { white-space: normal; display: inline; } #commerce #checkout-details td img { max-width: 100%; max-height: 100%; vertical-align: middle; display: inline-block; } #commerce #checkout-details td.item { width: 55%; } #commerce #checkout-details td.item .item_description { width: 100%; } #commerce #checkout-details td.item .item_description .item_description_text { width: 100%; } #commerce #checkout-details td.item .item_description .item_description_text strong { font-weight: 600; } #commerce #checkout-details td.price { width: 15%; } #commerce #checkout-details td.qty { width: 15%; } #commerce #checkout-details td.pricetotal { width: 15%; } #commerce #checkout-details tr:last-child { border-bottom: 0%; } #commerce #checkout-details td input { margin: 0% 0% 0% 0%; padding: 4px; width: 35px; font-size: 0.875em; text-align: center; } #commerce #checkout-details table.recipient_assign tr td input.fullwidth { width: 100px; text-align: left; } #commerce #checkout-details tr.line_container { position: relative; min-height: 0px; border-bottom: 1px solid #e8e8e8; padding: 0.25rem 0; } #commerce #checkout-details tr.line_container:last-child { border-bottom: 1px solid #e8e8e8; } #commerce #checkout-details table tr.participant_row { max-width: 400px; flex-wrap: nowrap; display: inline-flex; align-items: end; width: 100%; } #commerce #checkout-details table.participant_assign { margin: 0.5rem 0 0; } #commerce #checkout-details table.participant_assign td { padding-left:0; width:100%; } #commerce #checkout-details table.participant_assign td.qty label { display: flex; align-items: center; } #commerce #checkout-details table.participant_assign td.qty label span.form-label { display: inline-block; font-size: 0.875rem; margin-right: 0.5rem; font-weight: 600;} #commerce #checkout-details table.participant_assign .participant_reference { margin-right:1em; font-size:0.9em; } #commerce #checkout-details table.participant_assign select { margin-right:1em; max-width:200px; font-size:0.9em; padding: 0.5em; } #commerce #checkout-details table.participant_assign a { font-size:0.9em; } #commerce #checkout-details table.participant_assign button.participant-remove { background: transparent; padding: 0.25rem; color: #e53e3e; } #commerce #checkout-details table.participant_assign .participant-error { color: #e53e3e; font-size: 0.75rem; } #commerce #checkout-details table.participant_assign tr.participant_row > td.qty { order: 0; margin: 0; display: flex; justify-content: center; width: 25%; margin-left: 0rem; min-height: 37.38px; align-items: center; padding-bottom: 5px; } #commerce #checkout-details table.participant_assign tr.participant_row > td:nth-child(3) { max-width: 35px; padding-bottom: 5px; } #commerce #checkout-details table.participant_assign tr.participant_row > td:nth-child(1) { display: flex; width: 90%; align-items: center; flex-wrap: wrap; padding-bottom: 0; } #commerce #checkout-details table.participant_assign tr.participant_row > td:nth-child(1) .participant_reference { width: 100%; } #commerce #checkout-details table.participant_assign { margin: 0; } #commerce #checkout-details button.add-participant { margin-top: 0.5rem; padding-left: 0; font-size: 0.75rem; color: #4299e1; font-weight: 400; background: transparent; border: 0; } #commerce #checkout-details h3 { margin-top: 0.25em; } #commerce #checkout-details textarea { width: 100%; } #commerce #checkout-details td.noitems { width: 100%; } /* Checkout Addresses Styles */ #commerce .existing_address { width: 100%; float: left; } #commerce .existing_address select { width: 100%; } #commerce .add_address { margin: 0% 0% 0% 5%; width: 30%; float: left; } #commerce .add_address p { margin: 0% 0% 0% 0%; font-size: 1em; } #commerce .edit_address { margin: 0% 0% 0% 5%; width: 30%; float: left; } #commerce .edit_address p { margin: 0% 0% 0% 0%; font-size: 1em; } #commerce .add_address_button, #commerce .edit_address_button { padding: 5px 0.5em; font-size: 0.75em; } #commerce .add_address_button .mobile-text { display: none; } #commerce .add_address_button.delivery { margin: 0%; } #commerce .edit_address_button.delivery { margin: 0%; } #commerce .add_address_button.billing { margin: 0%; } /* Guest Checkout Styles */ #commerce .guest-checkout-panel { margin: 0% 0% 2em 0%; padding: 0; background-color: transparent ; border: none; border-radius: 6px; } #commerce .guest-checkout-panel h3 { font-size: 1.5em; font-weight: 800; text-transform: none; margin: 0% 0% 1em 0%; } #commerce .guest-checkout-panel p { margin: 1.5em 0% 0.5em 0%; } #commerce .guest-checkout-panel p.password-reset { font-size: 0.813em; } #commerce .guest-checkout-panel button { margin: 2em 0% 0% 0%; padding: 0.5em 2em; font-weight: 400; } #commerce .guest-checkout-panel label span.field_label { width: 30%; display: inline-block; vertical-align: middle; } #commerce .guest-checkout-panel label select { padding: 0.313em 0.5em; width: 62%; display: inline-block; vertical-align: middle; border: 1px solid #BBBBBB; } #commerce .guest-checkout-panel label input { padding: 0.438em 0.5em; width: 62%; display: inline-block; vertical-align: middle; border: 1px solid #BBBBBB; } #commerce .guest-checkout-panel label input[type=checkbox] { width: auto; } #commerce .guest-checkout-panel label input[type=radio] { width: auto; } #commerce .guest-checkout-panel #total-to-pay { border: 0px; } /* Guest Checkout Logged In Styles */ #commerce .guest-checkout-panel div.logged-in { text-align: center; } /* Guest Checkout Login Styles */ #commerce .guest-checkout-panel .login { width: 48%; display: inline-block; text-align: left; } #commerce .guest-checkout-panel .login label { margin: 0%; padding: 0.5em 0.25em; width: 100%; display: block; text-align: left; float: none; } #commerce .guest-checkout-panel .login.hidden { display: none; } /* Guest Checkout Password Reset Styles */ #commerce .guest-checkout-panel .reset-password-box { width: 48%; display: inline-block; text-align: left; } #commerce .guest-checkout-panel .reset-password-box.hidden { display: none; } #commerce .guest-checkout-panel .reset-password-box-complete { width: 48%; display: inline-block; text-align: left; } #commerce .guest-checkout-panel .reset-password-box-complete.hidden { display: none; } /* Guest Checkout Register Styles */ #commerce .guest-checkout-panel .register { padding: 2.5em 0% 0% 0%; width: 48%; display: inline-block; vertical-align: top; text-align: center; } #commerce .guest-checkout-panel .register button { margin: 1.5em auto; display: block; } #commerce .guest-checkout-panel .register.hidden { display: none; } /* Guest Checkout Your Details Styles */ #commerce .guest-checkout-panel #account-registration { text-align: center; } #commerce .guest-checkout-panel #account-registration h4 { margin: 1.5em 0% 0em 0%; font-size: 1.125em; font-weight: 700; } #commerce .guest-checkout-panel #account-registration p { margin: 1.5em 0% 2em 0%; } #commerce .guest-checkout-panel #account-registration label { margin: 0% 0% 0% 2%; padding: 0.5em 0.25em; width: 49%; display: block; text-align: left; float: left; } #commerce .guest-checkout-panel #account-registration label:nth-of-type(2n+1) { margin: 0%; clear: both; } #commerce .guest-checkout-panel #account-registration label.full_width { margin: 1em 0%; padding: 0.5em 0.25em; width: 100%; } #commerce .guest-checkout-panel #account-registration label.signup { text-align:center; } #commerce .guest-checkout-panel #account-registration label.registration_account_password { margin: 2em auto 0% auto; float: none; clear: both; } #commerce .guest-checkout-panel #account-registration label.registration_account_password.hidden { display: none; } #commerce .guest-checkout-panel #account-registration button { margin: 0% 0% 0% 1em; padding: 0.5em 1.5em; } #commerce .guest-checkout-panel #account-registration button.active { background-color: #888888; } #commerce .guest-checkout-panel #account-registration button.registration-proceed { margin: 4em 0% 0% 0%; } #commerce .guest-checkout-panel #account-registration button.registration-proceed.hidden { display: none; } #commerce .guest-checkout-panel #account-registration #create_password_no { margin: 0%; } #commerce .guest-checkout-panel #account-registration label.address-lookup { width: 100%; } #commerce .guest-checkout-panel #account-registration label.address-lookup span.field_label { padding: 0.625em 0; width: 14.7%; vertical-align: top; } #commerce .guest-checkout-panel #account-registration label.address-lookup input { width: 35.5%; } #commerce .guest-checkout-panel #postcode_lookup { width: 85.3%; display: inline-block; } #commerce .guest-checkout-panel #account-registration label.address-lookup + label { margin-left: 0; } #commerce .guest-checkout-panel #account-registration label.address-lookup p { margin: 0.5em 0; } #commerce .guest-checkout-panel #postcode_lookup button[name='lookup-error'] { margin: 0; color: inherit; padding: 0; background-color: transparent; } #commerce .guest-checkout-panel #postcode_lookup select { margin: 0.5em 0 0; width: 35.5%; display: block; } #commerce #getaddress_error_message { font-size: 0.875em; color: #E10000; } /* Guest Checkout Styles */ #commerce #guest-checkout { margin: 0%; padding: 0%; width: 50%; min-height: 115px; display: inline-block; vertical-align: top; } #commerce #guest-checkout h3 { font-size: 1em; font-weight: 600; } #commerce #guest-checkout label { margin: 1em 0em; } #commerce #guest-checkout input[type=text], #commerce #guest-checkout input[type=password] { margin-top: 5px; } #commerce #guest-checkout .login_email { width: 48%; float: left; } #commerce #guest-checkout .login_password { margin-top: 87px; width: 48%; float: right; } #commerce #guest-checkout .create_password { margin-top: 87px; width: 48%; float: right; } #commerce .guest-account { margin: 0%; padding: 0%; width: 50%; min-height: 115px; display: inline-block; vertical-align: top; } #commerce .guest-account.hidden { display:none; } #commerce .guest-account h3 { font-size: 1em; font-weight: 600; } #commerce .guest-account label { margin: 1em 0em; clear: both; } #commerce .guest-account .field_label { margin-top: 5px; padding: 6px 0 7px 0; width: 24%; text-align: left; float: left; } #commerce .guest-account input[type=text], #commerce .guest-account input[type=password], #commerce .guest-account select { margin-top: 5px; margin-left: 6%; width: 70%; float: right; } #commerce .guest-account #getaddress_button { margin: 8px 0 0 50px; font-size: 0.8em; } #commerce .guest-account #getaddress_error_message { margin-left: 282px; font-weight: bold; } #commerce #delivery-panel { margin: 0; padding: 30px 0px 20px 0px; width: 100%; min-height: 165px; border: none; background-color: transparent; float: left; } #commerce #delivery-panel .disabled button { display: none; } #commerce #delivery-panel .disabled .edit_address button { display: flex; opacity:1; } #commerce #delivery-address { float: left; padding: 0; background-color: transparent; display: flex; flex-wrap: wrap; width: calc(50% - 1rem); margin-right: 1rem; } #commerce #delivery-address.hidden { display: none; } #commerce #delivery-address .details p { font-size: 0.875em; } #commerce #delivery-address h3 { font-weight: 600; } #commerce #delivery-address ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } #commerce #delivery-address ul li { cursor: pointer; width: 100%; order: 1; background-color: #FFF; border: 1px solid #e8e8e8; display: flex; padding: 1rem; border-radius: 6px; } #commerce #delivery-address ul li.selected { order: 0; } #commerce #delivery-address ul li .delivery_content { width: calc(99% - 25px); } #commerce #delivery-address ul li .delivery_content h4 { font-size: 1.125rem; margin: 0; color: #595959; } #commerce #delivery-address ul li .delivery_content p { font-size: 1.125rem; margin: 0.5rem 0 0; color: #595959; } #commerce #delivery-address ul li span { width: 25px; display: flex; justify-content: center; font-size: 1.5rem; color: #595959; } #commerce #delivery-address .edit_address { width: 50%; display: flex; margin: 0; } #commerce #delivery-address .edit_address button { margin: 0; display: flex; align-items: center; padding: 0.5rem; background-color: transparent; color: #595959; font-size: 1.125rem; } #commerce #delivery-address .edit_address button span { margin-right: 1rem; font-size: 1.5rem; } #commerce #delivery-address .add_address { width: 50%; display: flex; justify-content: right; margin: 0; } #commerce #delivery-address .add_address button { margin: 0; display: flex; align-items: center; padding: 0.5rem; background-color: transparent; color: #595959; font-size: 1.125rem; justify-content: right; } #commerce #delivery-address .add_address button span { margin-right: 1rem; font-size: 1.5rem; } #commerce #delivery-address .add_address button span.tablet-element { margin-right: 0; font-size: 1.25rem; margin-left: 0.35rem; } #commerce #delivery-address.disabled .edit_address, #commerce #delivery-address.disabled .add_address { opacity: 0.35; } #commerce #delivery-options { padding-left: 3%; float: left; border-top: 0; padding: 0; width: calc(50% - 1rem); margin-left: 1rem; } #commerce #delivery-options h3 { font-weight: 600; } #commerce #delivery-options table { border-bottom: 0px none; } #commerce #delivery-options td { padding: 5px 0%; vertical-align: middle; } #commerce #delivery-options .details { padding: 0; } #commerce #delivery-options .details p { font-size: 0.875em; } #commerce #delivery-options .details label { display: flex; font-size: 1.125rem; margin: 0 0 0.5rem; padding: 0.5rem 0.25rem; border: 1px solid #e8e8e8; background-color: #FFF; border-radius: 6px; } #commerce #delivery-options .details .delopt_container:last-of-type label { margin-bottom: 0; } #commerce #delivery-options .details strong { font-weight: 600; font-size: 1rem; } #commerce #delivery-options label { margin: 1em 0em; } #commerce #delivery-options input { margin-right: 1em; margin-left: 0.5rem; } #commerce #delivery-options input[type=text], #commerce #delivery-options input[type=password] { margin-top: 5px; } #commerce #delivery-options strong { font-size: 0.875em; line-height: 1.4375em; font-weight: bold; } #commerce #delivery-options small { margin-left: 1em; font-size: 0.75em; line-height: 1.5em; color: #9A9A9A; } #commerce #delivery-options label.collection_name { } #commerce #delivery-options label.collection_name.hidden { display: none; } #commerce #delivery-options label.error { color: #BBBBBB !important; background-color: transparent !important; } #commerce #delivery-options label.error small { font-style: italic; color: #000000; } #commerce #delivery-options .delivery-options-time { margin-left: 1.8125em; background-color: white; padding: 0.9rem 1rem; display: inline-block; } #commerce #delivery-options .delivery-options-time select { width: auto; } #commerce #delivery-options .delivery-options-title { font-size: 0.9rem; color: grey; margin-bottom:0.4rem; font-weight: 600; } #commerce #delivery-options .slot-picker { display: inline-flex; } #commerce #delivery-options .time-picker { display: inline-block; margin-left: 1rem; } #commerce #delivery-options .slot-label { cursor: pointer; padding: 0.5rem; padding-left: 0; font-size: 1.2rem; margin-top: 0.125rem; } #commerce #delivery-options button[name=show_slotpicker] { background-color: transparent; padding: 0.5rem; margin: 0 0 0 -20px; color: grey; } #commerce #delivery-options .deliver-slot-picker { visibility: hidden; height: 0; width: 0; user-select: none; position: relative; top: 25px; left: -108px; } #commerce #delivery-options .fa-calendar-alt { font-size:1.5rem; } #commerce #billing-address { margin-top: 0em; width: 100%; min-height: 115px; float: left; border: none; padding: 0; background-color: transparent; display: flex; flex-wrap: wrap; margin-bottom: 1.5rem; } #commerce #billing-panel { border: none; background-color: transparent; } #commerce #billing-address > * { width: 100%; } #commerce #billing-address h3 { font-weight: 600; } #commerce #billing-address .hidden { display: none; } #commerce #billing-address .details p { font-size: 0.875em; } #commerce #billing-address label { margin: 1em 0em; clear: both; } #commerce #billing-address .field_label { margin-top: 5px; padding: 6px 0 7px 0; width: 24%; text-align: right; float: left; } #commerce #billing-address input[type=text], #commerce #billing-address input[type=password], #commerce #billing-address select { margin-top: 5px; /* margin-right: 1em; width: 70%; - see version update #1926 */ float: right; } #commerce #billing-address .billing-options table { border-bottom: 0px none; } #commerce #billing-address .billing-options td { padding: 5px 0%; vertical-align: middle; } #commerce #billing-address .billing-options .details p { font-size: 0.875em; } #commerce #billing-address .billing-options strong { font-size: 0.875em; line-height: 1.4375em; margin-left:0.5em; font-weight: bold; } #commerce #billing-address ul { display: flex; flex-wrap: wrap; list-style-type: none; margin: 0; padding: 0; } #commerce #billing-address ul li { cursor: pointer; width: 100%; order: 2; background-color: #FFF; border: 1px solid #e8e8e8; display: flex; justify-content: space-between; padding: 1rem; border-radius: 6px; } #commerce #billing-address ul li.selected { order: 1; } #commerce #billing-address ul li.same_as_delivery { order: 3; } #commerce #billing-address ul li.same_as_delivery.selected { display: flex; order: 0; } #commerce #billing-address ul.no_delivery li.same { display: none; } #commerce #billing-address ul li.same { order: 0; } #commerce #billing-address ul li .delivery_content { width: calc(98% - 25px); } #commerce #billing-address ul li .delivery_content h4 { font-size: 1.125rem; margin: 0; color: #595959; } #commerce #billing-address ul li .delivery_content p { font-size: 1.125rem; margin: 0.5rem 0 0; color: #595959; } #commerce #billing-address ul li span { width: 25px; display: flex; justify-content: center; font-size: 1.5rem; color: #595959; } #commerce #billing-address .edit_address { width: 50%; display: flex; margin: 0; } #commerce #billing-address .edit_address button { margin: 0; display: flex; align-items: center; padding: 0.5rem; background-color: transparent; color: #595959; font-size: 1.125rem; } #commerce #billing-address .edit_address button span { margin-right: 1rem; font-size: 1.5rem; } #commerce #billing-address .add_address { width: 50%; display: flex; justify-content: right; margin: 0; } #commerce #billing-address .add_address button { margin: 0; display: flex; align-items: center; justify-content: right; padding: 0.5rem; background-color: transparent; color: #595959; font-size: 1.125rem; } #commerce #billing-address .add_address button span { margin-right: 1rem; font-size: 1.5rem; } #commerce #billing-address .add_address button span.tablet-element { margin-right: 0; font-size: 1.25rem; margin-left: 0.35rem; } #commerce #billing-address .same_as_delivery { display: none; } #commerce #billing-address ul.no_delivery .same_as_delivery { display: flex; } #commerce ul li.address span.icon::before { content: "\f111"; color: #595959; font-family: 'Font Awesome 5 Pro'; font-size: 1.5rem; font-weight: 100; display: flex; justify-content: center; } #commerce ul li.address.selected span.icon::before { content: "\f058"; font-weight: 800; } #commerce ul li.same span.icon::before { content: "\f111"; color: #595959; font-family: 'Font Awesome 5 Pro'; font-size: 1.5rem; font-weight: 100; display: flex; justify-content: center; } #commerce ul li.same.selected span.icon::before { content: "\f058"; font-weight: 800; } /* Checkout Summary */ #commerce #discounts-panel { padding: 10px; width: 26%; float: right; } #commerce #discounts-panel .left { margin-right: 20px; } #commerce #discounts-panel input { } #commerce #discounts-panel .button { margin-top: -2px; font-size: 0.75em; float: right; } #commerce .gateway_panel { margin: 0 0 2% 2%; width: 32%; vertical-align: top; display: inline-block; } #commerce .gateway_panel:nth-of-type(3n+1) { margin-left: 0; } #commerce .gateway_panel button { margin-bottom:0.5em; } #commerce .payment-gateway-logo img.gateway_image { margin-bottom:0.5em; } #commerce #payment_po_form input { max-width:300px; } #commerce #total-to-pay { margin: 0% 0% 0% 0%; padding: 10px 0px 20px 0px; border-top: 1px solid #9A9A9A; background-color: transparent; border: none; } #commerce #total-to-pay h3 { font-weight: 600; font-size: 1.25em; text-transform: none; } #commerce #total-to-pay table { border: none; } #commerce #total-to-pay .promocode { float: left; padding: 0; background-color: transparent; width: calc(50% - 1rem); margin-right: 1rem; } #commerce #total-to-pay .promocode button { margin: 0%; } #commerce #total-to-pay .promocode input { margin: 0% 0% 5px 0%; padding: 6px 10px; width: 32%; float: left; display: block; } #commerce #total-to-pay .promocode .left { margin-left: 20px; width: 49%; max-width: 150px; float: left; } #commerce #total-to-pay .promocode .right { width: 49%; max-width: 150px; float: right; } #commerce #total-to-pay .promocode .icon::before { color: #595959; font-family: 'Font Awesome 5 Pro'; font-size: 1.5rem; font-weight: 100; display: flex; justify-content: center; } #commerce #total-to-pay .promocode .icon.plus::before { content: "\f055"; font-weight: 800; } #commerce #total-to-pay .promocode .icon.minus::before { content: "\f056"; font-weight: 800; } #commerce #total-to-pay .promocode .promocode_launch { display: flex; cursor: pointer; align-items: center; padding: 0 0.5rem; } #commerce #total-to-pay .promocode .promocode_launch p { margin: 0 0 0 0.5rem; color: #595959; } #commerce #total-to-pay .promocode .show_promocode { padding: 0; background-color: transparent; } #commerce #total-to-pay .promocode .promocode_input { padding: 1rem 0 0; } #commerce #total-to-pay .promocode .promocode_input .redeem_promocode { padding: 0.5rem; margin: 0.75em 0 0 0; } #commerce #total-to-pay .promocode .promocode_input input { border: 1px solid #e8e8e8; } #commerce #total-to-pay .promocode input { width: 100%; float: none; } #commerce #total-to-pay .promocode button.left { margin: 0.75em 0% 0% 0%; width: 100%; max-width: 100%; float: none; text-align: center; } #commerce #total-to-pay .rewardpoints { margin-top: 10px; padding-right: 3%; width: 50%; float: left; clear: left; } #commerce #total-to-pay .rewardpoints input { margin: 0% 0% 5px 0%; padding: 6px 10px; width: 32%; float: left; display: block; } #commerce #total-to-pay .rewardpoints .left { margin-left: 20px; width: 49%; max-width: 150px; float: left; margin-top: 0px; padding: 0.375em 1em; } #commerce #total-to-pay .rewardpoints .right { width: 49%; float: right; } #commerce #total-to-pay .summary { float: right; margin-top: 0; padding: 0; border: none; width: calc(50% - 1rem); } #commerce #terms { padding: 20px 0px; text-align: left; } #commerce #terms div.terms-group label { display: flex; width: 100%; align-items: start; margin-left: 0; padding: 0.5rem; border: 1px solid #e8e8e8; border-radius: 6px; background-color: #FFF; } #commerce #terms div.terms-group label span { margin-left: 0.5rem; } #commerce #terms div.terms-group input[type=checkbox] { margin-left: 0.25rem; margin-top: 0.3rem; } #commerce #terms .terms-group { padding: 0; margin-bottom: 0.5rem; } #commerce #terms .terms-group:last-of-type { margin-bottom: 0; } #commerce .cta-buttons button { max-width: 800px; width: 100%; } #commerce .hear-about-us { margin-top: 20px; } #commerce table#invoice { background-color:#F3F3F3; } #commerce table#invoice th { background-color:#ADADAD; color:#333333; } .checkout_proceed_placeholder { position: absolute; } .checkout_proceed { /* display: none; */ } #commerce table.checkout_proceed { border-collapse: separate; } #commerce table.checkout_proceed h4 { margin: 0; font-size: 1.25rem; color: #595959; } #commerce table.checkout_proceed tr td { background-color: #FFF; } #commerce table.checkout_proceed tr td:first-of-type { padding: 5px 5px 5px 20px; border-left: 1px solid #e8e8e8; } #commerce table.checkout_proceed tr td:last-of-type { text-align: right; padding: 5px 20px 5px 5px; border-right: 1px solid #e8e8e8; } #commerce table.checkout_proceed tr:first-of-type td { padding-top: 20px; border-top: 1px solid #e8e8e8; padding-bottom: 20px; } #commerce table.checkout_proceed tr:last-of-type td { padding-bottom: 20px; border-bottom: 1px solid #e8e8e8; } #commerce table.checkout_proceed tr.total_cost { font-size: 1.25rem; } #commerce table.checkout_proceed tr:first-of-type td:first-of-type { border-top-left-radius: 6px; } #commerce table.checkout_proceed tr:first-of-type td:last-of-type { border-top-right-radius: 6px; } #commerce table.checkout_proceed tr:last-of-type td:first-of-type { border-bottom-left-radius: 6px; } #commerce table.checkout_proceed tr:last-of-type td:last-of-type { border-bottom-right-radius: 6px; } .cta-buttons { width: 100%; padding: 0% 0% 0% 10px; float: left; } .cta-buttons.checkout_proceed { padding: 0; } .cta-buttons .checkout { max-width: 310px; } #commerce .cta-buttons .checkout-payinfull { color: #2C292C; background-color: #FDCB24; } #commerce p.booking_btn_text { font-size:0.85em !important; width:100%; text-align:center; } #terms div.terms-group { padding: 0.25em 0; } #terms div.terms-group:after { clear: both; content: ''; display: table; } #terms div.terms-group label { display: block; float: left; margin-left: 18px; } #terms div.terms-group input[type=checkbox] { margin-left: -18px; width: 18px; } /* Checkout Introduction */ #commerce .checkout_intro_message { margin-top: 0.5rem; } #commerce .checkout_intro_message p { font-size: 0.875rem; text-align: center; margin: 0; } #commerce .checkout_intro_message .button { padding: 0.35rem 0.75rem; margin-left: 0.5rem; } /* Commerce confirmation page styles */ #commerce.confirm_payment .heading { display:inline-block; width:80%; } #commerce.confirm_payment .print { display:inline-block; width:20%; text-align:right; } #commerce.confirm_payment .print a { font-size:1.6em; } /* Popup Styles */ .popup-panel { max-width: 550px; color: #676858; background-color: #FFFFFF; border-radius: 10px 10px 10px 10px; } .popup-panel label { margin: 0.5em 0% 0.5em 0%; font-size: 1em; display: block; } .popup-panel input { padding: 0.25em 0.25em 0.25em 0.25em; width: 90%; font-size: 1em; line-height: 1.25em; } .popup-panel input[type=checkbox], .popup-panel input[type=radio] { width: auto; } .popup-panel textarea { padding: 0.25em 0.25em 0.25em 0.25em; width: 90%; font-size: 1em; line-height: 1.25em; } .popup-panel select { padding: 0.25em 0.25em 0.25em 0.25em; width: 90%; font-size: 1em; line-height: 1.25em; } .popup-panel .red-star { color: #FF0000; } .popup-panel .button-container { display: -webkit-box; display: -ms-flexbox; display: flex; } .popup-panel .button-container button + button { margin-left: 1rem; } .popup-panel button { padding: 5px; width: 45%; color: #FFFFFF; background-color: #758918; border: 0px none; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .popup-panel.form button { float: right; } .popup-panel button:hover { background-color: #797979; } .popup-panel button.close { color: #6E6E6E; background-color: #D4D4D4; } .popup-panel.form button.close { float: left; } .popup-panel button.close:hover { background-color: #B6B6B6; } .popup-panel.form ul { list-style: none; margin: 0; padding: 0; } .popup-panel.form.checkout_participants div.clear { line-height: 0; } .popup-panel.form.checkout_address { max-height: 80%; max-width: 600px; padding: 2rem; } .popup-panel.form.checkout_address .address_fields { margin-top: 1rem } .popup-panel.checkout_address h3 { margin-top: 0; } .popup-panel.checkout_address span.close { display: flex; } .popup-panel.checkout_address input, .popup-panel.checkout_address select { width: calc(100% - 15px); } .popup-panel.checkout_address .button-container { width: calc(100% - 15px); margin: 1.25rem 0 0; } .popup-panel.checkout_address button { width: 50%; } div.popup-background.full .popup-panel { padding: 1.25em; } div.popup-background.full .popup-panel.alert .popup-buttons button.ok { max-width: 150px; } div.popup-panel.alert p { margin: 0 0 1em 0; } .popup-panel.form.checkout_participants { max-height: 80%; max-width: 600px; padding: 2rem; } .popup-panel.form.checkout_participants .checkbox label { width: 80%; vertical-align: middle; display: inline-block; } .popup-panel.form.checkout_participants .checkbox input { width: 10%; } .popup-panel.participant_search .guest-list p { margin: 0.5625em 0; } .popup-panel.participant_search .guest-list img { margin: 0.625em 0 0.5625em; } #ifmobile { display: none; } div.popup-panel.alert.commerce_alert li { list-style: disc; } #commerce #participant_popup { padding: 10px 15px; max-width: 580px; left: 50%; top: 50%; background-color: #CCCCCC; display: none; position: fixed; } #commerce #participant_popup .left { width: 46%; float: left; } #commerce #participant_popup .right { width: 46%; float: right; } #commerce #participant_popup li { list-style-type: none; } #commerce #participant_popup label { font-weight: bold; } #commerce #participant_popup input { width: 100%; display: block; } #commerce #participant_popup textarea { width: 100%; display: block; } #commerce #participant_popup .button { margin-top: 1em; } #commerce .payment_selection { margin: 20px auto 0; width: 100%; max-width: 400px; } #commerce .payment_selection .field { margin: 15px 0; } #commerce .payment_selection label { width: 80%; display: inline-block; } #commerce .payment_selection .help { width: 20%; font-size: 0.6875em; text-align: right; display: inline-block; } #commerce .payment_selection input, #commerce .payment_selection select { margin-top: 3px; width: 100%; } #commerce .payment_selection .card_date { width: 50%; } #commerce .payment_selection .card_date select { display: inline-block; } #commerce .payment_selection .card_date .month { width: 39%; } #commerce .payment_selection .card_date .year { margin-left: 1%; width: 60%; } #commerce .payment_selection button { margin-top: 1.25em; } #commerce.payment_options { padding-top: 10px; } /* 1200px Resolution Specific Behaviour */ @media only screen and (min-width: 0px) and (max-width: 1200px) { /* Basket Styles */ #commerce #basket-items td.item { width: 30%; } #commerce #basket-items td.qty { width: 35%; } } /* 950px Resolution Specific Behaviour */ @media only screen and (min-width: 0px) and (max-width: 950px) { /* Checkout Styles */ #commerce #checkout-details table td.image .image-container { width: 75%; padding-top: 75%; } } /* 800px Resolution Specific Behaviour */ @media only screen and (min-width: 0px) and (max-width: 800px) { #commerce #basket-items .quantity-change.mobile-element { display:inline-block !important; } /* Button Styles */ #commerce button.remove { padding: 0.625em 0; font-size: 0.75em; font-weight: 400; color: #808080; background-color: transparent; } #commerce button.remove:hover { background-color: transparent; } /* Basket Styles */ #commerce.basket h1 { text-align: center; text-transform: uppercase; color: #595959; } #commerce #basket-items { width: 100%; float: none; } #commerce #basket-items #basket-count { width: auto; font-size: 1em; float: none; display: none; } #commerce #basket-items #continue-shopping { width: 100%; font-size: 1em; display: none; } #commerce #basket-items #checkout { margin: 0.25em 0% 0% 0%; width: 100%; font-size: 1em; display: none; } #commerce #basket-items table { border-bottom: 0; } #commerce #basket-items tr.basket_headings { display: none; } #commerce #basket-items th { display: none; } #commerce #basket-items tr { clear: both; } #commerce #basket-items td { padding: 20px 10px; display: block; } #commerce #basket-items td.noitems { padding: 0% 0% 0% 0%; width: 100%; float: left; } #commerce #basket-items td.image { padding-left: 10px; padding-bottom: 10px; width: 35%; height: calc(100% - 70px); float: left; position: absolute; left: 25px; max-height: none; } #commerce #basket-items td.image .image_dimensions { max-height: 120px; border: none; } #commerce #basket-items td.item { display: flex; flex-wrap: wrap; flex-direction: column; align-items: end; justify-content: right; order:2; padding-right: 0; padding-bottom: 0; width: 60%; float: right; } #commerce #basket-items td.qty { margin-left: 30%; padding-top: 10px; width: 40%; text-align: left; float: left; } #commerce #basket-items td.price { order: 5; display: none; } #commerce #basket-items td.pricetotal { color: #595959; order: 3; width: 60%; text-align: left; padding: 10px; padding-top: 10px; padding-right: 0; font-size: 0.875em; float: right; } #commerce #basket-items td.options { order: 6; } #commerce #basket-items td.line-qty { width: 100%; margin: 1rem; padding: 1rem 0 0; border-top: 1px solid #e8e8e8; z-index: 1; text-align: left; order: 4; } #commerce #basket-items .item_description { overflow: hidden; color: #595959; padding: 0.25rem 0 0; width: 100%; } #commerce #basket-items .item_description strong { font-weight: 600; } #commerce #basket-items .image button.remove { margin-top: 20px; } #commerce #basket-items .item button.remove { width: 10%; text-align: right; float: none; margin-left: 0; margin-right: 1rem; font-size: 0; line-height: 2rem; position: relative; float: right; display: none; } #commerce #basket-items td.item button.remove::before { content: "\f2ed"; font-family: 'Font Awesome 5 Pro'; font-size: 1.5rem; color: #ec0000d5; display: flex; justify-content: right; position: absolute; right: 0; } #commerce #basket-items .item_quantity { width: 100%; display: flex; justify-content: space-between; max-width: 175px; } #commerce #basket-items .quantity-change, #commerce #basket-items .item_quantity input { padding: 0 0.25em; max-width: none; height: 100%; height: 36px; border: 1px solid #808080; vertical-align: middle; display: table-cell; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } #commerce #basket-items .item_quantity input { width: 30%; } #commerce #basket-items .quantity-change { font-size: 0; background-color: #595959; border: 1px solid #595959; } #commerce #basket-items .quantity-change::before { font-family: 'Font Awesome 5 Pro'; font-size: 1.25rem; font-weight: 100; color: #FFF; display: flex; justify-content: center; } #commerce #basket-items .quantity-change.decrease::before { content: "\f068"; } #commerce #basket-items .quantity-change.increase::before { content: "\f067"; } #commerce #basket-items .no-images td.item { padding-left: 0; width: 100%; } #commerce #basket-items .no-images td.qty { padding-left: 0; margin-left: 0; width: 50%; } #commerce #basket-items .no-images td.pricetotal { width: 50%; } #commerce #basket-summary { margin-top: 10px; width: auto; float: none; padding: 0 10px; } #commerce #basket-summary #heading { display: none; } #commerce #basket-summary > table { max-width: 500px; } #commerce #basket-summary table th { border: none; text-align: left; font-size: 1.125rem; font-weight: 600; } #commerce #basket-summary table td { border: none; text-align: left; font-size: 1.125rem; font-weight: 700; } #commerce #basket-summary > table tr:nth-child(3) > td, #commerce #basket-summary > table tr:nth-child(3) > th { font-size: 1.35rem; } #commerce #basket-summary .delivery_text { font-size: 1rem; line-height: 2rem; } #commerce #basket-summary .delivery_text strong { font-weight: 500; font-size: 1.125rem; } #commerce #basket-summary div.continue-shopping { width:calc(49% - 1rem); margin: 0 1rem 0 0; } #commerce #basket-summary div.continue-checkout { width:calc(49% - 1rem); margin: 0 0 0 1rem; } #commerce #basket-items .line_container { display: flex; flex-wrap: wrap; background-color: #FFF; width: 100%; padding: 0 1rem; margin-left: 0; justify-content: right; position: relative; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 15px; } #commerce #basket-items .line_container:last-of-type { margin-bottom: 0; } #commerce #basket-items .no-images .line_container { width: 100%; margin-left: 0; } #commerce #basket-items .line_container::after { content: ""; left: 25px; right: 25px; border:none; position: absolute; } #commerce.basket table tr.line_container { border-bottom: none; } /* Checkout Styles */ #commerce .checkout-left { padding: 0% 0% 0% 0%; width: 100%; float: none; } #commerce .checkout-right { padding: 0% 0% 0% 0%; width: 100%; float: none; } #commerce #checkout-details { margin-bottom: 0; padding: 1rem; width: auto; float: none; } #commerce #checkout-details table { border-bottom: 0px none; } #commerce #checkout-details tr.basket_headings { display: none; } #commerce #checkout-details tr.line_container { display: flex; flex-wrap: wrap; min-height: 80px; justify-content: right; } #commerce #checkout-details th { display: none; } #commerce #checkout-details td { display: inline-block; } #commerce #checkout-details td.product_label { padding: 10px 0% 10px 0%; } #commerce #checkout-details td.image { display: none; } #commerce #checkout-details td.image .image_dimensions { max-height: 95px; } #commerce #checkout-details td.image .image-container { width: 100%; padding-top: 100%; } #commerce #checkout-details td.qty { padding-right: 0%; width: 20%; text-align: right; float: left; } #commerce #checkout-details td.price { display: none; } #commerce #checkout-details td.pricetotal { text-align: right; float: right; position: absolute; width: 30%; padding-left: 0; font-weight: 600; } #commerce #checkout-details td.line-qty { position: absolute; width: 15%; margin-right: 25%; padding-left: 0; padding-right: 0; } #commerce #checkout-details td.item { width: 100%; } #commerce #checkout-details td.item .item_description strong { width: 55%; display: inline-block; } #commerce #checkout-details td.item .item_description .item_description_text { width: 56%; } #commerce #checkout-details .no-images td.item { width: 100%; margin-left: 0; } #commerce #checkout-details table.participant_assign select { width: calc(100% - 35px); max-width: 600px; margin-right: 0.5rem; } /* Checkout Addresses Styles */ #commerce .add_address_button, #commerce .edit_address_button { font-size: 1em; } #commerce #guest-checkout .login_email { width: 100%; float: none; } #commerce #guest-checkout .login_password { margin-top: 30px; width: 100%; float: none; } #commerce #guest-checkout .create_password { margin-top: 30px; width: 100%; float: none; } #commerce .guest-account .field_label { width: 100%; text-align: left; float: none; } #commerce .guest-account input[type=text], #commerce .guest-account input[type=password], #commerce .guest-account select { margin-left: 0; width: 100%; float: none; } #commerce .guest-account #getaddress_button { margin: 8px 0 0; } #commerce #delivery-panel { padding: 10px 0px 30px; width: auto; border-left: 0px none; float: none; } #commerce #delivery-address { width: 100%; float: none; margin-right: 0; } #commerce #delivery-address .details p { font-size: 1em; } #commerce #delivery-address select { width: 100%; font-size: 1em; } #commerce #delivery-options { padding-left: 0%; width: 100%; border-left: 0px none; float: none; padding: 2rem 0 0; margin-left: 0; } #commerce #delivery-options-time { padding-left: 0%; width: 100%; border-left: 0px none; float: none; } #commerce #billing-address { width: 100%; float: none; } #commerce #billing-address.fullwidth { width: 100%; } #commerce #billing-address .details p { font-size: 1em; } #commerce #billing-address select { width: 100%; font-size: 1em; } #commerce .gateway_panel { width: 100%; margin:0 0 2em 0; } #commerce .gateway_panel:nth-of-type(3n+1) { margin-left: 0; } #commerce .gateway_panel:nth-of-type(2n+1) { margin-left: 0; } /* Guest Checkout Mobile Styles */ #commerce .guest-checkout-panel { margin: 0; padding: 1.5em 0 0; } #commerce .guest-checkout-panel label span.field_label { width: 36%; } #commerce .guest-checkout-panel #postcode_lookup { margin: 0% auto; width: 100%; max-width: 320px; display: block; text-align: center; } #commerce .guest-checkout-panel #postcode_lookup #getaddress_button { margin: 0.5em 0% 0% 0%; } #commerce .guest-checkout-panel #postcode_lookup select { width: 100%; } #commerce .guest-checkout-panel #postcode_lookup input { text-align: center; } #commerce .guest-checkout-panel #postcode_lookup #getaddress_error_message { margin: 1.5em 0% 0% 0%; text-align: center; } #commerce .guest-checkout-panel #postcode_lookup #getaddress_error_message button { margin: 1em 0% 0% 0%; text-decoration: underline; } #commerce .guest-checkout-panel #account-registration label.address-lookup span.field_label { margin: 0.75em 0% 0% 0%; width: 100%; font-size: 1.125em; font-weight: 700; text-align: center; } #commerce .guest-checkout-panel #account-registration label.address-lookup input { width: 100%; } /* Guest Checkout Login Mobile Styles */ #commerce .guest-checkout-panel .login { width: 100%; display: block; text-align: center; } /* Guest Checkout Password Reset Mobile Styles */ #commerce .guest-checkout-panel .reset-password-box { width: 100%; display: block; text-align: center; } #commerce .guest-checkout-panel .reset-password-box-complete { width: 100%; display: block; text-align: center; } /* Guest Checkout Register Mobile Styles */ #commerce .guest-checkout-panel .register { padding: 2.5em 0% 0% 0%; width: 100%; display: block; } /* Guest Checkout Your Details Mobile Styles */ #commerce .guest-checkout-panel #account-registration label { margin: 0%; width: 100%; display: block; float: none; } /* Checkout Summary */ #commerce #sidebar { width: auto; float: none; } #commerce #total-to-pay .promocode { padding: 0; width: 100%; float: none; margin-right: 0; } #commerce #total-to-pay .summary { padding-left: 0%; padding-right: 0%; width: 100%; border-left: 0px none; float: none; margin-top: 2rem; margin-left: 0; } #commerce #total-to-pay .promocode .promocode_launch p { font-size: 1.125em; margin: 0 0 0 1rem; } .cta-buttons { padding: 0% 0% 0% 0%; } #commerce .payment_selection .card_date { width: 100%; } #commerce .payment_selection .card_expiry { margin-left: 0; } /* 600px Resolution Specific Behaviour */ } @media only screen and (min-width: 0px) and (max-width: 600px) { /* Guest Checkout Your Details Mobile Styles */ #commerce .guest-checkout-panel #account-registration button { margin: 1em 0%; padding: 0.5em 1.5em; width: 100%; display: block; text-align: center; } #commerce .guest-checkout-panel #account-registration button.switch-to-login { margin: 1em auto; width: auto; } #commerce .guest-checkout-panel .existing_address { width: 100%; float: none; } #commerce .guest-checkout-panel .add_address, #commerce .guest-checkout-panel .add_address_button, #commerce .guest-checkout-panel .edit_address { margin: 0.75em 0% 0% 0%; width: 100%; float: none; } #commerce .guest-checkout-panel .add_address button, #commerce .guest-checkout-panel .edit_address button { width: 100%; text-align: center; } #commerce #checkout-details td.item { padding-right: 0; padding-left: 0; } #commerce #checkout-details table.participant_assign tr.participant_row > td:nth-child(1) { width: 60%; } #commerce #checkout-details table.participant_assign tr.participant_row > td.qty { width: 30%; } #commerce #basket-summary div.continue-shopping { width:100%; margin: 0 0 1rem; } #commerce #basket-summary div.continue-checkout { width:100%; margin: 0; } div.popup-background.full .popup-panel.alert { display: flex; flex-direction: column; justify-content: center;} } @media only screen and (min-width: 0px) and (max-width: 500px) { #commerce #checkout-details td.item .item_description .item_description_text { width: 50%; } #commerce #checkout-details td.line-qty { margin-right: 30%; } } @media only screen and (min-width: 0px) and (max-width: 450px) { .tablet-element { display: none; } } @media only screen and (min-width: 0px) and (max-width: 400px) { #commerce .gateway_panel { margin-left: 0; width: 100%; } #commerce #basket-items td.qty { margin-left: 0; width: 70%; clear: both; } #commerce #checkout-details td input { width: 35px; } #commerce #checkout-details table.participant_assign button.participant-remove { margin-left: 0.5rem; } } @media only screen and (min-width: 0px) and (max-width: 350px) { #commerce #checkout-details td.line-qty { margin-right: 30%; } }