@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(fonts/NotoSans.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(fonts/NotoSansBold.woff) format('woff');
}

#lmc_image {
 width:128px; 
 height:128px; 
 background: url('//jbartlib.appspot.com/images/LetMeSee/128x128.png') no-repeat;
 position: absolute;
 left:50%;
 margin-left: -64px;
 top: 40%; margin-top: -100px;  
}
.lmc_manager #lmc_image {
  background:url('//jbartlib.appspot.com/images/LetMeSee/M128x128.png') no-repeat;
}
#circleG{
  height:30px;
  position:absolute;
  left:50%;
  margin-left:-80px;
  top: 40%; margin-top: 120px;
}

#activity { 
  font: 20px 'noto sans';
  color: #494f55;
  max-width: 349px; margin: auto; height: 50px; position: absolute; 
  left:0; right:0; text-align:center; display: none; 
  top: 40%; margin-top: 60px;   
}
#logout { 
bottom: 10px;
left: 0;
right: 0;
text-align: center;
position: absolute;
background: #f8f8f8;
border: 1px solid #c6c6c6;
padding: 5px 0;
border-radius: 2px;
color: #666;
cursor: default;
width: 135px;
font: 13px arial;
margin: auto;
}
#ajaxart_loading, #ajaxart_loading_inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#ajaxart_loading, #ajaxart_loading_inner, head, body { height: 100%; }

.circleG{ background-color:#C4C4C4; float:left; height:32px; margin-left:17px; width:32px;
-moz-animation-name:bounce_circleG; -moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-direction:linear;
-moz-border-radius:21px;-webkit-animation-name:bounce_circleG;-webkit-animation-duration:1.2s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linear;
-webkit-border-radius:21px;-ms-animation-name:bounce_circleG;-ms-animation-duration:1.2s;-ms-animation-iteration-count:infinite;-ms-animation-direction:linear;-ms-border-radius:21px;
-o-animation-name:bounce_circleG;
-o-animation-duration:1.2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-border-radius:21px;
animation-name:bounce_circleG;
animation-duration:1.2s;
animation-iteration-count:infinite;
animation-direction:linear;
border-radius:21px;
}

#circleG_1{
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24000000000000005s;
-o-animation-delay:0.24000000000000005s;
animation-delay:0.24000000000000005s;
}

#circleG_2{
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}

#circleG_3{
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}

@-moz-keyframes bounce_circleG{
0%{} 50%{ background-color:#6B6B6B}  100%{ }
}

@-webkit-keyframes bounce_circleG{
0%{} 50%{ background-color:#6B6B6B } 100%{}
}

@-ms-keyframes bounce_circleG{
0%{} 50%{ background-color:#6B6B6B } 100%{ } }

@-o-keyframes bounce_circleG{ 
  0%{} 50%{ background-color:#6B6B6B} 100%{}
}

@keyframes bounce_circleG{
0%{} 50%{ background-color:#6B6B6B } 100%{}
}

html,body {
  height:100%;
  margin:0;
}
#ajaxart_loading.visitor, #ajaxart_loading_inner.visitor {
  background: #354052;
  border-top: 8px solid #222B38;
  overflow: hidden;
  box-sizing: border-box;
}

#lmc_vloading_image {
 width:128px; 
 height:128px; 
 background: url('//jbartlib.appspot.com/images/LetMeSee/128x128.png') no-repeat;
 position: absolute;
 left:50%;
 top: 50%;
 margin-left: -64px;
 margin-top: -135px;
}

#lmc_vloading_text:after {
content: 'Let Me See';
color: #fff;
position: absolute;
top: 50%;
left: 0;  
font: bold 40px 'noto sans';  right: 0;  
text-align: center;
margin-top: 20px;
}

#lmc_vloading_footer_text:after {
content: 'The new way of customer engagement';
color: #fff;
position: absolute;
bottom: 20px;
left: 0;
font: 14px 'noto sans';
right: 0;
text-align: center;
}

#lmc_loading_error {
position: absolute;
top: 50%;
margin-top: 100px;
left: 0; right: 0;
text-align: center;
color: rgb(226, 140, 140);
font: 20px arial;
}

#lmc_vloading_error {
position: absolute;
top: 50%;
margin-top: 100px;
left: 0; right: 0;
text-align: center;
color: rgb(226, 140, 140);
font: 20px arial;
}

#lmc_vloading_progress {
  position: fixed;
  z-index:2;
  top:0;
  height:8px;
  left:0;
  width:0;
  background: #47BAC1;
  transition: width 0.5s;
}
#lmc_vloading_progress.lmc_progress_max_3.lmc_progress_1 {
  width:20%;
}
#lmc_vloading_progress.lmc_progress_max_3.lmc_progress_1_5 {
  width:30%;
}
#lmc_vloading_progress.lmc_progress_max_3.lmc_progress_2 {
  width:65%;
}
#lmc_vloading_progress.lmc_progress_max_3.lmc_progress_3 {
  width:100%;
}