html, body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;atext-rendering:optimizeLegibility;width:100%;height:100%;}
body{
   overflow: auto;
    margin:0px;
background:#0099ff;
background-size:cover;
background-repeat:no-repeat;
position:relative;
margin:0pt;
font-family:SegoeUI,"Segoe Ui", "Open Sans", Helvetica;
color:#fff;
text-align:center;
font-size:18pt;
}
.loginform{
padding:50pt;
text-align:center;
margin:auto auto;
width:800px;
background:rgba(0,0,0,.1);
}
.logo{
color:rgba(255,255,255,.5);
font-size:60pt;
position:relative;
}
.logo:after{
position:relative;
color:rgba(255,255,255,.7);
content:".fi";
}
.loginform input:not([type=radio]){
font-size:20pt;
padding:10px;
width:600px;
margin:30pt;
text-align:center;
border:0px;
border-radius:5px;
}
.loginform button{
margin:10px;
font-size:20pt;
padding:10px;
width:100%;
background:rgba(0,0,0,.2);
border:2px solid rgba(255,255,255,.8);
border-radius:5px;
color:rgba(255,255,255,.8);
}
.loginform button:hover{
cursor:pointer;
background:rgba(0,0,0,.1);
border:2px solid rgba(255,255,255,1);
color:rgba(255,255,255,1);
}
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    opacity:0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 1px;
}
label{
position:relative;
}
input[type=checkbox].with-font + label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f1db";
    letter-spacing: 10px;
    font-size: 20pt;
    color: #fff;
}
input[type=checkbox].with-font:not(.connected):checked + label:after {
    font-family: FontAwesome;
   position:absolute;
   left:4px;
   top:4px;
    content: "\f111";
    font-size: 13pt;
    color: orange;
    letter-spacing: 5px;
    width: 35px: 5px;
}
input[type=checkbox].with-font.disconnected + label:after{
    font-family: FontAwesome;
   position:absolute;
   left:4px;
   top:4px;
    content: "\f111";
    font-size: 13pt;
    color: red !important;
    letter-spacing: 5px;
    width: 35px: 5px;
}
input[type=checkbox].with-font.connected:checked + label:after{
    font-family: FontAwesome;
   position:absolute;
   left:4px;
   top:4px;
    content: "\f111";
    font-size: 13pt;
    color: lime !important;
    letter-spacing: 5px;
    width: 35px: 5px;
}
.note{
display:block;
font-size:13pt;
}
.uppercase{
text-transform:uppercase;
}
.error{
background:rgba(219,83,75,1) !important;
}
.green{
background:lime !important;
}
.alternative{
background:rgba(0,0,0,.1);
padding:5px;
margin-left:20px;
padding-bottom:25px;
}
.alternative p{
font-size:10pt;
}
.alternative span{
padding-left:20px;
font-size:14pt;
font-weight:300;
}
.alternative i{
margin-left:20pt;
}
.serverlist{
display:inline-block;
text-align:left;
padding-bottom:10px;
}