﻿.alert {
    font-size: 14px;
    line-height: 18px;
    padding: 16px
}

    .alert.center .alert-inner {
        justify-content: center
    }

    .alert.success {
        background-color: #0ca74f;
        color: #fff
    }

        .alert.success .alert-close svg,
        .alert.success .alert-icon svg {
            fill: #fff
        }

        .alert.success .alert-icon svg {
            height: 11px;
            width: 14px
        }

    .alert.warning {
        background-color: #ffecb3;
        color: #0a3847
    }

        .alert.warning .alert-close svg,
        .alert.warning .alert-icon svg {
            fill: #0a3847
        }

    .alert.error {
        background-color: #ca2002;
        color: #fff
    }

        .alert.error .alert-close svg,
        .alert.error .alert-icon svg {
            fill: #fff
        }

    .alert.info {
        background-color: #205a6d;
        color: #fff
    }

        .alert.info .alert-close svg,
        .alert.info .alert-icon svg {
            fill: #fff
        }

        .alert.info .alert-icon svg {
            height: 20px;
            width: 20px
        }

    .alert .alert-icon,
    .alert .alert-text {
        margin-right: 8px
    }

        .alert .alert-icon:last-child,
        .alert .alert-text:last-child {
            margin-right: 0
        }

    .alert .alert-close,
    .alert .alert-icon {
        align-self: flex-start;
        flex-shrink: 0
    }

    .alert .alert-close {
        margin-left: auto
    }

.alert-inner {
    align-items: center;
    display: flex;
    margin: 0 auto;
    max-width: 1088px;
    min-height: 24px
}

.alert-text .h4,
.alert-text h4 {
    color: inherit;
    margin-bottom: 8px
}

    .alert-text .h4:last-child,
    .alert-text h4:last-child {
        margin-bottom: 0
    }

.alert-text a {
    color: inherit;
    display: inline-block;
    font-weight: 700;
    text-decoration: underline
}

.alert-close,
.alert-icon {
    align-items: center;
    display: flex;
    flex-basis: 24px;
    height: 24px;
    justify-content: center
}

    .alert-icon svg {
        height: 18px;
        width: 20px
    }

    .alert-close svg {
        height: 12px;
        width: 12px
    }
