body {
   margin: 0px;
   font-family: 'Helvetica';   
}

.login-view {
   background: rgb(255,255,255); /* Old browsers */
   background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(158,178,162,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(158,178,162,1))); /* Chrome,Safari4+ */
   background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(158,178,162,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(158,178,162,1) 100%); /* Opera 12+ */
   background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(158,178,162,1) 100%); /* IE10+ */
   background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(158,178,162,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9eb2a2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   height: 100%;
   position: absolute;
   width:100%;
}


.login-view-bg {
   background-image: url("background.png") !important;
   background-repeat: no-repeat;
   background-position: bottom;  
   background-size: 100%; 
   height: 100%;
   position: absolute;
   width:100%;
}

.login-view .login-logo {
   border: none !important;
   background-repeat: no-repeat;
   background-position: bottom;
   background-image: url("logo_desktop.png") ;
   margin-bottom: 20px;
   background-size: 260px 30px;
   height: 40px !important;
   margin-right: auto;
   margin-left: auto;
}

.cont-all{
   position: relative;
   top: 40%;
   transform: translateY(-40%);
}


.login-view .login-panel {
   max-width: 350px;
   width: 80%;
   margin-right: auto;
   margin-left: auto;
   background-color: #414040;
   border-radius: 10px;
   padding: 20px;
   -webkit-box-shadow: 2px 3px 6px -1px rgba(0,0,0,0.75);
   -moz-box-shadow: 2px 3px 6px -1px rgba(0,0,0,0.75);
   box-shadow: 2px 3px 6px -1px rgba(0,0,0,0.75);
   border: none !important;
   position: relative;
}


.login-fieldset {
   margin-top: 10px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;      
}

.login-field {
   background-color: transparent;
   border: none;
   border-bottom: 1px solid #FFFFFF;
   width: 80%;
   margin-top: 15px;
   font-size: 1em;
   margin-left: 32px;
   margin-right: auto;
}

.login-button {
   margin-top: 40px;
   border: none !important; 
   background-color: gray;
   color: black;
   margin-right: auto;
   margin-left: auto;
   width: 100%;
   border-radius: 4px;
   height: 30px;
   color: #FFFFFF;
   font-weight: bold;
}

.login-view .x-field-input, .login-view .x-form-fieldset .x-form-fieldset-inner {
   background-color: transparent;
   color: white !important;
   border: none !important;
}


.login-view .login-field {
    -webkit-text-fill-color:gray !important;
   color: gray !important;
   height: 25px;
}

.login-view .login-field:focus {
    outline: 0 none;
    box-shadow: 0 0 10px #719ECE;
}



.login-error-message{
   height:10px;
   width: 90%;
   font-size: 0.8em;
   color: red;
}

/*  RESPONSIVE  ************************************/
@media only screen and (max-width: 500px), screen and (max-height: 500px)   {

   .login-view .login-logo {
      background-image: url("logo_mobile.png") ;
      background-size: 140px 16px;
   }

   .login-fieldset {
      margin-top: 15px;
   }
}