.btn-base {
    color: var(--thin-color);
    background-color: var(--main-color);
    border-color: var(--main-color);
}

    .btn-base:hover {
        color: var(--thin-color);
        background-color: var(--dark-color);
        border-color: var(--dark-color);
    }

    .btn-base:focus, .btn-base.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-base.disabled, .btn-base:disabled {
        color: var(--main-color);
        background-color: transparent;
    }

    .btn-base:not(:disabled):not(.disabled):active, .btn-base:not(:disabled):not(.disabled).active,
    .show > .btn-base.dropdown-toggle {
        color: var(--thin-color);
        background-color: var(--dark-color);
        border-color: var(--dark-color);
    }

        .btn-base:not(:disabled):not(.disabled):active:focus, .btn-base:not(:disabled):not(.disabled).active:focus,
        .show > .btn-base.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }


.btn-outline-theme {
    color: var(--main-color);
    border-color: var(--main-color);
}

    .btn-outline-theme:hover {
        color: var(--thin-color);
        background-color: var(--main-color);
        border-color: var(--main-color);
    }

    .btn-outline-theme:focus, .btn-outline-theme.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-outline-theme.disabled, .btn-outline-theme:disabled {
        color: var(--main-color);
        background-color: transparent;
    }

    .btn-outline-theme:not(:disabled):not(.disabled):active, .btn-outline-theme:not(:disabled):not(.disabled).active,
    .show > .btn-outline-theme.dropdown-toggle {
        color: var(--thin-color);
        background-color: var(--main-color);
        border-color: var(--main-color);
    }

        .btn-outline-theme:not(:disabled):not(.disabled):active:focus, .btn-outline-theme:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-theme.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

.btn-charcoal {
    /*color: #fff;
    background: linear-gradient(to right, #4472C4, #2CC889);*/
    color: white;
    background-color: #595757;
    border: none;
    text-decoration: none;
}

    .btn-charcoal:hover {
        color: white;
        background-color: rgb(89 87 87 / 0.85);
        transform: translate(0,2px);
    }

    .btn-charcoal:active {
        color: white;
        background-color: rgb(89 87 87 / 0.85);
        transform: translate(0,2px);
    }