/****************************************************************************************************
 **************************************** Toggle Control Styles *************************************
 ****************************************************************************************************/
input[type=checkbox].tgl {

  	display: none;
}

input[type=checkbox].tgl, 
input[type=checkbox].tgl:after, 
input[type=checkbox].tgl:before, 
input[type=checkbox].tgl *, 
input[type=checkbox].tgl *:after, 
input[type=checkbox].tgl *:before, 
input[type=checkbox].tgl + .tgl-btn {

  	box-sizing: border-box;
}

input[type=checkbox].tgl::-moz-selection, 
input[type=checkbox].tgl:after::-moz-selection, 
input[type=checkbox].tgl:before::-moz-selection, 
input[type=checkbox].tgl *::-moz-selection, 
input[type=checkbox].tgl *:after::-moz-selection, 
input[type=checkbox].tgl *:before::-moz-selection, 
input[type=checkbox].tgl + .tgl-btn::-moz-selection {

  	background: none;
}

input[type=checkbox].tgl::selection, 
input[type=checkbox].tgl:after::selection, 
input[type=checkbox].tgl:before::selection, 
input[type=checkbox].tgl *::selection, 
input[type=checkbox].tgl *:after::selection, 
input[type=checkbox].tgl *:before::selection, 
input[type=checkbox].tgl + .tgl-btn::selection {

  	background: none;
}

input[type=checkbox].tgl + .tgl-btn {

  	outline: 0;
  	display: block;
  	width: 4em;
  	height: 2em;
  	position: relative;
  	cursor: pointer;
  	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type=checkbox].tgl + .tgl-btn:after, 
input[type=checkbox].tgl + .tgl-btn:before {

  	position: relative;
  	display: block;
  	content: "";
  	width: 50%;
  	height: 100%;
}

input[type=checkbox].tgl + .tgl-btn:after {

  	left: 0;
}

input[type=checkbox].tgl + .tgl-btn:before {

  	display: none;
}

input[type=checkbox].tgl:checked + .tgl-btn:after {

  	left: 50%;
}

input[type=checkbox].tgl-light + .tgl-btn {

  	background: #f0f0f0;
  	border-radius: 2em;
  	padding: 2px;
  	-webkit-transition: all .4s ease;
  	transition: all .4s ease;
}

input[type=checkbox].tgl-light + .tgl-btn:after {

  	border-radius: 50%;
  	background: #fff;
  	-webkit-transition: all .2s ease;
  	transition: all .2s ease;
}

input[type=checkbox].tgl-light:checked + .tgl-btn {

  	background: #9FD6AE;
}

input[type=checkbox].tgl-ios + .tgl-btn {

  	background: #fbfbfb;
  	border-radius: 2em;
  	padding: 2px;
  	-webkit-transition: all .4s ease;
  	transition: all .4s ease;
  	border: 1px solid #e8eae9;
}

input[type=checkbox].tgl-ios + .tgl-btn:after {

  	border-radius: 2em;
  	background: #fbfbfb;
  	-webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  	transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

input[type=checkbox].tgl-ios + .tgl-btn:hover:after {

  	will-change: padding;
}

input[type=checkbox].tgl-ios + .tgl-btn:active {

  	box-shadow: inset 0 0 0 2em #e8eae9;
}

input[type=checkbox].tgl-ios + .tgl-btn:active:after {

  	padding-right: .8em;
}

input[type=checkbox].tgl-ios:checked + .tgl-btn {

  	background: #86d993;
}

input[type=checkbox].tgl-ios:checked + .tgl-btn:active {

  	box-shadow: none;
}

input[type=checkbox].tgl-ios:checked + .tgl-btn:active:after {

  	margin-left: -.8em;
}

input[type=checkbox].tgl-flat + .tgl-btn {

  	padding: 2px;
  	-webkit-transition: all .2s ease;
  	transition: all .2s ease;
  	background: #fff;
  	border: 4px solid #f2f2f2;
  	border-radius: 2em;
}

input[type=checkbox].tgl-flat + .tgl-btn:after {

  	-webkit-transition: all .2s ease;
  	transition: all .2s ease;
  	background: #f2f2f2;
  	content: "";
  	border-radius: 1em;
}

input[type=checkbox].tgl-flat:checked + .tgl-btn {

  	border: 4px solid #7FC6A6;
}

input[type=checkbox].tgl-flat:checked + .tgl-btn:after {

  	left: 50%;
  	background: #7FC6A6;
}



/****************************************************************************************************
 **************************************** Radio Image Styles ****************************************
 ****************************************************************************************************/
.image label {
    position: relative;
    margin: 0 3% 3% 0;
    display: inline-block;
    width: 46%;
}

.image input {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.image img {
    display: block;
    border: 2px solid #F6F6F6;
}

.image input:checked+img {
    border: 2px solid #FF7D0E;
}


/****************************************************************************************************
 **************************************** Alpha Color Styles ****************************************
 ****************************************************************************************************/
 .customize-control-alpha-color .wp-picker-container .iris-picker {
  border-bottom:none;
}

.customize-control-alpha-color .wp-picker-container {
  max-width: 257px;
}

.customize-control-alpha-color .wp-picker-open + .wp-picker-input-wrap {
  width: 100%;
}

.customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control {
  float: left;
  width: 175px;
}

.customize-control-alpha-color .wp-picker-input-wrap .button {
  margin-left: 0;
  float: right;
}

.wp-picker-container .wp-picker-open ~ .wp-picker-holder .alpha-color-picker-container {
  display: block;
}

.alpha-color-picker-container {
  border: 1px solid #dfdfdf;
  border-top: none;
  display: none;
  background: #FFF;
  padding: 0 11px 10px;
  position: relative;
}

.alpha-color-picker-container .ui-widget-content,
.alpha-color-picker-container .ui-widget-header,
.alpha-color-picker-wrap .ui-state-focus {
  background: transparent;
  border: none;
}

.alpha-color-picker-wrap a.iris-square-value:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.alpha-color-picker-container .ui-slider {
  position: relative;
  z-index: 1;
  height: 24px;
  text-align: center;
  margin: 0 auto;
  width: 88%;
  width: calc( 100% - 28px );
}

.alpha-color-picker-container .ui-slider-handle,
.alpha-color-picker-container .ui-widget-content .ui-state-default {
  color: #777;
  background-color: #FFF;
  text-shadow: 0 1px 0 #FFF;
  text-decoration: none;
  position: absolute;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  border: 1px solid #aaa;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-top: -2px;
  top: 0;
  height: 26px;
  width: 26px;
  cursor: ew-resize;
  font-size: 0;
  padding: 0;
  line-height: 27px;
  margin-left: -14px;
}

.alpha-color-picker-container .ui-slider-handle.show-opacity {
  font-size: 12px;
}

.alpha-color-picker-container .click-zone {
  width: 14px;
  height: 24px;
  display: block;
  position: absolute;
  left: 10px;
}

.alpha-color-picker-container .max-click-zone {
  right: 10px;
  left: auto;
}

.alpha-color-picker-container .transparency {
  height: 24px;
  width: 100%;
  background-color: #FFF;
  background-image: url(../imgs/color-picker-transparency-grid.png);
  box-shadow: 0 0 5px rgba(0,0,0,0.4) inset;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 0;
  margin-top: -24px;
}

@media only screen and (max-width: 782px) {
  .customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control {
    width: 175px;
  }
}

@media only screen and (max-width: 640px) {
  .customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control {
    width: 175px;
    height: 33px;
  }
}

/* ==========================================================================
   Alpha Color Picker & Standard Color Picker
   ========================================================================== */
.customize-control-color .wp-color-result,
.customize-control-alpha-color .wp-color-result {
  border: none;
  box-shadow: none;
}

.customize-control-color .wp-color-result:after,
.customize-control-alpha-color .wp-color-result:after {
  border: none;
}

.customize-control-color .wp-color-result .wp-color-result-text,
.customize-control-alpha-color .wp-color-result .wp-color-result-text {
  line-height: 24px;
  border-left: none;
}

.wp-picker-holder .iris-picker .iris-palette {
  box-shadow: none;
}

.wp-picker-container .iris-picker,
.wp-picker-container .alpha-color-picker-container {
  border-radius: 0;
  border: none;
}

.wp-picker-container .alpha-color-picker-container {
  width: 233px;
}


/****************************************************************************************************
 ******************************** Multiple Select Color Styles **************************************
 ****************************************************************************************************/
.chosen-container-single .chosen-single {
    border-radius: 0px;
    height: 28px;
    background: #FFF;
    border-color: #DDDDDD;
    line-height: 28px;
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
}

.chosen-container-single .chosen-single div b {
    background-position: 0px 4px;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -18px 4px;
}

.chosen-container-multi .chosen-choices li {
    float: none;
}

.chosen-container .chosen-drop {
    position: relative;
}