body{
    background-color: rgb(217, 227, 227);
}

.form-cover{
            background-color: rgb(217, 227, 227);
            width: 100%;
            padding:25px 15px;
            border-radius: 5px;
            margin-top: 5px;
            margin-bottom: 50px;
}

form{
     width: 95%!important; 
     padding-top: 20px!important;
     text-align: center;
     margin: auto;
     margin-top: 100px;
}

.bg-logo-img{
             width: 200px;
             height: 215px;
}

h4{
   font-size: 26px;
   padding-bottom: 20px;
   padding-top: 15px;
   text-align: center;
   color: #059142;
}

.input-cover{
             width: 90%;
             margin: auto;
             margin-top: 10px;
}


div.input.text{
                width: 100%;
                margin-bottom: 15px;
}

div.input.password{
                   width: 100%;
                   margin-bottom: 15px;
}

label{
      width:25%;
      font-size: 16px;
}

input#username,
input#password{
               width: 55%;
               padding:8px;
               margin-left: 15px;
               height:auto;
               border-radius:5px;
               border: 1px solid #000;
}

input#username{
               margin-bottom: 15px;
}

input#password{
               margin-bottom: 20px;
}

div.submit{
           width:56%;
           margin-left:36%;
          
}

div.submit input{
                 background-color: #f1e3a4;
                 width: 100%;
                 line-height: 32px;
                 font-size: 16px;
                 padding: 10px 0px;
                 border-radius: 10px;
                 color: #000;
                 border: 1px solid #DEB64B;
}

.error-message {
               color: red;
               font-size: 0.875em; /* Smaller font size for error messages */
               margin-top: 0.5em;
}

.version{
        margin-top: 80px;
}

.textversion{
             font-size: 16px;
}

/* Extra small devices (phones, <576px) */
@media (max-width: 575.98px) {
       
        h4{
            font-size: 18px;
        }
       

        label,
        .textversion{
                     font-size: 14px;
        }

        div.submit input{
                         font-size: 14px;
                         line-height: 31px;
                         padding: 5px 0px;
        }

        form{
             width: 100%!important; 
        }

        .form-cover{
                    padding: 0px 0px;
        }

        input#username,
        input#password{
                       padding: 5px;
        }

} 

/* Small devices (phones landscape, ≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {

       div.submit input{
                        line-height: 31px;
                        padding: 5px 0px;
       }

       h4{
            font-size: 20px;
       }
        
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {

       div.submit input{
                        line-height: 31px;
                        padding: 5px 0px;
       }

       h4{
          font-size: 20px;
       }

      

        
}

/* Large devices (desktops, ≥992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

       
       form{
             width: 100%!important; 
       }

       .form-cover{
                   padding: 0px 0px;
       }

       label{
             width: 90%;
             text-align: left;
       }

       input#username,
       input#password{
                       width: 90%;
                       padding:8px;
                       margin-left: 0px;
                       margin: auto;
       }

       div.submit{
                  width: 90%;
                  margin-left: 0px;
                  margin: auto;
       }

       div.submit input{
                        line-height: 31px;
                        padding: 5px 0px;
       }

       h4{
          font-size: 22px;
       }
      

       input#password{
                      margin-bottom: 15px;
       }

}

@media (min-width: 1200px) and (max-width: 1399.98px) {
       
      label{
            width:25%;
            font-size: 16px;
      }

      input#username,
      input#password{
                     width: 55%;
                     padding:8px;
                     margin-left: 20px;
                     height:auto;
                     border-radius:5px;
                     border: 1px solid #000;
      }

      input#username{
                     margin-bottom: 10px;
      }

      input#password{
                     margin-bottom: 10px;
      }

      div.submit{
                 width:54%;
                 margin-left:38%;
      }

      div.submit input{
                       line-height: 32px;
                       padding: 5px 0px;
      }

      form{
           width: 100%!important; 
      }

      .form-cover{
                  padding: 0px 0px;
      }

      h4{
         font-size: 24px;
      }

    

    
}