/**
 * Hoot Widgets
 * ========================================================
 */

/*** Widgets page ***/
.widgets-php { }

/*** Hoot Widgets ***/
.hoot-widget-form { }
.hoot-widget-form-help { font-size: 0.9em; margin: 1em 0; color: #999999; font-style: italic; background: #fafafa; border: solid 1px #e5e5e5; border-radius: 2px; padding: 0.5em 1em; }
.hoot-widget-field { clear: both; margin: 1.3em 0; line-height: 1.5; }
ul.hoot-widget-list { margin-top: 0.5em; }
.hoot-widget-field-description { clear: both; }

/*** Separator ***/
.hoot-widget-field-separator { height: 1px; width: 100%; display: block; clear: both; border-top: solid 1px #ccc; margin: 1.5em 0; }

/*** Defaults ***/
.hoot-widget-field-type-smallselect { min-height: 30px; }
.hootsmallselect,
.customize-control .hootsmallselect { float: right; min-width: 97px; max-width: 50%; width: auto; }

/*** Color Picker ***/
.hoot-widget-field .wp-picker-container { float: right; }

/*** Image Picker ***/
.hoot-widget-list-images li { display: inline-block; }
.hoot-widget-list-images input[type="radio"] { visibility: hidden; opacity: 0; filter: alpha(opacity=0); }
.hoot-widget-list-images label { display: inline-block; border: solid 3px #e5e5e5; position: relative; left: -22px; padding: 2px; margin-right: -22px; }
.hoot-widget-list-images label:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.hoot-widget-list-images .hoot-widget-image-picker-img { float: left; }

.hoot-widget-list-images input[type="radio"]:checked + label { border: 3px solid #64bd1f; }
.hoot-widget-list-images input[type="radio"]:checked + label:before { content: "\f147"; font-family: dashicons; background-color: #64bd1f; position: absolute; right: 0px; bottom: 0px; border-top-left-radius: 2px; color: #fff; line-height: normal; font-size: 20px; padding: 1px 0 0 1px; }

/*** Icon Picker ***/
.hoot-widget-field-type-icon { min-height: 30px; }
.hoot-widget-field-type-icon .hoot-of-icon-picked { display: inline-block; font-size: 11px; line-height: 22px; cursor: pointer; float: right;
	background: #f7f7f7; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.08); box-shadow: 1px 1px 0 rgba(0,0,0,.08); border: solid 1px #ccc; }
.hoot-widget-field-type-icon .hoot-of-icon-picked i { font-size: 20px; padding: 2px 4px; width: 26px; text-align: center; background: #eee; float: left; }
.hoot-widget-field-type-icon .hoot-of-icon-picked i.selected { /*background: #2ea2cc; color: #fff;*/ }
.hoot-widget-field-type-icon .hoot-of-icon-picked span { display: inline-block; padding: 1px 7px; float: left;
	border-left: solid 1px #ccc; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; }
.hoot-widget-field-type-icon .hoot-of-icon-picker-box { display: none; max-width: none; margin-right: 0px; margin-top: 0.3em; overflow: auto; max-height: 25em; background: #fff; padding: 10px; padding-right: 0; border: solid 1px #dfdfdf; position: relative; z-index: 10; }
.hoot-widget-field-type-icon .hoot-of-icon-picker-list { }
.hoot-widget-field-type-icon .hoot-of-icon-picker-list:after { display: block; clear: both; width: 100%; content: ''; }
.hoot-widget-field-type-icon .hoot-of-icon-picker-list i { font-size: 1.33em; float: left; width: 1em; border: 1px solid #e1e1e1; margin: 0 0 -1px -1px; padding: 0.5em; cursor: pointer; }
.hoot-widget-field-type-icon .hoot-of-icon-picker-list i:hover,
.hoot-widget-field-type-icon .hoot-of-icon-picker-list i:hover:before,
.hoot-widget-field-type-icon .hoot-of-icon-picker-list i.selected { background: #2ea2cc; color: #fff; }
.hoot-widget-field-type-icon .hoot-of-icon-picker-list .hoot-of-icon-none { width: auto; padding: 2px 8px; margin-top: 8px; background: #f7f7f7; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.08); box-shadow: 1px 1px 0 rgba(0,0,0,.08); }
.hoot-widget-field-type-icon .hoot-of-icon-picker-list .hoot-of-icon-none:before { color: #bbb; }
.hoot-widget-field-type-icon .hoot-of-icon-picker-list .hoot-of-icon-none span { font-family: "Open Sans",sans-serif; font-size: 11px; line-height: 14px; margin-left: 7px; vertical-align: 12%; }

/*** Image ***/
.hoot-widget-field-type-image { min-height: 30px; }
.hoot-widget-field-type-image .hoot-of-image-selected { display: inline-block; font-size: 11px; line-height: 22px; cursor: pointer; float: right;
	background: #f7f7f7; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.08); box-shadow: 1px 1px 0 rgba(0,0,0,.08); border: solid 1px #ccc; }
.hoot-widget-field-type-image .hoot-of-image-selected-img { width: 34px; height: 24px; display: inline-block; vertical-align: top; background-size: cover; background-position: center center; }
.hoot-widget-field-type-image .hoot-of-image-selected-label { display: inline-block; padding: 1px 7px;
	border-left: solid 1px #ccc; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; }

/*** Group ***/
.hoot-widget-field-group-top h3 { font-size: 13px; margin: 0; cursor: pointer; color: #0073aa; }
.hoot-widget-field-group-items{ margin-top: 0.5em; }
.hoot-widget-field-group-item { background: #f7f7f7; border: solid 1px #ddd; border-bottom: none; padding: 0 0.8em 1px; }
.hoot-widget-field-group-item-top { background: #eee; margin: 0 -0.8em; padding: 5px 0.8em; cursor: pointer; }
.hoot-widget-field-group-item-top h4 { margin: 0; padding-right: 18px; }
.hoot-widget-field-group-remove { display: inline-block; float: right; padding: 0 5px; cursor: pointer; }
.hoot-widget-field-group-item-form { display: none; }
.hoot-widget-field-group-add { background: #eee; border: dashed 1px #ddd; text-align: center; cursor: pointer; }