body {
    margin: 0 0 0 0;
    background-image: url(BG1.jpg);
    background-size: cover;
    width: auto; height: auto;
    text-align: -webkit-center;
}
.windows {
    box-shadow: #000000 0px 0px 5px;
    width: 1200px;
    height: auto;
    background-color: #b5b5b5;
    display: inline-grid;
    grid-template-columns: minmax(auto) 1fr 1fr 1fr;
    grid-template-rows: minmax (100px 100px);
    grid-template-areas: 
    'Topbar'
    'ALLROOM'
    'Bottombar';
}
.Topbar {
    grid-area: Topbar;
    width: auto;
    height: 100px;
    background-color: #00937d;
    font-size: 20px;
}
.Bottombar {
    grid-area: Bottombar;
    width: auto;
    height: 50px;
    background-color: #00937d;
}
.ALLROOM {
    grid-area: ALLROOM;
    width: 1200px;
    height: 680px;
    padding-top: 10px; padding-left: 10px;
    border: #007db7 solid 3px;
    background-color: #d5d5d5;
    display: inline-grid;
    grid-template-columns: minmax(auto) 1fr 1fr 1fr;
    grid-template-rows: minmax (100px 100px);
    grid-template-areas: 
    'a1 b1 c1'
}
.a1 {
    grid-area: a1;
    width: 250px;
    height: auto;
    border: #ffffff solid 0px;
    grid-template-columns: minmax(auto) 1fr 1fr 1fr;
    grid-template-rows: minmax (100px 100px);
    grid-template-areas: 
    'ADS1'
    'GG';
}
.b1{
    grid-area: b1;
    width: 700px;
    height: 650px;
    padding-right: 5px;
    padding-bottom: 10px;
}
.c1{
    grid-area: c1;
    width: 200px;
    height: auto;
    border: #ffffff solid 0px;
    grid-template-columns: minmax(auto) 1fr 1fr 1fr;
    grid-template-rows: minmax (100px 100px);
    grid-template-areas:
    'ADS2'
    'TT'
    'CC'
    'SS';
}
.ADS1{
    grid-area: ADS1;
    border: #c1c1c1 inset 2px;
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
}
.GG{
    grid-area: GG;
    border: #8e7144 ridge 5px;
    background: #2d4f3d;
    width: 200px;
    height: 435px;
}
.groupall {
    border: #ffffff solid 0px;
    width: 200px;
    height: 435px;
    display: inline-flex;
    flex-direction: column;
    text-align: left;
}
a {
    color: #ffffff;
    display: inline-block;
    text-decoration: none;
    padding: 4px;
}
a.active{
    background: #243f31;
}
.ADS2{
    grid-area: ADS2;
    border: #c1c1c1 inset 2px;
    width: 200px;
    height: 100px;
    margin-bottom: 10px;
}
.TT{
    grid-area: TT;
    border: #c1c1c1 inset 2px;
    width: 100%;
    height: 380px;
    margin-bottom: 10px;
}
.CC{
    grid-area: CC;
    border: #c1c1c1 inset 2px;
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
}
.SS{
    grid-area: SS;
    border: #c1c1c1 inset 2px;
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
}
.CHATROOM {
    background: #000000;
    border: #999074 ridge 3px;
    width: 700px;
    height: 650px;
}
.CHAT {
    width: 700px;
    height: 650px;
    overflow-y: auto;
}
.TEXTALL {
    width: 650px;
    height: auto;
    border: #ff0000 solid 0px;
    margin-bottom: -5px;
    text-align: left;
}
.T1 {
    width: auto;
    height: 28px;
    display: flex;
    font-family: "DotGothic16", sans-serif; font-weight: 400; font-size: 1rem;
    margin-left: -15px;
}
.T2{
    width: auto;
    height: auto;
    margin-top: -5px;
    margin-bottom: 10px;
    margin-left: -18px;
    font-family: "DotGothic16", sans-serif; font-weight: 400; font-size: 1rem; color: #000000;
    border-bottom: #212121 solid 1px;
}
.T1 mark {
    margin-top: 0;
    width: auto;
    height: 25px;
    margin-left: 8px;
    border: #ff0000 solid 0px;  
}
.T2 p {
    margin-top: 0;
    width: 600px;
    margin-left: 5px;
    margin-bottom: 5px;
    border: #ff0000 solid 0px;  
}
h1 {
    border: #ff0000 solid 0px; 
    color: #0d2e2f;
}
/*----- custom scrollbar ----- */
.CHAT::-webkit-scrollbar{
    width: 15px;
}
.CHAT::-webkit-scrollbar-track{
    background: #000000;
    border: #000000 solid 1px;
}
.CHAT::-webkit-scrollbar-thumb{
    background: #000000;
    border-top: #7491a1 ridge 5px;
    border-left: #7491a1 ridge 5px;
    border-bottom: #7491a1 ridge 5px;
    border-right: #7491a1 ridge 5px;
    border-radius: 25px;
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////*/
::-webkit-scrollbar{
    width: 20px;
}
::-webkit-scrollbar-track{
    background: #8b760e;
    border: #7a6018 dashed 11px;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(0deg,#9ebe2a 63%, #849f23 100%);
    border: #8b760e dashed 11px;
}
::-webkit-scrollbar-corner {
    background: #7a6018;
}