/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.btn-stock-in {
	border-radius: 30px;
	border-width: 1px;
	border-color: black;
	background-color: #B89B6C;
	color: white;
}

.btn-stock-out{
	border-radius:30px;
	border-width:1px;
	border-color:black;
	background-color:gray;
	color:white;
}

.datepicker td.active.active {
	background-color: #B89B6C !important;
	border-color: #B89B6C !important;
}

.datepicker table tr td.today {
	color: #000;
	background-color: #F5F2EB !important;
	border-color: #F5F2EB !important;
}

.btn-tradeAccount {
	border-radius: 50%;
	padding: 0.2rem 0.6rem;
	font-size: 1.5rem;
	margin: 0.2rem 0.2rem;
}

.alert-caculator {
	background: rgb(222,210,188);
	background: linear-gradient(360deg, rgba(247,242,230,1) 0%, rgba(255,255,255,1) 39%);
}

.alert-won {
	border-radius: 40px;
	font-size: 1rem;
	color: white;
	margin: 0px;
	padding: 0.1rem 1.5rem 0rem 0.1rem;
}

.lightBack {
	background: url('../../images/Back_Light.svg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.lightLightBack {
	background: url('../../images/Back_LightLight.svg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.wonBtnShadow {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.2) 0px 5px 5px;
}

.btn-circle{
	border-radius:50%;
}

.btn-black-main {
	letter-spacing: 0.2rem !important;
	font-size: 1.3rem !important;
	background-color: #393939;
	color: white;
}

.btn-white-main {
	letter-spacing: 0.2rem !important;
	font-size: 1.3rem !important;
	background-color: white;
	color: black;
}

.btn-primary-main {
	letter-spacing: 0.2rem !important;
	font-size: 1.3rem !important;
	background-color: #B89B6C;
	color: white;
}

.avatar {
	border-radius: 50%;
	border: 3px solid #B89B6C;
	width: 45px;
	height: 45px;
}

.avatar-alert {
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin-right:10px;
}


.goldMember-plan-active {
	box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
}

.goldMember-plan:hover {
	box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
	cursor:pointer;
}

.inOutFixedBtnPosition {
	position: fixed;
	right: 0px;
	top: 45%;
	z-index: 9;
}

@media (min-width: 576px) {
	.inOutFixedBtnPosition-sm {
		position: fixed;
		right: 0px;
		top: 40%;
		z-index: 9;
	}
}

@media (min-width: 768px) {
	.inOutFixedBtnPosition-md {
		position: fixed;
		right: 0px;
		top: 20%;
		z-index: 9;
	}
}

.donateBtnPosition {
	position: fixed;
	top: 50%;
	z-index: 9;
}

@media (min-width: 576px) {
	.donateBtnPosition-sm {
		position: fixed;
		top: 45%;
		z-index: 9;
	}
}

@media (min-width: 768px) {
	.donateBtnPosition-md {
		position: fixed;
		top: 25%;
		z-index: 9;
	}
}

.caculateBtn {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	background-color: rgba(184, 155, 108, 0.8);
}

.caculateBtn:hover {
	box-shadow: -1px -1px 20px 5px rgba(0,0,0,0.2);
}

.inOutFixedBtn {
	border-width: 2px;
	border-color: transparent;
	padding: 10px;
	color: white;
	font-size: 1.3rem;
}


.inFixedBtn {
	border-top-left-radius: 30px;
	background-color: rgba(184, 155, 108, 0.8);
}

.inFixedBtn:hover {
	box-shadow: -1px -1px 20px 5px rgba(0,0,0,0.2);
}

.outFixedBtn {
	border-bottom-left-radius: 30px;
	background-color: rgba(89, 89, 89, 0.8);
}

.outFixedBtn:hover {
	box-shadow: -1px 5px 20px 5px rgba(0,0,0,0.2);
}


.cardBottomMouth {
	position: absolute;
	bottom: -25px;
	right:10px;
	width: 7rem; /* Need a specific value to work */
}

@media (max-width: 800px) { /*"xxx" the width of window*/
	.wordCloudImg {
		width: 100% !important;
	}
}

.tooltip-highlighted {
	padding: 0 5px !important;
	background-color: #f0f3bd !important;
	cursor: pointer !important;
}

.tooltip-inner {
	width: auto;
	max-width: 350px;
	padding: 8px;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
	box-shadow: none !important;
}

.datepicker {
	z-index: 99999 !important;
}

.datepicker td, th {
	text-align: center;
	padding: 8px 12px;
	font-size: 14px;
}

.myScroll {
	max-height: 600px;
	overflow: auto;
}

.myScroll::-webkit-scrollbar {
	width: 10px;
}

.myScroll::-webkit-scrollbar-track {
	background: #F5F2EB;
}

.myScroll::-webkit-scrollbar-thumb {
	background-color: lightgray;
}

.myScroll::-webkit-scrollbar-thumb:hover {
	background-color: darkgray;
}

/* 修復日K Modal新聞關鍵字抖動問題：預留滾動條空間 */
#StockCandleModal #news {
	scrollbar-gutter: stable;
	/* 確保文字換行穩定 */
	word-wrap: break-word;
	overflow-wrap: break-word;
	/* 確保容器高度固定，避免抖動 */
	box-sizing: border-box;
}

/* 如果瀏覽器不支援 scrollbar-gutter，使用 padding-right 作為後備方案 */
@supports not (scrollbar-gutter: stable) {
	#StockCandleModal #news {
		/* 預留滾動條空間，避免滾動條出現時造成寬度變化 */
		padding-right: 17px;
	}
}

.googleIcon {
	filter: brightness(1.2) saturate(0%);
	width: 20px;
}

.anueIcon {
	filter: brightness(1.0) saturate(0%);
	width: 20px;
}

.tvIcon {
	filter: brightness(0.5) invert(0.9);
	width: 20px;
}

.wgIcon {
	filter: brightness(0.5) invert(0.5);
	width: 35px;
}

@media (max-width: 767.98px) {
	.stock-mobile-wrapper .container,
	.stock-mobile-wrapper .container.clearfix {
		padding: 10px !important;
	}

	.stock-mobile-wrapper .content-wrap .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
	}

	.stock-mobile-card-list .card {
		margin-left: -10px !important;
		margin-right: -10px !important;
		border-radius: 0 !important;
	}

	.stock-mobile-card-list .card-body {
		padding: 6px !important;
	}

	.stock-mobile-card-list .card-body > * + * {
		margin-top: .5rem !important;
	}

	.stock-mobile-card-list .card-body .row {
		margin-bottom: .5rem !important;
	}

	.stock-mobile-card-list .row {
		--bs-gutter-x: 0;
	}

	.stock-mobile-card-list .row > [class*='col-'] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.stock-mobile-card-list .row .col-4 {
		flex: 0 0 auto;
		width: 50% !important;
	}

	/* StockCandle Modal 手機版滾動修復 */
	#StockCandleModal.modal-fullscreen .modal-content {
		display: flex !important;
		flex-direction: column !important;
		height: 100vh !important;
		max-height: 100vh !important;
		overflow: hidden !important;
	}

	#StockCandleModal.modal-fullscreen .modal-header {
		flex-shrink: 0 !important;
	}

	#StockCandleModal.modal-fullscreen .modal-body {
		overflow-y: auto !important;
		overflow-x: hidden !important;
		touch-action: pan-y !important;
		-webkit-overflow-scrolling: touch !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
		position: relative !important;
	}

	/* 確保圖表容器不會阻止滾動 */
	#StockCandleModal #stockCandleChartDiv {
		touch-action: pan-x pan-y !important;
		-webkit-overflow-scrolling: touch !important;
		position: relative !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
	}

	/* 確保圖表 canvas 不會阻止父容器的滾動 */
	#StockCandleModal #stockCandleChartDiv canvas {
		touch-action: pan-x pan-y !important;
		pointer-events: auto !important;
	}
}