.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite; /* Safari */
}
.alert.show{
    animation: show_slide 1s ease forwards;
}
@keyframes show_slide {
    0%{
        transform: translateX(100%);
    }
    40%{
        transform: translateX(-10%);
    }
    80%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-10px);
    }
}
.alert.hide{
    animation: hide_slide 1s ease forwards;
}
@keyframes hide_slide {
    0%{
        transform: translateX(-10px);
    }
    40%{
        transform: translateX(0%);
    }
    80%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}

.alert-box
{
    z-index: 9999;
    position: fixed;
    top: 20px;
    right: 175px;
    width: 100%;
}

@media (min-width: 1441px) and (max-width: 2560px)
{
    .alert-box {
        right: -2200px;
    }
}

@media (min-width: 1025px) and (max-width: 1440px)
{
    .alert-box {
        right: -1100px;
    }
}

@media (min-width: 767px) and (max-width: 1024px)
{
    .alert-box {
        right: -680px;
    }
}

@media (min-width: 426px) and (max-width: 768px)
{
    .alert-box {
        right: -420px;
    }
}

@media (max-width: 425px)
{
    .alert-box {
        right: -100px;
    }
}