body{
    font-family: '微軟正黑體';
    /* font-size: 14px; */
    font-size: small;
    padding:0;
    margin:0;
}

.selectarea_s{
    width:calc(100% - 40px) !important;
    box-shadow: #ccc 0px 0px 2px;
    border-radius: 20px;
    margin:15px !important;
    background-color: white;
}

.livemessage{
    width:100%;
    padding:15px 0px;
    font-size: 20px;
    font-weight: 900;
    background-color: #E5F2FB;
    color:#185E99;
    text-align: center;
    /* height:fit-content; */
}

.daterowarea{
    width:100%;
    overflow-x: auto;
    /* font-size: 12px; */
    /* font-size: medium; */
    text-align: center;
    height:auto;
    align-items: center;
}

.daterow{
    width:fit-content;
    display: flex;
    padding:5px;
    margin:auto;
    box-sizing: border-box;
}

.dateitem{
    padding:10px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #ccc;
    /* margin:5px 0px; */
    text-align: center;
    /* font-size: 14px; */
    /* font-size: medium; */
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

.dateitem:hover{
    background-color: #FFFCEB;
    cursor: pointer;
}

.dateitem:active{
    background-color: #fff2b2;
    cursor: pointer;
}

.dateselect{
    background-color: #fff2b2;
}

.venues{
    width:calc(100% - 40px);
    padding:5px 10px;
    display: flex;
    flex-wrap: nowrap;
    background-color: white;
    box-shadow: #ccc 0px 0px 2px;
    border-radius: 5px;
    margin: 10px;
}

.venues .venuesname{
    flex-grow: 1;
    font-size: 16px;
    color:#000;
    font-weight: 900;
    text-align: left;
    padding-top:3px;
}

.venues .venuesbtn{
    font-size: 14px;
    width:20px;
    height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border:2px solid #aaa;
    color:#aaa;
    font-weight: 900;
    transform:rotate(180deg);
}

.venues .venuesbtn:hover{
    cursor:pointer;
}

.venues .close{
    transform:rotate(0deg);
}

.tablearea{
    width:100%;
    overflow-x: auto;
    overflow-y: auto;
    font-size: medium;
    height:calc(100vh - 285px);
}

.table{
    /* font-size: 16px; */
    /* font-size: medium; */
    display: table;
    width: calc(100% - 40px);
    background-color: #F5F5F5;
    margin:auto;
    font-size: medium;
}

.table .tr .td:nth-child(1){
    min-width: 60px;
}

.table .tr .td:nth-child(6){
    min-width: 50px;
}

.table .tr .td:nth-child(8){
    width: 160px;
}

.tr{
    display: table-row;
}

.matchesarea{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item:hover{
    /* background-color: #FFFCEB !important; */
    cursor:default;
}

.item:nth-child(even){
    background-color: white;
}

.td, .th{
    display: table-cell;
    text-align: center;
    padding: 8px 10px;
    vertical-align: middle;
}

.th{
    background-color: #185E99;
    color:#fff;
    font-weight: 900;
    padding:10px;
}

.tcol{
    display: table-column;
    width:20%
}

.score{
    width:100px;
}
/* 
.line2{
    background-color: #fff;
} */

.nodata{
    background-color: #f3f3f3;
    text-align: center;
    /* font-size: 12px; */
    font-size: medium;
    padding:10px 0px;
    margin-top:10px;
    width:100%
}

.datespace{
    width:5px;
    flex-shrink: 0;
}

/* .drawbtn{
    width:10px;
    height:10px;
    background-color: #f5f5f5;
    box-shadow: #ccc 0px 0px 2px;
    padding:5px
}

.drawbtn:hover{
    cursor: pointer;
    background-color: #ccc;
}

.drawbtn:active{
    background-color: #aaa;
} */

.matchtype{
    padding:5px 10px;
    color:white;
    background-color: #E29746;
    font-weight: 700;
    border-radius: 5px;
    width:fit-content;
    margin:auto;
}

/* .matchescontainer{
    width:100%;
    padding:5px;
    box-sizing: border-box;
    text-align: center;
} */

.title_p{
    display: flex;
    align-items: center;
    padding: 0px;
    flex-wrap: wrap;
    background-color: #185E99;
    border-radius: 4px;
    color:white;
}

.itemname_p{
    flex-grow: 1;
    text-align: left;
}

.type_p{
    background-color: #E79033;
    color:white;
    font-weight: 900;
    padding:5px 10px;
    border-radius: 5px;
    margin:5px;
    /* font-size: medium; */
}

.item2_p{
    /* display: flex; */
    width:calc(100% - 30px);
    /* align-items: center; */
    background-color: #F2F3F2;
    border-radius: 4px;
    padding:10px;
    /* max-width: 460px; */
    min-width: 200px;
    /* margin:5px; */
    box-sizing: border-box;
    margin:5px 0px;
    font-size: medium;
}

.datetime_p{
    padding-right:3px;
    text-align: center;
    /* width:20%; */
    /* min-width: 50px; */
}

.datetime_p p{
    margin:4px;
}

.date_p{
    margin-right: 6px;
    margin-left: 5px;
}

.time_p{
    margin-right: 6px;
}

.info_p .team_p:first-child{
    margin: 2px 0px;
}

.team_p{
    display: flex;
    text-align: left;
    background-color: #fff;
    border-radius: 4px;
    /* border: 2px solid #ddd; */
    padding:5px;
}

.teaminfo_p{
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}

.name_p{
    padding:0px 3px;
    display: flex;
    align-items: center;
    font-weight: 700;
}

.score1_p{
    width:40px;
    /* height:40px; */
    padding:3px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    font-weight: 700;
}

.win{
    /* background-color: #FFEB85 !important; */
    /* border: 2px solid #FFE45C !important; */
    background-color: #E5F2FB;
    font-weight: 900 !important;
}

.btnarea{
    display: flex;
    align-items: center;
    /* margin-top:5px; */
    width:fit-content;
}

.btnarea .btn{
    flex-shrink: 0;
}

.btn{
    padding:5px 10px;
    border-radius: 50px;
    border: 2px solid #185E99;
    font-weight: 700;
    margin:5px;
    color:#185E99;
}

.btn:hover{
    background-color: #185E99;
    color:white;
    cursor:pointer;
}

.win_p{
    /* font-weight: 900; */
    background-color: #E5F2FB;
}

.btnarea_p{
    display: flex;
    width: 100%;
    align-items: center;
    margin-top:5px;
}

.btn_p{
    flex:1;
    border-radius: 50px;
    padding:5px;
    color: #185E99;
    border: 1px solid #185E99;
    margin:5px;
    font-weight: 700;
}

.btn_p:hover{
    background-color: #185E99;
    color:white;
    cursor: pointer;
}

.btn_p .focus{
    background-color: #185E99;
    color:white;
}

.detailinfo_p{
    padding:0px 5px;
    display: none;
    /* width:fit-content; */
    /* margin:auto; */
}

.detailinfo_p.open{
    display: block;
}

.detailinfo_p p{
    font-size: small;
    font-weight: 700;
    text-align: center;
}

.turnpagebtn_p{
    width:100%;
    display: flex;
    height:50px;
    color:white;
    font-size: medium;
    font-weight: 700;
    background-color: #185E99;
    position:fixed;
    bottom:0;
    justify-content: center;
    align-items: center;
    z-index: 900;
}

.detailnote_p{
    width:calc(100% - 30px);
    padding:15px;
    background-color: #fff;
    font-size: small;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
}

@media screen and (max-width:1000px) {
    .matchesarea .table{
        width:1000px;
    }
}

@media screen and (max-width:700px) {
    .selectarea_s{
        width:clamp(400px,90%,800px);
        box-shadow: #ccc 0px 0px 2px;
        border-radius: 20px;
        position:relative;
        top:-20px;
        background-color: white;
    }
}

@media screen and (max-width:500px) {
    .selectarea_s{
        width:100%;
        box-shadow: none !important;
        border-radius: 0px !important;
        position:relative;
        top:0px;
        background-color: white;
    }

    .table{
        font-size: medium;
    }
}

.detailarea{
    z-index: 999;
    position:absolute;
    top:0;
    left:0;
    position: fixed;
    width:calc(100vw - 0px);
    height:calc(100vh - 0px);
    /* display: flex; */
    display:none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:0px;
    margin:0px;
    background-color: #f6f6f6;
    backdrop-filter: blur(5px); 
    background: rgba(200, 200, 200, 0.5);
}

.detailcontainer{
    background-color: #fff;
    height:clamp(300px,fit-content,calc(100% - 40px));
    width:clamp(300px,70%,700px);
    padding:10px;
    max-width:500px;
    min-width:300px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detailcontainer .table{
    background-color: #E5F2FB !important;
    width:calc(100% - 10px) !important;
}

.detailcontainer .tr:nth-child(even){
    background-color: #fff !important;
}

.detailcontainer .tr .td:nth-child(1){
    max-width:20px !important;
    min-width: 20px !important;
}

.dialogtitle{
    width:calc(100% - 10px);
    display: flex;
    padding:5px 0px;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin: 0px 20px 10px 20px;
}

.dialogclosearea .titletxt{
    flex-grow: 1;
    font-size: medium;
    font-weight: 700;
}

.dialogtitle .titletxt{
    flex-grow: 1;
    font-size: medium;
    font-weight: 700;
}

.detailcontainer .matchtype{
    font-size: medium !important;
    letter-spacing: 1px;
    padding:5px 10px;
}

.dialogclosearea{
    width:calc(100% - 20px);
    /* padding:5px 0px; */
    margin: 5px 15px 5px 5px;
    display: flex;
    justify-content: right;
}

.dialogclosearea img{
    width:15px;
    height:15px;
    object-fit: contain;
}

.dialogclosearea img:hover{
    cursor: pointer;
}

.detailnote{
    width:calc(100% - 30px) !important;
    margin:10px;
    padding:10px;
    background-color: #f5f5f5;
    font-size: calc(medium - 2px);
    font-weight: 700;
    text-align: left;
    border-radius: 4px;
}

.loadingpage {
    z-index: 999;
	width: 100vw;
	height: 100vh;
	position: absolute;
    top:0;
    left:0;
	backdrop-filter: blur(5px);
	background: rgba(230, 230, 230, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes loadingarea {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
.loadingarea div {
	box-sizing: border-box !important;
}
.loadingarea > div {
	position: absolute;
	width: 134px;
	height: 134px;
	top: 33px;
	left: 33px;
	border-radius: 50%;
	border: 6px solid #000;
	border-color: #72b3e9 transparent #72b3e9 transparent;
	animation: loadingarea 1s linear infinite;
}

.loadingarea > div:nth-child(1) {
	/* border-color: transparent; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.loadingarea > div:nth-child(2) {
	border-color: transparent;
}
.loadingarea > div:nth-child(2) div {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: rotate(45deg);
}
.loadingarea > div:nth-child(2) div:before,
.loadingarea > div:nth-child(2) div:after {
	content: "";
	display: block;
	position: absolute;
	width: 6px;
	height: 6px;
	top: -6px;
	left: 58px;
	background: #72b3e9;
	border-radius: 50%;
	box-shadow: 0 128px 0 0 #72b3e9;
}
.loadingarea > div:nth-child(2) div:after {
	left: -6px;
	top: 58px;
	box-shadow: 128px 0 0 0 #72b3e9;
}
.loadingcontainer {
	width: 200px;
	height: 200px;
	display: inline-block;
	position: relative;
	overflow: hidden;
}
.loadingarea {
	width: 100%;
	height: 100%;
	position: absolute;
	transform: translateZ(0) scale(1);
	backface-visibility: hidden;
	transform-origin: 0 0; /* see note above */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.loadingarea div {
	box-sizing: content-box;
}
/* [ldio] generated by https://loading.io */

.loadimg {
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	opacity: 0.9;
}