:root {
  --main-gradient-color: #9d50bb;
  --secondary-gradient-color: #6e48aa;
}

:root .clr-blue {
  --main-gradient-color: #00c6ff;
  --secondary-gradient-color: #0072ff;
}

:root .clr-green {
  --main-gradient-color: #11998e;
  --secondary-gradient-color: #38ef7d;
}

:root .clr-yellow {
  --main-gradient-color: #f12711;
  --secondary-gradient-color: #f5af19;
}

:root .clr-red {
  --main-gradient-color: #ed213a;
  --secondary-gradient-color: #93291e;
}

:root .clr-pink {
  --main-gradient-color: #f953c6;
  --secondary-gradient-color: #b91d73;
}

.wdes-customizer {
  position: fixed;
  right: 0;
  top: 150px;
  z-index: 9999;
}

.wdes-customizer > button#customizerCog {
  background-color: var(--main-gradient-color);
  border: 0;
  color: #fff;
  font-size: 21px;
  padding: 8px 14px;
  outline: none;
  display: table;
}

.wdes-customizer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wdes-customizer > ul {
  float: right;
  padding: 30px 20px;
  margin-right: -250px;
  width: 250px;
  background: #fff;
}

.wdes-customizer > ul > li {
  margin-bottom: 30px;
}

.wdes-customizer > ul > li:last-child {
  margin-bottom: 0;
}

.wdes-customizer > ul > li span.wdes-head {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #242424;
  margin-bottom: 12px;
  display: block;
}

.wdes-customizer > ul > li > ul.color-switcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.wdes-customizer > ul > li > ul.color-switcher > li {
  background-color: #9d50bb;
  width: 100%;
  height: 30px;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 5px;
}

.wdes-customizer > ul > li > ul.color-switcher > li:last-child {
  margin-right: 0;
}

.wdes-customizer > ul > li > ul.color-switcher > li[data-color="clr-blue"] {
  background-color: #00c6ff;
}

.wdes-customizer > ul > li > ul.color-switcher > li[data-color="clr-green"] {
  background-color: #11998e;
}

.wdes-customizer > ul > li > ul.color-switcher > li[data-color="clr-yellow"] {
  background-color: #f5af19;
}

.wdes-customizer > ul > li > ul.color-switcher > li[data-color="clr-red"] {
  background-color: #ed213a;
}

.wdes-customizer > ul > li > ul.color-switcher > li[data-color="clr-pink"] {
  background-color: #f953c6;
}

.wdes-customizer > ul > li .wdes-mode button {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 35px;
  padding: 6px 23px;
  font-weight: 400;
  font-size: 15px;
  color: #666;
  margin-right: 5px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.wdes-customizer > ul > li .wdes-mode button:last-child {
  margin-right: 0;
}

.wdes-customizer > ul > li .wdes-mode button:hover, .wdes-customizer > ul > li .wdes-mode button:focus {
  color: var(--main-gradient-color);
  border: 1px solid var(--main-gradient-color);
  outline: none;
}
/*# sourceMappingURL=customizer.css.map */