.primary-button {
    color: white !important;
    font-weight: 500;
    padding: 6px 12px;
    background-color: var(--primary-color);
    border-radius: var(--border-radius-1);
    border: 2px solid var(--primary-color);
    transition: all .1s ease-in-out;
}

.primary-button:hover {

    background-color: var(--primary-color-hover);
    border: 2px solid var(--primary-color-hover);
}

.outline-button {
    color: var(--light-black);
    background-color: var(--gray);
    font-weight: 500;
    padding: 6px 12px;
    background-color: white;
    border-radius: var(--border-radius-1);
    border: 2px solid var(--light-black);
    width: fit-content;
}

.outline-button:hover {

    background-color: var(--light-black);
    color: white !important;
}


.button-alert {
    background-color: var(--red);
    border: 2px solid var(--red);
}


.button-alert:hover {
    background-color: var(--red-hover);
    border: 2px solid var(--red-hover);
}


.primary-button.not-selected {
    background-color: var(--gray);
    color: var(--light-black) !important;
    border-color: var(--gray);
    pointer-events: all !important;
}

.primary-button.not-selected.selected {
    pointer-events: all !important;
    background-color: var(--primary-opacity-color);
    color: black !important;
    border-color: var(--primary-color);
}

a.primary-button,
a.outline-button {
    text-align: center;
}