.ball-r {
    background-color: #F00;
    color: #FFF;
}
.ball-g {
    background-color: #1FC26B;
    color: #FFF;
}
.ball-r {
    background-color: #0094E7;
    color: #FFF;
}
.game {
    margin-top: 15px;
    border-radius: 20px;
    background-color: #FFF;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.game-current {
    flex: 1;
    border-right: 1px solid #E5E5E5;
}
.game-next {
    width:400px;
    margin-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.game-video {
    width:200px;
}
.game-info {
    padding-right: 20px;

}
.game-name {
    color: #333;
}
.game-no {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
}
.game-number {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.game-number-empty {
    display: none;
    justify-content: space-between;
    align-items: start; 
}
.game-number-item {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}
.game-ball {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    color: #FFF;
    font-size: 22px;
    text-align: center;
    align-content: center;
    background-color: #aaa;
}
.game-ball-sx {
    margin-top: 10px;
    color: #6c6c6c;
    height: 22px;
}
.game-ball-plus {
    width: 20px;
    height: 40px;
    background-image: url("../image/plus.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.game-wait {
    display: none;
    padding: 8px 20px;
    text-align: center;
    font-size: 24px;
    color: #FFF;
    background-color: #68b0db;
    letter-spacing: 5px;
}

.ball-r {
    color: #FFF;
    background-color: #F8203B;
}
.ball-b {
    color: #FFF;
    background-color: #0095EB;
}
.ball-g {
    color: #FFF;
    background-color: #1FC26B;
}
.game-next {
    border-right: 1px solid #E5E5E5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.game-next-no {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
}
.game-next-time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.kithe-time {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #20B0CD;
    text-align: center;
    align-content: center;
    margin: 0 5px;
    font-size: 16px;
}

.game-list {
    margin-top: 15px;
    background-color: #FFF;
    border-radius: 5px;
}
.input-group {
    display: flex;
    justify-content: start;
    align-items: center;

}
.input-text{
    border: 1px solid #ccc;
    padding: 3px 10px;
}
.input-datetime {
    width: 120px;
    padding-right: 30px;
    background-image: url("../image/datetime.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px 16px;
}

.game-video  img {
    width: 100%;
}

.list-search {
    padding: 15px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DEDEDE;
}
.game-history {
    padding: 15px;
}
.game-table {
    width: 100%;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-collapse: collapse;
    border-spacing: 0;
}
.game-table > thead {
    background-color: #E1D6FF;
}
.game-table > thead > tr > th {
    padding: 10px 5px;
    font-weight: normal;
    font-size: 16px;
    color: #333;
}
.game-table > thead > tr > th,
.game-table > tbody > tr > td {
    text-align: center;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}
.game-table > tbody > tr > td {
    padding: 10px 5px;
    font-size: 15px;
}
.game-table > tbody > tr:nth-child(even) {
    background-color: #f0f0f0;
    font-size: 12px;
    color: #333;
}
.game-table > tbody > tr:hover {
    background-color: #B5D8FF !important;
}
.show-tab {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ball-list {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 5px;
    padding: 5px 0;
}
.ball-list > .ball-list-item {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}

.ball-list > .ball-list-item > .game-ball {
    width: 36px;
    height: 36px;
    text-align: center;
    align-content: center;
    font-size: 18px;
}
.ball-list > .ball-list-item > .game-ball-plus {
    background-size: 20px 20px;
}
.ball-list > .ball-list-item > .game-ball-sx{
    margin-top: 5px;
    font-size: 15px;
    color: gray;
}
.show-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.show-tab > span {
    display: inline-block;
    background-color: #B9B9B9;
    color: #FFF;
    padding: 3px 10px;
    border-radius: 3px;
}
.show-tab > span.active {
    background-color: #000;
}
.load-more {
    padding: 5px 0;
    text-align: center;
}
.link-load {
    color: #999;
}
.week {
    color: #999;
    font-size: 12px;
}
.link-video {
    color: #FFF;
    display: inline-block;
    padding: 2px 5px 3px 5px;
    background-color: #0087FF;
    border-radius: 3px;
    font-size: 12px;
}