.clear { clear: both; }
.leo-heading { border: none; font-size: 1.2em; text-transform: uppercase; }
.leo-heading .btn{margin-top:-4px !important}
.leo-content a:hover, .leo-content a:focus { text-decoration: none; cursor: pointer; }
.leo-content a { color: #666; }
/*static position*/
.leo-static-group { position: relative; border: 1px dashed #ddd; cursor: pointer }
.static-container { padding: 0 15px; }
    .static-title h4,.static-title span{display: inline-block}
.static-content { border-top: 1px dashed #ddd; }

.group-panel { margin-bottom: 10px; }
/*dynamic position*/
.leo-dm-group { margin-top: 30px; margin-bottom: 30px; }


.dmgroup-container { }
    .group-top h4,.group-top span{display: inline-block}
    .group-list{padding: 0 15px;}
.group-top { padding: 0 5px; }
.group-footer { border-top: 1px solid #faebcc; margin: 5px; padding: 5px; }
.group-row { background: #f5f5f5; padding: 15px; }
.leo-dm-group .group-row { cursor: move; margin-bottom: 15px; }
.column-row { padding-bottom: 10px !important; }
.group-config { border-bottom: 1px dashed #00AFF0; margin-bottom: 10px !important; padding: 10px 0; }
.leo-group-btn { text-decoration: none !important; margin: 0 0 0 5px; }
.dmgroup-container .group-list {}

/*group panel*/
.leo-tool { background: #fff; padding: 5px 8px; float: left; }
.status-enable { cursor: pointer; background: url(images/enable.png) no-repeat 0 0; padding-left: 20px; color: #666666; }
.status-disable { cursor: pointer; background: url(images/disable.png) no-repeat 0 0; padding-left: 20px; }
.status-edit { background: url(images/edit.png) no-repeat 0 0; padding-left: 20px; }
.status-delete { background: url(images/delete.png) no-repeat 0 0; padding-left: 20px; }
       
.btn-add-group{background: url(images/add-group.png) no-repeat 9px center #f5f5f5!important;
    padding: 6px 6px 6px 35px!important;
    border: 1px solid #ddd !important;
    color: #666!important;
    margin-bottom: 5px !important;
}
.btn-add-col{background-image: url(images/add-column.png) !important;}
.bootstrap .btn-add-group:hover .caret{border-top-color: #666!important;}
.list-group li > a{
    padding-left: 50px!important;
    background: url(images/group.png) no-repeat 5px 4px;
    height: 31px;
        }
.list-group li:nth-child(2) > a{
    background-position: 5px -29px;
            }
.list-group li:nth-child(3) > a{
    background-position: 5px -62px;
            }
.list-group li:nth-child(4) > a{
    background-position: 5px -95px;
            }
.list-group li:nth-child(5) > a{
    background-position: 5px -128px;
}   
.list-group li:nth-child(6) > a{
    background-position: 5px -161px;
    }
.list-group li:nth-child(7) > a{
    background-position: 5px -194px;
    }
/*column list*/
    .column-list{min-height:48px!important;cursor: move}
.leo-column { padding: 10px; margin: 0; background-color: #ffffff; color: #555555; width: 100%; position: relative; border: 1px dotted #ccc; }
    /*colum action*/
    .leo-column-status { cursor: pointer }
    .leo-column-status:hover { text-decoration: none !important }
    .leo-column-action { padding: 0 !important; position: relative; margin: 8px 0 !important; }
    /*colum top*/
    .leo-action-top { margin-right: 3px; position: relative; 
    background: #f5f5f5;
    width: 115px;}
    .leo-action-top > .leo-width{margin: 5px 0 5px 5px;}
    /*colum row*/
    .leo-column-row{min-height: 50px;}
    .leo-column_title { margin: 10px auto 0; display: inline-block; width: 100%; padding: 5px 10px; background: #f5f5f5; border: 1px dotted #ccc; }
    .leo-column_title .leo-delete-row,
    .leo-column_title .leo-edit-row{
        float: right;
        display: none;
    }
    .leo-column_title:hover { background: #fbf8e3; }
    .leo-column_title:hover .leo-delete-row,
    .leo-column_title:hover .leo-edit-row{display: block;}
    .leo-column_btn { display: block; text-align: center; margin: 10px 0 0; }
    .btn-add-widget { padding: 5px 10px 5px 30px; background: url(images/add-widget.png) no-repeat 10px center #f5f5f5; display: inline-block; }
.width-val { display: inline; }
.action-sign{float: right;}
.width-action{display: block;background: url(images/sign.png) no-repeat 0 0;width: 16px;height: 16px;}
.minus-sign{background-position: 0 bottom;margin-top: 1px;}
.leo-column strong { line-height: 60px; }
    .required{color: red}
    #openorclose{display: none;}
#group_form { width: 300px; }
    #group_form .leo-heading{min-height: 30px}
    #group_form .form-group{margin-bottom: 10px }
    #group_form label.control-label{width: 50%;display: inline-block}
    #group_form .panel-footer{border-top:1px solid #DDDDDD;padding: 10px 15px}

/*popup*/
#group_form .btn, #column_form .btn { color: #555555; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 4px 8px; font-size: 12px; line-height: 1.42857; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; box-shadow: 0 -2px 0 #E6E6E6 inset; background-color: #FFFFFF; border-color: #CCCCCC }
.bootbox .modal-header .close{float: right!important}
.bootbox .modal-title{font-size: 18px}
.columnform-container .btn {margin-left: 10px}
.columnform-container .leo-heading{margin: 0 0 10px !important}
.leo-form{padding: 20px 10px;}
.leo-form .row{padding-top: 15px !important}
#displayLeftColumn_container .leo-static-group, #displayRightColumn_container .leo-static-group, #productTabContent_container .leo-static-group{display:none;}
.leo-guide span{width: 100%;display: block}
.leo-guide .other-module, .leo-guide .column-widget { background-color: whitesmoke; padding: 5px; border-radius: 3px; }
.title{padding-left: 10px;}
.form{margin-bottom: 10px}
.leo-guide .column-widget { background-color: #fcf8e3 }
.group-wrap{padding: 5px;border-radius: 3px;border:1px dashed #00AFF0}
.leo-explain { margin: 0 0 20px; padding: 20px; border-left: 3px solid #7cc67c; background-color: whitesmoke; border-color: #f0ad4e; }
.leo-explain b { font-size: 18px }
.leo-alert { margin-bottom: 0 !important; border-radius: 0 !important }
.panel { margin: 0 auto }
.leo-cog { background: none; border: none; }
.leo-action-top .leo-cog { padding: 5px 0; margin: 0 }
.leo-cog:hover, .leo-cog:active { background: none; border: none; box-shadow: none }
.leo-edit-column, .leo-edit-widget, .leo-delete-column { border-radius: 0 !important }
.leo-form p { font-size: 10px; color: #999 }
.leo-disable { color: #999; }
.unset-widget {}
.bootstrap .col-lg-2-4, .bootstrap .col-md-2-4, .bootstrap .col-sm-2-4, .bootstrap .col-xs-2-4, .bootstrap .col-sp-2-4, .bootstrap .col-lg-4-8, .bootstrap .col-md-4-8, .bootstrap .col-sm-4-8, .bootstrap .col-xs-4-8, .bootstrap .col-sp-4-8, .bootstrap .col-lg-7-2, .bootstrap .col-md-7-2, .bootstrap .col-sm-7-2, .bootstrap .col-xs-7-2, .bootstrap .col-sp-7-2, .bootstrap .col-lg-9-6, .bootstrap .col-md-9-6, .bootstrap .col-sm-9-6, .bootstrap .col-xs-9-6, .bootstrap .col-sp-9-6 { float: left; min-height: 1px; padding-left: 5px; padding-right: 5px; position: relative; }
.column-form .btn.leobtn-width:hover { background-color: white; -webkit-box-shadow: #e6e6e6 0 -2px 0 inset; box-shadow: #e6e6e6 0 -2px 0 inset; color: #555555 }
.column-form .btn.leobtn-width:hover .caret { border-top-color: #555555 !important }

.leo-change-width{
    min-width: 190px;height: 33px !important;
}
.width-val,
.leo-width-val { float: left;height: 23px;background: url(images/colsize.png) no-repeat; background-position: 5px 0;padding-left: 46px;}
.leo-add-column, .leo-w-option, .leo-change-width { height: 33px }
/*.leo-width { width: 50px; float: left; height: 23px; background: url(images/colsize.png) no-repeat; background-position: 0 0;}*/
ul.leo-col-class li { display: inline-block; padding: 5px 10px }
.leo-w-1 { background-position:5px -336px }
.leo-w-2 { background-position: 5px -308px }
.leo-w-2-4 { background-position: 5px -280px }
.leo-w-3 { background-position:5px -252px}
.leo-w-4 { background-position:5px -224px }
.leo-w-4-8 { background-position: 5px -196px }
.leo-w-6 { background-position:5px -168px }
.leo-w-7-2 { background-position: 5px -140px }
.leo-w-8 { background-position: 5px -112px }
.leo-w-9 { background-position: 5px -84px }
.leo-w-9-6 { background-position: 5px -56px;}
.leo-w-10 { background-position: 5px -28px;}
@media (min-width:1120px) {
    .bootstrap .col-lg-2-4 { width: 20%; }
    .bootstrap .col-lg-4-8 { width: 40%; }
    .bootstrap .col-lg-7-2 { width: 60%; }
    .bootstrap .col-lg-9-6 { width: 80%; }

}
@media (min-width: 992px) and (max-width: 1200px) {

    .bootstrap .col-md-2-4 {width:20%;}
    .bootstrap .col-md-4-8 { width: 40%; }
    .bootstrap .col-md-7-2 { width: 60%; }
    .bootstrap .col-md-9-6 { width: 80%; }
}

@media (max-width: 992px) and (min-width: 768px) {

    .bootstrap .col-sm-4-8 { width: 40%; }
    .bootstrap .col-sm-7-2 { width: 60%; }
    .bootstrap .col-sm-9-6 { width: 80%; }

}

@media (max-width: 768px) and (min-width: 481px) { 

    .bootstrap .col-xs-4-8 { width: 40%; }
    .bootstrap .col-xs-7-2 { width: 60%; }
    .bootstrap .col-xs-9-6 { width: 80%; }

}

@media (max-width: 480px) {

    .bootstrap .col-sp-1 { width: 8.33333%; }
    .bootstrap .col-sp-2 { width: 16.66667%; }
    .bootstrap .col-sp-2-4 { width: 20%; }
    .bootstrap .col-sp-3 { width: 25%; }
    .bootstrap .col-sp-4 { width: 33.33333%; }
    .bootstrap .col-sp-4-8 { width: 40%; }
    .bootstrap .col-sp-5 { width: 41.66667%; }
    .bootstrap .col-sp-6 { width: 50%; }
    .bootstrap .col-sp-7 { width: 58.33333%; }
    .bootstrap .col-sp-7-2 { width: 60%; }
    .bootstrap .col-sp-8 { width: 66.66667%; }
    .bootstrap .col-sp-9 { width: 75%; }
    .bootstrap .col-sp-9-6 { width: 80%; }
    .bootstrap .col-sp-10 { width: 83.33333%; }
    .bootstrap .col-sp-11 { width: 91.66667%; }
    .bootstrap .col-sp-12 { width: 100%; }

}


.col-lg .col-lg-1 { width: 8.33333%; }
.col-lg .col-lg-2 { width: 16.66667%; }
.col-lg .col-lg-2-4 { width: 20%; }
.col-lg .col-lg-3 { width: 25%; }
.col-lg .col-lg-4 { width: 33.33333%; }
.col-lg .col-lg-4-8 { width: 40%; }
.col-lg .col-lg-5 { width: 41.66667%; }
.col-lg .col-lg-6 { width: 50%; }
.col-lg .col-lg-7 { width: 58.33333%; }
.col-lg .col-lg-7-2 { width: 60%; }
.col-lg .col-lg-8 { width: 66.66667%; }
.col-lg .col-lg-9 { width: 75%; }
.col-lg .col-lg-9-6 { width: 80%; }
.col-lg .col-lg-10 { width: 83.33333%; }
.col-lg .col-lg-11 { width: 91.66667%; }
.col-lg .col-lg-12 { width: 100%; }

.col-md .col-md-1 { width: 8.33333%; }
.col-md .col-md-2 { width: 16.66667%; }
.col-md .col-md-2-4 { width: 20%; }
.col-md .col-md-3 { width: 25%; }
.col-md .col-md-4 { width: 33.33333%; }
.col-md .col-md-4-8 { width: 40%; }
.col-md .col-md-5 { width: 41.66667%; }
.col-md .col-md-6 { width: 50%; }
.col-md .col-md-7 { width: 58.33333%; }
.col-md .col-md-7-2 { width: 60%; }
.col-md .col-md-8 { width: 66.66667%; }
.col-md .col-md-9 { width: 75%; }
.col-md .col-md-9-6 { width: 80%; }
.col-md .col-md-10 { width: 83.33333%; }
.col-md .col-md-11 { width: 91.66667%; }
.col-md .col-md-12 { width: 100%; }

.col-sm .col-sm-1 { width: 8.33333%; }
.col-sm .col-sm-2 { width: 16.66667%; }
.col-sm .col-sm-2-4 { width: 20%; }
.col-sm .col-sm-3 { width: 25%; }
.col-sm .col-sm-4 { width: 33.33333%; }
.col-sm .col-sm-4-8 { width: 40%; }
.col-sm .col-sm-5 { width: 41.66667%; }
.col-sm .col-sm-6 { width: 50%; }
.col-sm .col-sm-7 { width: 58.33333%; }
.col-sm .col-sm-7-2 { width: 60%; }
.col-sm .col-sm-8 { width: 66.66667%; }
.col-sm .col-sm-9 { width: 75%; }
.col-sm .col-sm-9-6 { width: 80%; }
.col-sm .col-sm-10 { width: 83.33333%; }
.col-sm .col-sm-11 { width: 91.66667%; }
.col-sm .col-sm-12 { width: 100%; }

.col-xs .col-xs-1 { width: 8.33333%; }
.col-xs .col-xs-2 { width: 16.66667%; }
.col-xs .col-xs-2-4 { width: 20%; }
.col-xs .col-xs-3 { width: 25%; }
.col-xs .col-xs-4 { width: 33.33333%; }
.col-xs .col-xs-4-8 { width: 40%; }
.col-xs .col-xs-5 { width: 41.66667%; }
.col-xs .col-xs-6 { width: 50%; }
.col-xs .col-xs-7 { width: 58.33333%; }
.col-xs .col-xs-7-2 { width: 60%; }
.col-xs .col-xs-8 { width: 66.66667%; }
.col-xs .col-xs-9 { width: 75%; }
.col-xs .col-xs-9-6 { width: 80%; }
.col-xs .col-xs-10 { width: 83.33333%; }
.col-xs .col-xs-11 { width: 91.66667%; }
.col-xs .col-xs-12 { width: 100%; }

.col-sp .col-sp-1 { width: 8.33333%; }
.col-sp .col-sp-2 { width: 16.66667%; }
.col-sp .col-sp-2-4 { width: 20%; }
.col-sp .col-sp-3 { width: 25%; }
.col-sp .col-sp-4 { width: 33.33333%; }
.col-sp .col-sp-4-8 { width: 40%; }
.col-sp .col-sp-5 { width: 41.66667%; }
.col-sp .col-sp-6 { width: 50%; }
.col-sp .col-sp-7 { width: 58.33333%; }
.col-sp .col-sp-7-2 { width: 60%; }
.col-sp .col-sp-8 { width: 66.66667%; }
.col-sp .col-sp-9 { width: 75%; }
.col-sp .col-sp-9-6 { width: 80%; }
.col-sp .col-sp-10 { width: 83.33333%; }
.col-sp .col-sp-11 { width: 91.66667%; }
.col-sp .col-sp-12 { width: 100%; }

.col-xs-1 .leo-action-top,
.col-sm-1 .leo-action-top,
.col-md-1 .leo-action-top,
.col-sp-1 .leo-action-top,
.col-lg-1 .leo-action-top{
    width: 85px;
}
.col-xs-1 .action-sign,
.col-sm-1 .action-sign,
.col-md-1 .action-sign,
.col-sp-1 .action-sign,
.col-lg-1 .action-sign{
    display: none;
}
.col-xs-1 .leo-column_title,
.col-sm-1 .leo-column_title,
.col-md-1 .leo-column_title,
.col-sp-1 .leo-column_title,
.col-lg-1 .leo-column_title{
}
.col-xs-1 .btn-add-widget,
.col-sm-1 .btn-add-widget,
.col-md-1 .btn-add-widget,
.col-sp-1 .btn-add-widget,
.col-lg-1 .btn-add-widget{
    text-indent: -9999em;
    padding-left: 0;
    padding-right: 0;
    background-position: center center;
}