:root {
    --ff-bg: #F6EDE5; /*#f3ece6;*/
    --ff-nav: #E5D1D3;
    --ff-white: #ffffff;
    --ff-red: red;
    --ff-lgray: lightgray;
    --tm-orange: #F58C32;
    --tm-warmyellow: #F5AA0A;
    --tm-yellow: #F0C814;
    --tm-warmneutral: #E5D1D3;
    --tm-coolneutral: #C8C8D2;
    --tm-ocean: #8BAAC3;
    --tm-sky: #A5C3D7;
    --tm-air: #D2E6EB;
    --tm-neutral: #F6EDE5;
    --tm-offwhite: #F9F7E9;
    --tm-midnight: #462850;
    --ff-cont-width: 650px;
}

body {
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--ff-bg);
}

label {
    font-weight: 400;
}

.field-container {
    background-color: var(--ff-white);
    padding: 18px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.field-label {
    font-weight: 600;
}

.field-label.required:after { 
    content:" *";
    font-size: 1.5em;
    color: var(--ff-red);
}
.col-field-label.required:after { 
    content:" *";
    color: var(--ff-red);
}
.field-text {
    font-size: 0.85em;
}

div .hidediv {
    display: none;
}

.check {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px;
    max-height: 200px;
}

input:read-only {
    background-color: var(--ff-lgray);
}

#content {
    max-width: var(--ff-cont-width);
}

.form-step {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
  
.form-step.active {
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
  
.progress-bar {
    background-color: var(--tm-yellow);
    transition: width 0.5s ease-in-out;
}