/*Box Trans*/
#screenLoading{
	position:fixed;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.4);
	z-index:1100;
	visibility: hidden;
}

#screenLoading .loading-box{
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
#screenLoading .loading-ico{
	height:48px;
	padding:4px;
	border-radius:50%;
}
#screenLoading .loading-label{
	text-align: center;
	color:#666;
	background-color: #fff;
	border-radius:22px;
	padding:0 10px;
	display:none;
}

.loading-labeled .loading-box{
	column-gap: 10px;
	background-color: #fff;
	border-radius:24px;
}

#loading{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}

.spinner {
-webkit-animation: rotator 1.4s linear infinite;
        animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
    }
    }

    @keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
    0% {
        stroke: #06c;
    }
    14.285714286% {
        stroke: #06c;
    }
    28.571428572% {
        stroke: #06c;
    }
    42.857142858% {
        stroke: #06c;
    }
    57.142857144% {
        stroke: #06c;
    }
    71.42857143% {
        stroke: #06c;
    }
    100% {
        stroke: #06c;
    }
}

@keyframes colors {
    0% {
        stroke: #06c;
    }
    14.285714286% {
        stroke: #06c;
    }
    28.571428572% {
        stroke: #06c;
    }
    42.857142858% {
        stroke: #06c;
    }
    57.142857144% {
        stroke: #06c;
    }
    71.42857143% {
        stroke: #06c;
    }
    100% {
        stroke: #06c;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
    }
}