pre code{
	font-size:  initial;
	font-weight: bold;

}

.keywords{
	
	color:#FF33A2;
}


.highlight-wrapper {
	display: block;
}

.highlight {
	position: relative;
	z-index: 0;
	padding: 0;
	margin: 0;
	border-radius: 4px;
}

.highlight>.chroma {
	display: flex;
	color: #d0d0d0;
	background-color: #212121;
	position: static;
	z-index: 1;
	border-radius: 4px;
	color: #d0d0d0;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left:1%;
}

.chroma {
	display: flex;
	overflow: auto;
}

/*.copy-code-button {
	position: absolute;
	display: block;
	z-index: 2;
	right: 0;
	top: 5px;
	font-size: 14px;
	font-weight: 700;
	line-height: 10px;
	color: #ffffff;
	background-color: transparent;
	border: none;
	white-space: nowrap;
	opacity: 1.6;
	display: block;
	white-space: nowrap;
	border: none;
}*/

.copy-code-button {
	position: absolute;
	display: block;
	z-index: 2;
	right: 0;
	top: 5px;
	font-size: 14px;
	font-weight: 700;
	line-height: 10px;
	color: #ffffff; /* Text color: white for contrast */
	background-color: rgba(0, 0, 0, 0.6); /* Background: translucent black */
	border: none;
	border-radius: 4px; /* Add some rounding for modern look */
	padding: 5px 10px; /* Padding for better touch area */
	white-space: nowrap;
	opacity: 1; /* Full visibility */
	transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Optional: Hover effects for better interactivity */
.copy-code-button:hover {
	background-color: rgba(255, 255, 255, 0.8); /* Light background on hover */
	color: #000; /* Dark text on hover */
}




.copy-code-button>i {
	font-size: 20px;
}

.copyable-text-area {
	position: absolute;
	height: 0;
	z-index: -1;
	opacity: 0.01;
}
/* Add the data-tooltip attribute to your button with the desired tooltip text */
.copy-code-button[data-tooltip]:before {
	content: attr(data-tooltip);
	position: absolute;
	top: -30px; /* Adjust the distance from the button */
	left: 50%;
	transform: translateX(-50%);
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	border-radius: 4px;
	font-size: 12px;
	display: none; /* Initially hide the tooltip */
	z-index: 3;
}

.copy-code-button:hover[data-tooltip]:before {
	display: block; /* Show the tooltip on hover */
}