@charset "utf-8";

.layer_shadow_01 {
  position:absolute; 
  display:inline;
  background:#fff; 
  background-color: rgb(255 255 255 / 50%);
  left:0px; 
  top:0px;
  
  zoom:1;
  z-index:1000000;
}

.layer_shadow_02 {
  position:absolute; 
  display:inline;
  background:#000; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=30);
  opacity:0.3;
  zoom:1;
  z-index:1000000;
}


.layer_shadow_03 {
  position:absolute; 
  display:inline;
  background:#fff; /*transparent not work for ie when layer active*/
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=10);
  opacity:0;
  zoom:1;
  z-index:1000000;
}

.layer_shadow_04 {
  position:absolute; 
  display:inline;
  background:#f1f1f1; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=70);
  opacity:0.7;
  zoom:1;
  z-index:1000000;
}

.layer_shadow_05 {
  position:absolute; 
  display:inline;
  background:#fff; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=90);
  opacity:0.9;
  zoom:1;
  z-index:1000000;
}

.layer_shadow_06 {
  position:absolute; 
  display:inline;
  background:#fff; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=10);
  opacity:0.1;
  zoom:1;
  z-index:1000000;
}

.layer_shadow_07 {
  position:absolute; 
  display:inline;
  background:#fff; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=50);
  opacity:0.5;
  zoom:1;
  z-index:1000000;
}

.layer_shadow_08 {
  position:absolute; 
  display:inline;
  background:#000; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=50);
  opacity:0.5;
  zoom:1;
  z-index:1000000;
}

.layer_shadow_09 {
  position:absolute; 
  display:inline;
  background:#fff; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=70);
  opacity:0.7;
  zoom:1;
  z-index:1000000;
}

.layer_shadow_10 {
  position:absolute; 
  display:inline;
  background:#000; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=10);
  opacity:0.1;
  zoom:1;
  z-index:1000000;
}

.layer_shadow_11 {
  position:absolute; 
  display:inline;
  background:#fff; 
  left:0px; 
  top:0px;
  
  filter:alpha(opacity=70);
  opacity:0.8;
  zoom:1;
  z-index:1000000;
}


.layer_loading_01_bak {
  position:absolute; 
  left:0px; 
  top:0px;
  z-index:1000010;  
  background-image:url(/media/img/sys/icon/loading.gif);
	
  width:16px;
  height:16px;
	padding:5px;
	
  background-repeat:no-repeat;  
	background-position: 50% 50%;
	background-color:#fff;
	
	border-radius: 3px;
}

.layer_loading_02_bak {
  position:absolute; 
  left:0px; 
  top:0px;
  z-index:1000010;  
  background-image:url(/media/img/sys/icon/loading_02.gif);
	
  width:66px;
  height:66px;
  background-repeat:no-repeat;  
}

@-webkit-keyframes rotate_loading {
	to {transform: rotate(360deg);}
}

@keyframes rotate_loading {
	to {transform: rotate(360deg);}
}


.layer_loading_01 {
  position: absolute;
  z-index: 1000010;
  left:0px; 
  top:0px;
	
  box-sizing: border-box;
  top: 30%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  margin-left: -17px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #07d;
  animation: rotate_loading .7s linear infinite;
}

.layer_loading_02 {
  position: fixed;
  z-index: 1000010;
  left:0px; 
  top:0px;
	
  box-sizing: border-box;
  top: 30%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #07d;
  animation: rotate_loading .7s linear infinite;
}

.layer_loading_03 {
  position: absolute;
  z-index: 1000010;
  left:0px; 
  top:0px;
	
  box-sizing: border-box;
  top: 30%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  margin-left: -14px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #a2a2a2;
  animation: rotate_loading .7s linear infinite;
}


.layer_loadingII_01 { 
  position: relative;

  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #07d;
  animation: rotate_loading .7s linear infinite;

  margin: 0 auto 0 auto;  
}


.layer_msg_01_bakk{
	position:absolute; 
  background:#71abce;
	overflow:hidden;
	display:block;
	border-radius: 3px;
	border: 1px solid #6fa3c4;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	
	padding:15px;	
}

.layer_msg_01 {
  position: absolute;
  z-index: 1000000;
	
	white-space: nowrap;	
	font-size:16px;
}

.layer_msg_text_01{
	color:#fff;
}

.layer_msg_text_02{
	color:#af1e1e;
}

.layer_msg_btn_01{
	text-shadow: 0 -1px rgba(0,0,0,0.15);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	-webkit-appearance: none;
	border-radius: 2px;
	
	background: #71AE32;	
	border: 1px solid #71AE32;	
	
	padding:3px 5px;

	/*font: 12px Cambria, Georgia, Arial, Helvetica, sans-serif ;	*/
	color: #fff;
	line-height:16px;
	
  cursor:pointer;
  cursor:hand;	
}


.layer_local_msg_01{
	position:absolute; 
	top:0;
	left:0;
	
	overflow:hidden;
	display:block;
	padding:2px 4px 2px 4px;	
	
  background-color:#fff;	
	color: #af1e1e;
	
	border-radius:2px;
	/*
  filter:alpha(opacity=90);
  opacity:0.9;
  zoom:1;
	*/
  z-index:2000000;	
}

.layer_local_msg_02{
	position:absolute; 
	top:0;
	left:0;
	
	overflow:hidden;
	display:block;
	padding:4px 5px 4px 5px;	
	
  background-color:#797979;	
	color: #fff;
	font-size:13px;
	
	border-radius:2px;
	/*
  filter:alpha(opacity=90);
  opacity:0.9;
  zoom:1;
	*/
  z-index:2000000;	
}

.layer_local_msg_03{
	position:absolute; 
	top:0;
	left:0;
	
	overflow:hidden;
	display:block;
	padding:2px 4px 2px 4px;	
	
  background-color:#fff;	
	color: #af1e1e;
	
	border-radius:2px;
	
  filter:alpha(opacity=90);
  opacity:0.9;
  zoom:1;
	
	font-size:14px;
  z-index:2000000;	
	border: 2px solid #ff5928;		
}

.layer_loading_msg_01{
	position:absolute; 
	z-index:2000000;  
	
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, 0);

  margin: 0px;
  text-align: center;
  
  color: #af1e1e;
	background: #fff;
	
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;

  padding: 6px 9px 6px 9px;
	border: 1px solid #d57e7e;
}

@-webkit-keyframes layer_rotate {
	to {transform: rotate(360deg);}
}

@keyframes layer_rotate {
	to {transform: rotate(360deg);}
}


/* progress */
.layer_progress_01 {
  --progress-bar-width: 150;
  --progress-bar-height: 150;
  --progress-stroke-width: 24;

  --progress-bar-color:#ffa600;
  --progress-bar-bgcolor:#ffe4b3;

  position: fixed;
  z-index: 1000002;

  width:calc(var(--progress-bar-width)*1px);
  height:calc(var(--progress-bar-height)*1px);

  box-sizing: border-box;
  top: 50%;
  left: 50%;
  margin-top: calc((var(--progress-bar-width)/2)*-1px);
  margin-left: calc((var(--progress-bar-height)/2)*-1px);
}

.layer_progress_01 > [name=circular]{
  width: calc(var(--progress-bar-width)*1px);
  height: calc(var(--progress-bar-height)*1px);
  border-radius: 50%;
  background: var(--progress-bar-bgcolor);

  display: flex;
  justify-content: center;
  align-items: center;
}

.layer_progress_01 > [name=circular] > [name=inner_circle]{
  position: absolute;
  width: calc((var(--progress-bar-width) - var(--progress-stroke-width))*1px);
  height: calc((var(--progress-bar-height) - var(--progress-stroke-width))*1px);
  border-radius: 50%;

  background-color: #fff;
  
}

.layer_progress_01 > [name=circular] > [name=percentage]{
  position: relative;
  font-size: 16px;
  color:#ffa600;
  font-weight: bold;
}


/*
.layer_progress_01 {
  position: absolute;
  z-index: 1000002;

  width:250px;
  height:250px;
}


.layer_progress_01 > svg{
  --size: 250px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 20px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
  
  animation: progress-animation 5s linear 0s 1 forwards;
}


.layer_progress_01 > svg > circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}

.layer_progress_01 > svg > circle.bg {
  stroke: #ddd;
}

.layer_progress_01 > svg > circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: #5394fd;
}

@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes progress-animation {
  from {
    --progress: 0;
  }
  to {
    --progress: 100;
  }
}
*/








.layer_loading_r01 {
  position: absolute;
  z-index: 1000002;
	
  box-sizing: border-box;
  width: 34px;
  height: 34px;
	/*
  top: 50%;
  left: 50%;
  margin-top: -17px;
  margin-left: -17px;
	*/
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #07d;
  animation: layer_rotate .7s linear infinite;
}

.layer_loading_r02 {
  position: absolute;
  z-index: 1000002;
	
  box-sizing: border-box;
  width: 26px;
  height: 26px;
	/*
  top: 50%;
  left: 50%;	
  margin-top: -13px;
  margin-left: -13px;
	*/
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #07d;
  animation: layer_rotate .7s linear infinite;
}

.layer_loading_r03 {
  position: absolute;
  z-index: 1000002;
	
  box-sizing: border-box;
  width: 26px;
  height: 26px;
	/*
  top: 50%;
  left: 50%;	
  margin-top: -13px;
  margin-left: -13px;
	*/
  border-radius: 50%;
  border: 2px solid #fff;
  border-top-color: #07d;
  animation: layer_rotate .7s linear infinite;
}

.layer_loading_r04 {
  position: absolute;
  z-index: 1000002;
	
  box-sizing: border-box;
  width: 26px;
  height: 26px;
	/*
  top: 50%;
  left: 50%;	
  margin-top: -13px;
  margin-left: -13px;
	*/
  border-radius: 50%;
  border: 2px solid #c5c5c5;
  border-top-color: #07d;
  animation: layer_rotate .9s linear infinite;
}