@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700&subset=latin-ext);
body,
html{height:100%}
body{min-height:100%;
    font-family:Roboto Mono,monospace;
    background-color:#111;
    color:#585858;
    padding:0;
    margin:0;
    animation-name:color;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
*{box-sizing:border-box}

.flashit{-webkit-animation:flash linear 1s infinite;
    animation:flash linear 1s infinite}
    
@-webkit-keyframes flash{0%{opacity:1}50%{opacity:.1}to{opacity:1}}
@keyframes flash{0%{opacity:1}50%{opacity:.1}to{opacity:1}}
@-webkit-keyframes neon{0%{text-shadow:0 0 20px #1F649D}50%{text-shadow:0 0 20px rgba(50,253,206,.1)}to{text-shadow:0 0 20px #1F649D}}
@keyframes neon{0%{text-shadow:0 0 20px #1F649D}50%{text-shadow:0 0 20px rgba(50,253,206,.1)}to{text-shadow:0 0 20px #1F649D}}
@-webkit-keyframes color{0%{color:#000}to{color:#585858}}
@keyframes color{0%{color:#000}to{color:#585858}}
@-webkit-keyframes color-blue{0%{color:#585858}to{color:#1F649D}}
@keyframes color-blue{0%{color:#585858}to{color:#1F649D}}
@-webkit-keyframes color-blue-active{0%{color:#000}50%{color:#585858}to{color:#1F649D}}
@keyframes color-blue-active{0%{color:#000}50%{color:#585858}to{color:#1F649D}}
@-webkit-keyframes background-color{0%{color:#000;background-color:#000}to{background-color:#2d2d2d;color:#585858}}
@keyframes background-color{0%{color:#000;background-color:#000}to{background-color:#2d2d2d;color:#585858}}
@-webkit-keyframes background-color-blue{0%{background-color:#000}50%{background-color:#585858}to{background-color:#1F649D}}
@keyframes background-color-blue{0%{background-color:#000}50%{background-color:#585858}to{background-color:#1F649D}}
@-webkit-keyframes color-border{0%{border-color:#000}to{border-color:#2d2d2d}}
@keyframes color-border{0%{border-color:#000}to{border-color:#2d2d2d}}
@keyframes fade{0%{opacity:1}25%{opacity:1}75%{opacity:0}to{opacity:0}}
@keyframes fade-op{0%{opacity:0}25%{opacity:0}75%{opacity:1}to{opacity:1}}
@keyframes fade-op-adv{0%{opacity:0}to{opacity:1}}

.navbar{height:88px;
    padding:29px 15px;
    margin:0 auto;
    position:relative;
    z-index:3}

@media screen and (min-width:768px)
{.navbar{padding:29px 40px}}
@media screen and (min-width:1364px)
{.navbar{padding:29px 80px}}

.navbar .navbar-brand{float:left}

.navbar .navbar-brand a{position:relative}

.navbar .navbar-brand a img{position:absolute}

.navbar .navbar-brand a .top{animation-name:fade;
    animation-timing-function:ease-in-out;
    animation-duration:2.25s;
    animation-direction:alternate;
    animation-fill-mode:forwards}
    
.navbar .navbar-brand a .bottom{animation-name:fade-op;
    animation-timing-function:ease-in-out;
    animation-duration:2.25s;
    animation-direction:alternate;
    animation-fill-mode:forwards}
    
.navbar .navbar-collapse{display:none}

@media screen and (min-width:950px)
{.navbar .navbar-collapse{float:right;padding-top:5px;display:block}}

.navbar .navbar-collapse .navbar-item{font-size:16px;
    text-decoration:none;
    display:inline-block;
    margin-right:30px}

.navbar .navbar-collapse .navbar-item,.navbar .navbar-collapse .navbar-item span{color:#585858;
    animation-name:color;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
.navbar .navbar-collapse .navbar-item span{transition:color .4s}

.navbar .navbar-collapse .navbar-item:hover span{color:#1F649D}

.navbar .navbar-collapse .navbar-item.active span{animation-name:color-blue-active;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-fill-mode:forwards}

.navbar .navbar-collapse .navbar-item:last-child{margin-right:0}
    
@media screen and (min-width:768px)
{.navbar .navbar-collapse .navbar-item{margin-right:60px}}
@media screen and (min-width:1364px)
{.navbar .navbar-collapse .navbar-item{margin-right:130px}}

.navbar .navbar-collapse.navbar-collapse-open{position:absolute;
    display:none;
    width:100%;
    padding:0 23px;
    top:88px;z-index:2;
    left:0;
    background-color:#2d2d2d}
    
.navbar .navbar-collapse.navbar-collapse-open .navbar-item{display:block;
    padding:5px 0}
    
.navbar .navbar-collapse.navbar-collapse-open .navbar-item:first-child{padding-top:10px}

.navbar .navbar-collapse.navbar-collapse-open .navbar-item:last-child{padding-bottom:10px}

.navbar:after{display:block;
    content:" ";
    clear:both}
    
.navbar .navbar-toggler{background-color:transparent;
    border:2px solid #2d2d2d;
    color: #585858;
    float:right;
    width:40px;
    height:28px;
    font-size:1.25rem;
    line-height:1;
    transition:border-color .4s;}
    
.navbar .navbar-toggler .navbar-toggler-icon{display:inline-block;
    width:1rem;
    height:1rem;
    vertical-align:middle;
    content:"";}

@media screen and (min-width:950px)
{.navbar .navbar-toggler{display:none}}

.navbar .navbar-toggler:focus{outline:none}

.navbar .navbar-toggler.active{border-color:#1F649D}

.container-chat{height:100%;
    border:15px solid #2d2d2d;
    max-width:100%;
    margin:0 auto;
    position:relative;
    max-height:640px;
    animation-name:color-border;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
@media screen and (min-width:480px)
{.container-chat{min-height:calc(100% - 31vh - 88px);max-height:calc(100% - 31vh - 88px)}}
@media screen and (min-width:1918px)
{.container-chat{min-height:calc(100% - 31vh - 88px);max-height:calc(100% - 31vh - 88px)}}

.container-chat .content{position:absolute;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column}
    
.container-chat .content .chat-box{padding:0 15px}

@media screen and (min-width:480px)
{.container-chat .content .chat-box{padding:0 30px}}
@media screen and (min-width:950px)
{.container-chat .content .chat-box{padding:0 45px}}
@media screen and (min-width:1918px)
{.container-chat .content .chat-box{padding:0 75px}}

.container-chat .content .chat-bar-info{height:70px;
    background-color:#161616;
    display:flex;
    align-items:center}
    
.container-chat .content .chat-bar-info div,.container-chat .content .chat-bar-info img{display:inline-block}

.container-chat .content .chat-bar-info div{margin-left:24px;
    font-size:11px;
    color:#423d3d}
    
.container-chat .content .chat-bar-info div span{position:relative;
    display:inline-block;
    padding-right:20px}
    
.container-chat .content .chat-bar-info div span:after{position:absolute;
    content:"";
    width:6px;
    height:6px;
    background-color:#1F649D;
    top:50%;
    right:0;
    transform:translate(-50%,-50%);
    -webkit-animation:flash linear 1s infinite;
    animation:flash linear 1s infinite}
    
.container-chat .content .chat-bar-info div span.end-event:after{background-color:#f70051}

.container-chat .content .chat-content{flex:1;
    font-size:11px;
    color:#585858;
    line-height:20px;
    display:flex;
    flex-direction:column;
    padding-bottom:5px;
    animation-name:color;
    animation-duration:1.5s;
    animation-timing-function:linear}
    
.container-chat .content .chat-content .scrollbar{flex:1;
    overflow:auto}
    
@media screen and (min-width:640px)
{.container-chat .content .chat-content{padding-left:95px}}
@media screen and (min-width:768px)
{.container-chat .content .chat-content{padding-left:125px}}

.container-chat .content .chat-content .chat-message-system{margin:10px 0 0}

.container-chat .content .chat-content .chat-message-event-end{margin:10px 0 0;
    font-size:15px;
    color:#f70051;
    text-align:center}
    
.container-chat .content .chat-content span{animation-name:color-blue;
    animation-duration:1.5s;
    animation-timing-function:linear;
    animation-delay:1.5s;
    animation-fill-mode:forwards}
    
.container-chat .content .chat-content .chat-message{border-bottom:1px dashed #585858;
    padding:10px 0;
    width:85%}
    
.container-chat .content .chat-content .chat-message div{display:inline-block;
    background-color:#1c1c1c;
    padding:0 4px}
    
.container-chat .content .chat-bar-input{height:100px;
    font-size:11px}
    
@media screen and (min-width:640px)
{.container-chat .content .chat-bar-input{padding-left:95px;padding-top:25px}}
@media screen and (min-width:768px)
{.container-chat .content .chat-bar-input{padding-left:125px}}

.container-chat .content .chat-bar-input div{position:relative}

@media screen and (min-width:640px)
{.container-chat .content .chat-bar-input div{display:inline-block}}

.container-chat .content .chat-bar-input div input{border:none;
    outline:none;
    background-color:#1c1c1c;
    color:#585858;
    padding:0 30px;
    line-height:50px;
    font-size:11px;
    margin-right:20px;
    width:100%}
    
@media screen and (min-width:480px)
{.container-chat .content .chat-bar-input div input{width:300px}}

.container-chat .content .chat-bar-input div.input:before{position:absolute;
    content:">";
    top:47%;
    left:13px;
    transform:translateY(-50%);
    font-size:11px}
    
.container-chat .content .chat-bar-input div:last-child{margin-top:15px}

@media screen and (min-width:640px)
{.container-chat .content .chat-bar-input div:last-child{margin-top:0}}

.simplebar-track{background-color:#292929}

.simplebar-track .simplebar-scrollbar{right:0;width:11px}

.simplebar-track .simplebar-scrollbar:before{background-color:#000;
    border-radius:0;
    top:0!important;
    bottom:0!important;
    opacity:1!important}
    
.footer-chat{background-color:#000;
    height:215px;
    position:relative;
    overflow:hidden}
    
.footer-chat img{position:absolute;
    left:50%;
    max-width:150%;
    transform:translate(-50%)}
    
@media screen and (min-width:950px)
{.footer-chat img{margin-top:-8vh;max-width:100%}}
@media screen and (min-width:1364px)
{.footer-chat img{margin-top:-12vh}}
@media screen and (min-width:1918px)
{.footer-chat img{margin-top:-18vh}}

.footer-chat .top{animation-name:fade-op;
    animation-timing-function:ease-in-out;
    animation-duration:1.5s;
    animation-direction:alternate;
    animation-fill-mode:forwards}
    
.footer-chat .bottom{opacity:0;
    animation-name:fade-op-adv;
    animation-timing-function:ease-in-out;
    animation-duration:525ms;
    animation-direction:alternate;
    animation-delay:1.5s;
    animation-fill-mode:forwards}
    
@media screen and (min-width:480px)
{.footer-chat{height:31vh}}
@media screen and (min-width:1918px)
{.footer-chat{height:31vh}}