@import '../../../../v55/css/lib/bourbon/bourbon';
@import 'select2';

.customize-control {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.customize-control-fox56_html {
    padding-bottom: 0;
    border-bottom: 0;
}
.select2-container,
.pcr-app {
    z-index: 999999999999999999999 !important;
}
html .preview-mobile .wp-full-overlay-main {
    margin-top: 10px; // instead of auto, so that we have room for header builder
}
:root {
    --accent-color: #2271b1;
}
.wp-color-result-text {
    display: none; // yes, why?
}
.colorpicker56 {
    display: block;
}
.colorpicker56__button {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, #fff);
    background-size: 6px 6px;
}

#customize-theme-controls>ul>li .panel-title:before,
#customize-theme-controls>ul>li>h3:before {
    font-family: Dashicons;
    font-size: 20px;
    font-weight: thin!important;
    left: -2px;
    line-height: 0;
    opacity: .6;
    position: relative;
    top: -1px;
    vertical-align: middle;
}
#accordion-section-static_front_page .section-title:before,
#accordion-section-static_front_page>h3:before {
    content: "\f108";
}
#accordion-panel-header .panel-title:before,
#accordion-panel-header>h3:before {
    content: "\f342";
}
#accordion-section-h .section-title:before,
#accordion-section-h>h3:before {
    content: "\f102";
}
#accordion-section-builder_settings .section-title:before,
#accordion-section-builder_settings>h3:before {
    content: "\f108";
}
#accordion-panel-blog .panel-title:before,
#accordion-panel-blog>h3:before {
    content: "\f509";
}
#accordion-panel-single .panel-title:before,
#accordion-panel-single>h3:before {
    content: "\f497";
}
#accordion-section-page .section-title:before,
#accordion-section-page>h3:before {
    content: "\f498";
}
#accordion-panel-footer .panel-title:before,
#accordion-panel-footer>h3:before {
    content: "\f346";
}
#accordion-panel-design .panel-title:before,
#accordion-panel-design>h3:before {
    content: "\f100";
}
#accordion-panel-nav_menus .panel-title:before,
#accordion-panel-nav_menus>h3:before {
    content: "\f333";
}
#accordion-panel-widgets .panel-title:before,
#accordion-panel-widgets>h3:before {
    content: "\f480";
}
#accordion-section-performance .section-title:before,
#accordion-section-performance>h3:before {
    content: "\f311";
}
#accordion-section-social .section-title:before,
#accordion-section-social>h3:before {
    content: "\f237";
}
#accordion-section-misc .section-title:before,
#accordion-section-misc>h3:before {
    content: "\f111";
}
#accordion-section-translation .section-title:before,
#accordion-section-translation>h3:before {
    content: "\f326";
}
#accordion-section-custom_css .section-title:before,
#accordion-section-custom_css>h3:before {
    content: "\f540";
}
#accordion-panel-woocommerce .panel-title:before,
#accordion-panel-woocommerce>h3:before {
    content: "\f174";
}
#accordion-section-export .section-title:before,
#accordion-section-export>h3:before {
    content: "\f321";
}

/* ORDINARY
============================================================================== */
.customize-control-fox56_textarea textarea {
    width: 100%;
    resize: vertical;
}

/* RADIO IMAGE
============================================================================== */
.customize-control-fox56_radio_image {
    label {
        width: 30%;
        display: inline-block;
        margin: 0 3px 3px 0;
    }
    input[type="radio"] {
        display: none;
    }
    img {
        display: block;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        opacity: .7;
    }
    label:hover img {
        opacity: 1;
        border-color: #1679b7;
    }
    input:checked + img {
        opacity: 1;
        border-color: #1679b7;
        box-shadow: 0 2px 6px rgba(0,0,0,.5);
    }
}
.customize-control-fox56_radio_image .customize-control-label {
    display: block;
    margin: 0;
    width: auto;
}
.customize-control-fox56_checkbox input[type="checkbox"] {
    display: block;
    margin-top: 6px;
}
.customize-control-fox56_radio label {
    display: block;
}

/* BUILDER
============================================================================== */
.sep--builder,
.sep--customizer {
    background: #274b67;
    color: white;
    margin: 0 -10px;
    padding: 5px;
    font-weight: normal;
}
.sep--message {
    margin: 10px 0;
    display: block;
    background: #d1e4f0;
    color: #023c73;
    padding: 10px;
    font-size: 14px;
    line-height: 1.3;
    a {
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }
}
#sub-accordion-section-wi_homepage_builder {
    overflow: visible;
}
.builder-sectionlist {
    display: none;
}
.section56__content {
    display: none;
}

/* Layout
--------------------------- */
.section56 {
    
    & + .section56,
    & + .sortable-placeholder {
        margin-top: 10px;
    }

    box-shadow: 1px 3px 6px rgba(0,0,0,.15);

    background: white;
    border: 1px solid #ccd0d4;
    
    position: relative;
    z-index: 0;

    &[data-id="section__placeholder"] {
        display: none;
    }
}
.section56__description {
    padding: 10px;
    p {
        margin: 0;
        padding: 8px;
        font-size: 12px;
        line-height: 1.5;
        background: #f0f0f0;
        border-radius: 1px;
    }
}
.sortable-placeholder {
    border: 1px dashed #999;
    background: #e9f1f6;
    height: 50px;
    display: block;
}

/* Section top
--------------------------- */
.section56__name {
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    
    cursor: move;
    
    height: 54px;
    line-height: 54px;
    position: relative;

    &.section56__field {
        padding: 0;
        border-bottom: 1px solid #ccd0d4;
        border-top: 0;
    }
    
    &:hover {
        background: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
    
    // the cover
    &:before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        content: "";
        display: block;
    }
    &.inedit:before {
        display: none;
    }
}
.section56__action-menu__btn {
    display: block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    margin: 0;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    outline: 0;
    color: #333;
    
    i {
        display: block;
        width: auto;
        height: auto;
        line-height: inherit;
        margin: 0;
    }
}
.section56__action-menu {
    
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        
        display: none;
        
        position: absolute;
        top: 100%;
        left: -1px;
        width: 200px;
        background: white;
        z-index: 10;
        border: 1px solid #999;
        box-shadow: 0 10px 10px rgba(0,0,0,.1);
        
        &:before,
        &:after {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent #fff transparent;
            
            display: block;
            position: absolute;
            left: 20px;
            top: -9px;
            z-index: 20;
            content: "";
        }
        &:after {
            border-color: transparent transparent #777 transparent;
            left: 20px;
            top: -10px;
            z-index: 10;
        }
        
        a {
            display: block;
            color: #333;
            padding: 0 16px;
            line-height: 40px;
            text-decoration: none;
            outline: 0;
            border: 0;
            
            &:hover {
                color: #007cba;
            }
        }
        .section56__delete {
            color: red;
            &:hover {
                color: red;
            }
        }
        
    }
    li {
        display: block;
        margin: 0;
    }
}
.section56__name_icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    width: 40px;
    line-height: 54px;
    text-align: center;
    font-size: 16px;
    i {
        display: block;
        line-height: inherit;
        text-align: center;
        width: auto;
        height: auto;
    }
    
    .dashicons-arrow-up {
        display: none;
    }
}
.section56.active {
    .dashicons-arrow-up {
        display: block;
    }
    .dashicons-arrow-down {
        display: none;
    }
}
#customize-controls .section56__name__input {
    margin: 0;
    border: 1px solid transparent;
    background: none;
    box-shadow: none;
    outline: 0;
    width: 100%;
    padding: 0 40px 0 54px;
    line-height: 54px;
    cursor: inherit;
}
#customize-controls .section56__name.inedit .section56__name__input {
    background: #ffd;
    box-shadow: 0 0 10px #98a2ad;
    cursor: auto;
    font-weight: 400;
}

/* tabs
================================ */
.section56__tabs {
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: relative;
        padding: 5px 5px 0;
        
        &:before {
            position: absolute;
            content: "";
            display: block;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #aaa;
            z-index: 1;
        }
    }
    li {
        display: block;
        float: left;
        margin: 0;
    }
    a {
        display: block;
        margin: 0;
        text-decoration: none;
        padding: 12px 3px;
        color: inherit;
        font-weight: 400;
        border: 1px solid transparent;
        position: relative;
        z-index: 20;
        margin-bottom: -1px;
        color: #999;
        outline: 0;

        cursor: pointer;
        
        &:hover {
            color: black;
        }
        &:focus {
            box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79,148,212,.8);
        }
    }
    .active > a {
        border-color: #aaa #aaa white #aaa;
        background: white;
        color: black;

        cursor: default;
    }
}
.hide--sectiontab {
    display: none;
}

/* inner tabs
--------------------------- */
.section56__inner-tabs,
.tabs56 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #bababa;
    a {
        font-weight: bold;
        cursor: pointer;
        display: block;
        padding: 0 5px;
        font-size: 16px;;
        line-height: 36px;
        border-bottom: 3px solid transparent;

        opacity: .6;
        &:hover {
            opacity: 1;
        }
    }
    a.active {
        opacity: 1;
        border-bottom-color: var(--accent-color);
    }
}
.hide--innertab {
    display: none;
}

/* conditional
--------------------------- */
.hide--condition {
    display: none;
}

/* section field
--------------------------- */
.section56__fields {
    padding: 10px;
}
.section56__field {
    border-bottom: 1px solid #d0d0d0;
    padding: 14px 0;

    textarea {
        width: 100%;
        height: 60px;
    }
}
.section56__field--html {
    padding: 0;
    border: 0;
    margin-bottom: -1px;
}
.section56__field__name {
    margin: 0 0 5px;
}
.section56__field__description {
    line-height: 1.4;
    color: #777;
    margin: 5px 0 0;
    small {
        display: block;
    }
}

/* sortable
================================ */
.section56__field--sortable .sortable-placeholder {
    // width: 80px;
    // display: inline-block;
}
.com-item {
    display: block;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    overflow: hidden;
    margin: 0 2px 18px 0;
}
.com-item--inline {
    display: inline-block;
}
.com-item__main {
    display: block;
    vertical-align: middle;
    padding: 4px 2px;
    text-align: center;
    background: whitesmoke;

    i {
        display: none;
        font-size: 14px;
    }
    
    i,
    span {
        color: #aaa;
    }
    &:hover {
        i, span {
            color: #777;
        }
    }
    input {
        display: none;
    }
    input:checked ~ i {
        color: var(--accent-color);
    }
    input:checked + span {
        color: var(--accent-color);
    }
}
.com-item_devices {
    display: flex;
    text-align: center;
    border-top: 1px solid #c0c0c0;
    > label {
        display: block;
        width: 33.3%;
        padding: 2px 0px;
        font-size: 12px;
        input {
            display: none;
        }
        i {
            color: #ccc;
            font-size: 12px;
            line-height: 1.5;
        }
        &:hover {
            i {
                color: #aaa;
            }
        }
        input:checked + i {
            color: var(--accent-color);
        }
    }
    > label + label {
        border-left: 1px solid #c0c0c0;
    }
}

/* radio image
================================ */
.section56__field--radio_image {
    label {
        display: inline-block;
        margin: 0 4px 4px 0;
        width: 70px;
    }
    input {
        display: none;
    }
    img {
        display: block;
        width: 100%;
        border: 1px solid #e0e0e0;
        transition: all .1s ease-out;
        border-radius: 4px;
        opacity: .7;
    }
    label:hover img {
        opacity: 1;
        border-color: #c0c0c0;
    }
    input:checked + img {
        opacity: 1;
        border-color: #08c;
        box-shadow: 0 2px 5px rgba(0,0,0,.6);
    }
}

/* image
================================ */
.uploader56 {
    display: block;
}
.uploader56__image {
    padding: 10px;
    position: relative;
    background: #f4f9fd;
    border: 1px dashed #c4d2d8;

    img {
        display: block;
        height: auto;
        // border: 1px solid #ccc;
        // box-shadow: 0 0 4px rgba(0,0,0,.1);
    }
}
.uploader56__image__remove {
    display: block;
    position: absolute;
    cursor: pointer;
    top: 3px;
    right: 3px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 24px;
    background: white;
    border-radius: 50%;
    color: #777;
    z-index: 20;
    display: none;
}
.uploader56__image > img + .uploader56__image__remove {
    display: block;
}
.uploader56 .uploader56__button {
    margin: 10px 0 0;
}

/* group
================================ */
.row {
    display: flex;
    flex-flow: row wrap;
    margin: -6px -2px 0;
}
.col {
    display: block;
    flex: none;
    padding: 6px 2px 0;
    box-sizing: border-box;
}
.col-1-1 {
    width: 100%;
}
.col-1-2 {
    width: 50%;
}
.col-1-3 {
    width: 33.33%;
}
.col-2-3 {
    width: 66.66%;
}
.col-1-4 {
    width: 25%;
}
.col-3-4 {
    width: 75%;
}
.col-1-5 {
    width: 20%;
}
.col-2-5 {
    width: 40%;
}
.col-3-5 {
    width: 60%;
}
.col-4-5 {
    width: 80%;
}
.col-1-6 {
    width: 16.66%;
}
.col-5-6 {
    width: 83.33%;
}

/* HEADER BUILDER
============================================================================== */
.hb56 {
    z-index: 99999;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    background: #232634;
    color: white;
    box-shadow: 0 0 30px rgba(0,0,0,.3);
    border-top: 1px solid #ccc;
    transform: translate(0,110%);
    transition: all .2s ease-out;

    &.active {
        transform: translate(0,0);   
    }
}
.collapsed {
    .hb56,
    .hb56.active {
        transform: translate(0,110%);
    }
}
.hb56--mobile {
    display: none;
}
.preview-mobile,
.preview-tablet {
    .hb56--mobile {
        display: block;
    }
    .hb56--desktop {
        display: none;
    }
}
.hb56__wrapper {
    padding: 10px;
}
.hb56__section {
    position: relative;
    border: 2px solid transparent;
    &:hover {
        border-color: var(--accent-color);
    }
    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col {
        padding-left: 5px;
        padding-right: 5px;
    }
}
.hb56__section + .hb56__section {
    margin-top: 5px;
}
.hb56__name {
    position: absolute;
    top: -22px;
    left: 0;
    z-index: 30;
    display: block;
    height: 24px;
    text-align: center;
    line-height: 24px;
    padding: 0 4px;
    background: #a53e21;
    color: white;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
    display: flex;
    align-items: center;
    align-content: center;

    opacity: 0;
    visibility: hidden;
    transform: translate(0,5px);
    transition: all .4s ease-out;
    
    i {
        margin: 0;
        padding: 0;
        margin-right: 2px;
        font-size: 14px;
        height: 24px;
        line-height: 24px;
    }
}
.hb56__section:hover .hb56__name {
    opacity: 1;
    visibility: visible;
    transform: translate(0,0);
}
.col-0-1 {
    width: 0;
    display: none;
}
.col--left {
    text-align: left;
}
.col--center .hb56__part{
    text-align: center;
    justify-content: center;
}
.col--right .hb56__part {
    text-align: right;
    justify-content: flex-end;
}
.hb56__part {
    background: rgba(0,0,0,.3);
    border: 2px dashed #535b82;
    min-height: 26px;
    padding: 10px;
    line-height: 0;
}
.hb56__topbar .hb56__part,
.hb56__bottom .hb56__part {
    padding: 4px 10px;
}
.hb56__elements {
    padding: 10px;
    min-height: 32px;
    background: rgba(0,0,0,.3);
    border-top: 1px solid #535b82;
    .hb56__element {
        opacity: .7; // when not in use
    }
}
.hb56__element {
    display: inline-flex;
    user-select: none;
    border-radius: 4px;
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 10px 0 0;
    color: #2271b1;
    border: 1px solid #1e425f;
    background: #4d789c;
    color: white;
    cursor: pointer;
    transition: all .1s ease-out;

    &:hover {
        // background: #f0f0f1;
        // border-color: #0a4b78;
        // color: #0a4b78;
    }

    i {
        display: block;
        line-height: 24px;
        height: 24px;
        width: 24px;
        background: #59758d;
        color: #fff;
        border-right: 1px solid #829fb6;
        transition: all .1s;
        &:hover {
            background-color: #3d4c59;
            color: white;
        }
    }
    span {
        padding: 0 8px;
        cursor: move;
    }
}
.hb56 .sortable-placeholder {
    background-color: rgba(0,0,0,.3);
    border: 1px dashed #0a4b78;
    display: inline-block;
    width: 40px;
    height: 24px;
    margin: 0 10px 0 0;
    border-radius: 4px;
}

/* SORTABLE
============================================================================== */
.sortable56 {
    padding-top: 20px;
    .sortable-placeholder {
        width: 100%;
        height: 28px;
        border-radius: 0;
        display: block;
        border: 1px dashed #95c3db;
        background: rgb(226, 237, 240);
    }
}
.sortable56__label {
    position: absolute;
    background: #999;
    color: white;
    z-index: 99;
    top: -18px;
    left: 0;
    line-height: 18px;
    padding: 0 8px;
    font-size: 14px;
    border-radius: 1px 1px 0 0;
}
.sortable56__table {
    padding: 8px;
    position: relative;
    background: white;
    border: 1px dashed #ccc;
    border-radius: 3px;
}
.sortable56__element {
    display: block;
    padding: 0 5px;
    height: 28px;
    line-height: 28px;
    cursor: move;
    text-align: center;
    margin: 0 auto;
    position: relative;

    background-color: #ddd;
    color: #111;
    transition: background-color .1s;

    &:hover {
        background: #ccc;
    }
    .x {
        display: block;
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        right: 5px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: rgba(0,0,0,.3);
        transition: all .15s ease-out;
        font-size: 24px;
        cursor: pointer;
        &:hover {
            color: red;
        }
    }
}
.sortable56__element--inline {
    display: inline-block;
    margin-right: 5px;
}
.sortable56__element + .sortable56__element {
    margin-top: 5px;
}
.sortable56__element + .sortable-placeholder,
.sortable-placeholder + .sortable56__element {
    margin-top: 5px;
}
.sortable56__elements {
    position: relative;
    margin: 30px 0 0;
    background: white;
    border: 1px dashed #ddd;
    padding: 8px;

    .sortable56__element {
        opacity: .5;
    }
}

/* OPTION HINTS
============================================================================== */
.ui-autocomplete {
    z-index: 999999;
    border: 1px solid #e0e0e0;
    box-shadow: 3px 5px 20px rgba(0,0,0,.3);
    
    li {
        border: 0;
        margin: 0;
    }
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    border-color: transparent;
    background: #f0f0f0;
    margin: 0;
    border: 0;
}

#customize-header-actions .goto {
    position: absolute;
    height: 45px;
    border: 0;
    border-radius: 0;
    outline: 0;
    z-index: 0;
    background: transparent;
    top: 0;
    left: 45px;
    right: 100px;
    width: calc(100% - 145px);
    box-shadow: none;
    
    transition: all .1s ease-out;
    
    color: black;
    border: 2px solid #08c;
    
    @include placeholder {
        color: #777;
        opacity: 1;
    }
    
    &:focus {
        left: 0;
        right: 1px;
        width: calc(100% - 1px);
        outline: 0;
        border: 0;
        box-shadow: 0 0 5px rgba(0,0,0,.1);
        background: white;
        z-index: 999;
        
        @include placeholder {
            color: #999;
            opacity: 1;
        }
    }
}

body {
    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
        background: #bad0e6;
    }
}