@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Custom CSS cache check
--------------------------*/
html::before {
content: 'CSS v0.705';
display: none;
}
/*-------------------.
| Get Quote template |
'--------------------'
A simplified, progressively enhanced alternative to ss-custom.css
Focused on making the CSS easier to work with on high-end custom sites.
Removes !important flags, reduces selector specificity and reintroduces the cascade.
!important is occasionally used when there is no other option e.g. inline styles.
*/
:root {
/* Brand colours */
--gq-color-primary: #00f;
--gq-color-secondary: #00c;
--gq-color-tertiary: #00a;
/* Messaging colours */
--gq-color-success: green;
--gq-color-warning: orange;
--gq-color-error: red;
/* Spacing */
--gq-gap-xxs: 0.25em;
--gq-gap-xs: 0.5em;
--gq-gap-s: 1em;
--gq-gap: 1.5em;
--gq-gap-l: 2em;
--gq-gap-xl: 2.5em;
--gq-gap-2xl: 3em;
--gq-gap-3xl: 4.5em;
/* Borders */
--gq-color-border: #ccc;
--gq-color-border-light: #eee;
--gq-border-radius: 5px;
/* Box shadow */
--gq-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15);
/* Icons */
--gq-icon-dimensions: 16px;
}
/* Existing gap utilities are ignored
.gaptop20, .gaptop30 {} */
::selection {
background: color-mix(in srgb, var(--gq-color-tertiary) 20%, #0000);
}
/* Reset
---------*/
.gq-js *,
.gq-js *::before,
.gq-js *::after {
box-sizing: border-box;
margin: 0;
}
.gq-js {
font-size: 16px !important; /* Override inline style */
}
/* HTML
--------*/
html {
interpolate-size: allow-keywords;
overflow-x: hidden; /* Clip full-bleed header */
touch-action: manipulation; /* Faster taps */
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* Body
--------*/
.gq-js body {
accent-color: var(--gq-color-primary);
color: #222;
font-family: 'Poppins', sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
/* Doesn't apply to */
scrollbar-color: var(--gq-color-primary) var(--gq-color-border-light);
}
/* Improve media defaults */
canvas, img, video {
display: block;
height: auto;
max-width: 100%;
}
/* Custom HTML wrap utility
----------------------------*/
.wrap {
margin: 0 auto;
padding: 0 1em;
padding: 0 clamp(1em, 7.5vw, 3em);
}
/* Anchor, links
-------------------------*/
.gq-js a,
.gq-js div.edgy.edgy.edgy a,
.gq-js input.link,
.gq-js div.edgy input.link {
color: var(--gq-color-primary);
font: inherit;
padding: 0;
}
.gq-js a:hover,
.gq-js div.edgy.edgy.edgy a:hover,
.gq-js input.link:hover,
.gq-js div.edgy input.link:hover {
color: var(--gq-color-secondary);
}
/* List
--------*/
ol, ul {
max-inline-size: 80ch;
padding: 1em 0 1em 1.25em;
}
ol.reset, ul.reset {
list-style: none;
padding: 0;
}
/* Paragraph
-------------*/
.gq-js p,
.gq-js div.edgy p,
.gq-js div.edgy p.field_desc {
font: inherit;
margin: 1em 0;
# max-inline-size: 64ch;
}
/* Heading
-----------*/
.gq-js h1,
.gq-js h2, .gq-js .h2,
.gq-js h3, .gq-js .h3,
.gq-js h4, .gq-js .h4,
.gq-js h5, .gq-js .h5,
.gq-js h6, .gq-js .h6 {
color: var(--gq-color-primary);
float: none;
font-weight: 600;
line-height: calc(0.5rem + 1em); /* reduce line-height as font-size grows */
margin: 1em 0;
max-inline-size: 56ch;
padding: 0;
text-wrap: pretty;
}
.gq-js h1, .gq-js .h1 {
font-size: 2em;
}
.gq-js h2, .gq-js .h2 {
font-size: 1.8em;
}
.gq-js h3, .gq-js .h3 {
font-size: 1.6em;
}
.gq-js h4, .gq-js .h4 {
font-size: 1.4em;
}
.gq-js h5, .gq-js .h5 {
font-size: 1.2em;
}
.gq-js h6, .gq-js .h6 {
font-size: 1.1em;
}
.gq-js :is(h2, h3, h4, h5, h6) span {
font-size: 0.875em;
}
/* Custom HTML button set utility
----------------------------------*/
.gq-js .buttonSet {
display: flex;
flex-wrap: wrap;
gap: var(--gq-gap-s);
}
/* Button
----------*/
.gq-js a.button,
.gq-js button,
.gq-js input[type='button'],
.gq-js input[type='submit'],
.gq-js .SummaryButtons a {
background: var(--gq-color-primary);
border-color: transparent; /* 'input' buttons */
border-radius: 0;
color: #fff;
display: inline-block;
font: inherit;
font-weight: 600;
height: auto;
margin: 0;
padding: 0.875em 2.75em;
text-decoration: none;
text-transform: lowercase;
transition: background-color 0.3s ease-out;
user-select: none;
width: auto;
}
.gq-js a.buttonSecondary,
.gq-js button.buttonSecondary {
background: var(--gq-color-secondary);
}
.gq-js a.buttonTertiary,
.gq-js button.buttonTertiary {
background: var(--gq-color-tertiary);
}
.gq-js a.button:hover,
.gq-js button:hover,
.gq-js input[type='button']:hover,
.gq-js input[type='submit']:hover,
.gq-js header .login.login a:hover,
.gq-js .SummaryButtons a:hover {
background: var(--gq-color-tertiary);
color: #fff;
transition-duration: 0s;
}
/* Input
---------*/
.gq-js input,
.gq-js div.edgy input {
background: #fafafa;
border: 1px solid var(--gq-color-border);
border-radius: 0;
color: inherit;
float: none;
font: inherit;
height: auto;
/* margin: 0 0 var(--gq-gap-xs); Save for specific input types */
/* 65vw accounts for prefix/suffix labels on mobile */
max-width: min(56ch, 65vw, 100%);
padding: calc(var(--gq-gap-s) - var(--gq-gap-xxs)) var(--gq-gap-s);
vertical-align: middle;
width: auto;
}
/* Indent */
.gq-js:not(#x) input.indent {
margin-left: var(--gq-gap);
/* margin: 0 0 var(--gq-gap-xs) var(--gq-gap); */
}
/* Override manual widths */
.gq-js .question input,
.gq-js:not(#x) input.big,
.gq-js:not(#x) input.money,
.gq-js:not(#x) input.number,
.gq-js:not(#x) input.password,
.gq-js:not(#x) input.small,
.gq-js:not(#x) input.tiny {
width: auto;
}
/* Stubborn warning styles */
.gq-js:not(#x) input[type='text'].warning {
padding: calc(var(--gq-gap-s) - var(--gq-gap-xxs)) var(--gq-gap-s);
}
/* Checkbox
------------*/
.gq-js input[type='checkbox'],
.gq-js div.edgy input[type='checkbox'] {
border: 1px solid var(--gq-color-border);
border-radius: var(--gq-border-radius);
height: 1em;
padding: 0;
vertical-align: middle;
width: 1em;
}
/* Radio
---------
Note: Both label and the enclosed radio input are '.radio'
*/
.gq-js .radio {
height: auto;
width: auto;
}
.gq-js label.radio {
display: block;
}
.gq-js input[type='radio'],
.gq-js div.edgy input[type='radio'] {
accent-color: var(--gq-color-secondary);
background: none;
border: 1px solid var(--gq-color-border);
height: 1em;
padding: 0;
vertical-align: middle;
width: 1em;
}
.gq-js label input[type='radio'] {
margin-right: var(--gq-gap-xs);
}
/* Label
---------*/
.gq-js label,
.gq-js div.edgy label {
cursor: initial;
display: block;
font: inherit;
margin: 0 0 var(--gq-gap-xs);
max-width: min(80vw, 100%);
padding: 0;
text-align: left;
user-select: none;
vertical-align: middle;
}
/* Select
----------*/
.gq-js select,
.gq-js div.edgy select {
background: #fafafa;
border: 1px solid var(--gq-color-border);
border-radius: var(--gq-border-radius);
color: inherit;
field-sizing: content; /* Automatic expansion. Chromium only. */
font: inherit;
height: auto;
margin: 0 0 var(--gq-gap-xs);
max-inline-size: min(48ch, 80vw, 100%);
min-height: 2.125em;
min-inline-size: 6ch;
padding: calc(var(--gq-gap-s) - var(--gq-gap-xxs)) var(--gq-gap-s);
vertical-align: middle;
}
/* Textarea
------------*/
.gq-js textarea,
.gq-js div.edgy textarea {
border: 1px solid var(--gq-color-border);
color: inherit;
field-sizing: content; /* Automatic expansion. Chromium only. */
font: inherit;
margin-inline-end: 1em;
max-width: min(64ch, 80vw, 100%);
min-height: 4em;
min-width: 24ch;
padding: var(--gq-gap-s);
}
/* Disabled
------------*/
:disabled, .disabled {
cursor: not-allowed;
opacity: 0.5 !important;
text-decoration: none !important;
}
:disabled:active, .disabled:active {
pointer-events: none;
}
/* Errors
----------*/
.gq-js input.error,
.gq-js select.error {
border-color: var(--gq-color-error);
}
/* Focus
---------*/
:focus-visible {
outline: 2px solid;
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* Char labels
---------------*/
.gq-js .char_label {
font: inherit;
vertical-align: middle;
}
.gq-js .char_label.prefix {
margin-right: var(--gq-gap-xs);
}
.gq-js .char_label.suffix {
margin-left: var(--gq-gap-xs);
}
/* Header: login
-----------------*/
.gq-js header .login {
padding: 0;
}
.gq-js header .login a {
display: block;
padding: 0;
min-height: 46px;
background: var(--gq-color-primary);
border-color: transparent; /* 'input' buttons */
border-radius: 0;
color: #fff;
display: inline-block;
font: inherit;
font-weight: 600;
margin: 0;
padding: 10px 20px;
text-decoration: none;
text-transform: lowercase;
transition: background-color 0.3s ease-out;
user-select: none;
width: auto;
}
@media (min-width: 768px) {
.gq-js header .login {
/* padding: 10px 50px */;
}
}
/* Messaging: errors, info, warnings.
-------------------------------------*/
.gq-js .MessagingContainer div {
font: inherit;
padding: 0;
position: relative;
}
.gq-js .MessagingContainer > div {
border: 0;
text-wrap: balance;
}
.gq-js .MessagingContainer > div > div {
border: 0;
padding: var(--gq-gap-s) var(--gq-gap);
}
.gq-js .MessagingContainer img.close {
position: absolute;
right: var(--gq-gap-xs);
top: var(--gq-gap-xs);
}
/* Notification bar
--------------------*/
.gq-js .bg-primary {
background: var(--gq-color-primary);
}
.gq-js .ss-button {
background: #fff;
color: var(--gq-color-primary);
}
.gq-js .nav_buttons .previous_button {
margin: 0;
}
/* Footer
----------*/
html.gq-js footer {
background: var(--gq-color-primary);
border: 0;
margin-top: var(--gq-gap-2xl);
padding: var(--gq-gap) 0;
}
.gq-js footer p {
margin-inline: auto;
text-wrap: balance;
}
.gq-js footer a,
.gq-js footer a:hover,
.gq-js footer a:active {
background: 0;
text-decoration: none;
}
@media (min-width: 720px) {
html.gq-js footer {
margin-top: var(--gq-gap-3xl);
}
.gq-js footer ul {
display: flex;
flex-wrap: wrap;
gap: var(--gq-gap-xs);
justify-content: center;
margin: 0 auto;
}
.gq-js footer li + li {
border-inline-start: 1px solid;
padding-inline-start: var(--gq-gap-xs);
}
}
/* Sticky footer */
@media (min-height: 1024px) {
html, body {
height: 100%;
}
.gq-js #aspnetForm {
min-height: 100%;
}
.gq-js footer {
position: sticky;
top: 100vh;
}
}
/* General page
----------------*/
/*
#ctl00_MainContent_article {
margin: 0 auto;
max-width: 1200px;
padding: var(--gq-gap-s);
}
@media (min-width: 768px) {
#ctl00_MainContent_article {
padding: var(--gq-gap);
}
}
@media (min-width: 1024px) {
#ctl00_MainContent_article {
padding: var(--gq-gap-l);
}
}
*/
#ctl00_MainContent_article {
padding: 0;
margin: 0 auto;
max-width: 1200px;
}
/* Get quote page
------------------*/
.gq-js article {
padding: 0;
}
.gq-js .getquote-ui {
padding: 0 var(--gq-gap-s);
padding: 0 clamp(var(--gq-gap-xs), 5%, var(--gq-gap-2xl));
margin: 0 auto;
max-width: 1160px;
min-height: 50vh; /* Minimise render jump */
width: 100%;
}
/* 'edgy' cards
----------------*/
.gq-js .getquote-ui .edgy {
background: #fff;
border: 0;
border-radius: var(--gq-border-radius);
box-shadow: var(--gq-box-shadow);
margin: 0 0 var(--gq-gap);
overflow: hidden;
padding: var(--gq-gap-xs) var(--gq-gap-s);
}
/* Leave further overrides for specific pages */
/*
.gq-js.gq-js div.edgy input,
.gq-js.gq-js div.edgy label,
.gq-js.gq-js div.edgy p {
color: inherit;
font: inherit;
}
*/
@media (min-width: 360px) {
.gq-js .getquote-ui .edgy {
padding: var(--gq-gap-xs) var(--gq-gap-s);
padding:
clamp(var(--gq-gap-xs), 3.75vw, var(--gq-gap))
clamp(var(--gq-gap-s), 5vw, var(--gq-gap-l))
clamp(var(--gq-gap-xs), 3.75vw, var(--gq-gap-l));
}
}
/* Get quote login/search
--------------------------*/
#getquote_agent_aspx .edgy label span {
color: inherit;
}
#getquote_agent_aspx .edgy label.big {
font-size: 1.8em;
}
#getquote_agent_aspx .edgy .link {
/* color: var(--gq-color-secondary); */
text-decoration: none;
}
#getquote_agent_aspx .getquote-ui div.edgy p.field_desc {
color: #000;
}
/* Get quote search results
----------------------------*/
.gq-js .SearchItem {
padding: 0;
}
.gq-js .SearchItem + .SearchItem {
margin-top: var(--gq-gap-s);
}
.gq-js .SearchItem .InfoText {
padding: 0;
}
.gq-js .SearchItem .InfoText br {
display: none;
}
/* Get quote schemes list
--------------------------*/
.gq-js #ctl00_MainContent_divChooseScheme ul {
padding: 0;
}
.gq-js #ctl00_MainContent_divChooseScheme ul li {
border: 1px solid var(--gq-color-border);
border-radius: var(--gq-border-radius);
box-shadow: var(--gq-box-shadow);
padding: var(--gq-gap-s);
margin-bottom: var(--gq-gap-s);
}
/* Get quote main content
--------------------------*/
.gq-js #ctl00_MainContent_divGetQuote {
padding: 0;
}
@media (min-width: 768px) {
.gq-js #ctl00_MainContent_divGetQuote {
align-items: flex-start;
display: flex;
}
}
/* Page stubs
--------------*/
/* TO DO: Scroll snap? Mobile only.
Always show availability of next one, unless last. */
.gq-js #page_stubs {
border: 0;
border-radius: var(--gq-border-radius);
box-shadow: var(--gq-box-shadow);
counter-reset: stubs;
display: flex;
float: none;
margin-bottom: var(--gq-gap-s);
overflow: auto;
padding: 0;
user-select: none;
white-space: nowrap;
}
.gq-js .stub {
border: 0;
counter-increment: stubs;
font-weight: 600;
height: auto;
overflow: visible;
padding: var(--gq-gap-s) var(--gq-gap);
width: auto;
}
.gq-js .stub + .stub {
border: 0 solid var(--gq-color-border-light);
border-width: 0 0 0 1px;
}
.gq-js .selected_stub {
background: var(--gq-color-primary);
color: #fff;
}
.gq-js .stub .inner {
display: inline-block;
float: none;
font: inherit;
max-width: calc(100% - var(--gq-gap-l));
padding: 0;
vertical-align: middle;
}
.gq-js .stub::before {
content: counter(stubs)'. ';
vertical-align: middle;
}
.gq-js .stub img {
right: var(--gq-gap-xxs);
top: calc(50% - var(--gq-icon-dimensions) / 2 - 1px);
}
@media (min-width: 768px) {
.gq-js #page_stubs {
flex-direction: column;
max-width: 340px;
min-width: 260px;
position: sticky;
top: var(--gq-gap);
white-space: normal;
width: 20%;
}
.gq-js .stub + .stub {
border-width: 1px 0 0;
}
/* .gq-js .stub .inner::before */
.gq-js .stub::before {
background: #fff;
align-items: center;
aspect-ratio: 1/1;
border: 1px solid currentColor;
border-radius: 50%;
color: var(--gq-color-primary);
content: counter(stubs);
display: inline-flex;
justify-content: center;
line-height: 1;
margin-inline-end: var(--gq-gap-xs);
min-width: 1.5em;
}
.gq-js .selected_stub::before {
border-color: transparent;
}
}
/* Get Quote pages
-------------------*/
.gq-js #pages,
.gq-js #pages_postquote {
background: #fff;
border-radius: var(--gq-border-radius);
box-shadow: var(--gq-box-shadow);
overflow: hidden;
margin: 0;
padding: 0 var(--gq-gap);
}
.gq-js .page {
border: 0;
padding: 0;
}
@media (min-width: 768px) {
.gq-js #pages,
.gq-js #pages_postquote {
margin-left: var(--gq-gap-s);
width: 80%;
}
}
@media (min-width: 1200px) {
.gq-js #pages,
.gq-js #pages_postquote {
margin-left: var(--gq-gap);
}
}
/* Get Quote questions
-----------------------*/
.gq-js .question {
padding: 0;
position: relative;
margin-bottom: var(--gq-gap);
}
.gq-js .question:not(#x) .text {
color: inherit;
font-weight: 600;
margin: 0 0 var(--gq-gap-xs) 0;
}
/* Question info/help
----------------------*/
.gq-js .question .text .info_text {
font-weight: 400;
max-width: 64ch;
}
.gq-js .question .text .help_link {
position: absolute;
right: 0;
top: 0;
}
.gq-js .question .text .help_link img {
height: var(--gq-icon-dimensions);
left: 0.125em;
position: relative;
width: var(--gq-icon-dimensions);
}
.gq-js .question.warning .text {
color: var(--gq-color-error);
}
.gq-js .question .text .help_text {
border: 1px solid var(--gq-color-border);
border-radius: var(--gq-border-radius);
box-shadow: var(--gq-box-shadow);
left: auto;
padding: var(--gq-gap-s);
right: 0;
top: 24px;
}
.gq-js .question .QuestionWarning {
cursor: help !important;
height: var(--gq-icon-dimensions);
padding: 0;
position: absolute;
right: 0;
top: 0;
width: var(--gq-icon-dimensions);
}
/* Question: Address based control types
-----------------------------------------*/
.gq-js .client-address .line {
margin: 0 0 var(--gq-gap-xs) 0;
}
/* .label-uprn, .label-udprn should remain display: none; */
.gq-js .client-address label:not(.label-uprn):not(.label-udprn) {
display: block;
width: auto;
}
.gq-js .client-address input {
margin: 0;
}
.gq-js .client-address .lookupLink {
text-align: left;
}
.gq-js .client-address .ManualAddressLink {
margin-left: 0;
}
/* Question: checkbox
----------------------*/
.gq-js .CheckBox label {
margin-left: var(--gq-gap-xs);
}
/* TO DO: Better spacing for repeated Checkbox questions? */
/* Question: Client name control types
---------------------------------------*/
.gq-js .client-contact-name label {
display: block;
margin: 0 0 var(--gq-gap-xs) 0;
}
.gq-js .client-contact-name label input {
margin: 0;
width: auto;
}
.getquote-ui .client-contact-name select {
height: auto;
}
/* Question: Adm dropdown wrapper
----------------------------------*/
.gq-js .admdropdown {
display: inline-block;
width: 100%;
}
.gq-js .admdropdown .ui-combobox {
}
.gq-js .admdropdown .ui-combobox a {
border: 0;
padding: 0;
position: absolute;
right: var(--gq-gap-xs);
top: 0;
width: 1em;
}
.gq-js .ui-autocomplete {
background-color: #fff;
border: 1px solid var(--gq-color-border);
border-radius: var(--gq-border-radius);
padding: 0;
}
.gq-js .ui-autocomplete a {
border: 0;
border-radius: 0;
padding: var(--gq-gap-xs);
text-decoration: none;
}
.gq-js .ui-autocomplete a:hover,
.gq-js .ui-autocomplete a:focus {
background: var(--gq-color-primary);
color: #fff;
padding: var(--gq-gap-xs);
text-decoration: none;
}
/* Question: Date based control types
--------------------------------------*/
.gq-js .DateDropDown {
font-size: inherit;
}
.gq-js .DateDropDown select {
width: 100%;
margin-bottom: 0;
}
.gq-js .DateDropDown select + select {
margin-top: var(--gq-gap-xs);
}
@media (min-width: 400px) {
.gq-js .DateDropDown select {
width: auto;
}
.gq-js .DateDropDown select + select {
margin: 0;
margin-left: var(--gq-gap-xs);
}
}
/* Question: client.email
--------------------------*/
.gq-js .Client\.Email .question {
margin-bottom: var(--gq-gap-xs);
}
/* Replaced with placeholders via custom JS */
.gq-js .Client\.Email label,
.gq-js .Client\.Email br {
display: none;
}
/* Question: Client.EmailAndPassword
-------------------------------------*/
.gq-js .Client\.EmailAndPassword .question {
margin-bottom: var(--gq-gap-xs);
}
.gq-js .Client\.EmailAndPassword label,
.gq-js .Client\.EmailAndPassword br {
display: none;
}
/* Forgot password prompt */
.gq-js .Client\.EmailAndPassword .question > div:last-child {
display: none;
}
.gq-js .Client\.EmailAndPassword .question:nth-child(2) {
margin-bottom: var(--gq-gap-s);
}
.gq-js .Client\.EmailAndPassword .question:last-child {
margin-bottom: 0;
}
/* Question: DvlaLookup
------------------------*/
.DvlaLookup .Registration input {
margin-bottom: var(--gq-gap-xs);
}
.gq-js .DvlaLookup input[type='text'] {
margin-right: var(--gq-gap-xs);
}
/* Align with input */
.gq-js .DvlaLookup input[type='button'] {
padding: var(--gq-gap-xxs) var(--gq-gap-s);
}
/* Question: EmployersReferenceNumber
--------------------------------------*/
.gq-js .question .ern span {
display: inline-block;
}
.gq-js .question .ern [id^='RequiredContainer'] {
display: block;
}
.gq-js .question .ern [id^='taxOfficeNumberContainer'] input {
width: 7ch;
}
.gq-js .question .ern .delimiter {
padding: 0 var(--gq-gap-xs);
}
.gq-js .question .ern [id^='ERNContainer'] input {
width: 14ch;
}
/* Question: InitialPaymentAmount
----------------------------------*/
/* Repetitive label */
.gq-js .InitialPaymentAmount .InitialPaymentAmount span {
display: none;
}
/* Eliminate white space */
.gq-js .InitialPaymentAmount .InitialPaymentAmount input {
clear: both;
float: left;
}
/* Question: MultiPage
-----------------------*/
.gq-js .question.MultiPage > .text h3 {
margin: 0 0 var(--gq-gap-xs) 0;
}
.gq-js .TableControlContainer {
border: 1px solid var(--gq-color-border);
border-radius: var(--gq-border-radius);
}
.gq-js .multipagecontroller {
padding: 0;
}
/* Multipage options */
.gq-js ul.multi-page-options {
align-items: center;
display: flex;
flex-wrap: wrap;
padding: var(--gq-gap-xs);
text-align: left;
}
.gq-js ul.multi-page-options li {
display: flex;
}
.gq-js ul.multi-page-options li:first-child {
margin: 0 0 var(--gq-gap-xs);
width: 100%;
}
.gq-js ul.multi-page-options li a {
margin: 0 var(--gq-gap-xs);
text-decoration: none;
}
.gq-js ul.multi-page-options li select {
max-width: 32ch; /* Avoid pushing away buttons on desktop */
width: 100%;
}
/* Multipage page */
.gq-js .multi-page ul li {
margin: 0;
}
.gq-js .multi-page ul li input:not([type='button']) {
padding-inline: var(--gq-gap-xs);
}
.gq-js .multi-page ul li select {
padding-left: var(--gq-gap-s);
}
.gq-js .MultiPage .multi-page {
border: 0;
border-top: 1px solid var(--gq-color-border);
border-bottom: 1px solid var(--gq-color-border);
padding: var(--gq-gap-xs);
}
.gq-js .MultiPage .AddRow:not(.AddPageButton) {
align-items: center;
display: flex;
font-weight: 500;
justify-content: center;
padding: var(--gq-gap-xs) 0;
text-decoration: none;
}
.gq-js .MultiPage .AddRow:not(.AddPageButton) img {
margin-left: var(--gq-gap-xs);
}
@media (min-width: 960px) {
.gq-js ul.multi-page-options {
padding: var(--gq-gap-s);
}
.gq-js ul.multi-page-options li:nth-child(1) {
margin: 0 var(--gq-gap-s) 0 0;
max-width: min(56ch, 65vw, 100%);
width: auto;
}
.gq-js ul.multi-page-options li:not(:first-child) {
width: 3em;
}
.gq-js .MultiPage .multi-page {
padding: var(--gq-gap-s);
}
.gq-js .MultiPage .AddRow:not(.AddPageButton) {
padding: var(--gq-gap-s) 0;
}
}
/* Question: Spacer
--------------------*/
.gq-js .Spacer {
height: var(--gq-gap); /* Automatically includes margin of --gq-gap */
}
/* Question: TableControl
--------------------------
TO DO: not reworked this yet. */
.gq-js .question.TableControl .TableControl {
border: 1px solid var(--gq-color-border);
border-radius: var(--gq-border-radius);
padding: 0;
overflow: auto;
text-align: left;
}
.gq-js .question.TableControl .TableControl thead {
border: 0;
border-bottom: 1px solid var(--gq-color-border);
}
.gq-js .question.TableControl .TableControl thead th {
border: 0;
color: inherit;
font-weight: 500;
padding: var(--gq-gap-xs);
padding-left: 0;
min-width: 125px;
white-space: nowrap;
}
.gq-js .question.TableControl .TableControl thead th:first-child {
padding-left: var(--gq-gap-xs);
}
.gq-js .question.TableControl .TableControl thead th:last-child {
min-width: auto;
}
.gq-js .question.TableControl .TableControl tbody td {
padding: var(--gq-gap-xs);
padding-left: 0;
vertical-align: middle;
}
.gq-js .question.TableControl .TableControl tbody td select {
margin: 0;
}
.gq-js .question.TableControl .TableControl tbody td textarea {
height: var(--gq-gap-xxs);
}
.gq-js .question.TableControl .TableControl tbody td input {
padding: calc(var(--gq-gap-s) - var(--gq-gap-xxs)) var(--gq-gap-s);
}
.gq-js .question.TableControl .TableControl tbody td:first-child {
padding-left: var(--gq-gap-xs);
}
.gq-js .question.TableControl .TableControl tbody td .delete {
align-items: center;
display: flex;
text-decoration: none;
}
.gq-js .question.TableControl .TableControl tbody td .delete span {
display: none;
}
.gq-js .question.TableControl .TableControl tfoot td {
border-top: 1px solid var(--gq-color-border);
padding: var(--gq-gap-xs);
padding-left: 0;
vertical-align: middle;
}
.gq-js .question.TableControl .TableControl tfoot td:first-child {
padding-left: var(--gq-gap-xs);
}
.gq-js .question.TableControl .TableControl tfoot td .AddRow {
align-items: center;
display: flex;
text-decoration: none;
}
.gq-js .question.TableControl .TableControl tfoot td .AddRow span {
display: none;
}
.gq-js .question.TableControl .TableControl .DateDropDown select {
margin-right: var(--gq-gap-xs);
width: auto;
}
.gq-js .question.TableControl .TableControl .DateDropDown select.year {
margin-right: 0;
}
@media (min-width: 768px) {
.gq-js .question.TableControl .TableControl thead th {
padding: var(--gq-gap-s);
padding-left: 0;
}
.gq-js .question.TableControl .TableControl thead th:first-child {
padding-left: var(--gq-gap-s);
}
.gq-js .question.TableControl .TableControl thead th:last-child {
min-width: 100px;
}
.gq-js .question.TableControl .TableControl tbody td {
padding: var(--gq-gap-s);
padding-left: 0;
}
.gq-js .question.TableControl .TableControl tbody td:first-child {
padding-left: var(--gq-gap-s);
}
.gq-js .question.TableControl .TableControl tbody td .delete svg {
margin-right: var(--gq-gap-s);
}
.gq-js .question.TableControl .TableControl tbody td .delete span {
display: inline;
font-weight: 500;
padding-left: var(--gq-gap-xs);
}
.gq-js .question.TableControl .TableControl tfoot td {
padding: var(--gq-gap-s);
padding-left: 0;
}
.gq-js .question.TableControl .TableControl tfoot td:first-child {
padding-left: var(--gq-gap-s);
}
.gq-js .question.TableControl .TableControl tfoot td .AddRow svg {
margin-right: var(--gq-gap-s);
}
.gq-js .question.TableControl .TableControl tfoot td .AddRow span {
display: inline;
font-weight: 500;
padding-left: var(--gq-gap-xs);
}
}
/* Contact
-----------*/
#contact_form #fields {
border: 0;
max-width: 600px;
}
.gq-js #contact_form {
border: 0;
border-radius: var(--gq-border-radius);
box-shadow: var(--gq-box-shadow);
padding: var(--gq-gap);
}
.gq-js #contact_form #fields label {
font-weight: 500;
height: auto;
}
.gq-js #contact_form #fields #lblMessage {
width: 100%;
}
#contact_form #ReCaptchContainer {
margin: var(--gq-gap) 0 !important;
}
@media (min-width: 768px) {
.gq-js #contact_form #fields label {
width: 36%;
}
}
/* Client details (general)
----------------------------*/
.gq-js table.columns tr {
display: flex;
flex-direction: column;
gap: var(--gq-gap);
width: 100%;
}
.gq-js table.columns .spacerColumn {
display: none;
}
.gq-js table.columns td {
width: 100%;
}
.gq-js:not(#x) .leftColumn label.sub:not(
[for='ctl00_MainContent_UserEmailAddress'],
[for='ctl00_MainContent_Password'],
[for='ctl00_MainContent_ConfirmPassword'],
[for='ctl00_MainContent_PhoneNumber'],
[for='ctl00_MainContent_MobileNumber'],
[for='ctl00_MainContent_RepresentativeFor'],
[for='ctl00_MainContent_GroupMembershipRef'],
[for='ctl00_MainContent_GroupFSANumber']
),
.gq-js:not(#x) .leftColumn label.subfirstname,
.gq-js:not(#x) .leftColumn label.subfirstname2,
.gq-js:not(#x) .leftColumn label.subsurname {
display: none;
}
.gq-js:not(#x) .inline-container input,
.gq-js:not(#x) .inline-container label,
.gq-js:not(#x) .inline-container select {
float: none;
width: auto;
}
@media (min-width: 1024px) {
.gq-js table.columns tr {
flex-direction: row;
}
}
.gq-js #getquote_client_aspx .rightColumn .gaptop20 {
margin-top: var(--gq-gap);
}
.gq-js #getquote_client_aspx .edgy {
padding-bottom: var(--gq-gap);
}
/* Don't need scheme name */
.gq-js #getquote_client_aspx .getquote-ui > h2 {
display: none;
}
/* Agent register
------------------*/
/* Client register
-------------------*/
/* Recaptcha
-------------*/
.gq-js #ctl00_MainContent_ReCaptchContainer {
margin: var(--gq-gap-l) 0 0 !important;
}
/* Summary (quote referred)
---------------------------*/
.gq-js #ctl00_MainContent_SummaryDefault {}
.gq-js .policy_reference {
border: 1px solid var(--gq-color-border);
border-radius: var(--gq-border-radius);
display: block;
font: inherit;
padding: var(--gq-gap-s) var(--gq-gap);
margin: var(--gq-gap-s) 0 var(--gq-gap);
text-align: center;
color: var(--gq-color-primary);
}
.gq-js #ctl00_MainContent_PageTitle {
text-transform: uppercase;
}
.gq-js .splitter_dots {
display: none;
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments table {
width: 100%;
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments table tr {
display: flex;
flex-direction: column;
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments table td {
width: 100%;
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .LeftDocuments h3,
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .RightDocuments h3 {
align-items: center;
display: flex;
margin-bottom: 0;
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .LeftDocuments h3 img,
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .RightDocuments h3 img {
margin-right: var(--gq-gap-xxs);
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .LeftDocuments h3 a,
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .RightDocuments h3 a {
font-size: 0.6em;
font-weight: 400;
}
@media (min-width: 768px) {
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments table tr {
flex-direction: row;
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments table td {
width: 50%;
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .LeftDocuments,
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .RightDocuments {
padding: var(--gq-gap) 0 0 0;
}
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .LeftDocuments h3,
.gq-js #ctl00_MainContent_QuoteDocumentsDisplay .QuoteDocuments .RightDocuments h3 {
margin-bottom: var(--gq-gap-s);
}
}
/* Payment
-----------*/
.gq-js #getquote_paymentchoice_aspx .PaymentOptionsContainer {
text-align: left;
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption {
margin-bottom: var(--gq-gap);
width: 100%;
box-shadow: var(--gq-box-shadow);
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption .edgy {
box-shadow: none;
margin-bottom: 0;
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption .edgy h3 {
margin-bottom: var(--gq-gap-xs);
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption .edgy div {
margin-bottom: var(--gq-gap-s);
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption .edgy .TotalPayable {
font-weight: 600;
font-size: 2.2em;
color: var(--gq-color-primary);
padding: 0;
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption div.ChooseButton {
padding: var(--gq-gap-xs) var(--gq-gap-s);
padding:
0
clamp(var(--gq-gap-s), 5vw, var(--gq-gap-l))
clamp(var(--gq-gap-xs), 3.75vw, var(--gq-gap-l));
margin-bottom: 0;
width: 100%;
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption div.ChooseButton input {
width: 100%;
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption .edgy .PaymentMethodLogo {
display: none;
}
@media (min-width: 768px) {
.gq-js #getquote_paymentchoice_aspx .PaymentOptionsContainer {
text-align: center;
}
.gq-js #getquote_paymentchoice_aspx .PaymentOption {
margin-bottom: var(--gq-gap);
padding: 0 var(--gq-gap-xs);
width: 33%;
}
}
/* Summary buttons
-------------------*/
.gq-js .SummaryButtons {
display: flex;
flex-wrap: wrap;
gap: var(--gq-gap-s);
justify-content: space-between;
max-width: none;
margin-top: var(--gq-gap);
padding: 0;
}
.gq-js .SummaryButtons :nth-child(2),
.gq-js .SummaryButtons > *:only-child:not(.Back) {
margin-left: auto;
}
.gq-js .SummaryButtons input:only-child {
width: 100%;
max-width: 100%;
}
.gq-js .SummaryButtons .Back,
.gq-js .SummaryButtons .QuestionPage_Back {
background-color: var(--gq-color-secondary);
}
.gq-js .SummaryButtons .QuestionPage_Save {
display: none;
}
@media (min-width: 768px) {
.gq-js .SummaryButtons .QuestionPage_Save {
display: block;
}
}
@media (max-width: 768px) {
.gq-js #getquote_quickquotesummary_aspx .SummaryButtons {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--gq-gap);
}
.gq-js #getquote_quickquotesummary_aspx .SummaryButtons :last-child {
grid-row: 2;
grid-column: 1 / -1;
max-width: 100%;
}
.gq-js #getquote_quickquotesummary_aspx .SummaryButtons .Save {
padding: 0;
}
.gq-js #getquote_quickquotesummary_aspx .SummaryButtons a,
.gq-js #getquote_quickquotesummary_aspx .SummaryButtons input {
display: block;
width: 100%;
text-align: center;
}
}
.gq-js #PageButtonsTop {
display: none;
}
/* Companies House API
-----------------------*/
.js-companies-house-api-results {
border: var(--gq-color-border);
border-radius: var(--gq-border-radius);
box-shadow: var(--gq-box-shadow);
display: none;
left: 0;
max-height: 200px;
max-width: 300px;
overflow: auto;
position: absolute;
top: calc(100% + 2px);
width: 100%;
z-index: 1;
}
.js-companies-house-api-results.is-active {
display: block;
}
/* TO DO: More general selector */
.js-companies-house-api-results .js-companies-house-api-results-placeholder,
.js-companies-house-api-results .js-companies-house-api-results-loading,
.js-companies-house-api-results .js-companies-house-api-results-items,
.js-companies-house-api-results .js-companies-house-api-results-no-items {
display: none;
padding: var(--gq-gap-s);
}
.js-companies-house-api-results .js-companies-house-api-results-items {
padding: var(--gq-gap-xs) 0;
}
/* Is .is-active ok?
.js-companies-house-api-results .js-companies-house-api-results-placeholder.is-active,
.js-companies-house-api-results .js-companies-house-api-results-loading.is-active,
.js-companies-house-api-results .js-companies-house-api-results-items.is-active,
.js-companies-house-api-results .js-companies-house-api-results-no-items.is-active */
.js-companies-house-api-results .is-active {
display: block;
}
.js-companies-house-api-results .js-companies-house-api-results-item {
white-space: nowrap;
overflow: hidden;
padding: var(--gq-gap-xs) var(--gq-gap-s);
/* text-overflow: ellipsis; */
}
.js-companies-house-api-results .js-companies-house-api-results-item:hover {
background: var(--gq-color-primary);
color: #fff;
cursor: pointer;
}
/* Data requests
-----------------*/
.js-data-request-api-container {
position: relative;
}
.js-data-request-api-results {
background: var(--gq-input-background-color);
border: var(--gq-input-border);
border-radius: var(--gq-border-radius);
box-shadow: var(--gq-box-shadow);
display: none;
left: 0;
max-height: 200px;
max-width: 780px;
overflow: auto;
position: absolute;
top: calc(100% + 2px);
z-index: 1;
}
.js-data-request-api-results.is-active {
display: inline-block;
}
/* TO DO: More general selector */
.js-data-request-api-results .js-data-request-api-results-placeholder,
.js-data-request-api-results .js-data-request-api-results-loading,
.js-data-request-api-results .js-data-request-api-results-error,
.js-data-request-api-results .js-data-request-api-results-no-items,
.js-data-request-api-results .js-data-request-api-results-items {
display: none;
padding: var(--gq-gap-s);
}
.js-data-request-api-results .js-data-request-api-results-items {
padding: var(--gq-gap-xs) 0;
}
/* TO DO: just .active?
.js-data-request-api-results .js-data-request-api-results-placeholder.is-active,
.js-data-request-api-results .js-data-request-api-results-loading.is-active,
.js-data-request-api-results .js-data-request-api-results-error.is-active,
.js-data-request-api-results .js-data-request-api-results-no-items.is-active,
.js-data-request-api-results .js-data-request-api-results-items.is-active */
.js-data-request-api-results .is-active {
display: block;
}
.js-data-request-api-results .js-data-request-api-results-item {
white-space: nowrap;
overflow: hidden;
padding: var(--gq-gap-xxs) var(--gq-gap-xs);
}
.js-data-request-api-results .js-data-request-api-results-item:hover {
background: #f9f9f9;
cursor: pointer;
}
/* Eircode
-----------*/
.gq-js .js-eircodr-api .js-eircodr-api__fields {
align-items: center;
display: flex;
flex-wrap: nowrap;
}
.gq-js .js-eircodr-api .js-eircodr-api__button {
margin-left: var(--gq-gap-s);
}
.gq-js .js-eircodr-api .js-eircodr-api__response {
color: var(--gq-color-error);
margin-top: var(--gq-gap-xs);
}
/*-----------.
| BSpoke CSS |
'-----------*/
:root {
--gq-color-primary: #16374a;
--gq-color-secondary: #36708e;
--gq-color-tertiary: #4e97ae;
caret-color: var(--gq-color-primary);
}
/* Headers
-----------*/
/* TODO check if needed?
.gq-js h1
.gq-js h4, .gq-js .h4 {
font-weight: 600;
}
*/
/* Anchor, links
-------------------------*/
.gq-js a,
.gq-js div.edgy.edgy.edgy a,
.gq-js input.link,
.gq-js div.edgy input.link {
color: var(--gq-color-secondary);
text-decoration: none;
}
.gq-js a:hover,
.gq-js div.edgy.edgy.edgy a:hover,
.gq-js input.link:hover,
.gq-js div.edgy input.link:hover {
color: var(--gq-color-tertiary);
text-decoration: none;
}
/* Input
---------*/
.gq-js input,
.gq-js div.edgy input {
border-radius: var(--gq-border-radius);
}
/* BSpoke 'period' style
-------------------------*/
.gq-js button:not(.react-module button)::after,
/* Inputs can't have pseudo elements
.gq-js input[type='button']::after,
.gq-js input[type='submit']::after, */
.gq-js h1::after,
.gq-js header div.login a::after,
.gq-js .SummaryButtons a::after {
content: '.';
}
/* Header
----------*/
.gq-js header {
margin: var(--gq-gap-s) var(--gq-gap-s) 0 var(--gq-gap-s);
}
@media (min-width: 960px) {
.gq-js header {
margin: var(--gq-gap-l) var(--gq-gap-2xl) 0 var(--gq-gap-2xl);
}
}
#aspnetForm article > h1 {
background: var(--gq-color-primary);
background-image: url(
https://schemeservelive.blob.core.windows.net/medialib/images/user/account_id_45648/bspoke-header-mobile.jpg
);
background-size: cover;
color: #fff;
content: '.'; /* Avoid empty content layout jump */
display: block;
font-size: 24px;
line-height: 1;
margin: 0;
padding: var(--gq-gap) var(--gq-gap-s);
padding: var(--gq-gap) clamp(var(--gq-gap-s), 7.5%, var(--gq-gap-2xl));
text-box: trim-both ex alphabetic; /* Neat vertical alignment */
text-transform: lowercase;
width: 100%;
/* Full bleed */
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: none;
}
@media (min-width: 1200px) {
#aspnetForm article > h1 {
background-image: url(
https://schemeservelive.blob.core.windows.net/medialib/images/user/account_id_45648/bspoke-header.jpg
);
font-size: 65px;
padding: var(--gq-gap-s) var(--gq-gap) var(--gq-gap-s) var(--gq-gap-l);
}
}
/* Header logo
---------------*/
.gq-js header .logo {
margin: 0;
}
.gq-js header .logo a {
display: inline-block;
}
.gq-js header .logo a::after {
background: url(
https://schemeservelive.blob.core.windows.net/medialib/images/user/account_id_45648/bspoke_logo.png
);
background-size: contain;
background-repeat: no-repeat;
content: '';
height: 46px;
min-width: 128px;
display: block;
}
.gq-js header .logo img {
display: none;
}
@media (min-width: 960px) {
.gq-js header .logo {
margin: 0;
}
.gq-js header .logo a::after {
height: 85px;
min-width: 234px;
}
}
/* Page Layout
-------*/
#layout {
margin-top: var(--gq-gap);
margin-top: clamp(var(--gq-gap-xs), 5vw, var(--gq-gap-2xl));
overflow-wrap: break-word;
}
#layout .h3 {
font-weight: 700;
font-size: 1.3em;
}
/* Nav
-------*/
html.gq-js nav {
background: var(--gq-color-secondary);
height: 0;
padding: 0;
/*margin: 0 0 var(--gq-gap-l) 0;*/
overflow: hidden;
text-transform: lowercase;
transition: height 0.3s ease-out;
}
@media (min-width: 960px) {
html.gq-js nav {
margin: 0 var(--gq-gap-2xl) var(--gq-gap-s) 0;
}
}
.gq-js .nav-button {
text-transform: uppercase;
width: 100%;
}
.gq-js .nav-button::before {
background: url("data:image/svg+xml,");
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 17px;
margin-right: 0.75em;
margin-top: -2px;
vertical-align: middle;
width: 20px;
}
/* Prevent default button hover background */
.gq-js .nav-button:hover {
background: var(--gq-color-primary);
}
/* Exempt this button from outlines */
.gq-js .nav-button:focus {
outline: none;
}
html.gq-js .nav-active {
height: auto;
}
html.gq-js .nav-active li {
height: auto;
padding: var(--gq-gap-s) var(--gq-gap) 0 var(--gq-gap-xs);
}
html.gq-js .nav-active li:last-child {
height: auto;
padding: var(--gq-gap-s) var(--gq-gap-xs);
}
.gq-js nav ul.menu {
padding: 0;
}
.gq-js nav li {
display: block;
margin: 0 !important;
}
html.gq-js nav li a,
html.gq-js nav li a:hover,
html.gq-js nav li a:visited,
html.gq-js:not(#x) nav li .selected {
background: 0;
border-radius: 0;
color: #fff !important;
display: block;
font-size: inherit;
padding: 0.25em 0;
}
@media (min-width: 640px) {
html.gq-js nav {
background: 0;
display: flex;
flex-direction: row-reverse;
}
/* Ensure nav always displayed */
.gq-js:not(#x) nav {
height: auto;
}
html.gq-js .nav-active {
margin-right: 0;
}
.gq-js .nav-button {
display: none;
}
.gq-js nav ul.menu {
display: flex;
gap: var(--gq-gap-s);
}
.gq-js nav ul.menu {
gap: var(--gq-gap-3xl);
margin: 0;
}
html.gq-js nav li a,
html.gq-js nav li a:hover,
html.gq-js nav li a:visited,
html.gq-js:not(#x) nav li .selected {
color: var(--gq-color-secondary) !important;
display: inline-block;
font-weight: 600 !important;
padding: 0;
}
}
/* Login/search (agent)
------------------------*/
#getquote_agent_aspx .getquote-ui > h1,
#getquote_agent_aspx .getquote-ui > h2 {
display: none;
}
#getquote_agent_aspx .edgy:first-child {
margin-top: var(--gq-gap-l);
}
#getquote_agent_aspx .edgy label.big {
color: var(--gq-color-primary);
font-weight: 600;
text-transform: lowercase;
}
#getquote_agent_aspx .edgy label.big::after {
content: '.';
}
/* Questions
-------------*/
.gq-js #ctl00_MainContent_lblSchemeName {
text-transform: uppercase;
}
#getquote_questions_aspx #ctl00_MainContent_PageTitle {
display: none;
}
/* Using custom HTML instead */
.gq-js #contact_form {
display: none;
}
.gq-js:not(#x) .contactus-ui h2 {
text-transform: uppercase;
}
/* About us page
-----------------*/
.aboutUsPage img {
object-fit: contain;
max-width: 210px;
}
@media (min-width: 768px) {
.aboutUsPage > div {
display: flex;
gap: var(--gq-gap-3xl);
align-items: start;
}
.aboutUsPage img {
margin-top: 1.5em;
}
}
/* Custom scheme list page
---------------------------*/
.getQuoteCustom {
max-width: 1200px;
}
.getQuoteCustom h2 {
text-transform: uppercase;
}
.getQuoteCustom ul {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.getQuoteCustom a.button {
text-transform: none;
}
@media (max-width: 768px) {
.getQuoteCustom ul li {
/*width: 75%;*/
flex: 1;
}
.getQuoteCustom a.button {
text-align: center;
width: 75%;
}
}
.getQuoteCustom .commercial h2 {
color: #36708e;
}
.getQuoteCustom .commercial .button {
background-color: #36708e;
color: #fff;
}
.getQuoteCustom .privateClients h2 {
color: #c2aa37;
}
.getQuoteCustom .privateClients .button {
background-color: #c2aa37;
}
.getQuoteCustom .privateClients .button {
background-color: #c2aa37;
color: #16374a;
}
.getQuoteCustom .property h2 {
color: #96b7c6;
}
.getQuoteCustom .property .button {
background-color: #96b7c6;
color: #16374a;
}
.gq-js #ctl00_MainContent_Firstname {
margin: 0;
}
.gq-js #ctl00_MainContent_MarketingConsentLabel,
.gq-js #ctl00_MainContent_ThirdPartConsentLabel {
font-size: 1em;
}
.gq-js h1.PageTitle {
font-size: 1.8em;
}
/* Hide row on Private Clients CLaims Table
--------*/
.public #Claims_Template #HeaderRow > th:nth-child(6) {display:none;}
.public #Claims_Template tr > td:nth-child(6){display:none;}