:root {
    --sf-primary: #1FA8B6;
    --sf-secondary: #424c57;
    --sf-success: #00cc94;
    --sf-info: #5b9bd5;
    --sf-warning: #ffc000;
    --sf-danger: #e04e39;
    --sf-light: #f2f4f7;
    --sf-dark: #2c3137;
    --sf-white: #fff;
}

/* Primary */
.e-btn-primary,
.e-btn.e-primary {
    background-color: var(--sf-primary) !important;
    border-color: var(--sf-primary) !important;
    color: var(--sf-white) !important;
}

    .e-btn-primary:hover,
    .e-btn.e-primary:hover {
        opacity: 0.8;
    }

/* Secondary */
.e-btn-secondary,
.e-btn.e-secondary {
    background-color: var(--sf-secondary) !important;
    border-color: var(--sf-secondary) !important;
    color: var(--sf-white) !important;
}

    .e-btn-secondary:hover,
    .e-btn.e-secondary:hover {
        opacity: 0.8;
    }

/* Success */
.e-btn-success,
.e-btn.e-success {
    background-color: var(--sf-success) !important;
    border-color: var(--sf-success) !important;
    color: var(--sf-white) !important;
}

    .e-btn-success:hover,
    .e-btn.e-success:hover {
        opacity: 0.8;
    }

/* Info */
.e-btn-info,
.e-btn.e-info {
    background-color: var(--sf-info) !important;
    border-color: var(--sf-info) !important;
    color: var(--sf-white) !important;
}

    .e-btn-info:hover,
    .e-btn.e-info:hover {
        opacity: 0.8;
    }

/* Warning */
.e-btn-warning,
.e-btn.e-warning {
    background-color: var(--sf-warning) !important;
    border-color: var(--sf-warning) !important;
    color: var(--sf-dark) !important;
}

    .e-btn-warning:hover,
    .e-btn.e-warning:hover {
        opacity: 0.8;
    }

/* Danger */
.e-btn-danger,
.e-btn.e-danger {
    background-color: var(--sf-danger) !important;
    border-color: var(--sf-danger) !important;
    color: var(--sf-white) !important;
}

    .e-btn-danger:hover,
    .e-btn.e-danger:hover {
        opacity: 0.8;
    }

/* Light */
.e-btn-light,
.e-btn.e-light {
    background-color: var(--sf-light) !important;
    border-color: var(--sf-light) !important;
    color: var(--sf-dark) !important;
}

    .e-btn-light:hover,
    .e-btn.e-light:hover {
        opacity: 0.8;
    }

/* Dark */
.e-btn-dark,
.e-btn.e-dark {
    background-color: var(--sf-dark) !important;
    border-color: var(--sf-dark) !important;
    color: var(--sf-white) !important;
}

    .e-btn-dark:hover,
    .e-btn.e-dark:hover {
        opacity: 0.8;
    }