.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-lighter) var(--color-primary) var(--color-primary-darker) !important;
    color: #FFF;
}

.btn-outline-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary.hover {
    background-color: var(--color-primary-darker) !important;
    border-color: var(--color-primary-darker) !important;
    color: #FFF;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-primary) !important;
    background-image: none !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--color-primary) !important;
    background-image: none !important;
    border-color: var(--color-primary) !important;
}

.border-primary {
    border-color: var(--color-primary-lighter) var(--color-primary) var(--color-primary-darker) !important;
}

.btn-outline {
    border-width: 1px;
}

.btn-rounded {
    border-radius: 15px !important;
}

.btn-secondary {
    background-color: var(--secondary)!important;
    border-color: var(--secondary) var(--secondary) #ddd!important;
    color: #333!important;
}

html .btn-secondary:hover,
html .btn-secondary:active {
    background-color: var(--secondary-d)!important;
    border-color: var(--secondary-d) var(--secondary-d) #ddd!important;
    color: #333!important;
}