/*-- Google Fonts:
font-family: "Lexend", sans-serif;
font-family: "Poppins", serif;
--*/


/*=========================
CSS VARIABLES
==========================*/
:root {
	/*-- Typography --*/
	--heading-font-family: "Lexend", serif;
   --paragraph-font-family: "Poppins", sans-serif;
   --paragraph-font-size: 1.15rem;

	/*-- Main Colors -*/
	--plain-black-color: #000000;
	--custom-red-color: #F23B1D;
	--custom-blue-color: #3077f3;
	--dark-purple-color: #323c62;
	--mid-purple-color: #6c6292;
	--light-purple-color: #AFA5D9;
	--custom-gray-color: #bbbdc8;
	--custom-white-color: #FCFCF8;
	--plain-white-color: #FFFFFF;

	/*-- Main BG Colors -*/
	--main-background-color: #1D203A;
	--main-background-color-light: #DDDCD4;

	/*-- Content BG Colors -*/
	--content-background-color: #242C48;
	--content-background-color-light: #F6F5EC;

	/*-- Border Solid Colors -*/
	--border-solid-color: #2b3455;
	--border-solid-color-light: #C6C6BE;
	--border-bg-color-light: #f0eedf;
	--light-mode-border-bg-color: #A8A8A0;

	/*-- Hover Focus Colors -*/
	--hover-focus-color: #37446F;
	--hover-focus-color-light: #a0a099;

	/*-- Click to Copy Colors -*/
	--copied-color: #4BB518;
	--copied-color-light: #007855;

	/*-- Main Font Colors (not all fonts) --*/
	--nav-link-color: #9689cd;
	--text-area-light-font-color: #777776;
	--light-mode-btn-font-color: #444442;
	--gray-title-color: #e1e1dc;
	--main-light-mode-font-color: #62625f;
	--text-area-resize-handle-color: #babab0;

	/*-- Documentation Link Colors --*/
	--documentation-a-blue-color: #3177f3;
	--documentation-ahover-blue-color: #699bf6;
	--documentation-ahover-blue-color-light: #0c50ca;

	/*-- Code Snippet Hex Colors in CSS --*/
}



/*=========================
CSS RESETS
==========================*/
*,
::before,
::after {
   box-sizing: border-box;
}
html {
	background-color: var(--main-background-color);
	overflow: overlay;
}

/*-- Browser Scrollbar Styling --*/
html::-webkit-scrollbar {
	background-color: var(--plain-black-color);
	width: .85rem;
	display: none; /*-- Remove to Add Scrollbar Styling --*/
}
html::-webkit-scrollbar-thumb {
	background-color: var(--content-background-color);
	border-radius: .4rem;
	cursor: pointer;
	transition: all .5s ease;
}
html::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-solid-color);
	border-radius: .4rem;
}

/*-- Body Styling --*/
body {
   position: relative;
   margin: 0;
   padding: 0;
   font-family: var(--paragraph-font-family);
   font-size: var(--paragraph-font-size);
   transition: all ease .5s;
}
a {
   text-decoration: none;
	transition: all .5s ease;
}
textarea:focus,
input:focus {
    outline: none;
}

/*-- 5 Column Bootstrap Grid --*/
@media (min-width: 992px) {
	.col-lg-25 {
		 flex: 0 0 auto;
		 width: 20%;
	}
}
@media (min-width: 1200px) {
	.col-xl-25 {
		 flex: 0 0 auto;
		 width: 20%;
	}
}


/*=========================
SIDEBAR NAVIGATION
==========================*/
.sidebar-nav-container {
   position: fixed;
   width: 4.25rem;
   height: 100vh;
	background-color: var(--content-background-color);
	padding: .5rem 1rem 0 0;
   z-index: 100;
   border-right: .1rem solid var(--border-solid-color);
}
[data-theme="light"] .sidebar-nav-container {
	background: var(--content-background-color-light);
	border-right: 1px solid var(--border-bg-color-light);
	box-shadow: 0 0 .5rem var(--plain-white-color);
}
.sidebar-nav {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
	min-width: 4.25rem;
}
.nav-logo,
.nav-link {
   display: grid;
   grid-template-columns: max-content max-content;
   align-items: center;
   padding: .5rem 1rem .1rem 1.5rem;
   width: 4.25rem;
	font-size: 1.6rem;
}
.nav-logo {
   padding: .95rem;
	background-image: url('../img/logo/responsive-html-email.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 3.5rem;
	margin: 2.3rem 0 2rem .6rem;
	opacity: .9;
	transition: all .5s ease;
}
[data-theme="light"] .nav-logo {
	background-image: url('../img/logo/responsive-html-email.png');
	opacity: .8;
}
.nav-logo:hover {
	opacity: 1;
	scale: 1.03;
}

/*-- Reduce Vertical Nav Space for Screens w/ Smaller Heights --*/
@media (max-height: 768px) {
	.nav-logo {
		margin: 1.2rem 0 1.8rem .68rem;
	}
	.nav-link {
		padding: 0 1rem .15rem 1.5rem;
		font-size: 1.5rem;
	}
}

/*-- Navigation Links --*/
.nav-link {
	position: relative;
	color: var(--light-purple-color);
	margin-bottom: 1.5rem;
	transition: .3s ease;
}
[data-theme="light"] .nav-link {
	color: var(--nav-link-color);
}
.nav-link:hover,
.nav-link.active {
   color: var(--custom-white-color);
}
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
	color: var(--content-background-color);
}
.nav-link.active::before {
   content: '';
   position: absolute;
   left: 0;
   width: 0.188rem;
   height: 2.2rem;
	margin-top: .1rem;
   background-color: var(--custom-white-color);
}
[data-theme="light"] .nav-link.active::before {
	background-color: var(--content-background-color);
}

/*-- Navigation Tooltip --*/
.custom-tooltip {
	background-color: var(--custom-white-color);
	--bs-tooltip-bg: var(--custom-white-color);
	--bs-tooltip-color: var(--content-background-color);
   font-size: 0.938rem;
	font-weight: 500;
   letter-spacing: 0.063rem;
	padding: .1rem .2rem;
	border-radius: .3rem;
}
[data-theme="light"] .custom-tooltip {
	background-color: var(--content-background-color);
	--bs-tooltip-bg: var(--content-background-color);
	--bs-tooltip-color: var(--content-background-color-light);
}
.custom-tooltip.shortcuts .tooltip-inner {
	min-width: 14rem!important;
}
@media screen and (min-width: 768px) {
   .sidebar-nav-container {
      left: 0;
      padding: 1rem 1rem 0 0;
   }
}

/*-- Fade Main Container when Sidebar is Hovered --*/
.sidebar-fade {
	filter: blur(0.18rem);
	transition: filter 0.45s ease;
}

/*-- Sidebar Nav Light Mode Switch --*/
.light-mode-toggle {
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
	bottom: 1.875rem;
	left: -0.531rem;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transition: all .5s ease;
	scale: .7;
	opacity: .9;
}
.light-mode-toggle:hover {
	scale: .72;
	opacity: .95;
}
.settings-option {
	padding: .5rem 1rem;
	border-radius: 5px;
	display: flex;
	align-items: center;
}
.theme-toggler__checkbox {
	opacity: 0;
	position: absolute;
	right: 5px;
	z-index: 1;
}
.theme-toggler__switch {
	width: 3.125rem;
	height: 1.563rem;
	border-radius: 1rem;
	position: relative;
	cursor: pointer;
	background: var(--custom-white-color);
	border: 2px solid var(--custom-white-color);
	transition: all .1s linear;
	display: inline-block;
	vertical-align: middle;
}
[data-theme="light"] .theme-toggler__switch {
	background: var(--custom-white-color);
	border: 2px solid var(--custom-white-color);
}
.theme-toggler__switch::after {
	content: "";
	position: absolute;
	width: 1.313rem;
	height: 1.313rem;
	margin-top: 0;
	margin-left: 1px;
	border-radius: 1rem;
	background: var(--custom-red-color);
	border: 1px solid var(--custom-red-color);
	box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.3);
	transition: all .1s linear;
}
.theme-toggler__checkbox:checked + .theme-toggler__switch {
	background: var(--content-background-color);
	border-color: var(--content-background-color);
}
.theme-toggler__checkbox:checked + .theme-toggler__switch::after {
	transform: translatex(1.375rem);
	transition: transform .1s linear;
	border-color: var(--content-background-color);
}



/*=========================
MAIN BODY CONTAINER
==========================*/
.main-container {
	background-color: var(--main-background-color);
	margin-left: 4.25rem;
}
[data-theme="light"] .main-container {
  background: var(--main-background-color-light);
}
.text-mode {
	color: var(--custom-white-color);
	transition: all .5s ease;
}
[data-theme="light"] .text-mode {
	color: var(--content-background-color);
}
.bg-content {
	background-color: var(--content-background-color);
	border: .1rem solid var(--border-solid-color);
	border-radius: 1rem;
	box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .bg-content {
	background-color: var(--content-background-color-light);
	border: .1rem solid var(--border-bg-color-light);
	box-shadow: 0 0 .4rem rgba(0, 0, 0, 0.05);
}

/*-- Section Border --*/
.section-border {
	border-bottom: 2px solid var(--hover-focus-color);
}
[data-theme="light"] .section-border {
	border-bottom: 2px solid var(--main-background-color-light);
}

/*-- Section Heading --*/
.section-heading {
	font-family: var(--heading-font-family);
}



/*=========================
BOOKMARKS SECTION
==========================*/

/*-- Date & Time --*/
.datetime-display {
	color: var(--light-purple-color);
}
[data-theme="light"] .datetime-display {
	color: var(--mid-purple-color);
}

/*-- Bookmarks Weather --*/
.weather-add-link .bg-content {
	height: 35rem;
}
.weather-dark {
	display: block;
}
[data-theme="light"] .weather-dark {
	display: none;
}
.weather-light {
	display: none;
}
[data-theme="light"] .weather-light {
	display: block;
}

/*-- Weather Carousel --*/
.weather-add-link:hover #bookmarksWeatherCarousel .carousel-indicators-container {
	opacity: 1;
	transition: all .5s ease;
}
#bookmarksWeatherCarousel .carousel-inner {
	min-height: 30.4rem;
}
#bookmarksWeatherCarousel .carousel-indicators-container {
	display: flex;
	opacity: 0;
	justify-content: center;
	min-height: 0rem;
	margin-top: 0rem;
	position: relative;
	transition: all .5s ease;
}
#bookmarksWeatherCarousel .carousel-indicators {
	position: relative;
	margin: 0;
	padding: 0;
	bottom: 0;
	display: flex;
}
#bookmarksWeatherCarousel .carousel-indicators [data-bs-target] {
	height: .65rem;
	width: .65rem;
	border-radius: 50%;
	background-color: var(--custom-gray-color);
	opacity: .8;
	outline: 0;
	margin: .3rem;
}
#bookmarksWeatherCarousel .carousel-indicators .active {
	background-color: var(--custom-red-color);
	opacity: .8;
}
#bookmarksWeatherCarousel .carousel-indicators:hover [data-bs-target],
#bookmarksWeatherCarousel .carousel-indicators:hover .active {
	opacity: 1;
}

/*-- Weather Carousel Prev/Next Buttons --*/
#bookmarksWeatherCarousel .carousel-control-prev,
#bookmarksWeatherCarousel .carousel-control-prev:focus,
#bookmarksWeatherCarousel .carousel-control-next,
#bookmarksWeatherCarousel .carousel-control-next:focus {
	background:  var(--main-background-color);
	width: 5rem;
	height: 2.5rem;
	z-index: 9999;
	border: 4px solid var(--border-solid-color);
	opacity: .95;
	transition: all .5s ease;
	color: var(--border-solid-color);
}
#bookmarksWeatherCarousel .carousel-control-prev:hover,
#bookmarksWeatherCarousel .carousel-control-next:hover {
	border: 4px solid var(--hover-focus-color);
	color: var(--hover-focus-color);
}
#bookmarksWeatherCarousel .bi-caret-left-fill,
#bookmarksWeatherCarousel .bi-caret-right-fill {
	color: var(--border-solid-color);
	font-size: 1.4rem;
	transition: all .5s ease;
}
#bookmarksWeatherCarousel .carousel-control-prev:hover .bi-caret-left-fill,
#bookmarksWeatherCarousel .carousel-control-next:hover .bi-caret-right-fill {
	color: var(--hover-focus-color);
}

/*-- Weather Carousel Prev/Next Buttons Light Mode --*/
[data-theme="light"] #bookmarksWeatherCarousel .carousel-control-prev,
[data-theme="light"] #bookmarksWeatherCarousel .carousel-control-prev:focus,
[data-theme="light"] #bookmarksWeatherCarousel .carousel-control-next,
[data-theme="light"] #bookmarksWeatherCarousel .carousel-control-next:focus {
	background: var(--main-background-color-light);
	border: 4px solid var(--border-solid-color-light);
	color: var(--main-light-mode-font-color);
}
[data-theme="light"] #bookmarksWeatherCarousel .carousel-control-prev:hover,
[data-theme="light"] #bookmarksWeatherCarousel .carousel-control-next:hover {
	border: 4px solid var(--hover-focus-color-light);
	color: var(--hover-focus-color-light);
}
[data-theme="light"] #bookmarksWeatherCarousel .bi-caret-left-fill,
[data-theme="light"] #bookmarksWeatherCarousel .bi-caret-right-fill {
	color: var(--border-solid-color-light);
}
[data-theme="light"] #bookmarksWeatherCarousel .carousel-control-prev:hover .bi-caret-left-fill,
[data-theme="light"] #bookmarksWeatherCarousel .carousel-control-next:hover .bi-caret-right-fill {
	color: var(--hover-focus-color-light);
}

/*-- Set Weather Location --*/
.weather-instructions i {
	font-size: 1.6rem;
}
#bookmarksWeatherCarousel a {
	color: var(--light-purple-color);
}
[data-theme="light"] #bookmarksWeatherCarousel a {
	color: var(--mid-purple-color);
}
input#weather-url,
button.weather-set {
	width: 100%;
	background-color:  var(--main-background-color);
	border: 3px solid var(--border-solid-color);
	border-radius: 0;
	color: var(--light-purple-color);
	font-size: 1rem;
	max-height: 2.5rem;
	padding: .35rem .5rem .35rem;
	transition: all .5s ease;
}
[data-theme="light"] input#weather-url,
[data-theme="light"] button.weather-set {
	background-color: var(--main-background-color-light);
	border: 3px solid var(--border-solid-color-light);
	color: var(--main-light-mode-font-color);
}
input#weather-url:hover,
button.weather-set:hover {
	border: 3px solid var(--hover-focus-color);
}
[data-theme="light"] input#weather-url:hover,
[data-theme="light"] button.weather-set:hover {
	border: 3px solid var(--hover-focus-color-light);
}
.weather-disclaimer {
	font-size: .9rem;
	opacity: .5;
	padding: .5rem .5rem 0;
}

/*-- Bookmarks Center Column --*/
.bookmarks-center-col {
	min-height: 34.8rem;
}

/*-- Bookmarks Main Title Tooltip --*/
#bookmarks-tooltip,
#bookmarks-reviews-tooltip {
  min-height: 2rem;
  font-size: 1.3rem;
}

/*-- Bookmarks Inner --*/
.bookmarks-tooltip-bg {
	background-color:  var(--main-background-color);
	border: 3px solid var(--border-solid-color);
}
[data-theme="light"] .bookmarks-tooltip-bg {
	background-color: var(--main-background-color-light);
	border: 3px solid var(--border-solid-color-light);
}

/*-- Bookmarks Main Icons --*/
img.bookmark-image {
	width: 3rem;
	border-radius: 20%;
	box-shadow: 0 2px 12px var(--main-background-color);
	opacity: .83;
	transition: all .5s ease;
	cursor: pointer;
}
img.bookmark-image:hover {
	opacity: 1;
	box-shadow: 0 2px 14px var(--plain-black-color);
}
[data-theme="light"] img.bookmark-image {
	box-shadow: 0 2px 12px var(--border-bg-color-light);
}
[data-theme="light"] img.bookmark-image:hover {
	box-shadow: 0 2px 14px var(--main-background-color-light);
}

/*-- Bookmarks Reviews Title Tooltip --*/
#bookmarks-reviews-tooltip {
	min-height: 2.3rem;
	font-size: 1.4rem;
}

/*-- Bookmarks Reviews Icons --*/
img.bookmark-image-reviews {
	width: 3rem;
	border-radius: 20%;
	box-shadow: 0 2px 12px var(--main-background-color);
	opacity: .83;
	transition: all .5s ease;
	cursor: pointer;
}
img.bookmark-image-reviews:hover {
	opacity: 1;
	box-shadow: 0 2px 14px var(--plain-black-color);
}
[data-theme="light"] img.bookmark-image-reviews {
	box-shadow: 0 2px 12px var(--border-bg-color-light);
}
[data-theme="light"] img.bookmark-image-reviews:hover {
	box-shadow: 0 2px 14px var(--main-background-color-light);
}

/*-- Bookmarks Google Search Input --*/
#searchInput {
	padding: 10px 15px;
	background-color: var(--border-solid-color);
	border: 0;
	width: 100%;
	min-height: 2.6rem;
	border-radius: 1.5rem 0 0 1.5rem;
}
[data-theme="light"] #searchInput {
	background-color: var(--border-bg-color-light);
}

/*-- Google Search Input Placeholder Text Color --*/
#searchInput::placeholder {
	color: var(--light-purple-color);
}
[data-theme="light"] #searchInput::placeholder {
	color: var(--mid-purple-color);
}

/*-- Google Search Input Text Color --*/
#searchInput[type="text"] {
	color: var(--custom-white-color);
}
[data-theme="light"] #searchInput[type="text"] {
	color: var(--content-background-color);
}

/*-- Bookmarks Slider Column --*/
.bookmarks-slider-col {
	min-height: 35rem;
	max-height: 35rem;
}

/*-- Bookmarks Google Search Button --*/
#searchButton {
	padding: 10px 20px;
	background-color: var(--border-solid-color);
	color: var(--light-purple-color);
	border: none;
	cursor: pointer;
	width: 100%;
	min-height: 2.6rem;
	outline: 0;
	border-radius: 0 1.5rem 1.5rem 0;
}
[data-theme="light"] #searchButton {
	color: var(--mid-purple-color);
	background-color: var(--border-bg-color-light);
}
#searchButton:hover,
#searchButton.active {
   color: var(--custom-white-color);
}
[data-theme="light"] #searchButton:hover,
[data-theme="light"] #searchButton.active {
   color: var(--main-background-color);
}
#searchButton i {
	transition: all .5s ease;
}

/*-- Bookmarks Carousel Column --*/
#bookmarksColumnCarousel .carousel-inner {
	min-height: 28.9rem;
}
#bookmarksColumnCarousel .carousel-indicators-container {
	display: flex;
	justify-content: center;
	min-height: 0rem;
	margin-top: 0rem;
	position: relative;
}
#bookmarksColumnCarousel .carousel-indicators {
	position: relative;
	margin: 0;
	padding: 0;
	bottom: 0;
	display: flex;
}
#bookmarksColumnCarousel .carousel-indicators [data-bs-target] {
	height: .65rem;
	width: .65rem;
	border-radius: 50%;
	background-color: var(--custom-gray-color);
	opacity: .8;
	outline: 0;
	margin: .3rem;
}
#bookmarksColumnCarousel .carousel-indicators .active {
	background-color: var(--custom-red-color);
	opacity: .8;
}
#bookmarksColumnCarousel .carousel-indicators:hover [data-bs-target],
#bookmarksColumnCarousel .carousel-indicators:hover .active {
	opacity: 1;
}

/*-- Bookmarks Carousel Prev/Next Buttons --*/
.carousel-control-prev,
.carousel-control-prev:focus,
.carousel-control-next,
.carousel-control-next:focus {
	background:  var(--main-background-color);
	width: 5rem;
	height: 2.5rem;
	z-index: 9999;
	border: 4px solid var(--border-solid-color);
	opacity: .95;
	transition: all .5s ease;
	color: var(--border-solid-color);
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
	border: 4px solid var(--hover-focus-color);
	color: var(--hover-focus-color);
}
.bi-caret-left-fill,
.bi-caret-right-fill {
	color: var(--border-solid-color);
	font-size: 1.4rem;
	transition: all .5s ease;
}
.carousel-control-prev:hover .bi-caret-left-fill,
.carousel-control-next:hover .bi-caret-right-fill {
	color: var(--hover-focus-color);
}

/*-- Bookmarks Carousel Prev/Next Buttons --*/
[data-theme="light"] .carousel-control-prev,
[data-theme="light"] .carousel-control-prev:focus,
[data-theme="light"] .carousel-control-next,
[data-theme="light"] .carousel-control-next:focus {
	background: var(--main-background-color-light);
	border: 4px solid var(--border-solid-color-light);
	color: var(--main-light-mode-font-color);
}
[data-theme="light"] .carousel-control-prev:hover,
[data-theme="light"] .carousel-control-next:hover {
	border: 4px solid var(--hover-focus-color-light);
	color: var(--hover-focus-color-light);
}
[data-theme="light"] .bi-caret-left-fill,
[data-theme="light"] .bi-caret-right-fill {
	color: var(--border-solid-color-light);
}
[data-theme="light"] .carousel-control-prev:hover .bi-caret-left-fill,
[data-theme="light"] .carousel-control-next:hover .bi-caret-right-fill {
	color: var(--hover-focus-color-light);
}

/*-- Team Time Zones -*/
.clock-zones {
	background-color:  var(--main-background-color);
	color: var(--light-purple-color);
	border: 3px solid var(--border-solid-color);
	padding: .7rem;
	margin: .45rem 0;
}
[data-theme="light"] .clock-zones {
	background-color: var(--main-background-color-light);
	color: var(--main-light-mode-font-color);
	border: 3px solid var(--border-solid-color-light);
}
.clock-zones p,
.clock-zones span {
	line-height: .9rem;
}
.clock-zones span {
	font-weight: 500;
	font-size: 1.15rem;
}

/*-- Countdown Timer --*/
.timer-container {
	padding: .5rem 1rem;
	text-align: center;
}
#countdown-display {
	font-size: 2.4rem;
	font-family: Consolas, "Courier New", Courier, monospace;
	color: var(--gray-title-color);
	letter-spacing: -2px;
}
[data-theme="light"] #countdown-display {
	color: var(--content-background-color);
}
.controls {
	display: flex;
	justify-content: center;
}
.countdown-input input {
	width: 100%;
	background-color:  var(--main-background-color)!important;
	color: var(--custom-gray-color);
	border: 4px solid var(--border-solid-color);
	transition: all .5s ease;
}
[data-theme="light"] .countdown-input input {
	background-color: var(--main-background-color-light)!important;
	color: var(--mid-purple-color);
	border: 4px solid var(--border-solid-color-light);
}
.countdown-input input:hover,
.countdown-input input:focus {
	color: var(--plain-white-color);
	border: 4px solid var(--hover-focus-color);
}
[data-theme="light"] .countdown-input input:hover,
[data-theme="light"] .countdown-input input:focus {
	color: var(--mid-purple-color);
	border: 4px solid var(--hover-focus-color-light);
}
.countdown-input input::placeholder {
	color: var(--light-purple-color);
	opacity: .8;
	transition: all .5s ease;
}
[data-theme="light"] .countdown-input input::placeholder {
	color: var(--mid-purple-color);
}
.countdown-input input:hover::placeholder,
.countdown-input input:focus::placeholder {
	opacity: 1;
}
/*-- Countdown Start/Stop & Reset Buttons --*/
.start-stop {
	padding: .5rem .8rem;
	border: none;
	cursor: pointer;
	background-color:  var(--main-background-color);
	color: var(--copied-color);
	border: 4px solid var(--border-solid-color);
	min-width: 6rem;
	transition: all .5s ease;
}
[data-theme="light"] .start-stop {
	background-color: var(--main-background-color-light);
	color: var(--copied-color-light);
	border: 4px solid var(--border-solid-color-light);
}
.start-stop:hover {
	border: 4px solid var(--hover-focus-color);
}
[data-theme="light"] .start-stop:hover {
	border: 4px solid var(--hover-focus-color-light);
}

.start-stop.running {
	color: var(--custom-red-color); /* Red (Stop) */
}
.start-stop.running:hover {
	color: var(--custom-red-color); /* Red (Stop) */
	border: 4px solid var(--hover-focus-color);
}
[data-theme="light"] .start-stop.running:hover {
	border: 4px solid var(--hover-focus-color-light);
}
.reset-btn {
	padding: .5rem .8rem;
	border: none;
	cursor: pointer;
	background-color:  var(--main-background-color);
	color: var(--main-background-color-light);
	border: 4px solid var(--border-solid-color);
	min-width: 7rem;
	transition: all .5s ease;
}
[data-theme="light"] .reset-btn {
	background-color: var(--main-background-color-light);
	color: var(--main-light-mode-font-color);
	border: 4px solid var(--border-solid-color-light);
}
.reset-btn:hover {
	border: 4px solid var(--hover-focus-color);
}
[data-theme="light"] .reset-btn:hover {
	border: 4px solid var(--hover-focus-color-light);
}

/*-- Stopwatch --*/
.stopwatch-border {
	border-top: 4px solid var(--hover-focus-color);
}
[data-theme="light"] .stopwatch-border {
	border-top: 4px solid var(--main-background-color-light);
}
#stopwatch-display {
	font-size: 2.2rem;
	font-family: Consolas, "Courier New", Courier, monospace;
	letter-spacing: -4px;
	color: var(--gray-title-color);
}
[data-theme="light"] #stopwatch-display {
	color: var(--content-background-color);
}
@media screen and (max-width: 1150px) {
	#stopwatch-display {
		font-size: 1.9rem;
	}
}
@media screen and (max-width: 992px) {
	#stopwatch-display {
		font-size: 2.2rem;
	}
}

/*-- Client Time Calculator --*/
.time-calculator input#time-display {
	background-color:  var(--main-background-color);
	color: var(--light-purple-color);
	width: 100%;
	height: 3.6rem;
	margin-bottom: 10px;
	padding: 1.2rem;
	text-align: right;
	font-size: 1.8rem;
	border: 3px solid var(--border-solid-color);
}
[data-theme="light"] .time-calculator input#time-display {
	background-color: var(--main-background-color-light);
	color: var(--main-light-mode-font-color);
	border: 3px solid var(--border-solid-color-light);
}
.time-calculator button {
	width: 100%;
	height: 2.8rem;
	font-size: 1.2rem;
	border: 3px solid var(--border-solid-color);
	cursor: pointer;
	background-color:  var(--main-background-color);
	color: var(--light-purple-color);
	transition: all .5s ease;
}
[data-theme="light"] .time-calculator button {
	background-color: var(--main-background-color-light);
	color: var(--main-light-mode-font-color);
	border: 3px solid var(--border-solid-color-light);
}
.time-calculator button:hover {
	border: 3px solid var(--hover-focus-color);
}
[data-theme="light"] .time-calculator button:hover {
	border: 3px solid var(--hover-focus-color-light);
}
.time-calculator button.calc-clear {
	width: 100%;
	margin-top: .8rem;
}
.time-calculator #time-history {
	font-size: 1.25rem;
	line-height: 1.6rem;
	margin-top: .8rem;
	color: var(--light-purple-color);
}
[data-theme="light"] .time-calculator #time-history {
	color: var(--mid-purple-color);
}



/*==================
CASE/SPECIAL CHARACTER CONVERTER & RENDER SEARCH
===================*/

/*-- Convert Text / Entities Textareas --*/
textarea#inputText,
textarea#convertedResult {
	resize: vertical;
	width: 100%; 
	padding: 5px;
	border: 0;
	border: 5px solid var(--border-solid-color);
	background:  var(--main-background-color);
	color: var(--custom-white-color);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 1rem 0 .5rem;
	font-size: 1.1rem;
	padding: .5rem;
	transition: all .5s ease !important;
	min-height: 10.2rem;
}
textarea#convertedResult {
	font-size: 1.15rem;
}
textarea#inputText:hover,
textarea#inputText:focus,
textarea#convertedResult:hover,
textarea#convertedResult:focus {
	border: 5px solid var(--hover-focus-color);
}
[data-theme="light"] textarea#inputText:hover,
[data-theme="light"] textarea#inputText:focus,
[data-theme="light"] textarea#convertedResult:hover,
[data-theme="light"] textarea#convertedResult:focus {
	border: 5px solid var(--hover-focus-color-light);
}
[data-theme="light"] textarea#inputText,
[data-theme="light"] textarea#convertedResult {
	border: 5px solid var(--border-solid-color-light);
	background: var(--main-background-color-light);
	color: var(--light-mode-btn-font-color);
}
textarea#inputText::placeholder {
	color: var(--light-purple-color);
	opacity: .65;
	transition: all .5s ease !important;
}
[data-theme="light"] textarea#inputText::placeholder {
	color: var(--mid-purple-color);
}
textarea#inputText:hover::placeholder,
textarea#inputText:focus::placeholder {
	opacity: 1;
}
/*-- Convert Text / Entities Buttons --*/
.text-convert-btn-container .btn-custom {
	width: 100%!important;
}
.text-copy-btn.copied,
.text-copy-btn.copied:focus,
.text-copy-btn.copied:hover {
	border: 4px solid var(--copied-color)!important;
	color: var(--copied-color)!important;
}
[data-theme="light"] .text-copy-btn.copied,
[data-theme="light"] .text-copy-btn.copied:focus,
[data-theme="light"] .text-copy-btn.copied:hover {
	border: 4px solid var(--copied-color-light)!important;
	color: var(--copied-color-light)!important;
}


/*-- Render Issue Search --*/
.searchable-data {
	overflow: scroll;
}
table {
	width: 100%;
	border-collapse: collapse;
	border-top: 0!important;
}
#renderSearchInput {
	padding: 10px 15px;
	background-color: var(--main-background-color);
	border: 3px solid var(--hover-focus-color);
	border-bottom: 1px solid var(--hover-focus-color);
	width: 100%;
	min-height: 2.6rem;
	border-radius: 0;
	font-size: 1.1rem;
	outline: none;
	color: var(--plain-white-color);
	transform: all .5s ease;
}
[data-theme="light"] #renderSearchInput {
	background-color: var(--border-bg-color-light);
	border: 3px solid var(--hover-focus-color-light);
	border-bottom: 1px solid var(--hover-focus-color-light);
	color: var(--plain-black-color);
}
#renderSearchInput::placeholder {
	color: var(--light-purple-color);
	opacity: .7;
	transition: all .5s ease !important;
}
#renderSearchInput:hover::placeholder,
#renderSearchInput:focus::placeholder {
	opacity: 1;
}
[data-theme="light"] #renderSearchInput::placeholder {
	color: var(--mid-purple-color);
}

/*-- Highlight Text During Search --*/
.highlight {
	background-color: #FFFF00;
	color: var(--plain-black-color);
}

/*-- Resizable Div / Scrollable Content --*/
.resizable-div {
	height: 560px;
	min-height: 560px;
	position: relative;
}
.scrollable-content {
	height: 100%;
	height: 560px;
	min-height: 560px;
	overflow-y: auto;
	scrollbar-width: none!important; /* Firefox Hide Scrollbar */
	-ms-overflow-style: none!important; /* IE and Edge (legacy) Hide Scrollbar */
}
.scrollable-content::-webkit-scrollbar {
	display: none!important; /* Chrome, Safari, and newer Edge Hide Scrollbar */
}

/*-- Render Table --*/
.render-table-header th {
	font-size: .9rem !important;
	padding: .4rem .2rem;
	border: 3px solid var(--hover-focus-color);
	border-bottom: 1px solid var(--hover-focus-color);
}
[data-theme="light"] .render-table-header th {
	border: 3px solid var(--hover-focus-color-light);
	border-bottom: 1px solid var(--hover-focus-color-light);
}
#renderDataTable {
	font-size: 1rem;
}
#renderDataTable .language-html {
	font-size: 1.01rem !important;
}
.table>:not(caption)>*>* { 
	background-color: var(--content-background-color)!important;
	color: var(--plain-white-color);
	text-align: left;
	border: 3px solid var(--hover-focus-color);
	border-top: 1px solid var(--hover-focus-color);
}
[data-theme="light"] .table>:not(caption)>*>* { 
	background-color: var(--content-background-color-light)!important;
	color: var(--plain-black-color);
	border: 3px solid var(--hover-focus-color-light);
	border-top: 1px solid var(--hover-focus-color-light);
}

/*-- Resize Handle --*/
.render-resize-handle {
	transition: all .5s ease;
	position: absolute;
	bottom: 0px;
	left: 0; 
	right: 0;
	height: 16px;
	cursor: ns-resize;
	z-index: 9999;
	transition: all .5s ease;
	background-color: var(--hover-focus-color);
	border-top: 4px solid var(--hover-focus-color);
	border-bottom: 5px solid var(--hover-focus-color);
}
[data-theme="light"] .render-resize-handle {
	background-color: var(--hover-focus-color-light);
	border-top: 4px solid var(--hover-focus-color-light);
	border-bottom: 5px solid var(--hover-focus-color-light);
}
.render-resize-handle:hover {
	background-color: var(--border-solid-color);
	border-top: 5px solid var(--border-solid-color);
	border-bottom: 5px solid var(--border-solid-color);
}
[data-theme="light"] .render-resize-handle:hover {
	background-color: var(--border-solid-color-light);
	border-top: 5px solid var(--border-solid-color-light);
	border-bottom: 5px solid var(--border-solid-color-light);
}

/*-- Render Code Snippet Background Color --*/
td pre code *::selection,
td .hljs::selection,
td code.hljs {
	background-color: var(--content-background-color);
	color: #eeeeee;
	text-shadow: none!important;
}
[data-theme="light"] td pre code *::selection,
[data-theme="light"] td .hljs::selection,
[data-theme="light"] td code.hljs {
	background-color: #F6F5EC!important;
	color: var(--content-background-color);
	text-shadow: none!important;
}




/*-- Copy Code Snippet Icon --*/
.copy-container {
	display: flex;
	justify-content: flex-end;
}
.render-copy-icon {
	background: none;
	border: none;
	cursor: pointer;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	position: absolute;
	top: 7px;
	right: 7px;
}
.render-copy-icon.bi-copy {
	font-size: 1.25rem;
	color: var(--text-area-resize-handle-color);
	transition: all .5s ease;
	opacity: .6;
}
[data-theme="light"] .render-copy-icon.bi-copy {
	color: var(--main-light-mode-font-color);
}
.render-copy-icon.bi-copy:hover {
	opacity: .6;
	color: var(--gray-title-color);
}
[data-theme="light"] .render-copy-icon.bi-copy:hover {
	color: var(--plain-black-color);
}
.render-copy-icon.bi-copy.copied {
  background-color: var(--copied-color); /* Change color to indicate success */
  color: var(--plain-white-color);
  opacity: 1;
  scale: 1.05;
}
[data-theme="light"] .render-copy-icon.bi-copy.copied {
	color: var(--plain-black-color);
	background-color: var(--copied-color-light);
 }



/*=========================
SPECIAL CHARACTERS HTML ENTITY SEARCH SECTION
==========================*/

/*-- Special Characters HTML Entity Search Input --*/
#entitiesSearchInput {
	padding: 10px 15px;
	background-color: var(--border-solid-color);
	border: none;
	width: 100%;
	min-height: 2.6rem;
	border-radius: 1.5rem 0 0 1.5rem;
	font-size: 1.15rem;
	outline: none;
}
[data-theme="light"] #entitiesSearchInput {
	background-color: var(--border-bg-color-light);
}

/*-- Special Characters Entity Search Input Placeholder Text Color --*/
#entitiesSearchInput::placeholder {
	color: var(--light-purple-color);
}
[data-theme="light"] #entitiesSearchInput::placeholder {
	color: var(--mid-purple-color);
}

/*-- Special Characters Entity Search Input Text Color --*/
#entitiesSearchInput[type="text"] {
	color: var(--custom-white-color);
}
[data-theme="light"] #entitiesSearchInput[type="text"] {
	color: var(--content-background-color);
}

/*-- Special Characters HTML Entity Search Results Count --*/
.input-group-text {
	padding: 10px 34px 10px 0;
	background-color: var(--border-solid-color);
	color: var(--light-purple-color);
	border: none;
	width: 100%;
	min-height: 2.6rem;
	outline: 0;
	border-radius: 0 1.5rem 1.5rem 0;
	font-size: 1.15rem;
}
[data-theme="light"] .input-group-text {
	color: var(--mid-purple-color);
	background-color: var(--border-bg-color-light);
}

/*-- HTML Entity Search Column Content --*/
.entity-column {
	border: 4px solid var(--border-solid-color);
	background-color:  var(--main-background-color);
	text-align: center;
	padding: 1rem 1rem 1.75rem;
	text-align: center;
	color: var(--custom-white-color);
	scrollbar-width: none; /* Firefox Hide Scrollbar */
  -ms-overflow-style: none; /* IE and Edge (legacy) Hide Scrollbar */
}
.entity-column::-webkit-scrollbar {
	display: none; /* Chrome, Safari, and newer Edge Hide Scrollbar */
}
[data-theme="light"] .entity-column {
	border: 4px solid var(--border-solid-color-light);
	background-color: var(--main-background-color-light);
	color: var(--mid-purple-color);
}

/*-- Special Character Symbol --*/
.entity-character {
	font-size: 2.8rem;
	margin-bottom: .3rem;
	border: 3px solid  var(--main-background-color);
	cursor: pointer;
	transition: all .5s ease;
	font-family: var(--heading-font-family);
}
[data-theme="light"] .entity-character {
	border: 3px solid var(--main-background-color-light);
}
.entity-character:hover {
	border: 3px solid var(--border-solid-color);
}
[data-theme="light"] .entity-character:hover {
	border: 3px solid var(--border-solid-color-light);
}
.entity-character.copied {
	border: 3px solid var(--copied-color);
}
[data-theme="light"]  .entity-character.copied {
	border: 3px solid var(--copied-color-light);
}

/*-- Special Character Details (Name, Number, Description) --*/
.entity-details {
	padding: .1rem 0 .5rem;
}

/*-- Special Character Entity Name & Number --*/
.entity-name,
.entity-number {
	cursor: pointer;
	padding: 6px 3px;
	border: 3px solid var(--border-solid-color);
	border-radius: 0rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .1rem;
	opacity: .9;
	transition: all .5s ease;
}
[data-theme="light"] .entity-name,
[data-theme="light"] .entity-number {
	border: 3px solid var(--border-solid-color-light);
}
.entity-name {
	color: var(--custom-red-color);
}
.entity-number {
	color: var(--custom-blue-color);
}
.entity-name:hover,
.entity-number:hover {
	border: 3px solid var(--hover-focus-color);
	opacity: 1;
}
[data-theme="light"] .entity-name:hover,
[data-theme="light"] .entity-number:hover {
	border: 3px solid var(--hover-focus-color-light);
}

/*-- Special Character Entity Name & Number Copied Colors --*/
.entity-name.copied,
.entity-number.copied {
	border: 3px solid var(--copied-color);
	color: var(--copied-color);
}
[data-theme="light"] .entity-name.copied,
[data-theme="light"] .entity-number.copied {
	border: 3px solid var(--copied-color-light);
	color: var(--copied-color-light);
}

/*-- Special Character Description --*/
.entity-description {
	text-align: center;
	font-size: .95rem;
	color: var(--border-solid-color-light);
	padding-top: .3rem;
}
[data-theme="light"] .entity-description {
	color: var(--content-background-color);
}
@media (min-width: 992px) {
	.search-input-col {
		max-width: 7rem!important;
	}
}



/*=========================
DEV eventS & NEWS SECTION
==========================*/

/*-- Set Todo Column Min-Height to Match Right Column --*/
@media (min-width: 992px) {
	.event-news-todo-col {
		min-height: 30.2rem;
	}
}

/*-- Todo Input --*/
.todo-input-container {
	display: flex; 
	width: 100%;
	border: 4px solid var(--border-solid-color);
	transition: all .5s ease;
}
[data-theme="light"] .todo-input-container {
	border: 4px solid var(--border-solid-color-light);
}
.todo-input-container.focused {
  border: 4px solid var(--hover-focus-color);
}
[data-theme="light"] .todo-input-container.focused {
	border: 4px solid var(--hover-focus-color-light);
}
.todo-input {
	flex-grow: 1;
	outline: 0;
	margin: 0;
	border: 0;
	padding-left: .5rem;
	background:  var(--main-background-color);
}
[data-theme="light"] .todo-input {
	background: var(--main-background-color-light);
}

/*-- Dev events & News Input Placeholder Text Color --*/
.todo-input::placeholder {
	color: var(--light-purple-color);
	opacity: .7;
	transition: all .5s ease;
}
[data-theme="light"] .todo-input::placeholder {
	color: var(--mid-purple-color);
}
.todo-input:hover::placeholder,
.todo-input:focus::placeholder {
	opacity: 1;
}
@-moz-document url-prefix() { /*-- Firefox Prevent Opacity Change --*/
	.todo-input::placeholder {
		opacity: 1;
	}
 }

/*-- events & News Search Input Text Color --*/
.todo-input[type="text"] {
	color: var(--custom-white-color);
}
[data-theme="light"] .todo-input[type="text"] {
	color: var(--content-background-color);
}

/*-- Todo Buttons/Filters --*/
.todo-button, .filter-btn {
	width: 3rem;
	height: 3.4rem;
	margin: 0;
	border: 0;
	color: var(--main-background-color-light);
	font-size: 1.2rem;
	background:  var(--main-background-color);
	transition: all .5s ease;
}
[data-theme="light"] .todo-button,
[data-theme="light"] .filter-btn {
	color: var(--content-background-color);
	background: var(--border-solid-color-light);
}
.todo-button:hover,
.filter-btn:hover,
.filter-btn.active {
   background-color: var(--border-solid-color);
   color: var(--plain-white-color);
}
[data-theme="light"] .todo-button:hover,
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.active {
   background-color: var(--hover-focus-color-light);
   color: var(--plain-white-color);
}

/*-- New Created Todos Container & Todo Items --*/
.todo-container {
   display: flex;
   justify-content: center;
   align-items: center;
}
.todo-list {
   min-width: 100%;
   list-style: none;
   padding-left: 0;
}
.todo {
   margin: 0.6rem 0;
   background:  var(--main-background-color);
   color: var(--gray-title-color);
   font-size: 1.2rem;
   display: flex;
   justify-content: space-between;
   align-items: stretch;
   transition: all .5s ease;
   border: 4px solid var(--border-solid-color);
	text-align: left;
	align-items: stretch;
}
[data-theme="light"] .todo {
   background: var(--main-background-color-light);
   color: var(--content-background-color);
   border: 4px solid var(--border-solid-color-light);
}
.todo-list {
	margin-bottom: 0!important;
}
.todo .todo-item {
	flex-grow: 1;
	padding: .8rem;
	display: flex;
	align-items: center;
	cursor: move; /* Sorting Cursor */
	word-break: break-word;
}
.todo:hover {
	border: 4px solid var(--hover-focus-color);
}
[data-theme="light"] .todo:hover {
	border: 4px solid var(--hover-focus-color-light);
}

/*-- Todo Completed & Trash Buttons */
.complete-btn,
.trash-btn {
   color: var(--main-background-color-light);
   font-size: 1.4rem;
	background:  var(--main-background-color);
   border: none;
   padding: 0rem .8rem;
   cursor: pointer;
	transition: all .5s ease;
	display: flex;
   align-items: center;
   justify-content: center;
}
[data-theme="light"] .complete-btn,
[data-theme="light"] .trash-btn {
   color: var(--content-background-color);
	background: var(--border-solid-color-light);
}
.trash-btn {
	font-size: 1.15rem;
}
.complete-btn:hover,
.trash-btn:hover {
	background-color: var(--border-solid-color);
   color: var(--plain-white-color);
}
[data-theme="light"] .complete-btn:hover,
[data-theme="light"] .trash-btn:hover {
	background-color: var(--hover-focus-color-light);
   color: var(--plain-white-color);
}
.fa-trash,
.fa-check { /* void clicking icons */
	pointer-events: none;
}

/*-- Completed Todo --*/
.completed {
	text-decoration: line-through;
	text-decoration-color: var(--custom-red-color); 
   text-decoration-thickness: 3px;
   opacity: .5;
	transition: all .5s ease;
}
.completed:hover {
   opacity: .9;
}
.filtered {
   display: none;
}

/*--
END Todo Styling
START event Right Column & event Calendar
--*/

/*-- Custom Button for event Popup Col & Other Locations --*/
.btn-custom,
.btn-custom:focus {
	background-color:  var(--main-background-color)!important;
	color: var(--custom-gray-color);
	border: 4px solid var(--border-solid-color);
	padding: .6rem 2rem !important;
	min-width: 10rem;
	transition: all .5s ease;
	font-size: 1.1rem;
	letter-spacing: .05rem;
	font-weight: 500;
	cursor: pointer;
	outline: none;
	border-radius: 0;
}
.btn-custom:hover,
.btn-custom.active {
	color: var(--plain-white-color);
	border: 4px solid var(--hover-focus-color)!important;
}
[data-theme="light"] .btn-custom,
[data-theme="light"] .btn-custom:focus {
	background-color: var(--main-background-color-light)!important;
	color: var(--main-light-mode-font-color);
	border: 4px solid var(--border-solid-color-light);
}
[data-theme="light"] .btn-custom:hover,
[data-theme="light"] .btn-custom.active {
	color: var(--light-mode-btn-font-color);
	border: 4px solid var(--hover-focus-color-light)!important;
}

/*-- Dev event Calendar Lightbox Popup --*/
#event-popup {
	position: relative;
	background: var(--content-background-color);
	padding: 20px;
	width: auto;
	max-width: 1050px;
	margin: 20px auto;
	color: var(--plain-white-color);
	border-radius: 1rem;
}
[data-theme="light"] #event-popup {
	background: var(--main-background-color-light);
	color: var(--light-mode-btn-font-color);
}

/*-- Magnific Popup Close x Icon --*/
.mfp-close {
	color: var(--main-background-color-light)!important;
	font-size: 2.5rem!important;
	margin-top: 1.2rem !important;
	margin-right: 1.2rem !important;
}
.mfp-content {
	vertical-align: top !important;
	top: .5rem;
}

/*-- Upcoming Dev event Dynamic Content in Column --*/
.event-countdown-container {
	text-align: center;
	margin-bottom: 1rem;
}
.event-days {
	color: var(--light-purple-color);
	font-weight: 700;
	font-size: 2rem;
}
.event-today {
	color: var(--light-purple-color);
	font-weight: 700;
	font-size: 1.7rem;
}
.event-topic, .event-presenter {
	font-size: 1.5rem;
	color: var(--light-purple-color);
}
[data-theme="light"] .event-days,
[data-theme="light"] .event-today,
[data-theme="light"] .event-topic,
[data-theme="light"] .event-presenter {
	color: var(--mid-purple-color);
}

/*-- Dev event Calendar in Lightbox Popup --*/
.event-schedule {
	width: 100%;
	font-size: 1rem;
}
.event-schedule th,
.event-schedule td {
	border: 2px solid var(--dark-purple-color);
	padding: .5rem;
}
[data-theme="light"] .event-schedule th,
[data-theme="light"] .event-schedule td {
	border: 2px solid var(--hover-focus-color-light);
}
.event-schedule th {
	background-color:  var(--main-background-color);
}
[data-theme="light"] .event-schedule th {
	background-color: var(--main-background-color-light);
}
.next-event-row {
	background-color:  var(--main-background-color);
	color: var(--light-purple-color);
	font-weight: bold;
	font-size: 1.1rem!important;
}
[data-theme="light"] .next-event-row {
	background-color: var(--border-solid-color-light);
	color: var(--content-background-color);
}



/*=========================
EMOJI SEARCH SECTION
==========================*/

/*-- Emoji Search Input --*/
#emojisSearchInput {
	padding: 10px 15px;
	background-color: var(--border-solid-color);
	border: none;
	width: 100%;
	min-height: 2.6rem;
	border-radius: 1.5rem 0 0 1.5rem;
	font-size: 1.15rem;
	outline: none;
}
[data-theme="light"] #emojisSearchInput {
	background-color: var(--border-bg-color-light);
}

/*-- Emoji Search Input Placeholder Text Color --*/
#emojisSearchInput::placeholder {
	color: var(--light-purple-color);
}
[data-theme="light"] #emojisSearchInput::placeholder {
	color: var(--mid-purple-color);
}
/*-- Emoji Search Input Text Color --*/
#emojisSearchInput[type="text"] {
	color: var(--custom-white-color);
}
[data-theme="light"] #emojisSearchInput[type="text"] {
	color: var(--content-background-color);
}

/*-- Emoji Search Results Count --*/
.emoji-results.input-group-text {
	width: 100%;
}

/*-- Emoji Search Column Content --*/
.emoji-column {
	border: 4px solid var(--border-solid-color);
	background-color:  var(--main-background-color);
	text-align: center;
	padding: .8rem 1rem 1rem;
	text-align: center;
	color: var(--custom-white-color);
	max-height: 19.5rem;
	overflow-y: scroll;
	scrollbar-width: none; /* Firefox Hide Scrollbar */
  -ms-overflow-style: none; /* IE and Edge (legacy) Hide Scrollbar */
}
.emoji-column::-webkit-scrollbar {
	display: none; /* Chrome, Safari, and newer Edge Hide Scrollbar */
}
[data-theme="light"] .emoji-column {
	border: 4px solid var(--border-solid-color-light);
	background-color: var(--main-background-color-light);
	color: var(--mid-purple-color);
}

/*-- Emoji Icon & Border/Copied Border --*/
.emoji-icon {
	font-size: 2.9rem;
	margin-bottom: .25rem;
	cursor: pointer;
	border: 3px solid  var(--main-background-color);
	transition: all .5s ease;
}
[data-theme="light"] .emoji-icon {
	border: 3px solid var(--main-background-color-light);
}
.emoji-icon:hover {
	border: 3px solid var(--border-solid-color);
}
[data-theme="light"] .emoji-icon:hover {
	border: 3px solid var(--border-solid-color-light);
}
.emoji-icon.copied {
	border: 3px solid var(--copied-color);
}
[data-theme="light"] .emoji-icon.copied {
	border: 3px solid var(--copied-color-light);
}

/*-- Emoji Entity Name & Unicode --*/
.code-container {
	cursor: pointer;
	padding: 8px 3px;
	border: 3px solid var(--border-solid-color);
	border-radius: 0rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .1rem;
	opacity: .9;
	transition: all .5s ease;
}
.code-container {
	border: 3px solid var(--border-solid-color);
}
[data-theme="light"] .code-container {
	border: 3px solid var(--border-solid-color-light);
}
.code-container:nth-of-type(1) {
	margin-bottom: .65rem;
}
.code-container pre {
	color: var(--custom-blue-color);
	margin-bottom: 0;
	transition: all .5s ease;
}
.code-container:nth-of-type(2) pre {
	color: var(--custom-red-color);
}
.code-container:hover {
	border: 3px solid var(--hover-focus-color);
	opacity: 1;
}
[data-theme="light"] .code-container:hover {
	border: 3px solid var(--hover-focus-color-light);
}

/*-- Emoji Entity & Unicode Copied Colors --*/
.code-container.copied {
	border: 3px solid var(--copied-color);
}
[data-theme="light"] .code-container.copied {
	border: 3px solid var(--copied-color-light);
}
.code-container.copied pre {
	color: var(--copied-color);
}
[data-theme="light"] .code-container.copied pre {
	color: var(--copied-color-light);
}

/*-- Emoji Name & Category Description --*/
.emoji-name {
	padding: 1rem 0 1rem;
	margin-bottom: 0;
	color: var(--gray-title-color);
	font-family: var(--heading-font-family);
}
.emoji-category {
	text-align: center;
	font-size: .9rem;
	color: --border-solid-color-light;
}
[data-theme="light"] .emoji-name,
[data-theme="light"] .emoji-category {
	color: var(--content-background-color);
}
@media (min-width: 992px) {
	.emoji-results.input-group-text {
		width: 85%;
	}
	.emoji-input-group {
		margin-left: 1rem!important;
	}
}
@media (min-width: 1100px) {
	.emoji-results.input-group-text {
		width: 65%;
	}
	.emoji-input-group {
		margin-left: 3rem!important;
	}
}



/*=========================
CODE SNIPPETS SECTION
==========================*/

/*-- Accordion & Accordion Body --*/
.accordion {
	--bs-accordion-border-color: var(--content-background-color)!important;
	--bs-accordion-border-width: .5rem!important;
	color: var(--content-background-color);
	background-color: var(--content-background-color);
}
[data-theme="light"] .accordion {
	background-color: var(--content-background-color-light);
}
.accordion-item {
	border: 8px solid var(--content-background-color);
	border-radius: 0!important;
}
[data-theme="light"] .accordion-item {
	border: 4px solid var(--content-background-color-light);
}
.accordion-item:first-of-type>.accordion-header .accordion-button,
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
	--bs-accordion-inner-border-radius: none!important;
}
.accordion-button.collapsed,
.accordion-button:not(.collapsed),
.accordion-button:focus {
	background-color:  var(--main-background-color);
	color: var(--custom-gray-color);
	border: 4px solid var(--border-solid-color);
	transition: all .5s ease;
	font-size: 1.15rem;
	outline: none;
	box-shadow: none;
}
[data-theme="light"] .accordion-button.collapsed,
[data-theme="light"] .accordion-button:not(.collapsed),
[data-theme="light"] .accordion-button:focus {
	background-color: var(--main-background-color-light);
	color: var(--content-background-color);
	border: 4px solid var(--border-solid-color-light);
}
.accordion-button.collapsed:hover {
	border: 4px solid var(--hover-focus-color);
}
[data-theme="light"] .accordion-button.collapsed:hover {
	border: 4px solid var(--hover-focus-color-light);
}
.accordion-body {
	background-color: var(--border-solid-color)!important;
	color: var(--custom-gray-color);
	padding: .2rem .8rem;
	border-radius: 0!important;
}
[data-theme="light"] .accordion-body {
	background-color: var(--border-solid-color-light)!important;
	color: var(--border-solid-color);
}
.accordion-item:last-of-type>.accordion-collapse {
	border-bottom-right-radius: 0!important;
	border-bottom-left-radius: 0!important;
}

/*-- Accordion Collapse Dot --*/
.accordion-button.collapsed::after {
	background-color: var(--custom-gray-color);
}
.accordion-button::after {
	width: .9rem;
	height: .9rem;
	border-radius: 100%;
	background-color: var(--custom-red-color);
	background-image: none !important;
}

/*-- Code Snippets Styling --*/
pre code {
	display: block;
	overflow-x: auto;
	white-space: break-spaces;
	padding: .2rem;
	background: var(--background);
	-webkit-text-size-adjust: none;
	text-align: left;
}
code.hljs {
	outline: 0;
}

/*-- Main Code Background & Font Color --*/
pre code *::selection,
.hljs::selection,
code.hljs {
	background-color: var(--border-solid-color);
	color: #eeeeee;
	text-shadow: none!important;
}
[data-theme="light"] pre code *::selection,
[data-theme="light"] .hljs::selection,
[data-theme="light"] code.hljs {
	background-color: var(--border-solid-color-light)!important;
	color: var(--border-solid-color);
	text-shadow: none!important;
}

/*-- Code Opening & Closing Tags Color --*/
.hljs-tag,
.hljs-meta,
.hljs-built_in {
	color: #568FF5!important;
}
[data-theme="light"] .hljs-tag,
[data-theme="light"] .hljs-meta,
[data-theme="light"] .hljs-built_in {
	color: #266ff2!important;
}

/*-- Code CSS Selector Color --*/
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class {
	color: #F9D749!important;
}
[data-theme="light"] .hljs-selector-tag,
[data-theme="light"] .hljs-selector-id,
[data-theme="light"] .hljs-selector-class {
	color: #735d04!important;
}

/*-- Code HTML Tag Name & Variable Name Color --*/
.hljs-number,
.hljs-name,
.function,
.hljs-title.function_,
.hljs-title,
.hljs-function > .hljs-keyword {
	color: #e7655d!important;
}
[data-theme="light"] .hljs-number,
[data-theme="light"] .hljs-name,
[data-theme="light"] .function,
[data-theme="light"] .hljs-title.function_,
[data-theme="light"] .hljs-title,
[data-theme="light"] .hljs-function > .hljs-keyword {
	color: #e03b31!important;
}

/*-- Code Attributes & Keywords Color --*/
.hljs-attr,
.hljs-keyword,
.hljs-selector-attr {
	color: #B384B0;
}
[data-theme="light"] .hljs-attr,
[data-theme="light"] .hljs-keyword,
[data-theme="light"] .hljs-selector-attr {
	color: #a0649c;
}

/*-- Code HREF, CSS Value, Number & String Color --*/
.hljs-number,
.hljs-params,
.hljs-string {
	color: #67b26d!important;
}
[data-theme="light"] .hljs-number,
[data-theme="light"] .hljs-params,
[data-theme="light"] .hljs-string {
	color: #4d9953!important;
}

/*-- Code CSS Property & Variable Color --*/
.hljs-attribute,
.hljs-variable {
	color: #EB9563!important;
}
[data-theme="light"] .hljs-attribute,
[data-theme="light"] .hljs-variable {
	color: #e2671f!important;
}

/*-- Code Comments Color --*/
.hljs-comment {
	color: #839599!important;
}
[data-theme="light"] .hljs-comment {
	color: #697c80!important;
}

/*-- Unused Highlight.js Classes
.hljs-string,
.hljs-section,
.hljs-selector-class,
.hljs-template-variable,
.hljs-deletion {
  color: var(--custom-red-color)!important;
}
--*/

/*-- Copy Code Snippet Icon --*/
.copy-container {
	display: flex;
	justify-content: flex-end;
}
.copy-icon {
	background: none;
	border: none;
	cursor: pointer;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	position: absolute;
	margin-top: .2rem;
}
.copy-icon.bi-copy {
	font-size: 1.25rem;
	color: var(--text-area-resize-handle-color);
	transition: all .4s ease;
}
[data-theme="light"] .copy-icon.bi-copy {
	color: var(--main-light-mode-font-color);
}
.copy-icon.bi-copy:hover {
	opacity: 1;
	color: var(--gray-title-color);
}
[data-theme="light"] .copy-icon.bi-copy:hover {
	color: var(--plain-black-color);
}
.copy-icon.bi-copy.copied {
  background-color: var(--copied-color); /* Change color to indicate success */
  color: var(--plain-white-color);
  scale: 1.05;
}
[data-theme="light"] .copy-icon.bi-copy.copied {
	color: var(--plain-black-color);
	background-color: var(--copied-color-light);
 }

 /*-- Carousel Indicators --*/
.carousel-indicators-container {
	display: flex;
	justify-content: center;
	min-height: 1.7rem;
	margin-top: 2.5rem;
}
.carousel-indicators {
	position: absolute;
}
.carousel-indicators [data-bs-target] {
	height: 1rem;
	width: 1rem;
	margin: 0 .35rem;
	border-radius: 50%;
	background-color: var(--custom-gray-color);
	opacity: 1;
	outline: 0;
}
.carousel-indicators .active {
	background-color: var(--custom-red-color);
	opacity: 1;
}

/*-- Accordion Overflow Message (over 30 items) --*/
#overflow-message {
	display: none;
}

/*-- PX to PX Conversion Tool --*/
.gray-title {
	color: var(--gray-title-color);
	font-family: var(--heading-font-family);
}
[data-theme="light"] .gray-title {
	color: var(--content-background-color);
}
.pt-to-px {
	display: none; /*-- flex to display --*/
	flex-direction: column;
	align-items: center;
	margin: 0px;
}
.pt-to-px input {
	background-color:  var(--main-background-color);
	color: var(--custom-gray-color);
	border: 4px solid var(--border-solid-color);
	padding: .6rem .5rem;
	transition: all .5s ease;
	font-size: 1.1rem;
	letter-spacing: .05rem;
	margin-bottom: 10px;
	outline: none!important;
	max-width: 13.2rem;
	border-radius: 0;
}
[data-theme="light"] .pt-to-px input {
	background-color: var(--main-background-color-light);
	color: var(--main-light-mode-font-color);
	border: 4px solid var(--border-solid-color-light);
 }
@-moz-document url-prefix() {
	.pt-to-px input {
		max-width: 13.2rem;
	}
 }
.pt-to-px input:focus,
.pt-to-px input:hover {
  outline: none;
  border: 4px solid var(--hover-focus-color);
  box-shadow: none;
  color: var(--plain-white-color);
  background-color:  var(--main-background-color);
}
[data-theme="light"] .pt-to-px input:focus,
[data-theme="light"] .pt-to-px input:hover {
	border: 4px solid var(--hover-focus-color-light);
	background-color: var(--border-solid-color-light);
	color: var(--mid-purple-color);
}
.pt-to-px input::placeholder {
	color: var(--light-purple-color);
}
[data-theme="light"] .pt-to-px input::placeholder {
	color: var(--mid-purple-color);
}
.pt-to-px button {
	background-color: var(--content-background-color);
	color: var(--custom-gray-color);
	border: none;
	padding: .45rem .7rem;
	cursor: pointer;
	transition: all .5s ease;
	border-radius: 50%;
	margin-left: .4rem;
	margin-top: .1rem;
}
[data-theme="light"] .pt-to-px button {
	background-color: var(--main-background-color-light);
	color: var(--main-light-mode-font-color);
}
.pt-to-px button:hover {
  color: var(--plain-white-color);
}
[data-theme="light"] .pt-to-px button:hover {
	color: var(--content-background-color);
 }

 /*-- Copy PX to PT Value --*/
.copied,
.copied input {
	border-color: var(--copied-color)!important; 
}
[data-theme="light"] .copied,
[data-theme="light"] .copied input {
	border-color: var(--copied-color-light)!important; 
}
button.copied {
	color: var(--plain-white-color);
	background-color: var(--copied-color);
}
[data-theme="light"] button.copied {
	color: var(--plain-black-color);
	background-color: var(--copied-color-light);
}

/*-- Build Resources Buttons --*/
.build-resources .btn-custom {
	width: 100%;
}

/*-- Encode HTML to Entity Names (Bookmark Section & Code Snippets --*/
.textarea-container {
	position: relative;
}
.textarea-container textarea {
	resize: vertical;
	width: 100%; 
	padding: 5px;
	border: 0;
	border: 5px solid var(--border-solid-color);
	background:  var(--main-background-color);
	color: var(--custom-white-color);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 1rem 0 .5rem;
	font-size: 1.1rem;
	padding: .5rem;
}
[data-theme="light"] .textarea-container textarea {
	border: 5px solid var(--border-solid-color-light);
	background: var(--main-background-color-light);
	color: var(--light-mode-btn-font-color);
}
.textarea-container textarea#decodedTextAreaID1,
.textarea-container textarea#encodedTextAreaID1 {
	height: 8rem;
	font-size: 1.25rem;
}
.textarea-container textarea#encodedTextAreaID1 {
	color: var(--light-purple-color);
}
[data-theme="light"] .textarea-container textarea#encodedTextAreaID1 {
	color: var(--text-area-light-font-color);
}
.textarea-container textarea#decodedTextAreaID2 {
	min-height: 15.75rem;
}
.textarea-container textarea#encodedTextAreaID2 {
	min-height: 12rem;
}
[data-theme="light"] .textarea-container textarea#decodedTextAreaID1,
[data-theme="light"] .textarea-container textarea#decodedTextAreaID2 {
	caret-color: var(--plain-black-color);
}
.textarea-container textarea#encodedTextAreaID2 {
	color: var(--light-purple-color);
	font-size: 1rem;
}
[data-theme="light"] .textarea-container textarea#encodedTextAreaID2 {
	color: var(--mid-purple-color);
}

/*-- Text Area 1 in Bookmarks Section Placeholder & Hover/Focus Styling --*/
#decodedTextAreaID1::placeholder {
	color: var(--mid-purple-color);
	font-size: 1.1rem;
}
#decodedTextAreaID1:hover,
#decodedTextAreaID1:focus {
	border: 5px solid var(--hover-focus-color)!important;
}
[data-theme="light"] #decodedTextAreaID1:hover,
[data-theme="light"] #decodedTextAreaID1:focus {
	border: 5px solid var(--hover-focus-color-light)!important;
}
[data-theme="light"] #decodedTextAreaID1,
[data-theme="light"] #encodedTextAreaID1 {
	border: 5px solid var(--border-solid-color-light);
	background: var(--main-background-color-light);
	color: var(--light-mode-btn-font-color);
}
#decodedTextAreaID1::placeholder {
	color: var(--light-purple-color);
	opacity: .65;
	transition: all .5s ease !important;
}
[data-theme="light"] #decodedTextAreaID1::placeholder {
	color: var(--mid-purple-color);
}
#decodedTextAreaID1:hover::placeholder,
#decodedTextAreaID1:focus::placeholder {
	opacity: 1;
}

/*-- Copied Encoded Textarea --*/
textarea#encodedTextAreaID1,
textarea#encodedTextAreaID2 {
	transition: all .4s ease;
}
textarea#encodedTextAreaID1.copy-highlight,
textarea#encodedTextAreaID2.copy-highlight {
	border: 5px solid var(--copied-color);
}
[data-theme="light"] textarea#encodedTextAreaID1.copy-highlight,
[data-theme="light"] textarea#encodedTextAreaID2.copy-highlight {
	border: 5px solid var(--copied-color-light);
}

/*-- Resize Window Handle/Bar --*/
.resize-handle {
	transition: all .5s ease;
	position: absolute;
	bottom: -8px;
	left: 0; 
	right: 0;
	height: 20px;
	cursor: ns-resize;
	background-color: var(--border-solid-color);
	border-bottom: 5px solid var(--border-solid-color);
	z-index: 9999;
	transition: all .5s ease;
}
[data-theme="light"] .resize-handle {
	background-color: var(--border-solid-color-light);
	border-bottom: 5px solid var(--border-solid-color-light);
}
.resize-handle:hover {
	background-color: var(--hover-focus-color);
	border-bottom: 5px solid var(--hover-focus-color);
}
[data-theme="light"] .resize-handle:hover {
	background-color: var(--hover-focus-color-light);
	border-bottom: 5px solid var(--hover-focus-color-light);
}

/*-- Copy Encoded HTML Entities Button --*/
#copyEntitiesButton1,
#copyEntitiesButton2 {
	background:  var(--main-background-color);
	color: var(--custom-gray-color);
	border: 4px solid var(--border-solid-color);
	padding: .6rem 2rem!important;
	transition: all .4s ease;
	font-size: 1.1rem;
	letter-spacing: .05rem;
	font-weight: 500;
}
#copyEntitiesButton1:hover,
#copyEntitiesButton1.active,
#copyEntitiesButton2:hover,
#copyEntitiesButton2.active {
	color: var(--plain-white-color);
	border: 4px solid var(--hover-focus-color);
}
#copyEntitiesButton1.copy-highlight,
#copyEntitiesButton2.copy-highlight {
	color: var(--copied-color);
	border: 4px solid var(--copied-color);
	padding: .6rem 2rem!important;
}

/*-- Copy Encoded Entities Button Light --*/
[data-theme="light"] #copyEntitiesButton1,
[data-theme="light"] #copyEntitiesButton2 {
	background: var(--main-background-color-light);
	border: 4px solid var(--border-solid-color-light);
	color: var(--main-light-mode-font-color);
}
[data-theme="light"] #copyEntitiesButton1:hover,
[data-theme="light"] #copyEntitiesButton1.active,
[data-theme="light"] #copyEntitiesButton2:hover,
[data-theme="light"] #copyEntitiesButton2.active {
	border: 4px solid var(--hover-focus-color-light);
	color: var(--main-light-mode-font-color);
}
[data-theme="light"] #copyEntitiesButton1.copy-highlight,
[data-theme="light"] #copyEntitiesButton2.copy-highlight {
	color: var(--copied-color-light);
	border: 4px solid var(--copied-color-light);
	padding: .6rem 2rem!important;
}



/*=========================
SHORTCUTS & CHEATSHEETS SECTION
==========================*/
.cheatsheet-svg-button,
.cheatsheet-svg-button:focus {
	background-color:  var(--main-background-color)!important;
	color: var(--plain-white-color);
	border: 4px solid var(--border-solid-color);
	padding: .6rem 2rem!important;
	min-width: 19rem;
	width: 100%;
	transition: all .5s ease;
	font-size: 1.1rem;
	letter-spacing: .05rem;
	font-weight: 500;
	opacity: .8;
	min-height: 3.9rem;
	text-align: left;
	border-radius: 0;
}
[data-theme="light"] .cheatsheet-svg-button,
[data-theme="light"] .cheatsheet-svg-button:focus {
	background-color: var(--main-background-color-light)!important;
	color: var(--main-light-mode-font-color);
	border: 4px solid var(--border-solid-color-light);
}
.cheatsheet-svg-button i {
	font-size: 2rem;
}
.cheatsheet-svg-button:hover,
.cheatsheet-svg-button.active {
	opacity: 1;
	border: 4px solid var(--hover-focus-color)!important;
}
[data-theme="light"] .cheatsheet-svg-button:hover,
[data-theme="light"] .cheatsheet-svg-button.active {
	opacity: 1;
	border: 4px solid var(--hover-focus-color-light)!important;
}
.cheatsheet-svg-button img {
	height: 2.5rem;
	width: 2.5rem;
	border-radius: .4rem;
}
[data-theme="light"] .cheatsheet-svg-button img {
	background-color: var(--hover-focus-color-light);
	padding: .15rem;
}



/*=========================
CHECKLISTS SECTION (not displaying)
==========================*/
#checklists {
	display: none!important;
}
.checklist-container ul {
	list-style-type: none;
	padding: 0;
	margin-bottom: 20px;
}
.checklist-container ul li {
	display: flex;
	align-items: center;
	padding: 1rem;
	border-bottom: 2px solid var(--border-solid-color);
}
[data-theme="light"] .checklist-container ul li {
	border-bottom: 2px solid var(--light-mode-border-bg-color);
}
.checklist-container ul li:last-child {
	border-bottom: none;
}
.custom-checkbox {
	display: inline-block;
	width: 2.2rem;
	height: 2.2rem;
	margin-right: .6rem;
	cursor: pointer;
	background-color: var(--border-solid-color);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hover-focus-color);
	transition: all .5s ease;
}
[data-theme="light"] .custom-checkbox {
	background-color: var(--main-background-color-light);
	border: 1px solid var(--light-mode-border-bg-color);
}
.custom-checkbox.checked {
	background-color: var(--hover-focus-color);
	border-color: var(--hover-focus-color)!important;
}
[data-theme="light"] .custom-checkbox.checked {
	background-color: var(--light-mode-border-bg-color);
	border-color: var(--light-mode-border-bg-color)!important;
}
.custom-checkbox .bi-check {
	font-size: 2rem;
	color: transparent;
	transition: color 0.3s;
}
.custom-checkbox.checked .bi-check {
	color: var(--gray-title-color);
}
[data-theme="light"] .custom-checkbox.checked .bi-check {
	color: var(--plain-white-color);
}
label {
	cursor: pointer;
}



/*=========================
DOCUMENTATION SECTION
==========================*/
#documentation a {
	color: var(--documentation-a-blue-color);
}
#documentation a:hover {
	color: var(--documentation-ahover-blue-color);
}
[data-theme="light"] #documentation a:hover {
	color: var(--documentation-ahover-blue-color-light);
}
.doc-nav-menu {
	font-size: 1.35rem;
	line-height:2.65rem;
}
.clearCacheButton {
	color: var(--custom-gray-color)!important;
}
[data-theme="light"] .clearCacheButton {
	color: var(--main-light-mode-font-color)!important;
}
#storage-popup .bg-danger {
	border-radius: 1rem;
}
#storage-popup .mfp-close {
	position: relative !important;
	width: auto !important;
	height: auto !important;
	line-height: auto !important;
	right: 0;
	top: 0;
	text-decoration: none;
	text-align: center;
	opacity: 1 !important;
	padding: .4rem 1.2rem !important;
	color: #fff;
	font-style: normal;
	font-size: 18px !important;
	font-family: var(--paragraph-font-family);
}






.col-0 {
flex: 0 0 auto;
width: 5.5%;
}
.snippet-switch {
position: relative;
display: inline-block;
width: 50px;
height: 23px;
margin-top: 4px;
}

.snippet-switch input {
opacity: 0;
width: 0;
height: 0;
}

.snippet-switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--plain-white-color);
-webkit-transition: .4s;
transition: .4s;
}
[data-theme="light"] .snippet-switch-slider {
	background-color: var(--main-background-color);
}

.snippet-switch-slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 2px;
bottom: 2px;
background-color: var(--custom-red-color);
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .snippet-switch-slider {
background-color: var(--plain-white-color);
}
[data-theme="light"] input:checked + .snippet-switch-slider {
	background-color: var(--main-background-color);
}

input:checked + .snippet-switch-slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

.snippet-switch-slider.rounded-switch {
border-radius: 34px;
}

.snippet-switch-slider.rounded-switch:before {
border-radius: 50%;
}
#codeSnippetTool,
#convertRenderSlider {
	display: none;
}

a.scroll-to-from-docs {
	color: #fff;
	font-size: 1.35rem;
	margin-left: .8rem;
}








/*=========================
TOP SCROLL BUTTON
==========================*/
.top-scroll {
	padding: .16rem .58rem 1.5rem;
	cursor: pointer;
	color: var(--custom-white-color);
	z-index: 9999!important;
}
[data-theme="light"] .top-scroll {
	cursor: pointer;
	color: var(--content-background-color);
}
a.top-scroll {
	right: 1.5rem;
	bottom: 1rem;
	position: fixed;
	opacity: .45;
	z-index: 1000;
	display: none;
	transition: all 1s ease;
}
a.top-scroll:hover {
	opacity: .9;
}
.top-scroll i {
	font-size: 2.5rem;
}



/*=========================
FOOTER
==========================*/
#playRickRoll {
	color: var(--documentation-a-blue-color);
	cursor: pointer;
	text-align: center;
	display: block;
	min-height: 5rem;
}
#playRickRoll:hover {
	color: var(--documentation-ahover-blue-color);
}
[data-theme="light"] #playRickRoll:hover {
	color: var(--documentation-ahover-blue-color-light);
}
.replace-ralph-link {
	text-align: center;
	display: grid;
	grid-template-columns: max-content max-content;
	align-items: center;
	padding: 0;
	background-image: url('../img/logo/pause-white-theme.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 3rem;
	opacity: .9;
	animation: ralphPulse 1.5s infinite linear;
}
@keyframes ralphPulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
[data-theme="light"] .replace-ralph-link {
	background-image: url('../img/logo/pause-blue-theme.png');
	opacity: .8;
}
.replace-ralph-link:hover {
	scale: 1.1;
	opacity: 1;
	animation: none;
}
.replace-ralph-link .ralph-text {
	display: none;
}