body {
    overflow-x: hidden;
  }
  
  .sticky-bottom {
    position: sticky;
    bottom: 0;
  }
  #wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  #wrapper.toggled {
    padding-right: 250px;
  }
  
  #sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 300px;
    width: 0;
    height: 80%;
    margin-right: -300px;
    overflow-y: auto;
    background: rgba(28, 17, 46, 0.247);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  #wrapper.toggled #sidebar-wrapper {
    width: 400px;
  }
  
  #page-content-wrapper {
    width: 100%;
    position: relative;
    padding: 15px;
  }
  
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0px;
  }
 .error{
   color:red;
 }
 input.error{
   border-color: red;
  
 }
 input.error:focus{
  border-color: red;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
 
}
 input.valid{
  border-color: green;
  border-width: 2px; 
 
}
input.valid:focus{
  border-color: green;

  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(3, 253, 36, 0.6);
  
}
  @media(min-width:768px) {
    #wrapper {
      padding-left: 0;
     
    }
    #wrapper.toggled {
      padding-right: 400px;
     
    }
    #sidebar-wrapper {
      width: 0;
     
    }
    #wrapper.toggled #sidebar-wrapper {
      width: 600px;
      
    }

   
  }