.dy-alert {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    margin: 10px auto;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    opacity: 1;
    transition: opacity .2s;

    &__content {
        display: table-cell;
        padding: 0 8px;
        font-size: 16px;

        .dy-alert__title {
            margin-bottom: 14px;
            font-weight: 400;
            color: rgba(96, 98, 102, 1);
        }

        .dy-icon-closes {
            position: absolute;
            top: 8px;
            right: 15px;
            width: fit-content;
            color: #c0c4cc;
            cursor: pointer;
        }

        .dy-alert__description {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            line-height: 1.5em;
            word-wrap: break-word;
            color: #909399;
        }
    }
}

.alert-title-layout {
    align-items: flex-start;
}

.dy-alert-center {
    justify-content: center;
}

.dy-alert--info {
    color: #909399;
    background-color: #f4f4f5;
}

.dy-alert--success {
    border: 1px solid #7dbd4a;
    color: #67c23a;
    background: #f0f9eb;
}

.dy-alert--warning {
    border: 1px solid #ffc261;
    color: #e6a23c;
    background-color: #fdf6ec;
}

.dy-alert--error {
    border: 1px solid #ef6262;
    color: #f56c6c;
    background-color: #fef0f0;
}