/* ========================= */
/* TEXT GROUP                */
/* ========================= */

.text-group {
    display: flex;
    gap: 6px;
    margin-left: 4px;
}

/* ========================= */
/* TEXT BUTTONS              */
/* ========================= */

.text-btn {
    padding: 6px 8px;

    font-size: 0.85rem;
    font-weight: 700;

    border-radius: 8px;

    border: 1px solid rgba(0,85,164,0.25);

    background: rgba(255,255,255,0.9);

    color: #0055A4;

    cursor: pointer;

    transition: 0.15s ease;
}

.text-btn:hover {
    background: rgba(0,191,255,0.15);
}

.text-btn.active {
    background: #0055A4;
    color: white;
}

/* ======================================================== */
/* RESPONSIVE                                                */
/* ======================================================== */

@media (max-width: 768px) {

    .text-group {
        flex-wrap: wrap;
    }

    .text-btn {
        padding: 6px 7px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {

    .text-btn {
        font-size: 0.75rem;
        padding: 5px 6px;
    }
}