body {
	position: relative;
}

.parentz.selex {
	background-color: orange;
	color: black;
}

.btn-group-filter {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-column-gap: 5px;
}
.dt-column-order{
display:none;
}
.cancel{
	border:2px solid white;
	padding:5px;
	border-radius:10px;
	float:left;
	z-index:10;
}

.ftablinks {
	border: 1px solid var(--btn-border);
	padding: 5px;
	background-color: #aaa;
	color: black;
	cursor: pointer;
	text-align: center;
}
.specific{
	float:left;
	min-width:170px;
	margin-left:20px;
	display:none;
}

.active {
	background-color: darkGreen;
	color: white;
}
.lefti{
	cursor:pointer;
	color:gray;
	font-size:14px;
	margin-left:2px;
	float:left;
}
.righti{
	cursor:pointer;
	color:gray;
	font-size:14px;
	margin-left:10px;
	float:right;
}
.lefti:hover, .righti:hover{
	font-size:18px;
}
td{
	padding:7px 2px !important;
}
.fullModal {
	display: none;
	position: fixed;
	left: 0%;
	right: 0%;
	top: 0%;
	width: calc(100vw - 20px);
	height: 100vh;
	overflow-y: auto;
	padding: 10px;
	background-color: var(--bg);
	z-index: 10001;
}

.modalrtl {
	z-index: 10001;
}

@media only screen and (max-width:600px) {
	.fullModal {
		width: 100%;
		height: 100%;
	}
}

.parentz.sele {
	background-color: darkGreen;
	color: black;
}

#resultcolumn {
	min-height: 600px;
}

#columns, #resultcolumn {
	max-height: 80vh;
	overflow-y: auto;
}

#resultcolumn>div:not(.selex), #columns>div:not(.sele) {
	background-color: var(--bg);
	color: var(--text-main);
}

.left {
	float: left;
	font-size: 16px;
}

.green {
	color: darkGreen
}

.red {
	color: red;
}

.disablex {
	font-size: 12px;
	background-color: rgba(160, 160, 160, 0.5);
	color: black;
}

.disablex>i.left {
	display: none;
}

.bottom {
	position: fixed;
	bottom: 0;
	background-color: #999;
	z-index: 555555;
	width: 100%;
	padding-top: 20px;
}

.tablinks {
	font-family: iransansx;
}

.filtered {
	background-color: red;
}

#resize_wrapper {
	position: absolute;
	top: 10em;
}

#spinnerWrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8); /* نیمه‌شفاف */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

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

.spinnerText {
	margin-top: 24px;
	font-size: 18px;
	color: #2196f3ff;
}

.spinner {
	width: 100px;
	height: 100px;
	border: 6px solid #ccc;
	border-top-color: #2196f3;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.dot {
	opacity: 0;
	animation: blink 1.5s infinite;
	display: inline-block;
	font-family: monoscope;
}

.dot.one {
	animation-delay: 0s;
	font-size: 36px;
	color: #2196f3ff;
}

.dot.two {
	animation-delay: 0.3s;
	font-size: 36px;
	color: #2196f3ff;
}

.dot.three {
	animation-delay: 0.6s;
	font-size: 36px;
	color: #2196f3ff;
}

.dot.four {
	animation-delay: 0.9s;
	font-size: 36px;
	color: #2196f3ff;
}

.dot.five {
	animation-delay: 1.2s;
	font-size: 36px;
	color: #2196f3ff;
}

@keyframes blink {
	0% ,100% {opacity: 0;}
50%{opacity:1;}
}
.dotAnimation::after {
	content: "";
	animation: dots 1.5s steps(5, end) infinite;
	display: inline-block;
	direction: rtl;
}

@keyframes spin { 
	0% 	 { transform : rotate(0deg);}
	100% { transform : rotate( 360deg ); }
}
.btn-group-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.btnte {
	border: 1px solid gray;
	padding: 10px;
	margin: 10px;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	direction: rtl;
}

input[number], select {
	width: 100px;
	min-width: 100px;
	max-width: 100px;
}

.grix2080 {
	display: grid;
	grid-template-columns: 25% 75%;
}

.quarter {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: 5px;
	border: 1px solid;
	margin: 5px;
}

@media only screen and (max-width: 1000px) {
	.quarter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grix2080 {
		grid-template-columns: 40% 60%;
	}
}

.filtering {
	float: left;
	padding: 5px;
}

.fa-arrow-up:hover {
	background-color: darkGreen;
	color: white;
}

.fa-arrow-down:hover {
	background-color: red;
	color: white;
}

.redx {
	background-color: red;
	color: white;
}

#footer {
	position: absolute;
	display: none;
	bottom: 0;
	width: 100%;
	height: 60px;
}

::placeholder {
	font-size: 14px;
	font-family: iransansx;
	text-align: center;
}

.min::placeholder, .max::placeholder {
	font-size: 8px;
	font-weight: 450;
	text-align: center;
}

.ready {
	position: absolute;
	right: 0;
}

#itemResultParent {
	width: 200px;
	max-height: 800px;
	position: absolute;
	overflow: hidden;
	z-index: 1600;
}

.favorite {
	color: orange;
}

.icon {
	color: var(--text-main);
	margin: 0px 6px;
	font-size: 18px;
	float: left;
	cursor: pointer;
}

.icon:hover {
	font-size: 28px;
	margin: -8px 2px;
}

.removers:hover {
	color: red;
}

.savers:hover {
	color: royalBlue;
}

.editors:hover {
	color: darkGreen;
}

#itemResult {
	overflow: scroll;
}

#mwTable_wrapper>div.dt-layout-row.dt-layout-table>div>div>div.dt-scroll-head>div>table
	{
	border-bottom: none;
}

#mwTable {
	border-top: none;
}

#mwTable tbody tr.mw-filtered-out {
	display: none !important;
}

#mwTable tbody tr.mw-direct-empty td {
	padding: 18px;
	text-align: center;
}

.bid {
	background-color: rgba(0, 222, 222, 0.2);
	min-width: 100px;
}

.wide {
	min-width: 100px;
}

.ask {
	background-color: rgba(222, 122, 0, 0.2);
	min-width: 100px;
}

.btn-group-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 5px;
	padding-top: 20px;
}

.log-btn {
	cursor: pointer;
}

input.min, input.max {
	max-width: 40px;
}

#mwTable th {
	color: #fafafa;
	font-weight: normal;
	height: 15px;
}

#mwTable_info, #mwTable_wrapper>div:nth-child(3)>div.dt-layout-cell.dt-layout-start>div
	{
	padding: 5px;
	color: #fafafa;
	background-color: rgb(45,95,158);
	max-width: 360px;
	margin-top: 10px;
	float: left;
}

.mwb {
	padding: 5px;
	min-width: 30px;
}

.mwbx {
	display: inline-block;
	vertical-align: middle;
	padding: 2px 5px;
	min-width: 80px;
	margin: 10px;
	border: 1px solid var(--btn-border);
	cursor: pointer;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order,
	table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order
	{
	right: auto !important;
	left: 3px;
}

table.dataTable thead>tr>th.dt-orderable-asc, table.dataTable thead>tr>th.dt-orderable-desc
	{
	padding-right: 1px;
}

.mwbx i {
	float: left;
}

.mwbx:hover {
	background-color: orange;
}

.save {
	background-color: royalBlue;
	color: white;
	text-align: center;
	cursor: pointer;
	border: none;
}

.save.delete {
	background-color: red;
}

.save:hover {
	background-color: darkGreen;
}

.alert-success {
	color: white;
	background-color: #155724;
}

.alert-danger {
	color: white;
	background-color: rgba(255, 60, 60, 0.95);
}

#top {
	max-width: 200px;
	background-color: rgb(48,95,158);
	color: white;
	cursor: pointer;
	padding: 5px;
	margin: 5px auto;
	bottom: 5px;
	text-align: center;
}

#message {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 20000;
	display: none;
}

#banner-close {
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
}

#wltable {
	width: 100%;
	z-index: 14685;
	margin-top: 5px;
}

.parentx, .parentz {
	color: var(--text-main);
}

.parentz {
	font-size: 12px;
}

#resultcolumn>div:hover {
	background-color: orange;
}

.watch {
	border: 1px solid var(--tbl-border-watch);
	color: var(--tbl-border-watch);
	border-collapse: separate;
	margin: 3px;
	padding: 5px;
}

.colL, .colR, .colml, .colmR {
	min-width: 200px;
}

.watchx {
	border: 1px solid var(--tbl-border-watch);
	margin-bottom: 3px;
}

.watch:hover, .watchx:hover {
	background-color: royalblue;
	cursor: pointer;
	color: white;
	transition: 0.1s;
}

table.dataTable>thead>tr>th, table.dataTable>thead>tr>td {
	border: none;
}

.spann {
	border: 1px solid gray;
	padding: 8px;
	margin: 5px;
	border-radius: 3px;
}

.grn {
	background-color: darkGreen;
	color: white;
}

.grnx {
	background-color: var(--tbl-bg-watch);
	color: var(--text-negz);
}

.market>tbody>tr>td:nth-child(1), .market>thead>tr>th:nth-child(1),
	.market>thead>tr>td:nth-child(1) {
	min-width: 180px !important;
 
	border-left: 1px solid var(--tbl-border-watch);
}

th, td {
	white-space: nowrap;
}

div.dataTables_wrapper {
	width: 800px;
	margin: 0 auto;
}

.dtfc-fixed-start {
	z-index: 100;

	
}

#mwTable_filter input {
	height: 30px;
	width: 200px;
}

table.dataTable  th, table.dataTable  td {
	text-align: center !important;
	vertical-align: center !important;
	position: relative;
}

table.dataTable thead th {
	/*  background-color: royalBlue; */
	color: white;
	transition: background-color 0.3s ease, color 0.3s ease;
	white-space: normal !important;
	z-index: 1000 !important;

	/* overflow-wrap: break-word !important;*/
}

#myModal, #wlResult {
	z-index: 100001;
}

table.dataTable thead td, table.dataTable tbody th, table.dataTable tbody td:first-child
	{
	background-color: var(--bg);
}

body>div.dtfh-floatingparent.dtfh-floatingparenthead {
	z-index: 1000 !important;
}

#minparent {
	position: relative;
}

#headersparent>th.symbolx.dt-orderable-asc.dt-orderable-desc.dtfc-fixed-start.dtfc-fixed-right
	{
	z-index: 1002 !important;
}

.topnav {
	margin-bottom: 5px;
}

#mwTable_wrapper>div:nth-child(1)>div.dt-layout-cell.dt-layout-start {
	margin-right: 10px !important;
	margin-left: auto !important;
}

#mwTable_wrapper>div:nth-child(1)>div.dt-layout-cell.dt-layout-end {
	margin-left: 10px !important;
}

@media screen and (min-width:1px) {
	#mwTable_wrapper>div:nth-child(1) {
		margin: 10px 0;
		display: grid;
		grid-template-columns: 40% 60%;
	}
}

.asyncdual {
	display: grid;
	grid-template-columns: 20% 80%;
	padding: 5px 0;
}

.selectorx {
	min-width: 95%;
	padding: 0px;
	text-align: center;
}

.mwfibtn {
	min-width: 150px;
	margin: 10px;
	padding: 5px;
	text-align: center;
}

label {
	margin-top: 10px
}

.min, .max {
	min-width: 50px;
}

.min::placeholder, .max::placeholder {
	font-size: 9px;
	direction: rtl;
	color: black;
}

/* ---------------------------------------------------------------------------
   iOS/WebKit FixedColumns repaint guard shared by every watch page.

   Safari can paint a blank sticky-cell surface above the first column until a
   horizontal scroll forces a repaint. The companion script mirrors that column
   outside .dt-scroll-body, following the same workaround used on the homepage
   and group pages. The mirror is pointer-transparent, so links and row actions
   continue to be handled by the real fixed cell underneath.
   --------------------------------------------------------------------------- */
#mwTable_wrapper .dt-scroll-body,
#owTable_wrapper .dt-scroll-body {
	-webkit-overflow-scrolling: auto;
	overscroll-behavior-x: contain;
}

#mwTable_wrapper tbody td:not(.dtfc-fixed-start),
#owTable_wrapper tbody td:not(.dtfc-fixed-start) {
	z-index: 0 !important;
}

#mwTable_wrapper .dtfc-fixed-start.dtfc-fixed-right,
#owTable_wrapper .dtfc-fixed-start.dtfc-fixed-right {
	position: sticky !important;
	right: 0 !important;
	left: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	background-clip: padding-box !important;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transform: none !important;
	transform: none !important;
	transition: none !important;
	will-change: auto;
}

#mwTable_wrapper thead .dtfc-fixed-start.dtfc-fixed-right,
#owTable_wrapper thead .dtfc-fixed-start.dtfc-fixed-right {
	z-index: 230 !important;
}

#mwTable_wrapper tbody .dtfc-fixed-start.dtfc-fixed-right,
#owTable_wrapper tbody .dtfc-fixed-start.dtfc-fixed-right {
	z-index: 60 !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	mix-blend-mode: normal;
}

#mwTable_wrapper tbody .dtfc-fixed-start.dtfc-fixed-right::after,
#owTable_wrapper tbody .dtfc-fixed-start.dtfc-fixed-right::after {
	content: none !important;
	display: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

@supports (-webkit-touch-callout: none) {
	#mwTable_wrapper .dt-scroll.ios-fixed-column-host,
	#owTable_wrapper .dt-scroll.ios-fixed-column-host {
		position: relative;
	}

	#mwTable_wrapper .ios-fixed-column-overlay,
	#owTable_wrapper .ios-fixed-column-overlay {
		position: absolute;
		right: 0;
		z-index: 190;
		overflow: hidden;
		box-sizing: border-box;
		pointer-events: none;
	}

	#mwTable_wrapper .ios-fixed-column-overlay__content,
	#owTable_wrapper .ios-fixed-column-overlay__content {
		width: 100%;
		will-change: transform;
	}

	#mwTable_wrapper .ios-fixed-column-overlay__row,
	#owTable_wrapper .ios-fixed-column-overlay__row {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		padding: 4px 3px;
		border-left: 1px solid var(--tbl-border-watch);
		border-bottom: 1px solid var(--tbl-border);
		direction: rtl;
		color: var(--text-main);
		-webkit-text-fill-color: var(--text-main);
		font: inherit;
		text-align: center;
		white-space: nowrap;
	}

	#mwTable_wrapper .ios-fixed-column-overlay__row > a.symbol,
	#owTable_wrapper .ios-fixed-column-overlay__row > a.symbol {
		overflow: hidden;
		color: inherit !important;
		-webkit-text-fill-color: currentColor !important;
		text-overflow: ellipsis;
		white-space: nowrap !important;
		-webkit-transform: none !important;
		transform: none !important;
	}
}

/* Keep phone tables dense enough to show six or seven metrics beside the fixed
   symbol column on common iPhone viewport widths. */
@media only screen and (max-width: 600px) {
	#mwTable_wrapper table.dataTable th,
	#mwTable_wrapper table.dataTable td,
	#owTable_wrapper table.dataTable th,
	#owTable_wrapper table.dataTable td {
		box-sizing: border-box;
		width: 42px !important;
		min-width: 42px !important;
		max-width: 42px !important;
		font-size: 8.5px !important;
		line-height: 1.35;
	}

	/* Do not restore padding on DataTables' zero-height sizing header inside the
	   scroll body; only the visible header and actual body cells are compacted. */
	#mwTable_wrapper .dt-scroll-head table.dataTable th,
	#mwTable_wrapper .dt-scroll-head table.dataTable td,
	#mwTable_wrapper .dt-scroll-body table.dataTable tbody th,
	#mwTable_wrapper .dt-scroll-body table.dataTable tbody td,
	#owTable_wrapper .dt-scroll-head table.dataTable th,
	#owTable_wrapper .dt-scroll-head table.dataTable td,
	#owTable_wrapper .dt-scroll-body table.dataTable tbody th,
	#owTable_wrapper .dt-scroll-body table.dataTable tbody td {
		padding: 4px 1px !important;
	}

	#mwTable_wrapper table.dataTable th,
	#owTable_wrapper table.dataTable th {
		font-size: 8px !important;
	}

	#mwTable_wrapper table.dataTable tr > :first-child,
	#owTable_wrapper table.dataTable tr > :first-child {
		width: 96px !important;
		min-width: 96px !important;
		max-width: 96px !important;
		overflow: hidden;
		white-space: nowrap !important;
	}

	#mwTable_wrapper input.min,
	#mwTable_wrapper input.max,
	#owTable_wrapper input.min,
	#owTable_wrapper input.max {
		box-sizing: border-box;
		width: 36px !important;
		min-width: 0 !important;
		max-width: 36px !important;
		padding-inline: 1px !important;
		font-size: 8px !important;
	}

	#mwTable_wrapper tbody tr > :first-child > a.symbol,
	#owTable_wrapper tbody tr > :first-child > a.symbol,
	#mwTable_wrapper .ios-fixed-column-overlay__row > a.symbol,
	#owTable_wrapper .ios-fixed-column-overlay__row > a.symbol {
		display: block;
		box-sizing: border-box;
		width: calc(100% - 46px) !important;
		min-width: 0 !important;
		max-width: none;
		margin: 0 30px 0 16px !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap !important;
	}

	/* Option contracts use longer names than stock symbols. Keep only that
	   table's phone symbol text two pixels below the shared 8.5px cell size. */
	#owTable_wrapper tbody tr > :first-child > a.symbol,
	#owTable_wrapper .ios-fixed-column-overlay__row > a.symbol {
		font-size: 6.5px !important;
	}

	#mwTable_wrapper tbody tr > :first-child > .fa-star,
	#owTable_wrapper tbody tr > :first-child > .fa-star,
	#mwTable_wrapper .ios-fixed-column-overlay__row > .fa-star,
	#owTable_wrapper .ios-fixed-column-overlay__row > .fa-star,
	#mwTable_wrapper tbody tr > :first-child > .fa-trash,
	#owTable_wrapper tbody tr > :first-child > .fa-trash,
	#mwTable_wrapper .ios-fixed-column-overlay__row > .fa-trash,
	#owTable_wrapper .ios-fixed-column-overlay__row > .fa-trash,
	#mwTable_wrapper tbody tr > :first-child > .tradeBtn,
	#owTable_wrapper tbody tr > :first-child > .tradeBtn,
	#mwTable_wrapper .ios-fixed-column-overlay__row > .tradeBtn,
	#owTable_wrapper .ios-fixed-column-overlay__row > .tradeBtn {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		position: absolute !important;
		top: 50%;
		box-sizing: border-box;
		width: 12px;
		height: 18px;
		float: none !important;
		margin: 0 !important;
		font-size: 11px !important;
		line-height: 1 !important;
		transform: translateY(-50%) !important;
		z-index: 2;
	}

	#mwTable_wrapper tbody tr > :first-child > .fa-star,
	#owTable_wrapper tbody tr > :first-child > .fa-star,
	#mwTable_wrapper .ios-fixed-column-overlay__row > .fa-star,
	#owTable_wrapper .ios-fixed-column-overlay__row > .fa-star {
		right: 2px;
	}

	#mwTable_wrapper tbody tr > :first-child > .fa-trash,
	#owTable_wrapper tbody tr > :first-child > .fa-trash,
	#mwTable_wrapper .ios-fixed-column-overlay__row > .fa-trash,
	#owTable_wrapper .ios-fixed-column-overlay__row > .fa-trash {
		right: 16px;
	}

	#mwTable_wrapper tbody tr > :first-child > .tradeBtn,
	#owTable_wrapper tbody tr > :first-child > .tradeBtn,
	#mwTable_wrapper .ios-fixed-column-overlay__row > .tradeBtn,
	#owTable_wrapper .ios-fixed-column-overlay__row > .tradeBtn {
		left: 2px;
	}
}

/* Technical watch keeps the cart permanently visible on phones and folds the
   less frequent star/remove/details actions into one compact, body-level menu.
   The portal menu remains above the iOS fixed-column mirror and cannot be
   clipped by the table cell or its scrolling container. */
.technical-symbol-more,
.technical-symbol-action-menu[hidden] {
	display: none !important;
}

.technical-symbol-action-menu {
	position: fixed;
	z-index: 2147483000;
	display: flex;
	direction: rtl;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	padding: 5px;
	border: 1px solid var(--tbl-border-watch, var(--tbl-border));
	border-radius: 8px;
	background: var(--bg, #fff);
	color: var(--text-main, #26313d);
	box-shadow: 0 7px 22px rgba(15, 23, 42, 0.22);
}

.technical-symbol-action-menu__button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--tbl-border-watch, var(--tbl-border));
	border-radius: 5px;
	background: var(--btn-bg-sec, var(--bg));
	color: var(--text-main, #26313d);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.technical-symbol-action-menu__button:active,
.technical-symbol-action-menu__button.is-active {
	background: var(--selected-bg, rgba(49, 105, 168, 0.14));
}

.technical-symbol-action-menu__button > i {
	position: static !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	font-size: 14px !important;
	line-height: 1 !important;
	transform: none !important;
}

@media only screen and (max-width: 600px) {
	html.ta-page-technical-watch #mwTable_wrapper tbody tr > :first-child > a.symbol,
	html.ta-page-technical-watch #mwTable_wrapper .ios-fixed-column-overlay__row > a.symbol {
		width: calc(100% - 40px) !important;
		margin: 0 24px 0 16px !important;
	}

	html.ta-page-technical-watch #mwTable_wrapper tbody tr > :first-child > .fa-star,
	html.ta-page-technical-watch #mwTable_wrapper tbody tr > :first-child > .fa-trash,
	html.ta-page-technical-watch #mwTable_wrapper tbody tr > :first-child > .fa-info-circle,
	html.ta-page-technical-watch #mwTable_wrapper .ios-fixed-column-overlay__row > .fa-star,
	html.ta-page-technical-watch #mwTable_wrapper .ios-fixed-column-overlay__row > .fa-trash,
	html.ta-page-technical-watch #mwTable_wrapper .ios-fixed-column-overlay__row > .fa-info-circle {
		display: none !important;
	}

	html.ta-page-technical-watch #mwTable_wrapper tbody tr > :first-child > .technical-symbol-more,
	html.ta-page-technical-watch #mwTable_wrapper .ios-fixed-column-overlay__row > .technical-symbol-more {
		-webkit-appearance: none;
		appearance: none;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: 2px;
		z-index: 3;
		box-sizing: border-box;
		width: 20px;
		height: 26px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: transparent;
		color: var(--text-main, #26313d);
		font-size: 14px;
		line-height: 1;
		transform: translateY(-50%);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	html.ta-page-technical-watch #mwTable_wrapper tbody tr > :first-child > .technical-symbol-more.is-open {
		background: var(--selected-bg, rgba(49, 105, 168, 0.14));
	}
}

/* Technical-watch filter cards keep their icon controls as one indivisible
   group. On wide screens that group may sit beside the title; on phones the
   complete group moves to a dedicated second row instead of wrapping one icon
   at a time over the title. */
.technical-filter-grid > .technical-filter-card {
	display: grid;
	align-items: center;
	box-sizing: border-box;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 3px 5px;
	min-width: 0;
}

.technical-filter-grid .technical-filter-title {
	display: block;
	min-width: 0;
	line-height: 1.55;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

.technical-filter-grid .technical-filter-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-wrap: nowrap;
	gap: 2px;
	min-width: 0;
}

.technical-filter-grid .technical-filter-icons > i.filtering {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 4px;
	float: none !important;
}

@media only screen and (max-width: 760px) {
	.technical-filter-grid > .technical-filter-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 2px;
		padding: 4px 3px;
	}

	.technical-filter-grid .technical-filter-icons {
		width: 100%;
		min-height: 24px;
	}
}

/* Light market watch: the two legacy action cards used inline floats and a
   170px minimum width, while the active-template label and select were four
   unrelated grid items. Keep the desktop DOM behaviour, but give the phone
   controls two deliberate rows that cannot overflow a narrow viewport. */
.legacy-watch-active-template {
	display: contents;
}

@media only screen and (max-width: 600px) {
	html.ta-page-watch-builders .legacy-watch-template-controls {
		display: grid !important;
		box-sizing: border-box;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 4px !important;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin: 0 !important;
		padding: 4px 0 !important;
	}

	html.ta-page-watch-builders .legacy-watch-template-controls > #selector,
	html.ta-page-watch-builders .legacy-watch-template-controls > #template {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100%;
		min-height: 31px;
		margin: 0 !important;
		padding: 4px 5px;
		float: none !important;
		font-size: 10px;
		line-height: 1.5;
		text-align: center;
		white-space: normal;
	}

	html.ta-page-watch-builders .legacy-watch-active-template {
		display: grid;
		align-items: center;
		box-sizing: border-box;
		grid-column: 1 / -1;
		grid-template-columns: max-content minmax(0, 1fr);
		gap: 6px;
		width: 100%;
		min-width: 0;
	}

	html.ta-page-watch-builders .legacy-watch-active-template > label {
		margin: 0 !important;
		font-size: 9px;
		line-height: 1.4;
		white-space: nowrap;
	}

	html.ta-page-watch-builders .legacy-watch-active-template > .selectorx {
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: 31px;
		margin: 0;
		padding: 2px 5px;
		font-size: 10px;
		text-align: right;
	}

	/* Pivot watch: present the security choices as stable full-width rows and
	   keep the two dialog actions beside each other. This scope intentionally
	   requires the pivot page's body class, so the legacy light-watch cards keep
	   their own two-column layout. */
	html.ta-page-watch-builders body.market-watch-pro-page #types > .pivot-type-modal {
		display: grid !important;
		align-content: start;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 6px !important;
		padding: 8px !important;
	}

	html.ta-page-watch-builders body.market-watch-pro-page #types > .pivot-type-modal > h3 {
		margin: 0 0 2px;
		font-size: 13px;
		line-height: 1.7;
		text-align: center;
	}

	html.ta-page-watch-builders body.market-watch-pro-page #types > .pivot-type-modal > label {
		display: flex !important;
		align-items: center;
		box-sizing: border-box !important;
		gap: 7px;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 36px;
		margin: 0 !important;
		padding: 5px 8px;
		border: 1px solid var(--market-pro-border, var(--tbl-border-watch));
		background: var(--bg-input, var(--bg));
		font-size: 10px;
		line-height: 1.6;
		text-align: right;
		white-space: normal !important;
		overflow-wrap: anywhere;
	}

	html.ta-page-watch-builders body.market-watch-pro-page #types > .pivot-type-modal > label > input {
		flex: 0 0 16px;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		min-width: 16px;
		margin: 0;
	}

	html.ta-page-watch-builders body.market-watch-pro-page #types > .pivot-type-modal > .pivot-modal-actions {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		width: 100% !important;
		min-width: 0;
		margin: 2px 0 0 !important;
	}

	html.ta-page-watch-builders body.market-watch-pro-page #types > .pivot-type-modal > .pivot-modal-actions > button {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		min-height: 34px;
		margin: 0;
		padding: 4px 6px;
		font-size: 10px;
		line-height: 1.5;
		white-space: normal;
	}
}

/* DataTables may replace or de-identify the scrolling-header rows. The helper
   marks the visible copies by the inputs they contain. Explicit row geometry
   removes the old relative positioning and keeps Min and Max visible, adjacent
   and aligned after every redraw, without exposing the sizing copy in the body. */
#mwTable_wrapper .dt-scroll-head tr.watch-range-row,
#owTable_wrapper .dt-scroll-head tr.watch-range-row,
#mwTable_wrapper .dt-scroll-head #minparent,
#mwTable_wrapper .dt-scroll-head #maxparent,
#owTable_wrapper .dt-scroll-head #minparent,
#owTable_wrapper .dt-scroll-head #maxparent {
	display: table-row !important;
	position: static !important;
	height: 30px !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

#mwTable_wrapper .dt-scroll-head tr.watch-range-row > td,
#owTable_wrapper .dt-scroll-head tr.watch-range-row > td,
#mwTable_wrapper .dt-scroll-head #minparent > td,
#mwTable_wrapper .dt-scroll-head #maxparent > td,
#owTable_wrapper .dt-scroll-head #minparent > td,
#owTable_wrapper .dt-scroll-head #maxparent > td {
	box-sizing: border-box;
	height: 30px !important;
	min-height: 0 !important;
	padding: 3px 1px !important;
	vertical-align: middle !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: var(--bg);
}

#mwTable_wrapper .dt-scroll-head tr.watch-range-row input.min,
#mwTable_wrapper .dt-scroll-head tr.watch-range-row input.max,
#owTable_wrapper .dt-scroll-head tr.watch-range-row input.min,
#owTable_wrapper .dt-scroll-head tr.watch-range-row input.max,
#mwTable_wrapper .dt-scroll-head #minparent input,
#mwTable_wrapper .dt-scroll-head #maxparent input,
#owTable_wrapper .dt-scroll-head #minparent input,
#owTable_wrapper .dt-scroll-head #maxparent input {
	display: block !important;
	position: static !important;
	box-sizing: border-box !important;
	width: calc(100% - 4px) !important;
	min-width: 0 !important;
	max-width: 40px !important;
	height: 24px !important;
	min-height: 24px !important;
	margin: 0 auto !important;
	padding: 0 2px !important;
	line-height: 22px !important;
	text-align: center;
	visibility: visible !important;
	opacity: 1 !important;
}

@media only screen and (max-width: 600px) {
	#mwTable_wrapper .dt-scroll-head tr.watch-range-row,
	#owTable_wrapper .dt-scroll-head tr.watch-range-row,
	#mwTable_wrapper .dt-scroll-head #minparent,
	#mwTable_wrapper .dt-scroll-head #maxparent,
	#owTable_wrapper .dt-scroll-head #minparent,
	#owTable_wrapper .dt-scroll-head #maxparent {
		height: 26px !important;
	}

	#mwTable_wrapper .dt-scroll-head tr.watch-range-row > td,
	#owTable_wrapper .dt-scroll-head tr.watch-range-row > td,
	#mwTable_wrapper .dt-scroll-head #minparent > td,
	#mwTable_wrapper .dt-scroll-head #maxparent > td,
	#owTable_wrapper .dt-scroll-head #minparent > td,
	#owTable_wrapper .dt-scroll-head #maxparent > td {
		height: 26px !important;
		padding: 2px 1px !important;
	}

	#mwTable_wrapper .dt-scroll-head tr.watch-range-row input.min,
	#mwTable_wrapper .dt-scroll-head tr.watch-range-row input.max,
	#owTable_wrapper .dt-scroll-head tr.watch-range-row input.min,
	#owTable_wrapper .dt-scroll-head tr.watch-range-row input.max,
	#mwTable_wrapper .dt-scroll-head #minparent input,
	#mwTable_wrapper .dt-scroll-head #maxparent input,
	#owTable_wrapper .dt-scroll-head #minparent input,
	#owTable_wrapper .dt-scroll-head #maxparent input {
		width: calc(100% - 4px) !important;
		max-width: 38px !important;
		height: 22px !important;
		min-height: 22px !important;
		padding: 0 1px !important;
		font-size: 16px !important;
		line-height: 20px !important;
	}
}

@media only screen and (max-width: 350px) {
	#mwTable_wrapper table.dataTable th,
	#mwTable_wrapper table.dataTable td,
	#owTable_wrapper table.dataTable th,
	#owTable_wrapper table.dataTable td {
		width: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
	}

	#mwTable_wrapper table.dataTable tr > :first-child,
	#owTable_wrapper table.dataTable tr > :first-child {
		width: 88px !important;
		min-width: 88px !important;
		max-width: 88px !important;
	}
}

/* Advanced market watch only. Mirror the border-box root fix used by the
   homepage and group page so full-width controls do not create an RTL overflow
   strip on the physical left side. The shared header keeps its legacy box model. */
html.ta-page-market-watch-pro {
	box-sizing: border-box;
}

html.ta-page-market-watch-pro,
html.ta-page-market-watch-pro body {
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

html.ta-page-market-watch-pro .topnav,
html.ta-page-market-watch-pro .topnav * {
	box-sizing: content-box;
}

/* The light/order/technical/option/pivot watch pages had only opted their
   builder overlays into border-box. Their page root therefore still made a
   100%-wide footer (and other padded controls) widen the whole document. */
html.ta-page-watch-builders {
	box-sizing: border-box;
}

html.ta-page-watch-builders,
html.ta-page-watch-builders body {
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

html.ta-page-watch-builders .topnav,
html.ta-page-watch-builders .topnav * {
	box-sizing: content-box;
}

html.ta-page-market-watch-pro #marketProCompactControls,
html.ta-page-market-watch-pro #mwTable_wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* The legacy overlay width was calc(100vw - 20px). Once this page adopted the
   correct border-box model, that calculation became a literal empty 20px strip.
   Every advanced-watch builder is now sized from the viewport edges instead. */
html.ta-page-market-watch-pro #selectorx,
html.ta-page-market-watch-pro #groupFilterGenerator,
html.ta-page-market-watch-pro #customColumnGenerator,
html.ta-page-market-watch-pro #categorizedColumnPicker {
	position: fixed !important;
	inset: 0 !important;
	box-sizing: border-box;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

html.ta-page-market-watch-pro #selectorx > .group-builder-modal,
html.ta-page-market-watch-pro #groupFilterGenerator > .group-builder-modal,
html.ta-page-market-watch-pro #customColumnGenerator > .group-builder-modal,
html.ta-page-market-watch-pro #categorizedColumnPicker > .group-builder-modal {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	border: 0;
	border-radius: 0;
	overflow-y: auto;
}

/* The remaining watch pages use the same builder family, but several inherited
   legacy widths such as calc(100% - 8px) or calc(100vw - 10px). Keep the rule
   opt-in at the page root so ordinary site dialogs are untouched, while every
   fullModal builder (template, personal filter, calculated column and categorized
   column picker) occupies the viewport edge to edge. */
html.ta-page-watch-builders .fullModal {
	position: fixed !important;
	inset: 0 !important;
	box-sizing: border-box;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

html.ta-page-watch-builders .fullModal > .group-builder-modal {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	border: 0;
	border-radius: 0;
	overflow-y: auto;
}

/* Security-type selection is a legacy .modalrtl rather than a builder modal.
   Size both the overlay and its surface from viewport insets. In particular,
   do not use percentage width on .modal-content: the site's legacy content-box
   root would add its padding to that width and leave an RTL gap on the right. */
@media only screen and (max-width: 600px) {
	#types {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		box-sizing: border-box !important;
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		margin-inline: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		-webkit-transform: none !important;
		transform: none !important;
		overflow: hidden !important;
		overscroll-behavior: contain;
		z-index: 10020 !important;
	}

	#types > .modal-content {
		position: absolute !important;
		inset: 0 !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		box-sizing: border-box !important;
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		margin-inline: 0 !important;
		padding: 8px !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		align-content: start;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	#types > .modal-content > * {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}

	#types > .btn-group-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 6px;
	}

	#types > .btn-group-4 > .btn,
	#types > .pivot-type-modal > label,
	#types > .pivot-type-modal > .pivot-modal-actions {
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin-inline: 0 !important;
		white-space: normal !important;
		overflow-wrap: anywhere;
	}
}

/* A single column is more robust than squeezing long Persian security names
   into two cards on phones narrower than an iPhone 14 Pro Max. */
@media only screen and (max-width: 430px) {
	#types > .btn-group-4 {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Pin every range-filter scrolling header to the same physical right edge and
   width as its body. This prevents the three-row header from shifting left when
   sticky mode activates on a narrow RTL viewport. */
#mwTable_wrapper.dt-container--range-filters .dt-scroll-head,
#owTable_wrapper.dt-container--range-filters .dt-scroll-head {
	right: 0 !important;
	left: auto !important;
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100%;
	margin-inline: 0 !important;
}

#mwTable_wrapper input.min,
#mwTable_wrapper input.max,
#owTable_wrapper input.min,
#owTable_wrapper input.max {
	-webkit-appearance: none;
	appearance: none;
	background: var(--bg-input, var(--bg));
	background-image: none !important;
	border: 1px solid var(--tbl-border-watch, var(--tbl-border));
	border-radius: 0 !important;
	color: var(--text-main) !important;
	-webkit-text-fill-color: var(--text-main) !important;
	caret-color: var(--text-main);
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

/* Keep phone range controls wide and low instead of almost square. A 16px input
   font prevents iOS Safari from zooming when a filter receives focus. */
@media only screen and (max-width: 600px) {
	#mwTable_wrapper .dt-scroll-head #minparent > td,
	#mwTable_wrapper .dt-scroll-head #maxparent > td,
	#owTable_wrapper .dt-scroll-head #minparent > td,
	#owTable_wrapper .dt-scroll-head #maxparent > td {
		height: 26px !important;
		padding-block: 2px !important;
	}

	#mwTable_wrapper input.min,
	#mwTable_wrapper input.max,
	#owTable_wrapper input.min,
	#owTable_wrapper input.max {
		height: 22px !important;
		min-height: 22px !important;
		padding-block: 0 !important;
		font-size: 16px !important;
		line-height: 20px;
		text-align: center;
	}

	/* The visible advanced-watch controls were 14px. Keep their phone rendering
	   dense at 10px without changing the desktop presentation or modal editors. */
	html.ta-page-market-watch-pro #marketProCompactControls > .market-pro-watchlist-panel,
	html.ta-page-market-watch-pro #marketProCompactControls > #predefined-filters,
	html.ta-page-market-watch-pro #marketProCompactControls > .market-pro-table-controls,
	html.ta-page-market-watch-pro #marketProCompactControls .market-pro-tool-card,
	html.ta-page-market-watch-pro #marketProCompactControls .market-pro-filter-tab {
		font-size: 10px !important;
	}

	/* DataTables gives this cell a left margin and centres it below 768px. Make
	   the top result count start at the physical left edge on every watch. */
	#mwTable_wrapper > div:nth-child(1) > div.dt-layout-cell.dt-layout-end,
	#owTable_wrapper > div:nth-child(1) > div.dt-layout-cell.dt-layout-end,
	#mwTable_wrapper > div:nth-child(3) > div.dt-layout-cell.dt-layout-start,
	#owTable_wrapper > div:nth-child(3) > div.dt-layout-cell.dt-layout-start {
		display: flex !important;
		direction: ltr;
		justify-content: flex-start !important;
		justify-self: stretch;
		margin-right: 0 !important;
		margin-left: 0 !important;
		text-align: left !important;
	}

	/* DataTables can render the information feature above and below the table;
	   target its class so both copies stay compact instead of styling only the
	   first element that receives the table-specific id. */
	#mwTable_wrapper .dt-info,
	#owTable_wrapper .dt-info {
		display: flex !important;
		direction: rtl;
		align-items: center;
		box-sizing: border-box !important;
		width: max-content !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 3px auto 3px 0 !important;
		padding: 2px 4px !important;
		float: none !important;
		font-size: 7px !important;
		font-weight: 400 !important;
		line-height: 12px !important;
		letter-spacing: 0;
		white-space: nowrap !important;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
}