html,body {
    background:#000;
    overflow:hidden;
    min-width:100%;
    padding:0;
    margin:0;
}

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.canais.box,.player.box {
    display: inline-block;
}

.canais.box {
    position: absolute;
    left: -366px;
    height: 100%;
    background-color: #222;
    overflow: auto;
    float: left;
    transition: left .3s;
    z-index: 1;
}

.player.box {
    position: absolute;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    transition: width .3s;
    will-change: contents;
}

.canais.opc {
    padding: 8px 20px;
    opacity: .6;
    transition: opacity .3s;
}

.canais.opc:hover {
    opacity: .8;
}

.canais.opc.selected {
    opacity: 1;
}

.canais.opc:first-child {
    padding-top: 18px;
}

.canais.opc:last-child {
    padding-bottom: 18px;
}

.canais.opc .loader {
    width: 320px;
    height: 180px;
    background: #efefef;
    border: 2px solid rgba(255,255,255,.2);
    transition: transform .3s;
    will-change: transform;
    transform: scale(1);
}

.canais.opc .loader:hover {
    transform: scale(1.02);
}

.canais.opc.selected .loader {
    border:2px solid rgba(255,255,255,1);
    transform: scale(1.05);
}

.canais.opc img {
    width: 100%; height: 100%;
    opacity: 0;
}

video {
    width: 100%;
    height: 100%;
}

.err {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation-name: err;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    display: none;
}

@keyframes err {
    0% {opacity:.6}
    50% {opacity:1}
    100% {opacity:.6}
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.debug {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.debug .log {
    padding: 5px 8px;
    background: #e2e2e2;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 8px;
    min-width: 400px;
    text-align: center;
    margin: 10px 0;
}

.debug .log:last-child {
    margin: 0;
}

@media screen and (max-width: 992px) {
    #loading svg {
        width: 30vw;
        max-width: 150px;
    }
    .canais.opc {
        padding: 5px 10px;
    }
    .canais.opc:first-child {
        padding-top: 10px;
    }
    .canais.opc:last-child {
        padding-bottom: 10px;
    }
    .canais.opc .loader {
        width: 160px;
        height: 90px;
    }
    .lds-default {
        transform: translate(-50%,-50%) scale(0.7);
    }
}