/* Managing composer toggler btn */
.composer-grid-btn{
    background: url('../images/grid-off.png') center center no-repeat !important;
        font-size: 0 !important;
    padding: 4px 20px !important;
}
.composer-grid-btn.composer-grid-active{
    background-image: url("../images/grid-on.png") !important;
    background-color: #f1f1f1 !important;
}



/* Managing composer cms_plugins items */
.show-composer-grid .composer-plugin,
.show-composer-grid p.cms-plugin{
    cursor: context-menu;
    border: 1px solid rgba(100, 100, 100, 1);
    border-radius: 4px;
    /*background-color: rgba(238, 238, 238, 0.5);*/
    padding: 22px;
    position: relative;
}
.show-composer-grid .composer-plugin:hover,
.show-composer-grid p.cms-plugin:hover{
    /*background-color: rgba(130, 209, 253, 0.6);*/
}
.show-composer-grid .composer-plugin:hover:before,
.show-composer-grid p.cms-plugin:hover:before{
    background-color: #03bbff;
}
.show-composer-grid .composer-plugin:before,
.show-composer-grid p.cms-plugin:before{
    content: 'plugin';
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 20px;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    line-height: 12px;
    text-transform: capitalize;
}


/* Managing composer plugins labels */
.show-composer-grid .grid-container.composer-plugin:before{
    content: 'container';
}
.show-composer-grid .grid-x.composer-plugin:before{
    content: 'row';
}
.show-composer-grid .cell.composer-plugin:before{
    content: 'cell';
}
.show-composer-grid .banner.composer-plugin:before{
    content: 'banner';
}
.show-composer-grid .btn.composer-plugin:before{
    content: 'btn';
}
.show-composer-grid .card-w.composer-plugin:before{
    content: 'card';
}
.show-composer-grid .custom-code.composer-plugin:before{
    content: '<code>';
}
.show-composer-grid .content-w.composer-plugin:before{
    content: 'content';
}
.show-composer-grid .heading.composer-plugin:before{
    content: 'heading';
}
/* Image plugin (img tag) do not support pseudo elements, therefore padding is removed */
.show-composer-grid img.composer-plugin{
    padding: 4px;
}
/* Cms Text plugin should be treated individually */
.show-composer-grid p.cms-plugin:before{
    content: 'paragraph';
}

.show-composer-grid .separator.composer-plugin:before{
    content: 'separator';
}
.show-composer-grid .video-box.composer-plugin:before{
    content: 'video';
}
.show-composer-grid .video-gallery.composer-plugin:before{
    content: 'video-gallery';
}
.show-composer-grid .swiper-wrapper.composer-plugin:before{
    content: 'slider';
}
.show-composer-grid .swiper-slide.composer-plugin:before{
    content: 'slide';
}