@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@400;500;700&display=swap');

:root {
    /* fonts */
    --font-base: 'Merriweather', serif;
    --font-roboto: 'Roboto', sans-serif;
    --p: 16px;
    --label: 15px;

    /* colors */
    --primary: #fc5400;
    --charcoal: #2a2a2a;
    --sandstone: #f0ece1;
    --dark-sandstone: #d0ccbf;
    --white: #fff;
    --error: #f43319;
    --primary-h: #c94300;
    --charcoal-h: #636466;

    /* spacing/sizes*/
    --container: 1140px;
    --outer-padding: 30px;
}

@media (max-width: 1139px) {
    :root {
        --container: 992px;
    }
}

@media (max-width: 991px) {
    :root {
        --container: 768px;
    }
}

@media (max-width: 767px) {
    :root {
        --container: 100%;
        --outer-padding: 15px;
    }
}

body {
    font-family: var(--font-base);
    background-color: var(--white);
    margin: 0;
    padding: 0 var(--outer-padding);
    font-size: var(--p);
}

/* container styles */
#greenid-hosted-logo,
#greenid-div,
#greenid-hosted-powered-by-gbg {
    max-width: var(--container);
    margin: 0 auto;
    transition: max-width 0.3s;
}

#greenid-source-content{
    height: max-content !important;
}

.greenid-so-content {
    padding: var(--outer-padding) 0;
}

.well {
    box-shadow: none;
    background-color: var(--sandstone) !important;
    border: none;
    padding: var(--outer-padding);
}

#greenid-source-body:has(form) {
    background-color: var(--sandstone);
    padding: var(--outer-padding);
}

.greenid-datepicker-container.datepicker table tr td.active:hover,
.greenid-datepicker-container.datepicker table tr td.active:hover:hover,
.greenid-datepicker-container.datepicker table tr td.active.disabled:hover,
.greenid-datepicker-container.datepicker table tr td.active.disabled:hover:hover,
.greenid-datepicker-container.datepicker table tr td.active:focus,
.greenid-datepicker-container.datepicker table tr td.active:hover:focus,
.greenid-datepicker-container.datepicker table tr td.active.disabled:focus,
.greenid-datepicker-container.datepicker table tr td.active.disabled:hover:focus,
.greenid-datepicker-container.datepicker table tr td.active:active,
.greenid-datepicker-container.datepicker table tr td.active:hover:active,
.greenid-datepicker-container.datepicker table tr td.active.disabled:active,
.greenid-datepicker-container.datepicker table tr td.active.disabled:hover:active,
.greenid-datepicker-container.datepicker table tr td.active.active,
.greenid-datepicker-container.datepicker table tr td.active:hover.active,
.greenid-datepicker-container.datepicker table tr td.active.disabled.active,
.greenid-datepicker-container.datepicker table tr td.active.disabled:hover.active {
    background-color: var(--primary);
    border-color: var(--primary);
}

.greenid-so-content #greenid-container .form-group:has(button[type="submit"]) {
    margin-bottom: 0;
}

.greenid-so-content #greenid-container .greenid-has-error input[type='text'],
.greenid-so-content #greenid-container .greenid-has-error input[type='number'],
.greenid-so-content #greenid-container .greenid-has-error input[type='date'],
.greenid-so-content #greenid-container .greenid-has-error textarea {
    border-color: var(--error);
    border-bottom: 2px solid var(--error);
}

/* font styles */
h1,
h2,
h4 {
    font-family: var(--font-base) !important;
    color: var(--charcoal) !important;
}

.greenid-so-content #greenid-container li,
.greenid-so-content #greenid-container p {
    font-size: var(--p);
}

.help-block {
    font-family: var(--font-roboto);
    font-size: 14px;
    font-weight: 600 !important;
    margin-top: 0.3rem !important;
    display: inline-block !important;
}

#greenid-container {
    font-family: var(--font-base);
    color: var(--charcoal);
}

.greenid-so-content #greenid-container .checkbox.greenid-consent-font label {
    font-family: var(--font-roboto);
    color: var(--charcoal);
}

#greenid-container a {
    color: var(--primary);
    transition: color 0.3s;
}

#greenid-container a:hover,
#greenid-container a:focus {
    color: var(--primary-h) !important;
}

.greenid-so-content #greenid-container label {
    font-family: var(--font-roboto);
    font-size: var(--label);
    font-weight: 500;
    text-transform: initial;
}

.ui-widget {
    font-family: var(--font-roboto);
}

input[type="text"] {
    font-family: var(--font-roboto) !important;
    font-size: 14px !important;
}

select {
    font-family: var(--font-roboto) !important;
    border-radius: 0 !important;
}

.greenid-datepicker-container {
    font-family: var(--font-roboto);
    color: var(--charcoal);
}

#greenid-container .greenid-has-error .help-block,
#greenid-container .greenid-has-error .control-label,
#greenid-container .greenid-has-error .radio,
#greenid-container .greenid-has-error .checkbox,
#greenid-container .greenid-has-error .radio-inline,
#greenid-container .greenid-has-error .checkbox-inline {
    color: var(--error);
}

/* button styles */
.greenid-so-content #greenid-container .btn {
    font-family: var(--font-roboto);
    font-size: var(--label);
    background-image: none;
    padding: 1rem 1.5rem !important;
    font-weight: 500;
    border-radius: 0.125rem;
    text-transform: initial !important;
    transition: background-color 0.3s;
}

.greenid-so-content #greenid-container .btn:hover,
.greenid-so-content #greenid-container .btn:focus {
    outline: none;
    box-shadow: none;

}

.greenid-so-content #greenid-container .btn.btn-next::after,
.greenid-so-content #greenid-container .btn[type="submit"]::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
    transform: rotate(45deg);
    border-radius: 3px;
    display: inline-block;
    margin-left: 0.7rem;
}

.greenid-so-content #greenid-container .btn.btn-primary {
    background-color: var(--primary);
    border: 1px solid var(--primary);
}

.greenid-so-content #greenid-container .btn.btn-default {
    background-color: var(--charcoal);
    border: 1px solid var(--charcoal);
    color: var(--white);
}

.greenid-so-content #greenid-container .btn.btn-cancel {
    background-color: var(--white);
    border: 1px solid var(--white);
    padding: 0.5rem;
    color: var(--charcoal);
    display: flex;
    align-items: center;
}

.greenid-so-content #greenid-container .btn.btn-cancel::before{
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    background-image: url(https://simpleui-test-au.vixverify.com/df/assets/images/so-mono-btn-cancel-icon.png);
    background-size: contain;
    background-position: center;
    font-family: var(--font-roboto);
    font-weight: 600;
    font-size: 14px;
    margin-right: 0.5rem;
}

.greenid-so-content #greenid-container .btn.btn-primary:hover,
.greenid-so-content #greenid-container .btn.btn-primary:focus {
    background-color: var(--primary-h);
    border: 1px solid var(--primary-h);
}

.greenid-so-content #greenid-container .btn.btn-default:hover,
.greenid-so-content #greenid-container .btn.btn-default:focus {
    background-color: var(--charcoal-h);
    border: 1px solid var(--charcoal-h);
}

.greenid-so-content #greenid-container .btn.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(252, 84, 0, .5);
}

/* checkbox styles */
label:has(input[type="checkbox"]) {
    position: relative;
}

label:has(input[type="checkbox"])::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid var(--charcoal);
    background-color: var(--white);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 0.3s;
}

label:has(input[type="checkbox"]:checked)::before {
    background-color: var(--primary);
}

label:has(input[type="checkbox"])::after {
    content: '';
    width: 10px;
    height: 5px;
    transform: rotate(-45deg);
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    position: absolute;
    top: 6px;
    left: 5px;
}

label:has(input[type="checkbox"]) input[type="checkbox"] {
    display: none;
}

/* modal styles */
.greenid-modal::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--charcoal);
    opacity: 0.5;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
}

.modal-header {
    font-family: var(--font-roboto);
    color: var(--charcoal);
}

.greenid-modal .modal-body a {
    font-weight: 400;
}

/* tooltip styles */
.greenid-tooltip {
    font-family: var(--font-roboto);
}

.greenid-tooltip.top .tooltip-arrow {
    border-top-color: var(--dark-sandstone);
}

.greenid-tooltip .tooltip-inner {
    background-color: var(--dark-sandstone);
    color: var(--charcoal);
}