﻿/*
    https://bootsnipp.com/snippets/7n99x
*/
#divWaitingDialog.modal-dialog {
}

    #divWaitingDialog.modal-dialog .modal-content {
        background-color: transparent;
        border-color: transparent;
    }

        #divWaitingDialog.modal-dialog .modal-content .modal-header {
            display: none;
        }

        #divWaitingDialog.modal-dialog .modal-content .modal-body {
            background-color: none !important;
            border-color: none !important;
            padding: 0px;
        }

            #divWaitingDialog.modal-dialog .modal-content .modal-body .modal-container {
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                animation-delay: 1s;
                padding: 30px;
            }

@keyframes scaleBack {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 0.5;
        transform: scale(1);
    }

    81%, 100% {
        opacity: 0.2;
        transform: scale(0.2);
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    50%, 75% {
        transform: scale(2.5);
    }

    78%, 100% {
        opacity: 0;
    }
}

.item-1 {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 7px;
    margin-left: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scaleBack 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    opacity: 0;
}


    .item-1:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ffffff;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 200ms;
        transition: 0.5s all ease;
        transform: scale(1);
    }

.item-2 {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 7px;
    margin-left: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scaleBack 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 400ms;
    opacity: 0;
}


    .item-2:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ffffff;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 400ms;
        transition: 0.5s all ease;
        transform: scale(1);
    }

.item-3 {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 7px;
    margin-left: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scaleBack 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 600ms;
    opacity: 0;
}



    .item-3:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ffffff;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 600ms;
        transition: 0.5s all ease;
        transform: scale(1);
    }

.item-4 {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 7px;
    margin-left: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scaleBack 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 800ms;
    opacity: 0;
}


    .item-4:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ffffff;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 800ms;
        transition: 0.5s all ease;
        transform: scale(1);
    }

.item-5 {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    background-color: #ffffff;
    margin: 7px;
    margin-left: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scaleBack 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 1000ms;
    opacity: 0;
}


    .item-5:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ffffff;
        opacity: 0.7;
        animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
        animation-delay: 1000ms;
        transition: 0.5s all ease;
        transform: scale(1);
    }
