html, 
body {
    height: 100%;
}

.container-login{
   position: absolute;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
}

.image-panel{
   position: relative;
   width: 50%;
   height: 100%;
   float: left;

   background-image: url(/img/bg.jpg); 
                     background-position: center center;
                     background-repeat: no-repeat; 
                     /* background-attachment: fixed; */
                     background-size: cover;
   /* filter: brightness(80%); */
   

}

.login-form{
   background: rgb(255, 255, 255);   
   position: relative;
   width: 50%;
   height: 100%;
   vertical-align: middle;
   /* padding-left: 10%; */
   /* padding-right: 10%; */

   float: left;

}

.header-logo{
   margin-top: 20px;
   width: 80%;
   background-color: rgba(253, 253, 253, 0.521);
   margin-left: 10%;
   margin-right: 10%;
   text-align: center;
}

.outer-wrapper{
   display: inline-block; 
   margin: 0;
}

.logo-container{
   /* position: relative; */
   width: 150px;
   height: 150px;

   max-height: 150px;

   justify-content: center;     

   vertical-align: middle;
   text-align: center;
   display: table-cell;
}

.helper {
   display: inline-block;
   /* height: 145px; */
   vertical-align: middle;
}

.logo-container img{
   max-width: 100%;
   max-height: 100%;
   display: block;
   margin: 0 auto;
}

.logo-name{
   position: relative;
   width: 100%;
   height: auto;
   display: flex;
   justify-content: center;      
   text-align: center;
}

.logo-name p{
   margin-top: 1rem;
   color: rgb(0, 0, 0);
   font-size: 25px;
}

.form-input-container{
   display: flex;
   justify-content: center;
   width: 100%;
}

.form-login-card {
   border-left: rgb(0, 180, 90);
   border-left-width: 6px;
   border-left-style: solid;
   width: 100%;
   margin-left: 10%;
   margin-right: 10%;

   -webkit-box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 2px 2px 7px 0px rgb(0, 0, 0,0.15);
   box-shadow: 2px 2px 7px 0px rgb(0, 0, 0, 0, 0.15);
}

.login-box-msg{
   padding-top: 0px;
   padding-bottom: 15px;;
}

@media only screen and (max-width: 600px), screen and (max-height: 600px) and (orientation: landscape) {
   .image-panel{
      background-image: url(/img/bg.jpg); background-position: center center;background-repeat: no-repeat;background-attachment: fixed;background-size: cover;
   }
   
   .image-panel{
      position: absolute;
      width: 100%;      
   }

   .login-form{
      width: 100%;
      background-color: transparent;
   }

   .form-login-card {
      margin-left: 4%;
      margin-right: 4%;   
      border-left-style: none;

   }

   .header-logo{
      width: 92%;
      margin-left: 4%;
      margin-right: 4%;
   }

   .logo-container{
       background-color: rgba(255, 255, 255, 0.247);
   }

   .logo-name{
      background-color: rgba(255, 255, 255, 0.247);
      height: 60px;;
   }
   
   .logo-container img{   
      -webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 255, 255));
      filter: drop-shadow(0 0 0.55rem rgb(255, 255, 255));
   }
   
}