:root {
	--dark-blue: #001219; 
	--dark-gray-1: #212529;
	--dark-gray-2: #343a40;
	--dark-gray-3: #495057;
	
	--dark-1: #5A5A5A;
	--dark-2: #4F4F4F;
	--dark-3: #6D6D6D;
	--dark-4: #3C3C3C;
	--dark-5: #484848;
	--rich-black: #141B23;
	--rich-black-light: #121212;
	--rich-black-dark: #0D1017;


	--action-hover-neutral: rgba(108, 133, 149, 0.2);
    --background-paper: #141d22;
    --common-white: #ffffff;
    --error-main: #eb483f;
    --neutral-states-selected: rgba(108, 133, 149, 0.16);
    --other-dividerLight: rgba(237, 240, 242, 0.2);
    --success-main: #46cd7c;
    --text-primary: #edf0f2;
    --text-secondary: rgba(237, 240, 242, 0.6);
    --info-light: #44a2fa;
    --info-ultralight: #158bf929;


	--gunmetal: #212529;
	--bs-golden-yellow: #FFC300;
    --bs-secondary: #8B8000;
    --bs-success: #198754;
	--bs-yellow: #ffc107;
}

.text-gradient {
	background: linear-gradient(to right, #8B8000 20%, #FFC300 50%, #8B8000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body {
    /* background-color: #5f5d5d; */
    background-color: var(--rich-black-light);
    padding: 0 !important;
    margin: 0 !important;
}

/* Nav links */

.bg-custom {
	background-color: var(--dark-blue);
}

#navContainer {
	white-space: nowrap;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#navContainer::-webkit-scrollbar {
	display: none;
}

.nav-btn {
	border: none;
	background: none;
	font-size: 1.5rem;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	z-index: 3;
	padding: 0px;
	margin: 0%;
}

#prevBtn .carousel-control-prev-icon {
    filter: invert(0%) brightness(0); /* Makes it black */
}

#nextBtn .carousel-control-next-icon {
    filter: invert(0%) brightness(0); /* Makes it black */
}


.nav-btn:hover {
	color: black;
}

.active {
	color: var(--bs-golden-yellow) !important;
	font-weight: 500;
	background-color: var(--dark-blue);
}
/* /Nav links */

/* Remove border from accordion items */
.accordion-item {
    border: none !important;
}

/* Remove border from accordion button */
.accordion-button {
    background: none;
    border: none !important;
    box-shadow: none !important; /* Remove focus outline */
}

/* Remove border from accordion content */
.accordion-collapse {
    border: none !important;
}

.bg-card {
    background: var(--dark-blue);
}

.bg-grad {
    background: linear-gradient(-45deg, var(--bs-golden-yellow), var(--dark-blue), var(--dark-gray-1), var(--dark-blue));
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 80vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.category-header {
    border-left: 10px solid #bbb802;
}

/* Codes example styles */
.code-card {
	background-color: #eaf6eb; /* Light green background */
	border-radius: 10px;
	padding: 15px;
}
.code-container {
	background-color: #fff;
	border-left: 4px solid #4CAF50; /* Green left border */
	padding: 10px;
	border-radius: 5px;
	font-family: monospace;
	font-size: 20px;
	white-space: pre-wrap;
}
.btn-custom {
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 8px 12px;
}
.btn-custom:hover {
	background-color: #45a049;
}
/* ---X--- Codes example styles ---X--- */

pre {
	/* color: #fff; */
    position: relative;
    background: var(--rich-black); /* #f6f8fa; */
    border: 1px solid #d1d5da;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    font-size: 14px;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
}
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--dark-1);
    color: var(--common-white);
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}
.copy-btn:hover {
    border: 1px solid var(--bs-yellow);
}

#searchResults li.active {
	background-color: #f8f9fa;
}

#share-sidebar-wrapper .transition {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#share-sidebar.hidden {
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: none;
}

/* Default for desktop */
.custom-sidebar-position {
    top: 50%;
    transform: translateY(-50%);
}

/* Override for mobile devices */
@media (max-width: 767.98px) {
    .custom-sidebar-position {
        top: 20% !important;
        bottom: auto !important; 
        transform: none !important;
    }
}