pre {
	tab-size: 0;
	counter-reset: linecounter;
	padding: 0;
	color: #eee;
	background-color: var(--bs-dark-rgb);
	font-size: 16px;
	line-height: 16px;
	white-space: pre;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

pre span.line {
	counter-increment: linecounter;
	line-height: 16px;
}

pre span.line::before {
	content: counter(linecounter);
	color: var(--primary-palette-yellow-200);
	width: 30px;
	padding-right: 3px;
	margin-right: 5px;
	text-align: right;
	font-size: 16px;
	line-height: 20px;
}

.btn-copy {
	position: absolute;
	top: -50px;
	right: 0;
	font-size: 0;
	border: 0;
	background: none;
	z-index: 9;
}

.btn-copy::before {
	display: block;
	background-image: url("../svg/icon-copy.svg");
	flex-shrink: 0;
    width: 32px;
    height: 32px;
    content: "";
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    transition: transform 0.2s ease-in-out;
    margin-top: -1px;
}

.btn-copy:hover::before {
	background-image: url("../svg/icon-copy-gold.svg");
}

@media only screen and (max-width: 767.98px) {
	.btn-copy {
		top: initial;
		bottom: 20px;
	}
}

.code-snippet-tabs {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0px 230px;
	border-bottom: 2px solid var(--secondary-palette-cool-grey);
	height: 54px;
	border-bottom-width: 2px;
	z-index: 9;
}

.code-snippet-tabs li {
	position: relative;
	background-color: var(--secondary-palette-cool-grey);
	border-bottom: 2px solid var(--secondary-palette-cool-grey);
	height: 54px;
}

.code-snippet-tabs li .nav-link {
	color: var(--secondary-palette-dark-grey);
	font-family: var(--primary-font-family-semi-bold);
	padding: 17px 18px 10px 18px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background: var(--secondary-palette-cool-grey-100);
	position: relative;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 2px solid var(--secondary-palette-cool-grey);
	border-top: 0;
	border-right: 0;
	border-left: none;
	height: 54px;
	transition: none;
/*	margin: 0;*/
	font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
	line-height: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
}

.code-snippet-tabs li .nav-link.active {
	color: var(--primary-palette-yellow);
	background: var(--secondary-palette-dark-grey);
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	border-top: 2px solid var(--secondary-palette-cool-grey);
	border-left: 2px solid var(--secondary-palette-cool-grey);
	border-right: 2px solid var(--secondary-palette-cool-grey);
	border-bottom: 0;
}

.code-snippet-tabs .nav-item:last-child {
	border-top-right-radius: 16px;
}

.code-snippet-tabs .nav-item:last-child .nav-link {
	border-top-right-radius: 16px;
}

.code-snippet-tabs .nav-item:last-child:after {
	display: none;
}

.code-snippet-tabs .nav-item:first-child {
	border-top-left-radius: 16px;
}

.code-snippet-tabs .nav-item:first-child:before {
	display: none;
}

.code-snippet-tabs .nav-item:first-child .nav-link {
	border-top-left-radius: 16px;
	border-left: none;
	left: 0px;
	z-index: 9;
}

.code-snippet-tabs .nav-item:first-child .nav-link.active {
	border-left: 2px solid var(--secondary-palette-cool-grey);
	border-top-right-radius: 16px;
	border-bottom-left-radius: 0px;
}

.code-snippet-tabs .prevActive .nav-link {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.code-snippet-tabs .item-active {
	background-color: var(--secondary-palette-cool-grey-100);
	border-bottom: none;
}

.code-snippet-tabs .item-active:before {
	content: "";
	width: 30px;
	height: 54px;
	background: url("../png/inner-tabshape-inverse-dark.png") no-repeat;
	background-size: contain;
	background-position: center;
	display: block;
	position: absolute;
	left: -14px;
	z-index: 99;
	top: 0px;
	background-color: var(--secondary-palette-cool-grey-100);
}

.code-snippet-tabs .item-active:after {
	content: "";
	width: 30px;
	height: 54px;
	background: url("../png/inner-tabshape-dark.png") no-repeat;
	background-size: contain;
	background-position: center;
	display: block;
	position: absolute;
	right: -16px;
	z-index: 99;
	top: 0px;
	background-color: var(--secondary-palette-cool-grey-100);
}

.code-snippet-tabs .item-active .nav-link {
	border-top-left-radius: 16px;
	z-index: 9;
	border-bottom-left-radius: 0px;
	left: 0px;
}

.code-snippet-tabs .nextActive {
	background-color: transparent;
}

.code-snippet-tabs .nav-item:last-child.item-active:after {
	background-color: transparent;
}

.advance-tabs-wrapper {
	position: relative;
	border: 0;
	padding: 29px 20px 29px 20px;
}

.code-snippet-tabs__dropdown{
	font-family: var(--primary-font-family-regular);
    color: var(--primary-palette-yellow);
    padding: 12px 30px;
    border: 3px solid var(--primary-palette-yellow) !important;
    background: var(--secondary-palette-dark-grey);
    box-shadow: 5px 4px 0px 0px rgb(0, 0, 0, 0.16);
    width: 100%;
}

.code-snippet-tabs__dropdown--items{
	border: 2px solid var(--secondary-palette-cool-grey);
	margin-top: -15px;
	border-color: var(--secondary-palette-warm-grey-200);
	box-shadow: 0px 8.48px 13.48px 0px #93A5C08F;
	overflow: hidden;
	width: 100%;
}

.code-snippet-tabs__dropdown--items button{
	padding:10px 30px;
	width: 100%;
    text-align: start;
	color: var(--secondary-palette-dark-grey);
	background-color: var(--secondary-palette-cool-grey-100);
}

.code-snippet-tabs__dropdown--items button.active, .code-snippet-tabs__dropdown--items button:hover{
	background-color: var(--secondary-palette-cool-grey-100);
	color: var(--primary-palette-dark-grey);
}

img.code-snippet-tabs__dropdown--arrow-icon{
	width: 12px;
	margin-left:10px;
}