@charset "UTF-8";

*, *::before, *::after { 
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
html, body {
    margin:0;
    padding:0;
    height:100%;
    font-family:var(--basefont);
    background-color:var(--background);
}
h1 {
    color:var(--heading);
    font-size:var(--h1size);
    padding:35px 0 15px;
    margin:0;
    text-align:center;
    transition:0.2s;
}
h1.h1small {
    padding:10px 0 10px;
    font-size:20px;
    text-align:left;
}
h1 img {
    width:auto;
    height:auto;
    max-width:220px;
    max-height:160px;
    transition:0.2s;
}
h1.h1small img {
    max-width:120px;
    max-height:100px;
}
h2 {
    color:var(--subhead);
    font-size:var(--h2size);
    font-weight:200;
    margin:0;
    padding:0 0 5px;
    text-align:left;
    transition:0.2s;
}
h3 {
    font-size:var(--h3size);
    font-weight:600;
    margin:0;
}
h4 {
    font-size:var(--h4size);
    line-height:var(--h4size);
    font-weight:200;
    color:var(--brnd-col-dark);
    margin:0;
    padding: 0 0 5px;
}
p {
    padding:0 0 12px;
    margin:0;
    color:var(--text);
}
p, input {
    font-size:var(--basefontsize);
}
b, strong {
    font-weight:600;
}
table {
    border-collapse: collapse;
}
td {
    vertical-align: text-top;
}
ul, ol {
    margin:0;
    padding:0;
}
li {
    list-style:none;
    padding:0 0 6px 0;
}
li:last-child {
    padding:0;
}
.wide {display:none;}
label {
    display:block;
    text-align:left;
    padding:0 0 2px 2px;
    font-size:var(--basefontsize);
    color:var(--brnd-col-dark);
}
input[type=text], input[type=search], input[type=number], textarea {
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    padding:16px 0 0 12px;
    font-size:max(18px, 1em);
    font-family:inherit;
    color:var(--input-color);
    background-color:var(--input-bg);
    border:var(--input-border-width); 
    border-style:solid;
    border-color:var(--input-border);
    border-radius:var(--input-border-rad);
    outline:none;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
input[type=text], input[type=search], input[type=number] {
    height:42px;
}
input[type="search"]::-webkit-search-cancel-button {
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    height:20px;
    width:20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(255,255,255)'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    position:absolute;
    right:8px;
    top:14px;
    justify-content:center;
    align-items:center;
    border-style:solid;
    border-color:var(--clear-bg);
    border-width:1px;
    border-radius:12px;
    margin:0;
    padding:0;
    cursor:pointer;
    background-color:var(--clear-bg);
    color:var(--input-bg);
}
input[type="number"]::-webkit-inner-spin-button {
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
}
textarea {
    font-size:var(--smallfont);
    resize:vertical;
    padding:8px;
    background:#FFF;
    border:1px solid #000;
}
input[type=text].floating:focus, 
input[type=text].floating:valid, 
input[type=text].floating:disabled,
input[type=search].floating:focus, 
input[type=search].floating:valid, 
input[type=search].floating:disabled, 
input[type=number].floating:focus, 
input[type=number].floating:valid, 
#firstinput input#surname:focus, 
#firstinput input#surname:valid, 
#firstinput input#vrm:focus, 
#firstinput input#vrm:valid {
    height:50px;
}
input[type=text]:focus, input[type=number]:focus, textarea:focus {
    border-color:var(--brnd-col-light);
}
.input:not(textarea) {
    line-height:1;
    height:2.25rem;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border-color:var(--brnd-col-light);
}
textarea.input {
    resize:vertical;
}

#getsummary {
    position:absolute;
    top:15px;
    right:15px;
    padding:10px 14px;
    background-color:var(--summ-but);
    border-radius:26px;
    font-size:12px;
    color:var(--brnd-col-dark);
}
#closesumm::after {
    content:"\00d7";
    color:#000;
    font-size:20px;
    position:absolute;
    right:0px;
    top:0px;
    padding:14px 20px;
}
.summtitle {
    padding:0px 0 12px;
    color:var(--brnd-col-dark);
    position:absolute;
    top:20px;
}
#summgrid {
    padding:5px 0;
}
.summrow {
    padding:7px 10px;
    margin-bottom:10px;
    background:rgba(var(--background),1);
    border-radius:14px;
}
#thesummary {
    display:none;
    overflow:hidden;
}
#mobilesummary {
    display:none;
}
#booksummob  {
    position:absolute;
    top:0;
    right:0;
    min-height:100%;
    width:0;
    height:auto;
    opacity:0;
    padding:60px 20px;
    background-color:var(--summ-bg);
    z-index:100;
}
#thesummary.summarise {
    display:none;
}
#closesumm::after {
    content: "\00d7";
    color: #000;
    font-size:20px;
    position:absolute;
    top:0px;
    right:0px;
    padding:11px 17px;
    z-index: 101;
}
#headingblock {
    text-align:center;
    padding:0;
}
#milesinput {
    position:relative;
    max-width:400px;
    margin:0 auto;
    padding:0 0 25px;
}
input:focus ~ label.floating-label, input:valid ~ label.floating-label, input:disabled ~ label.floating-label {
    top:6px;
    left:12px;
    font-size:11px;
    opacity:1;
    color: var(--brnd-col-dark);
}
input:focus ~ label.floaticon-label, input:valid ~ label.floaticon-label  {
    top:6px;
    left:39px;
    font-size:11px;
    opacity:1;
    color: var(--brnd-col-dark);
}
input:focus ~ label.floatvrm-label, input:valid ~ label.floatvrm-label {
    top:6px;
    left:12px;
    font-size:11px;
    opacity:0;
}
.floating-label, .floaticon-label  {
    position:absolute;
    pointer-events:none;
    left:12px;
    top:13px;
    transition:0.2s ease all;
    font-size:16px;
    color:#000000;
    opacity:0.33;
}
.floating-label {
    left:12px;
}
.floaticon-label {
    left:40px;
}
.button {
    min-width:180px;
    max-width:100%;
    color:var(--button);
    background-color: var(--brnd-col-dark);
    border-style:solid;
    border-color:var(--button-border);
    border-width:var(--button-border-width);
    border-radius:var(--button-rad);
}
.button:hover {
    background-color:var(--brnd-col-dark);
    border-color:var(--brnd-col-light);
}
.button:focus {
    outline:0;
    border-color:var(--brnd-col-light);
}
.button-other {
    min-width:180px;
    color:var(--button-oth);
    background-color: var(--button-bg-oth);
    border-style:solid;
    border-color:var(--button-border-oth);
    border-width:var(--button-border-width);
    border-radius:var(--button-rad);
}
.button, .button-other {
    cursor:pointer;
    display:inline-block;
    line-height:20px;
    padding:8px 15px;
    margin:0 11px 15px; 
    position:relative;
	font-size:var(--smallfont);
    text-align:center;
    text-decoration:none;
    transition:0.1s;
    user-select:none;
    -webkit-user-select:none;
    touch-action:manipulation;
    vertical-align:middle;
}
.button-text {
    cursor:pointer;
    font-size:var(--smallfont);
    text-align:left;
    text-decoration:underline;
    background: none;
    border: none;
}
.btn-disabled {
    opacity:0.33;
    cursor:auto;
}
.clear-input-button {
    background:var(--clear-bg);
    color:var(--input-bg);
}

#title, #subhead {
    padding:0;
}
#title {
    min-height:50px;
}
#container {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:5px 18px 10px;
}
#messages, #messages2 {
    padding:0 0 5px 0;
    text-align:center;
}
#messages3, #messages4 {
    padding:0 0 8px 0;
    text-align:center;
    color:var(--brnd-col-dark);
}
.covrm {
    background-color:#eeeeee; 
    padding:2px 7px;
}
#confirmation {
    padding:15px 0 0;
}
#confirmation table {
    width:100%;
    font-size: 0.9em;
}
#confirmation td {
    padding:6px 0px;
    border-bottom:1px solid #DDDDDD;
}
#confirmation tr:last-of-type td {
    border:none;
}
.cowshop {
    font-weight:600;
    display:block;
}
.coaddr, .cotele {
    display:block;
}
.cototal {
    font-weight:600;
}
#loading, #searching {
    position:absolute;
    z-index:100;
    top:0;
    left:0;
    margin:0 auto;
    padding:200px 0 0;
    width:100%;
    height:100%;
    background-color:rgba(255, 255, 255, 0.9);
    transition: 0.2s;
}
.loading-text {
    text-align:center;
    position:relative;
    top:45px;
    width:100%;
    padding:0;
    margin:0;
    color: var(--brnd-col-dark);
}
#searching .loading-text {
    top: 6px;
}
.loader {
    width:100px;
    height:16px;
    margin:0 auto;
    display:block;
    background-color:#FFF;
    border:1px solid #BBB;
    border-radius:8px;
    background-image:linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
    font-size:30px;
    background-size:1em 1em;
    animation: barStripe 0.6s linear infinite;
}
@keyframes barStripe {
    0% {background-position: 1em 0;}
    100% {background-position: 0 0;}
}
.loader-icon-window {
    width:160px;
    height:59px;
    overflow:hidden;
    margin:0 auto;
    padding:1px 0;
}
.loader-icon-container {
    width:160px;
    height:57px;
    animation: easeInLeft 0.5s ease-out forwards;
}
.loader-icon {
    width:160px;
    height:57px;
    display:block;
    position:relative;
    margin:0;
    background-position:center 0px;
    background-repeat:no-repeat;
    animation: carWobble 2s ease-in-out infinite;
}
@keyframes carWobble {
  0%   { transform: translateX(0) rotate(0deg); }
  10%  { transform: translateX(-0.5px) rotate(-0.3deg); }
  20%  { transform: translateX(0.5px) rotate(0.3deg); }
  30%  { transform: translateX(-0.5px) rotate(-0.5deg); }
  40%  { transform: translateX(0.5px) rotate(0.3deg); }
  50%  { transform: translateX(0) rotate(-0.3deg); }
  60% { transform: translateX(0) rotate(0.3deg); }
  70% { transform: translateX(0) rotate(-0.5deg); }
  80% { transform: translateX(0) rotate(0.5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes easeInLeft {
    0% { transform:translateX(-100px); opacity:0; }
    100% { transform:translateX(0); opacity:1; }
}
.flipped {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    position: absolute;
    bottom: 0;
}
.dashed-line {
    width:160px;
    height:2px;
    display:block;
    margin:5px auto;
    background-image: repeating-linear-gradient(
    to right,
    #AAA 0,
    #AAA 10px,
    transparent 10px,
    transparent 20px
);
    animation: move-dash 0.2s linear infinite;
}
@keyframes move-dash {
    from { background-position: 0 0; }
    to { background-position: -20px 0; }
}

#firstinput {
    display:flex;
    flex-direction:column;
    gap:20px;
    text-align:center;
    padding:0;
}
#firstinput div {
    width:100%; 
}
#firstinput input#surname {
    height:42px;
    text-transform:capitalize;
    padding-left:41px;
    background-position:9px 50%;
    background-repeat:no-repeat;
}
#firstinput input#vrm {
    height:42px;
    text-transform:uppercase;
    padding-left:41px;
    background-position:8px 50%;
    background-repeat:no-repeat;
}
#milesinput input#mileage {
    height:50px;
    text-transform:uppercase;
    padding-left:41px;
    background-position:8px 51%;
    background-repeat:no-repeat;
    height:50px;
    background-size: 30px 30px;
}
.clear-input-container {
    position:relative;
    display:inline-block;
}
.clear-input-button {
    position:absolute;
    right:10px;
    top:16px;
    justify-content:center;
    align-items:center;
    width:20px;
    height:20px;
    appearance:none;
    border-style:solid;
    border-color:var(--button-border);
    border-width:var(--button-border-width);
    border-radius:var(--button-rad);
    margin:0;
    padding:0 2px 2px 3px;
    font-size:16px;
    line-height:16px;
    cursor:pointer;
    display:none;
}
.clear-input--touched:focus + .clear-input-button, .clear-input--touched:hover + .clear-input-button, .clear-input--touched + .clear-input-button:hover {
    display:inline-flex;
}
.reset-button {
    appearance:none;
    border-width:0;
    color:var(--brnd-col-dark);
    background-color:transparent;
    margin:0;
    padding:0;
    font-size:13px;
    line-height:13px;
    cursor:pointer;
    display:none;
}
#car .resetreg {
    margin: 0 auto 25px;
    font-size: 16px;
    line-height: 16px;
    text-decoration: underline;
}
.checkcontainer {
    display:block;
    position:relative;
    padding-left:38px;
    margin-bottom:18px;
    font-size:16px;
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.checkcontainer input {
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0;
}
.checkcontainer .checkmark {
    border-radius:50%;
}
.checkmark:after {
    content:"";
    position:absolute;
    display:none;
}
.checkcontainer input:checked ~ .checkmark:after {
    display:block;
}
.checkcontainer .checkmark:after {
    left: 10px;
    top: 7px;
    width: 5px;
    height: 10px;
    border-style: solid;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
#customer label.checkcon, label.checkcon {
    position: relative;
    padding: 4px 0 0 38px;
    margin-bottom: 18px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkcon input {
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0;
}
.checkboxmark {
    position: absolute;
    top: 01px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color:var(--checkbox-bg);
    border-color:var(--checkbox-hover);
    border-width:1px;
    border-style:solid;
    border-radius:4px;
}
.checkcon:hover input ~ .checkboxmark {
    background-color:var(--checkbox-hover);
}
.checkcon input:checked ~ .checkboxmark {
    background-color:var(--brnd-col-light);
    border-width: 0;
}
.checkboxmark:after {
    content: "";
    position: absolute;
}
.checkcon input:checked ~ .checkboxmark:after {
    display: block;
}
.checkcon .checkboxmark:after {
    left: 10px;
    top: 7px;
    width: 5px;
    height: 10px;
    border-style: solid;
    border-color: var(--checkbox-tick);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.switch {
    position:relative;
    display:inline-block;
    width:60px;
    height:34px;
}
.switch input {
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}
.switcher {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 34px;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.switcher:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    border-radius: 50%;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .switcher {
    background-color:var(--brnd-col-dark);
}
input:focus + .switcher {
    box-shadow:0 0 1px var(--brnd-col-dark);
}
input:checked + .switcher:before {
    -webkit-transform:translateX(26px);
    -ms-transform:translateX(26px);
    transform:translateX(26px);
}

#bookingterms {
    padding:15px 0 0;
    font-size:12px;
}
#summary p {
    font-size:var(--basefontsize);
    padding:0 5px 10px 0;
}
#summarymob p {
    font-size:var(--basefontsize);
    padding:0;
}
#summarymob .sthework {
    display:block;
    padding:5px 0 0 0;
}
p.stitle {
    white-space:nowrap;
}
p.scar {
    font-size:var(--basefontsize);
    padding:0;
}
.scar .tick {
    display:none;
}
#summary .inclause, #summarymob .inclause {
    font-weight: normal;
    color:var(--borders);
}
#summary .inclause.complete, #summarymob .inclause.complete {
   color:var(--text);
}
#booksumm {
    width:100%; 
    margin:0px;
    padding:50px 20px;
}
#booksumm #vehicleimag, #booksummob #vehicleimagmob {
    width:100%;
    text-align:center;
    padding:15px 5px;
    background-color:#fff;
    border-radius:18px;
}
#booksumm #vehicleimag img {
    padding:4px 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#booksumm #summary {
    width:100%; 
    padding:20px 0 0;
}
#booksummob #summarymob {
    width:100%; 
    padding:5px 0 0;
}
.tick {
    height:15px;
    width:6px;
    border-bottom:2px solid var(--brnd-col-dark);
    border-right:2px solid var(--brnd-col-dark);
    transform:rotate(45deg);
    margin:0px 10px 0 7px;
    display:inline-block;
}
.sowner, .scentre, .swork, .sdate {
    overflow:hidden; 
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ssurname {
    text-transform:capitalize;
}
.sservice {
    display:block;
    font-weight: 600;
    padding: 0 0 2px;
}
.sservice .currency {
    font-weight:100;
}
.vehicleimgcontainer {
    text-align:center;
    background-color:#ffffff;
}
.vehicleimag {
    max-width: 450px;
    display:none;
}
#clickme7 {
    text-align:center;
    padding:0 0 8px;
    color:var(--brnd-col-dark);
}
.service-total {
    display:block; 
    padding-top:10px;
    font-weight:700;    
}
#customertype {
    padding:0 0 5px;
}
#cusemail, #customer, #car, #services, #arrange {
    width:100%;
}
#car {
    padding:20px 0 0;
}
#workshops {
    display:flex;
    flex-direction:column;
    padding:15px 0 0;
}
#workshopmenu, #workshopdetail {
    width:100%;
}
#workshopmenu {
    width:100%;
}
.aworkshop {
    padding:10px 10px 10px 15px;
    margin-bottom:9px;
    border-radius:20px;
    background-color:#f6f6f6;
    border:1px solid #eeeeee;
}
.aworkshop p {
    padding:0 0 5px;
    color:#888888;
    font-size:var(--smallfont);
}
.aworkshop:hover {
    background:#eeeeee;
    cursor:pointer;
}
.aworkshop.wrkshpselected {
    background: var(--brnd-col-dark);
    color: #ffffff;
}
.aworkshop.wrkshpselected h4 {
    color:#ffffff;
}
.aworkshop.wrkshpselected p {
    color:#cccccc;
}
#workshopdetail {
    border:1px solid #fff;
    height:320px;
    border-radius:6px;
    overflow:hidden;
    margin-bottom:20px;
}
.brands img {
    width:46px;
    height:auto;
    margin:2px 7px 2px 0;
}
#map {
    height:100%;
}


/* Property styles in unhighlighted state. */
.wshop {
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 50%;
    color: var(--brnd-col-dark);
    display: flex;
    font-size: 12px;
    gap: 15px;
    height: 26px;
    width: 26px;
    justify-content: center;
    padding: 4px;
    position: relative;
    position: relative;
    transition: all 0.3s ease-out;
}
 
.wshop::after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #FFFFFF;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translate(-50%, 0);
    transition: all 0.3s ease-out;
    width: 0;
    z-index: 1;
}
 
.wshop .icon {
    align-items: center;
    display: flex;
    justify-content: center;
    color: #FFFFFF;
 }
 
.wshop .icon svg {
    height: 20px;
    width: auto;
}
 
 .wshop .wshopdetails {
    display: none;
    flex-direction: column;
    flex: 1;
 }
 
.wshop .wshopaddress {
    color: #888888;
    font-size: 10px;
    margin-bottom: 10px;
    margin-top: 5px;
}
 
/* Workshop styles in highlighted state. */
.wshop.highlight {
    background-color: #FFFFFF;
    border-radius: 6px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
    height:auto;
    min-height:70px;
    padding:12px 15px 5px;
    width: auto;
}
.wshop.highlight::after {
    border-top: 9px solid #FFFFFF;
    top:98%;
}
.wshop.highlight .wshopdetails {
    display: flex;
}
.wshop.highlight .icon svg {
    width: 40px;
    height: 40px;
}

/* Workshop icon colors. */
.wshop.highlight:has(.icon-warehouse) .icon {
    color:var(--brnd-col-dark);
    width:25px;
    height:30px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='25' height='25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3E%3Cg transform='matrix(1.10183,0,0,0.801571,-1.75848,1.19352)'%3E%3Cpath d='M23.378,9.746L23.378,20.222L1.596,20.222L1.596,9.746L23.378,9.746ZM5.245,12.265C4.255,12.265 3.45,13.37 3.45,14.732C3.45,16.094 4.255,17.199 5.245,17.199C6.236,17.199 7.04,16.094 7.04,14.732C7.04,13.37 6.236,12.265 5.245,12.265ZM19.739,12.265C18.748,12.265 17.944,13.37 17.944,14.732C17.944,16.094 18.748,17.199 19.739,17.199C20.729,17.199 21.533,16.094 21.533,14.732C21.533,13.37 20.729,12.265 19.739,12.265Z'/%3E%3C/g%3E%3Cg transform='matrix(1.04484,0,0,0.985845,-0.535796,-1.76705)'%3E%3Cpath d='M23.483,10.927L0.513,10.927L3.022,3.692L20.974,3.692L23.483,10.927ZM1.918,10.927L22.021,10.924L20.1,4.992L3.917,4.995L1.918,10.927Z'/%3E%3C/g%3E%3Cg transform='matrix(0.748164,0,0,1.11753,20.069,-4.30321)'%3E%3Crect x='0.513' y='19.423' width='4.05' height='3.663' style='stroke:black;stroke-width:1.05px;'/%3E%3C/g%3E%3Cg transform='matrix(0.748164,0,0,1.11753,0.129142,-4.30321)'%3E%3Crect x='0.513' y='19.423' width='4.05' height='3.663' style='stroke:black;stroke-width:1.05px;'/%3E%3C/g%3E%3C/svg%3E");
}
.wshop:not(.highlight):has(.icon-warehouse) {
    background-color:var(--brnd-col-dark);
    border: 6px solid var(--brnd-col-dark);
}
.wshop.slectd:not(.highlight):has(.icon-warehouse) {
    background-color:#FFFFFF;
}
.wshop:not(.highlight):has(.icon-warehouse)::after {
    border-top: 13px solid var(--brnd-col-dark);
}


#company, #company-rep {
    padding:25px 0 0;
}
#companyname {
    position:relative;
    margin:15px 0 5px;
}
#name {
    display:flex;
    flex-direction:column;
    gap:15px;
}
#email {
    padding-left:41px;
    /*background-image: url('images/emailicon1.png');*/
    background-position: 9px 50%; 
    background-repeat: no-repeat;
    /*background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='25' height='25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3E%3Cg transform='matrix(1,0,0,1.01385,0,-0.288387)'%3E%3Cpath d='M24,5.4L24,19.186C24,20.086 23.259,20.817 22.346,20.817L1.654,20.817C0.741,20.817 0,20.086 0,19.186L0,5.4C0,4.499 0.741,3.768 1.654,3.768L22.346,3.768C23.259,3.768 24,4.499 24,5.4ZM22.75,5.4C22.75,5.18 22.569,5.001 22.346,5.001L1.654,5.001C1.431,5.001 1.25,5.18 1.25,5.4L1.25,19.186C1.25,19.406 1.431,19.584 1.654,19.584L22.346,19.584C22.569,19.584 22.75,19.406 22.75,19.186L22.75,5.4Z'/%3E%3C/g%3E%3Cpath d='M1.338,4.698L12,15.261L22.739,4.62' style='fill:none;stroke:black;stroke-width:1.25px;'/%3E%3Cpath d='M9.206,13.02L2.271,20.122' style='fill:none;stroke:black;stroke-width:1.25px;'/%3E%3Cpath d='M14.782,13.02L21.831,20.122' style='fill:none;stroke:black;stroke-width:1.25px;'/%3E%3C/svg%3E%0A");*/
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='25' height='25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(-1,-1.22465e-16,1.22465e-16,-1,23.9535,17.9057)'%3E%3Cpath d='M11.977,3.532L23.068,14.374L0.886,14.374L11.977,3.532Z'/%3E%3C/g%3E%3Cg transform='matrix(6.75258e-17,1.10278,-1.01655,6.22455e-17,12.1986,4.44092)'%3E%3Cpath d='M7.083,4.329L14.165,12L0,12L7.083,4.329Z'/%3E%3C/g%3E%3Cg transform='matrix(6.75258e-17,-1.10278,1.01655,6.22455e-17,11.8014,20.0619)'%3E%3Cpath d='M7.083,4.329L14.165,12L0,12L7.083,4.329Z'/%3E%3C/g%3E%3Cg transform='matrix(1.0313,0,0,0.984589,-0.507138,0.320815)'%3E%3Cpath d='M8.776,12.896L16.202,20.817L1.351,20.817L8.776,12.896Z'/%3E%3C/g%3E%3Cg transform='matrix(1.0313,0,0,0.984589,6.35898,0.320815)'%3E%3Cpath d='M8.776,12.896L16.202,20.817L1.351,20.817L8.776,12.896Z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
#con-title, #con-firstname, #con-surname2, #ukpostcode {
    padding:0;
}
#name, #company, #ukpostcode, #location, #telephone {
    margin-bottom:15px;
}
#con-title {
    width:100%;
}
#con-firstname, #con-surname2 {
    width:100%;
    position:relative;
}
#firstname, #surname2 {
    text-transform:capitalize;
    padding:16px 0 0 12px;
}
#mytitle {
    width:100%;
}
#thepostcode {
    position:relative;
    margin:15px auto;
    max-width:750px;
}
input#postcode {
    text-transform:uppercase;
    padding-left:41px;
    margin:0;
    /*background-image: url('images/searchicon.png');*/
    background-position: 9px 50%; 
    background-repeat: no-repeat;
    /*background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='25' height='25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(-1.1244,-1.37699e-16,1.37699e-16,-1.1244,25.9127,24.7854)'%3E%3Cpath d='M12.373,4.188C12.373,4.188 17.703,10.513 17.703,13.224C17.703,16.165 15.315,18.554 12.373,18.554C9.432,18.554 7.044,16.165 7.044,13.224C7.044,10.513 12.373,4.188 12.373,4.188ZM12.373,5.957C11.497,7.072 10.127,8.907 9.164,10.621C8.605,11.617 8.155,12.546 8.155,13.224C8.155,15.552 10.045,17.442 12.373,17.442C14.701,17.442 16.592,15.552 16.592,13.224C16.592,12.546 16.142,11.617 15.583,10.621C14.62,8.907 13.25,7.072 12.373,5.957Z'/%3E%3C/g%3E%3Cg transform='matrix(1,0,0,1,-0.0386852,2.1387)'%3E%3Cpath d='M12,4.739C13.651,4.739 14.991,6.079 14.991,7.73C14.991,9.38 13.651,10.72 12,10.72C10.349,10.72 9.009,9.38 9.009,7.73C9.009,6.079 10.349,4.739 12,4.739ZM12,5.989C11.039,5.989 10.259,6.769 10.259,7.73C10.259,8.69 11.039,9.47 12,9.47C12.961,9.47 13.741,8.69 13.741,7.73C13.741,6.769 12.961,5.989 12,5.989Z'/%3E%3C/g%3E%3C/svg%3E%0A");*/
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='25' height='25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(-1.40987,-1.72659e-16,1.72659e-16,-1.40987,29.4449,28.0314)'%3E%3Cpath d='M12.373,4.188C12.373,4.188 17.703,10.513 17.703,13.224C17.703,16.165 15.315,18.554 12.373,18.554C9.432,18.554 7.044,16.165 7.044,13.224C7.044,10.513 12.373,4.188 12.373,4.188ZM12.408,15.927C13.876,15.927 15.068,14.735 15.068,13.267C15.068,11.799 13.876,10.607 12.408,10.607C10.94,10.607 9.748,11.799 9.748,13.267C9.748,14.735 10.94,15.927 12.408,15.927Z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
#getpcodedata, #skip-ukpc {
    margin:18px 0 0;
}
#pcode {
    text-transform: uppercase;
}
#addressfields div {
    position:relative;
    margin-bottom:15px;
}
#location, #telephone {
    display:flex;
    flex-direction:column;
    gap:15px;
}
input[type=text].required, input[type=number].required, textarea.required{
    border-color:red;
    box-shadow:0 0 7px red;
}
.formcon {
    width:100%;
    position:relative;
}
#cusemail {
    margin:15px 0;
}
#getemail {
    width:100%;
    max-width:750px;
    position:relative;
    margin:0 auto;
}
.validate {
    color:var(--warning);
    font-size:15px;
}
.carform {
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-bottom:15px;
}
#preferences {
    padding:5px 0 0;
}
#preferences label:last-child {
    margin-bottom:0;
    height:29px;
}
#service-fields, #approved-fields, #value-fields, #mot-fields {
    border:0;
    margin:0;
    padding:0;
    width:100%;
}
h4.group-title {
    padding:0 0 0 10px;
}
#serv-container, #mot-container {
    padding:0 0 10px 0;
}
#services h3 {
    margin:10px 0 0;
    padding:12px 29px 12px 14px;
    border-radius:20px;
    transition:0.2s;
    transition-delay:0.1s;
    cursor:pointer;
    position:relative;
    background:var(--subgroup-bg);
    color:var(--subgroup);
}
#services h3.arrowdown {
    border-radius:20px 20px 0 0;
    transition:0s;
}
#services h3::after {
    content:" ";
    border-style:solid;
    border-width:0 2px 2px 0;
    display:inline-block;
    padding:3px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
    position:absolute;
    right:17px;
    top:17px;
    border-color:#999;
}
#services h3.arrowdown::after {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}
#services h3.arrowdown ~ .services {
    border-color:var(--subgroup-bg-alt);
}
#services .requirement {
    padding:0 0 16px;
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    line-height:18px;
}
#services #approved-fields .requirement, #services #value-fields .requirement, #services #mot-fields .requirement {
    padding:15px 15px 15px 55px;
    border-bottom:1px solid rgba(var(--background),1);
}
#services #approved-fields .requirement:first-child, #services #value-fields .requirement:first-child, #services #mot-fields .requirement:first-child {
    padding:10px 15px 15px 55px;
}
#services #approved-fields .requirement:last-child, #services #value-fields .requirement:last-child, #services #mot-fields .requirement:last-child {
    padding:15px 15px 15px 55px;
}
#services #service-fields .requirement {
    padding:12px 25px 12px 55px;
    border-bottom:1px solid rgba(var(--background),1);
}
#services #service-fields .requirement:last-child, #services #approved-fields .requirement:last-child, #services #value-fields .requirement:last-child, #services #mot-fields .requirement:last-child {
    border-bottom-width:0;
}
#services #service-fields .reqnotes label {
    color: var(--brnd-col-dark);
}
#services #approved-fields .services.hlight label, #services #value-fields .services.hlight label, #services #mot-fields .services.hlight label {
    color:var(--background);
}
.services {
    padding:0 0 6px 0;
    border-radius:0 0 20px 20px;
    border-width:0px;
    border-top-width:0px;
    border-style:solid;
    background-color:var(--subgroup-bg);
    border-color:var(--subgroup-bg);
}
.subgroup-a .subgroup-b .services {
    display:none;
}
/*
.subgroup-a .subgroup-b:only-child .services {
    display:block;
}
*/
#services label {
    cursor:pointer;
    position:relative;
    padding:4px 0 4px 0;
    width:100%;
    font-size:var(--basefontsize);
    line-height:19px;
    font-weight:600;
    color:var(--subhead);
}
#services .additem label {
    font-weight: 400;
    padding:10px 0 0 32px;
    width:75%;
}
#services #approved-fields .additem label, #services #value-fields .additem label, #services #mot-fields .additem label {
    padding:0 0 0 32px;
    width:100%;
}
#services .servdesc, #services .nonlabdesc {
    font-size:var(--basefontsize);
    line-height:18px;
    font-weight:300;
    list-style:none;
    color:var(--text);
}
#services .price {
    float:right;
}
.priceloader {
    border:3px solid var(--brnd-col-dark);
    border-radius:50%;
    border-top:3px solid var(--brnd-col-light);
    width:18px;
    height:18px;
    -webkit-animation:spin 0.6s linear infinite; /* Safari */
    animation:spin 0.6s linear infinite;
    float:right;
}
@-webkit-keyframes spin { /* Safari */
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#services ul {
    display:none;
    width:100%;
    padding:8px 0 0 0;
    margin:0;
}
#services #approved-fields ul.servitems, #services #value-fields ul.servitems, #services #mot-fields ul.servitems {
    display:none;
    padding:2px 0 0 0;
}
#services li {
    padding:6px 0 0 0;
}
#approved-fields li.additem, #value-fields li.additem, #mot-fields li.additem {
    padding:6px 0;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
#approved-fields li.incitem, #value-fields li.incitem, #mot-fields li.incitem {
    padding: 2px 0;
}
#services label input {
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0;
}
label .checkmark {
    position:absolute;
    top:7px;
    left:-38px;
    height:25px;
    width:25px;
    border-width:1px;
    border-style:solid;
    border-color: #AAAAAA;
    background:var(--checkbox-bg);
}
#approved-fields .additem label .checkmark, #value-fields .additem label .checkmark, #mot-fields .additem label .checkmark {
    top:-3px;
    left:-2px;
}
label.checkcontainer .checkmark {
    top:-5px;
    left:5px;
}
label input:checked ~ .checkmark {
    border-width:0;
}
.checkmark:after {
    content:"";
    position:absolute;
    display:block;
}
#services h3.hlight {
    color: var(--brnd-col-light);
    background-color: var(--brnd-col-dark);
}
#services h3.hlight::after {
    border-color:var(--brnd-col-light);
}
#services label .checkmark, .checkcontainer .checkmark {
    background-color:var(--checkbox-bg);
    border-color:var(--checkbox-hover);
}
#services label input:checked ~ .checkmark, .checkcontainer input:checked ~ .checkmark {
    background-color:var(--brnd-col-light);
}
.checkcontainer input:checked ~ .checkmark:after {
    border-color:var(--checkbox-tick);
}
#services .checkmark:after, .checkcontainer .checkmark:after {
    border-color:var(--subgroup-block);
}
#services input:checked ~ .checkmark:after, .checkcontainer input:checked ~ .checkmark:after {
    display:block;
}
#services .checkmark:after, .checkcontainer .checkmark:after {
    left: 10px;
    top: 7px;
    width: 5px;
    height: 10px;
    border-style: solid;
    border-width: 0 3px 3px 0;
    border-color:var(--checkbox-tick);
    -webkit-transform:rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform:rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform:rotate(45deg);  /* IE 9 */
    -o-transform:rotate(45deg);  /* Opera 10.50-12.00 */
    transform:rotate(45deg);
}
#services .more {
    font-weight:normal;
    font-size:var(--smallfont);
    text-decoration:underline;
    color:var(--brnd-col-dark);
    display:block;
    width:50%;
    padding:3px 0 0 0;
    cursor:pointer;
}
#services .price {
    display:block;
    width:50%;
    text-align:right;
    font-size:var(--smallfont);
    padding:3px 0 0 0;
}
#services #approved-fields .price, #services #value-fields .price, #services #mot-fields .price {
    padding: 3px 0 0 0;
}
#services .additem .price {
    padding:10px 0 0;
    width:25%;
    text-align:right;
}
#services #approved-fields .additem .price, #services #value-fields .additem .price, #services #mot-fields .additem .price {
    padding:4px 0 0 32px;
    text-align:left;
    width:100%;
}
#approved-fields #services .price, #value-fields #services .price, #mot-fields #services .price {
    width:100%;
    text-align:left;
    padding:3px 0 0 32px;
}
#ta-operations .serviceprice, #ie-operations .serviceprice {
    font-weight:600;
}
#services .reqnotes {
    display:none;
    width:100%;
}
#services .reqnotes label {
    padding:10px 0 2px 2px;
    font-weight:normal;
    font-size:var(--smallfont);
    text-decoration:underline;
}
#services .notearea {
    display:none;
}
#services .reqnotes textarea {
    margin:0;
    border:1px solid var(--subgroup-bg-alt);
}
#scheduled img {
    max-height:30px;
    width:auto;
    height:100%;
    padding:0 8px 0 2px;
    position:relative;
    top:-5px;
    float:left;
}
.additional {
    padding:16px 0px 8px;
    font-weight:600;
    display:none;
}

#booking-type {
    padding:15px 0 0;
    width:100%;
    max-width:320px;
    margin:0 auto;
}
.sthereg {
    margin:0 auto;
    padding:3px 2px 2px;
    display:block;
    max-width:150px;
    text-align:center;
    letter-spacing:2px;
    border-radius:3px;
    background-color:var(--vrm);
    background-image:linear-gradient(var(--vrm1), var(--vrmplchldr));
    border:1px solid var(--vrmplchldr);
    font-size:18px;
    font-weight:var(--vrmfontweight);
}
#address-list {
    list-style-type:none;
    padding:0;
    margin:0;
    width:auto;
    height:auto;
    max-width:800px;
    max-height:300px;
    overflow-y:auto;
    box-shadow:0px 5px 5px rgba(0,0,0,0.4);
    border-radius: 0px 0px 4px 4px;
    background:var(--background);
}
#address-list li {
    padding:6px 5px;
    margin:0 0 2px;
    font-size:var(--addresslist);
    background:var(--subgroup-bg);
}
#address-list li:hover {
    background:var(--subgroup-block);
}
#buttons {
    display:flex;
    text-align:center;
    margin:30px 5px 20px;
    padding:10px 0 0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* Datepicker */

.hasDatepicker {
    position:relative;
}
#datepick {
    position:relative;
    padding:0 0 15px;
    width:100%;
    max-width:320px;
    margin:0 auto;
}
#datepick input, #booking-type select, #timepicker select, .prettydate {
    width:100%;
    height:50px;
    background-color:var(--background);
    border-width:2px;
    border-style:solid;
    border-color:var(--button-border);
    background-image: linear-gradient(45deg, transparent 50%, #999 50%),
    linear-gradient(135deg, #999 50%, transparent 50%),
    linear-gradient(to right, #ddd, #ddd);
    background-position: calc(100% - 20px) 1.2em,
    calc(100% - 15px) 1.2em,
    calc(100% - 2.5em) 0.33em;
    background-size: 5px 5px, 5px 5px, 1px 36px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 6px 40px 4px 15px;
}
#datepick input::placeholder, #datepick input::-webkit-input-placeholder, #datepick input::-moz-placeholder, #datepick input:-ms-input-placeholder, #datepick input:-moz-placeholder {
    color:var(--select);
}
.prettydate {
    position:absolute;
    top:0;
    left:0;
}
#ui-datepicker-div {
    display:none;
    border-radius:10px;
    overflow:hidden;
    border-width:2px;
    border-style:solid;
    margin:5px auto 0;
    background-color:#fff;
    border-color:var(--datepkr-head);
    width:calc(100% - 40px);
    max-width:320px;
}
.ui-datepicker {
    padding:0 0 10px 0;
}
.ui-datepicker-header {
    height:50px;
    line-height:50px;
    margin-bottom:15px;
    color:var(--datepkr-head-txt);
    background:var(--datepkr-head);
}
.ui-datepicker-prev, .ui-datepicker-next {
    width:25px;
    height:25px;
    text-indent:9999px;
    cursor:pointer;
    overflow:hidden;
    margin-top:13px;
    border-width:2px;
    border-style:solid;
    border-radius:100%;
    border-color:var(--datepkr-head-txt);
}
.ui-datepicker-prev {
    float:left;
    margin-left:12px;
}
.ui-datepicker-prev:after {
    transform:rotate(45deg);
    margin:-43px 0px 0px 8px;
}
.ui-datepicker-next {
    float:right;
    margin-right:12px;
}
.ui-datepicker-next:after {
    transform:rotate(-135deg);
    margin:-43px 0px 0px 6px;
}
.ui-datepicker-prev:after, .ui-datepicker-next:after {
    content:'';
    position:absolute;
    display:block;
    width:7px;
    height:7px;
    border-left-width:2px;
    border-left-style:solid;
    border-bottom-width:2px;
    border-bottom-style:solid;
    border-left-color:var(--datepkr-head-txt);
    border-bottom-color:var(--datepkr-head-txt);
}
.ui-datepicker-prev:hover, .ui-datepicker-next:hover, .ui-datepicker-prev:hover:after, .ui-datepicker-next:hover:after {
    border-color:var(--brnd-col-light);
}
.ui-datepicker-title {
    text-align:center;
}
.ui-datepicker-calendar {
    width:100%;
    text-align:center;
}
.ui-datepicker-calendar thead tr th span {
    display:block;
    width:38px;
    margin-bottom:5px;
    font-size:13px;
    color:var(--brnd-col-light);
}
.ui-state-active.ui-state-active {
    color:var(--background);
    background-color:var(--brnd-col-light);
}
.ui-datepicker-unselectable .ui-state-default {
    color:var(--text-disabled);
}
.ui-state-default {
    display:block;
    text-decoration:none;
    line-height:43px;
    font-size:var(--smallfont);
    border-radius: 50%;
    padding-left: 1px;
    color:#333;
    transition:0.2s;
}
a.ui-state-default:hover {
    color:var(--background);
    background-color:var(--brnd-col-light);
}
.ui-state-highlight {
    color:var(--brnd-col-light);
}

/* Timepicker */
#timepicker {
    margin:0 auto;
    text-align:center;
    width:100%;
    max-width:320px;
    padding:0;
}
#timepicker select, #booking-type select {
    width:100%;
}
select {
    margin:0;
    height:42px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-color: var(--background);
    border: 2px solid var(--button-border);
    border-radius: 5px;
    display: inline-block;
    font: inherit;
    color:var(--select);
    line-height: 1.5em;
    padding:6px 40px 4px 15px;
}
/* arrows */
select {
    background-image:
      linear-gradient(45deg, transparent 50%, #999 50%),
      linear-gradient(135deg, #999 50%, transparent 50%),
      linear-gradient(to right, #ddd, #ddd);
    background-position:
      calc(100% - 20px) 1em,
      calc(100% - 15px) 1em,
      calc(100% - 2.5em) 0.33em;
    background-size:
      5px 5px,
      5px 5px,
      1px 28px;
    background-repeat: no-repeat;
}
select:focus {
    background-image:
      linear-gradient(45deg, var(--brnd-col-light) 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, var(--brnd-col-light) 50%),
      linear-gradient(to right, #ddd, #ddd);
    background-position:
      calc(100% - 15px) 1em,
      calc(100% - 20px) 1em,
      calc(100% - 2.5em) 0.33em;
    border-color:var(--brnd-col-light);
    outline:0;
}
#collection {
    margin:30px auto 0;
}
#booking-notes {
    margin:20px auto 0;
    max-width:320px;
}
#booking-notes label {
    padding: 0 0 8px 2px;
}
#booking-notes textarea {
    height:120px;
}
#confirmation tr td:first-of-type {
    font-weight:700;
}

/* Desktop */
@media (min-width:800px) {

    p, input {
        font-size:16px;
    } 
    h1 {
        font-size:28px;
    }
    h1.h1small {
        font-size:24px;
        padding:20px 0 10px;
        text-align:center;
    }
    h2{
        font-size:26px;
    }
    h3{
        font-size:19px;
        font-weight:400;
    }
    .wide {display:inline;}
    #confirmation td {
        padding: 8px 10px;
    }
    #container {
        padding:15px;
    }
    #getsummary {
        opacity:0;
    }
    #closesumm {
        display:none;
    }
    #title, #subhead {
        padding:0;
    }
    .vehicleimgcontainer {
        display:none;
    }
    #firstinput, #booksumm {
        flex-direction:row;
        align-items:center;
        justify-content:center;
        padding:10px 0 0;
    }
    input[type=text], input[type=number], #firstinput input#surname, #firstinput input#vrm, input#email {
        height:50px;
    }
    input[type=text], input[type=number] {
        padding:16px 0 0 14px;
    }
    .floating-label, .floaticon-label {
        top: 17px;
    }
    input:focus ~ label.floaticon-label, input:valid ~ label.floaticon-label  {
        left:46px;
    }
    #milesinput input:focus ~ label.floaticon-label, #milesinput input:valid ~ label.floaticon-label  {
        left:49px;
    }
    select {
        height: 50px;
        background-position: 
            calc(100% - 20px) 1.3em,
            calc(100% - 15px) 1.3em,
            calc(100% - 2.5em) 0.33em;
        background-size: 
            5px 5px,
            5px 5px,
            1px 36px;
    }
    select:focus {
        background-position:
          calc(100% - 15px) 1.2em,
          calc(100% - 20px) 1.2em,
          calc(100% - 2.5em) 0.33em;
    }
    .button {
        min-width:280px;
        padding:10px 14px;
        margin:0 11px 15px; 
    }
    #summary p, p.scar {
        font-size:15px;
    }
    #thesummary {
        display:block;
    }
    #mobilesummary {
        display:none;
    }
    #thesummary.summarise {
        display:block;
    }
    #booksumm {
        display:none;
        align-items:flex-start;
        align-content:flex-start;
        padding:10px;
        border:1px solid #CCCCCC;
        border-radius:20px;
    }
    .summtitle {
        position:static;
        top:auto;
    }
    #booksumm #vehicleimag {
        width:50%;
        max-width:400px;
    }
    #booksumm #vehicleimag img {
        padding:5px 0 2px;
    }
    #booksumm #summary {
        padding: 10px 10px 0 20px;
    }
    .sthereg {
        letter-spacing:2px;
        font-size:20px;
    }
    #service-fields .services {
        padding:0 0 10px 0;
    }
    #services label:hover input ~ .checkmark, .checkcontainer:hover input ~ .checkmark {
        background-color:var(--checkbox-hover);
    }
    #services label:hover input:checked ~ .checkmark {
        background-color:var(--brnd-col-light);
    }
    #headingblock {
        padding:25px 0 5px
    }
    #headingblock .vehicleimag {
        display:none;
    }
    #name {
        flex-direction:row;
    }
    #con-title {
        width:20%;
    }
    #con-firstname, #con-surname2 {
        width:40%;
    }
    #email, #firstinput input#surname, #firstinput input#vrm, input#postcode {
        padding-left:47px;
        background-position:12px 50%;
    }
    #milesinput input#mileage {
        padding-left:50px;
        background-position:12px 50%;
    }
    .floaticon-label {
        left:46px;
    }
    #workshops{
        flex-direction:row;
    }
    #workshopmenu {
        margin-left:10px;
    }
    #workshopdetail {
        margin-right:10px;
        height:460px;
        margin-bottom:0;
    }
    .formcon input[type=text]:first-child {
        margin-right:15px;
    }
    #location, #telephone {
        flex-direction:row;
    }
    .carform {
        flex-direction:row;
    }
    #services h3 {
        padding:13px 22px;
    }
    #services #service-fields label {
        padding:0;
    }
    #services #service-fields .requirement {
        padding:12px 25px 12px 65px;
    }
    #services #approved-fields .requirement, #services #value-fields .requirement, #services #mot-fields .requirement {
        padding:20px 20px 15px 55px;
    }
    #services #approved-fields .requirement:first-child, #services #value-fields .requirement:first-child, #services #mot-fields .requirement:first-child {
        padding:8px 20px 15px 55px;
    }
    #services #approved-fields .requirement:last-child, #services #value-fields .requirement:last-child, #services #mot-fields .requirement:last-child {
        padding:20px 20px 12px 55px;
    }
    #services #service-fields ul {
        padding: 8px 0 0 0;
    }
    #services #approved-fields ul {
        padding: 8px 50px 0 20px;
    }
    #services #approved-fields ul, #services #value-fields ul, #services #mot-fields ul {
        padding: 8px 50px 0 0;
    }
    #services #service-fields .reqnotes {
        padding: 0;
    }
    #services #approved-fields .reqnotes label, #services #value-fields .reqnotes label, #services #mot-fields .reqnotes label {
        padding: 8px 0 3px 2px;
    }
    #services #service-fields .reqnotes label {
        padding: 8px 0 3px 2px;
    }
    #approved-fields li.additem, #value-fields li.additem, #mot-fields li.additem {
        flex-wrap:nowrap;
    }
    #services #approved-fields .additem .price, #services #value-fields .additem .price, #services #mot-fields .additem .price {
        padding: 4px 0 0 0;
        text-align:right;
        width: 20%;
    }
    #services .reqnotes textarea {
        margin:0;
    }
    #services li {
        padding:0 0px;
    }
    #services h3::after {
        right:23px;
        top:21px;
    }
    #service-fields label .checkmark {
        left:-40px;
    }
    #booking-type {
        width:100%;
        padding:0 10px 0 0;
    }
    #date-select {
        display:flex;
        padding:0;
    }
    #timepicker {
        padding:0 0 0 10px;
        margin: 0 auto;
    }
    .ui-datepicker {
        margin:0;
    }
    .ui-state-default {
        line-height:41px;
    }
    .ui-datepicker-calendar thead tr th span {
        width:42px;
    }
    select {
        width:auto; 
    }
    #booking-notes {
        margin:30px auto 0;
        max-width: 1000px;
    }
    #booking-notes textarea {
        height:auto;
    }
    .brands img {
        width:50px;
        margin:2px 15px 2px 0;
    }
}