:root, [data-bs-theme=light] {
    /* --phoenix-body-bg: #fff; */
    --primary-btn-color: #fff;
    --secondary-btn-color: #2B2D6E;
    --primary-btn-bg: #efc337;
    --secondary-btn-bg: #efc337;

    --secondary-color: #efc337;

    --phoenix-body-highlight-color: #2B2D6E;
    --phoenix-body-highlight-color-rgb: 43, 45, 110;
    --phoenix-tertiary-color: #2B2D6E;
    --phoenix-tertiary-color-rgb: 43, 45, 110;
    --phoenix-secondary-color: #2B2D6E;
    --phoenix-secondary-color-rgb: 43, 45, 110;
    --phoenix-emphasis-color: #2B2D6E;
    --phoenix-emphasis-color-rgb: 43, 45, 110;

    --phoenix-body-font-family: 'Poppins', sans-serif;
    --phoenix-body-font-weight: 300;

    --active-conv-color: #EC1F00;

    --title-font-family: 'Montserrat', sans-serif;
    --title-font-weight: 800;
}

h1, h2, h3, h4, h5, h6, label {
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);
}

.form-control,
.form-control:focus {
    background-color: rgba(0, 0, 0, .04) !important;
    border-radius: 4px;
    border: 2px solid transparent;
    font-size: 15px;
}

.form-control:focus {
    border-color: #efc337;
    box-shadow: 0 0 10px rgba(0, 0, 0, .11);
}

.btn {
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
}

.btn:hover {
    border-color: transparent;
}

.btn.btn-primary,
.btn.btn-primary:active {
    color: var(--primary-btn-color);
    background-color: var(--primary-btn-bg);
}

.btn.btn-secondary,
.btn.btn-secondary:active {
    color: var(--secondary-btn-color);
    background-color: var(--secondary-btn-bg);
}

.text-body-yellow {
    color: var(--secondary-color);
}

#converse-btn {
    transition: box-shadow 0.3s ease-in-out;
}
#converse-btn.active-conv {
    background-color: var(--active-conv-color) !important;
}