body {
    margin: 0;
    padding: 0;
    font-family: Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Full viewport height */
}


body::before {
    content: "";
    position: absolute;
    background: radial-gradient(#518C8E, #073f41);
    width: 100vw;
    height: 100vh; /* Full viewport height */
    z-index: -1;
}

.loginFormContainer {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 60px;
    min-width: 320px;
     max-width: 320px;
    text-align: center;
}


.loginFormContainer img {
    max-width: 250px;
    height: auto;
}

.loginFormContainer h1 {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.loginForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.loginForm label {
    font-weight: bold;
    text-align: left;
}

.loginForm input[type="email"],
.loginForm input[type="password"] {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.loginForm input[type="text"]:focus,
.loginForm input[type="password"]:focus {
  outline: none;
  border-color: #518c8e;
  /* Use your primary button color for focus */
  box-shadow: 0 0 5px rgba(81, 140, 142, 0.5);
  /* Subtle shadow with your color */
}

.loginForm input[type="submit"] {
    background-color: #518c8e; /* Your primary button color */
    transition: background 0.3s;
    color: #fff;
    padding: 12px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.loginForm input[type="submit"]:hover {
  background-color: rgb(19, 132, 150);
  /* Your hover button color */
  color: rgb(7, 60, 69);
  /* Your hover text color */
}


.loginForm a {
    color: #777;
    text-decoration: none;
    font-size: 14px;
}

.loginForm a:hover {
    text-decoration: underline;
    color: #518c8e; /* Use your primary color for link hover */
}


.loginFormContainer h2 {
	font-size: 14px;
	color: #FFF;
	background-color: #900;

	text-align: center;
	padding: 10px;
}

.mxDevelopmentDiv {
    width: 300px;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ff0;
    opacity: 60%;
    z-index: 1000;
    position: fixed;
    text-align: center;
    font-weight: 400;
    color: #000;
    margin-top: 0
  }
  div.errorInputForm {
  width: auto;
  font-size: 12px;
  font-weight: 400;
  color: #a80000;
  padding: 3px;
  margin: 5px 5px 4px 0
}
@font-face {
  font-family: "material-symbols-sharp";
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.ttf)
}
.input-with-icon { position: relative; width: 100%; }
  /* Force padding independent of input[type] */
  .input-with-icon > input.pad-for-key {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .toggle-password {
    position: absolute; right: 6px; top: 0; bottom: 0;
    display: flex; align-items: center;
    border: 0; background: transparent; cursor: pointer; padding: 0 4px;
  }


/* your icon style */
.material-sharp {
  font-family: "material-symbols-sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;   /* tweak for your input height (was 30px) */
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  pointer-events: none; /* keep clicks on the button */
}

/* example error class for jQuery Validate */
.errorInputForm { color:#d00; margin-top:4px; font-size:13px; }