/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.modal-centered{
	display:flex;
	justify-content: center;
	align-items: center;
}

.preloader__image {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.loading-dot-container{
    display:flex;
    justify-content: center;
    width: 100vw;
    height: 10vh;
    align-items: center;
}

.loading-dot-loader{
    display: flex;
    align-items: center;
}

.loading-dot-loader div{
    width:18px;
    height:18px;
    background:#1abc9c;
    margin:10px;
    border-radius: 50%;
    animation: waveDotEffect 2s linear infinite;
    animation-delay: calc(var(--i) * 0.1s);
}

.loading-dot-loader span{
    color:#1abc9c;
    font-weight: bold;
    font-size: 24px;
    text-shadow: 4px 4px 6px rgba(66, 68, 90, 1);
    animation: waveDotEffect 2s linear infinite;
}

@keyframes waveDotEffect {
    0%{
        transform: translateY(0);
        opacity: 0.5;
    }
    25%{
        transform: translateY(-120px);
        opacity: 1;
    }
    50%{
        transform: translateY(0);
    }
}