/* ------------------------------------------------
  Project:   Thomso - Multipurpose Responsive HTML5 Template
  Build:     Bootstrap 4.4.1
  Author:    ThemeHt

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


.color-customizer {z-index: 10000; right: -300px; width: 300px; position: fixed; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);}
.color-customizer .color-button {text-align: center; display: inline-block; z-index: 2; position: absolute; background: #fff; width: 100%; }
.color-customizer .color-chooser {padding: 20px; background-color: #ffffff; -webkit-box-shadow: 0 20px 40px 0 rgba(28, 30, 35, 0.2); -moz-box-shadow: 0 20px 40px 0 rgba(28, 30, 35, 0.2); box-shadow: 0 20px 40px 0 rgba(28, 30, 35, 0.2);}
.color-customizer.opened .color-chooser { opacity: 1; }
.color-customizer a.opener {display: block; height: 45px; background: #FF4500; border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: 45px; font-size: 24px; line-height: 45px; color: #ffffff;  position: absolute; right: 300px; top: 0; 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: 5px 0 0 0; font-size: 0; }
.color-customizer ul li {border-radius: 5px; width: 40px; height: 40px; float: left; position: relative; display: inline-block; cursor: pointer; margin: 0 14px 14px 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.selected:before { color: #fff; content: "\e64c"; font-family: 'themify'; font-size: 16px; display: inline-block; position: absolute; top: 50%; left: 50%; text-align: center; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%);  }
.color-customizer ul.reset li { width: 100%; padding: 6px 0; min-width: 0; text-align: center; margin-top: 30px; }
.color-customizer select { width: 100%; padding: 5px; border: 1px solid #b2bfca; }
.color-customizer ul li:nth-child(5n+5){margin-right: 0;}
.reset-btn{padding: 6px 15px; font-size: 12px;}

.color-customizer .theme-default {background: #FF4500;}
.color-customizer .theme-green {background: #3BB143;}
.color-customizer .theme-aquamarine {background: #7FFFD4;}
.color-customizer .theme-navy-blue {background: #1919ff;}
.color-customizer .theme-crimson {background: #DC143C;}
.color-customizer .theme-lolipop {background: #81007F;}
.color-customizer .theme-deep-pink {background: #FF1493;}
.color-customizer .theme-red-violet {background: #C71585;}
.color-customizer .theme-amaranth {background: #E52B50;}
.color-customizer .theme-scarlet {background: #FF2400;}
.color-customizer .theme-limegreen {background: #32CD32;}
.color-customizer .theme-gold {background: #FFD700;}
.color-customizer .theme-darkslateblue {background: #483D8B;}
.color-customizer .theme-mediumvioletred {background: #C71585;}
.color-customizer .theme-kelly {background: #4CBB17;}
.color-customizer .theme-rebecca-purple {background: #663399;}
.color-customizer .theme-forestgreen {background: #228B22;}
.color-customizer .theme-blue {background: #0000FF;}
.color-customizer .theme-yellow {background: #fcd846;}
.color-customizer .theme-royal-blue {background: #4169E1;}
.color-customizer .theme-mediumseagreen {background: #3CB371;}
.color-customizer .theme-red {background: #FF0000;}
.color-customizer .theme-blue-violet {background: #8A2BE2;}
.color-customizer .theme-slateblue {background: #6A5ACD;}
.color-customizer .theme-lightseagreen {background: #20B2AA;}


@media (max-width: 576px){

.color-customizer {right: -260px; width: 260px;}
.color-customizer a.opener{right: 260px;}
.color-customizer ul li {height: 32px; width: 32px;}

}