input[type="submit"],
input[type="button"],
input[type="reset"],
button.qui-button,
button,
a.qui-button,
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.75em;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: all .15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Maven Pro', Verdana, sans-serif;
    -webkit-box-shadow: none; /* qui-button reset */
    -moz-box-shadow: none; /* qui-button reset */
    box-shadow: none; /* qui-button reset */
    float: none; /* qui-button reset */
}

/*****************************/
/* button primary & standard */
/*****************************/
input[type="submit"],
input[type="submit"]:disabled,
input[type="submit"][disabled],
input[type="button"],
input[type="button"]:disabled,
input[type="button"][disabled],
input[type="reset"],
input[type="reset"]:disabled,
input[type="reset"][disabled],
button.qui-button,
button.qui-button:disabled,
button.qui-button[disabled],
button,
button:disabled,
button[disabled],
a.qui-button,
.btn-primary {
    background-color: #3986dd;
    border-color: #3986dd;
    color: #fff;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:active,
button.qui-button:hover,
button.qui-button:active,
button.qui-button.btn-primary:hover,
button.qui-button.btn-primary:active,
button.qui-button[disabled]:hover,
button.qui-button[disabled]:active,
button:hover,
button:active,
.btn-primary:hover,
.btn-primary:active {
    background: #2976cd;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-outline,
input[type="button"].btn-outline,
input[type="reset"].btn-outline,
button.qui-button.btn-outline,
button.btn-outline,
.btn-primary.btn-outline,
input[type="submit"].btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-outline:disabled:active,
input[type="button"].btn-outline:disabled:hover,
input[type="button"].btn-outline:disabled:active,
input[type="reset"].btn-outline:disabled:hover,
input[type="reset"].btn-outline:disabled:active,
button.qui-button.btn-primary.btn-outline:disabled:hover,
button.qui-button.btn-primary.btn-outline:disabled:active,
button:disabled.btn-outline:hover,
button:disabled.btn-outline:active,
.btn-primary.btn-disabled.btn-outline:hover,
.btn-primary.btn-disabled.btn-outline:active {
    color: #3986dd;
}

/***************/
/* button link */
/***************/
input[type="submit"].btn-link,
input[type="button"].btn-link,
input[type="reset"].btn-link,
button.qui-button.btn-link,
button.btn-link,
.btn-link {
    background: none;
    border: none;
    color: #3986dd;
}

input[type="submit"].btn-link:hover,
input[type="submit"].btn-link:active,
input[type="button"].btn-link:hover,
input[type="button"].btn-link:active,
input[type="reset"].btn-link:hover,
input[type="reset"].btn-link:active,
button.qui-button.btn-link:hover,
button.qui-button.btn-link:active,
.btn-link:hover,
.btn-link:active {
    text-decoration: underline;
}

/********************/
/* button link dark */
/********************/
input[type="submit"].btn-link-dark,
input[type="button"].btn-link-dark,
input[type="reset"].btn-link-dark,
button.qui-button.btn-link-dark,
button.btn-link-dark,
.btn-link-dark {
    background: none;
    border: none;
    color: inherit;
}

input[type="submit"].btn-link-dark:hover,
input[type="submit"].btn-link-dark:active,
input[type="button"].btn-link-dark:hover,
input[type="button"].btn-link-dark:active,
input[type="reset"].btn-link-dark:hover,
input[type="reset"].btn-link-dark:active,
button.qui-button.btn-link-dark:hover,
button.qui-button.btn-link-dark:active,
.btn-link-dark:hover,
.btn-link-dark:active {
    color: #3986dd;
}

/********************/
/* button link body */
/********************/
input[type="submit"].btn-link-body,
input[type="button"].btn-link-body,
input[type="reset"].btn-link-body,
button.qui-button.btn-link-body,
button.btn-link-body,
.btn-link-body {
    background: none;
    border: none;
    color: hsl(from currentColor h s l);
}

input[type="submit"].btn-link-body:hover,
input[type="submit"].btn-link-body:active,
input[type="button"].btn-link-body:hover,
input[type="button"].btn-link-body:active,
input[type="reset"].btn-link-body:hover,
input[type="reset"].btn-link-body:active,
button.qui-button.btn-link-body:hover,
button.qui-button.btn-link-body:active,
.btn-link-body:hover,
.btn-link-body:active {
    color: color-mix(in srgb, currentColor, white 10%);
}

/********************/
/* button secondary */
/********************/
input[type="submit"].btn-secondary,
input[type="button"].btn-secondary,
input[type="reset"].btn-secondary,
button.qui-button.btn-secondary,
button.btn-secondary,
.btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

input[type="submit"].btn-secondary:hover,
input[type="submit"].btn-secondary:active,
input[type="button"].btn-secondary:hover,
input[type="button"].btn-secondary:active,
input[type="reset"].btn-secondary:hover,
input[type="reset"].btn-secondary:active,
button.qui-button.btn-secondary:hover,
button.qui-button.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary:active {
    background: #5c656d;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-secondary.btn-outline,
input[type="button"].btn-secondary.btn-outline,
input[type="reset"].btn-secondary.btn-outline,
button.btn-secondary.qui-button.btn-outline,
button.btn-secondary.btn-outline,
.btn-secondary.btn-outline,
input[type="submit"].btn-secondary.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-secondary.btn-outline:disabled:active,
input[type="button"].btn-secondary.btn-outline:disabled:hover,
input[type="button"].btn-secondary.btn-outline:disabled:active,
input[type="reset"].btn-secondary.btn-outline:disabled:hover,
input[type="reset"].btn-secondary.btn-outline:disabled:active,
button.qui-button.btn-secondary.btn-outline:disabled:hover,
button.qui-button.btn-secondary.btn-outline:disabled:active,
button.btn-secondary.btn-outline:disabled:hover,
button.btn-secondary.btn-outline:disabled:active,
.btn-secondary.btn-outline.btn-disabled:hover,
.btn-secondary.btn-outline.btn-disabled:active {
    color: #6c757d;
}

/******************/
/* button success */
/******************/
input[type="submit"].btn-success,
input[type="button"].btn-success,
input[type="reset"].btn-success,
button.qui-button.btn-success,
button.btn-success,
.btn-success {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}

input[type="submit"].btn-success:hover,
input[type="submit"].btn-success:active,
input[type="button"].btn-success:hover,
input[type="button"].btn-success:active,
input[type="reset"].btn-success:hover,
input[type="reset"].btn-success:active,
button.qui-button.btn-success:hover,
button.qui-button.btn-success:active,
.btn-success:hover,
.btn-success:active {
    background: #189735;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-success.btn-outline,
input[type="button"].btn-success.btn-outline,
input[type="reset"].btn-success.btn-outline,
button.btn-success.qui-button.btn-outline,
button.btn-success.btn-outline,
.btn-success.btn-outline,
input[type="submit"].btn-success.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-success.btn-outline:disabled:active,
input[type="button"].btn-success.btn-outline:disabled:hover,
input[type="button"].btn-success.btn-outline:disabled:active,
input[type="reset"].btn-success.btn-outline:disabled:hover,
input[type="reset"].btn-success.btn-outline:disabled:active,
button.qui-button.btn-success.btn-outline:disabled:hover,
button.qui-button.btn-success.btn-outline:disabled:active,
button.btn-success.btn-outline:disabled:hover,
button.btn-success.btn-outline:disabled:active,
.btn-success.btn-outline.btn-disabled:hover,
.btn-success.btn-outline.btn-disabled:active {
    color: #28a745;
}

/*****************/
/* button danger */
/*****************/
input[type="submit"].btn-danger,
input[type="button"].btn-danger,
input[type="reset"].btn-danger,
button.qui-button.btn-danger,
button.btn-danger,
.btn-danger {
    background: #dc4139;
    border-color: #dc4139;
    color: #fff;
}

input[type="submit"].btn-danger:hover,
input[type="submit"].btn-danger:active,
input[type="button"].btn-danger:hover,
input[type="button"].btn-danger:active,
input[type="reset"].btn-danger:hover,
input[type="reset"].btn-danger:active,
button.qui-button.btn-danger:hover,
button.qui-button.btn-danger:active,
.btn-danger:hover,
.btn-danger:active {
    background: #cc3129;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-danger.btn-outline,
input[type="button"].btn-danger.btn-outline,
input[type="reset"].btn-danger.btn-outline,
button.btn-danger.qui-button.btn-outline,
button.btn-danger.btn-outline,
.btn-danger.btn-outline,
input[type="submit"].btn-danger.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-danger.btn-outline:disabled:active,
input[type="button"].btn-danger.btn-outline:disabled:hover,
input[type="button"].btn-danger.btn-outline:disabled:active,
input[type="reset"].btn-danger.btn-outline:disabled:hover,
input[type="reset"].btn-danger.btn-outline:disabled:active,
button.qui-button.btn-danger.btn-outline:disabled:hover,
button.qui-button.btn-danger.btn-outline:disabled:active,
button.btn-danger.btn-outline:disabled:hover,
button.btn-danger.btn-outline:disabled:active,
.btn-danger.btn-outline.btn-disabled:hover,
.btn-danger.btn-outline.btn-disabled:active {
    color: #dc4139;
}

/******************/
/* button warning */
/******************/
input[type="submit"].btn-warning,
input[type="button"].btn-warning,
input[type="reset"].btn-warning,
button.qui-button.btn-warning,
button.btn-warning,
.btn-warning {
    background: #ffd147;
    border-color: #ffd147;
    color: #333;
}

input[type="submit"].btn-warning:hover,
input[type="submit"].btn-warning:active,
input[type="button"].btn-warning:hover,
input[type="button"].btn-warning:active,
input[type="reset"].btn-warning:hover,
input[type="reset"].btn-warning:active,
button.qui-button.btn-warning:hover,
button.qui-button.btn-warning:active,
.btn-warning:hover,
.btn-warning:active {
    background: #efc137;
    color: #393f46;
    outline: none;
}

/* outline */
input[type="submit"].btn-warning.btn-outline,
input[type="button"].btn-warning.btn-outline,
input[type="reset"].btn-warning.btn-outline,
button.btn-warning.qui-button.btn-outline,
button.btn-warning.btn-outline,
.btn-warning.btn-outline,
input[type="submit"].btn-warning.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-warning.btn-outline:disabled:active,
input[type="button"].btn-warning.btn-outline:disabled:hover,
input[type="button"].btn-warning.btn-outline:disabled:active,
input[type="reset"].btn-warning.btn-outline:disabled:hover,
input[type="reset"].btn-warning.btn-outline:disabled:active,
button.qui-button.btn-warning.btn-outline:disabled:hover,
button.qui-button.btn-warning.btn-outline:disabled:active,
button.btn-warning.btn-outline:disabled:hover,
button.btn-warning.btn-outline:disabled:active,
.btn-warning.btn-outline.btn-disabled:hover,
.btn-warning.btn-outline.btn-disabled:active {
    color: #f4bd16;
}

/***************/
/* button info */
/***************/
input[type="submit"].btn-info,
input[type="button"].btn-info,
input[type="reset"].btn-info,
button.qui-button.btn-info,
button.btn-info,
.btn-info {
    background: #51a1c0;
    border-color: #51a1c0;
    color: #fff;
}

input[type="submit"].btn-info:hover,
input[type="submit"].btn-info:active,
input[type="button"].btn-info:hover,
input[type="button"].btn-info:active,
input[type="reset"].btn-info:hover,
input[type="reset"].btn-info:active,
button.qui-button.btn-info:hover,
button.qui-button.btn-info:active,
.btn-info:hover,
.btn-info:active {
    background: #4191b0;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-info.btn-outline,
input[type="button"].btn-info.btn-outline,
input[type="reset"].btn-info.btn-outline,
button.btn-info.qui-button.btn-outline,
button.btn-info.btn-outline,
.btn-info.btn-outline,
input[type="submit"].btn-info.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-info.btn-outline:disabled:active,
input[type="button"].btn-info.btn-outline:disabled:hover,
input[type="button"].btn-info.btn-outline:disabled:active,
input[type="reset"].btn-info.btn-outline:disabled:hover,
input[type="reset"].btn-info.btn-outline:disabled:active,
button.qui-button.btn-info.btn-outline:disabled:hover,
button.qui-button.btn-info.btn-outline:disabled:active,
button.btn-info.btn-outline:disabled:hover,
button.btn-info.btn-outline:disabled:active,
.btn-info.btn-outline.btn-disabled:hover,
.btn-info.btn-outline.btn-disabled:active {
    color: #51a1c0;
}

/***************/
/* button dark */
/***************/
input[type="submit"].btn-dark,
input[type="button"].btn-dark,
input[type="reset"].btn-dark,
button.qui-button.btn-dark,
button.btn-dark,
.btn-dark {
    background: #393f46;
    border-color: #393f46;
    color: #fff;
}

input[type="submit"].btn-dark:hover,
input[type="submit"].btn-dark:active,
input[type="button"].btn-dark:hover,
input[type="button"].btn-dark:active,
input[type="reset"].btn-dark:hover,
input[type="reset"].btn-dark:active,
button.qui-button.btn-dark:hover,
button.qui-button.btn-dark:active,
.btn-dark:hover,
.btn-dark:active {
    background: #292f36;
    color: #fff;
    outline: none;
}

/* outline */
input[type="submit"].btn-dark.btn-outline,
input[type="button"].btn-dark.btn-outline,
input[type="reset"].btn-dark.btn-outline,
button.btn-dark.qui-button.btn-outline,
button.btn-dark.btn-outline,
.btn-dark.btn-outline,
input[type="submit"].btn-dark.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-dark.btn-outline:disabled:active,
input[type="button"].btn-dark.btn-outline:disabled:hover,
input[type="button"].btn-dark.btn-outline:disabled:active,
input[type="reset"].btn-dark.btn-outline:disabled:hover,
input[type="reset"].btn-dark.btn-outline:disabled:active,
button.qui-button.btn-dark.btn-outline:disabled:hover,
button.qui-button.btn-dark.btn-outline:disabled:active,
button.btn-dark.btn-outline:disabled:hover,
button.btn-dark.btn-outline:disabled:active,
.btn-dark.btn-outline.btn-disabled:hover,
.btn-dark.btn-outline.btn-disabled:active {
    color: #393f46;
}

/***************/
/* button light */
/***************/
input[type="submit"].btn-light,
input[type="button"].btn-light,
input[type="reset"].btn-light,
button.qui-button.btn-light,
button.btn-light,
.btn-light {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #393f46;
}

input[type="submit"].btn-light:hover,
input[type="submit"].btn-light:active,
input[type="button"].btn-light:hover,
input[type="button"].btn-light:active,
input[type="reset"].btn-light:hover,
input[type="reset"].btn-light:active,
button.qui-button.btn-light:hover,
button.qui-button.btn-light:active,
.btn-light:hover,
.btn-light:active {
    background: #d5d5d5;
    color: #393f46;
    outline: none;
}

/* outline */
input[type="submit"].btn-light.btn-outline,
input[type="button"].btn-light.btn-outline,
input[type="reset"].btn-light.btn-outline,
button.btn-light.qui-button.btn-outline,
button.btn-light.btn-outline,
.btn-light.btn-outline,
input[type="submit"].btn-light.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-light.btn-outline:disabled:active,
input[type="button"].btn-light.btn-outline:disabled:hover,
input[type="button"].btn-light.btn-outline:disabled:active,
input[type="reset"].btn-light.btn-outline:disabled:hover,
input[type="reset"].btn-light.btn-outline:disabled:active,
button.qui-button.btn-light.btn-outline:disabled:hover,
button.qui-button.btn-light.btn-outline:disabled:active,
button.btn-light.btn-outline:disabled:hover,
button.btn-light.btn-outline:disabled:active,
.btn-light.btn-outline.btn-disabled:hover,
.btn-light.btn-outline.btn-disabled:active {
    color: #aaa;
}

/****************/
/* button white */
/****************/
input[type="submit"].btn-white,
input[type="button"].btn-white,
input[type="reset"].btn-white,
button.qui-button.btn-white,
button.btn-white,
.btn-white {
    background: #fafafa;
    border-color: #fafafa;
    color: #393f46;
}

input[type="submit"].btn-white:hover,
input[type="submit"].btn-white:active,
input[type="button"].btn-white:hover,
input[type="button"].btn-white:active,
input[type="reset"].btn-white:hover,
input[type="reset"].btn-white:active,
button.qui-button.btn-white:hover,
button.qui-button.btn-white:active,
.btn-white:hover,
.btn-white:active {
    background: #eaeaea;
    color: #393f46;
    outline: none;
}

/* outline */
input[type="submit"].btn-white.btn-outline,
input[type="button"].btn-white.btn-outline,
input[type="reset"].btn-white.btn-outline,
button.btn-white.qui-button.btn-outline,
button.btn-white.btn-outline,
.btn-white.btn-outline,
input[type="submit"].btn-white.btn-outline:disabled:hover, /* outline disabled */
input[type="submit"].btn-white.btn-outline:disabled:active,
input[type="button"].btn-white.btn-outline:disabled:hover,
input[type="button"].btn-white.btn-outline:disabled:active,
input[type="reset"].btn-white.btn-outline:disabled:hover,
input[type="reset"].btn-white.btn-outline:disabled:active,
button.qui-button.btn-white.btn-outline:disabled:hover,
button.qui-button.btn-white.btn-outline:disabled:active,
button.btn-white.btn-outline:disabled:hover,
button.btn-white.btn-outline:disabled:active,
.btn-white.btn-outline.btn-disabled:hover,
.btn-white.btn-outline.btn-disabled:active {
    color: #fafafa;
}

/* outline hover */
input[type="submit"].btn-white.btn-outline:hover,
input[type="submit"].btn-white.btn-outline:active,
input[type="button"].btn-white.btn-outline:hover,
input[type="button"].btn-white.btn-outline:active,
input[type="reset"].btn-white.btn-outline:hover,
input[type="reset"].btn-white.btn-outline:active,
button.btn-white.btn-outline:not(:disabled):hover,
button.btn-white.btn-outline:active,
.btn-white.btn-outline:hover,
.btn-white.btn-outline:active {
    color: #393f46;
}

/**********************************/
/* button outline standard design */
/**********************************/
input[type="submit"].btn-outline,
input[type="button"].btn-outline,
input[type="reset"].btn-outline,
button.btn-outline,
.btn-outline,
.qui-button.btn-outline,
a.qui-button.btn-outline,
button.qui-button.btn-outline {
    background-color: transparent;
}

input[type="submit"].btn-outline:hover,
input[type="submit"].btn-outline:active,
input[type="button"].btn-outline:hover,
input[type="button"].btn-outline:active,
input[type="reset"].btn-outline:hover,
input[type="reset"].btn-outline:active,
button.btn-outline:not(:disabled):hover,
button.btn-outline:active,
.btn-outline:hover,
.btn-outline:active {
    color: #fff;
}

/***********************************/
/* button disabled standard design */
/***********************************/
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
button.qui-button:disabled,
button:disabled,
.btn[disabled],
.btn:disabled,
a.qui-button.btn-disabled,
a.btn.btn-disabled,
.btn-disabled {
    opacity: 0.6;
}

[disabled]:hover,
:disabled:hover,
[disabled]:active,
:disabled:active,
[disabled]:hover > *,
:disabled:hover > * {
    cursor: not-allowed;
}

input[type="submit"].btn-outline:disabled:hover,
input[type="submit"].btn-outline:disabled:active,
input[type="button"].btn-outline:disabled:hover,
input[type="button"].btn-outline:disabled:active,
input[type="reset"].btn-outline:disabled:hover,
input[type="reset"].btn-outline:disabled:active,
button.qui-button.btn-outline:disabled:hover,
button.qui-button.btn-outline:disabled:active,
button.btn-outline:disabled:hover,
button.btn-outline:disabled:active,
.btn-outline.btn-disabled:hover,
.btn-outline.btn-disabled:active {
    opacity: 0.3;
}

/****************/
/* button sizes */
/****************/
.btn-small,
input[type="submit"].btn-small,
input[type="button"].btn-small,
input[type="reset"].btn-small,
.qui-button.btn-small {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    height: auto;
}

.btn-large,
input[type="submit"].btn-large,
input[type="button"].btn-large,
input[type="reset"].btn-large,
.qui-button.btn-large {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
    height: auto;

}

/**
 * Button sizes
 */
.btn-sm {
    padding-block: 0.5em;
    padding-inline: 1em;
    font-size: .875em;
}

.btn-lg {
    gap: 1em;
    font-size: 1.25em;
}

/**
 * Button inner
 */
.btn__icon {
    line-height: inherit;
}

/**
 * Button icon & close
 */
.btn-icon,
.btn-close {
    padding: 0;
    aspect-ratio: 1;
    border-radius: .25rem;
    width: 2.75em;
}

.btn-close {
    color: color-mix(in srgb, currentColor, white 40%);
    background-color: transparent;
    border-color: transparent;
}

.btn-close:hover {
    color: hsl(from currentColor h s l);
    background-color: transparent;
    border-color: transparent;
}

.btn-close:disabled {
    color: color-mix(in srgb, currentColor, white 40%);
    background-color: transparent;
    border-color: transparent;
}

.btn-icon svg,
.btn-close svg {
    width: 1em;
    height: 1em;
}

.btn-rounded {
    border-radius: 999px;
}