@font-face{
font-family:'Caviar Dreams';

src:url('/cd.ttf');

}

@font-face{
font-family:'Nonchalance';

src:url('/Nonchalance Regular.otf');

}

@font-face{
font-family:'bebas';

src:url('/BebasNeue.otf');

}

@font-face{
font-family:'assets';

src:url('/assets.eot?fyutwk');

src:url('/assets.eot?fyutwk#iefix') format('embedded-opentype'),
url('/assets.ttf?fyutwk') format('truetype'),
url('/assets.woff?fyutwk') format('woff'),
url('/assets.svg?fyutwk#assets') format('svg');

font-weight:normal;

font-style:normal;

}

[class^="icon-"], [class*=" icon-"]{
font-family:'assets' !important;

speak:none;

font-style:normal;

font-weight:normal;

font-variant:normal;

text-transform:none;

line-height:1;


-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}


.icon-search:before{

content:"\e903";

}

.icon-switch:before{

content:"\e900";

}





















body{
margin:0;

background-color:rgb(42, 42, 42);

display:flex;

align-items:center;

justify-content:center;

margin-top:50px;

margin-bottom:50px;

overflow:hidden;

}

*{
outline:0;

font-family:'Caviar Dreams';

}

iframe{
width:1px;

height:1px;

opacity:0;

pointer-events:none;

position:fixed;

top:0;

left:0;

}

.auth-panel{

position:relative;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

height:100vh;

transition:height .5s ease-out;

}

.auth-panel .form{

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;


border-radius:10px;

color:white;

max-width:95vw;

height:280px;

padding:15px;

margin-bottom:150px;

margin-top:-8px;

position:relative;

background-color:rgb(23, 23, 23);

border:1px solid rgb(68, 68, 68);

border-top-color:rgb(85, 85, 85);

border-bottom-color:rgb(119, 119, 119);

box-shadow:3px 3px 10px rgba(0,0,0,0.35),
-3px -3px 10px rgba(255,255,255,.05),
0px -7px 10px rgba(0,0,0,.15) inset;

overflow:hidden;

transition:height .5s ease-out, padding .25s ease-out, border-color .25s ease-out, background-color .25s ease-out, box-shadow .25s ease-out, margin-bottom .25s ease-out;

transform-origin:top center;

}

.auth-panel .form .errors-container{

display:flex;

justify-content:center;

align-items:center;

max-height:50px;

min-height:25px;

color:rgb(252, 252, 252);

font-weight:bold;

border-radius:3px;

background-color:rgb(240, 81, 81);

padding:7px;

overflow:hidden;

transition:padding .25s ease-out, max-height .25s ease-out, min-height .25s ease-out, opacity .25s ease-out;

}

.auth-panel .form .errors-container[hide]{

opacity:0;

max-height:0;

min-height:0;

padding:0 7px;

}

.auth-panel .form[hide]{

height:0;

padding:0 15px;

border-color:transparent;

background-color:transparent;

box-shadow:none;

margin-bottom:10px;

}

.auth-panel .logo-container{

text-align:center;

z-index:2;

position:relative;

}

.auth-panel .logo-container h1{

font-weight:bold;

font-size:1.9em;

display:inline-block;

color:white;

margin:0;

margin-left:10px;

}

.auth-panel .logo-container h1 span{

opacity:0;

font-family:'Nonchalance';

display:inline-block;

animation-name:title-span-appear;

animation-fill-mode:forwards;

animation-duration:.75s;

animation-delay:.45s;

padding-right:0;

}

.auth-panel .logo-container h1 span:nth-child(2){

animation-delay:.65s;

}

.auth-panel .logo-container h1 span:nth-child(3){

animation-delay:.85s;

}

.auth-panel .logo-container h1 span:nth-child(4){

animation-delay:1.05s;

}

.auth-panel .logo-container h1 span:nth-child(5){

animation-delay:1.25s;

}

.auth-panel .logo-container h1 span:nth-child(6){

animation-delay:1.45s;

}

.auth-panel .logo-container img{

background-color:var(--mainColor);

border-radius:150px;

width:80px;

margin-bottom:-26px;

border-left:1px solid transparent;

border-right:1px solid transparent;

transition:transform .25s ease-out;

transform:scale(0);

animation-name:logo-appear;

animation-fill-mode:forwards;

animation-duration:.5s;

animation-delay:.25s;

}

.auth-panel .logo-container img:hover{

transform:rotate(8deg);

}

.auth-panel .input-group{

display:flex;

height:40px;

justify-content:center;

margin-bottom:12px;

width:370px;

max-width:90%;

box-shadow:3px 3px 7px rgba(0,0,0,0.35),
-3px -3px 7px rgba(255,255,255,.07);

}

.auth-panel .auth-error{

color:white;

background-color:rgba(255,0,0,0.5);

padding:8px;

border-radius:3px;

width:250px;

margin-top:5px;

text-align:center;

}

.auth-panel .input-group input{

width:100%;

border:1px solid rgba(93, 93, 93, 0.5);

border-top-color:rgba(175, 175, 175, 0.35);

border-bottom-color:rgba(175, 175, 175, 0.45);

padding:5px;

font-size:1.1em;

background-color:rgba(56, 56, 56, 0.5);

border-radius:0;

border-bottom-right-radius:5px;

border-top-right-radius:5px;

color:white;

}

.auth-panel .input-group span{

display:flex;

align-items:center;

justify-content:center;

background-color:rgba(35,35,35,.75);

border:1px solid rgba(93, 93, 93, 0.5);

border-top-color:rgba(175, 175, 175, 0.35);

border-bottom-color:rgba(175, 175, 175, 0.45);

border-right:none;

width:4vh;

padding:5px;

border-top-left-radius:5px;

border-bottom-left-radius:5px;

}

.auth-panel .input-group span img{

max-height:100%;

}

.auth-panel .welcome{

width:100%;

display:flex;

justify-content:center;

align-items:center;

}

.auth-panel .welcome h3{

margin-right:10px;

margin-bottom:22px;

}

.auth-panel .btn-disconnect{

border:1px solid rgba(129, 129, 129, .5);

width:30px;

height:30px;

border-radius:150px;

color:white;

cursor:pointer;

background-color:transparent;

box-shadow:3px 3px 7px rgba(0,0,0,0.35),
-3px -3px 7px rgba(255,255,255,.07);

opacity:0;

pointer-events:none;

transition:border-color .75s ease-out, opacity .5s .5s ease-out;

}

.auth-panel .btn-disconnect:hover{

border-color:rgb(241, 62, 45);

transition:border-color .25s ease-out;

}

.auth-panel .btn-connect{

background-color:var(--mainColor);

color:white;

border:none;

margin-bottom:10px;

margin-top:10px;

font-size:1.2em;

padding:7px 35px;

cursor:pointer;

border-radius:7px;

border:1px solid rgba(255,255,255,.15);

box-shadow:-1px -2px 4px rgba(0,0,0,.25) inset,
1px -2px 4px rgba(0,0,0,.25) inset;

}

.auth-panel .search{

background-color:rgb(51, 51, 51);

padding:10px;

border-radius:50px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:50px;

border:1px solid rgba(127,127,127,.35);

border-bottom-color:rgba(154, 154, 154, .5);

box-shadow:3px 3px 7px rgba(0,0,0,0.35),
-3px -3px 7px rgba(255,255,255,.07);

opacity:0;

transition:opacity .25s ease-out;

}

.auth-panel .search[show]{

opacity:1;

}

.auth-panel .search i{

color:white;

font-size:1.5em;

margin-right:7px;

}

.auth-panel .search input{

background-color:transparent;

border:none;

width:50vw;

color:white;

max-width:500px;

font-size:1.1em;

text-align:center;

border-bottom:1px solid rgba(224, 224, 224, .5);

}

.auth-panel .site-list{

color:white;

text-align:center;

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

}

.auth-panel .site-list .site{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

animation-name:site-appear;

animation-duration:.5s;

animation-timing-function:ease-out;

animation-fill-mode:forwards;

opacity:0;

}

.auth-panel .site-list .img-container{

display:flex;

justify-content:center;

align-items:center;

width:calc(100% + 14px);

margin-left:0px;

padding:5px;

opacity:.8;

}

.auth-panel .site-list .site{

cursor:pointer;

background-color:rgb(50, 50, 50);

padding:12px;

border-radius:3px;

min-width:170px;

height:130px;

max-height:0;

margin:7px;

border:1px solid rgb(70, 70, 70);

border-bottom-color:rgb(108, 108, 108);

box-shadow:3px 3px 7px rgba(0,0,0,0.35),
-3px -3px 7px rgba(255,255,255,.05);


transition:border-color .75s ease-out, border-bottom-color .75s .25s ease-out;

}

.auth-panel .site-list .site:hover{

border-color:rgba(74, 186, 174, .5);

border-bottom-color:rgba(74, 186, 174, 1);

transition:border-color .25s ease-out;

}

.auth-panel .site-list .site h4{

margin:0;

font-family:'bebas';

font-size:1.5em;

font-weight:normal;

width:calc(100% + 14px);

padding:5px;

opacity:.8;

}

.auth-panel h3{

text-align:center;

font-family:'bebas';

color:white;

font-weight:normal;

white-space:nowrap;

margin:0;

margin-top:25px;

margin-bottom:15px;

font-size:1.85em;

opacity:0;

text-align:center;

height:36px;

transition:opacity .5s .5s ease-out;

}

.auth-panel .site-list img{

height:75px;

}

h2{
text-align:center;

font-size:1.4em;

font-weight:normal;

border-bottom:1px solid var(--mainColor);

margin:15px 75px;

margin-top:30px;

}

@keyframes site-appear{
from{
opacity:0;

max-height:0;

transform:translateY(-20px);

}

to{
max-height:200px;

transform:none;

opacity:1;

}

}

@keyframes logo-appear{
0%{
transform:scale(0);

}

60%{
transform:scale(1.1);

}

100%{
transform:scale(1);

}

}

@keyframes title-span-appear{
from{
opacity:0;

transform:translateY(-50px);

}

to{
opacity:1;

transform:none;

}

}

*{--lightmainColor:rgb(157, 219, 212);--mainColor:rgb(73, 165, 155);--darkmainColor:rgb(53, 145, 135);--lightblue:rgba(132, 177, 205, .5);--lobbyblue:rgb(132, 177, 205);--gray87:rgb(87, 87, 87);--lightBlack:rgba(00, 00, 00,0.37);--adminBlue:rgb(16, 93, 96);}