﻿.mui-show-loading {  
    position: fixed;  
    padding: 5px;  
    width: 120px;  
    min-height: 120px;  
    top: 45%;  
    left: 50%;  
    margin-left: -60px;  
    background: rgba(0, 0, 0, 0.6);  
    text-align: center;  
    border-radius: 5px;  
    color: #FFFFFF;  
    visibility: hidden;  
    margin: 0;  
    z-index: 2000;  
 
    -webkit-transition-duration: .2s;  
    transition-duration: .2s;  
    opacity: 0;  
    -webkit-transform: scale(0.9) translate(-50%, -50%);  
    transform: scale(0.9) translate(-50%, -50%);  
    -webkit-transform-origin: 0 0;  
    transform-origin: 0 0;  
}  
.mui-show-loading.loading-visible {  
    opacity: 1;  
    visibility: visible;  
    -webkit-transform: scale(1) translate(-50%, -50%);  
    transform: scale(1) translate(-50%, -50%);  
}  
.mui-show-loading .mui-spinner{  
    margin-top: 24px;  
    width: 36px;  
    height: 36px;  
}  
.mui-show-loading .text {  
    line-height: 1.6;  
    font-family: -apple-system-font,"Helvetica Neue",sans-serif;  
    font-size: 14px;  
    margin: 10px 0 0;  
    color: #fff;  
}  
 
.mui-show-loading-mask {  
  position: fixed;  
  z-index: 1000;  
  top: 0;  
  right: 0;  
  left: 0;  
  bottom: 0;  
}  
.mui-show-loading-mask-hidden{  
    display: none !important;  
}

.mui-loading .mui-spinner {
	margin: 0 auto;
	display: block
}

.mui-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-animation: spinner-spin 1s step-end infinite;
	animation: spinner-spin 1s step-end infinite
}

.mui-spinner:after {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
	background-position: 50%;
	background-size: 100%;
	background-repeat: no-repeat
}

.mui-spinner-white:after {
	background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>")
}

@-webkit-keyframes spinner-spin {
	0% {
		-webkit-transform: rotate(0deg)
	}
	8.33333333% {
		-webkit-transform: rotate(30deg)
	}
	16.66666667% {
		-webkit-transform: rotate(60deg)
	}
	25% {
		-webkit-transform: rotate(90deg)
	}
	33.33333333% {
		-webkit-transform: rotate(120deg)
	}
	41.66666667% {
		-webkit-transform: rotate(150deg)
	}
	50% {
		-webkit-transform: rotate(180deg)
	}
	58.33333333% {
		-webkit-transform: rotate(210deg)
	}
	66.66666667% {
		-webkit-transform: rotate(240deg)
	}
	75% {
		-webkit-transform: rotate(270deg)
	}
	83.33333333% {
		-webkit-transform: rotate(300deg)
	}
	91.66666667% {
		-webkit-transform: rotate(330deg)
	}
	100% {
		-webkit-transform: rotate(360deg)
	}
}

@keyframes spinner-spin {
	0% {
		transform: rotate(0deg)
	}
	8.33333333% {
		transform: rotate(30deg)
	}
	16.66666667% {
		transform: rotate(60deg)
	}
	25% {
		transform: rotate(90deg)
	}
	33.33333333% {
		transform: rotate(120deg)
	}
	41.66666667% {
		transform: rotate(150deg)
	}
	50% {
		transform: rotate(180deg)
	}
	58.33333333% {
		transform: rotate(210deg)
	}
	66.66666667% {
		transform: rotate(240deg)
	}
	75% {
		transform: rotate(270deg)
	}
	83.33333333% {
		transform: rotate(300deg)
	}
	91.66666667% {
		transform: rotate(330deg)
	}
	100% {
		transform: rotate(360deg)
	}
}
