/*General Rules*/

body{
    height: 100vh;
    display:flex;
    flex-direction: column;
}

header {
    box-shadow: 0 0 .3rem .2rem black;
}
main{
    width:75%;
    height:100%;
    box-shadow: .25rem 0 .5rem black;
}
#main-container{
    flex:1;
    box-shadow: 0 .25rem .5rem black inset;
}
.col{
    padding: 8px;
}
.row{
    margin-left: -8px;
    margin-right: -8px;
}
footer {
    box-shadow: 0 0 .3rem .2rem black
}
#game-container{
    width:320px;
    height: 450px;
    position:relative;
    display:none
}
#gamebar{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    margin:0;
    padding:0;
    position:absolute;
    top:0
    /* display:none */
}
.gamebar-item{
    margin:0;
    padding:0;
    font-size: small;
}
.right-half{
    width: calc(100% - 2px);
}

#chat-view{
}

.chat-bubble{
    position:relative;
}
.chat-bubble .cm-self{
    background-color: aqua;
}
.chat-bubble .cm-other{
    background-color: rgb(78, 138, 78);
}
.cm-self{
    writing-mode: horizontal-tb;
    direction: rtl;
}

.chat-message{
    width: auto;
    max-width: 100%;
    text-wrap: balance;
    word-break: break-word;
    border: thin solid gray;
    border-start-start-radius: .5rem;
    border-start-end-radius: .5rem;
    border-end-end-radius: .5rem;
    padding: .25rem;
    margin-block: .25rem;
    margin-inline: 0 .25rem;
    display:inline-block;
    position:relative;
    inset-block-start: 0;
    inset-block-end: 0;
    z-index: 5;

}
.chat-tip-container{
    width:1.1rem;
    height:1rem;
    position:relative;
    inset-block-end: -0.65rem;
    inset-inline-end: -0.45rem;
    border-block-end: thin solid gray;
    border-radius:0;
    display: inline-block;
    z-index: 6;
}
.chat-tip-container::after{
    content:"";
    border-block-end: thin solid gray;
    border-inline-end: thin solid gray;
    background-color: rgb(248, 249, 250);
    position:absolute;
    inset-inline-start: -0.1rem;
    inset-block-start: -0.1rem;
    border-end-end-radius: 1rem;
    width:1.05rem;
    height:1.1rem;
    display: inline-block;
}

/* // small devices (tablets, less than 576px) */
@media (max-width: 575.98px) {
    #login-container{
        flex: 1;
        display: flex;
        justify-content: end;
    }
    #chat-view{
        flex-wrap: wrap;
    }
    main{
        width:100%;
        box-shadow: none;

    }
    .navbar-brand{
        text-align: center;
    }

    
}