@import (reference) '../../../assets/less/_variables.less';
@import (reference) '../../../assets/less/utils/_mixins.less';

@import '../../../assets/lib/bootstrap/less/mixins.less';
@screen-sm-min: 768px;
.vc-controls {
    display: none;
    //font-size: 0 !important;
    &, * { font-size: 0 !important; }
}
html.js_active { margin-top: 0 !important; }
body.compose-mode {
// Controls
    .controls-row,
    .controls-column,
    .controls-container,
    .controls-element {
        height: 0;
        z-index: 1001;
        > div {
            position: absolute;
            white-space: nowrap;
            font-size: 0 !important; //remove bottom extra space from display: inline-block
            > .parent {
                display: inline-block;
            }
            > .element {
                margin-left: 1px;
                display: inline-block;
            }
        }
    }
//Controls positions
    .controls- {
        &tl {
        //top left
            top: 0;
            left: 0;
        }
        &tc {
        //top center
            top: 0;
            left: 50%;
            .translate(-50%, 0);
        }
        &tr {
        //top right
            top: 0;
            right: 0;
            direction: rtl;
        }

        &bl {
        //bottom left
            bottom: 0;
            left: 0;
            height: auto;
        }
        &bc {
        //bottom center
            bottom: 0;
            left: 50%;
            .translate(-50%, 0);
        }
        &br {
        //bottom right
            bottom: 0;
            right: 0;
            direction: rtl;
        }

        &cc {
        //vertical middle
            z-index: 1002;
            top: 50%;
            left: 50%;
            background-color: #84c137;
            border: 0px solid transparent;
            .translate(-50%, -50%);
            .border-top-radius(3px);
            .border-bottom-radius(3px);

            > :first-child {
                .vc-btn-content {
                    .border-left-radius(3px);
                }
            }
            > :last-child {
                .vc-btn-content {
                    .border-right-radius(3px);
                }
            }
        }

        &out-l {
        //out left
            left: 0px;
            top: 1px;
            direction: rtl;
        }
        &out-tl {
        //out left
            z-index: 1002;
            left: -1px;
            top: -30px;
            > .element {
                > :first-child {
                    .vc-btn-content {
                        .border-left-radius(3px);
                    }
                }
            }
        // right: 0;
        // direction: rtl;
        }
        &out-tr {
        //out left
            z-index: 1003;
            right: -1px;
            top: -30px;
        // right: 0;
        // direction: rtl;
        }
        &out-r {
        //out right
            right: -1px;
            top: 1px;
        }
        &out-l,
        &out-r {
            width: 0;
            height: 0;
        }
    }
// Single Control button
    .control-btn {
        display: inline-block;
        vertical-align: middle !important;
        .icon {
            display: inline-block !important;
            background-image: url('../vc/controls.png');
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
        }
        .vc-btn-content {
            .transition(background-color 0.5s);
            background-color: transparent;
            // background-color: #84c137;
            // border: 1px solid #84c137;
            &:hover {
                background-color: #669c22;
//                border: 1px solid #669c22;
            }
            display: inline-block !important;
            padding: 7px;
            cursor: pointer !important;
            line-height: 1px !important;
            font-size: 1px !important;
            vertical-align: middle !important;
        }
        &.vc-element-name {
            .vc-btn-content {
                background-image: url(../vc/move.png) !important;
                background-position: 10px center !important;
                background-repeat: no-repeat;
                text-decoration: none !important;
                width: auto !important;
                font-size: 9px !important;
                color: #FFFFFF !important;
                cursor: move !important;
                line-height: 16px !important;
                padding: 7px 7px 7px 29px !important;
                &:hover {
                    text-decoration: none !important;
                }
            }
        }
    }

// Control icons variations 
    .control-btn-prepend,
    .control-btn-append {
        .icon {
            background-position: 0 -16px;

        }
    // background-image: url(../tmp/add.png);
    }
    .control-btn-append {
        position: relative;
        top: 19px;
        &:before {
            position: relative;
            left: 7px;
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            
            border-bottom: 4px solid #f9b418;
            .transition(border-color 0.5s);
        }
        &:hover {
            &:before {
                border-bottom-color: #e78800;
            }
        }
        .vc-btn-content {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            padding: 3px;
        }
    }
    .control-btn-edit {
        .icon {
            background-position: 0 -32px;

        }
    // background-image: url(../tmp/edit.png);
    }
    .control-btn-clone {
        .icon {
            background-position: 0 -48px;

        }
    //    background-image: url(../tmp/clone.png);
    }
    .control-btn-delete {
        .icon {
            background-position: 0 -64px;
        }
    //    background-image: url(../tmp/remove.png);
    }
    .control-btn-switcher {
        overflow-x: hidden;
        width: 24px;
        .transition(width 0.5s);
        .icon {
            width: 10px;
            background-image: url(../vc/expand.gif);
            background-position: center center;
        }
        display: block;
    //    background-image: url(../tmp/remove.png);
    }

    .control-btn-move {
    // background-image: url(../tmp/move.png);
        background-position: 0 0;
    }
    .control-btn-layout {
    // background-image: url(../tmp/layout.png);
    }
// Row layout switcher
    .control-btn-layout {
        position: relative;
    }
    .controls-row,
    .controls-column,
    .controls-container {
        > div {
            .control-btn {
                .vc-btn-content {
                    background-color: #F9B418;
                    border-color: #F9B418;
                    &:hover {
                        background-color:  #e78800;
                        border-color:  #e78800;
                    }
                }
                &.vc-element-name, &.control-btn-switcher {
                    display: inline-block;
                }
            }
            .advanced {
                overflow: hidden;
                height: 30px;
                width: 0;
                display: inline-block;
                vertical-align: middle;
                .transition(width 0.5s);
            }
            > .element {
                :last-child {
                    .vc-btn-content {
                        .border-right-radius(3px);
                    }
                }
                .control-btn-switcher {
                    .vc-btn-content {
                        .border-right-radius(3px);
                    }
                }
            }
            > .parent {
                .control-btn {
                    .vc-btn-content {
                        background-color: #285A85;
                        border-color: #285A85;
                        &:hover {
                            background-color: #032644;
                            border-color: #032644;
                        }
                    }
                }
                > :first-child {
                    .vc-btn-content {
                        .border-left-radius(3px);
                    }
                }
            }
            > .active {
                .control-btn {
                    display: inline-block;
                }
                .control-btn-switcher {
                    width: 0;
                }
                &.parent-vc_row, &.parent-vc_row_inner {
                    .advanced {
                        width: 120px;
                    }
                }

                &.parent, &.element {
                    .advanced {
                        width: 120px;
                    }
                }
                &.element-vc_column, &.element-vc_column_inner {
                    .advanced {
                        width: 60px;
                    }
                }
                &.element-vc_tab {
                    &.vc-element-name {
                        .vc-btn-content {
                            background-image: none;
                            padding-right: 6px;
                        }
                    }
                }
            }
        }
    }
    .vc-element-container {
        > div.vc-container:first-of-type {
            margin-top: 31px;
        }
    }

    .vc-layout-switcher {
        background: #94B9C6;
        display: block;
        height: auto;
        width: 100px;
        padding: 2px;
        position: absolute;
        top: 30px;
        white-space: normal;
        direction: ltr;

        .vc-layout-btn {
            display: inline-block;
            background-position: center center;
            background-repeat: no-repeat;
            width: 30px;
            height: 23px;
            background-color: white;
        //margin-bottom: 2px;
            margin: 1px;
        }
        .vc-custom-layout-btn {
            background-color: transparent;
            display: block;
            width: auto;
            height: auto;
            margin: 4px 0 3px;
            font-size: 11px;
            text-align: center;
        }
        .l_1 {
            background-image: url(../tmp/row_layouts/1.gif);
        }
        .l_12_12 {
            background-image: url(../tmp/row_layouts/12_12.gif);
        }
        .l_23_13 {
            background-image: url(../tmp/row_layouts/23_13.gif);
        }
        .l_13_13_13 {
            background-image: url(../tmp/row_layouts/13_13_13.gif);
        }
        .l_13_23 {
            background-image: url(../tmp/row_layouts/13_23.gif);
        }
        .l_14_14_14_14 {
            background-image: url(../tmp/row_layouts/14_14_14_14.gif);
        }
        .l_14_34 {
            background-image: url(../tmp/row_layouts/14_34.gif);
        }
        .l_14_12_14 {
            background-image: url(../tmp/row_layouts/14_12_14.gif);
        }
        .l_56_16 {
            background-image: url(../tmp/row_layouts/56_16.gif);
        }
        .l_16_46_16 {
            background-image: url(../tmp/row_layouts/14_46_16.gif);
        }
        .l_16_16_16_12 {
            background-image: url(../tmp/row_layouts/16_16_16_12.gif);
        }
        .l_16_16_16_16_16_16 {
            background-image: url(../tmp/row_layouts/16_16_16_16_16_16.gif);
        }
    }

// Content Element
    .vc-content-element, .vc-element {
        .controls-element {
        // position: absolute;
        //width: 100%;
        //height: 100%;
        // left: 50%;
        // top: 50%;//15px; //should be 0 if height==100%
        // height: auto;
        // width: 0;
        //height: -webkit-calc(e("100% - 30px"));
        //height: calc(e("100% - 30px"));
        //background-color: rgba(0,0,0, 0.2);
        }
    }

// Control Animations
    .vc-element {
        .vc-controls {
            display: block;
            .opacity(0);
            visibility: hidden;
            .transition(opacity 0.5s ease-out);
            /*
            > :first-child {
                .transition(top 0.2s ease-out);
            }
            */
        }
    }
    .control-btn-layout {
        .vc-layout-switcher {
            .opacity(0);
            visibility: hidden;
            .transition(opacity 0.5s ease-out);
        }
        &:hover {
            .vc-layout-switcher {
                .opacity(1);
                visibility: visible;
            }
        }
    }
    .vc-element {
        display: block;
        position: relative;
        &.vc-empty {
            .vc-empty-element {
                min-height: 100px;
                cursor: pointer;
                position: relative;
                &:after {
                    content: '';
                    margin: 0; padding: 0;
                    position: absolute;
                    z-index: 0;
                    top: 50%; left: 0;
                    margin-top: -19px;
                    width: 100%; height: 38px;
                    background: transparent url(../vc/empty_row_sprite.png) no-repeat top center;
                }
                &:hover {
                    &:after {
                        background-position: bottom center;
                    }
                }
                > .vc-element-container {
                    min-height: 100px;
                }
            }
            > .vc-controls {
                .control-btn-append {
                    display: none;
                }
            }
        }
        &.vc-sorting-over {
            background-image: none;
        }
        &.bring-to-front {
            z-index: 100000;
        }
        &.vc-active, &.vc-hold-active  {
            > .vc-controls {
                visibility: visible;
                opacity: 0.7;
            }
        }
        &:hover, &.vc-hover, &.vc-hold-hover {
            > .vc-controls {
                visibility: visible;
                opacity: 1;
            }
            > .wpb_row {
                > .vc-element {
                        &:before {
                            content: '';
                            margin: 0; padding: 0;
                            position: absolute;
                            z-index: 0;
                            top: 0; left: 0;
                            width: 100%; height: 100%;
                            outline: 1px dashed #EBEBEB;
                            outline: 1px dashed rgba(125, 125, 125, 0.40);
                        }
                        &:after {
                            clear: both;
                        }
                }
            }
        }
    }
    .vc-element-container {
        min-height: 40px;
    }
    .vc-resize-bar {
        cursor: e-resize;
        width: 7px;
        right: -5px;
        top: 0;
        height: 100%;
        position: absolute;
        font-size: 0.1px;
        display: block;
        z-index: 1000;
    }
    .vc-vc_tabs, .vc-vc_accordion, .vc-vc_tour, .vc-vc_row_inner {
        margin-top: 0 !important;
    }
    .vc_span1, .vc_span2, .vc_span3, .vc_span4 {
        .controls- {
            &out-tr {
            //out left
                z-index: 1003;
                left: -1px;
                top: -30px;
            // right: 0;
            // direction: rtl;
            }
        }
        .vc-vc_tabs, {
            padding-top: 30px;
            .controls- {
                &out-tr {
                    top: -64px;
                }
            }
        }
        .vc-vc_tour, .vc-vc_accordion {
            padding-top: 30px;
        }
    }
    // Custom elements css
    .vc-vc_row_inner {
            padding-top: 32px;
    }
    .vc-vc_raw_js {
            .wpb_wrapper {
                height: 50px;
                background: transparent url(../vc/js_icon.png) center center no-repeat;
            }
    }
    .vc-vc_column, .vc-vc_column_inner {
        > .controls-column > div > .parent {
            .control-btn-prepend {
                .icon {
                    background-position: 0 -80px;
                }
            }
        }
    }
    .vc-vc_tab {
        > .vc-controls {
            div {
                .control-btn.vc-move-vc_tab .vc-btn-content {
                    background-image: none;
                    padding-left: 7px;
                    cursor: default;
                }
            }
            .control-btn-append {
                display: none;
            }
        }
    }

    .vc-vc_video {
        padding-top: 32px;
        .controls-element {
            .controls-cc {
                top: 16px;
            }
        }
    }
    .vc-vc_column_text {
        min-height: 32px;
    }
    .vc-social-placeholder {
        display: block;
    }
    .vc-vc_facebook {
        .fb_type_box_count {
            height: auto;
        }
        .vc-social-placeholder {
            height: 32px;
            background: transparent url(../vc/social/fb/standart.png) left center no-repeat;

            &.vc-socialtype-button_count {
                background-image: url(../vc/social/fb/button_count.png);
            }
            &.vc-socialtype-box_count {
                background-image: url(../vc/social/fb/box_count.png);
                height: 71px;
            }
        }
    }
    .vc-vc_tweetmeme {
        .vc-social-placeholder {
            height: 32px;
            background: transparent url(../vc/social/tw/horizontal.png) left center no-repeat;

            &.vc-socialtype-vertical {
                background-image: url(../vc/social/tw/vertical.png);
                height: 69px;
            }
            &.vc-socialtype-none {
                background-image: url(../vc/social/tw/none.png);
            }
        }
    }
    .vc-vc_pinterest {
        .vc-social-placeholder {
            height: 32px;
            background: transparent url(../vc/social/pinterest/horizontal.png) left center no-repeat;

            &.vc-socialtype-vertical {
                background-image: url(../vc/social/pinterest/vertical.png);
                height: 71px;
            }
            &.vc-socialtype-none {
                background-image: url(../vc/social/pinterest/none.png);
            }
        }
    }
    .vc-vc_googleplus {
        .vc-social-placeholder {
            height: 32px;
            background: transparent url(../vc/social/gp/standard_desc.png) left center no-repeat;
            &.vc-annotation-none {
                background-image: url(../vc/social/gp/standard.png);
            }
            &.vc-annotation-bubble {
                background-image: url(../vc/social/gp/standard_bubble.png);
            }
            &.vc-socialtype-small {
                background-image: url(../vc/social/gp/small_desc.png);
                &.vc-annotation-none {
                    background-image: url(../vc/social/gp/small.png);
                }
                &.vc-annotation-bubble {
                    background-image: url(../vc/social/gp/small_bubble.png);
                }
            }
            &.vc-socialtype-medium {
                background-image: url(../vc/social/gp/medium_desc.png);
                &.vc-annotation-none {
                    background-image: url(../vc/social/gp/medium.png);
                }
                &.vc-annotation-bubble {
                    background-image: url(../vc/social/gp/medium_bubble.png);
                }
            }
            &.vc-socialtype-tall {
                background-image: url(../vc/social/gp/tall_desc.png);
                &.vc-annotation-none {
                    background-image: url(../vc/social/gp/tall.png);
                }
                &.vc-annotation-bubble {
                    background-image: url(../vc/social/gp/tall_bubble.png);
                    height: 60px;
                }
            }
        }
    }
    .vc-vc_accordion_tab {
        .wpb_content_element {
            .wpb_accordion_wrapper {
                .wpb_accordion_content {
                    padding: 1em 1em 1.5em;
                }
            }
        }
        > .vc-controls {
            .control-btn-append {
                display: none;
            }
        }
    }
    .wpb_column  {
        > .wpb_wrapper {
            > div.vc-vc_toggle + div:not(.vc-vc_toggle) {
                margin-top: @vc_element_margin_bottom;
            }
        }
    }
    .vc-vc_widget_sidebar,
    .vc-templatera {
        min-height: 32px;
    }
    .vc-add-element-button {
        margin-right: 15px;
        background-image: url(../vc/add_element.png);
        background-position: 14px center;
        background-repeat: no-repeat;
        padding-left: 52px;
    }
    .vc-add-text-block-button {
        margin-left: 15px;
        background-image: url(../vc/add_text_block.gif);
        background-position: 20px center;
        background-repeat: no-repeat;
        padding-left: 52px;
    }
    .vc-add-element-not-empty-button {
        width: 39px;
        height: 38px;
        background-image: url(../vc/empty_row_sprite.png);
        background-position: top center;
        background-repeat: no-repeat;
        cursor: pointer;
        &:hover {
            background-position: bottom center;

        }
        /*
        padding: 15px 18px;
        background-image: url(../vc/add_element.png);
        background-position: center center;
        background-repeat: no-repeat;
        display: none;
        */
    }
    .vc-no-content-helper {
        display: block;
        text-align: center;
        .icon {
            display: inline-block;
            background: transparent url(../vc/visual_composer_32.png) center center no-repeat;
            width: 32px;
            height: 32px;
        }
        h5 {
            margin: 0;
            padding: 0;
            font-weight: normal;
            font-size: 22px;
            line-height: 33px;
        }
        h3 {
            margin: 0;
            padding: 0;
            font-size: 24px;
            line-height: 26px;
        }
        .vc-buttons {
            margin-top: 20px;
            padding: 20px;
            border: 1px dashed #EBEBEB;
            border: 1px dashed rgba(125, 125, 125, 0.40);

        }
        &.vc-not-empty {
            h5, h3, .icon {
                display: none;
            }
            .vc-buttons {
                padding: 12px 10px 5px 10px;
                border: 1px dashed #EBEBEB;
                border: 1px dashed rgba(125, 125, 125, 0.40);
                .vc-add-text-block-button, .vc-add-element-button {
                    display: none;
                }
                .vc-add-element-not-empty-button {
                    display: inline-block;
                }

            }
        }
    }

    @media screen and (max-width: @screen-sm-min) {
        .vc-add-element-button {
            display: block;
            margin-right: 0;
            margin-bottom: 16px;
        }
        .vc-add-text-block-button {
            display: block;
            margin-left: 0;
        }
    }
    &.vc-column-dragging {
        * {
            cursor: e-resize !important;
        }
        .vc-controls {
            display: none;
        }
    }
}

.vc-helper {
    width: auto !important;
    height: 32px !important;
    z-index: 1006;
    position: absolute;
    padding: 4px 15px 4px 30px;
    border: 1px solid #AFD23E;
    background-color: #AFD23E;
    .border-top-radius(3px);
    .border-bottom-radius(3px);
    vertical-align: middle;
    color: #FFFFFF;
    font-size: 9px;
    //.opacity(0.9);
    .vc-element-icon {
        display: inline-block;
        margin: 0 8px 0 0;
        width: 32px;
        height: 32px;
        background-image: url(../../../assets/vc/elements_icons/sprite.png);
        background-position: 0 0;
        background-repeat: no-repeat;
        vertical-align: middle;
    }
    @import '../../../assets/less/lib/elements_icons.less';
    &.vc-helper-vc_row {
        border: 1px solid #285A85;
        background-color: #285A85;
    }
    &.vc-helper-vc_column {
        border: 1px solid #F9B418;
        background-color: #F9B418;
    }
}

.vc-placeholder {
    // height: 30px;
    background: transparent url(../vc/pattern.gif);
    &-row {
        padding: 0;
        margin: 0 0 35px 0;
        background: transparent url(../vc/pattern.gif);
        height: 50px;
    }
    &-column {
        background: transparent url(../vc/pattern.gif);
        float: left;
    }
}

// Sorting
.vc-sorting {
    .wpb_row {
        > .vc-element {
            &:before {
                content: '';
                margin: 0; padding: 0;
                position: absolute;
                z-index: 0;
                top: 0; left: 0;
                width: 100%; height: 100%;
                outline: 1px dashed #EBEBEB;
                outline: 1px dashed rgba(125, 125, 125, 0.40);
            }
            &:after {
                clear: both;
            }
        }
    }
    .vc-controls {
        visibility: hidden !important;
        opacity: 0;
    }

}
.vc-no-content-helper {
    display: none;
}
.vc-catcher {
    background-color: #E8ECB8
}
.hidden-placeholder {
    display: none !important;
}

.vc-element {
    .vc-vc_tab {
        .vc_clearfix();
    }
}
.wpb_content_element .wpb_tabs_nav {
    z-index: 1001;
    position: relative;
}