/*
USE EXAMPLE :
<div class="inputGroup">
    <input type="text" required="" autocomplete="off">
    <label for="name">Name</label>
</div>
*/

/* Autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    border-color: #00cbef !important;
}

/* For Firefox */
input:autofill {
    background-color: white !important;
    color: inherit !important;
}

.inputGroup {
  font-family: 'Segoe UI', sans-serif;
  margin: 1.5em 0 0.5em 0;
  position: relative;
}

.inputGroup input {
  font-size: 100%;
  padding: 0.8em;
  outline: none;
  border: 1px solid rgb(200, 200, 200);
  background-color: transparent !important;
  border-radius: 15px;
  width: 100%;
}

.inputGroup label {
  color: #00cbef;
  font-size: 100%;
  position: absolute;
  left: 0;
  padding: 0.8em;
  margin-left: 0.5em; 
  pointer-events: none;
  transition: all 0.3s ease;
}


.inputGroup :is(input:focus, input:valid, input:not(:placeholder-shown))~label {
    border-color: #00cbef;
}


.inputGroup :is(input:focus, input:valid, input:not(:placeholder-shown))~label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  margin-left: 1.3em;
  padding: 0.4em;
  background-color: white;
  border-color: #00cbef;
}

.inputGroup :is(input:focus, input:valid) {
  border-color: #00cbef;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.inputGroup input[type="password"] {
    padding-right: 30px; /* Make room for the icon */
}

/* Blue Theme */
.inputGroup.blue input {
  border-color: #00cbef;
}

.inputGroup.blue label {
  color: #00cbef;
}

.inputGroup.blue :is(input:focus, input:valid, input:not(:placeholder-shown))~label {
  background-color: white;
  border-color: #00cbef;
}

/* Red Theme */
.inputGroup.red input {
  border-color: #ff4d4d;
}

.inputGroup.red label {
  color: #ff4d4d;
}

.inputGroup.red :is(input:focus, input:valid, input:not(:placeholder-shown))~label {
  background-color: white;
  border-color: #ff4d4d;
}


/* Gray Theme */
.inputGroup.gray input {
  border-color: #808080;
}

.inputGroup.gray label {
  color: #808080;
}

.inputGroup.gray :is(input:focus, input:valid, input:not(:placeholder-shown))~label {
  background-color: white;
  border-color: #808080;
}