#loginBody,#signupBody{
    
    background-image: linear-gradient(90deg, rgb(0, 128, 255), rgb(130, 193, 255),rgb(130, 193, 255),rgb(0, 128, 255));
    
}
#login .verify{
width:354.86px;
padding: 20px;
    font-size:31px;
    padding-top: 0%;
}
#login .vHead{
width:354.86px;
padding: 20px;
    font-size:31px;
    color: aliceblue;
    padding-bottom: 0%;
}
#login{
    
    position: absolute;
    width: 400px;
    height:400px;
   left:66%;
   top:50%;
   transform:translate(0%,-50%) scale(1.5);
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid rgb(0, 128, 255);
    gap: 20px;
    color: aliceblue;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.488);
    
}
.resetPassword{
border: 2px solid rgb(0, 191, 255)!important;

height: 500px !important;
}
.resetPassword .password{
    display: block !important;
}
#signupBody #login {
    transform:translate(0%,-50%) scale(1.5);
}
@media (hover: none), (pointer: coarse) {
    #login {
        height: 100% !important;
        transform:translate(-50%,-50%) scale(2);
        box-sizing: border-box;
    }
    #signupBody #login {
        transform:translate(-50%,-50%) scale(2)!important;
        box-sizing: border-box;
    }
    .resetPassword{
       transform:translate(-50%,-50%) scale(2)!important; 
    }
}


.toast {
    width: 450px; /* Đặt chiều rộng là 100% */
    box-sizing: border-box;
    border-radius: 100px;
}
@media (max-width: 450px) {
    .toast {
        width: 100vw; /* Đặt chiều rộng là 100% */
        box-sizing: border-box;
        border-radius: 0%;
    }
    
}
#login label{
    margin-bottom: 10px;
    display: inline-block;
    font-size: 1em;
}
#login input, #login button{
    border:none;
    width:259px;
    padding: 10px 0px;
    text-align: center;
    outline: none;
    display: block;
   
   text-decoration: none;
   border: 2px solid rgb(0, 128, 255);
    background-color: rgb(60, 60, 60);
    border-radius: 100px;
    color: aliceblue;
    transition:  .2s ;
}
#login input::placeholder {
color: rgb(0, 128, 255);
}
#login input:focus {
    border: 2px solid rgb(59, 255, 89);
    transition:  .2s ;
}
#login div:focus-within label {
    color: rgb(226, 255, 222);
}
#login input:focus::placeholder {
    color: rgb(60, 130, 108); /* Màu placeholder khi có tiêu điểm */
    transition:  .2s ;
}
#login button{
    padding: 10px 0px;
    display: inline-block;
    margin-top: 0px ;
   width: 263px;
   background-color: rgb(0, 128, 255);
   cursor: pointer; 
}
#login button:hover{
    
    background-color: rgb(87, 171, 255);
}
#login button:active{
    
    background-color: rgb(172, 214, 255);
}

.username{
display: inline-block;
padding: 0%;
margin: 0%;
}
#login h1{
    padding: 0%;
    margin: 0%;
    color:  rgb(0, 128, 255);
}
#footer a{
    text-decoration: none;
    color:  rgb(83, 83, 83);
    transition: color 0.2s;
    cursor: pointer;
}
#footer a:hover{
    color:aliceblue
}
@media (hover: none), (pointer: coarse) {
    #footer a:hover{
    color:  rgb(83, 83, 83);
}
#footer a:active{
    color:aliceblue
}
#login button:hover{
    
    background-color: rgb(0, 128, 255)!important;
}
}
#footer{
    text-decoration: none;
    margin-bottom: 10px ;
    width: 263px; 
    display: flex;
    color: rgb(64, 64, 64);
    justify-content: space-between;
}
#avatar{
    width:62vh;
    height:31.2vh;
    position: absolute;
    z-index: 10;
    top: 50%;
left: 50%;
align-content: space-around;
justify-content: space-between;
padding: 0%;
transform: translate(-50%, -50%);
flex-wrap: wrap;
}
#avatar img{
   
    width:10vh;
    height:10vh;
    cursor: pointer;
}
#colePalmer{
    position: absolute;
    left:26%;
    top:57%;
    transform: translate(-50%,-50%);
    z-index: -1;
    width:1350px
}
#loginBody #msgList,#signupBody #msgList{
    
    left:0;
    
   }