
.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.alert-paragraph {
    width: 360px !important;
    overflow-x: hidden !important;
}

.alert-title {
    font-size: 20px !important;
    line-height: 1.4 !important;
}

.alert-description {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

.alert-success {
    background: #1ec7e6;
    color: #ffffff;
}

.alert-empty {
    background: #E67300;
    color: #ffffff;
}

.alert-fail {
    background: #7b2cb2;
    color: #ffffff;
}

.alert-session-expired {
    background: #44546F;
    color: #ffffff;
}

.alert-access-denied {
    background: #d10000;
    color: #ffffff;
}

.alert-save {
    z-index: 7010;
    right: 0px;
    top: 0px;
    width: 0px;    
    font-size: 20px;
    animation: alert-save 5s 1;
    -moz-animation: alert-save 5s 1;
    -webkit-animation: alert-save 5s 1;
    -o-animation: alert-save 5s 1;
    animation-duration: 5s;
    border-radius: 0px 0px 0px 20px;
    -webkit-border-radius: 0px 0px 0px 20px;
}

.alert-save-subbox {
    padding: 20px 20px 20px 20px !important;
}

@keyframes alert-save {
    0% {
        width: 0px;
        opacity: 0;
    }
    10% {
        width: 400px;
        opacity: 1;
    }
    95% {
        width: 400px;
    }
    100% {
        width: 0px;
    }
}

.alert-error {
    z-index: 7010;
    left: 10px;
    bottom: 10px;
    background: #92B901;
    color: #ffffff;
    font-size: 20px;
    padding: 10px;
    animation: alert-error 4s 1;
    -moz-animation: alert-error 4s 1;
    -webkit-animation: alert-error 4s 1;
    -o-animation: alert-error 4s 1;
    animation-duration: 4s;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.alert-error-subbox {
    padding: 20px 20px 20px 20px !important;
}

@keyframes alert-error {
    0% {
        transform: rotate(0deg);
        left: 10px;
    }
    25% {
        transform: rotate(20deg);
        left: 10px;
    }
    50% {
        transform: rotate(0deg);
        left: 50%;
    }
    55% {
        transform: rotate(0deg);
        left: 50%;
    }
    70% {
        transform: rotate(0deg);
        left: 50%;
        background: #1ec7e6;
    }
    100% {
        transform: rotate(-360deg);
        left: 10px;
    }
}

