body{
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #87ceeb;
    font-family: "Microsoft YaHei";
}
div{
    margin: 0;
    padding: 0;
}
h1{
    text-align: center;
    color: #3b5998;
    font-size: 32px;
}
#app{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#app-main{
    display: flex;
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    padding: 20px 30px 10px 30px;
    background-color: #ffffff;
}
#hall{
    flex-direction: column;
    flex-grow: 1;
    margin-top: 35px;
}
#hall-body{
    display: flex;
    flex-grow: 1;
}
#hall-footer{
    margin-top: 4px;
    font-size: 12px;
    color: #333;
}
#hall-footer span{
    margin-right: 8px;
}
#hall-footer a{
    color: #333;
    text-decoration: none;
}
#hall-footer a:hover{
    text-decoration: underline;
}
#main-area{
    display: flex;
    flex-direction: column;
    width: 700px;
}
#top-bar{
    display: flex;
    justify-content: space-between;
    height: 50px;
}
#logo{
    width: 280px;
    position: relative;
}
#logo h1{
    margin: 0;
}
#logo-move{
    text-align: center;
    position: absolute;
    left: 10px;
    top: -15px;
}
#big-bt-wrap{
   width: 420px;
   display: flex;
   justify-content: space-between;
   flex-wrap: nowrap;
  
}
.big-bt{
    flex-grow: 1;
    margin-left: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    height: 40px;
    outline: none;
    border-radius: 3px;
    border: 2px solid #333;
    cursor: pointer;
    background-color: transparent;
}
#my-table{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 22px;
    width: 60px;
    height: 40px;
    outline: none;
    border-radius: 3px;
    border: 2px solid #333;
    cursor: pointer;
    background-color: transparent;
}
#my-table:hover{
    background-color: skyblue;
}
.big-bt:hover{
    background-color: rgba(0, 0, 0, 0.06);
}
#room{
    position: relative;
    flex-grow: 1;
    background-color: #fff;
    border-radius: 3px;
    border: 2px solid #333;
    padding: 8px;
    border-radius: 3px;
}
#waiting{
    display: flex;
    flex-direction: column;
    padding: 8px 8px 8px 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#right-area{
    position: relative;
    box-sizing: border-box;
    width: 230px;
    margin-left: 10px;
    border: 2px solid #333;
    background-color: #fff;
    border-radius: 3px;
}
#title-underline-main{
    box-sizing: border-box;
    margin: 0 0 8px 8px;
    padding: 1px 0 3px 3px;
    background-color: #82b7e2;
    border-radius: 3px;
    color: #FFF;
}
#title-underline-right{
    box-sizing: border-box;
    width: 100%;
    padding: 1px 0 3px 3px;
    margin-bottom: 8px;
    background-color: #82b7e2;
    border-radius: 3px;
    color: #FFF;
}
#room-list-wrap{
    flex-grow: 1;
    overflow-y: scroll;
}
#guest{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
}
#guest-list-wrap{
    overflow-y: auto;
}
#guest-list{
    margin-right: 3px;
    font-size: 14px;
}
.guest-item{
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    padding: 4px 2px;
    cursor: default;
}
.guest-item:hover{
    background-color: #eeeeee;
}
.guest-item span:first-child{
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.guest-item span:last-child{
    margin-left: 4px;
}
#table-list{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow-y: auto;
}
.table-item-box{
    width: 25%;
    margin-bottom: 8px;
}
.table-item{
    box-sizing: border-box;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #b8b8b8;
    border-radius: 3px;
    margin-left: 8px;
    padding: 0 4px 4px 4px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);
    background-color: #ffe3af;
}
.item-username{
    display: flex;
    overflow: hidden;/**!!!**/
    flex-direction: column;
    flex: 1 1;
    background-color: white;
    margin: 3px 4px 0 0;
    padding: 0 2px;
    color: #636363;
    border-radius: 2px;
}
.item-username div{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 22px;
}
.item-username div:first-child{
    border-bottom: 1px solid rgb(197, 197, 197);
}
.item-table-info{
    margin: 2px 0;
    color: #525252;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.item-table-info-icon{
    display: flex;
    align-items: center;
}
.item-table-info-icon span{
    margin-right: 2px;
}
.svg-lock{
    display: inline-flex;
    width: 16px; 
    height: 16px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuMTY3IDVDMi45NyA1IDIgNi4xNTEgMiA3LjU3MXYzLjg1OEMyIDEyLjg0OSAyLjk3IDE0IDQuMTY3IDE0aDguNjY2QzE0LjAzIDE0IDE1IDEyLjg0OSAxNSAxMS40MjlWNy41N0MxNSA2LjE1MSAxNC4wMyA1IDEyLjgzMyA1SDQuMTY3em0yLjE2Ni44N2MtMi44MzMgMC0zLjQ4Ny40MTYtMy40ODcgMi45ODd2MS4yODZjMCAyLjU3MS4yMzcgMy4wNzMgMy40ODcgMy4wNzNoNC4zMzRjMi43MDggMCAzLjQ4Ny0uNTAyIDMuNDg3LTMuMDczVjguODU3QzE0LjE1NCA2IDEzLjUgNS44NyAxMSA1Ljg3SDYuMzMzeiIgZmlsbD0iIzUyNTI1MiIvPjxwYXRoIGQ9Ik01IDRjMC0uNzk2LjM2OS0xLjU1OSAxLjAyNS0yLjEyMUM2LjY4MSAxLjMxNiA3LjU3MiAxIDguNSAxYy45MjggMCAxLjgxOS4zMTYgMi40NzUuODc5QzExLjYzIDIuNDQgMTIgMy4yMDQgMTIgNGgtMS4xYzAtLjU0Ni0uMjUzLTEuMDY5LS43MDMtMS40NTQtLjQ1LS4zODYtMS4wNi0uNjAzLTEuNjk3LS42MDMtLjYzNiAwLTEuMjQ3LjIxNy0xLjY5Ny42MDNDNi4zNTMgMi45MyA2LjEgMy40NTQgNi4xIDRINXpNNi4xIDRINXYxaDEuMVY0ek0xMiA0aC0xLjF2MUgxMlY0eiIgZmlsbD0iIzUyNTI1MiIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSAxMC45MTVhMS41IDEuNSAwIDEgMC0xIDB2LjU4NWEuNS41IDAgMCAwIDEgMHYtLjU4NXoiIGZpbGw9IiM1MjUyNTIiLz48L3N2Zz4=") no-repeat center;
    background-size: 100%;
}
.svg-no-witness{
    display: inline-flex;
    width: 16px; 
    height: 16px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfOV8zMjUpIiBmaWxsPSIjNTI1MjUyIj48cGF0aCBkPSJNMTEuMTk1IDkuMDY3QTMuMDQ5IDMuMDQ5IDAgMCAwIDguMzM3IDQuOTVjLS4zNTkgMC0uNzE2LjA2NS0xLjA1My4xOTFMOCA1Ljg4QTIuMTY0IDIuMTY0IDAgMCAxIDEwLjQ5OCA4YzAgLjExLS4wMS4yMi0uMDI3LjMyOWwuNzI0LjczOHoiLz48cGF0aCBkPSJNMTUuMjQgNy43OTFjLTEuNDk4LTIuNzY5LTQuMTI0LTQuNDQ0LTcuMDMxLTQuNDQ0YTcuNDc2IDcuNDc2IDAgMCAwLTIuMzI5LjM3N2wuNzE2LjcyYTYuNTcgNi41NyAwIDAgMSAxLjYxMy0uMjA4YzIuNTAyIDAgNC43NzggMS4zOTUgNi4xMzMgMy43NDZBNy44ODcgNy44ODcgMCAwIDEgMTIuNCAxMC4yNWwuNjMxLjYzMWE4Ljg1NyA4Ljg1NyAwIDAgMCAyLjIyMi0yLjY2N0wxNS4zNyA4bC0uMTI5LS4yMDl6TTIuMTY0IDIuNTY5TDQuMTQ3IDQuNTVhOC42NzYgOC42NzYgMCAwIDAtMi45NzQgMy4yNEwxLjA1OCA4bC4xMTUuMjEzYzEuNDk4IDIuNzcgNC4xMjUgNC40NDUgNy4wMzEgNC40NDVhNy41MjQgNy41MjQgMCAwIDAgMy4yNzYtLjc1MWwyLjIyMiAyLjIyMi43NzgtLjY2N0wyLjkyNCAxLjkwN2wtLjc2LjY2MnptNC4zMzQgNC4zMzNsMi45NTUgMi45NTZhMi4xMzggMi4xMzggMCAwIDEtMS4xMS4zMkEyLjE2NSAyLjE2NSAwIDAgMSA2LjE3NyA4Yy4wMDUtLjM4OC4xMTUtLjc2OC4zMi0xLjA5OHptLS42NDUtLjY0NGEzLjA0NCAzLjA0NCAwIDAgMCA0LjI0NSA0LjI0NGwuNzEuNzExYTYuNjI3IDYuNjI3IDAgMCAxLTIuNjA0LjUzNGMtMi41MDIgMC00Ljc3Ny0xLjM5Ni02LjEzMy0zLjc0N2E3LjY4NSA3LjY4NSAwIDAgMSAyLjcyLTIuOGwxLjA2MiAxLjA1OHoiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF85XzMyNSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgxNnYxNkgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==") no-repeat center;
    background-size: 100%;
}
.item-user-wrap{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.item-bt-area{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.item-watch-bt{
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 3px;
    border: 1px solid silver;
    color: #3e3e3e;
    border-radius: 3px;
    outline: none;
    background-color: transparent;
    cursor: pointer;
}
.item-defualt-bt{
    font-size: 12px;
    font-weight: bold;
    outline: none;
    border: 1px solid gray;
    border-radius: 3px;
    color: #3e3e3e;
    background-color: #b9eafc;
    cursor: pointer;
}
.item-bt-area button:hover{
    background-color: #ececec;
}
.table-item-ps-box{
    display: none;
    position: absolute;
    width: 200px;
    height: 130px;
    background-color: #f2f2f2;
    border-radius: 5px;
    box-shadow: 4px 4px #b4b4b4;
    border: 2px solid #333;
}
.table-item-ps-wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    align-content: center;
}
.table-item-ps-title{
    font-weight: bold;
    color: #707070;
}
.table-item-ps-wrap input[type="text"] {
    text-align: center;
    width: 130px;
}
.table-item-ps-btbox{
    width: 100%;
    display: flex;
    justify-content: center;
}
.table-item-ps-btbox button{
    width: 50px;
}
.table-item-ps-btbox button:first-child{
    margin-right: 15px;
}


#table{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: flex;
    justify-content: center;
    align-items: center;
}
#table-wrap{
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 20;
    border-radius: 5px;
    background-color: #eee;
    padding: 60px;
    border: 1px solid #b6b6b6;
    box-shadow: 0 0 2px #bdbdbd;
}
#table-main-area{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: burlywood;
}
#table-msgbox{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 25;
    width: 260px;
    height: 150px;
    background-color: #55afa9;
    border: 2px solid rgb(59, 59, 59);
    border-radius: 2px;
}
#table-msgbox-btbox{
    margin-top: 18px;
}
#table-msgbox-btbox button{
    margin: 0 12px;
    width: 60px;
}
#table-right-area{
    position: relative;
    display: flex;
    width: 260px;
    padding: 12px;
    margin-right: 0;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #FFF;
}
#tbr-top{
    width: 100%;
}
#tbr-top-time{
    width: 100%;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}
#tbr-user2name{
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 55px;
    border: 1px solid #6D6D6D;
    border-radius: 5px;
    margin-top: 4px;
}

#tbr-user1{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 50%;
    height: 100%;
    border-right: 1px solid #bfbfbf;
}

#tbr-user2{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: relative;
    width: 50%;
    height: 100%;
    padding-left: 1px;
}
.tbr-user-style{
    box-sizing: border-box;
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.master-mark{
    padding: 0 3px;
    border: 1px solid #959595;
    border-radius: 3px;
}
/******标签******/
#tbr-user1-left{
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    text-align: center;
    left: 1px;
    top: 1px;
    height: 14px;
    line-height: 14px;
    width: 14px;
    background-color: skyblue;
    border-radius: 50%;
    color: #fff;
}

#tbr-user1-right{
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    text-align: center;
    padding: 0 2px;
    right: 1px;
    top: 1px;
    height: 14px;
    line-height: 14px;
    background-color: #ffb5c2;
    border-radius: 3px;
    color: #fff;
    cursor: default;
}

#tbr-user1-right:hover{
    background-color: red;
}

#tbr-user2-left{
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    text-align: center;
    padding: 0 2px;
    left: 1px;
    top: 1px;
    height: 14px;
    line-height: 14px;
    background-color: skyblue;
    border-radius: 3px;
    color: #fff;
}

#tbr-user2-right{
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    text-align: center;
    right: 1px;
    top: 1px;
    height: 14px;
    line-height: 14px;
    width: 14px;
    background-color: skyblue;
    border-radius: 50%;
    color: #fff;
}

#table-bg{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(210, 210, 210);
    z-index: 15;
}
#tbr-quick-select{
    width: 100%;
}
#tbr-select-stone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: gray;
}
#ask-peace{
    margin-top: 12px;
}
#ask-peace button{
    margin-right: 8px;
    border: 1px solid gray;
    border-radius: 2px;
    padding: 2px 6px;
    background-color: white;
}
#ask-peace button:hover{
    background-color: rgb(236, 236, 236);
}
#ask-peace button:active{
    background-color: rgb(208, 208, 208);
}
#tbr-option{
    box-sizing: border-box;
    width: 100%;
    height: 170px;
    border: 1px solid gray;
    border-radius: 5px;
    overflow: hidden;
}
#tbr-option-menu{
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #7e7e7e;
    font-size: 14px;
    height: 22px;
    border-bottom: 1px solid rgb(165, 165, 165);
}
#tbr-option-menu span{
    box-sizing: border-box;
    width: 25%;
    height: 100%;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid rgb(165, 165, 165);
    cursor: default;
}
#tbr-option-menu span:last-child{
    border-right: none;
}
#tbr-option-area{
    font-size: 14px;
    padding: 0;
}
#tbr-witness-list{
    box-sizing: border-box;
    padding: 4px;
    display: flex;
    height: 148px;
    overflow-y: auto;
    flex-direction: column;
}
#tbr-witness-list span{
    margin-bottom: 3px;
}
.opt-select{
    color: #000;
    background-color: skyblue;
}

.opt-select-style:hover{
    color: #000;
}
#tbr-option-info{
    display: flex;
    flex-direction: column;
    padding: 4px;
}
#tbr-option-info div{
    margin: 3px 0;
}
#tbr-option-setting{
    display: flex;
    flex-direction: column;
    padding: 4px;
}
#tbr-option-setting div{
    display: flex;
    align-items: center;
    height: 28px;
}
#tbr-option-password span{
    display: inline-flex;
    align-items: stretch;
}
#tbr-option-password input[type="text"]{
    width: 120px;
    margin-right: 8px;
}
#tbr-set-password{
    cursor: default;
}
#tbr-set-password:hover {
    text-decoration: underline;
}
#tbr-bottom-bt-wrap{
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tbr-bottom-bt{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28px;
    width: 100%;
    letter-spacing: 3px;
    border: 1px solid gray;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
.tbr-bottom-bt-in{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.tbr-bottom-bt-in:hover{
    background-color: rgba(0, 0, 0, 0.05);
}
.tbr-bottom-bt-in:active{
    background-color: rgba(0, 0, 0, 0.1);
}
.tbr-bottom-bt:last-child:hover{
    background-color: rgba(0, 0, 0, 0.05);
}
.tbr-bottom-bt:last-child:active{
    background-color: rgba(0, 0, 0, 0.1);
}
#border {
    display: flex;
    margin: 16px;
    flex-direction: column;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgdmlld0JveD0iMCAwIDQ4MCA0ODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEyIiBjeT0iMTEyIiByPSIzIiBmaWxsPSJzaWVubmEiLz48Y2lyY2xlIGN4PSIzNjgiIGN5PSIxMTIiIHI9IjMiIGZpbGw9InNpZW5uYSIvPjxjaXJjbGUgY3g9IjExMiIgY3k9IjM2OCIgcj0iMyIgZmlsbD0ic2llbm5hIi8+PGNpcmNsZSBjeD0iMzY4IiBjeT0iMzY4IiByPSIzIiBmaWxsPSJzaWVubmEiLz48Y2lyY2xlIGN4PSIyNDAiIGN5PSIyNDAiIHI9IjMiIGZpbGw9InNpZW5uYSIvPjwvc3ZnPg==") no-repeat center;
    background-size: 100%;
}

#border>div{
    display: flex;
}

#border>div>div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 32px;
    height: 32px;
}

#border>div>div::before{
    position: absolute;
    content: '';
    top: 16px;
    width: 32px;
    border-top: 1px solid sienna;
}

#border>div>div::after{
    position: absolute;
    content: '';
    left: 16px;
    height: 32px;
    border-left: 1px solid sienna;
}

#border>div>div:first-child::before{
    position: absolute;
    content: '';
    left: 17px;
    width: 16px;
    border-top: 1px solid sienna;
}

#border>div>div:last-child::before{
    position: absolute;
    content: '';
    left: 0px;
    width: 17px;
    border-top: 1px solid sienna;
}

#border>div:nth-child(1)>div:after{
    position: absolute;
    content: '';
    top: 16px;
    height: 17px;
    border-left: 1px solid sienna;
}

#border>div:last-child>div:after{
    position: absolute;
    content: '';
    top: 0px;
    height: 17px;
    border-left: 1px solid sienna;
}

#border>div>div>i{
    z-index: 5;
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 14px;
}

#border>div>div:hover i{
    background-color: rgba(49, 33, 13, 0.2);
}

.black-stone{
    z-index: 3;
    text-align: center;
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    background-image: -webkit-linear-gradient(top,#777,#000); box-shadow : 1px 1px 1px gray;
}

.white-stone{
    z-index: 3;
    text-align: center;
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    background-image: -webkit-linear-gradient(top,#fff,#ddd); box-shadow : 1px 1px 1px gray;
}

.black-last-mark::before{
    content: '+';
    font-weight: bold;
    font-style: normal;
    color: white;
}
.white-last-mark::before{
    content: '+';
    font-weight: bold;
    font-style: normal;
    color: black;
}

#win-display{
    font-size: 1.2em;
}

#invite-box{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 280px;
    height: 160px;
    background-color: #6d6dff;
    border-radius: 5px;
    border:3px solid #333;
    box-shadow: 5px 5px #5e5e5e;
}
#invite-box-wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: white;
    align-items: center;
    margin: 0 40px;
    height: 100%;
}
#invite-box-bt{
    display: flex;
    width: 100%;
    justify-content: space-around;
}
#invite-box-bt button{
    width: 60px;
}
#admin{
    box-sizing: border-box;
    font-size: 14px;
    flex-shrink: 0;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #999;
    height: 40px;
    margin-bottom: 10px;
    border-radius: 3px;
}
#admin span:first-child{
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
#admin span:last-child{
    margin-left: 4px;
    white-space: nowrap;
}

#welcome{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
}

#welcome-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 400px;
    border: 2px solid #333;
    background-color: #ffffff;
    border-radius: 5px;
    margin-bottom: 40px;
}
#welcome-nikename{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#welcome-nikename>span{
    color: #3b5998;
    font-size: 32px;
}
#welcome-nikename>input{
    margin: 15px 0 30px 0;
    font-size: 22px;
    text-align: center;
    width: 280px;
    height: 45px;
    border-radius: 8px;
    border: 2px solid #333;
    outline: none;
}
#welcome-nikename>div{
    display: flex;
    justify-content: space-around;
    width: 250px;
}
#welcome-nikename button{
    width: 80px;
    height: 40px;
    border: 2px solid #333;
    background-color: #ffffff;
    outline: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
}
#welcome-nikename button:hover{
    background-color: rgba(0, 0, 0, 0.06);
}
#welcome-loading{
    display: flex;
    align-items: flex-end;
    font-size: 36px;
}
.welcome-dot {
    display: inline-block;
    height: 42px;
    line-height: 40px;
    overflow: hidden;
}
.welcome-dot::after {
    display: inline-table;
    white-space: pre;
    content: "\A.\A..\A...";
    animation: dotspin 2s steps(4) infinite;
}
@keyframes dotspin {
    to{
        -webkit-transform:translateY(-160px);
        transform:translateY(-160px);
    }
}
.guest-list-own{
    color: gray;
}
#table-invite-box{
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    top: 90px;
    left: 0;
    width: 100%;
    height: 415px;
    background-color: white;
    box-shadow: 0 0 5px #636363;
}
#table-invite-list{
    padding-top: 8px;
    overflow-y: auto;
    height: 100%;
}
#table-invite-list-hide{
    color: #666;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    background-color: #cbcbcb;
    border-bottom: 1px solid #c3c3c3;
}
#table-invite-list-hide:hover{
    color: #333;
}
.table-invite-item{
    box-sizing: border-box;
    padding: 5px 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.table-invite-item>span:first-child{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.table-invite-item>span:last-child{
    margin-left: 4px;
    white-space: nowrap;
    color: #029b17;
    cursor: pointer;
}
.table-invite-item>span:last-child:hover{
    text-decoration: underline;
}
#table-invite-icon{
    cursor: pointer;
    padding: 0 3px;
    border-radius: 3px;
    color: rgb(111, 188, 218);
}
#table-invite-icon:hover{
    background-color: #f0f0f0;
}
#table-invite-icon:active{
    background-color: #d1d1d1;
}
#table-title{
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 2px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#table-title-left{
    color: gray;
    display: flex;
    align-items: center;
}
#table-title-left>span{
    margin-left: 3px;
}
#hide-table-bt{
    margin-right: 3px;
    width: 32px;
    height: 18px;
    border-radius: 3px;
}
#hide-table-bt:hover{
    background-color: rgba(0, 0, 0, 0.05);
}
.can-invite{
    color: #029b17;
    cursor: pointer;
}
.can-invite:hover{
    text-decoration: underline;
}
.not-invite{
    color: #bdbdbd;
}
#disconnect-box{
    position: fixed;
    left: 3px;
    top: 3px;
    z-index: 16;
}
.stone-left{
    position: absolute;
    left: 2px;
    bottom: 2px;
}
.stone-right{
    position: absolute;
    right: 2px;
    bottom: 2px;
}
.tbr-black-stone{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-image: -webkit-linear-gradient(top,#777,#000); box-shadow : 1px 1px 1px gray;
}
.tbr-white-stone{
    box-sizing: border-box;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    border: 1px solid #c4c4c4;
    background-image: -webkit-linear-gradient(top,#fff,#a4a4a4);
    box-shadow: 1px 1px 1px #b0b0b0;
}
#change-nickname{
    cursor: pointer;
}
#change-nickname:hover{
    text-shadow: 1px 1px #b4b4b4;
}
#tbr-im{
    width: 100%;
}
#tbr-im-wrap{
    display: flex;
    flex-direction: column;
    height: 144px;
}
#tbr-im-msg{
    margin-bottom: 6px;
    flex-grow: 1;
    overflow-y: auto;
    font-size: 14px;
    padding: 4px 4px 0 4px;
}
#tbr-im-ip{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin: 0 4px;
}
#tbr-im-ip input{
    margin-right: 4px;
    flex-grow: 1;
    outline: none;
}
#tbr-im-ip button{
    font-size: 12px;
    white-space: nowrap;
}
#tbr-im-ip span:hover{
    background-color: #c8c8c8;
}
.tbr-msg-item{
    width: 100%;
    margin-top: 6px;
    overflow: hidden;
}
.tbr-msg-item-left{
    float: left;
    padding: 0 3px;
    border-radius: 2px;
    max-width: 90%;
    word-break: break-word;
    background-color: #efefef;
}
.tbr-msg-item-right{
    float: right;
    padding: 0 3px;
    border-radius: 2px;
    max-width: 90%;
    word-break: break-word;
    color: #ffffff;
    background-color: #02959f;
}
.tbr-msg-item-notice{
    text-align: center;
    color: #bf9244;
    font-size: 12px;
    font-weight: bold;
}
::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #cfcfcf;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #a7a7a7;
}
#table-history{
    z-index: 10;
    font-size: 14px;
    position: absolute;
    display: grid;  
    grid-template-columns: repeat(15, 1fr); /* 创建15列，每列等宽 */  
    grid-template-rows: repeat(15, 1fr); /* 创建15行，每行等高 */  
    width: 480px;
    height: 480px;
    pointer-events: none;
}
.history-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
}
#replay-custom{
    box-sizing: border-box;
    width: 100%;
    border-radius: 5px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    user-select: none;
    background-color: #eeeeee;
    box-shadow: inset 1px 1px 2px silver;
}

#replay-custom>div{
    display: flex;
}
.icon-bt{
    display: inline-flex;
}
.icon-bt:hover{
    filter: brightness(95%);
}
.icon-bt:active{
    filter: brightness(85%);
}

#replay-custom>div:first-child>span{
    margin: 0 3px;
}
#replay-custom>div:last-child{
    margin-top: 8px;
}
#replay-custom>div:last-child>span{
    font-size: 14px;
    margin: 0 4px;
}
.icon-n-bt{
    display: inline-block;
    padding: 0 2px;
    border-radius: 5px;
    background-color: rgb(199, 199, 199);
    box-shadow: 1px 1px 1px #8b8b8b;
}
.icon-n-bt:hover{
    background-color: rgb(185, 185, 185);
}
.icon-n-bt:active{
    background-color: rgb(175, 175, 175);
    box-shadow: none;
}

.icon-checkbox{
    display: inline-flex;
    align-items: center;
}

.icon-s-wrap{
    box-sizing: border-box;
    display: inline-flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
}
.icon-s-wrap:hover{
    background-color: rgb(213, 213, 213);
}
.icon-black-st{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(top, #777, #000);
    box-shadow: 1px 1px 1px gray;
}
.icon-white-st{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(top, #FFF, #a4a4a4);
    box-shadow: 1px 1px 1px gray;
}
.cs_curser {
    cursor: pointer;
}
.cs_curser:hover{
    color: #515151;
}