.style-switcher {
background: #4b5b62;
width: 230px;
position: absolute;
top: 120px;
z-index: 10000;
left: -230px;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
color: #dbdee0; 
}

.style-switcher.active { 
left: 0;
}

.style-switcher .header {
background: #36444a;
padding: 15px 10px;
color: #e3e5e6;
}
.style-switcher .header span {
background: #36444a;
display: block;
height: 42px;
width: 42px;
position: absolute;
right: -42px;
top: 0;
font-size: 20px;
line-height: 39px;
text-align: center;
border-radius: 0 6px 6px 0;
cursor: pointer;
}
.style-switcher .header span i {
margin-top: 10px;
margin-right: 2px;
}
element.style {
}
.style-switcher .block:first-child {
border-top: 0;
}
.style-switcher .block {
width: 100%;
padding: 14px 10px;
border-bottom: 1px solid #5d6c72;
border-top: 1px solid #45545b;
}
.style-switcher .block:first-child {
border-top: 0;
}
.style-switcher .block-title {
margin-bottom: 8px;
}
.style-switcher ul.colors {
list-style: none;
margin: 0;
padding: 0;
}
.style-switcher ul.colors li {
float: left;
border: 1px solid black;
position: relative;
margin-bottom: -1px;
margin-left: -1px;
}
.style-switcher ul.colors li + li {
margin-left: -1px;
}
.style-switcher .options a {
border-radius: 2px;
color: #fdfdfd;
display: inline-block;
background: #252d31;
text-transform: none;
border: 1px solid #252d31;
margin: 0 6px 6px 0;
padding: 5px;
text-decoration: none;
}
.style-switcher ul.colors li a {
display: block;
width: 23px;
height: 23px;
}

.style-switcher .options.colors a {
margin: 0;
border: none;
border-radius: 0;
}

.style-switcher ul.colors li i {
display: none;
border: 2px solid white;
width: 25px;
height: 25px;
line-height: 20px;
position: absolute;
top: -1px;
left: -1px;
z-index: 10;
color: white;
text-align: center;
}
.style-switcher ul.colors li.active i, .style-switcher ul.colors li:hover i {
display: block;
}
.style-switcher .options a {
border-radius: 2px;
color: #fdfdfd;
display: inline-block;
background: #252d31;
text-transform: none;
border: 1px solid #252d31;
margin: 0 6px 6px 0;
padding: 5px;
text-decoration: none;
}
.style-switcher .options a.active {
background: #00acf5;
border: 1px solid #0078ab;
}
.style-switcher .buttons {
text-align: center;
}
.style-switcher .buttons .reset {
background: transparent;
border-radius: 2px;
color: #fdfdfd;
display: inline-block;
border: 1px solid white;
padding: 5px;
text-decoration: none;
}
.style-switcher .buttons .reset:hover {
background: #364247;
}
.style-switcher .buttons .reset .icon_new {
margin-left: 5px;
}
.style-switcher .header span i {
margin-top: 10px;
margin-right: 2px;
margin-left: 0;
}
.style-switcher ul.colors li.active i, .style-switcher ul.colors li:hover i {
display: block;
}
.style-switcher ul.colors li.active i:before {
font-family: FontAwesome;
content: "\f00c";
margin-right: 3px;
}

.style-switcher .header span:hover {
background: #00acf5;
}
.style-switcher .block:last-child {
border-bottom: 0;
}