html,body{
    background: rgb(255,255,255);
    background: -moz-linear-gradient(to right bottom, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%) fixed;
    background: -webkit-linear-gradient(to right bottom, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%) fixed;
    background: linear-gradient(135deg , rgba(255,255,255,1) 0%,  rgba(230,230,230,1) 100%) fixed;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#e6e6e6",GradientType=1);
    width:100vw;
    margin:0;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    -webkit-touch-callout: none;     /*na mhn mporei o xrhsths na kanei highlight tis lekseis*/
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}

@font-face { 
    font-family: bahamas;
    src: url(font/Bahamas_5634.ttf);
  }

.ball{ /* h mpala opou periexei ta panta mesa*/
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:570px;
    height:570px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(219, 219, 219);
    border-radius: 50%;
    -webkit-box-shadow: -6px 5px 8px 3px #d6d6d6, 6px 1px 8px 0px #e7e1e1;
    box-shadow: -6px 5px 8px 3px #d6d6d6, 6px 1px 8px 0px #e7e1e1;
}

#logo{/* gia to icno tou logo*/
    position:fixed;
    width:40px;
    height:80px;
    left:23%;
    top:70px;
}

.appName{ /*gia to onoma ths kathe epixisises na topouetiuei sto kentro*/
    position:fixed;
    margin-left: 32%;
    margin-top: 88px;
    font-size: 45px;
    width:280px;
    font-family:'Trebuchet MS';
}

.firstHalfName{/* gia to proto miso tou onomatos, to mple*/
    color:#3CA7B7;
    font-family:'Trebuchet MS';
}

.secondHalfName{/* gia to deutor miso tou onomatos, to mauro*/
    float:right;
    text-align:right;
    color:#000000;
    font-family:'Trebuchet MS';
    font-size:12pt;
    font-weight:bold;
}

.loginFields{ /* ena box gia na metaferv ola ta paidia mesa sthn ball sto kentro kai oxi to kaue ena jexorista */
    position:absolute;
    margin-left: 21%;
    margin-top: 225px;
}

input{ /* gia ta input paidia */
    outline: none;
    border: 1px solid #3CA7B7;
    border-radius: 35px;
    height:45px;
    width:260px;
    padding-left:55px;
    vertical-align: text-bottom;
    padding-right:10px;
}

.username{
    font-size:18px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}
.password{
    font-size:28px;
    font-family: 'Raleway', sans-serif;
}

#username:focus ~ .floating-label-user, /* gia thn metakinhsh tou placeholder */
#username:not(:focus):valid ~ .floating-label-user{
  top: 30px;
  bottom: 10px;
  left: 250px;
  font-size: 14px;
  opacity: 1;
  color: #3CA7B7;
  text-transform: lowercase;
}

.floating-label-user { /* gia thn metakinhsh tou placeholder username */
    position:absolute;
    pointer-events: none;
    font-size: 18px;
    font-style: italic;
    font-weight: lighter;
    left: 55px;
    top: 15px;
    color: gray;
    transition: 0.2s ease all;
    font-family: 'PT Sans Narrow', sans-serif;
  }
  
  #password:focus ~ .floating-label-pass, /* gia thn metakinhsh tou placeholder password*/
  #password:not(:focus):valid ~ .floating-label-pass{
    top: 116px;
    bottom: 10px;
    left: 230px;
    font-size: 14px;
    color: #3CA7B7;
    text-transform: lowercase;
  }

.floating-label-pass{ /* gia thn metakinhsh tou placeholder password*/
    position: absolute;
    pointer-events: none;
    font-size: 18px;
    font-style: italic;
    font-weight: lighter;
    left: 55px;
    top: 100px;
    color: gray;
    transition: 0.2s ease all;
    font-family: 'PT Sans Narrow', sans-serif;
  }
 
.loginButton{ /* gia to log in*/
    margin-left:28%;
    background-color: #3CA7B7;
    color: white;
    font-size: 18px;
    font-weight: normal;
    width:150px;
    height:35px;
    padding-left:5px;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;

}
.loginButton:hover{ /* gia to log in*/
    cursor: pointer;
}

.loginButton:active{ /* gia to log in*/
    cursor: pointer;
    background-color: #3CA7B7;
    -webkit-box-shadow: inset 5px 5px 15px 5px #000000; 
    box-shadow: inset 5px 5px 15px 5px #000000;
}

.forgot{ /* gia to minima forget y.... */
    color: #3CA7B7;
    position: absolute;
    top: 110%;
    left: 26%;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
  }

.forgot:hover { /* gia to minima forget y.... */
    cursor: pointer;
    height: 0px;
    text-decoration: underline;
    text-decoration-color: rgb(0, 0, 0);
    -moz-text-decoration-color: rgb(0, 0, 0);
    text-decoration-thickness: 1px;
}

.usernameIcon, .passwordIcon{ /* oi mple mpalitses dipla apo ta paidia gia usern kai passw */
    position: absolute;
    width: 49px;
    height: 49px;
}


.userIcon,.passIcon{/* gia anthropaki icon */
    position: absolute;
    color:rgb(255, 255, 255);
    left:0px;
    margin-left: 12px;
    margin-top: 14px;
    z-index: 100;  
    width:25px;
    height:25px;
    background-color: transparent;
    z-index: 10;
  }