.r-chatbox-b {
    align-items: center;
    width: 50%;
    border-radius: 10px;
    padding: 1%;
    display: inline;
}

.r-chatbox-c {

    color: black;
    background-color: rgba(148, 148, 148, 0.5);
    /* margin: 0 auto; */
    /* padding: 1%; */
    /* width: 100%; */
    border-radius: 15px;
    box-shadow: 0px 0px 10px rgb(209, 209, 209);
    text-align: center;


}
#r-host {
    background-color: rgb(197, 255, 111);
    text-align: center;
    border-radius: 15px;
    border:solid 2px rgb(47, 128, 0)
}

.r-chatbox-b>input {
    margin: 1%;
    border-radius: 25px;
    font-size: larger;
    border: 2px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}
.r-chatbox-b>input+button {
    display: inline;
    border-radius: 10px;
}
.r-button{
    border-radius: 10px;
    background-color: rgb(255, 144, 144);
    border: solid 2px red;
}

.r-list {
    background-color: bisque;
    margin: 1%;
    padding: 1%;
    text-align: center;
}

.r-container-form {
    margin: 0 auto;
    margin-bottom: 5%;
    margin-top: 5%;
    background-color: rgb(116, 135, 136);
    padding: 2%;
    border-radius: 10px;
    text-align: center;
    width: fit-content;
    padding: 10px;
}
.r-container-form>form>input {
    border: green solid 1px;
    background-color: rgb(243, 255, 226);
    padding: 10px;
    border-radius: 10px;
}

.r-container-player{
    margin: 2%;
    border-radius: 10px;
    width: 100%;
    text-align: center;
}
.r-container-player-sub {
    background-color: rgb(100, 237, 141);
    margin: 1%;
    padding:2%;
    color: black;
    border-radius: 10px;
    border:solid 2px greenyellow
}
.vs {
    background-color: rgb(255, 172, 172);
    border:2px solid rgb(255, 90, 90); 
    width: fit-content;
    margin: 0 auto;
    padding: 1.2%;
    border-radius: 10px;
}
.r-container-player-sub>form>input {
    padding: 1%;
    margin: 2%;
    text-align: center;
    font-size: larger;
    border-radius: 10px;
}

.r-clock{
    width: fit-content;
    background-color: crimson;
    margin: 0 auto;
    text-align: center;
}
.r-clock> input {
    height: 100px;
}
.r-clock>form {
    background-color: cyan;
    vertical-align: baseline;

    margin-top: 50%;
}
.r-clock>form > input {
    height: 30px;
}
.r-chatbox {
    /* margin: 0 auto; */
    /* padding: 1%; */
    width: 50%;
    border-radius: 15px;
    text-align: center;
    /* padding-left: 5%;
    padding-right: 5%; */
    height: 500px;
    overflow:scroll;
}

.r-chatbox > ul > li {
    text-align: left;
    list-style-type: none;
}
/* .lists {
    background-color: burlywood;
    overflow:scroll;
    height: 100px;
    text-align: left;
} */


/* chat messages */
.all_message {
    font-size: larger;
    border: 2px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
}
.all_message::after {
    content: "";
    clear: both;
    display: table;
  }
.time {
    float:right;
    color: #999;
    font-size: smaller;
}
.cent {
    text-align: center;
}
.cent>.all_message>form>input {
    padding: 10px;
    width: 100%;
}
.cent>.all_message>form>.inp {
    width: fit-content;
    background-color: rgb(255, 208, 189);
    text-align: center;
    border-radius: 15px;
    border:solid 2px rgb(253, 103, 103)
}
/* chat box */