/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 12-Mar-2015, 2:57:47 PM
    Author     : Steven
*/

html, body {
    /*margin: 0;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: initial;*/
    margin:0;
    height:100vh;
    font-family:Arial;

    background-size:cover;
    background-position:center center;
    background-repeat: no-repeat;
}

#login-container {
/*    width: 330px;
    margin: 10px;
    height: 100%;*/
width:380px;
text-align:center;

}

#header {
    background-color: transparent;
    text-align: center;
    border: 0px;
    border-bottom: 0px;
/*    -moz-border-radius: 20px 20px 0px 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
    -khtml-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;*/
}

#logo {
    width: 250px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#login-form-container {
    position: relative;
    background-color: transparent;
    /*border: 1px solid #dddddd;*/
    width: 100%;
    height: 100%;
    padding: 20px;
    /*opacity: 0.8; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    -moz-border-radius: 0px 0px 20px 20px;
    -webkit-border-radius: 0px 0px 20px 20px;
    -khtml-border-radius: 0px 0px 20px 20px;
    border-radius: 0px 0px 20px 20px;*/
}

.form-label {
    font-weight: bold;
}

.form-field {
    margin-bottom: 20px;
}

#login-btn {
    width: 100%;
}

table.server_info {
    padding: 0px;
}

table.server_info td {
    font-family: 'courier';
    padding: 5px;
}

table.server_info th {
    text-align: right;
    padding: 5px;
}


.btn-login {
  color: black;
  font-weight: bold;
  padding: 12px 12px;
  background-color: #92D400;
  border-color: #031E2F;
}
.btn-login:hover,
.btn-login:focus,
.btn-login.focus,
.btn-login:active,
.btn-login.active,
.open > .dropdown-toggle.btn-danger {
  color: black;
  background-color: #006778;
  border-color: #031E2F;
}

.input-field{

    display:flex;
    align-items:center;
    margin-bottom: 15px;

    border: 1px solid #023C4D;   /* thin border */
    border-radius:0;            /* remove rounded corners */
    background: #023C4D;
    padding:10px;
}

/* highlight when input is active */

.input-field:focus-within{

    border-color:#7CFC00;       /* highlight color */
}

.input-field input{

    flex:1;

    border:none;
    outline:none;

    background:transparent;
    color:white;

    font-size:16px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {

    -webkit-box-shadow: 0 0 0px 1000px #023C4D inset;
    -webkit-text-fill-color: white;

    transition: background-color 5000s ease-in-out 0s;

}

.icon{
    width:18px;
    height:18px;
    color: white;
    cursor:pointer;
}

.icon-left{
    margin-right:10px;
}

.icon-right{
    margin-left:10px;
    cursor:pointer;
}


.overlay{
    position:fixed;
    top:0;
    left:50%;

    transform:translateX(-50%);

    width:554px;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(3,30,47,0.9);
}

.toggle-password{

    position:absolute;
    right:12px;
    top:35%;
    transform:translateY(-50%);

    cursor:pointer;
}

.toggle-password svg{
    opacity:0.7;
}

.toggle-password:hover svg{
    opacity:1;
}

.bottom-div {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: white;
  background-color: transparent;
  display: flex;
  justify-content: center;
  font-size: 11px;
}

.bottom-div table {
    width: 50%;
}

.bottom-div table td {
    margin: 0 auto;
    padding: 6px;
    text-align: center;
    color: #696969;
}

.bottom-div table td a {
  color: white;
  text-decoration: underline;
 }

.glyphicon-refresh-animate {

    animation: spin 1s infinite linear;

}

@keyframes spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}