@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;600;700&display=swap');

/* Amend body font-family to open sans 2*/
html:not([class*=theme-]) body, html:not([class*=theme-]) button, html:not([class*=theme-]) input, 
html:not([class*=theme-]) select, html:not([class*=theme-]) textarea, html:not([class*=theme-]) label, html.theme-standard body, 
html.theme-standard button, html.theme-standard input, html.theme-standard select, 
html.theme-standard textarea, html.theme-standard label {font-family:var(--font-family)}

html:not([class*=theme-]) h1, html.theme-standard h1 {font-family:var(--font-family); font-weight: bold; font-size: large;}
html:not([class*=theme-]) h2, html.theme-standard h2 {font-family:var(--font-family); font-size: large;}
html:not([class*=theme-]) h3, html.theme-standard h3 {font-family:var(--font-family); font-weight: bold;}

html:not([class*=theme-]) .button.is-danger, html:not([class*=theme-]) .is-danger.btn, html:not([class*=theme-]) .btn.btn-danger,
html.theme-standard .button.is-danger, html.theme-standard .is-danger.btn, html.theme-standard .btn.btn-danger {
    background-color: #F8C3C3 !important;
    border-color: transparent;
    color: #FFFFFF;
}

/* Progress bar */
html.theme-standard .hero.is-primary { background-color: #ffffff !important; color: hsl(0deg 0% 21%); padding-bottom:24px!important}
.steps {font-size:0.9em}
html.theme-standard .steps .step-item.is-info.is-active .step-marker,html.theme-standard .steps .step-item.is-success.is-completed .step-marker {background-color:var(--primary-color);border-color:var(--primary-color);color:var(--grey-darkest)}
html.theme-standard .steps .step-item .step-details .step-title{font-family: var(--font-family); font-size:0.9em; font-weight:500; padding-top:7px}
html.theme-standard .steps .step-item:not(:first-child)::before {height:10px; top:12px}
html.theme-standard .steps .step-item .step-marker {border:0.2em solid #eee}
html.theme-standard .steps .step-item::before, html.theme-standard .steps .step-item .step-marker {background:#eee;}
html:not([class*=theme-]) .steps .step-item.is-info::before, html.theme-standard .steps .step-item.is-info::before,html.theme-standard .steps .step-item.is-success::before{background:var(--primary-color)}

/**** Header ****/
.Portal--MainPanel .section .column.header {padding:4px 0; background-color:var(--grey-lightest);margin-bottom:24px!important}
.Portal--MainPanel .section .column.header .item-mWcYLQAB9keVt9bbVTMX5Q img {width:202px}

/* section headings 
.notice-text p span {font-family:var(--font-family); font-weight:700; font-size:20px; color:#009A17!important}*/

/* Declaration page */
.item-V4l9cQl8rE6MXvkniyAN8Q .notice-text > p {display:none}
.item-np5Y2d9lnkenP1K7UYwjPg .notice-text > h1 > span.ql-size-large {font-family:var(--font-family); font-size:2em!important; color:#009A17!important; font-weight:700}
.item-np5Y2d9lnkenP1K7UYwjPg .notice-text p:nth-child(3) {padding-bottom:24px}
.item-aDC5mQ72y0mv_Vi3KQswHg .button, .item-aDC5mQ72y0mv_Vi3KQswHg .button span > div {justify-content: center!important;text-align:center!important}
.label-h25NO8FGl0-h14yspKIMpQ, .label-E2QofVPAWE6g4-00Q-eUHA,.label-GOJZT9pXfkG0R5rwtEwJzQ {padding-bottom:24px}
.item-aDC5mQ72y0mv_Vi3KQswHg {margin-bottom:24px}

/* Validation */
.field-LZ79zza1RkCzAghgttBwhA {
    color: red;
}

/**** Indicative quote page ****/
.item-YzSdBg1ImEWrYmfctsOvIw .notice-text p, .item-yc0T3hwS1ky7KBnbkXOh4w .notice-text p {font-family:var(--font-family); line-height: 2.85em; font-size:0.90em;font-weight:600}

.sectionclass1, .sectionclass2 {background-color:var(--green-lightest); padding:24px!important; margin-bottom:24px}
.sectionclass1 .panel-block {padding:0!important}
.sectionclass2 .column.is-12 {padding:15px}
.sectionclass2 #notice_merge_container_fe846acc-4dc0-4079-88d6-b24b5213b1fc_rate_0 span {font-size:12px}
.sectionclass2 .columns.is-multiline:first-child {display:none}
.sectionclass2 .panel-heading {display:none}
.sectionclass2 .panel-block {border-radius:10px; background-color:#ffffff}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw {padding:5px}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw .ql-size-huge {font-family:var(--font-family);font-weight:700;font-size:24px!important}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw .notice-text p, html.theme-standard .item-rPnGMYnC006aSCTvDFrVzw .notice-text p strong  {font-family:var(--font-family);font-weight:500;font-size:16px!important}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw .notice-text p span .ql-size-small {font-family:var(--font-family);font-weight:500;font-size:12px!important; display:block}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw .notice-text p:first-child {padding-bottom:12px}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw .notice-text p:nth-child(-n+4) {line-height:24px}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw .notice-text p:nth-child(n+5) {line-height:16px}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw .notice-text p:nth-child(5) {padding-top:24px}
.sectionclass2 .item-rPnGMYnC006aSCTvDFrVzw .notice-text p:last-child .ql-size-small span {display:none}
.sectionclass3, .sectionclass2 {background-color:var(--grey-light); padding:24px!important; margin-bottom:24px}
.sectionclass3 .panel-block {padding:0!important}

html.theme-standard .upload .upload-draggable:hover.is-primary {border-color:var(--primary-color);background-color:var(--green-lightest)}

/**** Applicant details page ****/
.field-vehq1oNU1U2azaW7I16gAA, .field-d3I214ZVSkGEcRjN1RYW4w, .field-GZbJ0GXVhkyfE1-kqkm-GA  {margin-top:12px}
.item-HMhLrKfh0UezOZQIG4kz4Q .notice-text p span {font-size:0.90em; font-weight:600}

/**** Applicant summary ****/
.item-zzs_03ZRwkajJagWq3bqXA .notice-text h2 .ql-size-huge, .item-uSPCMvfNoUCenQyEzF6v3w .notice-text h2 .ql-size-huge,.item-6Se7r8StJEqECc7XPs_7_w .notice-text h2 .ql-size-huge{font-family:var(--font-family);color:#009A17!important; font-size:2em!important}
.quill-better-table td strong,.item-zzs_03ZRwkajJagWq3bqXA p span  {font-weight:500}

/**** Form Fields *****/
/* Labels */
label {display:block;padding-bottom:7px;font-family:var(--font-family); font-weight: 500;
     font-size:14.4px; line-height:16px; color:var(--grey-darkest)!important;}
label .label-text {color:var(--grey-darkest)!important}

/* generic all fields */
html.theme-standard .input, html.theme-standard .select select, .vue-tel-input {font-family:var(--font-family);border: 1px solid var(--field-border); border-radius:3px; background-color:var(--input-background-color); color: var(--grey-darkest);height:2.85em; box-shadow:none}
html.theme-standard .input:active, html.theme-standard .input:focus, html.theme-standard .select select:active,html.theme-standard .select select:focus, .vue-tel-input:active,.vue-tel-input:focus, .vue-tel-input:focus-within {border:3px solid #c2c8d0; box-shadow:none}

/* Select */
html.theme-standard select {font-family:var(--font-family)}
html.theme-standard .select:not(.is-multiple):not(.is-loading)::after {border-color:var(--grey-dark);top:22px;height:11px;width:11px}
html.theme-standard .select:not(.is-multiple):not(.is-loading):hover::after,html.theme-standard .select:not(.is-multiple):not(.is-loading)::after:hover,html:not([class*=theme-]) .select:not(.is-multiple):not(.is-loading):hover::after, html.theme-standard .select:not(.is-multiple):not(.is-loading):hover::after{border-color:var(--grey-dark)!important}
html.theme-standard .select select:active, html.theme-standard .select select:focus {box-shadow:none}
html.theme-standard .select.is-fullwidth select:focus {border: 1px solid var(--field-border);box-shadow: none; outline: none;}
html.theme-standard .select.is-fullwidth select { width: 100%;font-family:var(--font-family);border: 1px solid var(--field-border); border-radius:3px; background-color:var(--input-background-color); color: var(--grey-darkest);height:2.85em}

/* Checkbox */
html.theme-standard .b-checkbox.checkbox input[type=checkbox] + .check {width:2em;height:2em; border: 2px solid #009A17}
html.theme-standard .b-checkbox.checkbox input[type=checkbox]:checked + .check {background-color:var(--primary-color); border-color:var(--primary-color)}
html.theme-standard .b-checkbox.checkbox input[type=checkbox]:checked:focus + .check:focus {box-shadow:none}
html.theme-standard.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check, html.theme-standard .b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check {border-color:var(--primary-color)}
html.theme-standard .b-checkbox.checkbox input[type=checkbox]:focus:checked + .check {box-shadow:none}

/* Custom form fields */
html.theme-standard .datepicker .datepicker-header .select select {height:2.25em}
html.theme-standard .datepicker .datepicker-header .select:not(.is-multiple):not(.is-loading)::after {top:18px}
html.theme-standard .datepicker .datepicker-header .mdi:before {color:var(--grey-darkest)}
html.theme-standard .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-today {border: 1px solid var(--primary-color); background-color:var(--green-lightest)}
html.theme-standard .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected {background-color:var(--primary-color); color:var(--grey-darkest)}
html.theme-standard .datepicker .datepicker-header .pagination-previous, html.theme-standard .datepicker .datepicker-header .pagination-next {border:1px solid var(--field-border)}
html.theme-standard .datepicker .datepicker-header .pagination-previous:hover, html.theme-standard .datepicker .datepicker-header .pagination-next:hover {color:var(--grey-darkest);background-color:rgba(0, 0, 0, 0.1)}  
html.theme-standard .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selectable {color:var(--grey-darkest)}
html.theme-standard .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selectable:hover:not(.is-selected) {background-color:rgba(0, 0, 0, 0.1)}

/**** Buttons ****/
/* Button */
html.theme-standard .buttons .button:not(:last-child):not(.is-fullwidth) {margin-right:1em}
html.theme-standard .button {color: var(--grey-darkest);border: 2px solid #009A17; border-radius: 1.75rem;background-color: transparent;height: 3.25rem;padding-top: 0.75rem;padding-bottom: 0.75rem;padding-left:2rem; padding-right:2rem}
html.theme-standard .button span {font-weight:700; font-family:var(--font-family)}
html.theme-standard .button:hover {border-color:#009A17;background-color:rgba(0, 0, 0, 0.1)}
html.theme-standard .button:focus {border-color:#009A17}
html.theme-standard .button.is-primary.is-active,html.theme-standard .button.is-primary.is-active:focus {color: #ffffff;background-color:var(--primary-color); border-color:var(--primary-color)}
html.theme-standard .button.is-primary:focus:not(:active),html.theme-standard .button.is-deselected,html.theme-standard .button:focus:not(:active) {box-shadow:none}
html:not([class*=theme-]) .button.is-success[disabled], html:not([class*=theme-]) .is-success[disabled].btn, html:not([class*=theme-]) [disabled].btn.btn-success, html:not([class*=theme-]) [disabled].btn.btn-info, html:not([class*=theme-]) [disabled].btn.btn-link, fieldset[disabled] html:not([class*=theme-]) .button.is-success, fieldset[disabled] html:not([class*=theme-]) .is-success.btn, fieldset[disabled] html:not([class*=theme-]) .btn.btn-success, fieldset[disabled] html:not([class*=theme-]) .btn.btn-info, fieldset[disabled] html:not([class*=theme-]) .btn.btn-link, html.theme-standard .button.is-success[disabled], html.theme-standard .is-success[disabled].btn, html.theme-standard [disabled].btn.btn-success, html.theme-standard [disabled].btn.btn-info, html.theme-standard [disabled].btn.btn-link, fieldset[disabled] html.theme-standard .button.is-success, fieldset[disabled] html.theme-standard .is-success.btn, fieldset[disabled] html.theme-standard .btn.btn-success, fieldset[disabled] html.theme-standard .btn.btn-info, fieldset[disabled] html.theme-standard .btn.btn-link {
    background-color: #009A17;
    border-color: rgba(0,0,0,0);
    box-shadow: none;
}

/* Footer Buttons*/
.footer-controls .button.is-medium {padding-left:2em; padding-right:2em; font-size:1em}
html.theme-standard .button.is-success {color:#fff;background-color:var(--primary-color)}
html.theme-standard .button.is-success:hover{color:#fafafa;background-color:var(--green-600)}
html.theme-standard .button.is-success:active{color:#009A17;background-color:var(--green-700)}
/* Confirm button */ 
.field-PpyF2mUs3kGY9wPVREAqdQ {padding-left: 2em !important;padding-right: 2em !important;}

/* Credisense Added here 2/10/2022 */
/* These are system fields we control the loan script*/ 
.field-EAtM2w-Bl0auE-8-yA69hA,.field-WAjKOaAMNkW0P4aztVa1-w,.field-xkbU_X-hv0qPJZOHaKQEjw,.field-eLG6SMMJoEKuYFW9yBDJag {visibility: hidden;}

/* table */
html:not([class*='theme-']) .table td, html:not([class*='theme-']) .table th, html.theme-standard .table td, 
html.theme-standard .table th {border: none !important; border-width: 0 0 1px; padding: 0.2em 0.75em !important; 
    padding-left: 1.05em;padding-right: 1.05em; vertical-align: top; color:var(--grey-darkest)}

/* Icons & alerts */
html:not([class*=theme-]) .control.has-icons-left .icon, html:not([class*=theme-]) .control.has-icons-right .icon, html.theme-standard .control.has-icons-left .icon, html.theme-standard .control.has-icons-right .icon {height:2.85em}
/* --danger */
html:not([class*=theme-]) .button.is-danger, html:not([class*=theme-]) .is-danger.btn, html:not([class*=theme-]) .btn.btn-danger, html.theme-standard .button.is-danger, html.theme-standard .is-danger.btn, html.theme-standard .btn.btn-danger {
    background-color: var(--error-red);border-color: transparent;color: #fff;}
html:not([class*=theme-]) .has-text-danger, html.theme-standard .has-text-danger {color: var(--error-red)!important; font-size:12px}
html:not([class*=theme-]) .b-tooltip.is-top.is-danger:before, html:not([class*=theme-]) .b-tooltip.is-top.btn.btn-danger:before, html.theme-standard .b-tooltip.is-top.is-danger:before, html.theme-standard .b-tooltip.is-top.btn.btn-danger:before {border-top:5px solid var(--error-red)}
html:not([class*=theme-]) .b-tooltip.is-danger:after, html:not([class*=theme-]) .b-tooltip.btn.btn-danger:after, html.theme-standard .b-tooltip.is-danger:after, html.theme-standard .b-tooltip.btn.btn-danger:after {background:var(--error-red)}
html:not([class*=theme-]) .help.is-danger, html:not([class*=theme-]) .help.btn.btn-danger, html.theme-standard .help.is-danger, html.theme-standard .help.btn.btn-danger {color:var(--error-red)}
html.theme-standard .is-danger.input {border-color: var(--error-red)}
/* --info */
html:not([class*=theme-]) .has-text-info, html.theme-standard .has-text-info, html:not([class*=theme-]) .help.is-info, html.theme-standard .help.is-info {color:var(--info-blue)!important}
html:not([class*=theme-]) .b-tooltip.is-top.is-info:before, html.theme-standard .b-tooltip.is-top.is-info:before {border-top: 5px solid var(--info-blue)}
html:not([class*=theme-]) .b-tooltip.is-info:after, html.theme-standard .b-tooltip.is-info:after {background:var(--info-blue)}
.mdi-information::before {font-size:18px; position:relative;top:2px}
html:not([class*=theme-]) .b-tooltip:not([data-label=""]):hover:before, html:not([class*=theme-]) .b-tooltip:not([data-label=""]):hover:after, html.theme-standard .b-tooltip:not([data-label=""]):hover:before, html.theme-standard .b-tooltip:not([data-label=""]):hover:after {font-size:0.84em}
 
/* Modal */
.modal.is-active button.is-danger {background-color:var(--primary-color);color:#363636; padding-left:2rem;padding-right:2rem}
.modal.is-active button.is-danger:hover{color:#363636;background-color:var(--green-600)}
.modal.is-active .media-left {margin-right:0}
.modal.is-active .media-left .icon.has-text-danger {height:32px}
.modal.is-active .media-left .icon.has-text-danger .mdi-48px.mdi:before {font-size:32px}
.modal.is-active .media-content {padding-top:2px}
.modal.is-active .modal-card-foot {background-color:#FFFFFF; border-top:none; padding-top:0}
.modal.is-active .button.is-danger:focus:not(:active) {box-shadow:none; color:#363636}

/* Layout */
html .box {background-color: #fff !important;border-radius: 0px !important;box-shadow: 0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%);color: #000000 !important;display: block;padding: 0.15rem !important;
}
html:not([class*='theme-']) .box, html.theme-standard .box { background-color: white; border-radius: 0;box-shadow: none; }
/*controls sections borders */
html.theme-standard .Portal--MainPanel .panel-heading {border: none !important;background: none !important;}
html.theme-standard .Portal--MainPanel .panel-block {border: none !important;}
html.theme-standard .panel-heading {background-color: #ffffff;}
html.theme-standard .panel-heading {display:none;}

html:not([class*='theme-']) .table thead td, html:not([class*='theme-']) .table thead th, html.theme-standard .table thead td, html.theme-standard .table thead th {
    border-width: 0 0 2px;
    color: var(--grey-darkest);
    background: #ffffff;
    padding: 0.01em 0.75em !important;
}

/* Spacing of fields */
.field-4wc47B1-zkevUksZ5TbH0Q, .field-4wc47B1-zkevUksZ5TbH0Q {padding-bottom:12px}

/* Spacing of labels */
.label-qPOddmBAFEyigp7sGTccGA, .label-pVRRro0TZE6GXFyYEJuYkw, .label-4wc47B1-zkevUksZ5TbH0Q, .label-n1FBdFBz_UWZmGfdHSLPGA, .label-GqVaVLKLgUO4alaU6T5XVA {padding-bottom:24px}



/* Mobile responsive */
@media screen and (max-width: 768px) {
    /**** Reduce logo****/
    html.theme-standard .item-mWcYLQAB9keVt9bbVTMX5Q img {width:149px}
}

@media screen and (min-width: 769px) {

    .sectionclass1 .column.is-6 {width:33%!important}
}

:root{
    --primary-color:#009A17;
    --green-700:#009A17;
    --green-600:#009A17;
    --green-lightest:#f5f7ef;
    --grey-lightest: #f9f9f7;
    --grey-light: #dee2e6;
    --grey-mid: #c2c8d0;
    --grey-dark: #6f7780;
    --grey-darkest: #363636;
    --font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    --field-border: #c2c8d0;
    --input-border-radius:3px;
    --input-background-color:#fafafa;
    --error-red: #D03930;
    --info-blue:#3482b9;
}


.vue-slider-dot-tooltip-inner {
    font-size: 14px;
    white-space: nowrap;
    padding: 2px 5px;
    min-width: 20px;
    text-align: center;
    color: #000;
    border-radius: 5px;
    border-color: #C3D200;
    background-color: #C3D200;
    box-sizing: content-box;
}
.vue-slider-rail {
    background-color: #C3D200;
    border-radius: 15px;
}
.vue-slider-dot-tooltip-inner-top::after {
    top: -9px;
    left: 50%;
    transform: translate(-50%, 0) rotate(180deg);
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-top-color: inherit;
}
.vue-slider-dot-tooltip-top {
    top: 45px !important;
    left: 50%;
    -webkit-transform: translate(-50%,-100%);
    transform: translate(-50%,-100%);
}
.vue-slider-dot-tooltip {
    position: absolute !important;
    visibility: visible !important;
}


html.theme-standard button.button.OtpVerificationButton--button.is-small.is-white{
    display: inline-block;
    background-color: #dbdbdb;
    color: #404040;
}


html:not([class*=theme-]) .button.is-white, html:not([class*=theme-]) .is-white.btn, html.theme-standard .button.is-white, html.theme-standard .is-white.btn {
    background-color: #dbdbdb;
    border-color: rgba(0,0,0,0);
    color: #0a0a0a;
}

html:not([class*=theme-]) .button.is-white:hover, html:not([class*=theme-]) .is-white.btn:hover, html:not([class*=theme-]) .button.is-white.is-hovered, html:not([class*=theme-]) .is-white.is-hovered.btn, html.theme-standard .button.is-white:hover, html.theme-standard .is-white.btn:hover, html.theme-standard .button.is-white.is-hovered, html.theme-standard .is-white.is-hovered.btn {
    background-color: #f6f6f6;
    border-color: rgba(0, 0, 0, 0);
    color: #0a0a0a;
}

/* Update Green Notice Fields */
html:not([class*=theme-]) .message.is-green .message-body, html.theme-standard .message.is-green .message-body {
    border-color: #A7D500;
    color: #363636;
    background-color: rgba(167, 213, 0, 0.15);
}

/* Update company search label */
html:not([class*=theme-]) .label, html.theme-standard .label {
    color: #363636;
    display: block;
    font-size: 14.4px;
    font-weight: 500;
}

/* Radio Colour */

html:not([class*=theme-]) .b-radio.radio input[type=radio]+.check:before, html.theme-standard .b-radio.radio input[type=radio]+.check:before {
    background-color: #009A17;
}
html:not([class*=theme-]) .b-radio.radio input[type=radio]:checked+.check, html.theme-standard .b-radio.radio input[type=radio]:checked+.check {
    border-color: #009A17;
}
html:not([class*=theme-]) .b-radio.radio:hover input[type=radio]:not(:disabled)+.check, html.theme-standard .b-radio.radio:hover input[type=radio]:not(:disabled)+.check {
    border-color: #009A17;
}