/******************** Page Loader *********************/
#loading_page_window {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: var(--background-color1);
    z-index: 100000;
}
#loading_page_window iframe {
    width: 100%;
    height: 100%;
    background: var(--background-color1);
    z-index: 100000;
    border:none;
}
#loading_page_window .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(80deg);
}
#loading_page_window .software-name {
    display: flex;
    align-items: center;
    position: absolute;
    top: 48%;
    left: 50%;
    font-size: 60px;
    text-transform: uppercase;  
    transform: rotateY(40deg) rotateX(33deg);
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.5em;
    transform: translate(-50%, -100%);
    z-index: 1000000;
}
#loading_page_window .software-name h1{
    font-size: 80px;
    font-weight: normal;
    text-transform: uppercase;
}
#loading_page_window .software-name * {
    opacity: 0;
    text-shadow: 1px 5px 10px rgb(0 0 0);
    animation: wave_y 3000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) 1;
    animation-delay: calc(.1s * var(--i));
    -webkit-animation-fill-mode:forwards; 
    animation-fill-mode:forwards;
}
#loading_page_window .idrostudi-logo {
    position: relative;
    opacity: 0;
    top: 46.5%;
    left: 62.5%;
    z-index: 100000;
    animation: show_logo 4000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) 1;
    -webkit-animation-fill-mode:forwards; 
    animation-fill-mode:forwards;
}
#loading_page_window .ring .ring_inner {
    border-radius: 100%;
}
#loading_page_window .ring:nth-child(1) .ring_inner {
    width: 3px;
    height: 3px;
    border: 1px none rgba(30, 255, 255, 1);
    box-shadow: 0px 0px 30px rgba(30, 255, 255, 1);
    animation: wave 6000ms 0ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(2) .ring_inner {
    width: 30px;
    height: 30px;
    border: 20px none rgba(30, 245, 253, 1);
    box-shadow: 0px 10px 70px rgba(30, 245, 253, 1);
    animation: wave 6000ms 50ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(3) .ring_inner {
    width: 60px;
    height: 60px;
    border: 0px none rgba(30, 235, 251, 1);
    box-shadow: 0px 10px 70px rgba(30, 235, 251, 1);
    animation: wave 6000ms 100ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(4) .ring_inner {
    width: 90px;
    height: 90px;
    border: 0px none rgba(30, 225, 249, 1);
    box-shadow: 0px 10px 70px rgba(30, 225, 249, 1),
                0px 10px 10px rgba(30, 249, 225, 0.5);
    animation: wave 6000ms 150ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(5) .ring_inner {
    width: 120px;
    height: 120px;
    border: 0px none rgba(30, 215, 247, 1);
    box-shadow: 0px 10px 70px rgba(30, 215, 247, 1);
    animation: wave 6000ms 200ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(6) .ring_inner {
    width: 150px;
    height: 150px;
    border: 0px none rgba(30, 205, 245, 1);
    box-shadow: 0px 10px 70px rgba(30, 205, 245, 1),
                0px 10px 10px rgba(30, 245, 205, 0.5);
    animation: wave 6000ms 250ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(7) .ring_inner {
    width: 180px;
    height: 180px;
    border: 0px none rgba(30, 195, 243, 1);
    box-shadow: 0px 10px 70px rgba(30, 195, 243, 1);
    animation: wave 6000ms 300ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(8) .ring_inner {
    width: 210px;
    height: 210px;
    border: 0px none rgba(30, 185, 241, 1);
    box-shadow: 0px 10px 70px rgba(30, 185, 241, 1),
                0px 10px 10px rgba(30, 241, 185, 0.5);
    animation: wave 6000ms 350ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(9) .ring_inner {
    width: 240px;
    height: 240px;
    border: 0px none rgba(30, 175, 239, 1);
    box-shadow: 0px 10px 70px rgba(30, 175, 239, 1);
    animation: wave 6000ms 400ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(10) .ring_inner {
    width: 270px;
    height: 270px;
    border: 0px none rgba(30, 165, 237, 1);
    box-shadow: 0px 10px 70px rgba(30, 165, 237, 1),
                0px 10px 10px rgba(30, 237, 165, 0.5);
    animation: wave 6000ms 450ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(11) .ring_inner {
    width: 300px;
    height: 300px;
    border: 0px none rgba(30, 155, 235, 1);
    box-shadow: 0px 10px 70px rgba(30, 155, 235, 1);
    animation: wave 6000ms 500ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(12) .ring_inner {
    width: 330px;
    height: 330px;
    border: 0px none rgba(30, 145, 233, 1);
    box-shadow: 0px 10px 70px rgba(30, 145, 233, 1),
                0px 10px 10px rgba(30, 233, 145, 0.5);
    animation: wave 6000ms 550ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(13) .ring_inner {
    width: 360px;
    height: 360px;
    border: 0px none rgba(30, 135, 231, 1);
    box-shadow: 0px 10px 70px rgba(30, 135, 231, 1);
    animation: wave 6000ms 600ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(14) .ring_inner {
    width: 390px;
    height: 390px;
    border: 0px none rgba(30, 125, 229, 1);
    box-shadow: 0px 10px 70px rgba(30, 125, 229, 1),
                0px 10px 10px rgba(30, 229, 125, 0.5);
    animation: wave 6000ms 650ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(15) .ring_inner {
    width: 420px;
    height: 420px;
    border: 0px none rgba(30, 115, 227, 1);
    box-shadow: 0px 10px 70px rgba(30, 115, 227, 1);
    animation: wave 6000ms 700ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(16) .ring_inner {
    width: 450px;
    height: 450px;
    border: 0px none rgba(30, 105, 225, 1);
    box-shadow: 0px 10px 70px rgba(30, 105, 225, 1),
                0px 10px 10px rgba(30, 225, 105, 0.5);
    animation: wave 6000ms 750ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(17) .ring_inner {
    width: 480px;
    height: 480px;
    border: 0px none rgba(30, 95, 223, 1);
    box-shadow: 0px 10px 70px rgba(30, 95, 223, 1);
    animation: wave 6000ms 800ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(18) .ring_inner {
    width: 510px;
    height: 510px;
    border: 0px none rgba(30, 85, 221, 1);
    box-shadow: 0px 10px 70px rgba(30, 85, 221, 1),
                0px 10px 10px rgba(30, 221, 85, 0.5);
    animation: wave 6000ms 850ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(19) .ring_inner {
    width: 540px;
    height: 540px;
    border: 0px none rgba(30, 75, 219, 1);
    box-shadow: 0px 10px 70px rgba(30, 75, 219, 1);
    animation: wave 6000ms 900ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(20) .ring_inner {
    width: 570px;
    height: 570px;
    border: 0px none rgba(30, 65, 217, 1);
    box-shadow: 0px 10px 70px rgba(30, 65, 217, 1),
                0px 10px 10px rgba(30, 217, 65, 0.5);
    animation: wave 6000ms 950ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(21) .ring_inner {
    width: 600px;
    height: 600px;
    border: 0px none rgba(30, 55, 215, 1);
    box-shadow: 0px 10px 70px rgba(30, 55, 215, 1);
    animation: wave 6000ms 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(22) .ring_inner {
    width: 630px;
    height: 630px;
    border: 0px none rgba(30, 45, 213, 1);
    box-shadow: 0px 10px 70px rgba(30, 45, 213, 1);
    animation: wave 6000ms 1050ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(23) .ring_inner {
    width: 660px;
    height: 660px;
    border: 0px none rgba(30, 35, 211, 1);
    box-shadow: 0px 10px 70px rgba(30, 35, 211, 1),
                0px 10px 10px rgba(30, 211, 35, 0.5);
    animation: wave 6000ms 1100ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(24) .ring_inner {
    width: 690px;
    height: 690px;
    border: 0px none rgba(30, 25, 209, 1);
    box-shadow: 0px 10px 70px rgba(30, 25, 209, 1);
    animation: wave 6000ms 1150ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(25) .ring_inner {
    width: 720px;
    height: 720px;
    border: 0px none rgba(30, 15, 207, 1);
    box-shadow: 0px 10px 70px rgba(30, 15, 207, 1),
                0px 10px 10px rgba(30, 207, 15, 0.5);
    animation: wave 6000ms 1200ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
#loading_page_window .ring:nth-child(26) .ring_inner {
    width: 750px;
    height: 750px;
    border: 0px none rgba(30, 5, 205, 1);
    box-shadow: 0px 10px 70px rgba(30, 5, 205, 1);
    animation: wave 6000ms 1250ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite;
    filter: drop-shadow(0 0 10px #fff);
}
@keyframes wave {
    0% {
        transform: translateZ(0px);
        opacity: 1;
    }
    4% {
        transform: translateZ(-40px);
    }
    10% {
        transform: translateZ(20px);
        opacity: 0.8;
    }
    20% {
        transform: translateZ(-10px);
        opacity: 0.6;
    }
    30% {
        transform: translateZ(5px);
        opacity: 0.4;
    }
    40% {
        transform: translateZ(-5px);
        opacity: 0.2;
    }
    50% {
        transform: translateZ(2px);
        opacity: 0;
    }
}
@keyframes wave_y {
    0% {
        transform: translateY(0px);
        opacity: 0.1;
   }
    8% {
        transform: translateY(-25px);
        opacity: 0.08;
   }
    20% {
        transform: translateY(20px);
        opacity: 0.2;
   }
    40% {
        transform: translateY(-10px);
        opacity: 0.4;
   }
    60% {
        transform: translateY(5px);
        opacity: 0.6;
   }
    80% {
        transform: translateY(-5px);
        opacity: 0.8;
   }
    98% {
        transform: translateY(2px);
        opacity: 0.98;
   }
    100% {
        transform: translateY(0px);
        opacity: 1;
   }
}
@keyframes show_logo {
    70% {
        opacity: 0;
    }
    100% {
        opacity: 1;
   }
}

/********************* WDN Loader *********************/
#loading_data_window {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--loading-background);
    z-index: 10001;
    display: none;
}

.loader {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    top: 45%;
    left: calc(50% - 50px);
}
.circle-first,
.circle-second,
.circle-third,
.circle-fourth {
    width: 100%;
    height: 100%;
    position: absolute;
}
.circle-first {
    animation: spin_first 3s infinite linear;
}
.circle-second {
    animation: spin_second 5s infinite linear;
}
.circle-third {
    animation: spin_first 6s infinite linear;
}
.circle-fourth {
    animation: spin_second 10s infinite linear;
}
.circle-first .inner {
    width: 100%;
    height: 95%;
    border-radius: 100%;
    border: 5px solid rgba(0, 255, 170, 0.7);
    border-right: none;
    border-top: none;
    box-shadow: inset 0px 0px 20px rgba(0, 255, 170, 0.15);
}
.circle-second .inner {
    width: 95%;
    height: 100%;
    border-radius: 100%;
    border: 5px solid rgba(0, 177, 255, 0.7);
    border-right: none;
    border-top: none;
    box-shadow: inset 0px 0px 20px rgba(0, 255, 170, 0.15);
}
.circle-third .inner {
    width: 95%;
    height: 100%;
    border-radius: 100%;
    border: 5px solid rgba(88, 5, 205, 0.7);
    border-right: none;
    border-top: none;
    box-shadow: inset 0px 0px 20px rgba(106, 0, 255, 0.15);
}
.circle-fourth .inner {
    width: 100%;
    height: 95%;
    border-radius: 100%;
    border: 5px solid rgba(0, 53, 113, 0.7);
    border-right: none;
    border-top: none;
    box-shadow: inset 0px 0px 20px rgba(0, 67, 255, 0.15);
}
@keyframes spin_first {
    from {
        transform: rotate(0deg); }
    to {
        transform: rotate(360deg); } 
}
@keyframes spin_second {
    from {
        transform: rotate(180deg); }
    to {
        transform: rotate(540deg); } 
}

/* Loading Text */
.loading-text {
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 margin: auto;
	 text-align: center;
	 width: 100%;
	 height: 100px;
	 line-height: 100px;
}
.loading-text span {    
    font-size: 20px;
    display: inline-block;
    margin: 0 7px;
    color: var(--font-color2);
    font-family: 'Quattrocento Sans', sans-serif;
}
.loading-text span:nth-child(1) {
	 filter: blur(0px);
	 animation: blur_text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
	 filter: blur(0px);
	 animation: blur_text 1.5s 0.15s infinite linear alternate;
}
.loading-text span:nth-child(3) {
	 filter: blur(0px);
	 animation: blur_text 1.5s 0.3s infinite linear alternate;
}
.loading-text span:nth-child(4) {
	 filter: blur(0px);
	 animation: blur_text 1.5s 0.45s infinite linear alternate;
}
.loading-text span:nth-child(5) {
	 filter: blur(0px);
	 animation: blur_text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(6) {
	 filter: blur(0px);
	 animation: blur_text 1.5s 0.75s infinite linear alternate;
}
.loading-text span:nth-child(7) {
	 filter: blur(0px);
	 animation: blur_text 1.5s 0.9s infinite linear alternate;
}
 @keyframes blur_text {
	 0% {
		 filter: blur(0px);
	}
	 100% {
		 filter: blur(4px);
	}
}