:root {
    /* FILLED BUTTON STYLE: PRIMARY */
    --btnfill-bg: #34281B;
    --btnfill-bg-hover: #59442E;
    --btnfill-bg-active: #34281B;
    --btnfill-border: #34281B;
    --btnfill-text: #FFFFFF;
    
    /* PROJECT MAIN COLORS */
    --color-primary: #EDE4D5; /* cream */
    --color-secondary: #34281B; /* brown */
}

/* --------------------------------------------- */
/* ================== BANNER =================== */
/* --------------------------------------------- */

/* Background color behind system banner */
#navHeaderMain {
    background-color: var(--color-primary);
}

/* --------------------------------------------- */
/* ================ BACKGROUND ================= */
/* --------------------------------------------- */

/* Custom desktop background */
body {
    background-color: var(--color-primary);

}

/* --------------------------------------------- */
/* =============== LAYOUT COLORS =============== */
/* --------------------------------------------- */

/* Header customization */
.event-info-bar {
    background-color: var(--color-secondary);
}

/* Footer customization */
footer {
    background-color: var(--color-secondary) !important;
}

/* Card headers */
.card-header, .login-card-header {
    background-color: var(--color-secondary) !important;
}

/* --------------------------------------------- */
/* =================== TEXTS =================== */
/* --------------------------------------------- */

/* Texts in card headers */
.card-header h3 {
    color: #FFFFFF !important;
}

/* Step texts */
.step-item.active  {
        color: var(--color-secondary) !important;
    }

/* --------------------------------------------- */
/* ================== BUTTONS ================== */
/* --------------------------------------------- */

/* Login "Proceed" Button */
/* Regular */
button#enviar, button#btnCheckSenha {
  background-color: var(--btnfill-bg) !important;
  border-color: var(--btnfill-border) !important;
  color: var(--btnfill-text) !important;
}
/* Hover */
button#enviar,button#btnCheckSenha:hover {
  background-color: var(--btnfill-bg-hover) !important;
  border-color: var(--btnfill-border) !important;
  color: var(--btnfill-text) !important;
}
/* Active */
button#enviar,button#btnCheckSenha:active, button#enviar,button#btnCheckSenha:focus {
  background-color: var(--btnfill-bg-active) !important;
  border-color: var(--btnfill-border) !important;
  color: var(--btnfill-text) !important;
}

/* --------------------------------------------- */
/* ========= MISCELLANEOUS ADJUSTMENTS ========= */
/* --------------------------------------------- */

/* FA Icons */
.fa-regular.fa-file,
.fa-solid.fa-list-check {
    color: var(--color-secondary) !important;
}

/* Step Icons */
.step-item.active .step-num {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}