@import url(https://fonts.googleapis.com/css?family=VT323);
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
/* * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}

html {
  font-size: 62.5%;
  background: #031e11;
  color: #14fdce;
  box-shadow: inset 0 0 18rem black, inset 0 0 3rem black, 0 0 10rem black;
  height: 100%;
  background-image: url(data:image/png;base64,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);
}

body {
  padding: 20px 50px;
  font-family: "VT323", monospace;
}
body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background: #110d0d;
}
body::-webkit-scrollbar-thumb {
  background: #888;
} */

.dashboard {
  display: block;
  max-width: 1024px;
  margin: 0 auto;
  -webkit-animation: crt-output 10ms infinite;
          animation: crt-output 10ms infinite;
}
.dashboard-header {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.dashboard-title {
  flex: 1;
  font-size: 3rem;
  font-weight: normal;
}
.dashboard-clock {
  display: flex;
  align-items: center;
}
.dashboard-clock-digital {
  margin-top: 4px;
  font-size: 3rem;
}
.dashboard-clock-binary {
  margin-left: 8px;
  border-collapse: separate;
}
.dashboard-clock-binary td {
  /* height: 0.4rem;
  width: 0.4rem; */
  height: 1.3rem;
  width: 1rem;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}
.dashboard-clock-binary .num1 {
  background-color: currentColor;
}

.server {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border: 3px double currentColor;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.05);
}
.server-icon {
  display: inline-block;
  font-size: 2.5rem;
  margin: 0 2rem;
  opacity: 0.7;
}
.server-details {
  flex: 1;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.server-details li {
  display: block;
  font-size: 1.9rem;
  line-height: 1.3;
}
.server-details li:first-child {
  display: inline-block;
  position: relative;
  top: -21px;
  left: -50px;
  background: currentColor;
  padding: 0 10px;
  margin-bottom: -40px;
}
.server-details li:first-child span {
  color: #031e11;
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.server-details li:first-child span span {
  margin-left: 8px;
}
.server-details li:last-child .data {
  font-weight: normal;
  /* color: rgba(230, 245, 255, 0.32); */
  color: rgb(15 250 228);
}
.server-details .data {
  display: block;
  margin: -1.7rem 0 0 0;
  padding: 0 1rem 0 0;
  font-weight: normal;
  text-align: right;
}
.server-details .signal {
  color: #14fdce;
}
.server-details .signal::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: currentColor;
  margin-right: 0.8rem;
  margin-top: -0.2rem;
  vertical-align: middle;
}
.server-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  grid-gap: 2.5rem;
}
.server.has-failed {
  color: #ffc919;
  -webkit-animation: alertblink 2s ease-in-out infinite;
          animation: alertblink 2s ease-in-out infinite;
}
.server.has-failed .server-icon,
.server.has-failed .signal {
  color: #ffc919;
}
.server.has-failed:hover {
  background-color: rgba(255, 25, 25, 0.2); 
  /* background-color: #ffc919; */
  -webkit-animation: none;
          animation: none;
}

@-webkit-keyframes alertblink {
  0% {
    background: rgba(255, 25, 25, 0);
  }
  50% {
    background: rgba(255, 25, 25, 0.2);
  }
  100% {
    background: rgba(255, 25, 25, 0);
  }
}

@keyframes alertblink {
  0% {
    background: rgba(255, 25, 25, 0);
  }
  50% {
    background: rgba(255, 25, 25, 0.2);
  }
  100% {
    background: rgba(255, 25, 25, 0);
  }
}
body::before {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6));
  background-size: 100% 0.2rem;
  border-radius: 2rem;
  position: absolute;
  position: fixed;
  pointer-events: none;
}

body::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-animation: crt-glow 60s infinite;
          animation: crt-glow 60s infinite;
  background: radial-gradient(circle at center, #1bd459 0%, rgba(27, 212, 89, 0.88) 58%, rgba(21, 235, 92, 0.57) 80%, rgba(19, 94, 29, 0.27) 93%, rgba(10, 23, 12, 0) 100%);
  filter: blur(10rem) opacity(0.1);
  opacity: 0.15;
  pointer-events: none;
  position: fixed;
}

@-webkit-keyframes crt-glow {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.2;
  }
}

@keyframes crt-glow {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.2;
  }
}
@-webkit-keyframes crt-output {
  0% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}
@keyframes crt-output {
  0% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}



































/* // fist css */

html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0; 
    outline: 0;
    font-size: 100%;
    letter-spacing: 0;
    vertical-align: baseline;
    background: transparent;
    font-weight: inherit;
  
  }
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  article,aside,figure,footer,header,hgroup,nav,section {
    display: block;
  }
  object,embed {
    max-width: 100%;
  }
  ul {
    list-style: none;
  }
  blockquote,q {
    quotes: none;
  }
  b,strong {
    font-weight: bold;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
  }
  del {
    text-decoration: line-through;
  }
  abbr[title],
  dfn[title] {
    border-bottom: 1px dotted #000;
    cursor: help;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  mark {
    color: inherit;
  }
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  input,
  select {
    vertical-align: middle;
  }
  pre {
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    word-wrap: break-word;
  }
  input[type="radio"] {
    vertical-align: text-bottom;
  }
  input[type="checkbox"] {
    vertical-align: bottom;
    *vertical-align: baseline;
  }
  .ie6 input {
    vertical-align: text-bottom;
  }
  select,
  input,
  textarea {
    font: 99% sans-serif;
  }
  table {
    font-size: inherit;
    font: 100%;
  }
  a:hover,
  a:active {
    outline: none;
  }
  small {
    font-size: 85%;
  }
  strong,
  th {
    font-weight: bold;
  }
  td,
  td img {
    vertical-align: top;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sup {
    top: -0.5em;
  }
  sub {
    bottom: -0.25em;
  }
  pre,
  code,
  kbd,
  samp {
    font-family: monospace, sans-serif;
  }
  .ie7 img {
    -ms-interpolation-mode: bicubic;
  }
  .ie6 html {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
  }
  select,
  input,
  textarea,
  a {
    outline: none;
  }
  a {
    color: inherit;
  }
  .ongoingIssues {
    margin-bottom: 15px;
  }
  .issueBanner {
    background: #333;
    display: block;
    border-radius: 6px;
    text-decoration: none;
    padding: 13px 17px;
    color: #fff;
    margin-bottom: 15px;
  }
  .issueBanner:last-child {
    margin-bottom: 0;
  }
  .issueBanner--investigating {
    background: #d13943;
  }
  .issueBanner--identified {
    background: #d13980;
  }
  .issueBanner--monitoring {
    background: #399dd1;
  }
  .issueBanner--maintenance {
    background: #fff7d6;
    color: #77745e;
  }
  .issueBanner__state {
    float: right;
    font-weight: 600;
    font-size: 21px;
    margin-left: 15px;
  }
  .issueBanner__time {
    font-size: 22px;
    opacity: 0.7;
  }
  .issueDetail {
    overflow: hidden;
  }
  .issueDetail__title {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 38px;
    margin-bottom: 7px;
  }
  .issueDetail__date {
    font-size: 13px;
    color: #999;
    margin-bottom: 30px;
  }

  #mel{font-size:28px;}
  .issueDetail__descriptionTitle {
    font-weight: 700;
    margin-bottom: 15px;
  }
  .issueDetail__description {
    line-height: 24px;
    margin-bottom: 25px;
  }
  .issueDetail__details {
    line-height: 24px;
    margin-bottom: 40px;
  }
  .issueDetail__details dt {
    font-weight: 700;
    margin-bottom: 15px;
    float: left;
    width: 40%;
  }
  .issueDetail__details dd {
    margin-bottom: 15px;
  }
  .issueDetail__details dd:last-child {
    margin-bottom: 0;
  }
  .issueDetail__services {
    background: #fff7d6;
    width: 220px;
    float: right;
    font-size: 13px;
    padding: 15px 20px;
    border-radius: 4px;
    margin-left: 25px;
  }
  .issueDetail__services p {
    font-weight: bold;
    margin-bottom: 5px;
  }
  .issueDetail__services li {
    list-style: square;
    margin-left: 16px;
  }
  @media (max-width: 750px) {
    .issueDetail__services {
      float: none;
      width: 100%;
      margin-left: 0;
      margin-bottom: 25px;
    }
  }
  @media (max-width: 600px) {
    .issueDetail__details dt {
      float: none;
      width: 100%;
      margin-bottom: 10px;
    }
  }
  @media (max-width: 470px) {
    .issueDetail__title {
      font-size: 25px;
      line-height: 30px;
    }
  }
  .issueUpdates {
    line-height: 1.5;
  }
  .issueUpdates__header {
    font-weight: 700;
    margin-bottom: 25px;
    font-size: 22px;
  }
  .issueUpdates__update {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
  }
  .issueUpdates__update:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .issueUpdates__text {
    margin-bottom: 5px;
  }
  .issueUpdates__meta {
    font-size: 12px;
    color: #888;
  }
  .issueUpdate__state--investigating {
    color: #d13943;
  }
  .issueUpdate__state--identified {
    color: #d13980;
  }
  .issueUpdate__state--monitoring {
    color: #399dd1;
  }
  .issueUpdate__state--resolved {
    color: #6cbe07;
  }
  .button {
    border-radius: 4px;
    padding: 10px 20px;
    background: #fff;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #888;
    text-transform: uppercase;
    font-size: 12px;
  }
  .pushButton {
    background: #efefef;
    font-size: 12px;
    color: #777;
    text-shadow: 1px 1px 2px #fff;
    padding: 6px 15px;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-weight: 600;
    outline: none;
    box-shadow: inset 0 0 1px #fff;
    background: #fcfcfc;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #efefef 100%);
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0%, #fcfcfc),
      color-stop(100%, #efefef)
    );
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #efefef 100%);
    background: -o-linear-gradient(top, #fcfcfc 0%, #efefef 100%);
    background: -ms-linear-gradient(top, #fcfcfc 0%, #efefef 100%);
    background: linear-gradient(to bottom, #fcfcfc 0%, #efefef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr="#fcfcfc",
        endColorstr="#efefef",
        GradientType=0
      );
  }
  .pushButton:active {
    background: #efefef;
  }
  .maintenanceStatusTag {
    color: #aaa;
  }
  .maintenanceStatusTag.maintenanceStatusTag--active {
    color: #6cbe07;
  }
  .maintenanceStatusTag.maintenanceStatusTag--upcoming {
    color: #068fd6;
  }
  .pagination {
    text-align: center;
    margin-top: 45px;
    font-size: 12px;
  }
  .pagination a,
  .pagination span.page.current {
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 2px 9px;
    margin: 0 2px;
    display: inline-block;
    text-decoration: none;
  }
  .pagination span.page.current {
    font-weight: bold;
    background: #ccc;
    color: #fff;
  }
  .staytusDemo {
    margin-top: 30px;
    background: #f3ffe1;
    padding: 15px;
    border-radius: 6px;
    border: 2px solid #cfdbbd;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
  }
  .staytusDemo b {
    color: #719904;
  }
  .staytusDemo a {
    font-weight: 700;
  }
  .inputWithSubmit {
    overflow: hidden;
  }
  .inputWithSubmit__input {
    width: 80%;
    float: left;
  }
  .inputWithSubmit__input input {
    width: 100%;
  }
  .inputWithSubmit__submit {
    float: right;
    width: 18%;
  }
  .inputWithSubmit__submit button,
  .inputWithSubmit__submit input {
    width: 100%;
  }
  @media (max-width: 560px) {
    .inputWithSubmit__input {
      width: 68%;
    }
    .inputWithSubmit__submit {
      width: 30%;
    }
  }
  .pageHeader {
    padding: 40px;
    background: #f9f9f9;
    border-bottom: 1px solid #efefef;
    margin-bottom: 50px;
  }
  .pageHeader__title {
    float: right;
    color: #999;
  }
  @media (max-width: 470px) {
    .pageHeader {
      margin-bottom: 25px;
      padding: 20px 20px;
    }
    .pageHeader .button {
      padding: 4px 10px;
    }
    .pageHeader__title {
      font-size: 14px;
    }
  }
  .serviceGroup {
    margin-bottom: 25px;
  }
  .serviceGroup__title {
    margin-bottom: 8px;
    font-size: 16px;
    color: #bfc8d0;
  }
  .serviceList {
    border: 2px solid #bfc8d0;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  .serviceList__item {
    padding: 13px 15px;
    border-bottom: 1px solid #d7e2eb;
  }
  .serviceList__item:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }
  .serviceList__item:nth-child(even) {
    background: #101729;
  }
  .serviceList__item:last-child {
    border-bottom: 0;
    border-radius: 0 0 6px 6px;
  }
  .serviceList__description {
    background: transparent
      url(/assets/default/question-b9b6b60e94188feeb1428c3873ad8a8ee4b8978a758f4907aa2f320d9d96276d.svg)
      0 0/100% auto no-repeat;
    display: inline-block;
    height: 14px;
    margin-left: 5px;
    vertical-align: -1px;
    width: 14px;
  }
  .serviceList__name {
    float: left;
    font-size: 21px;
  }
  .serviceList__status {
    float: right;
  }
  @media (max-width: 650px) {
    .serviceList__description {
      display: none;
    }
  }
  @media (max-width: 470px) {
    .serviceList {
      font-size: 14px;
      border-width: 1px;
    }
  }
  @media (max-width: 320px) {
    .serviceList__item {
      text-align: center;
    }
    .serviceList__name {
      margin-bottom: 5px;
    }
    .serviceList__name,
    .serviceList__status {
      float: none;
    }
  }
  .siteFooter {
    border-top: 1px solid #efefef;
    padding: 30px 0 80px 0;
    overflow: hidden;
    font-size: 13px;
    margin-top: 50px;
  }
  .siteFooter__nav {
    margin-bottom: 15px;
    float: left;
  }
  .siteFooter__nav li {
    display: inline;
    margin-right: 25px;
  }
  .siteFooter__nav li a {
    color: #999;
  }
  .siteFooter__nav li:last-child {
    margin-right: 0;
  }
  .siteFooter__poweredBy {
    float: right;
    color: #999;
  }
  @media (max-width: 600px) {
    .siteFooter {
      text-align: center;
    }
  }
  .siteHeader {
    text-align: center;
    /* background: #2b3034; */
    background:#43016B;
    padding: 150px 0 60px 0;
    position: relative;
    margin-bottom: 50px;
  }
  .siteHeader__title {
    font-size: 55px;
    letter-spacing: -0.05em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
  }
  @media (max-width: 750px) {
    .siteHeader__title {
      font-size: 6vw;
    }
  }
  @media (max-width: 600px) {
    .siteHeader {
      padding: 85px 0 30px 0;
      margin-bottom: 25px;
    }
  }
  body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  .container {
    max-width: 700px;
    margin: 0 auto;
  }
  @media (max-width: 750px) {
    .container {
      padding: 0 25px;
    }
  }
  .ok{
    color:#2FCC66;
    font-size: 20px;
  }
  .outage{
    color:#ffc919;
    font-size: 20px;
  }


@import url(https://fonts.googleapis.com/css?family=VT323);
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

$cGood: #14fdce;
// $cAlert: rgb(255, 25, 25);
$cAlert: #cfbe25;

* {  
    user-select: none; 
    cursor: default;
}

html{
	font-size: 62.5%;
    background: #031e11;
    color: #14fdce;
      box-shadow:
    inset 0 0 18rem black,
    inset 0 0 3rem black,
    0 0 10rem black;
    height: 100%;
  background-image: url();
}

body {
    padding: 20px 50px;  
	font-family: 'VT323', monospace;
    
    &::-webkit-scrollbar {
        width: 5px;
    
        &-track {
            background: #110d0d;
        }
    
        &-thumb {
            background: #888;
        }
    }
}

.dashboard {
    display: block;
    max-width: 1024px;
    margin: 0 auto;
    animation: crt-output 10ms infinite; 
    
    
    &-header {
        display: flex;
        align-items: center;
        text-transform: uppercase;
        margin-bottom: 5px;
    }
    
    &-title {
        flex: 1;
        font-size: 3rem;
        font-weight: normal;
    }

    &-clock {
        display: flex;
        align-items: center;
    
        &-digital {
            margin-top: 4px;
            font-size: 3rem;
        }
    
        &-binary {
            margin-left: 8px;
            border-collapse: separate;
            
            td {
                height: .4rem;
                width: .4rem;
                background-color: rgba(255, 255, 255, .15);
                border-radius:50%;
            }
        
            .num1 {
                background-color: currentColor;
            }
        }
    }
}

.server {
    display: flex;
    align-items: center;

    padding: 10px 0;       
    border: 3px double currentColor;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, .05);
    
    &-icon {
        display: inline-block;
        font-size: 2.5rem;
        margin: 0 2rem;
        opacity: .7;
    }    

    &-details {
        flex: 1;
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            display: block;
            font-size: 1.6rem;
            line-height: 1.3;
            
            &:first-child {
                display: inline-block;
                position: relative;
                top: -21px;
                left: -50px;
                background: currentColor;
                padding: 0 10px;
                margin-bottom: -40px;
                
                span {
                    color: #031e11;
                    display: inline;
                    margin: 0;
                    padding: 0;
                    font-weight: bold;
                    
                    span {
                        margin-left: 8px;
                    }
                }
            }

            &:last-child {
                .data {
                    font-weight: normal;
                    color: rgba(230, 245, 255, .32)
                }
            }
        }
        
        .data {
            display: block;
            margin: -1.7rem 0 0 0;
            padding: 0 1rem 0 0;
            font-weight: normal;
            text-align: right;
        }

        .signal {
            color: $cGood;

            &::before {
                content: '';
                display: inline-block;
                width: .6rem;
                height: .6rem;
                background-color: currentColor;
                margin-right: .8rem;
                margin-top: -.2rem;
                vertical-align: middle;
            }
        }
    }
    
    &-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
        grid-gap: 2.5rem;
    } 

    &.has-failed {
        color: $cAlert;
        animation: alertblink 2s ease-in-out infinite;

        .server-icon,
        .signal {
            color: $cAlert;
        }

        &:hover {
            background-color: rgba($cAlert, .2);
            animation: none;
        }
    }
}

@keyframes alertblink {
    0% {
        background: rgba($cAlert, 0);
    }
    50% {
        background: rgba($cAlert, 0.2);
    }
    100% {
        background: rgba($cAlert, 0);
    }
}

body::before {
    content: '';
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
    z-index: 1;
    
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.2) 70%,
    rgba(0,0,0,0.6)
  );
  background-size: 100% 0.2rem;
  border-radius: 2rem;
  position: absolute;
      position: fixed;
    pointer-events: none; 
}

/* // screen glow */

body::after {
    content: '';
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;


  animation: crt-glow 60s infinite; 
  background:
    radial-gradient(circle at center,
    rgba(27,212,89,1) 0%,
    rgba(27,212,89,0.88) 58%,
    rgba(21,235,92,0.57) 80%,
    rgba(19,94,29,0.27) 93%,
    rgba(10,23,12,0) 100%);
  filter: blur(10rem) opacity(0.1);
  opacity: 0.15;
  pointer-events: none; 
  position: fixed;
}

@keyframes crt-glow {
  0% { opacity: 0.1; }
  50% { opacity: 0.2; }
}

@keyframes crt-output {
  0% { opacity: 0.9; }
  50% { opacity: 1; }
}