/* CSS for Style Swithcer */

/*
  For White Labeling layout/color scheme
*/

/* change the header background */
.class-for-layoutheader{
  background-color: !important;
}

/* change the footer background */
.class-for-layoutfooter{
  background-color:  !important;
}


/* change navigation header svg icons color */
.header-nav-color path{
  fill: !important;
}

/* change navigation header svg icons hover color */
.header-nav-color:hover path{
  fill: !important;
}

/* change navigation color */
.header-nav-color{
  color:  !important;
}

/* change navigation color hover */
.header-nav-color a:hover{
  color: !important;
}

/* change footer color */
.footer-nav-color, .footer-nav-color a{
  color:  !important;
}

/* change footer svg icons color */
.footer-svg-color{
  fill:  !important;
}

/* change button background color */
.button-color{
  background-color:  !important;
  color: !important;
}

#open-switcher, #close-switcher {
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 10000001;
  background: #FFF;
  color: #666;
  cursor: pointer;
  border: 1px solid #ECECEC;
  border-left: 0px;
  width: 45px;
  height: 45px;
  text-align: center;
  padding-top:0.9em;
}
#open-switcher{
  height: 50px!important;
  width: 145px!important;
}
#close-switcher{ 
  display: none; 
  left: 390px; 
  z-index: 97; 
}

#demo-wrapper {
  width: 100%;
  margin: 0 auto;
}

#demo-colors {
  position: fixed;
  top: 100px;
  left: -390px;
  z-index: 97;
  width: 390px;
  background: #FFF;
  overflow: hidden;
}

#demo-colors h2{
  display: block;
  line-height: 55px;
  background: #193a84;
  color:#fff;
  font-size:19px;
  font-weight: bold;
  margin:0;
  padding:0;
  border-radius:3px 3px 0 0;
  padding:0 1em;
}

#demo-wrapper h3{
  font-size:16px;
  color:#666666;
  font-weight:bold;
}

#demo-wrapper .ui-accordion .ui-accordion-header{
  border-bottom:dashed 1px #bababa;    
  padding:1em 0 1em 3em;
}

#demo-wrapper .ui-state-default .ui-icon{
  background:url(../images/iconStyleSwitcher.png) no-repeat 30% 50%;
}

#demo-wrapper .ui-state-active .ui-icon{
  background:url(../images/iconStyleSwitcherActive.png) no-repeat 30% 50%;
}

.accordion h3.ui-state-default, 
.accordion h3.ui-widget-content .ui-state-default, 
.accordion h3.ui-widget-header .ui-state-default, 
.accordion h3.ui-state-active, 
.accordion h3.ui-widget-content .ui-state-active, 
.accordion h3.ui-widget-header .ui-state-active{
  background:none !important;
}

ul.preset li{
  margin-bottom:0.5em !important;
  vertical-align: middle;
  float:none !important;
  display: inline-block;
  width:29% !important;
  cursor: pointer;
}

.preset1{
  width:67px !important;
  height:67px !important;
  background:url(../images/imgPreset1.png) no-repeat center top;
}

.preset1:hover, .preset1:active, .preset1.selected{
  background:url(../images/imgPreset1.png) no-repeat center bottom;
}

.preset2{
  width:104px !important;
  height:48px !important;
  background:url(../images/imgPreset2.png) no-repeat center top;
}

.preset2:hover, .preset2:active, .preset2.selected{
  background:url(../images/imgPreset2.png) no-repeat center bottom;
}

.preset3{
  width:98px !important;
  height:45px !important;
  background:url(../images/imgPreset3.png) no-repeat center top;
}

.preset3:hover, .preset3:active, .preset3.selected{
  background:url(../images/imgPreset3.png) no-repeat center bottom;
}

.preset4{
  width:99px !important;
  height:30px !important;
  background:url(../images/imgPreset4.png) no-repeat center top;
}

.preset4:hover, .preset4:active, .preset4.selected{
  background:url(../images/imgPreset4.png) no-repeat center bottom;
}

.preset5{
  width:92px !important;
  height:34px !important;
  background:url(../images/imgPreset5.png) no-repeat center top;
}

.preset5:hover, .preset5:active, .preset5.selected{
  background:url(../images/imgPreset5.png) no-repeat center bottom;
}

.preset6{
  width:79px !important;
  height:43px !important;
  background:url(../images/imgPreset6.png) no-repeat center top;
}

.preset6:hover, .preset6:active, .preset6.selected{
  background:url(../images/imgPreset6.png) no-repeat center bottom;
}

.preset7{
  width:46px !important;
  height:56px !important;
  background:url(../images/imgPreset7.png) no-repeat center top;
}

.preset7:hover, .preset7:active, .preset7.selected{
  background:url(../images/imgPreset7.png) no-repeat center bottom;
}

.preset8{
  width:104px !important;
  height:51px !important;
  background:url(../images/imgPreset8.png) no-repeat center top;
}

.preset8:hover, .preset8:active, .preset8.selected{
  background:url(../images/imgPreset8.png) no-repeat center bottom;
}

.preset9{
  width:94px !important;
  height:43px !important;
  background:url(../images/imgPreset9.png) no-repeat center top;
}

.preset9:hover, .preset9:active, .preset9.selected{
  background:url(../images/imgPreset9.png) no-repeat center bottom;
}

.custom-color{
  font-size:12px;
  color:#666666;
  margin:1em 0;
  min-height:120px;
  overflow: hidden;
}

.custom-title{
  border-bottom:solid 1px #ebebeb;
  padding-bottom: 0.5em;
  display:block;
}

.colors{
  margin:1em 0;
  padding:0;
  position: relative;
}

.position{
  width:100px;
  min-height:85px;
  position: absolute;
  top:-12px;
  right:10px;
}
.position.custom
{
width:100%!important;
min-height:72px;
}

.accordion h4{
  width:15px;
  height:15px;
  display: inline-block !important;
  margin-right:0.5em !important;
  cursor: pointer !important;
  border:0;
  border-radius:0 !important;
}

#demo-wrapper h4{
  border-bottom:0 !important;
  padding:0 !important;
}

.accordion h4 span{
  display:none;
}

.blue{
  background:#193a84 !important;
}

.gray{
  background:#666666 !important;
}

.light-blue{
  background:#00a0ce !important;
}

.orange{
  background:#ff9e00 !important;
}

.yellow{
  background:#f8d908 !important;
}

.red{
  background:#ce0000 !important;
}

.green{
  background:#9ccf31 !important;
}

.color-code-box1{
  width:100%;
  line-height:72px;
  display:block;
  position:relative;
  font-size:8px;
  color:#fff;
  text-align: center;
  cursor: pointer;
}

.color-code-box1:after{
  content:url(../images/iconDropper.png);
  position: absolute;
  top:0;
  right:-1.5em;
}

.color-code-box2{
  width:100%;
  min-height: 69px;
  padding:0.5em;
}

.color-code-box2 ul li{
  width:19px;
  height:19px;
  display: inline-block;
  border:solid 1px #fff;
  cursor:pointer;
}

.technology{
  cursor:pointer;
}
color-code-box1 span
{
  background-color:black;
}