﻿.Load_body {
      margin: 0;
    padding: 0;
    box-sizing: border-box;

    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.rings {
    position: relative;
    width: 100px;
    height: 100px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;


       left: 50%;
            margin-left: -4em;
            margin: auto;
            margin: 20px solid #EAF0F6;
          
           
         
}

.rings, .rings:after {
            border-radius: 50%;
            width: 8em;
            height: 8em;
            display: block;
            position: absolute;
            top: 50%;
            margin-top: -4.05em;
        }

/*.rings .ring {
    position: absolute;
    border-radius: 50%;
    border: 5px solid #f13a8f;
}*/

.rings .ring:nth-child(1) {
    width: 100%;
    height: 100%;
    border: 7px solid #f13a8f;
    animation: ring-1 1.5s linear infinite;
}

.rings .ring:nth-child(2) {
    width: calc(100% * 0.65);
    height: calc(100% * 0.65);
    border: 4px solid #4bc8eb;
    animation: ring-2 1.5s linear infinite;
}

.rings .ring:nth-child(3) {
    width: calc(100% * 0.1);
    height: calc(100% * 0.1);
    border: 2px solid #36f372;
    animation: ring-3 1.5s linear infinite;
}

@keyframes ring-1 {
    0% {
        transform: rotateZ(20deg);
    }

    100% {
        transform: rotateZ(100deg) rotateY(360deg);
    }
}

@keyframes ring-2 {
    0% {
        transform: rotateZ(100deg);
    }

    100% {
        transform: rotateZ(0deg) rotateX(360deg);
    }
}

@keyframes ring-3 {
    0% {
        transform: rotateZ(100deg) rotateX(-360deg);
    }

    100% {
        transform: rotateZ(-100deg) rotateX(360deg);
    }
}

 .loading {
            position: fixed;
            top: 0; right: 0;
            bottom: 0; left: 0;
            /*background: #fff;*/
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            z-index:9997;
        }
        .loader {
            left: 50%;
            margin-left: -4em;
            margin: auto;
            border: 20px solid #EAF0F6;
            border-radius: 50%;
            border-top: 20px solid #FF7A59;
            width: 200px;
            height: 200px;
            animation: spinner 4s linear infinite;                        
        }
        .loader, .loader:after {
            border-radius: 50%;
            width: 8em;
            height: 8em;
            display: block;
            position: absolute;
            top: 50%;
            margin-top: -4.05em;
        }
        @keyframes spinner {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }