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

.selectarea_s {
	width: clamp(400px, 70%, 800px);
	box-shadow: #ccc 0px 0px 2px;
	border-radius: 20px;
	position: relative;
	top: -20px;
	background-color: white;
}

.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 - 280px);
}

.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: 50px;
}

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

.table .tr .td:nth-child(8) {
	min-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;
	color: white;
	background-color: #e29746;
	font-weight: 700;
	border-radius: 5px;
}

/* .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;
	min-height: 30px;
}

.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: left;
	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: 0px 15px;
	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;
}