html, body {
	margin: 0;
	padding: 0;
}

.hidden {
	display: none !important;
}

body {
	padding: 0.5em;
}

/**
 * Bootstrap custom styling.
 **/
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-40 { width: 40% !important; }
.mr-2 { margin-right: 0.5rem !important; }

/** Coloring of prices: **/
.last-week-price { color: purple; }
.last-trade-week-prices { color: rgb(81, 0, 81); }
.yesterday-price { color: rgb(91, 218, 214); }
.yesterday-prices { color: rgb(32, 136, 132); }
.yestertradeday-price { color: grey; }
.yestertradeday-prices { color: rgb(82, 82, 82); }
.today-prices { color: navy; }
.last-price { color: blue; }
.highest-price { color: rgb(223, 128, 45); }
.highest-watch-price { color: green; }

/** Price styling: **/
span.price { display: inline-block; width: 3em; text-align: right; }
span.divider { display: inline-block; width: 1.5em; text-align: center; }
span.moment { display: inline-block; width: 10em; text-align: left; }

/**
 * Main styling.
 **/
.main {
	background-color: white;
}

/**
 * Header styling.
 **/
.main .header {
	padding: 0.5em;

	min-height: 1em;

	/* background-color: gray; */

	text-align: center;
}

.main .header .title-prefix {
	display: inline-block;

	margin-right: 0.5em;

	color: #0d6efd;

	transform: rotate(-30deg);
}
.main .header .title-prefix.paper-trading {
	color: #198754;
}

.main .header .main-title {
	display: inline-block;

	margin: 0;
}

.main .header .version {
	color: #666;
	font-size: 75%;

	text-decoration: none;
}
.main .header .version:hover {
	color: black;
}

/**
 * Controls styling.
 **/
.main .controls {
	position: sticky;

	padding: 0.5em;

	top: 0;

	/* background-color: blue; */

	text-align: center;

	z-index: 1;
}

/**
 * Body styling.
 **/
.main .body {
	padding: 0.5em 0.5em 2em 0.5em;
}

/**
 * Watchlist table.
 **/
.main .body .table thead {
	position: sticky;

	top: 4em;

	background-color: white;

	z-index: 1;
}

.main .body .table.watchlist .row {
	padding: 0;
}

.main .body .table.watchlist .row .block {
	display: grid;
	grid-template-areas:
		"symbol 				symbol 					symbol 					."
		"lastweekprice			lastweekprice			lastweekprice			."
		"lasttradeweekprices	lasttradeweekprices		lasttradeweekprices		."
		"yesterdayprice			yesterdayprice			yesterdayprice			."
		"yesterdayprices		yesterdayprices			yesterdayprices			."
		"yestertradedayprice	yestertradedayprice		yestertradedayprice		."
		"yestertradedayprices	yestertradedayprices	yestertradedayprices	buttons"
		"todayprices			todayprices				todayprices				buttons"
		"lastprice				lastprice				lastprice				buttons"
		"highestprice			highestprice			highestprice			buttons"
		"highestwatchprice		highestwatchprice		highestwatchprice		buttons"
		"transprice 			transdate 				transcount 				buttons"
		"totalprice 			totaldate 				totalcount 				buttons";
	grid-template-columns: 4em 1fr 4em 6em;
	justify-items: center;
	align-items: center;
}

.main .body .table.watchlist .row .block .symbol {
	grid-area: symbol;

	font-weight: bold;
	text-align: center;
}

.main .body .table.watchlist .row .block .last-week-price {
	display: none;

	grid-area: lastweekprice;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .last-trade-week-prices {
	grid-area: lasttradeweekprices;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .yesterday-price {
	display: none;

	grid-area: yesterdayprice;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .yesterday-prices {
	display: none;

	grid-area: yesterdayprices;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .yestertradeday-price {
	display: none;
	
	grid-area: yestertradedayprice;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .yestertradeday-prices {
	grid-area: yestertradedayprices;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .today-prices {
	grid-area: todayprices;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .last-price {
	display: none;
	
	grid-area: lastprice;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .highest-price {
	display: none;
	
	grid-area: highestprice;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .highest-watch-price {
	grid-area: highestwatchprice;

	font-size: 75%;
}

.main .body .table.watchlist .row .block .transactions {
	display: contents;
}

.main .body .table.watchlist .row .block .price {
	grid-area: transprice;
}

.main .body .table.watchlist .row .block .date {
	grid-area: transdate;
}

.main .body .table.watchlist .row .block .count {
	grid-area: transcount;
}

.main .body .table.watchlist .row .block .btn-group-vertical {
	grid-area: buttons;

	text-align: center;
}

.main .body .table.watchlist .row .block .transactions-totals {
	display: contents;

	font-weight: bold;
}

.main .body .table.watchlist .row .block .transactions-totals .price {
	grid-area: totalprice;
}

.main .body .table.watchlist .row .block .transactions-totals .date {
	grid-area: totaldate;
}

.main .body .table.watchlist .row .block .transactions-totals .count {
	grid-area: totalcount;

	cursor: pointer;
}

/**
 * Find OPTIONs table.
 **/
#findOptionsModal .table.options thead {
	position: sticky;

	top: 0;

	background-color: white;

	z-index: 1;
}

#findOptionsModal .table.options .row {
	padding: 0;
}

#findOptionsModal .table.options .row .block {
	display: grid;
	grid-template-areas:
		"a a a f"
		"b c d e";
	grid-template-columns: 4em 1fr 6em 2em;
	justify-items: center;
	align-items: center;
}

#findOptionsModal .table.options .row .block .symbol {
	grid-area: a;

	font-weight: bold;
	text-align: center;
}

#findOptionsModal .table.options .row .block .strike {
	grid-area: b;

	text-align: center;
}

#findOptionsModal .table.options .row .block .last-trade-date {
	grid-area: c;

	text-align: center;
}

#findOptionsModal .table.options .row .block .last-price {
	grid-area: d;

	text-align: center;
}

#findOptionsModal .table.options .row .block .btn-group {
	grid-area: e;

	text-align: center;
}

/**
 * Transactions table.
 **/
#symbolDetailsModal .add-transaction {
	margin: 1em 0;
}

#symbolDetailsModal .pair.highest-price {
	display: none !important;
}

#symbolDetailsModal .table.transactions thead {
	position: sticky;

	top: 0;

	background-color: white;

	z-index: 1;
}

#symbolDetailsModal .table.transactions .row {
	padding: 0;
}

#symbolDetailsModal .table.transactions .row .block {
	display: grid;
	grid-template-areas:
		"a b c d";
	grid-template-columns: 4em 1fr 6em 2em;
	justify-items: center;
	align-items: center;
}

#symbolDetailsModal .table.transactions .row .block .price {
	grid-area: a;
	
	text-align: center;
}

#symbolDetailsModal .table.transactions .row .block .date {
	grid-area: b;

	text-align: center;
}

#symbolDetailsModal .table.transactions .row .block .strike {
	grid-area: c;

	text-align: center;
}

#symbolDetailsModal .table.transactions .row .block .btn-group {
	grid-area: d;

	text-align: center;
}

/**
 * Footer styling.
 **/
.main .footer {
	position: fixed;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1em;
	
	padding: 0.5em;

	left: 0;
	bottom: 0;
	right: 0;
	min-height: 1em;

	background-color: gray;
	font-size: 75%;
}

/**
 * Fiiter info.
 **/
.main .footer .info {
	justify-self: start;
}

.main .footer .info a {
	color: var(--bs-body-color);
}
.main .footer .info a:hover {
	font-weight: bold;
}

/**
 * Footer watchlist info.
 **/
.main .footer .watchlist-info {
	justify-self: center;
}

.main .footer .watchlist-info .label {
	font-weight: bold;
}

.main .footer .watchlist-info .label.total-profit.positive {
	color: green;
}

.main .footer .watchlist-info .label.total-profit.negative {
	color: #dc3545;
}

.main .footer .watchlist-info .label.total-projected-profit.positive {
	color: green;
}

.main .footer .watchlist-info .label.total-projected-profit.negative {
	color: #dc3545;
}

/**
 * Footer icons.
 **/
.main .footer .status-icons {
	justify-self: end;

	display: flex;
	gap: 0.5em;
}

.main .footer .status-icons .icon {
	padding: 0.25em;

	width: 2em;
	height: 2em;

	color: #fff;
	background-color: #dc3545;
	border-radius: 50%;
	font-size: 75%;
	text-align: center;

	cursor: help;

	transition: all 250ms ease-in-out;
}

.main .footer .status-icons .icon.highlight {
	color: #fff;
	background-color: #198754;

	transition: all 250ms ease-in-out;
}

.main .footer .status-icons .icon.total-profit {
	color: #000;
	background-color: #ffc107;

	cursor: pointer;
}
.main .footer .status-icons .icon.total-profit:hover {
	background-color: #000;
	color: #ffc107;
}

.main .footer .status-icons .icon.help {
	color: #fff;
	background-color: #0d6efd;

	cursor: pointer;
}
.main .footer .status-icons .icon.help:hover {
	background-color: #fff;
	color: #0d6efd;
}

/**
 * Loader styling.
 **/
.loader {
	display: flex;
	position: fixed;

	justify-content: center;
	align-items: center;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: rgba(0, 0, 0, 0.5);

	z-index: 2000;
}

/**
 * Responsive styling.
 **/
@media screen and (min-width: 1024px) {
	.main {
		margin: auto;

		width: 40em;
	}
}