/*----------------------------------------
/*----------------------------------------
    Login Page
------------------------------------------*/

/*----------------------------------------
  Available Layout type names
-----------------------------------------*/

/*
 1. vertical-modern-menu-template
 2. vertical-menu-nav-dark-template
 3. vertical-gradient-menu-template
 4. vertical-dark-menu-template
 5. horizontal-menu-template

/* Need to change Layout name as per your requirement on below mentioned line.*/

/*
1. @import "../themes/vertical-gradient-menu-template/variables";
2. @import "../themes/vertical-gradient-menu-template/theme-variables";
*/

.login-bg {
  background:#E5E5E5;
}

#login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  height: 100vh;
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

#login-page .card-panel.border-radius-6.login-card {
  margin-left: 0 !important;
}


button[type='submit'] {
  background: #0a9345 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  font-weight: bold;
}

.card-panel{
  background-color: white;
  border-radius: 10px !important;
}

.input-field .prefix.active{
  color: black !important;
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border: 1px solid #1C89B6;
  box-shadow: none;
  border-radius: 3px;
}

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
  background-color: white !important;
  border: none;
  border: 1px solid #9e9e9e;
  border-radius: 3px;
  outline: none;
  height: 3rem;
  width: 93.7%;
  font-size: 1rem;
  margin: 0 0 8px 0;
  padding: 0 10px;
  box-shadow: none;
  box-sizing: content-box;
  transition: box-shadow 0.3s, border 0.3s;
}

a{
  color: #1C89B6;
}

.input-field > label:not(.label-icon).active{
  transform: translateY(-10px) scale(0.8);
  transform-origin: 0 0;
  background-color: white;
  /* width: 75px; */
  width: auto;
  border-radius: 5px;
}

.input-field.col label{
  left: 1.75rem;
}

input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #9e9e9e;
}