html{ font-family: "Myriad Pro", Myriad, Lucida Grande,Arial,Helvetica,sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;overflow-x: hidden;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,picture{ display: block; }
audio,canvas,progress,video{ display: inline-block; vertical-align: baseline; }
audio:not([controls]){ display: none; height: 0; }
[hidden]{ display: none !important; }
a{ background-color: transparent; text-decoration: none; }
a,a:active,:focus{ outline: 0; }
abbr[title]{ border-bottom: 1px dotted; }
b,strong{ font-weight: 700; }
figure img{ display: block; vertical-align: top; }
img{ border: 0; max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
dfn{ font-style: italic; }
mark{ background: #ff0; color: #000; }
small{ font-size: 80%; }
sub,sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup{ top: -.5em; }
sub{ bottom: -.25em; }
svg:not(:root){ overflow: hidden; }
pre{ overflow: auto; }
code,kbd,pre,samp{ font-family: monospace,monospace; }
table{ border-collapse: separate; border-spacing: 0; }
th, td{ font-weight: normal }
*, :before, :after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}
::-webkit-scrollbar{ background: #e1e1e1; }
::-webkit-scrollbar-thumb{ background: #9e9e9e; }
::-webkit-scrollbar{ width: 8px; }
#ws-status{position: fixed;top: 44px;right: 27px;text-indent: -9999em;width: 10px;height: 10px;border-radius: 14px;background: red;}
#ws-status.Connected{background: green;}
html{height: 100%;}
body{
    padding: 10px;
    display: flex;
    height: 100%;
    flex-direction: column;
}

#logs{position: absolute; bottom: 0px; background: #002731; left: 0px; width: 100%; height: 30%; padding: 10px; overflow-y: scroll; color: #e9e2cb; font-family: Consolas,monaco,monospace;}
#logs .title{background: #e9e2cb; color: #002731; padding: 2px 5px;}
#logs pre{padding: 10px 0px;}

#lock{display: none}
body{padding: 10px;}
#load-wpr{-webkit-transition:all 0.45s ease-in-out;opacity:0;max-height:0px;overflow:hidden;max-width:0px;z-index:-1;position:fixed;top:0px;left:0px;height:100%;}
#load-wpr.actv{z-index:100;max-height:100%;opacity:1;}
.xbutton{margin-bottom: 0px;margin-right: 20px;padding: 8px 14px;}
#server-status{width:10px;height:10px;border-radius:15px;background:#666;align-self: center; margin-left: 20px;}
.row.message-row{
    margin-right: 0px;
}

.row{
    border: 1px solid #666;
    border-radius: 5px;
    padding: 10px 20px;
    position: relative;
    padding-right: 0px;
    margin-right: 20px;
}

#cntd .row:nth-child(4n) {
    margin-right: 0px;
}

#cntd .row:nth-last-child(-n+4) {
    margin-bottom: 0px;
}


.row span{
    position: absolute;
    background: #fff;
    top: -8px;
    left: 10px;
    font-size: 13px;
    line-height: 13px;
    padding: 0px 4px;
}
.status-row .xbutton{opacity: 0.2;}
.status-row .xbutton:hover, .status-row .xbutton.actv{opacity: 1;}
#message-recibido{    align-self: center;
    margin-right: 10px;
    font-weight: bold;
    display: none;}
#message-recibido.actv{display: block;}
.blink_me{animation:blinker 1s linear infinite;}
@keyframes blinker{
    50%{opacity:0;}
}

#wrpr{
    display: flex;
    width: 100%;
    border: 1px solid #b1cdfd;
    padding: 10px;
    flex-direction: column;
    margin-top: 20px;
}
#title{
    font-size: 14px;
    line-height: 14px;
    color: #666;
    margin-bottom: 10px;
}
#title .material-icons{
    position: relative;
    top: 4px;
    margin-right: 6px;
    font-size: 20px;
    line-height: 20px;
    color: #008aff;
}
#title span{
    margin-left: 7px;
}
.fldr:hover{border-color: #b1cdfd;}
.fldr{
    border: 1px solid #fff;
    font-size: 14px;
    line-height: 14px;
    color: #666;
    margin-bottom: 2px;
    display: block;
    width: 100%;
    padding: 2px 4px 4px;
}
.fldr .material-icons{
    font-size: 21px;
    line-height: 14px;
    top: 5px;
    position: relative;
}

#prnt{
    font-size: 14px;
    line-height: 14px;
    color: #666;
    margin-bottom: 10px;
}
#prnt .material-icons{
    font-size: 21px;
    line-height: 21px;
    top: 5px;
    position: relative;
}
#prnt span{}
#cntd{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
}
#cntd .row{max-width: 22.7%;padding: 0;border: 0px;margin-right: 3%;margin-bottom: 3%;}
#cntd img{
    border: 1px solid #ccc;
    padding: 10px;
}

#cntd .row:hover img{border-color: #008aff;}

#cntd .row{position: relative;}
#cntd .row .material-icons{
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #008aff;
    font-size: 30px;
    line-height: 30px;
    cursor: pointer;
}

#cntd .row:hover .material-icons{
    display: block;
}

#loadding{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#loadding.hide{
    display: none;
}
#loadding .bg-load{
    background: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}
#loadding .load{
    background: #fff;
    border-radius: 10px;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: -25px;
}

#loadding .icon{
    position: relative;
    top: 13px;
    left: 13px;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}