/*Demo Buttons Formats Start*/

.demoCollapseMain {
	padding:5px 10px;
  background-color: #111; /* Black*/
	color:#fff;
	position:fixed;
	left:0px;
	top:126px;
	cursor:pointer;
  z-index: 1001;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */   	
	border:1px solid #fff;
	border-left:1px solid #111;
	
	box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
-webkit-box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
-moz-box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
}

.demoCollapseMain:hover {	
  background-color: #fff; /* Black*/
	border-left:1px solid #fff;
	color:#111;
}

.demoCollapseDetails {
	padding:5px 10px;
  background-color: #111; /* Black*/
	color:#fff;
	position:fixed;
	left:0px;
	top:18px;
  z-index: 1001;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */  
	border:1px solid #fff;
	border-left:1px solid #111;
	
	box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
-webkit-box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
-moz-box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
}

.demoBack, .demoFwd {
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */  
	display:inline-block;
	cursor:pointer;
	padding:1px 5px;
	border:1px solid #fff; 
}

.demoBack:hover, .demoFwd:hover {	
  background-color: #fff; /* Black*/
	color:#111;
}

.demoBack {
	margin-right:5px;
}
#demoBtns {
	margin-top: 6px;
  margin-bottom: 4px;
}

.demoCollapseDetails.active,
.demoCollapseMain.active {
	margin-left:249px;
}

#demoWrap {
	display:block;
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Stay on top */
  top: 0;
  left: 0;
  transition: width 0.5s; /* 0.5 second transition effect to slide in the sidebar */
	color:#fff;
  background-color: #111; /* Black*/
}

#demoSidebar {
	overflow-x:hidden;
	color:#fff;
  background-color: #111; /* Black*/
}

#demoSidebar > .demoSidebarInner {
  width: 250px; /* 0 width - change this with JavaScript */
  padding: 15px 15px 0; /* Place content 60px from the top */
} 

#demoWrap.active {
  width: 250px; /* 0 width - change this with JavaScript */  
  transition: width 0.5s; /* 0.5 second transition effect to slide in the sidebar */    
	overflow-y: auto;
  overflow-x: hidden;
	border-right:1px solid #fff;
	box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
-webkit-box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
-moz-box-shadow: 0px 0px 14px 0px rgb(17, 17, 17, 0.75);
}

#demoWrap .sidebar-header {
	/*padding-left:20px;*/
}
#demoWrap .sidebar-header h3 {
	font-family: Arial;
	color: inherit;
}
/* width */
#demoWrap.active::-webkit-scrollbar {
  width: 5px;
}

/* Track */
#demoWrap.active::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
#demoWrap.active::-webkit-scrollbar-thumb {
  background: #ddd; 
  /*border-radius: 10px;*/
}

/* Handle on hover */
#demoWrap.active::-webkit-scrollbar-thumb:hover {
  background: #00427a; 
}

/*.demoBtn {
	display:block;
	clear:both;
	padding: 6px 12px !important;
}*/

.demoNav li {
	padding:5px;
	border-bottom:1px solid #9a9a9a;
	color:#9a9a9a;
}

.demoNav li:last-child {
	border-bottom:none;
}

.demoNav a {
	cursor:pointer;
}

.demoNav li ul {
	padding-left:10px;
}

.demoNav li > a {
	color:#9a9a9a;
	display:block;
	position: relative;
}

.demoNav li > a:hover,
.demoNav li > a:focus {
	color:#fff;
	text-decoration:none;
}

.demoNav a.dropdown-toggle:after {
	font-family: 'Font Awesome 5 Free';
	content: "\f0d7";
	font-weight: 900;
	position:absolute;
	right:0px;
	margin: inherit;
  border: none;
}

.demoNav .dropdown-toggle {
	color: #fff;
}
.demoNav .dropdown-toggle:hover,
.demoNav .dropdown-toggle.collapsed:hover  {
	color: #fff;
}
.demoNav .dropdown-toggle.collapsed {
	color: #9a9a9a;
}

#demoColors .colorpicker-component {
	display:inline-block;
}

#demoColors .colorpicker-element .add-on i, #demoColors .colorpicker-element .input-group-addon i {
    display: inline-block;
    cursor: pointer;
    height: 20px;
    vertical-align: text-top;
    width: 20px;
    border: 1px solid #ddd;
}

.colorpicker {
	margin-top: 4px !important;
  z-index: 10001 !important;
}

.colorpicker.dropdown-menu {
    -webkit-transition: none;
    -moz-transition:none;
    -o-transition: none;
    transition:none;
}

.colorpicker-selectors i {
    border: 1px solid #000;
}