/* ==========================================================
   MARKET OVERVIEW
   Short table = header + 10 rows
   Long table = full table
   ========================================================== */

#marketOverviewCard {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: visible;
	overflow-x: visible;
	overflow-y: visible;
}


/* ==========================================================
   TABLE WRAPPER
   ========================================================== */

#marketOverviewTableWrap {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow-x: auto;
	scrollbar-gutter: stable;
	transition:
		height .2s ease,
		max-height .2s ease;
}


/* Default state:
   height is calculated in JS as:
   table header + first 10 rows
*/

#marketOverviewTableWrap.shortTable {
	height: var(--market-overview-short-height, 330px);
	min-height: var(--market-overview-short-height, 330px);
	max-height: var(--market-overview-short-height, 330px);
	overflow-x: auto;
	overflow-y: auto;
}


/* Expanded state */

#marketOverviewTableWrap.longTable {
	height: calc(var(--market-overview-short-height, 330px) * 2);
	min-height: calc(var(--market-overview-short-height, 330px) * 2);
	max-height: calc(var(--market-overview-short-height, 330px) * 2);
	overflow-x: auto;
	overflow-y: auto;
}


/* ==========================================================
   TABLE
   ========================================================== */

#marketOverviewTableWrap table {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ==========================================================
   STICKY TABLE HEADER
   ========================================================== */


#marketOverviewTableWrap thead {
	position: sticky;
	top: 0;
	z-index: 5;
}

#marketOverviewTableWrap thead th {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--stock-chart-background);
}

.dark-theme #marketOverviewTableWrap thead th {
	background: #3b3b3b;
}


/* ==========================================================
   ENLARGE / SHORT TABLE BAR
   ========================================================== */

#marketOverviewCard .marketOverviewExpand {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: #cdcdcd;
	color: #111;
	overflow: hidden;
}


.dark-theme #marketOverviewCard .marketOverviewExpand {
	background: #434343;
	color: #fcfcfc;
}


/* ==========================================================
   ENLARGE BUTTON
   ========================================================== */

#marketOverviewCard .marketOverviewExpand .enlargeListing, 
#marketOverviewExpandButton {
    min-width: 125px;
    height: 26px;
    line-height: 8px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 300;
}
.dark-theme #marketOverviewExpandButton {
    background: rgb(255,255,255,0.1);
    border: 1px solid rgb(255,255,255,0.25);
    color: #cdcdcd;
}
.dark-theme #marketOverviewExpandButton:hover {
    background: transparent;
    border: 1px solid var(--ppi-green-hover);
    color: var(--ppi-green-hover);
}
.dark-theme #marketOverviewCard .marketOverviewExpand {
    background: linear-gradient(to bottom, #333 0%, #2b2b2b 100%) !important;
    border-top: 1px solid #3a3a3a;
    color: #fcfcfc;
}

/* ==========================================================
   BOTTOM ACTION PANEL
   ========================================================== */

#marketOverviewCard #additionalActionsCard {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	box-sizing: border-box;
	overflow: visible;
}