:root {
    /*  well */
    --background-color--well: #e5e9ef;

    /* default */
    --color--default-button: #000;
    --background-color--default-button: #eaf0f6;
    --border-color--default-button: #d1d3d6;
    --box-shadow-color--default-button: rgb(211 212 213 / 50%);

    /* secondary */
    --color--secondary-button: #FFF;
    --background-color--secondary-button: #0d6efd;
    --border-color--secondary-button: #0d6efd;
    --box-shadow-color--secondary-button: rgb(49 132 253 / 50%);

    /* success */
    --color--success-button: #FFF;
    --background-color--success-button: #13C4A3;
    --border-color--success-button: #13C4A3;
    --box-shadow-color--success-button: #2b8557;

    /* info */
    --color--info-button: #FFF;
    --background-color--info-button: #22D3EE;
    --border-color--info-button: #22D3EE;
    --box-shadow-color--info-button: #1da4c7;

    /* danger */
    --color--danger-button: #FFF;
    --background-color--danger-button: #ED4B39;
    --border-color--danger-button: #ED4B39;
    --box-shadow-color--danger-button: #703833;

    /* warning */
    --color--warning-button: #FFF;
    --background-color--warning-button: #EE9E2E;
    --border-color--warning-button: #EE9E2E;
    --box-shadow-color--warning-button: #7C4E0D;

    /* primary */
    --color--primary-button: #FFF;
    --background-color--primary-button: #2FABE9;
    --border-color--primary-button: #2FABE9;
    --box-shadow-color--primary-button: #0C577C;


}

/************* global *************/
body *:not(i) {
    font-family: Poppins, serif !important;
}

i {
    vertical-align: middle !important;
}

/************* well *************/
.well {
    background: var(--background-color--well);
}

.table-striped > tbody > tr {
    background: #fff !important;
}

/************* btn *************/
.btn {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border-radius: 0.25rem;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none;
}

/************* btn-default *************/
.btn-default {
    color: var(--color--default-button);
    background-color: var(--background-color--default-button) !important;
    border-color: var(--border-color--default-button) !important;
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default:hover,
.open > .dropdown-toggle.btn-default.focus,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default:hover {
    color: var(--color--default-button) !important;
    background-color: var(--background-color--default-button) !important;
    border-color: var(--border-color--default-button) !important;
    box-shadow: 0 0 0 0.25rem var(--box-shadow-color--default-button) !important;
}

/************* btn-secondary *************/
.btn-secondary {
    color: var(--color--secondary-button);
    background-color: var(--background-color--secondary-button) !important;
    border-color: var(--border-color--secondary-button) !important;
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

.btn-secondary.active.focus,
.btn-secondary.active:focus,
.btn-secondary.active:hover,
.btn-secondary:active.focus,
.btn-secondary:active:focus,
.btn-secondary:active:hover,
.btn-secondary:hover,
.open > .dropdown-toggle.btn-secondary.focus,
.open > .dropdown-toggle.btn-secondary:focus,
.open > .dropdown-toggle.btn-secondary:hover {
    color: var(--color--secondary-button) !important;
    background: var(--background-color--secondary-button) !important;
    border-color: var(--border-color--secondary-button) !important;
    box-shadow: 0 0 0 0.25rem var(--box-shadow-color--secondary-button) !important;
}

/************* btn-success *************/
.btn-success {
    color: var(--color--success-button) !important;
    background-color: var(--background-color--success-button) !important;
    border-color: var(--border-color--success-button);
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success:hover,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover {
    color: var(--color--success-button) !important;
    background: var(--background-color--success-button) !important;
    border-color: var(--border-color--success-button) !important;
    box-shadow: 0 0 0 0.25rem var(--box-shadow-color--success-button) !important;
}

/************* btn-primary *************/
.btn-primary {
    color: var(--color--primary-button) !important;
    background-color: var(--background-color--primary-button) !important;
    border-color: var(--border-color--primary-button);
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
    color: var(--color--primary-button) !important;
    background: var(--background-color--primary-button) !important;
    border-color: var(--border-color--primary-button) !important;
    box-shadow: 0 0 0 0.25rem var(--box-shadow-color--primary-button) !important;
}

/************* btn-info *************/
.btn-info {
    color: var(--color--info-button) !important;
    background-color: var(--background-color--info-button) !important;
    border-color: var(--border-color--info-button);
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active.focus,
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info:hover,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info:hover {
    color: var(--color--info-button) !important;
    background: var(--background-color--info-button) !important;
    border-color: var(--border-color--info-button) !important;
    box-shadow: 0 0 0 0.25rem var(--box-shadow-color--info-button) !important;
}

/************* btn-danger *************/
.btn-danger {
    color: var(--color--danger-button);
    background-color: var(--background-color--danger-button) !important;
    border-color: var(--border-color--danger-button);
    text-shadow: none;
    background-image: none;
    box-shadow: none;
}

.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger:active.focus,
.btn-danger:active:focus,
.btn-danger:active:hover,
.btn-danger:hover,
.open > .dropdown-toggle.btn-danger.focus,
.open > .dropdown-toggle.btn-danger:focus,
.open > .dropdown-toggle.btn-danger:hover {
    color: var(--color--danger-button) !important;
    background: var(--background-color--danger-button) !important;
    border-color: var(--border-color--danger-button) !important;
    box-shadow: 0 0 0 0.25rem var(--box-shadow-color--danger-button);
}


/************* btn-warning *************/
.btn-warning {
    color: var(--color--warning-button);
    background-color: var(--background-color--warning-button) !important;
    border-color: var(--border-color--warning-button);
    text-shadow: none;
    background-image: none;
    box-shadow: none;
}

.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning:active.focus,
.btn-warning:active:focus,
.btn-warning:active:hover,
.btn-warning:hover,
.open > .dropdown-toggle.btn-warning.focus,
.open > .dropdown-toggle.btn-warning:focus,
.open > .dropdown-toggle.btn-warning:hover {
    color: var(--color--warning-button) !important;
    background: var(--background-color--warning-button) !important;
    border-color: var(--border-color--warning-button) !important;
    box-shadow: 0 0 0 0.25rem var(--box-shadow-color--warning-button);
}


.text-success {
    color: var(--background-color--success-button)
}

.text-danger {
    color: var(--background-color--danger-button)
}

.text-info {
    color: var(--background-color--info-button)
}