.dark-mode {
	background: #101214 !important;
	color: #e0e4e9;
}
.dark-mode h1 {
	color: #e0e4e9;
}

.dark-mode .demo-icon,
.dark-mode .chat-icon,
.dark-mode .demo-header-icon {
	background-image: url('../images/csssprites_white.png');
}

/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.dark-mode .prettyprint {
  background: inherit;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  border: 0 !important;
}

.dark-mode .pln {
  color: #fff;
}

/* Specify class=linenums on a pre to get line numbering */
.dark-mode ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #666666;
}

.dark-mode li.L0,
.dark-mode li.L1,
.dark-mode li.L2,
.dark-mode li.L3,
.dark-mode li.L4,
.dark-mode li.L5,
.dark-mode li.L6,
.dark-mode li.L7,
.dark-mode li.L8,
.dark-mode li.L9 {
  padding-left: 1em;
  background-color: #000;
  list-style-type: decimal;
}

@media screen {

  /* string content */

  .dark-mode .str {
    color: #6f0;
  }

  /* keyword */

  .dark-mode .kwd {
    color: #f60;
  }

  /* comment */

  .dark-mode .com {
    color: #93c;
  }

  /* type name */

  .dark-mode .typ {
    color: #458;
  }

  /* literal value */

  .dark-mode .lit {
    color: #458;
  }

  /* punctuation */

  .dark-mode .pun {
    color: #fff;
  }

  /* lisp open bracket */

  .dark-mode .opn {
    color: #fff;
  }

  /* lisp close bracket */

  .dark-mode .clo {
    color: #fff;
  }

  /* markup tag name */

  .dark-mode .tag {
    color: #fff;
  }

  /* markup attribute name */

  .dark-mode .atn {
    color: #9c9;
  }

  /* markup attribute value */

  .dark-mode .atv {
    color: #6f0;
  }

  /* declaration */

  .dark-mode .dec {
    color: #fff;
  }

  /* variable name */

  .dark-mode .var {
    color: #fff;
  }

  /* function name */

  .dark-mode .fun {
    color: #fc0;
  }
}
.dark-mode div.framework,
.dark-mode .smart-demo-container section>h2:first-of-type,
.dark-mode .framework a.active,
.dark-mode .framework a
 {
	color: #fefefe;
}
.dark-mode .source-viewer {
	background: inherit;
}
.dark-mode .tab-item {
	color: inherit !important;
}
.dark-mode .tab-item.active {
	 color: rgb(102, 179, 255) !important;
}
.dark-mode .tab-item-selector {
	color: inherit !important;
	background:  rgb(102, 179, 255) !important;
}

.dark-mode .wide-sidebar {
	background: #101214 !important;
	border-right-color: rgba(61, 71, 81, 0.3) !important;
	color: #F0F0F0 !important;
}
.dark-mode .lead {
	color: #E7E7E7 !important;
}
.dark-mode .note,
.dark-mode .toc,
.dark-mode table,
.dark-mode th,
.dark-mode td
 {
	background: #121314 !important;
	color: #E7E7E7 !important;
	border-color: #374151; !important;
}


.dark-mode .sidebar-head {
	border-bottom-color: rgba(61, 71, 81, 0.3)!important;
}
.dark-mode .sidebar-head button{
	color: #E7E7E7;
}
.dark-mode .sidebar-head button:hover {
	background: #323942;
	color: #f0f0f0;
}

.dark-mode .search-form .ico-search {
	color: #f0f0f0;
}

.dark-mode .sidebar-head input {
	background: #111827 !important;
	color: rgb(102, 179, 255)!important;
	border-radius: 6px!important;
	box-shadow: none!important;
	border-color: #34373b!important;
}

.dark-mode .wide-sidebar a {
	color: #f0f0f0;
}

.dark-mode .wide-sidebar a:hover {
	background: #323942;
	color: #f0f0f0;
}

.dark-mode .underline.red::after {
	background: #323942;
}

.dark-mode .ico-circle-dot.label-updated {
	color: #27A2FC;
}

.dark-mode .demos-sidebar .side-nav-list a.current, .dark-mode  .demos-sidebar .side-nav-list div.current {
    background: rgb(29, 33, 38);
    color: rgb(102, 179, 255);
}
.dark-mode .side-nav-list a, 
.dark-mode .side-nav-list div {
	color: #E7E7E7;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 6px;
}
.dark-mode .side-nav-list a:hover, 
.dark-mode .side-nav-list div:hover {
  background: rgb(29, 33, 38);
  color: #fff;
}

::-webkit-scrollbar{width: 8px;}
::-webkit-scrollbar-track {  background-color: #EEEEEE;}
::-webkit-scrollbar-track-piece { background-color: #EEEEEE;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #BEBEBE; border-radius: 6px;}
::-webkit-scrollbar-corner { background-color: #EEEEEE;}}
::-webkit-resizer { background-color: #EEEEEE;}

.dark-mode .header-docs .nav-open {
	background: #101214 !important;
	border-bottom: 1px solid rgba(61, 71, 81, 0.3);
}
.dark-mode .demo-toolbar .device-button {
	background: #111827;
	color: rgb(182, 190, 201);
	border-color: #374151;
}
.dark-mode .demo-toolbar .device-button[checked] {
    background: #111827;
    border-color: #374151;
	color: rgb(102, 179, 255);
}
.dark-mode .demo-toolbar .device-button:hover {
    background: #374151;
	border-color: #374151;
}

.dark-mode .theme-chooser a {
	color: rgb(102, 179, 255);
}

.dark-mode .smart-api-docs .code-example a,
.dark-mode .smart-api-docs .code-example strong,
.dark-mode .smart-demo-container section div h1,
.dark-mode .smart-api-docs h2,
.dark-mode .smart-api-map .event>a,
.dark-mode .smart-api-map .property>a {
	color: #E1E4F5 !important;
}
.dark-mode .supported-frameworks span {
	color: #E1E4F5 !important;
}
.dark-mode .main-footer {
	background: linear-gradient(180deg, #121518 0%, #121518 100%) !important;
}
.dark-mode .demo-toolbar .demo-icon {
	background-image: none;
}
@media (min-width: 1026px)
{
	.dark-mode .nav-open .ddown:hover span {
		 background: #474747;
		border-color: #474747;
		color: #fff !important;
	}
	
	.dark-mode .header-docs .nav-open .ddown:hover ul {
		background: #121518;
		border-color: #121518;
		color: fff;
		box-shadow: none;
	}	
	
	.dark-mode .nav-open .ddown ul a {
		color: #fff;
	}	
	.dark-mode .nav-open .ddown ul a:hover {
		background: #323942;
		border-color: #323942;
	}
}
.dark-mode .card::before, 
.dark-mode .card::after {
	box-shadow: none;
}
.dark-mode .card.support-card{
	background: #121518;
	border-radius: 2rem;
}

.dark-mode .copyright {
	color: rgb(148, 193, 255) !important;
}
.dark-mode .header-docs .nav-menu a.current {
	color: rgb(148, 193, 255) !important;
}

.dark-mode .header-docs .nav-menu a.current::after {
	background: rgb(148, 193, 255) !important;
}

.dark-mode .underline::after {
	background: rgb(102, 179, 255) !important;
}

.dark-mode .nav-open a:hover {
	color: rgb(102, 179, 255) !important;
}

.dark-mode .nav-open .ddown:hover span {
	background: #111827;
	border-color: #374151;
}

.dark-mode .header-docs .nav-open .ddown:hover ul,
.dark-mode .header-main .nav-open .ddown:hover ul,
 {
	background: #111827;
	border-color: #374151;
	color: fff;
}
/* dropdown меню — dark mode (header-main + header-docs) */
.dark-mode .nav-open .ddown ul {
	background: #111827;
	border-color: #374151;
	box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.dark-mode .nav-open .ddown ul a {
	color: #f0f0f0;
}
.dark-mode .nav-open .ddown ul a:hover {
	background: #323942;
	color: rgb(102, 179, 255);
}
.dark-mode .framework-support-text span {
	color: inherit;
}
.dark-mode .card .arrow-list .red,
.dark-mode .card .arrow-list a,
.dark-mode .card a {
	color: #f0f0f0;
}

.dark-mode .btn-fill-blue {
    background: #474747;
	border-color: #474747;
}
.dark-mode .wide-content .arrow-list .red, .dark-mode .wide-content .arrow-list a, .dark-mode .wide-content a, .dark-mode .wide-content code {
	color: #bbb !important;
 }
/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  border-bottom: 2px solid #FC3752;
  color: #FC3752; 
  width: 250px;
}

.custom-select .scheme {
	display: flex;
	padding: 0px;
	cursor: initial;
}
.custom-select .scheme div:hover {
	color: rgb(0, 92, 153);
	cursor: pointer;
}

.custom-select .scheme .active {
	border-bottom: 2px solid rgb(0, 92, 153);
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: #FBFBFC;
}

.custom-select .ico-arrow-up {
    display: block;
    font-weight: bold;
    transition: transform 0.2s ease-in;
}

.custom-select.open .ico-arrow-up {
	transform: rotate(180deg);
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
.scheme-color {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
	border-radius: 0px;;
	border-width: 2px;
	margin-right: 6px;
    border-style: solid;
	margin-top: -4px;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  max-height: 250px;
  overflow:auto;
  transform: scaleY(1);
  opacity: 1;
  transition: all 0.2s;
  transform-origin:top;
  color: #333;
}

/*hide the items when the select box is closed:*/
.select-hide {
  transform: scaleY(0);
  opacity: 0;
}

.select-items div:hover, .same-as-selected {
  background-color: #F5F5F5;
  color: #333;
}

.dark-mode .select-items {
	background: #333333;
	color: #f0f0f0;
}

.dark-mode .custom-select {
	color: #f0f0f0;
	border-bottom-color: #333333;
}

.dark-mode .select-selected {
	background: #333333;
}

.dark-mode .theme-chooser {
	color: #f0f0f0;
}

.dark-mode .select-items div:hover, .dark-mode .same-as-selected {
	background: #323942;
	color: #f0f0f0;
}
.dark-mode .select-selected:after {
  border-color: #f0f0f0 transparent transparent transparent;
}
.dark-mode .demo-scroll-frame {
	background: transparent;
}
.dark-mode.viewport .options .options,
.dark-mode.viewport .options .option,
.dark-mode.viewport .options .caption {
	color: #f0f0f0 !important;
}
.dark-mode .mobile-sec-nav, .dark-mode .mobile-sec-nav button {
	background: #333;
	color: #f0f0f0;
}

.content-head {
	justify-content: space-between;
}

.dark-mode ::-webkit-scrollbar,
[theme="dark"] ::-webkit-scrollbar {
	width: 8px;
}

.dark-mode ::-webkit-scrollbar-thumb,
[theme="dark"] ::-webkit-scrollbar-thumb {
	background:  hsl(215, 15%, 65%);
	border: 1px solid #3E3E42;
}

.dark-mode ::-webkit-scrollbar-corner,
[theme="dark"] ::-webkit-scrollbar-corner {
	background: #3E3E42;
}

.dark-mode ::-webkit-scrollbar-track-piece,
[theme="dark"] ::-webkit-scrollbar-track-piece {
	background: #3E3E42;
}

.dark-mode ::-webkit-scrollbar-track,
[theme="dark"] ::-webkit-scrollbar-track {
	background: #3E3E42;
}

.collapse-sidenav {
   position: fixed;
   z-index: 999999999;
   left: 310px;
   font-size: 10px;
   top: 80px;
   color: inherit;
   padding: 3px;
   transition: 0.3s;
}


.collapse-sidenav:hover {
	background: #0C3D78;
	color: #fff;
	padding: 4px;
	border-radius: 4px;
}

.demos-sidebar.changing {
	transition: 0.3s;
	opacity: 1;
	transform: scaleX(1);
	transform-origin: 0 0;
}

.demos-sidebar.change {
	transform: scaleX(0);
	opacity: 0;
}

.demos-sidebar.hide {
	display: none;
}

.collapse-sidenav.change {
	left: 10px;
}

.collapse-sidenav.change:before {
  content:'\2630';
  font-size: 14px;
}

.ico-twitter:before{content:""}
.ico-twitter {
	background-image: url(/wp-content/design/assets/images/ico_tw.svg);
	display: flex;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    align-content: center;
    background-position: center;	
}
.nav-menu ul li h3 {
	padding: 10px;
	padding-left: 16px;
}

@media (max-width: 1026px) {
	.mobile-nav:checked~.nav-open .nav-menu li h3 {
		padding-left: 0 !important;
		color: white !important;		
	}
}
@media (max-width: 1024px) {
	.collapse-sidenav  {
		display: none !important;
	}
}

@media (min-width: 1026px) {
	.header-docs .nav-open .ddown:hover ul,
	.header-main .nav-open .ddown:hover ul {
		box-shadow: 0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px 0 rgba(0,0,0,.2);
	}
	.nav-menu li.product-header span {
		background: inherit !important;
	}
}
@media (max-width: 1026px) {
	.mobile-nav:checked~.nav-open .nav-menu ul{
		box-shadow: none !important;
		display: initial !important;
	}
	.mobile-nav:checked~.nav-open .nav-menu li.product-header {
		padding-left: 0 !important;
		color: white;
	}
	.mobile-nav:checked~.nav-open .nav-menu li.product-header span {
		padding-left: 0 !important;
		color: white !important;
	}
}

/* ================= dark mode fixes ================= */

/* hero — слива се с фона на страницата */
.dark-mode .hero.gradient {
	background: linear-gradient(135deg, #121518 0%, #121518 100%) !important;
	background-image: url(https://www.htmlelements.com/wp-content/design/bg-dark.svg) !important
}
.dark-mode .hero.gradient::before {
	display: none !important;
}
.dark-mode .hero:before {
  display:none;
  visibility: hidden;
}
.dark-mode .demo-secondary-nav { 
  background: #121518;
  opacity: 0.5;
  border-bottom: 1px solid rgba(61, 71, 81, 0.3);
}
/* демо контент панел */
.dark-mode .home-devices,
.dark-mode .demos,
.dark-mode .wide-container,
.dark-mode .demo-content,
.dark-mode .demo-main,
.dark-mode .demo-index-content,
.dark-mode .smart-demo-container {
	background: #101214 !important;
	color: #e0e4e9;
}

/* заглавия и текст в съдържанието */
.dark-mode .demos h1,
.dark-mode .demos h2,
.dark-mode .demos h3,
.dark-mode .demos h4,
.dark-mode .demos p,
.dark-mode .demos li {
	color: #e0e4e9;
}
/* ---- theme toggle ---- */
.theme-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
	display: inline-flex;
	align-items: center;
	color: #fff;
	border-radius: 50%;
	transition: background .2s;
}
.theme-toggle:hover { background: rgba(0,0,0,.08); }
.dark-mode .theme-toggle { color: #e0e4e9; }
.dark-mode .theme-toggle:hover { background: #323942; }

/* moon shows in light mode, sun shows in dark mode */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
.dark-mode .theme-toggle .icon-sun  { display: block; }
.dark-mode .theme-toggle .icon-moon { display: none; }
img.logo-strip  { filter: none; }
body.dark-mode img.logo-strip  { filter: invert(1); }

.dark-mode .framework-switch a {
	color: #333 !important;
	background: #94C1FF !important;
}
.dark-mode .dev-ai-notes,
.dark-mode .dev-ai-quickref {
	background: #121314 !important;
	color: #bbb !important;
}