﻿.newsletter .editor-field { width: 100%; }
.newsletter .editor-field input { height: 60px; padding-left: 15px; width: 100%; }
.editor-label { margin-bottom: 10px; }
.editor-label label { font-weight: 700; font-size: 1.1em; }
.editor-field { margin-bottom: 15px; position: relative; }
.editor-field textarea { border: 1px solid #cfcfcf; min-height: 200px; width: 100%; padding: 15px; border-radius: 3px; font-size: 1.05em; }
.editor-field input, .editor-field select { border-radius: 3px; width: 100%; display: block; border: 1px solid #cfcfcf; height: 45px; padding-left: 10px; font-size: 1.05em; }

input[type="submit"], input[type="button"] { -webkit-appearance: none; }
input[type="submit"], .btn { cursor: pointer; text-align: center; }
.toast .field-validation-error { margin-top: 0; color: inherit; display: initial; }
.field-validation-error { margin-top: 10px; color: red; display: block; }
.editor-field.center-txt > * { text-align: center; padding-left: 0px !important; }
.editor-field.on-white > * { border-radius: 3px; width: 100%; display: block; border: none; height: 37px; padding-left: 10px; border: 1px solid #ACACAC; box-shadow: 0px 3px 6px #00000029; }
.editor-field.lg-field > * { height: 45px; }
input[type="submit"] { cursor: pointer; width: 100%; font-size: 1em; text-align: center; height: 40px; line-height: 40px; display: block; background-color: #4aad94; color: #fff; max-width: 110px; }
input[type="submit"] { background-color: transparent; color: #4aad94; }
input:not(.btn)[type="submit"]:hover { background-color: #fff; color: #4aad94; }
.editor-field .forgot { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 1.2em; cursor: pointer; }
.editor-field .forgot:hover { color: #4aad94; }

.editor-field.capt { height: 50px; position: relative; border: 1px solid #cfcfcf; overflow: hidden; }
.editor-field.capt > div { position: absolute; overflow: hidden; border: none !important; width: 100%; left: 0px; top: 50%; transform: translateY(-50%); }
.editor-field.capt > div .g-recaptcha { border: none !important; }

.editor-field.packof select { height: 45px; box-shadow: none; color: #000; width: 60px; border: 1px solid #cfcfcf; padding-left: 5px; min-width:80px; }
.editor-field.packof.sml select { height: 35px; }
#mapa .editor-field input { width:auto; height:auto; }
#discountform .btn { width: 130px; }
#discountform input { border: none !important; height: 50px; width: 100%; }

.col.quant .editor-field input { padding: 0px; text-align: center; width: 50px; margin: 0 auto; }

#pickdeladdr { width: 100%; margin-bottom: 15px; min-height: 45px; }

.add-bask-section .OK { font-size: 1.1rem; border-radius: 5px; display: flex; grid-gap: 10px; align-items: center; justify-content: center; font-size: 1.4rem; }
.add-bask-section .OK:after { display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; font: var(--fa-font-solid); content: "\f291"; }

.OK { padding: 20px; color: #fff; background-color: #4aad94; margin: 20px 0; text-align: center; }
#customerquoteform .OK { background-color: #4aad94; }
.OK .msg { padding: 0px; font-weight: bold; font-size: 1.2em; }
.OK ul { padding: 0; margin: 0; list-style: none; color: #fff; }
.view-basket { color: #4aad94; background-color: #fff; max-width: 100%; text-align: center; font-weight: bold; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50px; }
.view-basket:hover { color: #fff; background-color: #283551; }
.KO { padding: 10px 10px 10px; color: #fff; background-color: #e3000f; margin-bottom: 10px; text-align: left; }
.KO ul { padding: 0; margin: 0; list-style: none; color: #fff; }
.Generic { padding: 10px; color: #fff; background-color: #333; margin-bottom: 10px; }

.validation-summary-errors ul, .validation-summary-errors ol { color: #e91e63; margin-bottom: 15px; }

label.checkbox { cursor: pointer; border: 1px solid #cfcfcf; display: block; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 3px; }
label.checkbox i { opacity: 0; color: #4aad94; font-size: 1.2em; }
label.checkbox.on i { opacity: 1; }
label.checkbox input { display: none; }
.stock-err-msg { margin-top: 65px; text-align: center; }
.stock-err-msg .KO { text-align: center; border-radius: 5px; }
.basket-table.check-out .table-bs { margin-bottom: 30px; }
.enter-postcode .editor-field { max-width: calc(100% - 130px); }

.editor-field .topay { background-color: #4aad94; display: flex; align-items: center; border-radius: 3px; border: 1px solid #4aad94; }
.editor-field .topay span { color: #fff; width: 50px; text-align: center; font-weight: 700; font-size: 1.6em; }
.editor-field .topay input { border: none; }

.g-recaptcha div, .g-recaptcha { height: 60px !important; }
.g-recaptcha { height: 60px; overflow: hidden; position: relative; /* border: 1px solid #cbcbcb; */ background-color: #f9f9f9; }
.g-recaptcha div { margin: 0 auto; width: 160px !important; overflow: hidden; }
.g-recaptcha div div { margin: -7px 0 0 -7px; height: 60px; }


.ref-table { display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; overflow: hidden; border: 1px solid #283551; }
.ref-table-header { background-color: #283551; color: #fff; padding: 1rem; font-size: 1.3rem; }
.ref-table-row { padding: 0.5rem 1rem; font-size: 1.2rem; }
.ref-table-row:nth-child(odd) { background-color: #ebebeb; }

.ref-form { display: flex; width: 100%; }
.ref-form > input { border-radius: 10px 0 0 10px; border: 1px solid #cfcfcf; padding-left: 15px; }
.ref-form > * { flex-grow: 1; }
#discountform, #customerquoteform { background-color: #f9f9f9; margin-top: 15px; }
#customerquoteform h3 { margin-top: 0; }
#customerquoteform { padding: 20px; }
#discountform .validation-summary-errors ul { margin-bottom: 15px; padding: 10px 10px 10px 28px; background-color: #e91e63; color: #fff; }
#discountform h3 { margin: 0; padding: 0 15px; }
#discountform h3 i, #customerquoteform h3 i { margin-right: 15px; color: #4aad94; }
#discountform .notice span { color: #333333; display: block; line-height: 15px; padding: 0 15px; }
#discountform input[type="text"] { border: 1px solid #d4d4d4; }
#discountform input[type="submit"] { font-size: 0.95em; }
#discountform .notice .line, #customerquoteform .notice .line { border: .6px solid #eeeeee; margin: 10px 0; }
#customerquoteform .notice .line { margin-left: -15px; margin-bottom: 20px; margin-right: -15px; }
#discountform .editors { padding: 15px; }
#discountform .editors .editor-label { margin-bottom: 15px; }
#discountform .editors .editor-field input[type="radio"] { width: 25px; height: 25px; float: left; }
#discountform .editors .editor-field.value input { width: 100%; height: 40px; }
#discountform .editors .editor-field label span.type { color: #283551; font-weight: bold; margin: 8px; display: inline-block; }
#discountform .editors .editor-field label i { color: #4aad94; font-size: 1.3em; margin-right: 10px; }

.sortby { max-width: 260px; border-radius: 50px; }

.range-slider { margin: auto; text-align: center; position: relative; padding-bottom: 25px; }
.range-slider .editor-field input { height: 30px; padding-left: 25px; font-size: 1.1rem; color: #707070; }
.range-slider .editor-field { position: relative; width: calc(50% - 15px); }
.range-slider .editor-field span { color: #707070; font-size: 1.1rem; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); }
.range-slider .sliders { position: relative; height: 10px !important; margin: 15px 0px; z-index: 10; }
.range-slider .sliders:before { content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 6px; background-color: #4aad94; display: block; width: 100%; border-radius: 5px; }
.range-slider .sliders input[type=range] { position: absolute; left: 0; top: 0; width: calc(100% - 5px) !important; height: 0px !important; }
.range-slider .sliders svg { position: absolute; left: 0; top: 0; width: calc(100% - 5px); }
.range-slider .editor-field input { width: 100% !important; max-width: 100% !important; height: 30px !important; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=number]:invalid,
input[type=number]:out-of-range { border: 2px solid #ff6347; }
input[type=range] { -webkit-appearance: none; width: 100%; }
input[type=range]:focus { outline: none; }
input[type=range]:focus::-webkit-slider-runnable-track { background: transparent; height: 0px; }
input[type=range]:focus::-ms-fill-lower { background: transparent; }
input[type=range]:focus::-ms-fill-upper { background: transparent; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 0px; cursor: pointer; background: transparent; border-radius: 1px; box-shadow: none; border: 0; }
input[type=range]::-webkit-slider-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px 1px #d8d8d8; border: 3px solid #fff; height: 18px; width: 18px; border-radius: 100%; background: #4b5d71; cursor: pointer; -webkit-appearance: none; margin-top: -7px; }
input[type=range]::-moz-range-track { width: 100%; height: 0px; cursor: pointer; background: transparent; border-radius: 1px; box-shadow: none; border: 0; }
input[type=range]::-moz-range-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px 1px #d8d8d8; border: 3px solid #fff; height: 18px; width: 18px; border-radius: 100%; background: #4b5d71; cursor: pointer; }
input[type=range]::-ms-track { width: 100%; height: 0px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; }
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper { background: transparent; border-radius: 1px; box-shadow: none; border: 0; }
input[type=range]::-ms-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid transparent; height: 18px; width: 18px; border-radius: 25px; background: #4b5d71; cursor: pointer; }

.corpocontact .btn { max-width: 100%; width: 100%; height: 83px; box-shadow: 0px 0px 9px #0000002B; border-radius: 15px; font-size: 2em; }


.editor-field .img-upload label{overflow: hidden; position: relative; border: 1px solid #cfcfcf; border-radius: 3px; display: flex; gap: 15px;align-items: center; cursor: pointer;}
.editor-field .img-upload label .img{overflow:hidden; position: relative; display: flex; background-color: #f7f7f7; aspect-ratio: 1; width: 90px; justify-content: center; align-items: center; padding: 10px; font-size: 2rem;}
.editor-field .img-upload label .uploadlnk {color: #4aad94; text-decoration: underline; position: absolute; right:15px; top: 50%; transform: translateY(-50%); } 
.editor-field .img-upload label:hover .uploadlnk {text-decoration: none;}
.editor-field .img-upload label input {display: none;}
.editor-field .img-upload label .img img {position: absolute; width: 100%;height: 100%; max-height: 100%; opacity: 0;}
.editor-field .img-upload.uploaded label .img img {opacity: 1;}


@media screen and (max-width: 1229px) and (min-width: 992px) {
}

@media screen and (min-width: 992px) {
    .basket-table .head { display: flex; }
    .mob-title { display: none; }
    .checkoutpage { padding-right: 348px; position: relative; }
    .checkoutpage .total-bs { position: absolute !important; top: 0px; right: 0px; height: 100%; width: 318px; padding: 0px !important; }
    .col.price .price-title { display: none; }
    .sortby-bs { width: 290px !important; }
}

@media screen and (max-width: 991px) {

    .basket-table .head { display: none; }
    .basket-table .row:nth-child(even), .basket-table .row:nth-child(even) + .col-comp { background-color: #f1f1f1; }




    .basket-table.subscriptions .row { padding-left: 15px; padding-right: 15px; }


    .order-list .basket-table .row { padding: 15px !important; }
    .order-list .basket-table .col.prod { width: 100%; max-width: 290px; }
    .order-list .basket-table .col.quant .flx-bx { width: 100%; display: block; }
    .order-list .basket-table .col.quant { flex-wrap: wrap; margin-top: 15px; }

    .col.price .price-title { display: none; }
    .order-list .col.price .price-title { display: inline-block !important; font-weight: 800; margin-right: 15px; width: 130px; }
    .basket-table.subscriptions { border: 1px solid #cfcfcf; border-radius: 5px; }
    .basket-table.subscriptions .col .price-title { display: inline-block !important; font-weight: 800; margin-right: 15px; width: 60px; text-align: left; }
    .basket-table.subscriptions .col.price { width: 100%; }
    .basket-table.subscriptions .col.quant { width: 100%; margin: 10px 0px; }
    .basket-table.subscriptions .col.options .auto-w { width: 100%; }
    .basket-table.subscriptions .col.options .btn { width: 100%; margin-top: 10px; }

    .col.prod .description { margin-bottom: 10px; }
    .col.price, .col.quant { display: flex; align-items: center; margin-bottom: 10px; }

    .col.quant.controls { justify-content: space-between; max-width: 190px; }
    .col.quant.controls .editor-field { margin-bottom: 0px; }
    .col.quant.controls .mt-10 { margin: 0px; }

    .col.price .mob-title { min-width: 45px; }
    .col.quant .mob-title { min-width: 45px; }
    .specialhead.flx-bx { justify-content: center !important; }

    #discountform { padding: 15px !important; }
}

@media screen and (max-width: 767px) {
    .basket-table .row .col.prod .section .img-boot { width: 30%; max-height: 100%; }

    .basket-table.subscriptions .row { padding-left: 15px; padding-right: 15px; }
}

@media screen and (max-width: 600px) {
    .basket-table .row .col.prod .section .img-boot { position: static; margin-bottom: 15px; }
}

@media screen and (max-width: 420px) {
    .newsletter .editor-field input { border-radius: 100px; text-align: center; padding: 0px; }
    .rev-form .leave-review .flx-bx { flex-wrap: wrap; }
    .rev-form .leave-review .editor-label { width: 100%; margin-bottom: 5px; }
    .rev-form .leave-review .rev.rate { display: flex; justify-content: space-between; width: 150px; }
    .rev-form .leave-review .rev.rate label { margin-top: 10px; }
}


