.cmpTrayAlert{
    position:fixed;
    left:50%;
    /* margin-left: -150px; */
    transform: translate(-50%, 0);
    top:10px;
    min-width: 300px;
    max-width: 370px;
    z-index: 999;
    overflow:hidden;
    max-height:90%;
    max-height:calc(100% - 20px);
}
@media only screen and (min-width : 768px) {
    .cmpTrayAlert{
        max-width: 500px;
    }
}
.cmpTrayAlert:hover{
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.cmpTrayAlert > .item{
    background:rgba(25, 152, 252, 0.95);
    color:#fff;
    position:relative;
    margin-bottom:1px;
    overflow:hidden;
    max-height:0; 
    top:-500px;
    opacity: 0;
}
@supports (-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px)) {
    .cmpTrayAlert > .item{
        background:rgba(25, 152, 252, 0.75);
        -webkit-backdrop-filter: blur(25px);
        backdrop-filter: blur(25px);
    }
}
.cmpTrayAlert > .visible{
    opacity: 1;
    top:0;
    max-height:500px;
    z-index:3;
    -webkit-transition:max-height 0.8s, top 0.5s, opacity 0.7s, background 0.3s ease-out, box-shadow 0.3s ease-out;
            transition:max-height 0.8s, top 0.5s, opacity 0.7s, background 0.3s ease-out, box-shadow 0.3s ease-out;
}
.cmpTrayAlert > .deleted{
    top: -500px;
    opacity: 0;
    z-index:2;
    -webkit-transition: top 0.5s, opacity 0.3s;
            transition: top 0.5s, opacity 0.3s;
}
.cmpTrayAlert > .error {
    background:rgba(25, 152, 252, 0.95);
    color:#fff;
}

@supports (-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px)) {
    .cmpTrayAlert > .error{
        background:rgba(25, 152, 252, 0.75);
        -webkit-backdrop-filter: blur(25px);
        backdrop-filter: blur(25px);
    }
}
.cmpTrayAlert .item:hover {
    background:rgba(25, 152, 252, 0.8);
}
.cmpTrayAlert .item .text {
    padding: 24px 25px 25px 75px;
    font-size: 14px;
    line-height: 24px;
}
    .cmpTrayAlert .item a {
        color: #fff;
        text-decoration: underline;
    }
    .cmpTrayAlert .text ul li{
        padding:3px 0;
        list-style-type: circle; 
        margin-left:15px;
    }
    .cmpTrayAlert .text p:last-child {
        margin-bottom: 0;
    }

.cmpTrayAlert .close{
    position:absolute;
    top:5px;
    right:5px;
    color:#fff;
    cursor:pointer;
}
.cmpTrayAlert > .error .close{
    color:#fff;
}
.cmpTrayAlert .close:hover{
    opacity: 0.75;
}
.cmpTrayAlert .close:before{
    font-size: 14px;
}


.cmpTrayAlert .cmp-tray-alert-title {
    position: relative;
    font-size: 1.2em;
}
.cmpTrayAlert .error .text .cmp-tray-alert-title:before {
    font-family: 'icons';
    content: '\e882';
    position: absolute;
    left: -50px;
    font-size: 26px;
}
.cmpTrayAlert .text .text .cmp-tray-alert-title:before,
.cmpTrayAlert .message .text .cmp-tray-alert-title:before {
    font-family: 'icons';
    content: '\e884';
    position: absolute;
    left: -50px;
    font-size: 26px;
}