body{
  background: linear-gradient(360deg, #015c06, rgb(236, 245, 239));

}
.login-container{
 min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


form {
  width: 100%;
  max-width: 400px; /* Fixed width */
  padding: 20px;
  background:transparent;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Label stabilization */
form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
}

.form-floating label{
  background: transparent !important;  
}


.container-centered span a:hover{
  color: var(--uni-light-font-activeColor);
}
.inputField {
  width: 100%;
  padding: 0.375rem 0.75rem;
   background: transparent !important; 
  transition: border-color 0.15s ease-in-out;
}

.inputField:hover {
  border: 1px solid white;
  box-shadow:
    0px 5px 10px 0px rgba(164, 245, 2, 0.3),    /* Bottom shadow */
    -5px 0px 8px 0px rgba(164, 245, 2, 0.2),    /* Left side shadow */
    5px 0px 8px 0px rgba(164, 245, 2, 0.2),     /* Right side shadow */
    0px 8px 15px 0px rgba(0, 0, 0, 0.15);       /* Bottom drop shadow */
  transition: all 0.2s ease !important;
}
.clearBttnStyle{    
color: var( --uni-light-fontColor) !important;
border:  var( --uni-light-borderStyle) !important;
}
.registerBttnStyle{
color: var( --uni-light-colorTheme5) !important;
border: var( --uni-light-borderStyle) !important;
background-color: var( --uni-light-colorTheme2) !important;
}

/* Base button styles that won't change on hover */
.loginSubmitBttnStyle,
.clearBttnStyle,
.registerBttnStyle {
  padding: 10px 20px;
  margin: 30px 0; /* Only top/bottom margin */
  border-radius: 5px;
  transition: all 0.2s ease !important;
  width: 50%; /* Consistent width */
  display: block; /* Make them block level for consistent sizing */
  margin-left: auto;
  margin-right: auto;
    font-family: 'Source Serif 4', serif !important;
  
}
.loginSpanStyle{
padding: 10px 20px; margin: 10px;
color: rgb(8, 8, 8);

}

.spanLinkStyle{
color: rgb(12, 10, 10);
text-decoration: none;
}

/* Hover effects without size changes */
.loginSubmitBttnStyle:hover,
.clearBttnStyle:hover,
.registerBttnStyle:hover {
  box-shadow:
    0px 5px 10px 0px rgba(164, 245, 2, 0.3),    /* Bottom shadow */
    -5px 0px 8px 0px rgba(164, 245, 2, 0.2),    /* Left side shadow */
    5px 0px 8px 0px rgba(164, 245, 2, 0.2),     /* Right side shadow */
    0px 8px 15px 0px rgba(0, 0, 0, 0.15);       /* Bottom drop shadow */

transition: all 0.2s ease !important;
}

     /* Facebook and Google buttons */
.loginBtn {
box-sizing: border-box;
position: relative;
width: 13em;  
margin: 0.2em;
padding: 0 5px 0 40px;
border: none;
text-align: left;
line-height: 34px;
white-space: nowrap;
border-radius: 0.2em;
font-size: 16px;
color: #FFF;
display: inline-block;
font-family: 'Source Serif 4', serif !important;
}

.loginBtn:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 100%;
}
.loginBtn:focus {
outline: none;
}
.loginBtn:active {
box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}

/* Password toggle specific styles */
.password-toggle {
  position: relative;
  margin-bottom: 1rem; /* Add some spacing below */
}

.password-toggle .inputField {
  padding-right: 40px; /* Make space for the eye icon */
}

.toggle-password {
  position: absolute;
  right: 15px;
  top: 50%; /* Adjusted to align better with input */
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 5;
  color: #050505;
  font-size: 1.1rem;
 
}

.toggle-password:hover {
  color: #495057;
}

/* Facebook */
.loginBtn--facebook {
background-color: #4C69BA;
background-image: linear-gradient(#4C69BA, #3B55A0);
/*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
text-shadow: 0 -1px 0 #354C8C;
margin-top: 25px;
display:inline-block;
}
.loginBtn--facebook:before {
border-right: #364e92 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
background-color: #5B7BD5;
background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */
.loginBtn--google {
/*font-family: "Roboto", Roboto, arial, sans-serif;*/
background: #DD4B39;

display:inline-block;
}
.loginBtn--google:before {
border-right: #BB3F30 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
background: #E74B37;
}

/* EOF BUtton styles */