.s-stock-pairs {
    margin: 2.5rem auto;
}

.hidden {
	display: none;
}

.s-stock-pairs .np-pr-container ul {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 2rem 0;
	padding: 0;
    list-style: none;
}

.s-stock-pairs .np-pr-quotes-tabs ul li {
	outline: 0 !important;
	background-color: transparent;
	border-radius: 4px;
	padding: 13px 20px 10px;
	text-align: center;
	transition: all .3s ease-in-out;
	text-transform: capitalize !important;
	border: 1px solid #3671e9;
	margin: 0 15px 10px 0;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
}

.s-stock-pairs .np-pr-quotes-tabs ul li:last-child {
    margin-right: 0;
}

.s-stock-pairs .np-pr-quotes-tabs ul li:hover, 
.s-stock-pairs .np-pr-quotes-tabs ul li.np-pr-active {
	fill: #FFFFFF;
	color: #FFFFFF;
	background-color: #3671e9;
}

.s-stock-pairs .select-wrapper,
.s-stock-pairs #np-pr-quotes-select {
	display: none;
	margin: 2em 0 1em;
	padding: 0.78em 1.4em;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #3671e9;
	border: none;
	border-radius: 0.4em;
	box-shadow: 0 0.4em 0.52em rgba(0, 0, 0, 0.25);
	cursor: pointer;
	color: #fff;
}

.s-stock-pairs .np-pr-tabs-container .quote-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0;
	width: 60%;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-color: #1E1A3C transparent;
	-moz-column-gap: 3rem;
	column-gap: 3rem;
}

.s-stock-pairs .np-pr-quote {
	width: 100%;
}

.s-stock-pairs .np-pr-quote-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.s-stock-pairs .np-pr-tabs-container {
    color: #4f4f4f;
    text-transform: uppercase;
}

.s-stock-pairs .np-pr-tabs-container .np-pr-pair-name {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.s-stock-pairs .np-pr-direction {
	margin: 0.5rem;
	width: 0;
	height: 0;
	border-color: transparent transparent #3CCAC2 transparent;
	border-style: solid;
	border-width: 0 5px 5px;
}

.s-stock-pairs .np-pr-direction.np-pr-arrow-down {
    border-color: #FF0000 transparent transparent transparent;
    border-width: 5px 5px 0;
}

.s-stock-pairs .np-pr-pair {
	font-size: 16px;
	font-weight: 600;
}

.s-stock-pairs .np-pr-green span,
.s-stock-pairs .np-pr-spread span {
	color: #3CCAC2;
}

.s-stock-pairs .np-pr-red span {
	color: #FF0000;
}

.s-stock-pairs .np-pr-tabs-container .quote-block {
	scrollbar-color: #1E1A3C transparent;
}

.s-stock-pairs .np-pr-bid, 
.s-stock-pairs .np-pr-ask,
.s-stock-pairs .np-pr-spread {
    width: auto;
	font-size: 16px;
}

@media only screen and (max-width: 987px) {
	.s-stock-pairs .select-wrapper,
	.s-stock-pairs #np-pr-quotes-select {
		display: block;
	}

	.s-stock-pairs .np-pr-quotes-tabs::after {
		position: absolute;
		top: 0;
		right: 25px;
		bottom: 0;
		margin: auto;
		width: 0;
		height: 0;
		border-color: #fff transparent transparent;
		border-style: solid;
		border-width: 10px 8px 0;
		content: "";
		pointer-events: none;
	}
    .s-stock-pairs .np-pr-container ul,
	.s-stock-pairs h4 {
		display: none;
	}

	.s-stock-pairs .np-pr-tabs-container .quote-block {
		grid-template-columns: 1fr;
	}

	.s-stock-pairs .np-pr-quote {
		width: 100%;
	}
}