* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*Toggle*/
#pi_accordion{
    padding: 20px;
}

#pi_accordion h3.hndle{
    font-weight: normal !important;
    padding: 9px 1.1% !important;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    margin-top: 32px;
}
#pi_accordion h3.hndle:after{
    content: "\f343";
    font-size: 13px;
    font-family: "dashicons";
    line-height: 20px;
    position: absolute;
    right: 30px;
}

#pi_accordion h3.hndle.closed:after{
    content:  "\f347";
}

.pi_setting{
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}


/*========= Animation library Styles =========*/
@-webkit-keyframes md-popup {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-moz-keyframes md-popup {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-ms-keyframes md-popup {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        
    }
}
@-o-keyframes md-popup {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes md-popup {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

.md-popup, 
.md-box-grid {
    -webkit-animation: .5s cubic-bezier(0.680, -0.550, 0.265, 2) 0s  1 md-popup;
    -moz-animation: .5s cubic-bezier(0.680, -0.550, 0.265, 2) 0s  1 md-popup;
    -o-animation: .5s cubic-bezier(0.680, -0.550, 0.265, 2) 0s 1 md-popup;
    animation: .5s cubic-bezier(0.680, -0.550, 0.265, 2) 0s 1 md-popup;
}
a,
.grid-size,
.md-box-header > [class^="toogle-"],
.md-box-header > [class*="toogle-"],
.md-popup .md-row-item,
.md-popup-close  {
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s;
    -ms-transition: all .2s ease 0s;
    -o-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
}

/* Style popup setting
----------------------------------------------------------------- */

/*=========  General Styles  =========*/
/*body {
    font-family: "Open Sans",sans-serif;
    font-size: 13px;
}*/

/*========= Layout Styles =========*/
#pi_lighbox_form.md-popup {
    background: none repeat scroll 0 0 #FFFFFF;
    bottom: 30px;
    left: 15%;
    min-height: 210px;
    overflow: auto;
    position: fixed;
    right: 15%;
    top: 30px;
    z-index: 1400;

}
.md-popup-inner-header {
    border-bottom: 1px solid #DFDFDF;
    height: 50px;
    position: relative;
}
.md-popup-inner-content {
    position: absolute;
    top: 51px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
    left: 0;
    right: 0;
}
.md-popup-inner-footer {
    background: #FCFCFC;
    border-top: 1px solid #dfdfdf;
    bottom: 0;
    height: 50px;
    width: 100%;
    position: absolute;
}
.md-popup-backdrop.js_backdrop 
{
    background: #000;
    bottom: 0;
    left: 0;
    min-height: 400px;
    opacity: 0.7;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1200;
}

/* Dimension popup screen */
.md-popup.popup-big {
    bottom: 2%;
    left: 2%;
    right: 2%;
}
.md-popup.popup-medium {
    bottom: 20%;
    left: 20%;
    right: 20%;
    top: 20%;
}
.md-popup.popup-small {
    bottom: auto;
    left: 30%;
    right: 30%;
    top: 35%;
}

/*========= Header Styles =========*/
.md-popup-title {
    color: #555;
    font-size: 22px;
    font-weight: 200;
    left: 14px;
    line-height: 53px;
    position: absolute;
    top: 0;
    margin: 0 !important;
}
.md-popup-close {
    background: url("images/icon-close.png") no-repeat left top;
    height: 25px;
    overflow: hidden;
    position: absolute;
    right: 14px;
    text-indent: 300%;
    top: 14px;
    width: 25px;

}
.md-popup-close:hover {
    background-position: 0 -25px;
}
/*========= Content Styles =========*/
.md-popup .md-row-item {
    background: #FFF;
    border-bottom: 1px dashed #E1E1E1;
    padding: 20px;
}
.md-popup .md-row-item:hover {
    background-color: #FCFCFC;
}
/*========= Footer Styles =========*/
.md-popup-inner-footer .button-large {
    padding: 0 40px 2px;
    position: absolute;
    right: 12px;
    top: 10px;
}

.md-popup .md-row-item,
.md-popup .row-inner {
    display: table;
    width: 100%;
}
.md-popup .row-inner {
    padding: 10px 0px;  
}
.md-popup .md-row-item .md-name , 
.md-popup .md-row-item .md-setting  {
        display: table-cell;
        vertical-align: middle;
        min-height: 50px;
    }
.md-name{
    width: 45%;
}
.md-name p {
    color: #939292;
    display: block;
    font-size: 14px;
    font-style: italic;
    line-height: 21px;
}
.md-setting {
    width: 55%;
}
.md-popup .md-row-item .md-setting  input[type="text"],
.md-popup .md-row-item .md-setting  textarea {
    background-color: #fff;
    border: 1px solid #9ca0a3;
    box-shadow: none;
    color: #333;
    font: 12px/20px Arial,Helvetica,sans-serif;
    padding: 6px 15px;
    width: 100%;
    border-radius: 0 !important;
    margin-bottom: 10px;
}
.md-popup .wp-picker-container input[type="text"] {
    margin-bottom: 0 !important;
    height: 27px;
    margin-left: 20px;
    width: 100px !important;
}

.md-popup .md-row-item .md-setting .md-medium{
    width: 45% !important
}



.md-popup .md-row-item  .md-name p > code {
    color: #f00;
    background: transparent;
}
/*========= Box grid Styles =========*/
.md-box-grid {
    float: left;
    margin: 1%;
    position: relative;
    width: 200px;
}
.md-box-header {
    height: 25px;
    opacity: 1;
    position: relative;
    width: auto;
    z-index: 10;
    background: none repeat scroll 0 0 #FAFAFA;
    color: #222222;
    border: 1px solid #E5E5E5;
}
.md-box-shortcode {
    background: none repeat scroll 0 0 #F8F8F8;
    border: 1px dashed #E1E1E1;
    min-height: 35px;
    padding: 20px 10px;
    position: relative;
    top: -5px;
}
.md-box-header > [class^="toogle-"],
.md-box-header > [class*="toogle-"] {
    display: block;
    float: left;
    height: 24px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    width: 24px;
    color: #666;
    font-size: 20px;
    margin-right: 10px


}
.md-box-grid:hover  [class^="toogle-"],
.md-box-grid:hover  [class*="toogle-"]{
    opacity: 1;
}
.grid-size {
    color: #999999;
    float: left;
    height: 24px;
    left: -30px;
    line-height: 28px;
    position: relative;
    text-align: center;
    width: 24px;

}



.js_center{
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 60px;
}

.child-item{
    width: 100%;
}

/* ===============================================================
                        Global Style
================================================================== */
* html .clearfix,
* html .ui-helper-clearfix {
    height: 1%; /* IE5-6 */
}

.clearfix,
.ui-helper-clearfix {
    display: inline-block; /* IE7xhtml*/
}

html .clearfix,
html .ui-helper-clearfix {
    display: block; /* O */
}

.clearfix:after,
.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    line-height: 0;
    font-size: 1px;
    overflow: hidden;
}
.clear {clear: both;}

/*Color Picker*/
.picolor > input,
.picolor > textarea {
    display: block;
}
.picolor > .wp-picker-container {
    /*margin-top: 20px;*/
}
.wp-picker-input-wrap > input {float: left; margin-right: 10px;}
.wp-picker-input-wrap > .colorpicker  {
    width: 80px !important;
    height: 25px;
}
.color-picker {
    width: 45px;
    height: 45px;
    background:#27A9E3;
    display: inline-block;
    float: left;
}


.picolor .wp-color-result, 
.picolor .wp-color-result:after {
    border: 0;
    height: 27px;
    line-height: 27px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none ;
    background: #EBEBEB;
}
.picolor .wp-color-result:hover:after,
.picolor .wp-color-result:focus:after {
    border: 0;
}
.picolor .wp-picker-clear {
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: #EBEBEB;
    display: none;

}

.md-popup .wp-color-result {
    margin: 0;
}

/*Select*/
.container-select {
position: relative;
display: block;
vertical-align: middle;
}

.container-select select {
padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */             
border: 0;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;    
}

.container-select::before,
.container-select::after {
content: "";
position: absolute;
pointer-events: none;
}

.container-select::after { /*  Custom dropdown arrow */
content: "\25BC";
height: 1em;
font-size: .625em;
line-height: 1;
right: 1.2em;
top: 50%; margin-top: -.5em;
}

.container-select::before { /*  Custom dropdown arrow cover */
width: 2em;
right: 0; top: 0; bottom: 0;
border-radius: 0 3px 3px 0;
background: #FFF !important;
border: 1px solid #9ca0a3
}

.container-select select[disabled] {
color: rgba(0,0,0,.3);
}

.container-select.disabled::after {
color: rgba(0,0,0,.1);
}

/* White dropdown style */
.container-select.white::before {
    top: .5em; bottom: .5em;
    background-color: #fff;
    /*border-left: 1px solid rgba(0,0,0,.1);*/
    border: 1px solid 
}

.container-select.white::after {
color: rgba(0,0,0,.9);
}                   

/* Emerald dropdown style */
.container-select::before {
background-color: #1aa181;
}

.container-select::after {
color: rgba(0,0,0,.4);
}


/* Red dropdown style */
.container-select.red::before {
background-color: #d53a22;
}

.container-select.red::after {
color: rgba(0,0,0,.4);
}

/* FF only temporary & ugly fixes */
/* the "appearance: none" applied on select still shows a dropdown arrow on Firefox */
/* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
@-moz-document url-prefix() {
.container-select select                    { padding-right: .9em }
.container-select select { padding-right: 1.3em }
.container-select select { padding-right: .5em }
}   

}


.container-select {
    display: inline-block
}        

.element-select{
    width: 100% !important;
    height: 34px !important;
    border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color #d9d9d9 !important;
    border-left: 1px solid #d9d9d9 !important;
    border-top: 1px solid #d9d9d9 !important;
    border-bottom: 1px solid #d9d9d9 !important;
    border-style: none none none solid !important;
    border-width: medium medium medium 1px !important;
    border: 1px solid #ddd;
    box-shadow: none !important;
    background:  url("../images/select_bg4.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    font-size: 15px !important;
    outline-style: none !important
}
.container-select{
    /*width: 57% !important*/
}

#pi_lighbox_form.md-popup.pi-on-frontend
{
    position: absolute;
    right: 40px;
    width: 500px;
    top: 100px;
}
#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-header
{
    cursor: pointer;
    background-color: #ef5443;
}

#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-header h3
{
    color: #fff;
}

#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-header a
{
    color: #fff;
}

#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-content.js_insert_content 
{
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}      

#pi_lighbox_form.md-popup.pi-on-frontend
{
    max-height: 510px;
    /*left: 48%;*/
    top: 0px;
}

#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-content.js_insert_content
{
    /*width: 99%;*/
}



/*#pi_lighbox_form.md-popup.pi-on-frontend .md-row-item, #pi_lighbox_form.md-popup.pi-on-frontend  .row-inner
{
    width: 449px;
}*/

#pi_lighbox_form.md-popup.pi-on-frontend .hndle
{
    margin-bottom: 0px !important;
}

#pi_lighbox_form.md-popup.pi-on-frontend .md-name{
    width: 44%;
}

#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-footer .button-large
{
    color: #fff;
    display: inline-block;
    float: right;
    font-size: 14px;
    margin-left: 5px;
    position: relative;
    padding: 5px 30px !important;
    background-color: transparent;
    border: 0;
}
#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-footer .md-popup-save {
    border: 1px solid #FFF;
}
#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-footer .button-large:after,
#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-footer .button-large:before {
    display: none;
}
#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-footer .button-large:hover {
    text-decoration: none;
}
#pi_lighbox_form.md-popup.pi-on-frontend .md-popup-inner-footer .md-popup-preview:hover {
    text-decoration: underline;
}
#pi_lighbox_form.pi-on-frontend .md-popup-title {
    font-size: 16px;
    line-height: 1.2;
    padding: 15px 0;
    text-transform: none;
}
.pi-editing {
    border: 0;
}
#pi_lighbox_form .pi-editing  span {
    color: #FFF;
}