/* start alert box style */

.icons::before {
    content: "";
    background-image: url(../images/sprit.png);
    background-repeat: no-repeat;
}

.alert_box {
    float: right;
    position: fixed;
    background-color: #000;
    padding: 13px 20px calc(13px + 4px) 20px;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    line-height: normal;
    display: flex;
    border-bottom: none !important;
    align-items: center;
    z-index: 11111111111111;
}

.alert_box.ok {
    background-color: #27ae60;
}

.alert_box.error {
    background-color: #950000 !important;
}

.icons.icon_error {
    float: right;
    width: 24px;
    height: 22px;
    margin-left: 10px;
}

.icons.icon_error::before {
    width: 100%;
    height: 100%;
    float: right;
    background-position: -337px -22px;
    background-size: auto;
}

.icons.icon_ok {
    float: right;
    width: 25px;
    height: 18px;
    margin-left: 10px;
}

.icons.icon_ok::before {
    width: 100%;
    height: 100%;
    float: right;
    background-position: -365px -22px;
    background-size: auto;
}

.alert_box .alert_bar {
    position: absolute;
    bottom: 0;
    right: 0;
    animation-name: alert_box;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.466);
}

@keyframes alert_box {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}


/* end alert box style */