.alert,
.alert * {
    box-sizing: border-box;
}

.alert {
    position: relative;
    padding: 17px 15px 17px 50px;
}

.alert:before {
    position: absolute;
    left: 15px;
    top: 15px;
    display: block;
    width: 27px;
    height: 27px;
    content: "";
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
}

.alert-warning {
    background-color: rgba(36, 91, 120, 0.10);
}

.alert-warning:before {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.771 10.071V16.605C12.771 17.01 13.095 17.361 13.527 17.361C13.959 17.361 14.283 17.037 14.283 16.605V10.071C14.283 9.666 13.959 9.315 13.527 9.315C13.095 9.315 12.771 9.639 12.771 10.071Z" fill="black"/><path d="M13.5 19.116C13.041 19.116 12.636 19.494 12.636 19.98C12.636 20.466 13.014 20.844 13.5 20.844C13.986 20.844 14.364 20.466 14.364 19.98C14.364 19.494 13.959 19.116 13.5 19.116Z" fill="black"/><path d="M13.419 4.88699L24.678 22.464H2.32205L13.419 4.88699ZM13.419 3.02399C13.095 3.02399 12.744 3.18599 12.555 3.50999L0.675046 22.329C0.162046 23.004 0.648046 23.976 1.51205 23.976H25.542C26.352 23.976 26.865 23.085 26.406 22.383L14.283 3.50999C14.067 3.18599 13.743 3.02399 13.419 3.02399Z" fill="black"/></svg>');
}

.alert-info {
    color: #fff;
    background-color: #245B78;
}

.alert-info:before {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.1584 6.88721V14.5552C12.1584 15.0305 12.5387 15.4424 13.0457 15.4424C13.5526 15.4424 13.9329 15.0622 13.9329 14.5552V6.88721C13.9329 6.41192 13.5526 6 13.0457 6C12.5387 6 12.1584 6.38023 12.1584 6.88721Z" fill="white"/><path d="M13.014 17.5021C12.4753 17.5021 12 17.9457 12 18.516C12 19.0864 12.4436 19.53 13.014 19.53C13.5843 19.53 14.0279 19.0864 14.0279 18.516C14.0279 17.9457 13.5526 17.5021 13.014 17.5021Z" fill="white"/><circle cx="13" cy="13" r="12.25" stroke="white" stroke-width="1.5"/></svg>');
}

.alert > :first-child {
    margin-top: 0;
}

.alert > :last-child {
    margin-bottom: 0;
}

.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6 {
    margin-top: 0;
    margin-bottom: 10px;
}

.alert p {
    margin-top: 10px;
}