/*  @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1; color:#000000;}
            100%{opacity: 0}
        }

        @-moz-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-webkit-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-o-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }
        .loading-container,
        .loading {
            height: 100px;
            position: fixed;
            top:20%;
            width: 100px;
            border-radius: 100%;
        }


        .loading-container { margin: auto }

        .loading {
            border: 3px solid transparent;
            border-color: transparent #016097 transparent #016097;
            -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
            -moz-transform-origin: 50% 50%;
            -o-animation: rotate-loading 1.5s linear 0s infinite normal;
            -o-transform-origin: 50% 50%;
            -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
            -webkit-transform-origin: 50% 50%;
            animation: rotate-loading 1.5s linear 0s infinite normal;
            transform-origin: 50% 50%;
        }

        .loading-container:hover .loading {
            border-color: transparent #038edc transparent #038edc;
        }
        .loading-container:hover .loading,
        .loading-container .loading {
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }

        #loading-text {
            -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
            -o-animation: loading-text-opacity 2s linear 0s infinite normal;
            -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
            animation: loading-text-opacity 2s linear 0s infinite normal;
            color: #ffffff;
            font-family: "Roboto","sans-serif";
            font-size: 12px;
            font-weight: bold;
            margin-top: 45px;
            opacity: 0;
            position: absolute;
            text-align: center;
            top: 0;
            width: 100px;
        }*/





/*===================================== 이걸로 변경 ========================================*/

.spinner{
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-color: #3d5af1 transparent #3d5af1 transparent;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    position: fixed;
    top: 35%;
} 

@keyframes spin {
    100% {
      transform: rotate(360deg);
    }
}





/* chat writing dot loading ...
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #709eee;
    color: #709eee;
    box-shadow: 9999px 0 0 -5px;
    animation: dot-pulse 1.5s infinite linear;
    animation-delay: 0.25s;
  }
  .dot-pulse::before, .dot-pulse::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #709eee;
    color: #709eee;
  }
  .dot-pulse::before {
    box-shadow: 9984px 0 0 -5px;
    animation: dot-pulse-before 1.5s infinite linear;
    animation-delay: 0s;
  }
  .dot-pulse::after {
    box-shadow: 10014px 0 0 -5px;
    animation: dot-pulse-after 1.5s infinite linear;
    animation-delay: 0.5s;
  }
  
  @keyframes dot-pulse-before {
    0% {
      box-shadow: 9984px 0 0 -5px;
    }
    30% {
      box-shadow: 9984px 0 0 2px;
    }
    60%, 100% {
      box-shadow: 9984px 0 0 -5px;
    }
  }
  @keyframes dot-pulse {
    0% {
      box-shadow: 9999px 0 0 -5px;
    }
    30% {
      box-shadow: 9999px 0 0 2px;
    }
    60%, 100% {
      box-shadow: 9999px 0 0 -5px;
    }
  }
  @keyframes dot-pulse-after {
    0% {
      box-shadow: 10014px 0 0 -5px;
    }
    30% {
      box-shadow: 10014px 0 0 2px;
    }
    60%, 100% {
      box-shadow: 10014px 0 0 -5px;
    }
  }




  /* ==============================================
  * Dot Flashing
  * ==============================================
  */
 .dot-flashing {
   position: relative;
   width: 10px;
   height: 10px;
   border-radius: 5px;
   background-color: #709eee;
   color: #709eee;
   animation: dot-flashing 1s infinite linear alternate;
   animation-delay: 0.5s;
 }
 .dot-flashing::before, .dot-flashing::after {
   content: "";
   display: inline-block;
   position: absolute;
   top: 0;
 }
 .dot-flashing::before {
   left: -15px;
   width: 10px;
   height: 10px;
   border-radius: 5px;
   background-color: #709eee;
   color: #709eee;
   animation: dot-flashing 1s infinite alternate;
   animation-delay: 0s;
 }
 .dot-flashing::after {
   left: 15px;
   width: 10px;
   height: 10px;
   border-radius: 5px;
   background-color: #709eee;
   color: #709eee;
   animation: dot-flashing 1s infinite alternate;
   animation-delay: 1s;
 }
 
 @keyframes dot-flashing {
   0% {
     background-color: #709eee;
   }
   50%, 100% {
     background-color: rgba(152, 128, 255, 0.2);
   }
 }




/* realtime_meeting_v2.tpl CSS Added here ------------------ */
/* 
canvas {
	width: 100%;
	height: 100%;
} */


@keyframes pulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	}
	100% {
		transform: scale(1.2);
		box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
	}
}

#circle_wave {
	position: absolute;
	width: 100%;
	height: 100%;
	clip-path: circle(100% at 50% 50%);
    background: radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0) 20%, rgba(255, 0, 0, 0.5) 80%);
    animation: waveAnimation 1s infinite alternate;
}

@keyframes waveAnimation {
    0% {
        clip-path: circle(0% at 50% 50%);
    }
    100% {
        clip-path: circle(150% at 50% 50%);
    }
}

/*Typing Loader*/
.typing_loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
       -moz-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
    margin: 46px auto; /* Not necessary- its only for layouting*/  
    position: relative;
    left: -12px;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(255,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,0.2), 
                    24px 0px 0px 0px rgba(255,0,0,0.2);
      }
    25%{ 
        background-color: rgba(255,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,2), 
                    24px 0px 0px 0px rgba(255,0,0,0.2);
    }
    75%{ background-color: rgba(255,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,0.2), 
                    24px 0px 0px 0px rgba(255,0,0,1);
      }
}

@-moz-keyframes typing{
   0%{
        background-color: rgba(255,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,0.2), 
                    24px 0px 0px 0px rgba(255,0,0,0.2);
      }
    25%{ 
        background-color: rgba(255,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,2), 
                    24px 0px 0px 0px rgba(255,0,0,0.2);
    }
    75%{ background-color: rgba(255,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,0.2), 
                    24px 0px 0px 0px rgba(255,0,0,1);
      }
}

@keyframes typing{
   0%{
        background-color: rgba(255,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,0.2), 
                    24px 0px 0px 0px rgba(255,0,0,0.2);
      }
    25%{ 
        background-color: rgba(255,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,2), 
                    24px 0px 0px 0px rgba(255,0,0,0.2);
    }
    75%{ background-color: rgba(255,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,0,0,0.2), 
                    24px 0px 0px 0px rgba(255,0,0,1);
      }
}

.sound_equal {margin:10px 0 0 0;}
.sound_equal .equal_cont {display:inline-block;}
.sound_equal .equal_bar {float:left; position:relative; width:2px; height:1px; margin:0 1px 0 0;}
.sound_equal .equal_bar div {position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:1px; background:#f34e4e;/*#c4d9ff 765ee1*/}
.equal_cont .equal_bar:nth-child(1) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(2) div {animation:color-bar-low 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(3) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(4) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(5) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(6) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(7) div {animation:color-bar-low 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(8) div {animation:color-bar-high 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(9) div {animation:color-bar-high 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(10) div {animation:color-bar-high 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(11) div {animation:color-bar-high 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(12) div {animation:color-bar-high 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(13) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(14) div {animation:color-bar-low 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(15) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(16) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(17) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(18) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(19) div {animation:color-bar-low 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(20) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(21) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(22) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(23) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(24) div {animation:color-bar-low 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(25) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(26) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(27) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(28) div {animation:color-bar-low 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(29) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(30) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(31) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(32) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(33) div {animation:color-bar-low 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(34) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(35) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(36) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(37) div {animation:color-bar-high 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(38) div {animation:color-bar-high 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(39) div {animation:color-bar-high 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(40) div {animation:color-bar-high 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(41) div {animation:color-bar-high 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(42) div {animation:color-bar-high 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(43) div {animation:color-bar-high 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(44) div {animation:color-bar-high 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(45) div {animation:color-bar-high 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(46) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(47) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(48) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(49) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(50) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(51) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(52) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(53) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(54) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(55) div {animation:color-bar-low 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(56) div {animation:color-bar-high 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(57) div {animation:color-bar-high 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(58) div {animation:color-bar-high 4s 1.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(59) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(60) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(61) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(62) div {animation:color-bar-low 4s 0.5s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(63) div {animation:color-bar-low 4s 1s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(64) div {animation:color-bar-low 4s 0.25s ease-out alternate infinite;}
.equal_cont .equal_bar:nth-child(65) div {animation:color-bar-low 4s 2s ease-out alternate infinite;}
@keyframes color-bar-high {0% {height:5px;} 10% {height:9px;} 20% {height:22px;} 30% {height:15px;} 40% {height:18px;} 50% {height:13px;} 60% {height:22px;} 70% {height:15px;} 80% {height:5px;} 90% {height:9px;} 100% {height:5px;}}
@keyframes color-bar-low {0% {height:1px;} 10% {height:3px;} 20% {height:5px;} 30% {height:2px;} 40% {height:7px;} 50% {height:9px;} 60% {height:3px;} 70% {height:8px;} 80% {height:5px;} 90% {height:3px;} 100% {height:1px;}}