body {
    position: relative
}

.customize-control-radio-image input {
    display: none
}

.customize-control-radio-image label {
    float: left
}

.customize-control-radio-image img {
    width: 80px;
    margin-right: 6px
}

#sub-accordion-section-pagespeed_post_page_settings textarea {
    height: 4em
}

/* Image dimensions control */
.thumb-dimensions {
    float: left;
    position: relative;
    width: 40%
}

.thumb-dimensions input[type='number'] {
    width: 50% !important;
}

.thumb-dimensions input[type='number'] {
    border-right: none
}

.thumb-dimensions span {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    line-height: 10px;
    border: solid 1px #DDD;
    background: #FFF;
    color: #CCC;
    text-align: center;
    border-radius: 50%;
}

.thumb-align {
    float: left;
    width: 55%;
    margin-left: 5%
}

.thumb-align select {
    width: 100%
}

/* Responsive control */
.responsive-content .textarea {
    position: relative;
    margin: 10px 0 0;
}

.responsive-content .textarea:before {
    font-family: dashicons;
    color: #AAA;
    padding: 1px;
    opacity: .8;
    position: absolute;
    border: solid 1px #CCC;
    right: 0;
    top: 0;

    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;
}

.responsive-content .desktop:before {
    content: '\f472 \f471'
}

.responsive-content .mobile:before {
    content: '\f470'
}

.responsive-content textarea {
    width: 100% !important;
    height: 100px
}

/* SCSS */
#customize-control-scss_override textarea {
    display: block;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    padding: 6px 8px;
    height: 500px;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    line-height: 1.4
}

.ui-autocomplete {
    z-index: 99999999
}

.selected-font {
    background: #FFF;
    padding: 10px;
    border: solid 1px #CCC;
    margin: 10px 0;
}

.selected-font .header {
    background: #CCC;
    margin: -10px -10px 10px;
    padding: 6px 10px;
    font-weight: bold;
}

.selected-font label.cb {
    width: 33.33%;
    float: left
}

.font-selection {
    position: relative
}

.font-selection .select {
    width: 50%;
    font-size: .8em;
    float: left;
    box-sizing: border-box;
    margin: 5px 0;
}

.c3 {
    width: 33.333%;
    box-sizing: border-box;
    display: block;
    float: left;
    padding-right: 5px;
    font-size: .75em;
    color: #000
}

.typography {
    margin-bottom: 10px
}

#customize-control-color_scheme
label {
    width: 50%;
    float: left
}

#customize-control-color_scheme img {
    border-color: #fff;
    width: 95%;
}

#customize-control-color_scheme input:checked + span + img {
    border-color: #00a0d2;
}

/* Drag and drop */

.drag-drop {
    margin: 10px -12px;
}

.drag-drop .dashicons {
    font-size: 13px;
    display: block;
    background: #DDD;
    width: auto;
    height: auto;
    text-align: center;
    line-height: 20px;

}

.draggables {
    /*border-bottom: dashed 1px #AAA;*/
    padding: 10px 5px;
}

.draggables .draggable input {
    display: none;
}

.draggables .draggable {

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0); /* IE6-9 */

    color: yellow;
    border-radius: 16px;
    padding: 1px 5px 3px;

}

.draggable {
    float: left;
    margin: 3px;
    border: solid 2px #DDD;
    background: #ccc;
}

.draggables .draggable label {
    padding: 5px;
    font-weight: bold;
}

.draggable input {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 40px;
}

.draggable input[type="hidden"] {
    display: none;
}

.sortable {
    padding: 10px 5px;
    border-bottom: dashed 1px #AAA;
    float: left;
    width: 100%;
    min-height: 36px;
}

.sortable .draggable {
    max-width: 46%;
    position: relative;
}

.sortable .draggable label {
    line-height: 26px;
    background: #CCC;
    font-size: .8em;
    font-weight: bold;
    padding: 0 5px;
}

.sortable .draggable.has-input label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.color-picker-hue {
    display: block !important;
    width: 40px !important;
    height: 31px;
    margin-left: 8px !important;
    float: right;
    font-weight: bold;
    border-width: 0 !important;
    background: #FFF !important;
    border-radius: 3px;
}

#customize-control-shades_from .iris-strip-horiz {
    width: auto !important;
    overflow: hidden;
}

/* Upsell */
#accordion-section-upsell h3.accordion-section-title:after {
    content: "Unlock";
    padding: 2px 8px 3px;
    font-size: 14px;
    color: #FFF !important;
    border-radius: 3px;
    line-height: 18px;
    font-family: sans-serif;
    font-weight: bold;
    background: #396afc; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #2948ff, #396afc); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #2948ff, #396afc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

#accordion-section-upsell:hover h3.accordion-section-title:after {
    background: red;
}

.upsell-intro {
    font-size: 1.2em;
    margin-bottom: 20px;
    line-height: 1.6em
}

.features {
    margin-bottom: 20px
}

.features li {
    margin-left: 0;
}

.features li:before {
    content: "\f147";
    font-family: dashicons;
    background: rgb(76, 217, 100);
    color: #FFF;
    display: block;
    width: 14px;
    height: 14px;
    float: left;
    margin: 2px 5px 0 0;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.upsell .lg-btn {
    display: block;
    margin: 0 10px;
    color: #FFF;
    text-align: center;
    padding: 20px 10px;
    text-decoration: none;
    font-size: 1.8em;
    font-weight: 300;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    background: #EB3349; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #F45C43, #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #F45C43, #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.upsell .lg-btn:hover {
    background: #F45C43; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F45C43, #EB3349); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F45C43, #EB3349); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.upsell-feature {
    font-size: 1.2em;margin-bottom: 10px;
    line-height: 1.25em;
}
#accordion-panel-thumbnails_excerpts {
    margin-bottom: 16px
}

.cf:before,
.cf:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.cf {
    *zoom: 1;
}