.LoginPanel{
    width: 30%;
    height: fit-content;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: .5vw;
    padding: 1vw;
    box-shadow: 5px 5px 10px black ,-5px -5px 10px #222;
    background-color: rgba(100,100,100,0.7);
}
.clogOrSig{
    width: 95%;
    margin:1vh auto;
    height: fit-content;
    border: solid thin rgba(255,255,255,0.5);
    border-radius: .5vw;
    justify-content: center;
    display: flex;
    background-color: #555;
    padding-top: 1vh;
    padding-bottom: 1vh;
}
.butDiv{
    width: fit-content;
    padding-right: 1vw;
    padding-left: 1vw;
    text-align: center;
    font-family: "Arial Black",sans-serif;
    font-size: 1.2vw;
    margin: auto;
    cursor: pointer;
    color: #222;
}
.butDiv:hover{
    color: ghostwhite;
    text-shadow: 0 0 0.5vw blue;
}
.logoTable{
    width: 90%;
    margin: 1vh auto;
    background-color: #222222;
    border-radius: .5vw;
    border: solid thin deepskyblue;
}
.schlName{
    color: deepskyblue;
    font-size: 1.4vw;
    font-weight: bolder;
    text-align: center;
    border-bottom: solid thin deepskyblue;
}
.schlDet{
    color: deepskyblue;
    font-size: .9vw;
    font-weight: bolder;
    text-align: center;
}
.logInDiv{
    height: 95%;
    margin: auto;
    width: 95%;
    text-align: center;
    display: flex;
    justify-content: center;
}

.logInput{
    height: 4vh;
    width: 90%;
    border-radius: .5vw;
    padding-left: 1vw;
    padding-right: 1vw;
    outline: none;
    background-color: rgba(0,0,0,0.5);
    border: none;
    font-size: 1.2vw;
    color: ghostwhite;
    font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;

}
.logInput::placeholder{
    color: #aaa;
}
.logInput:hover,.selectUser:hover{
    border-color: deepskyblue;
}
.logInput:focus,.selectUser:focus{
    background-color: rgba(0,0,0,0.7);
    border-color: deepskyblue;
    color: ghostwhite;
}
.logTable{
    width: 100%;
    height: fit-content;
    margin: auto;
}
.icon{
    width: 10%;
    font-size: 2.5vw;
}
.selectUser{
    height: 4vh;
    width: 90%;
    border:none;
    border-radius: .5vw;
    padding-left: 1vw;
    padding-right: 1vw;
    outline: none;
    color: ghostwhite;
    font-size: 1.2vw;
    text-align: center;
    font-family:Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
    cursor: pointer;
    background-color: rgba(0,0,0,0.5);
}
.selectUser option{
    color: black;
    background-color: gray;

}
.submitLog{
    background-color: #333;
    font-size: 1.5vw;
    font-family: "Arial Black",sans-serif;
    color: deepskyblue;
    cursor: pointer;
}
.submitLog:hover{
    background-color: #555;
}
.submitLog:active{
    background-color: #444;
}





.sign{
    border-collapse: collapse;
    margin-bottom: 1vh  ;
}
.signIn{
    display: block;
}
.labelTDSign{
    font-family: "Arial Black",sans-serif;
    font-size: 1.2vw;
    color: #bbb;
    text-align: left;
}
.selectSign{
    width: 100%;
    border: solid thin ghostwhite;
    height: 4.5vh;
    border-radius: .5vw;
    outline: none;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    font-family: Arial,sans-serif;
    font-weight: bold;
    color:ghostwhite;
    cursor: pointer;
}
.selectSign option{
    color: black;
    background-color: grey;

}
.signInput{
    width: 96%;
    border: none;
    height: 4vh;
    border-radius: .5vw;
    outline: none;
    background-color: rgba(0,0,0,0.5);
    font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:ghostwhite;
    padding-right: 2%;
    padding-left: 2%;
    font-size: 1vw;
}
.signInput:hover{
    background-color: rgba(0,0,0,0.6);
}
.signInput:focus{
    background-color: rgba(0,0,0,0.7);
    border-color: deepskyblue;
    box-shadow: 0 0 0.5vw deepskyblue;
}
.signInput::placeholder{
    color: #888;
}
.submit{
    width: 100%;
    border: none;
    outline: none;
    height: 5vh;
    color: deepskyblue;
    background-color: rgba(0,0,0,0.7);
    font-family: "Arial Black",sans-serif;
    font-size: 1.3vw;
    cursor: pointer;
}
.submit:hover{
    background-color: rgba(0,0,0,0.9);
}
.submit:active{
    background-color: rgba(0,0,0,0.8);
}
/* Floating label animation */
.input-group-floating {
    position: relative;
}

.input-group-floating .form-control {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem;
}

/* In your login.css */
username-label, password-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.input-group-floating username-label,
.input-group-floating password-label {
    position: absolute;
    top: 0;
    left: 49px;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: #6c757d;
    z-index: 5;
    margin-left: 48px;
}

.input-group-floating .form-control:focus ~ username-label,
.input-group-floating .form-control:not(:placeholder-shown) ~ username-label,
.input-group-floating .form-control:focus ~ password-label,
.input-group-floating .form-control:not(:placeholder-shown) ~ password-label {
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    opacity: 0.65;
    padding-top: 0.2rem;
}
/* Dropdown wrapper */
.dropdown-wrapper {
    position: relative;
}

/* Custom dropdown arrow */
#userTypeSelect {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Hover effect for options */
#userTypeSelect option:hover {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

/* Helper text */
.dropdown-helper {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.25rem;
    display: block;
}

/* Auto-detection notification */
.auto-detect-notice {
    background-color: rgba(0, 123, 255, 0.1);
    border-left: 3px solid #007bff;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    display: none;
}

.auto-detect-notice.show {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive design */
@media (max-width: 768px) {
    .dropdown-indicator {
        right: 0.75rem !important;
    }
    
    #userTypeSelect {
        font-size: 14px;
    }
}