.text-color{color:var(--primary-color)}.bg-color{background-color:var(--primary-color)}.color-palate{-ms-box-shadow:0 0 20px 1px #0000001a;-o-box-shadow:0 0 20px 1px #0000001a;text-align:center;z-index:999;background:#fff;width:130px;padding-bottom:30px;transition:all .5s;position:fixed;top:25%;left:-130px;box-shadow:0 0 20px 1px #0000001a}.color-trigger{background:var(--primary-color) none repeat scroll 0 0;cursor:pointer;z-index:1;-o-transition:all .3s ease;justify-content:center;align-items:center;width:38px;height:57px;padding-top:0;transition:all .3s;display:flex;position:absolute;top:0;right:-38px}.color-trigger:before{content:"";color:#fff;content:"";background-color:var(--primary-color);z-index:1;opacity:0;visibility:hidden;-o-transition:all .3s ease;width:100%;height:100%;font-family:"Font Awesome 5 Free";font-size:18px;font-weight:900;line-height:50px;transition:all .3s;position:absolute;top:0;left:0}.color-trigger svg{-ms-animation:fa-spin 2s linear infinite;color:#fff;font-size:18px;line-height:40px;animation:2s linear infinite fa-spin}.color-palate-head{background:var(--primary-color) none repeat scroll 0 0;text-align:left;margin-bottom:30px;padding:8px 15px}.color-palate-head h6,.secondary-head h6{color:#fff;margin:0;font-size:14px;font-weight:600}#secondary-color-hex{margin:0;font-size:12px;transition:opacity .15s;color:#ffffffe6!important}.color-palate input{width:50%;box-shadow:none;outline:none;padding:0;border:0!important}