@CHARSET "UTF-8";

/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local('Orbitron-Light'), local('Orbitron-Regular'), url('orbitron.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family:  'Orbitron', Arial, Helvetica, sans-serif;
    font-weight: 100;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    background-color: #323f52;
    width:100%;
    height: 100%;
    box-sizing: border-box;
}

.padding_left_15 {
    padding-left: 15px;
}

.inline_block {
    display: inline-block;
}
.align_bottom {
    vertical-align: bottom
}
.width_100 {
    width:100%
}
.float_right {
    float: right
}
.copy_right {
    font-size: 11px;
    vertical-align: 
    top;margin-left:1px;
}
#open_space {
    display: none;
}

#open_space_top, #open_space_bottom {
    display: none;
    position: relative;
    margin: 0;
    text-align: left;
    padding: 20px 20px;
}

#open_space_bottom {
    margin: 0 0 50px 0;
}

#page_loading_msg {
    display: block;
    margin: 0 auto;
    color: #fff;
}

#secured_space {
    display: none;
    position: relative;
    margin-top: 20px;
    text-align: left;
    padding: 0 20px;
}

.right_box {
    display: inline-block;
    float: right;
    text-align: right;
    color: #fff;
    font-size: 0.85rem;
}

#login_button, #logout_button {
    display: none;
    vertical-align: top;
    text-align: center;
    margin: 0 0 10pt auto;
    font-size: 0.85rem;
}

#logout_button {
    display: block;
    float: right;
}

.service_urls td {
    text-align: center;
}

.service_urls td:nth-child(2) {
    padding-left: 10pt;
    text-align: left;
}


.service_urls a {
    background: inherit;
    font-size: inherit;
    width: inherit;
    padding: inherit;
    color: inherit;
}

.service_urls a:hover {
    opacity: 0.6;
    background: inherit;
}

#content {
    padding: 15px;
}

#top_page {
    width: 100%;
}
#bottom_page {
    width: 100%;
    position:absolute;
    bottom: 30px;
}

#footer {
    color: #fff;
    padding: 4px 20px 0;
    white-space: nowrap;
    overflow:hidden;
    width: 100%;
}
#footer table {
    width: 100%;
    background: rgba(255, 255, 255, 0.39);
    margin: 0 auto;
    padding: 5px 20px 2px;
    border-radius:3px;
}

#footer {
    
}

.stats {
    margin: 15px 0;
}

.stats table {
    margin: 0 auto;
    color: white;
    text-align: right;
    font-size: 16px;
    white-space: nowrap;
}

.stats table td {
    height: 40px;
}

.stats .odometer {
    font-size: 16px;
}

#uptime div.fx {
    font-size: 25px;
    display: inline-block;
    min-width: 22px;
}

#uptime .margin_1 {
    margin: 0 5px 0 15px
}
#uptime .margin_2 {
    margin-left: 5px
}
#access_count_frame {
    text-align: left; 
    padding-left: 15px;
}

#logo {
    text-align: center;
}
#logo img {
    margin-top: 10px; 
    float: right;

}

#status {
    padding-top: 20px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    min-height: 80px;
}
/* status begin */
#loading_msg {
  display: none;
  margin: 0 auto;
}

#running_msg {
  display: none;
  vertical-align: top;
  line-height: 55px;
}

#state_overview {
    list-style-type: none; 
    display: inline-block;
    padding: 0; 
    margin: 0
}

#eas_ico, #uaa_ico, #cnt_ico {
    opacity: 0.1;
    
    -webkit-transition: all 0.35s ease-in;
    -moz-transition: all 0.35s ease-in;
    -ms-transition: all 0.35s ease-in;
    -o-transition: all 0.35s ease-in;
    transition: all 0.35s ease-in;
}

.ico_title {
    display: inline-block;
    line-height: 47px;
    vertical-align: bottom;
    padding-left: 5px;
    color: #fff;
}

.ico_title span {
    font-size: 0.6em;
}

.info_table {
    width: 100%;
    color: #fff;
    margin-top: 20px;
    border-spacing: 15px 5px;
    font-size: 14px;
}

.info_table th {
    background: #ffffff;
    color: rgb(57, 73, 95);
    text-align: center;
    padding: 5px;
    border-radius: 2px;
    font-weight: normal;
}

.info_table td:nth-child(1) {
    text-align: right;
}

.info_table td:nth-child(2) {
    text-align: left;
}

/* status end */
.v-wrap{
    position: fixed;
    width:100%;
    height: 100%;
    white-space: nowrap;
    text-align: center;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6c8799+17,323f52+100 */
    background: rgb(108,135,153); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(108,135,153,1) 17%, rgba(50,63,82,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(108,135,153,1) 17%,rgba(50,63,82,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(108,135,153,1) 17%,rgba(50,63,82,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c8799', endColorstr='#323f52',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

.sk-cube-grid {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0 auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.95);
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  } 
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      *zoom: 1;
      *display: inline;
      position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      *zoom: 1;
      *display: inline;
      position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      *zoom: 1;
      *display: inline;
      visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
      text-align: left;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon {
      display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon-inner {
      display: block;
      -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value {
      display: block;
      -webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value.odometer-last-value {
      position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner {
      -webkit-transition: -webkit-transform 2s;
      -moz-transition: -moz-transform 2s;
      -ms-transition: -ms-transform 2s;
      -o-transition: -o-transform 2s;
      transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner {
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
      -webkit-transition: -webkit-transform 2s;
      -moz-transition: -moz-transform 2s;
      -ms-transition: -ms-transform 2s;
      -o-transition: -o-transform 2s;
      transition: transform 2s;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
}
    
.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {
      -moz-border-radius: 0.15em;
      -webkit-border-radius: 0.15em;
      border-radius: 0.15em;
      font-weight: 100;
      padding: 0 0 0 0.12em;
      line-height: 1.2em;
      font-size: 1.2em;
      background-size: 16px 16px;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {
      -moz-border-radius: 0.1em;
      -webkit-border-radius: 0.1em;
      border-radius: 0.1em;
      padding: 0 0.03em;
      
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {
      left: 0.03em;
}


#login_dialog #err_msg div {
    font-size: 1rem;
    margin-top: 8pt;
}

.md-modal {
position: fixed;
top: 30%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility:hidden;
backface-visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}
    
.md-show {
    visibility: visible;
}
    
.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(33, 49, 66, 0.8);
    transition: all 0.3s;
}
    
.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

.container {
    background: #e74c3c;
    min-height: 100%;
}
    
/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
    
.md-show.md-effect-1 .md-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
    
/* Content styles */
.md-content {
    color: #fff;
    background: #5b85b1;
    position: relative;
    border-radius: 3px;
    margin: 0 auto;
    min-width: 310pt;
    text-align: center;
}
    
.md-content h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
    font-size: 2.4em;
    font-weight: 300;
    opacity: 0.8;
    background: rgba(0,0,0,0.2);
    border-radius: 3px 3px 0 0;
}

.md-content h3.error {
    background: rgba(251, 18, 18, 0.77);
}

.md-content > div {
    padding: 15px 40px 30px;
    margin: 0;
    font-weight: 300;
    font-size: 1.15em;
}
    
.md-content > div p {
    margin: 0;
    padding: 10px 0 30px;
}
    
    
a {
    display: inline-block;
    font-size: 0.8em;
    text-decoration: none;
    color: white;
    background: #24486d;
    padding: 8pt 16pt;
    border-radius: 2pt;
    width: 75pt;
    white-space: nowrap;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}
    
a:hover {
 background: #446c96;
}

a.main_theme {
     font-size: 0.8em;
     background: #6483a2;
}

a.main_theme:hover {
background: #7698b9;
}

.app_cell {
    width: 100%;
    background: none;
    padding: 3px 12px 2px;
    border-radius: 2px;
    
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    border: solid 1px #ffffff8c;
}
.app_cell a {
    background: none;
    font-size: inherit;
    white-space: nowrap;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    border: none;
}

.app_cell:hover {
    background: #ffffff4f;
}

.app_cell a:hover {
    opacity: inherit;
    background: none;
}

.md-content input {
    font-family:inherit;
    font-size: 13pt;
    padding: 8pt;
    border: solid 1pt #fff;
    border-radius: 3pt;
    width: 250pt;
}
    
.user_outer {
 padding: 5pt 0 1pt;
}
.password_outer {
 padding: 5pt 0 30pt;
}

@media screen and (max-height: 600px), screen and (max-width: 750px) {
    #logo img {
        width: 350px;
    }
    #status {
        font-size: 0.7em;
    }
    .app_cell {
        font-size: 0.7em;
    }
    #footer {
        font-size: 0.7em;
    }
}