.color-picker-trigger{
  border: 1px solid #D3D3D3;
  border-radius: 4px;
  height: 32px;
  width: 48px;
  line-height: 32px;
  background-color: #FFFFFF;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.color-picker-trigger:hover{
  border-color: #1292EE;
}

.color-picker-trigger .preview{
  display: block;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 5px;
  border-radius: 50%;
  position: relative;
}

.color-picker-trigger .preview:after{
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: inherit;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  top: 0;
}

.color-picker-trigger[data-color="transparent"] .preview{
  background-color: #FFFFFF !important;
  background-image: url(/images/builder/transparent-checkboard.svg);
  background-size: 9px;
  background-position: 10px 0px;
}

.color-picker-trigger .icon{
  display: block;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  right: 5px;
  color: #222222;
}

.color-picker-wrapper{
  position: absolute;
  z-index: 2147483647;
  background-color: #FFFFFF;
  box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
  border-radius: 4px;
  border: 1px solid #DDDDDD;
}

.color-picker-wrapper .color-picker-arrow{
  width: 18px;
    height: 18px;
    top: 0;
}

.color-picker-wrapper .color-picker-arrow:before{
  content: '';
    position: absolute;
    border-color: transparent;
    border-style: solid;

  top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    transform-origin: center bottom;
  
  border-bottom-color: #FFFFFF;
    bottom: 18px;
}

.color-picker-wrapper .color-picker-arrow:after{
  content: '';
    position: absolute;
    z-index: -1;

  border-color: transparent;
    border-style: solid;

  border-bottom-color: rgba(0,8,16,.2);
    border-width: 0 7px 7px;
    bottom: 19px;
    left: 1px;
}

.color-picker-wrapper .color-picker{
  box-shadow: none;
  background-color: transparent;
  padding-bottom: 5px;
}

.color-picker-wrapper .color-picker-input-wrapper{
  margin: .8em;
  margin-top: 0px;
  position: relative;
}

.color-picker-wrapper .color-picker-input-wrapper.color-transparent .color-picker-input-preview{
  background-color: #FFFFFF !important;
    background-image: url(/images/builder/transparent-checkboard.svg);
    background-size: 10px;
}

.color-picker-wrapper .color-picker-input-wrapper .color-picker-input{
  width: 100%;
  font-size: 12px;
  height: 30px;
  padding-left: 30px;
}

.color-picker-wrapper .color-picker-input-wrapper .color-picker-input-preview{
  width: 19.5px;
  height: 19.5px;
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 4px;
}

.color-picker-wrapper .color-picker-input-wrapper .color-picker-input-preview:after{
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: inherit;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  top: 0;
}

.color-picker-wrapper .color-picker-transparent-button{
  vertical-align: middle;
  padding-top: 1.8px;
  padding-bottom: 1.8px;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 3px;
}

.color-picker-wrapper .color-picker-transparent-button img{
  opacity: 0.5;
  position: relative;
  left: -3px;
  vertical-align: middle;
  top: -1px;
}

.color-picker-wrapper .color-picker-transparent-button span{
  vertical-align: middle;
}

.color-picker-wrapper .color-picker-bottom{
  padding: .8em;
  border-top: 1px solid #EEEEEE;
  padding-top: 8px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.color-picker-wrapper .color-picker-label{
  color: #999999;
  font-size: 13px;
  margin-bottom: 3px;
}

.color-picker-wrapper .color-picker-swatches{
  margin-bottom: 10px;
}

.color-picker-wrapper .color-picker-swatches .color-picker-swatch{
    width: 19.5px;
    height: 19.5px;
    display: inline-block;
    margin-right: 3px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
    cursor: pointer;
    vertical-align: middle;
}

.color-picker-wrapper .color-picker-swatches .color-picker-swatch:last-child{
  margin-right: 0px;
}