.toggle-button {
    display: inline-block;
    cursor: pointer;
    padding: 3px 7px;
    border: 1px solid var(--input-border);
    border-radius: 3px;
    margin: 2px 4px;
    background: white;
}

    .toggle-button:hover {
        background: #f5f5f5;
    }

    .toggle-button.selected {
        background: var(--green);
        /*background: var(--primary);*/
        border-color: var(--green);
        color: white;
    }

    .toggle-button .toggle-button-title {
        text-align: center;
        font-size: 1.1em;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .toggle-button .toggle-button-sub-title {
        text-align: center;
        /*font-size: .9em;*/
        color: #454545;
        color: var(--font-primary); 
        padding: 2px 0;
    }

    .toggle-button.selected .toggle-button-sub-title {
        text-align: center;
        /*font-size: .9em;*/
        color: #ededed;
    }

.toggle-button-group {
    display: flex;
}

    .toggle-button-group .toggle-button {
        margin: 0;
        border-radius: 0;
        border-right: none;
    }

        .toggle-button-group .toggle-button:last-of-type {
            border-right: 1px solid var(--border-1);
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .toggle-button-group .toggle-button:first-of-type {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

.toggle-button-section {
    display: inline-block;
    padding: 0 10px 10px 0;
}

    .toggle-button-section .toggle-button-section-title {
        padding: 0 0 5px 0;
        color: var(--accent-1);
        font-size: .9em;
        /*text-transform: uppercase;*/
        letter-spacing: 1.5px;
        font-weight: bold;
    }