.main-container{
    padding:20px;
    padding-left:250px;
}

.work-space{
    padding:0 14px;
    background:#fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    max-width:1024px;
    margin:0 auto;
    position:relative;
}
.work-space-guideline{
    position:absolute;
    left:20px;
    right:20px;
    top:20px;
    bottom:20px;
    text-align:center;
    border:3px dashed #CCE6E8;
    color:#CCE6E8;
    font-size:30px;
    padding-top:50px;
}
.work-space-box{
    padding:10px;
    padding-bottom:200px;
}

.tool-space,
.property-space{
    left:0;
    top:60px;
    bottom:0;
    width:230px;
    background:#777;
    z-index:2;
    position:fixed;
    padding:15px;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-left:none;
    color:#eee;
    box-sizing:border-box;
}
.property-space{
    right:0;
    left:auto;
    /*bottom:28px;*/
    display:none;
}
.property-space label{
    font-size:80%;
}
.btn-group-align{
    display: flex;
}
.btn-group-align .btn{
    padding:3px 5px;
    flex: 1;
    background:#e1e1e1;
}
.btn-group-align .btn.active{
    background:#fff;
}
.prop-line{
    margin-bottom:10px;
}
.tool-space-head{
    border-bottom:1px solid #fff;
    padding-bottom:2px;
    margin-bottom:10px;
    color:#fff;
    padding:5px 15px;
}
.tool-space .tool-space-head{
    padding-left:0;
}

.tool-items{
    padding:0;
}
.tool-items  .tool-items-box{
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    background:#fff;
    padding:1px 10px;
    font-size:12px;
    margin-bottom:10px;
    color:#000;
    cursor:pointer;
    list-style:none;
}
.tool-items-box-added{
    cursor:pointer;
    padding-top:5px;
    padding-bottom:5px;
}
    .tool-items-box-added[data-require='true'] > label:before,
    .tool-items-box-added[data-require='true'] > .components-panel > .components-panel-header > p:before {
        content: "* ";
        color: #ff0000;
    }
.tool-items-box-added:hover{
    background:#f7f7f7;
    border-radius:5px;
}
.tool-items-box-added.focus{
    outline:1px solid orange;
}
.tool-space{
    padding:0;
}
.tool-space-inner{
    position:static;
    width:100%;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
}
.tool-space .tool-space-inner{
    padding:0 15px;
}
.tool-space-bottom{
    position:absolute;
    left:15px;
    right:15px;
    bottom:15px;
}
.tool-space-content{
    height:calc(100vh - 165px);
    overflow-y:auto;
}
.tool-space-content::-webkit-scrollbar-track,
.tool-space-inner::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #C0C0C0;
    border-radius: 3px;
}
.tool-space-content::-webkit-scrollbar,
.tool-space-inner::-webkit-scrollbar
{
	width: 6px;
	background-color: #616161;
    border-radius: 3px;
}
.tool-space-content::-webkit-scrollbar-thumb,
.tool-space-inner::-webkit-scrollbar-thumb
{
	background-color: #616161;
    border-radius: 3px;
}

.input-group-addon-for-prop-option{
    background: #eee;
    cursor: pointer;
    color: #555;
    padding:3px 8px;
}

.tool-items-dragging{
    padding:10px;
}

.btn-add-form-option{
    color:gold;
    font-size:12px;
    float:right;
    margin-top:6px;
}
.property-space .prop-option-section{
    border-bottom:1px solid #888;
    padding:5px 15px;
}
.property-space .prop-option-section .heading-grey{
    font-weight:600;
    color:#bbb;
    margin:0;
}
.property-space hr{
    border-bottom:1px solid #888;
    margin:10px -15px;
}
.ui-state-highlight{
    background:rgba(255, 193, 7, 0.2);
    margin-left:15px;
    min-height:80px;
}



.instant-space{
    background:#f7f7f7;
    padding:100px;
    border-bottom:1px dashed blue;
    margin:0 -14px;
    padding:10px 25px;
    display:none;
}

.prop-remove-item-btn{
    font-size:10px;
    padding:1px 5px;
    margin-top:3px;
}

.catalog-col .card{
    margin-bottom:20px;
}
.catalog-col .card-img-top{
    width:100%;
    height:auto;
}
.tool-items-box-added .card .card-config{
    position:absolute;
    right:10px;
    top:10px;
    z-index:2;
    font-size:28px;
    color:#04AC9C;
    cursor:pointer;
    background:#fff;
    padding:5px;
    text-align:center;
    width:40px;
    height:40px;
    border-radius:50%;
}
.tool-items-box-added .card .card-config:hover{
    opacity:0.8;
}

.catalog-detail-cover:hover{
    opacity:1.4;
}
.option-input-group .form-control-option{
    resize: none !important;
    overflow-y: hidden !important;
}
.option-input-group .input-group-text{
    cursor:pointer;
}
.option-input-group .form-control-option,
.option-input-group .form-control-option-data-value,
.option-input-group .input-group-text {
    padding: 3px 8px;
    font-size: 12px;
    height: 25px;
}

.prop-table-answer-container{
    margin-top:-5px;
    padding-left:15px;
}

.prop-table-answer-container-option{
    padding-bottom:0;
    padding-top:4px;
    position:relative;
    padding-left:8px;
}
.form-option-group .prop-table-answer-container-option:first-child{
    padding-top:8px;
}
.form-option-group .prop-table-answer-container-option:last-child{
    padding-bottom:0;
    margin-bottom:10px;
}
.prop-table-answer-container-option .option-caret{
    position:absolute;
    top:-15px;
    left:-10px;
    bottom:12px;
    color:#ddd;
    border-left:1px dashed #eee;
    padding-top:25px;
}
.prop-table-answer-container-option .option-caret:before{
    /*margin-left:-1px;*/
}
.form-option-group .prop-table-answer-container-option:first-child .option-caret{
    top:0px;
    padding-top:14px;
}
.prop-table-answer-container-option.prop-table-answer-container-option-adder{
    padding-top:0;
}
.prop-table-answer-container-option.prop-table-answer-container-option-adder .option-caret{
    padding-top:20px;
}

.lof-add-new-answer-option-btn{
    color:gold;
    cursor:pointer;
}

.lof-qa-table td,
.lof-qa-table th{
    padding:5px 8px;
    vertical-align:middle;
}
.lof-qa-table-col-head,
.lof-qa-table-col-index,
.lof-qa-table-col-question{
    /*font-weight:600;*/
}
.lof-qa-table-col-index{
    width:70px;
    text-align:center;
}
.lof-qa-table-col-question {
    text-align:left;
}
.lof-qa-table-col-head-answer-group,
.lof-qa-table-col-head-answer-group-option,
.lof-qa-table-col-body-answer-group-option{
    text-align:center;
}
.lof-qa-table-col-body-answer-textarea{
    resize:none;
    line-height:17px;
    font-size:12px;
    padding:5px 8px;
}

.prop-label-style-bold{
    font-weight:600;
}
.prop-label-style-italic{
    font-style:italic;
}
.prop-label-style-underline{
    text-decoration:underline;
}

.components-panel {
    /*border-left: 2px solid #aaa;*/
    /*padding-left: 10px;*/
}
    .components-panel .components-panel-header {
    }
        .components-panel .components-panel-header p {
            margin-bottom: 7px;
        }
    .components-panel .components-panel-body {
        /*padding: 7px 20px;*/
        /*margin-bottom: 10px;*/
    }
    .components-panel .components-panel-body .row {
        min-height: 34px;
    }