.input-container-with-icon {
    display: flex;
    align-items: center;
    width: 100%; /* Adjust width as needed */
}
.input-container-with-icon .icon {
    color: gray; /* Default icon color */
    margin-right: 20px;
    transition: color 0.3s ease-in-out;
    display:flex;
    align-self:center;
}
.input-container-with-icon input,
.input-container-with-icon select,
.input-container-with-icon textarea {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
    padding: 4px; /*Added*/
    border-bottom: 1px solid rgba(128, 128, 128, 0.5); /* 50% transparent gray */
    transition: border-color 0.3s ease-in-out;
}
/* Change border and icon color when input is focused */
    .input-container-with-icon:focus-within input,
    .input-container-with-icon:focus-within select,
    .input-container-with-icon:focus-within textarea {
        border-bottom: 2px solid rgba(0, 128, 0, 1); /* Fully green on focus */
    }

.input-container-with-icon:focus-within .icon {
    color: green;
}
.button-style {
    cursor: pointer; /* Makes it clickable */
    transition: background-color 0.3s ease-in-out;
}
.button-style:hover {
    background-color: rgba(128, 128, 128, 0.5); /* Light grey on hover */
}
@media only screen and (min-widh: 768px) {
    .input label {
        display:none;
    }
}