html, body {
    height: 100%;
    text-align: center;
}
input, label, select {
    margin: 5px 0px;
}
input {
    width: 250px;
    height: 30px;
}
.errtxt {
    color: red;
    font-weight: bold;
    margin: 5px 0px;
}
.loginindex {
    display: flex;
    justify-content: center;  
    align-items: center;
    height: 100%;
}
.loginindexform {
    margin: auto;
    background: linear-gradient(to bottom, #99ff99 0%, #00cc99 100%);
    background-color: aquamarine;
    width: 500px;
    border-radius: 12px;
    height: 400px;
    padding: 100px 10px;
}
.loginicon {
    border-radius: 20px;
    pointer-events: none;
    margin: 10px auto;
    width: 64px;
}
form {
    margin: 10px auto;
}
.formlogintextbox {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid white;
    width: 250px;
}
.formloginbutton {
    border: 0;
    border-radius: 16px;
    width: 100px;
}

.loginforgot {
    margin-top: 20px;
}
.loginforgot a {
    text-decoration: none;
    color: aliceblue;
}
.loginbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(180deg, #4dd0e1 0%, #009688 100%);
    color: #ffffff;
    text-decoration: none;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.loginbutton:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

.loginbutton:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(0,0,0,0.14);
}

.loginbutton:focus,
.loginbutton:focus-visible {
    outline: 3px solid rgba(0,150,136,0.18);
    outline-offset: 3px;
}