#panel-style-selector .panel-wrapper {
position: fixed;
top: 50%;
left: 0;
z-index: 99998;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 205px;
padding: 0;
background: #111;
color: #FFF;
font-size: 12px;
border-left: none;
-webkit-transform: translate(-100%, -50%);
-moz-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
-o-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
-ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#panel-style-selector .panel-wrapper.in {
-webkit-transform: translate(0%, -50%);
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
#panel-style-selector .panel-selector-open {
position: absolute;
top: 50%;
left: 100%;
width: 50px;
height: 50px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
background: #222;
text-align: center;
cursor: pointer;
opacity: 1;
}
#panel-style-selector .panel-selector-open i {
font-size: 20px;
line-height: 50px;
-webkit-animation: fa-spin 2s infinite linear;
}
#panel-style-selector .panel-selector-open:hover {
color: #eaa24e;
}
#panel-style-selector .panel-selector-header {
height: 50px;
line-height: 50px;
padding: 0 15px;
background: #222;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 14px;
}
#panel-style-selector .panel-selector-body {
padding: 15px;
}
#panel-style-selector .panel-selector-section {
margin-bottom: 15px;
}
#panel-style-selector h3.panel-selector-title {
border-bottom: solid 1px #222;
padding-bottom: 11px;
color: #fff;
text-transform: uppercase;
font-size: 12px;
margin: 0;
margin-bottom: 17px;
margin-top: 10px;
font-family: montserrat;
}
#panel-style-selector h3.panel-selector-title:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: #eaa24e;
margin-right: 5px;
}
#panel-style-selector .panel-selector-row {
margin-bottom: 5px;
}
#panel-style-selector .panel-selector-btn {
display: inline-block;
padding: 6px 12px;
text-transform: uppercase;
min-width: 80px;
text-align: center;
background: #FFFFFF;
border: 1px solid #dddddd;
color: #25282c;
line-height: 1.6;
font-size: 12px;
font-family: montserrat;
font-weight: 500;
}
#panel-style-selector .panel-selector-btn:hover,
#panel-style-selector .panel-selector-btn.active {
background-color: #eaa24e;
border: 1px solid #eaa24e;
color: #FFFFFF;
}
#panel-style-selector ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#panel-style-selector ul li {
width: 30px;
height: 25px;
float: left;
display: block;
border: 1px solid #999;
cursor: pointer;
position: relative;
}
#panel-style-selector ul li.active:before,
#panel-style-selector ul li:hover:before {
content: "\f00c";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
margin: auto;
text-align: center;
font-family: fontawesome;
}
#panel-style-selector ul.panel-primary-background li.active:before,
#panel-style-selector ul.panel-primary-background li:hover:before{
color:#eaa24e;
}
#panel-style-selector ul li + li {
margin-left: 15px;
}
#panel-style-selector ul li:nth-child(4n+1) {
clear: both;
margin-left: 0;
}
#panel-style-selector ul li:nth-child(n + 5) {
margin-top: 15px;
}
#panel-style-selector ul.panel-primary-background li {
background-image: url(../../../../themes/autopro/assets/images/style-selector-bg.png);
background-repeat: no-repeat;
}
@media (max-width: 767px) {
#panel-style-selector {
display: none;
}
}