﻿.alert-outline,
.alert-outline-coloured {
    position: relative;
    padding: .95rem;
    margin-bottom: 1rem;
    border: 0 solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: .2rem
}

.alert-outline,
.alert-outline-coloured {
    padding: 0;
    display: flex;
    color: #fff
}

    .alert-outline.alert-dismissible .btn-close,
    .alert-outline-coloured.alert-dismissible .btn-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        font-size: .8rem;
        padding: 1.3rem .95rem
    }

    .alert-outline .close,
    .alert-outline-coloured .close:focus,
    .alert-outline .close,
    .alert-outline-coloured .close:hover {
        color: #fff;
        opacity: 1
    }

.alert-outline,
.alert-outline-coloured {
    color: #212529;
    background: #fff
}

    .alert-outline-coloured hr,
    .alert-outline hr {
        border-top-color: #ced4da
    }

    .alert-outline-coloured .close:focus,
    .alert-outline-coloured .close:hover,
    .alert-outline .close:focus,
    .alert-outline .close:hover {
        color: #343a40
    }

    .alert-outline-coloured .alert-message,
    .alert-outline .alert-message {
        border-top-right-radius: .2rem;
        border-bottom-right-radius: .2rem;
        border-top-left-radius: .2rem;
        border-bottom-left-radius: .2rem;
        border: 1px solid #ced4da
    }

        .alert-outline-coloured .alert-message:not(:first-child),
        .alert-outline .alert-message:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 0
        }

    .alert-outline-coloured .alert-icon,
    .alert-outline .alert-icon {
        border-top-left-radius: .2rem;
        border-bottom-left-radius: .2rem;
        color: #fff
    }

    .alert-outline-coloured.alert-primary .alert-icon,
    .alert-outline.alert-primary .alert-icon {
        background-color: #669ae5
    }

    .alert-outline-coloured.alert-secondary .alert-icon,
    .alert-outline.alert-secondary .alert-icon {
        background-color: #6f42c1
    }

    .alert-outline-coloured.alert-success .alert-icon,
    .alert-outline.alert-success .alert-icon {
        background-color: #007a5a
    }

    .alert-outline-coloured.alert-info .alert-icon,
    .alert-outline.alert-info .alert-icon {
        background-color: #20c997
    }

    .alert-outline-coloured.alert-warning .alert-icon,
    .alert-outline.alert-warning .alert-icon {
        background-color: #e5a54b
    }

    .alert-outline-coloured.alert-danger .alert-icon,
    .alert-outline.alert-danger .alert-icon {
        background-color: #de4e2b
    }

    .alert-outline-coloured.alert-light .alert-icon,
    .alert-outline.alert-light .alert-icon {
        background-color: #e9ecef
    }

    .alert-outline-coloured.alert-dark .alert-icon,
    .alert-outline.alert-dark .alert-icon {
        background-color: #153d77
    }

    .alert-outline-coloured.alert-tertiary .alert-icon,
    .alert-outline.alert-tertiary .alert-icon {
        background-color: #669ae5
    }

    .alert-outline-coloured.alert-primary .alert-message {
        border-color: #669ae5
    }

    .alert-outline-coloured.alert-secondary .alert-message {
        border-color: #6f42c1
    }

    .alert-outline-coloured.alert-success .alert-message {
        border-color: #007a5a
    }

    .alert-outline-coloured.alert-info .alert-message {
        border-color: #20c997
    }

    .alert-outline-coloured.alert-warning .alert-message {
        border-color: #e5a54b
    }

    .alert-outline-coloured.alert-danger .alert-message {
        border-color: #de4e2b
    }

    .alert-outline-coloured.alert-light .alert-message {
        border-color: #e9ecef
    }

    .alert-outline-coloured.alert-dark .alert-message {
        border-color: #153d77
    }

    .alert-outline-coloured.alert-tertiary .alert-message {
        border-color: #669ae5
    }

.alert-icon {
    padding: .95rem;
    background: hsla(0,0%,100%,.1)
}

.alert-message {
    padding: .95rem;
    width: 100%;
    font-size: 95%;
    box-sizing: border-box
}

.alert-message ul {
    padding: 0;
    list-style: none;
}

.alert.auth-alert {
    margin: 0 0 20px 0;
}