.btn {
    position: relative;
    border-radius: var(--border-radius);
    cursor: pointer;
    background: transparent;
    border: 1px solid;
    outline: none;
    white-space: unset;
    text-align: center;
    display: inline-flex;
    align-items: center;
    box-sizing: content-box;
    justify-content: center;
    text-decoration: none;
    padding: 5px;
    min-width: 120px;
    font-family: Cuprum, sans-serif;
    font-weight: 400;
}

    .btn.btn-outline {
        background-color: var(--background-color);
    }

        .btn.btn-outline.btn-primary-blue {
            color: var(--brand-primary-blue);
            border-color: var(--brand-primary-blue);
        }

        .btn.btn-outline.btn-info-blue {
            color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }

        .btn.btn-outline.btn-grey {
            color: var(--brand-gray-dark);
            border-color: var(--brand-gray-dark);
        }

        .btn.btn-outline.btn-light-grey {
            color: var(--brand-gray-light);
            border-color: var(--brand-gray-light);
        }

        .btn.btn-outline.btn-orange {
            color: var(--brand-accent-orange);
            border-color: var(--brand-accent-orange);
        }

        .btn.btn-outline.btn-red {
            color: var(--brand-feedback-red);
            border-color: var(--brand-feedback-red);
        }

        .btn.btn-outline.btn-yellow {
            color: var(--brand-feedback-yellow);
            border-color: var(--brand-feedback-yellow);
        }

        .btn.btn-outline.btn-green {
            color: var(--brand-feedback-green);
            border-color: var(--brand-feedback-green);
        }

        .btn.btn-outline:hover,
        .btn.btn-outline:focus {
            color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }

        .btn.btn-outline.error {
           color: var(--brand-feedback-red);
            border-color: var(--brand-feedback-red);
        }

            .btn.btn-outline.error:hover,
            .btn.btn-outline.error:focus {
                color: var(--brand-info-blue);
                border-color: var(--brand-info-blue);
            }

    .btn.btn-filled {
        color: var(--background-color);
    }

        .btn.btn-filled.btn-primary-blue {
            background-color: var(--brand-primary-blue);
            border-color: var(--brand-primary-blue);
        }

        .btn.btn-filled.btn-info-blue {
            background-color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }

        .btn.btn-filled.btn-grey {
            background-color: var(--brand-gray-dark);
            border-color: var(--brand-gray-dark);
        }

        .btn.btn-filled.btn-light-grey {
            background-color: var(--brand-gray-light);
            border-color: var(--brand-gray-light);
        }

        .btn.btn-filled.btn-orange {
            background-color: var(--brand-accent-orange);
            border-color: var(--brand-accent-orange);
        }

        .btn.btn-filled.btn-red {
            background-color: var(--brand-feedback-red);
            border-color: var(--brand-feedback-red);
        }

        .btn.btn-filled.btn-yellow {
            background-color: var(--brand-feedback-yellow);
            border-color: var(--brand-feedback-yellow);
        }

        .btn.btn-filled.btn-green {
            background-color: var(--brand-feedback-green);
            border-color: var(--brand-feedback-green);
        }

        .btn.btn-filled:focus,
        .btn.btn-filled:hover {
            background-color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }

        .btn.btn-filled.error {
            background-color: var(--brand-feedback-red);
            border-color: var(--brand-feedback-red);
        }

            .btn.btn-filled.error:hover,
            .btn.btn-filled.error:focus {
                background-color: var(--brand-info-blue);
                border-color: var(--brand-info-blue);
            }

    .btn:disabled,
    .btn.disabled {
        pointer-events: none;
        opacity: 0.15;
    }

        .swal2-actions .btn:disabled,
        .swal2-actions .btn.disabled {
            pointer-events: unset;
            opacity: unset;
        }

    .btn.btn-icon-before::before,
    .btn.btn-icon-after::after {
        content: '';
        height: 16px;
        aspect-ratio: 1 / 1;
    }

    .btn.btn-icon-before::before {
        margin-right: 8px;
    }

    .btn.btn-icon-after::after {
        margin-left: 8px;
    }

    .btn.btn-filled.btn-icon-before::before,
    .btn.btn-filled.btn-icon-after::after {
        background-color: var(--background-color);
    }

    .btn.btn-outline.btn-primary-blue.btn-icon-before::before,
    .btn.btn-outline.btn-primary-blue.btn-icon-after::after {
        background-color: var(--brand-primary-blue);
    }

    .btn.btn-outline.btn-info-blue.btn-icon-before::before,
    .btn.btn-outline.btn-info-blue.btn-icon-after::after {
        background-color: var(--brand-info-blue);
    }

    .btn.btn-outline.btn-grey.btn-icon-before::before,
    .btn.btn-outline.btn-grey.btn-icon-after::after {
        background-color: var(--brand-gray-dark);
    }

    .btn.btn-outline.btn-light-grey.btn-icon-before::before,
    .btn.btn-outline.btn-light-grey.btn-icon-after::after {
        background-color: var(--brand-gray-light);
    }

    .btn.btn-outline.btn-orange.btn-icon-before::before,
    .btn.btn-outline.btn-orange.btn-icon-after::after {
        background-color: var(--brand-accent-orange);
    }

    .btn.btn-outline.btn-red.btn-icon-before::before,
    .btn.btn-outline.btn-red.btn-icon-after::after {
        background-color: var(--brand-feedback-red);
    }

    .btn.btn-outline.btn-yellow.btn-icon-before::before,
    .btn.btn-outline.btn-yellow.btn-icon-after::after {
        background-color: var(--brand-feedback-yellow);
    }

    .btn.btn-outline.btn-green.btn-icon-before::before,
    .btn.btn-outline.btn-green.btn-icon-after::after {
        background-color: var(--brand-feedback-green);
    }

    .btn.btn-outline.btn-icon-before:hover::before,
    .btn.btn-outline.btn-icon-after:hover::after {
        background-color: var(--brand-info-blue);
    }

/*Deprecated Buttons*/
input[type=submit], input[type=reset], input[type=button], button, .button {
    position: relative;
    border-radius: var(--border-radius);
    cursor: pointer;
    background: transparent;
    border: 1px solid;
    outline: none;
    white-space: unset;
    text-align: center;
    display: inline-flex;
    align-items: center;
    box-sizing: content-box;
    justify-content: center;
    text-decoration: none;
    padding: 5px;
    min-width: 120px;
    line-height: normal;
    text-transform: capitalize;
    font-family: Cuprum, sans-serif;
    font-weight: 400;
}

div.swal2-loading button {
    min-width: unset;
}

    input[type=submit].basicBtn, input[type=reset].basicBtn, input[type=button].basicBtn, button.basicBtn, .button.basicBtn {
        background-color: var(--background-color);
        color: var(--brand-primary-blue);
        border-color: var(--brand-primary-blue);
    }

        .input[type=submit].basicBtn:hover, input[type=reset].basicBtn:hover, input[type=button].basicBtn:hover, button.basicBtn:hover, .button.basicBtn:hover {
            color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }

    input[type=submit].blueBtn, input[type=reset].blueBtn, input[type=button].blueBtn, button.blueBtn, .button.blueBtn {
        color: var(--background-color);
        background-color: var(--brand-info-blue);
        border-color: var(--brand-info-blue);
    }

        input[type=submit].blueBtn:hover, input[type=reset].blueBtn:hover, input[type=button].blueBtn:hover, button.blueBtn:hover, .button.blueBtn:hover {
            background-color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }

    input[type=submit].redBtn, input[type=reset].redBtn, input[type=button].redBtn, button.redBtn, .button.redBtn {
        color: var(--background-color);
        background-color: var(--brand-feedback-red);
        border-color: var(--brand-feedback-red);
    }

        input[type=submit].redBtn:hover, input[type=reset].redBtn:hover, input[type=button].redBtn:hover, button.redBtn:hover, .button.redBtn:hover {
            background-color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }

    input[type=submit].greenBtn, input[type=reset].greenBtn, input[type=button].greenBtn, button.greenBtn, .button.greenBtn {
        color: var(--background-color);
        background-color: var(--brand-primary-blue);
        border-color: var(--brand-primary-blue);
    }

        input[type=submit].greenBtn:hover, input[type=reset].greenBtn:hover, input[type=button].greenBtn:hover, button.greenBtn:hover, .button.greenBtn:hover {
            background-color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }

    input[type=submit].greyishBtn, input[type=reset].greyishBtn, input[type=button].greyishBtn, button.greyishBtn, .button.greyishBtn {
        color: var(--background-color);
        border: 1px solid rgba(57,61,77,0.25);
        background-color: #606370;
    }

        input[type=submit].greyishBtn:hover, input[type=reset].greyishBtn:hover, input[type=button].greyishBtn:hover, button.greyishBtn:hover, .button.greyishBtn:hover {
            background-color: var(--brand-info-blue);
            border-color: var(--brand-info-blue);
        }