/* ------------------------------------------------
  Project:   ITsolve - IT Solution and Services Template
  Author:    ThemeHt

  NOTE: This is Color customizer stylesheet of template.
------------------------------------------------ */


.color-customizer {z-index: 10000; right: -70px; width: 70px; position: fixed; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.color-customizer .color-chooser {padding: 20px; background-color: #ffffff; -webkit-box-shadow: 0 0 20px 0 rgba(28, 30, 35, 0.2); -moz-box-shadow: 0 0 20px 0 rgba(28, 30, 35, 0.2); box-shadow: 0 0 20px 0 rgba(28, 30, 35, 0.2);}
.color-customizer.opened .color-chooser { opacity: 1; }
.color-customizer a.opener {display: block; height: 45px; background: #ffffff; width: 45px; font-size: 24px; line-height: 45px; color: #0d2c13;  position: absolute; right: 70px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-align: center; text-decoration: none;-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);}
.color-customizer.opened a.opener { left: -45px; border-color: transparent; }
.color-customizer ul { list-style: none; margin: 0; padding: 0; font-size: 0; }
.color-customizer ul li {width: 30px; height: 30px; border-radius: 50%; position: relative; display: block; cursor: pointer; margin: 10px 0; -webkit-transition: all linear 0.5s; -moz-transition: all linear 0.5s; -o-transition: all linear 0.5s; -ms-transition: all linear 0.5s; transition: all linear 0.5s; }
.color-customizer ul li:last-child{margin-right: 0;}
.color-customizer ul li.selected{border-radius: .25rem;}

.color-customizer .theme-default {background: #0049d0;}
.color-customizer .theme-2 {background: #5f35d3;}
.color-customizer .theme-3 {background: #fe1425;}
.color-customizer .theme-4 {background: #1ed5ff;}


@media (max-width: 576px){
.color-customizer .color-chooser {padding: 10px;}
.color-customizer ul li {width: 35px; height: 35px; margin: 5px;}
.color-customizer ul li:nth-child(3n+3){margin-right: 5px;}
}









/* RTL Version */
.color-customizerr {
  z-index: 10000; 
  left: -70px; /* Flipped from right */
  right: auto; 
  width: 70px; 
  position: fixed; 
  top: 50%; 
  transform: translateY(-50%);
}

.color-customizerr .color-chooser {
  padding: 20px; 
  background-color: #ffffff; 
  box-shadow: 0 0 20px 0 rgba(28, 30, 35, 0.2);
}

.color-customizerr.opened .color-chooser { 
  opacity: 1; 
}

.color-customizerr a.opener {
  display: block; 
  height: 45px; 
  background: #ffffff; 
  width: 45px; 
  font-size: 24px; 
  line-height: 45px; 
  color: #0d2c13;  
  position: absolute; 
  left: 70px; /* Flipped from right */
  right: auto;
  top: 50%; 
  transform: translateY(-50%); 
  text-align: center; 
  text-decoration: none;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
}

.color-customizerr.opened a.opener { 
  right: -45px; /* Flipped from left */
  left: auto;
  border-color: transparent; 
}

.color-customizerr ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  font-size: 0; 
}

.color-customizerr ul li {
  width: 30px; 
  height: 30px; 
  border-radius: 50%; 
  position: relative; 
  display: block; 
  cursor: pointer; 
  margin: 10px 0; 
  transition: all linear 0.5s; 
}

/* Flipped margin-right to margin-left */
.color-customizerr ul li:last-child {
  margin-left: 0; 
}

.color-customizerr ul li.selected {
  border-radius: .25rem;
}

.color-customizerr .theme-default { background: #0049d0; }
.color-customizerr .theme-2 { background: #5f35d3; }
.color-customizerr .theme-3 { background: #fe1425; }
.color-customizerr .theme-4 { background: #1ed5ff; }

@media (max-width: 576px) {
  .color-customizerr .color-chooser { padding: 10px; }
  .color-customizerr ul li { width: 35px; height: 35px; margin: 5px; }
  /* Flipped margin-right to margin-left */
  .color-customizerr ul li:nth-child(3n+3) { margin-left: 5px; }
}