@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@900&display=swap');

body {
	font-family: "Noto Sans TC", Arial, sans-serif, ZK85Icons, FontAwesome;
	padding: 0px;
	background-color: black;
	user-select:none;
	
	background: url('/img/PCBG.png');
	background-size: cover;
}

body *:not([class*="z-icon-"]) {
	font-family: "Noto Sans TC", Arial, sans-serif, ZK85Icons, FontAwesome;
	user-select:none;
}

.z-page {
	max-width: 450px;
	margin: auto;
}
/*����div*/
.vertical-div {
    display: flex;
    flex-direction: column;
}
/*����div*/
.horizontal-div {
	display: flex;
	flex-direction: row;
}
/*�u�ʱ�css*/
::-webkit-scrollbar {
	display: none;
}

input::placeholder {
	color: #ffe0a0 !important;
	font-size: 14px;
}

.z-textbox::placeholder {
	color: #ffe0a0 !important;
	font-size: 14px;
}

.z-textbox, .z-textbox:focus, .z-textbox:hover {
	background: #ffffff00;
	border-width: 0px 0px 2px 0px;
	border-color: #a8a8a8;
	border-radius: 0px;
	color: white;
}

.z-popup-content {
	display: flex;
	align-items: center;
}

.z-loading-indicator {
	display: none !important;
}

.btn-grad {
	background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD 51%, #4CB8C4 100%)
}

.btn-grad {
	margin: 10px;
	padding: 15px 45px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;
	box-shadow: 0 0 20px #eee;
	border-radius: 10px;
	display: block;
}

.z-button:focus {
	border: 0px;
}

.btn-grad:hover {
	background-position: right center;
	/* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}

.btn {
	font-size: 16px;
	padding: 3px 12px;
}

.btn-icon {
	font-size: 16px;
	padding: 0px 0px;
}

.btn-primary {
	/* 	color: white; */
	/* 	background: #929ee5; */
	background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD 51%, #4CB8C4 100%);
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;
	box-shadow: 0 0 20px #eee;
	border-radius: 10px;
	display: block;
}

.header {
	height: 70px;
	/* 	padding: 6px 10px; */
	/* 	border-width: 0px 0px 1px 0px; */
	/* 	border-color: black; */
	/* 	border-style: solid; */
	/* 	box-shadow: 0 4px 6px 0 #d9d9d9; */
}

.lobby-container {
	width: 100%;
	display: flex;
	/* 	grid-template-columns: repeat(10, 1fr); */
	/* 	grid-template-rows: repeat(2, 1fr); */
	grid-gap: 1rem;
	/* 	justify-items: center; */
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.popup-coverpage {
	width: 100%;
	height: 100%;
}

.z-popup-content {
	background: #212325bb;
	margin: auto;
	border: 0px;
	border-radius: 0px;
	max-width: 450px;
}

.popup-div {
	padding: 1rem;
	border: 2px solid #ffe0a0;
	border-radius: 16px;
	background-color: #1f150b;
	max-height: 100%;
	overflow: auto;
}

.tabRadio>.z-radio>input[type="radio"] {
	display: none;
}

.tabRadio>.z-radio-on {
	width: 55px;
	height: 55px;
	border: 2.5px solid white;
	border-radius: 50%;
}

.broadcast-label {
	color: white;
	font-weight: bolder;
}

.home-choosegame-image {
	width: 100%;
}

.home-background {
	background: url('/img/home/BG.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.header-background {
	background: url('/img/header/BG.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.btn-disabled {
	background: -internal-light-dark(rgba(239, 239, 239, 0.3),
		rgba(19, 1, 1, 0.3));
	border: 0px;
	border-radius: 1rem;
	padding: 0.25rem 1rem;
	color: #2d200c;
	font-weight: bolder;
	font-size: 12px;
	box-shadow: 0px 2px #111111;
}

.btn-google-login {
	background: white;
	border: rgb(212, 212, 212) 1px solid;
	border-radius: 8px;
	padding: 10px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px;
	font-weight: bold;
	letter-spacing: 1px;
	color: black;
}

.btn-google-login:hover {
	background: #ebebeb;
}

.btn-facebook-login {
	cursor: pointer;
	background: #2A5297;
	color: rgb(255, 255, 255);
	border-radius: 8px;
	padding: 10px;
	border: none;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px;
	font-weight: bold;
	letter-spacing: 1px;
}

.btn-facebook-login:hover {
	background: #102b58;
}

.btn-line-login {
	cursor: pointer;
	background: #00B900;
	color: rgb(255, 255, 255);
	border-radius: 8px;
	padding: 10px;
	border: none;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px;
	font-weight: bold;
	letter-spacing: 1px;
}
.btn-line-login:hover {
	background: #009700;
}

.btn-yellow {
	background: linear-gradient(to top, #e9b54c 0%, #fde6b2 92%, #fef4df 97%);
	border: 0px;
	border-radius: 1rem;
	padding: 0.25rem 1rem;
	color: #2d200c;
	font-weight: bolder;
	font-size: 12px;
	box-shadow: 0px 2px #111111;
}

.btn-yellow:hover {
	background:linear-gradient(to top, #A88237 0%, #B7A680 92%, #B7B0A1 97%);
	color:#000000;
}

.btn-red {
	background: linear-gradient(to top, #381f1d 0%, #2c1312 16%, #512920 51%, #ab7767
		100%);
	border: 0px;
	border-radius: 1rem;
	padding: 0.25rem 1rem;
	color: wheat;
	font-weight: bolder;
	font-size: 12px;
	box-shadow: 0px 2px #111111;
}

.btn-green {
	background: linear-gradient(to top, #2b2c1a 0%, #212511 16%, #2f3418 51%, #828950
		100%);
	border: 0px;
	border-radius: 1rem;
	padding: 0.25rem 1rem;
	color: wheat;
	font-weight: bolder;
	font-size: 12px;
	box-shadow: 0px 2px #111111;
}

.avatar {
	width: 100%;
	height: 100%;
	border: 1px solid #f8c488;
	border-radius: 8px;
}

.avatar-border {
	border: 2px solid #c29c6d;
	border-radius: 10px;
}
/*radio button*/
.z-radio {
	color: white;
}
input[type="radio"] {
    margin: 0 4px 2px 8px;
    background: #FFFFFF00;
    border: 1px solid #FFFFFF;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}
input[type="radio"]:checked {
    border-color: #FFFFFF;
}
input[type="radio"]:checked:before {
    background-color: #f8c488;
}

/*��ƪ��*/
.data-table .z-column-content {
	padding: 3px 5px;
}

.data-table .z-grid-body .z-cell {
	padding: 3px 5px;
	line-height: 0px;
}

.data-table .z-cell .z-label {
	font-size: 16px;
}

.data-table {
	border: 0px;
}

.data-table .z-column {
	background: #191415;
	border-left: 1px solid #171213;
	border-bottom: 1px solid #171213;
}

.data-table-oddrow {
	background: #191415 !important;
}

.data-table .z-row {
	background: #2b2627;
}

.data-table .z-row .z-cell {
	border-top: 0px;
}

.data-table .z-cell {
	color: white;
	background: #00000000;
	border-left: 1px solid #171213;
	border-bottom: 1px solid #171213;
}

.data-table .z-row:hover>.z-cell {
	background: inherit;
}

/*����*/
.z-grid-paging-top, .z-paging, .paging {
	background: #000000;
}

.z-paging .z-paging-text, .paging .z-paging-text {
	color: white;
}

.z-paging .z-paging-input, .paging .z-paging-input {
	color: white;
	background: #00000000;
	font-size: 15px;
	text-align: center;
}

.z-paging .z-paging-icon, .paging .z-paging-icon {
	color: wheat;
}
.z-paging-button:hover {
	background-color: #423833;
}

/*�Ϥ����s*/
.btnImage {
	cursor: pointer;
}

/*��ܹϤ������s*/
.imageButton, .imageButton:active, .imageButton:hover, .imageButton:focus {
	all: unset;
	flex: 0 0 auto;
	cursor: pointer;
}
.imageButton > .z-button-image {
	width: 100%;
}

/*��grid*/
.z-grid-body .z-grid-emptybody .z-grid-emptybody-content {
	background: #191415;
	color: white;
}
/*�m���Ʀr�˦�*/
.pot-number-style {
	font-size: 24px;
/* 	line-height: 24px; */
	background: linear-gradient(to top, #a55b08 0, #f2ce67 41%, #feedaf 75%, #f6d04c
		100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	font-family: fantasy, sans-serif !important;
}
/*�w�����˦�*/
.hint-word-style {
	font-size: 16px;
	font-weight: 700;
	color:palegoldenrod;
	text-shadow: black 0px 0px 10px;
}
.error-word-style {
	font-size: 18px;
	font-weight: 700;
	color:orangered;
	text-shadow: black 0px 0px 10px;
}
/*�m�����D�˦�*/
.pot-title-style {
	font-size: 20px;
	line-height: 20px;
	background: linear-gradient(to top, #cacaca 0, #b8b8b8 41%, #fbfbfb 75%, #ffffff
		100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
	font-family: fantasy, sans-serif !important;
}
.ofd-gameend-number-style {
	font-size: 24px;
	line-height: 24px;
	background: linear-gradient(to top, #7f7dcf 0, #b783db 41%, #feedaf 75%, #f6d04c 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	font-family: fantasy, sans-serif !important;
}
/*br �˦�*/
.br-style {
	height: 2px;
	content: '';
	display: block;
	background: #40362a;
}
/*���j�u*/
.separator-line {
	width: 100%;
	height: 2px;
	border: 1px solid #40362a;
}

/*�]���O*/
@keyframes scroll {
	from {transform: translateX(100%)
	}

	to {
		transform: translateX(-100%)
	}
}
.broadcast-label {
/* 	animation: scroll 20s linear infinite; */
	width: fit-content;
	white-space: nowrap;
}

.label-title {
	color: #ffe0a0;
	font-weight: 700;
}

.label-content {
	color: white;
}

.label-date {
	color: #ffe0a0;
}

.label-nickname {
	color: #ffe0a0;
}

.hbox-row {
	padding: 6px 3px;
}
/*select-box ��ܮ�*/
.select-mode {
/* 	width: 80px; */
	height: 2.5rem;
	min-width: min-content;
	max-width: max-content;
	color: white;
	background-color: #231b13;
	border-width: 2px;
	border-color: #0c0808;
	border-radius: 8px;
}
/* textbox */
.z-textbox, .z-textbox-hover, .z-intbox, .z-intbox-hover {
	color: #dddddd;
	border: 1px solid #ffffff;
	border-radius: 8px;
	background: linear-gradient(to bottom, #000000C1, #00000066, transparent);
}
/* datebox */
.z-datebox-input, .z-datebox-input[readonly], .z-datebox-button, .z-datebox-readonly {
	color: white;
	background-color: #231b13;
	border-width: 2px;
	border-color: #0c0808;
	border-radius: 8px;
}

.diamond-label {
	color: #ffe0a0;
	font-weight: 800;
}

.price-button {
	background: url('/img/recharge/button.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	font-size: 16px;
	color: #e8c66d;
	font-weight: 700;
	padding: 3px;
	border-width: 0px;
	margin: 3px 0px;
}

.label-room-number {
	font-family: sans-serif !important;
	font-size: 25px;
	font-weight: 900;
	background: linear-gradient(to bottom, #f5f2e4 35%, #F7D953 45%, #895409 70%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 2px;
}

.label-room-number-stroke {
	position: absolute;
	top: 0;
	left: 2px;
	color: rgba(0, 0, 0, 0);
	font-family: sans-serif !important;
	font-size: 25px;
	font-weight: 900;
	text-shadow: -2px 1px 3px black;
	z-index: -1;
}

.gray {
	filter: grayscale(1);
}

/*Toast style*/
.z-toast-info .z-toast-icon {
	display: none;
}

.z-toast-info .z-toast-content {
	background: rgba(25, 25, 25, 0.84);
	border: 1px solid #ffe0a0;
	color: #ffffff;
	padding: 16px 42px;
}

.z-toast-info .z-toast-content::before {
	display: none;
}

.z-toast-info .z-toast-close>.z-toast-icon {
	color: white;
	display: unset !important;
}

.dice-svg {
	height: 90%;
}


/*��L�C���ʵe*/
/* �ʵe1��x�b�ʵe(�w�X�Ϥ�)�Ax�By�b���}�g�[�bcontainer&img�W�~�|���꩷�y�� */
.animation1-X {
    animation:
        chip-xAxis 2s cubic-bezier(.58, -0.02, .33, 1.01);
}

@keyframes chip-xAxis {
    0% {transform: translateX(0px);}
    5% {transform: translateX(0px); opacity: 1;}
    10% {transform: translateX(0px);}
    20% {transform: translateX(0px); opacity: 1;}
    80% { opacity: 0.6;}
    100% {opacity: 0; transform: translateX(-162px);}
}

/* �ʵe1��y�b�ʵe */
.animation1-Y {
    animation:
        chip-yAxis 2s cubic-bezier(.45, .19, .39, .96);
}

@keyframes chip-yAxis {
	0% {opacity: 0;}
	10% {transform: translateY(40px); opacity: 1;}
	20% {transform: translateY(40px); opacity: 1;}
	80% {opacity: 0.6;}
	100% {transform: translateY(-130px);}
}

/* �ʵe2(+100k) */
.animation2{
    animation:gain-num 2s ease-in;
}

@keyframes gain-num{
    0% {opacity: 0;}
    10% {transform: translateY(40px); opacity: 1;}
    80% {opacity: 0.6;}
    100% {transform: translateY(-100px);}
}