/*:root { //set fallback values*/
/*    --wizard*/
/*}*/

:root {
    --al-color-font: #242424;
    --al-color-background: transparent;
    --al-color-slate: #94A3B8;
    --al-color-white: #ffffff;
    --al-color-muted-blue: #334155;

    --al-color-transparent: transparent;

    --al-border-color: #00498B;
    --al-hover-border-color: #6B7280;

    --al-border-width: 1px;
    --al-border-zero-width: 0px;
    --al-border-style: solid;
    --al-border-radius: 4px;
    --al-padding: 6px;
    --al-font-family: var(--primary-font-family);

    --al-form-font-family: var(--al-font-family);
    --al-form-background-color: var(--al-color-white);
    --al-form-font-color: var(--al-color-font);

    --al-custom-field-font-family: var(--al-font-family);
    --al-custom-field-font-color: var(--al-color-font);
    --al-custom-field-background-color: var(--al-color-background);

    --al-user-input-font-family: var(--al-font-family);
    --al-user-input-font-color: var(--al-color-font);
    --al-user-input-background-color: var(--al-color-white);
    --al-user-input-border-color: var(--al-color-slate);
    --al-user-input-border-width: var(--al-border-width);
    --al-user-input-border-style: var(--al-border-style);
    --al-user-input-padding: var(--al-padding);
    --al-user-input-border-radius: var(--al-border-radius);

    --al-user-input-focus-font-color: var(--al-color-font);
    --al-user-input-focus-background-color: var(--al-color-white);
    --al-user-input-focus-border-color: var(--al-border-color);

    --al-user-input-hover-font-color: var(--al-color-font);
    --al-user-input-hover-background-color: var(--al-color-white);
    --al-user-input-hover-border-color: var(--al-hover-border-color);


    --al-readonly-font-family: var(--al-font-family);
    --al-readonly-border-style: var(--al-border-style);
    --al-readonly-border-color: var(--al-color-transparent);
    --al-readonly-border-width: var(--al-border-zero-width);
    --al-readonly-color-background: var(--al-color-transparent);
    --al-readonly-color-font: var(--al-color-muted-blue);
}

.SIWizardFormText {
    font-family: var(--al-form-font-family);
    color: var(--al-form-font-color);
}

.SIWizardFormBG {
    background-color: var(--al-form-background-color);
}

.customlabeltext {
    font-family: var(--al-custom-field-font-family);
    color: var(--al-custom-field-font-color);
}
.customlabelbg {
    background-color: var(--al-custom-field-background-color);
}

.wizardinput {
    font-family: var(--al-user-input-font-family);
    color: var(--al-user-input-font-color);
    background-color: var(--al-user-input-background-color);
    border-color: var(--al-user-input-border-color);
    border-width: var(--al-user-input-border-width);
    border-style: var(--al-user-input-border-style);
    padding: var(--al-user-input-padding);
    border-radius: var(--al-user-input-border-radius);;
}

.wizardinput:focus {
    color: var(--al-user-input-focus-font-color);
    background-color: var(--al-user-input-focus-background-color);
    border-color: var(--al-user-input-focus-border-color);
}

.wizardinput:hover {
    color: var(--al-user-input-hover-font-color);
    background-color: var(--al-user-input-hover-background-color);
    border-color: var(--al-user-input-hover-border-color);
}

.SIReadonlyData {
    font-family: var(--al-readonly-font-family);
    color: var(--al-readonly-color-font);
    border-style: var(--al-readonly-border-style);
    border-color: var(--al-readonly-border-color);
    border-width: var(--al-readonly-border-width);
    background-color: var(--al-readonly-color-background);
}

.record-bg {
    background: var(--al-color-white);
}