.admin-bar #style-configurator {
    top: 32px;
}
#style-configurator div::-webkit-scrollbar {
  width: 6px;
}
#style-configurator div::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
#style-configurator div::-webkit-scrollbar-thumb {
  height: 100px;
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
#style-configurator div .resetconfig {
    text-align: right;
    padding: 5px;
}
.resetconfig .resetAll {
    display: inline-block;
    padding: 9.5px 20px;
    font-size: 15px;
    color: #ffffff;
}
#style-configurator h3 {
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 1px;
    margin: 10px 0 6px 6px;
    padding: 0;
    border: 0px;
    position: relative;
    z-index: 0;
}
#style-configurator h3:after {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: #ffffff;
    vertical-align: middle;
    margin-left: 7px;
}
#style-configurator {
    width: 100%;
    max-width: 270px;
    position: fixed;
    top: 0px;
    z-index: 1000;
    border-radius: 0 0 3px 0;
    left: -270px;
    border-left: 0;
    border-top: 0;
    box-shadow: 0px 0px 15px 3px rgb(0 0 0 / 35%);
}
#style-configurator div {
    padding: 8px 15px;
    margin: 0px;
    overflow: hidden;
    overflow-y: auto;
    max-height: 605px;
    background: #080C14;
}
#style-configurator h2 {
	background-color: #080C14;
	color: #ffffff;
	font-weight: normal;
	font-size: 14px;
	padding: 0 0 0 20px;
	margin:0;
	line-height:40px;
}
#style-configurator h2 a {
    background-color: #080C14;
    display: block;
    height: 46px;
    padding: 0 12px;
    position: absolute;
    right: -46px;
    line-height: 2.22;
    font-size: 22px;
    text-align: center;
    color: #ffffff;
    top: 30%;
    width: 46px;
    text-decoration: none;
    border-radius: 0 6px 6px 0;
    box-shadow: 8px 0 15px 3px rgb(0 0 0 / 35%);
}
#style-configurator input.jscolor {
    max-width: 114px;
    min-height: 38px;
    padding-left: 16px;
    margin-right: 2px;
    border: none;
    border-radius: 100px;
}
#style-configurator button#resetColor {
    max-height: 38px;
    color: #ffffff;
    padding: 9px 30px;
}
#style-configurator h2 a:focus { outline: none; }
.colors1 { list-style: none outside none; margin: 0 0 10px; border-bottom: 1px solid #d2d2d2; overflow: hidden; padding: 0 0 20px; }
.colors1 li { float:left; margin: 0px 2px 0; }
.colors1 li a { 
	border-radius: 1px; 
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-size: 13px;
    height: 30px;
    padding: 5px;
    text-align: center;
    width: 80px;
} 

.style-palette  { list-style: none outside none; margin: 0 0 10px; overflow: hidden; padding: 0 0 5px; }
.style-palette:last-child { border-bottom: 0 none; padding: 0 0 10px; }
.style-palette li {
    float: left;
    margin: 1px;
}
.style-palette  li a {
    margin: 3px;
	display: block;
	cursor: pointer; 
	box-shadow: 0px 0px 12px 1px rgb(0 0 0 / 75%);
} 
.layout-style select, .header-style select, 
.footer-style select, .header-color input {
	width: 164px;
	padding: 7px 5px;
	color: #363636;
	cursor: pointer;
	border-radius: 0px;
	height: 35px;
	font-size: 14px;
	margin: 2px 0 2px 2px;
	border: 1px solid #ccc;
}
.header-color .sp-replacer  { padding:4px 6px !important; }
.header-color .sp-replacer .sp-dd, 
.header-color .sp-replacer .sp-preview, 
div.header-color { padding:0px 1px !important; }
.layout-style, .header-style, .header-color
.footer-style { padding: 0 !important; }
a#wide, a#boxed {
    max-width: 106px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.style-palettebg {
	display: none;
}
a#wide {
	margin-right: 0px;
}
.default {
	background-color: #00A3C8;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-one {
	background-color: #95c41f;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-two {
	background-color: #fab702;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-three {
	background-color: #e84c3d;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-four {
	background-color: #fb4848;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-five {
	background-color: #1bbc9b;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-six {
	background-color: #23527c;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-seven {
	background-color: #8ab933;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-eight {
	background-color: #f5a623;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-nine {
	background-color: #96ca2d;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-ten {
	background-color: #f22853;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-eleven {
	background-color: #44b272;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-twelve {
	background-color: #a10f2b;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-thirteen {
	background-color: #8ac342;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-fourteen {
	background-color: #395ca3;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-fifteen {
	background-color: #ee591f;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-sixteen {
	background-color: #ffab40;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-seventeen {
	background-color: #db2723;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-eighteen {
	background-color: #9c8061;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-ninteen {
	background-color: #c0af94;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-twenty {
	background-color: #FF0034;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-twenty1 {
	background-color: #00abc0;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-twenty2 {
	background-color: #086ad8;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-twenty3 {
	background-color: #6ea81a;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-twenty4 {
	background-color: #fde428;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.color-twenty5 {
	background-color: #01d2d6;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-twenty6 {
	background-color: #2fa562;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-twenty7 {
	background-color: #fead29;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-twenty8 {
	background-color: #92003b;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-twenty9 {
	background-color: #44b272;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}


.color-thirty {
	background-color: #ed4501;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-scolax {
	background-color: #ff1e00;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-anamio {
	background-color: #24B6A9;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-gruj {
	background-color: #F34F54;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-soga {
	background-color:#D61523;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.color-daizy {
	background-color:#1A73E9;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.pattern_1 { 
	background-image: url("../../images/bg-pattern/pattern-1.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_2 { 
	background-image: url("../../images/bg-pattern/pattern-2.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_3 { 
	background-image: url("../../images/bg-pattern/pattern-3.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_4 { 
	background-image: url("../../images/bg-pattern/pattern-4.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_5 { 
	background-image: url("../../images/bg-pattern/pattern-5.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_6 { 
	background-image: url("../../images/bg-pattern/pattern-6.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_7 { 
	background-image: url("../../images/bg-pattern/pattern-7.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_8 { 
	background-image: url("../../images/bg-pattern/pattern-8.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_9 { 
	background-image: url("../../images/bg-pattern/pattern-9.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.pattern_10 { 
	background-image: url("../../images/bg-pattern/pattern-10.png"); 
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
	
@media only screen and (max-width: 1023px) { #style-palette { display: none; } }

/* This media query for layout resize with boxed layout */

@media(min-width: 1200px) {

body.boxed {
    width: 1170px;
    -webkit-box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
    box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
    margin: 0 auto;
	position: relative;
	background: url(../../images/bg-pattern/pattern-1.png) repeat fixed;
}

}

@media (min-width: 768px) and (max-width: 979px)  {

body.boxed { width: 100%; }

}

@media (max-width: 767px) {

body.boxed { width: 100%; /* padding: 0px 20px !important; */ }
body { padding-left: 0px !important; padding-right: 0px !important; }
	
}

@media (min-width: 980px) and (max-width: 1199px) {

body.boxed { width: 100%; }
	
}