/* This stylesheet generated by Transfonter (https://transfonter.org) on March 7, 2018 7:55 PM */

@font-face {
    font-family: 'Digital-7';
    src: url('font/Digital-7.eot');
    src: local('Digital-7'),
        url('font/Digital-7.eot?#iefix') format('embedded-opentype'),
        url('font/Digital-7.woff2') format('woff2'),
        url('font/Digital-7.woff') format('woff'),
        url('font/Digital-7.ttf') format('truetype'),
        url('font/Digital-7.svg#Digital-7') format('svg');
    font-weight: normal;
    font-style: normal;
}

BODY,HTML {
    background: #011901;
    margin:0px;
    padding:0px;
    font-family: 'Digital-7';
    font-weight: 900;
    font-style: normal;    
}
DIV.server {
    margin:0px;
    padding:0px;
    width:25%;
    display:inline-block;
    float:left;

}
P { 
    margin:0px;
    padding:0px;        
}

DIV.server DIV.content {
    /*border:1px solid rgba(9,206,53,0.2);*/
    margin:5px;
    padding:10px;
    height:220px;
    position:relative;
    background-image: url(background.png);
    background-size: 100% auto;
    border-right:1px solid rgba(9,206,53,0.15);
    border-bottom:1px solid rgba(9,206,53,0.15);
}
P.process {
    position:absolute;
    left:10px;
    color:#09ce35;
    bottom:45px;
    font-size:22px;   
}
P.load { 
    font-size:70px;
    color:#09ce35;
    position:absolute;
    left:10px;
    top:0px;
}
P.mails { 
    font-size:50px;
    color:#09ce35;
    position:absolute;
    right:10px;
    top:10px;
}
P.mails:after {
    content:"MAILQUEUE";
    font-size:18px;
    font-weight: normal;
    position:absolute;
    right:0px;
    top:50px;
}
P.name { 
    font-size:29px;
    color:rgba(9,206,53,0.3);
    color:#f60;
    position:absolute;
    left:10px;
    bottom:10px;
}
P.fecha { 
    font-size:30px;
    color:#09ce35;
    position:absolute;
    left:10px;
    top:80px;
}


DIV.server.error P.load { color:#f00; }
DIV.server.errormail P.mails { color:#f00; }
DIV.server.errorfecha P.fecha { color:#f00; }

DIV.server.errorname P.name { color:rgba(255,0,0,1); }

DIV.server.errorgeneral { background-color:rgba(255,0,0,.25); }

.breakpoint {
    position:absolute;
    right:20px;
    top:20px;
}
.breakpoint SPAN {
    display:none;
    color:#fff;
    z-index:9999;
    font-size:30px;
}

DIV.barraemails {
    background-image:url(barraverde.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    position:absolute;
    right:10px;
    bottom:33px;
    width:25px;
    height:100px;
    -webkit-animation: scales 2.0s ease-in infinite alternate;
    -moz-animation: scales 2.0s ease-in infinite alternate;
    animation: scales 2.0s ease-in infinite alternate; 
}


DIV.letraemails {
    color:#09ce35;
    font-size:30px;
    position:absolute;
    right:14px;
    bottom:0px;
}

DIV.server.errormail DIV.barraemails { background-image:url(barraroja.png); }
DIV.server.errormail DIV.letraemails { color:#f00; }

DIV.barraload {
    background-image:url(barraverde.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    position:absolute;
    right:40px;
    bottom:33px;
    width:25px;
    height:100px;
    -webkit-animation: scales 2.0s ease-in infinite alternate;
    -moz-animation: scales 2.0s ease-in infinite alternate;
    animation: scales 2.0s ease-in infinite alternate; 
}

@-moz-keyframes scales {
  0% { height: var(--height-animation); }
  20% { height: var(--height-value); }
  100% { height: var(--height-value); }
}
@-webkit-keyframes scales {
  0% { height: var(--height-animation); }
  20% { height: var(--height-value); }
  100% { height: var(--height-value); }
}
@-o-keyframes scales {
  0% { height: var(--height-animation); }
  20% { height: var(--height-value); }
  100% { height: var(--height-value); }
}
@keyframes scales {
  0% { height: var(--height-animation); }
  20% { height: var(--height-value); }
  100% { height: var(--height-value); }
}


DIV.letraload {
    color:#09ce35;
    font-size:30px;
    position:absolute;
    right:44px;
    bottom:0px;    
}
DIV.server.error DIV.barraload { background-image:url(barraroja.png); }
DIV.server.errormail DIV.letraload { color:#f00; }

@keyframes blink {
    0% {opacity: 0}
    49%{opacity: 0}
    50% {opacity: 1}
}

.blink {animation: blink 1s infinite;}

/* XS */
@media (max-width: 575px) {
    .visibleXS { display:block !important; }
    DIV.server { width:100%; }
    P.name { font-size:25px; }    
}

/* SM */
@media (min-width: 576px) and (max-width: 767px) {
    .visibleSM { display:block !important; }
    DIV.server { width:50%; }
}

/* MD */
@media (min-width: 768px) and (max-width: 991px) {
    .visibleMD { display:block !important; }
    DIV.server { width:50%; }
}

/* LG */
@media (min-width: 992px) and (max-width: 1199px) {
    .visibleLG { display:block !important; }
    DIV.server { width:33%; }
}

/* XL */
@media (min-width: 1200px) {
    .visibleXL { display:block !important; }
}