#alert {
position: fixed;
margin-top: 110px;
padding-top: 10px;
z-index: 100;
pointer-events: none;
}
#alert.show {
pointer-events: all;
}
#alert .alert-container {
float: right;
right: -50%;
width: 220px;
max-width: calc(100% - 30px);
padding: 0px;
border-radius: 5px;
background: rgba(255,0,0,.7);
border: 2px solid rgba(255,0,0,1);
opacity: 0;
transition: .3s linear;
}
#alert.show .alert-container  {
right: 0;
padding: 15px;
opacity: 1;
}
#alert.success .alert-container {
color: #ffffff;
background: var(--primary-color-90);
border: 2px solid var(--primary-color-100);
}
#alert .alert-container .alert-close{
float: right;
width: 20px;
top: 0;
right: 0;
font-size: 20px;
line-height: 20px;
height: 20px;
float: right;
font-weight: 500;
}
#alert .alert-container .alert-close i {
cursor: pointer;
}
#alert .alert-container .alert-title {
width: calc(100% - 20px);
font-size: 1.1em;
line-height: 20px;
font-weight: 500;
}
#alert .alert-container .alert-text {
margin-top: 5px;
width: 100%;
font-size: .9em;
font-weight: 300;
}