.edc *,.edc *::before,.edc *::after{ margin: 0; padding: 0; box-sizing: border-box; outline: none; }
.edc{ position: relative; }


@keyframes edc_loading{
	50%,
	75%{ transform: scale(1.2); }
	80%,
	100%{ opacity: 0.4; }
}
@keyframes edc_loading_wave{
	50%,
	75%{ transform: scale(1.6); }
	80%,
	100%{ opacity: 0; }
}

.edc .loader{ display: flex; align-items: center; justify-content: center; animation-delay: 1s; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.6); min-height: 40px; z-index: 99; }
.edc .loader .loaders{ display: flex; }
.edc .loader .loaders > div{ position: relative; width: 15px; height: 15px; margin-right: 18px; background: #2092d0; animation: edc_loading 1.3s ease-out infinite; }
.edc .loader .loaders > div:last-child{ margin-right: 0; }
.edc .loader .loaders > div::before{ content: ""; position: absolute; width: 100%; height: 100%; background: inherit; animation: edc_loading_wave 1.3s ease-out infinite; }
.edc .loader .loaders > div:nth-child(1),.edc .loader .loaders > div:nth-child(1)::before{ animation-delay: 0s; }
.edc .loader .loaders > div:nth-child(2),.edc .loader .loaders > div:nth-child(2)::before{ animation-delay: 0.2s; }
.edc .loader .loaders > div:nth-child(3),.edc .loader .loaders > div:nth-child(3)::before{ animation-delay: 0.4s; }
.edc .loader .loaders > div:nth-child(4),.edc .loader .loaders > div:nth-child(4)::before{ animation-delay: 0.6s; }
.edc .loader .loaders > div:nth-child(5),.edc .loader .loaders > div:nth-child(5)::before{ animation-delay: 0.8s; }

.edc .loader.done{ display: none; }

@keyframes spin {
  0% {transform:rotate(0deg)}
  50%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}

.edc_spinner{ animation: spin 1s infinite linear; }
/* hints */
.edc .hint{ display: inline-flex; margin-left: 8px; width: 16px; height: 16px; background: #2092d0; position: relative; border-radius: 50%; align-items: center; justify-content: center; }
.edc .hint::before{ content: "i"; font-style: italic; color: #fff; font-size: 13px; }
.edc .hint span{ display: block; position: absolute; left: 50%; margin-left: -150px; top: 100%; transform: translateY(10px); opacity: 0; pointer-events: none; transition: opacity ease-in 0.3s; border: 1px solid #ccc; border-radius: 3px; width: 300px; font-size: 12px; font-style: italic; background: #fff; z-index: 5; padding: 7px; }
.edc .hint:hover span{ opacity: 1; pointer-events: unset; }
.edc .hint span::before{ content: ""; display: block; position: absolute; left: 146px; top: -9px; height: 0; width: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 9px solid #fff; z-index: 2; }
.edc .hint span::after{ content: ""; display: block; position: absolute; left: 145px; top: -10px; height: 0; width: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #ccc; z-index: 1; }


#edc_window_loading{ position: fixed; display: none; width: 100%; height: 100%; left: 0; top: 0; align-items: center; justify-content: center; z-index: 1000000; background: rgba(0,0,0,0.6); color: #fff; }
#edc_window_loading.active{ display: flex; }
#edc_window_loading .loader{ background: transparent; }