/**
 * Hoot Customizer Custom Icon Control
 * ========================================================
 */

/*** Icon Control ***/

.customize-control-icon {}
.hoot-customizer-control-icon-picked, .hoot-customizer-control-icon-remove { display: inline-block; line-height: 22px; 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; cursor: pointer; }
.hoot-customizer-control-icon-picked:hover, .hoot-customizer-control-icon-remove:hover { background: #fafafa; border-color: #999; color: #23282d; }
.hoot-customizer-control-icon-picked:active, .hoot-customizer-control-icon-remove:active { outline: 0; background: #eee; border-color: #999; color: #32373c; -webkit-box-shadow: inset 0 2px 5px -3px rgba(0,0,0,.5); box-shadow: inset 0 2px 5px -3px rgba(0,0,0,.5); }
.hoot-customizer-control-icon-picked i { font-size: 20px; padding: 2px 4px; width: 26px; text-align: center; background: #eee; float: left; }
.hoot-customizer-control-icon-picked i.selected { /*background: #2ea2cc; color: #fff;*/ }
.hoot-customizer-control-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-customizer-control-icon-remove { vertical-align: top; padding: 1px 7px; margin-left: 10px; background-color: #fff; }
.hoot-customizer-control-icon-remove i { color: #bbb; font-size: 13px; }
.hoot-customizer-control-icon-remove span { color: #888; margin-left: 5px; }
/* Displaying Icon Fly */
.customize-control-icon .hoot-customizer-control-icon-picked.flygroup-open { border-color: #999; color: #32373c; /*background: #eee;*/ background: #e5e5e5;
	/*-webkit-box-shadow: inset 0 2px 5px -3px rgba(0,0,0,.5);
	        box-shadow: inset 0 2px 5px -3px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);
            box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);*/
	-webkit-box-shadow: inset 2px 2px 6px -3px rgba(0,0,0,.6);
	        box-shadow: inset 2px 2px 6px -3px rgba(0,0,0,.6); }
.customize-control-icon .hoot-customizer-control-icon-picked.flygroup-open span { border-color: #aaa; }


/*** Icon Fly ***/
.hoot-icon-list-wrap {}
.hoot-icon-list-wrap h4 {}
.hoot-icon-list i { font-size: 20px; display: inline-block; width: 1em; border: 1px solid #e1e1e1; margin: 0 0 -1px -1px; padding: 0.5em; cursor: pointer; }
.hoot-icon-list i:hover,
.hoot-icon-list i:hover:before,
.hoot-icon-list i.selected { background: #2ea2cc; color: #fff; }


/*** Displaying Icon Fly ***/
/* @includes Customizer Layout Mods */

body.hoot-displaying-flyicon #hoot-flyicon { left: 0; width: 300px; z-index: 11; }
body.hoot-displaying-flyicon #customize-preview { opacity: .4; left: 300px; }
body.hoot-displaying-flyicon #customize-controls {}
@media screen and (max-width: 640px) {
	body.hoot-displaying-flyicon #hoot-flyicon { left: 0; width: 100%; position: fixed; z-index: 10; }
}