/**
 * Since 2015 Ewonta
 *
 * NOTICE OF LICENSE
 *
 * This file is not open source! Each license that you purchased is only available for 1 wesite only.
 * If you want to use this file on more websites (or projects), you need to purchase additional licenses. 
 * You are not allowed to redistribute, resell, lease, license, sub-license or offer our resources to any third party.
 *
 *  @author     Ewonta <support@ewonta.ru>
 *  @copyright  Since 2015 Ewonta
 *  @license    Valid for 1 website (or project) for each purchase of license
 */
 
.btn-colors-preview{
  display: flex;
    justify-content: space-between;
    align-items: center;
}
.ps-colors-live-preview {
  position: fixed;
  top: 5%;
  right: -325px;
  width: 324px;
  z-index: 1000;
  transition: all 0.3s;
  color: #3d3d3d;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}
.ps-colors-live-preview .live-preview-toggle {
  float: left;
  width: 54px;
  height: 49px;
  padding-top: 6px;
  margin-left: -54px;
  margin-top: 100px;
  background: #fff;
  text-align: center;
  font-size: 25px;
  border-radius: 1px;
  cursor: pointer;
  box-shadow: -3px 0px 10px -2px rgb(0 0 0 / 20%);
}
.ps-colors-live-preview .live-preview-toggle:hover i {
  transform: scale(1.1);
}
.ps-colors-live-preview .live-preview-container {
  background: #fff;
  border-radius: 1px;
}
.ps-colors-live-preview .live-preview-title {
  font-size: 15px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #bdbdbd;
  padding: 15px 0;
  color: #3d3d3d;
}
.ps-colors-live-preview .live-preview-boxed-wide {
  padding: 10px 15px;
  overflow: hidden;
}
.ps-colors-live-preview .live-preview-boxed-wide a {
  width: 44%;
  float: left;
  color: #3d3d3d;
  text-align: center;
  margin: 0 3%;
  line-height: 28px;
  border: 1px solid #ddd;
  border-radius: 3px;
  transition: all 0.3s;
}
.ps-colors-live-preview .live-preview-boxed-wide a.active, .ps-colors-live-preview .live-preview-boxed-wide a:hover {
  background: #ddd;
}
.ps-colors-live-preview .live-preview-boxed-wide .style, .ps-colors-live-preview .live-preview-boxed-wide .boxed_bg_css, .ps-colors-live-preview .live-preview-boxed-wide .preview {
  display: none;
}
.ps-colors-live-preview .live-preview-wrapper {
  padding: 5px 20px;
  height: calc(74vh - 13px);
  overflow-y: scroll;
}
.ps-colors-live-preview .live-preview-wrapper .hint {
  text-align: center;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.ps-colors-live-preview .live-preview-wrapper .acolor {
  padding: 6px 0;
  overflow: hidden;
  line-height: 30px;
}
.ps-colors-live-preview .live-preview-wrapper .acolor label {
  float: left;
  margin: 0;
  color: #3d3d3d;
}
.ps-colors-live-preview .live-preview-wrapper .acolor .color-pick {
  float: right;
  width: 30px;
  height: 30px;
  border: 1px solid #bdbdbd;
}
.ps-colors-live-preview .live-preview-wrapper .acolor .style, .ps-colors-live-preview .live-preview-wrapper .acolor .selector, .ps-colors-live-preview .live-preview-wrapper .acolor .property, .ps-colors-live-preview .live-preview-wrapper .acolor .preview {
  display: none;
}
.ps-colors-live-preview .live-preview-reset {
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #bdbdbd;
}
.ps-colors-live-preview .live-preview-reset a {
  color: inherit;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 2px solid;
}
.ps-colors-live-preview .live-preview-special-style {
  padding: 10px 20px;
}
.ps-colors-live-preview .live-preview-special-style label {
  font-weight: 700;
  color: #3d3d3d;
  justify-content: space-between;
}
.ps-colors-live-preview .live-preview-special-style .check-wrap {
  width: 16px;
}
.ps-colors-live-preview .live-preview-special-style .custom-checkbox {
  margin-bottom: 10px;
}
.ps-colors-live-preview .live-preview-special-style .custom-radio {
  margin-left: auto;
  margin-right: 0;
}
.ps-colors-live-preview.open {
  right: 0;
}
.ps-colors-live-preview.open .live-preview-container {
  box-shadow: -3px 0px 50px -2px rgba(0, 0, 0, 0.2);
}