:root {
	/* Colors */
	--black: #333333;
	--positive: #00BA20;
	--negative: #FF2F2F;
	--primary: var(--black);

	/* Bootstrap breakpoints */
	--screen-xs-min: 320px;
	--screen-xs: 480px;
	--screen-sm: 768px;
	--screen-md: 992px;
	--screen-lg: 1200px;
}

/* Color utilities */
.positive {
	color: var(--positive);
}

.negative {
	color: var(--negative);
}

.chart-wrapper {
	width: 100%;
	min-width: 100vh;
}

/* Grid System */
.column {
	display: grid;
	grid-auto-flow: row;
	justify-items: start;
	align-content: start;
}

.columns-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.columns-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.columns-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.columns-6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	@media screen and (max-width: 992px) {
		grid-template-columns: 1fr;
	}
}

.col-span-2 {
	grid-column: auto/span 2;
}

.col-span-3 {
	grid-column: auto/span 3;
}

.col-span-4 {
	grid-column: auto/span 4;
}

.col-span-2--on-l {
	grid-column: auto/span 2;
}

.full-width {
	width: 100%;
}

/* Table */
.table {
	width: 100%;
	margin-bottom: var(--space-2xs);
	color: #1f1f1f;
	border-collapse: collapse
}

.table th,
.table td {
	padding: .5rem .5rem;
	vertical-align: top;
	border-top: 1px solid #949494
}

.table thead th {
	vertical-align: bottom;
	border-bottom: 2px solid #949494;
	text-align: left;
}

.table tbody+tbody {
	border-top: 2px solid #949494
}

.table-sm th,
.table-sm td {
	padding: .5rem .5rem
}

.table-bordered {
	border: 1px solid #949494
}

.table-bordered th,
.table-bordered td {
	border: 1px solid #949494
}

.table-bordered thead th,
.table-bordered thead td {
	border-bottom-width: 2px
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody+tbody {
	border: 0
}

/**
   * Quotes charts
   */
.quotes-charts {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	padding: 15px 15px;

	img {
		width: 100%;
	}

	.area-chart {
		margin-top: 16px;
		.nav-tabs {
			padding-left: 0;
			display: flex;
			gap: 0px;
			justify-content: center;
			align-items: center;
			li {
				list-style: none;
				text-align: center;
				a {
					text-decoration: none;
				}
			}	
		}
	}

	.key-stats {
		border-top: 2px solid #ddd;
		padding-top: 64px;
		margin-top: 64px;
		margin-bottom: 64px;

		.gauge {
			margin-top: -7px;
			width: 100%;

			p {
				margin-bottom: 0;
			}
		}
	}

	.candlestick-chart {
		width: 100%;

		.k-stockchart {
			height: 400px;
		}
	}

	.contracts {
		margin-top: 64px;
		border-top: 2px solid #ddd;
		padding-top: 64px;
		padding-bottom: 64px;

		.contract-link {
			color: var(--black);

			&:hover {
				color: var(--primary);
			}

			i {
				color: var(--primary);
				font-size: 13px;
				margin-left: 2px;
			}
		}

		.table {
			thead {
				th {
					font-weight: 400;

					.carets {
						position: relative;

						&::before {
							position: absolute;
							content: '';
							width: 0;
							height: 0;
							right: -20px;
							top: 50%;
							transform: translateY(-50%);
							border-style: solid;
							border-width: 0 6px 10.4px 6px;
							border-color: transparent transparent var(--positive) transparent;
						}
					}

					.caret-down {
						&::before {
							border-width: 10.4px 6px 0 6px;
							border-color: var(--negative) transparent transparent transparent;
						}
					}
				}
			}
		}
	}
}

/* Charts controls component */
.quotes-charts-controls {
	margin-bottom: 7px;

	.qt-selection {
		display: grid;
		grid-template-columns: min-content min-content;
  		gap: 20px;
		.commodity-select {
			min-width: 150px;
		}
		.quote-board-wrap {
			min-width: 170px;
			.quote-board-button {
				display: inline-block;
				color: var(--black);
				padding: 10px 0 10px 25px;
				border-left: 1px solid var(--black);
			}
		}
	}

	select {
		width: 100%;
		max-width: 140px;
		padding: 10px 12px;
	}

	
}

/* Charts tabs component */
.chart-tabs {
	width: 100%;

	li {
		width: 25%;
		list-style: none;
		a {
			text-align: center;
			text-transform: uppercase;
			width: 100%;
			color: var(--black);
		}

		&.active {
			a {
				border: none !important;
				border-bottom: 4px solid var(--black) !important;
				text-transform: uppercase;
				width: 100%;
			}
		}
	}
}

/**
   * Quoteboard component
   */
.quoteboard-section {
	#quoteboard_table_data {
		td {
			i {
				margin-right: 6px;

				&.fa-caret-down {
					color: var(--negative);
				}

				&.fa-caret-up {
					color: var(--positive);
				}
			}

			.contract-link {
				color: var(--black);
				font-weight: 400;

				&::after {
					content: "";
					background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg class='fill' viewBox='0 0 17.598 17.598' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-6.5 1)' fill='%2300699e'%3E%3Cpath transform='translate(0 -10.201)' d='M23.1,19H7.5a1,1,0,0,1,0-2H23.1a1,1,0,1,1,0,2Z'/%3E%3Cpath transform='translate(-2.701 -7.5)' d='M18,24.1a1,1,0,0,1-.707-1.707L24.385,15.3,17.293,8.207a1,1,0,1,1,1.414-1.414l7.8,7.8a1,1,0,0,1,0,1.414l-7.8,7.8A1,1,0,0,1,18,24.1Z'/%3E%3C/g%3E%3C/svg%3E");
					height: 13px;
					width: 13px;
					margin-left: 16px;
					display: inline-block;
					vertical-align: middle;
				}

				&:focus,
				&:hover {
					color: var(--primary);
				}

				i {
					margin-left: 2px;
					color: var(--primary);
					font-size: 13px;
				}
			}
		}
	}
}

@media (max-width: 664px) {
	#charts_table {
		font-size: .65em;
	}
}

@media (max-width: var(--screen-sm)) {
	.column--on-s {
		grid-template-columns: 1fr;
		grid-auto-flow: row
	}

	.row--on-s {
		grid-template-columns: unset;
		grid-auto-flow: column
	}

	.columns-2--on-s {
		grid-template-columns: repeat(2, 1fr)
	}

	.columns-3--on-s {
		grid-template-columns: repeat(3, 1fr)
	}

	.columns-4--on-s {
		grid-template-columns: repeat(4, 1fr)
	}

	.columns-5--on-s {
		grid-template-columns: repeat(5, 1fr)
	}

	.columns-6--on-s {
		grid-template-columns: repeat(6, 1fr)
	}

	.col-span-1--on-s {
		grid-column: auto/span 1
	}

	.col-span-2--on-s {
		grid-column: auto/span 2
	}

	.col-span-3--on-s {
		/* grid-column:auto/span 3; */
	}

	.col-span-4--on-s {
		grid-column: auto/span 4
	}

	.col-span-5--on-s {
		grid-column: auto/span 5
	}

	.col-span-6--on-s {
		grid-column: auto/span 6
	}

	.col-start-1--on-s {
		grid-column: 1
	}

	.col-start-2--on-s {
		grid-column: 2
	}

	.col-start-3--on-s {
		grid-column: 3
	}

	.col-start-4--on-s {
		grid-column: 4
	}

	.col-start-5--on-s {
		grid-column: 5
	}

	.col-start-6--on-s {
		grid-column: 6
	}

	.row-span-1--on-s {
		grid-row: auto/span 1
	}

	.row-span-2--on-s {
		grid-row: auto/span 2
	}

	.row-span-3--on-s {
		grid-row: auto/span 3
	}

	.row-span-4--on-s {
		grid-row: auto/span 4
	}

	.row-span-5--on-s {
		grid-row: auto/span 5
	}

	.row-span-6--on-s {
		grid-row: auto/span 6
	}

	.row-start-1--on-s {
		grid-row-start: 1
	}

	.row-start-2--on-s {
		grid-row-start: 2
	}

	.row-start-3--on-s {
		grid-row-start: 3
	}

	.row-start-4--on-s {
		grid-row-start: 4
	}

	.row-start-5--on-s {
		grid-row-start: 5
	}

	.row-start-6--on-s {
		grid-row-start: 6
	}
}

/* Custom, iPhone Retina */
@media only screen and (min-width: var(--screen-xs-min)) {
	.col-charts {
		padding: 0 15px;
	}
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: var(--screen-xs)) {}

/* Small Devices, Tablets */
@media only screen and (min-width: var(--screen-sm)) {}

/* Medium Devices, Desktops */
@media only screen and (min-width: var(--screen-md)) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width: var(--screen-lg)) {
	.col-charts {
		padding: 0 100px;
	}
}