body{
    margin: 0;
    background-color: black;
    color: #efefef;
    font-family: monospace, sans-serif;
    overflow: hidden;

}
#header{
    background-color: #3456;
    display: flex;
    flex-direction: row-reverse;
    padding: 0 10px;
    height: 5vh;
    align-items: center;
    gap: 10px;
}


#chatbox{
    display: flex;
    flex-direction: column;
    height: 95vh;
}

#history{
    flex-grow: 1;
    margin: 10px;
    overflow-y: scroll;
}
#history table{
    /* border: 1px solid white; */
    width: 100%;
}
#history table tr{
    position: relative;
}
#history table td{
    padding: 2px;
}
#history>table tr>td:nth-child(1){
    word-break: break-all;
    overflow-wrap: anywhere;
}
#history>table tr>td:nth-child(2){
    /* opacity: 0.8; */
    font-size: .7rem;
    /* width: 15%; */
    visibility: hidden;
    /* text-align: end; */
    /* vertical-align: bottom; */
    white-space: nowrap;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #345c;
    border-radius: 7px;
    padding: 1px 4px;
}

#history>table tr:hover>td:nth-child(2){
    visibility: visible;
}

#input{
    flex-basis: 60px;
    margin: 40px;
    border: 1px solid #efefef;
    border-radius: 10px;
}
#input form{
    width: Calc( 100% - 10px );
    height: Calc( 100% - 10px );
    
    display: flex;
    margin: 5px;
}
#input input{ 
    border: none;
    background-color: black;
    caret-color: #efefef;
    flex-grow: 1;
    /* font-size: 1.5rem; */
    color: #efefef;
    width: Calc( 100% - 50px );
}
#input input:focus{
    outline: none;
}
#input button{
    background-color: black;
    border: none;
    flex-basis: 20px;
    cursor: pointer;
}
#user_container{
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    backdrop-filter: blur(2px);
}

#user_form{
    display: flex;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: #888;
    padding: 20px;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    translate: -50% -50%;
    height: 40%;
    width: 60%;
    border-radius: 5px;
}

#user_form input{
    height: 10%;
    /* width: 60%; */
    border-radius: 5px;
    border: none;
    font-weight: bold;
    padding: 5px;
}
#user_form input:focus{
    outline: none;
}

#user_form button{
    height: 15%;
    /* width: 30%; */
    border-radius: 5px;
    border: none;
    font-weight: bold;
    font-size: 1.2rem;
    background-color: black;
    color: white;
    cursor: pointer;
}

/* Style for WebKit-based browsers */
/* Note that this won't work in Firefox and some other browsers */

/* Track */
::-webkit-scrollbar {
    width: 6px; /* Width of the scrollbar */
    height: 6px;
}


/* Handle */
::-webkit-scrollbar-thumb {
background-color: #8887; /* Color of the scrollbar handle */
border-radius: 6px; /* Rounded corners of the scrollbar handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: #888; /* Color of the scrollbar handle on hover */
}

/* Track on hover */
::-webkit-scrollbar-track:hover {
background-color: #f1f1f1; /* Color of the scrollbar track on hover */
}

/* Track when scrollbar is active (being interacted with) */
::-webkit-scrollbar-thumb:active {
background-color: #555; /* Color of the scrollbar handle when active */
}