/*
*   RENDER TEMPLATE
*/
input[type="file"] {
    cursor: pointer;
}
#EFormTemplateWrapper {
    margin-bottom: 30px
}
#EFormTemplateWrapper .form-horizontal .form-group {
    margin-left: 0; 
    margin-right: 0;
}
#EFormTemplateWrapper .form-horizontal .form-group .text-align-right .select2-container{
    text-align: right;
}

#EFormTemplateWrapper .form-horizontal .form-group .text-align-right .select2-selection__rendered{
    padding-right: 15px;
}
.eformControlWrapper div.eformLabelHook > label.eformLabel.text-left {
    left: 0;
}
.eformControlWrapper div.eformLabelHook > label.eformLabel.text-right {
    right: 0;
    padding-right: 5px;
}
.eformControlWrapper .eformLabel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 4px;
}
.eformControlWrapper .eformLabelHook {
    width: 100%;
    min-height: 30px;
}
.eformControlWrapper label:not(.switch) {
    width: 100%;
    word-wrap: break-word;
}
.eformControlGroup {
    /*padding-right: 12px;*/
}
.eformControlGroup>div[class*="col-xs-"] {
    padding-right: 10px;
    padding-left: 0px;
}
.eformControlGroup .select2-container .select2-selection--single {
    cursor: default;
}
.eformControlGroup .select2-container--bootstrap .select2-selection__clear{
    /*color: #ef0101;*/
    float: none;
    position: absolute;
    padding: 0px 3px;
    right: 15px;
    z-index: 1050;
}
/*
*   ICON TOOL DYNAMIC SECTION 
*/
#EFormTemplateWrapper table th {
    position: relative;
    vertical-align: top;
}
.dynamicActionRow{
    margin-bottom: 15px;
    position: relative;
    height: 100%;
    padding-top: 5px;
}
/* color */
.dynamicActionRow .removeSection, table .removeSection{
    color: red;
}
.toolDynamicRow .addSection, table .addSection{
    color: green;
}
.toolDynamicRow .copySection, table .copySection,
.toolDynamicRow .sortSection {
    color: blue;
}
table .sortSection {
    color: inherit;
    opacity: 0.5;
    position: absolute;
    top: calc(50% - 6px);
    right: 8px;
    display: block;
}
#EFormTemplateWrapper .sectionTableContainer thead .select2-selection--single {
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background-color: unset !important;
}
#EFormTemplateWrapper .sectionTableContainer thead .select2-selection--single .select2-selection__arrow {
    right: 2px !important;
}
/* cursor */
.dynamicActionRow .btnContainer > *,
.toolDynamicRow .btnContainer > * {
    cursor: pointer;
    width: 16px;
    text-align: center;
    margin-left: 2px;
}
/* font */
.dynamicActionRow .removeSection,
.toolDynamicRow .addSection {
    font-size: 18px;
}
.dynamicActionRow .copySection {
    font-size: 15px;
    vertical-align: 1px;
}
.toolDynamicRow .sortSection {
    font-size: 13px;
    vertical-align: 2px;
}
/* position */
.toolDynamicRow {
    position: relative;
}
.toolDynamicRow .btnContainer,
.dynamicActionRow .btnContainer {
    position: absolute;
    top: 0;
    right: 0;
    white-space: nowrap;
}
.sectionChild .toolDynamicRow .btnContainer {
    top: -18px;
}
.sectionChild .dynamicActionRow .btnContainer {
    top: -23px;
}
/*
*   END ICON TOOL DYNAMIC SECTION 
*/

#sectionTabContent .select2-container--bootstrap, #sectionCollapseContainer .select2-container--bootstrap  {
    width: 100%!important;
}
.removeRow:hover{
    cursor: pointer;
}
.section-header-title{
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}
#pageAction{
    margin-top: 10px;
    margin-bottom: 40px;
}
.headerTitleSection.error{
    color: red;
}
.landscapeSectionHeader {
    font-weight: bold;
    margin-bottom: 5px;
}
.sectionLandscapeClone .dynamicActionRow{
    position: relative;
    margin-bottom: 0;
}
.sectionLandscapeClone.dynamicActionRow .removeSection{
    position: absolute;
    right: -6px;
    top: 5px;
}

.landscapeToolDynamicRow .addSection {
    top: -18.5px;
    right: -5px;
}
.field-arrow,.row-header .row-order {
    cursor: pointer;
}

.file-control-status{
    position: absolute;
    top: 9px;
    right: 20px;
}
.file-control-loading {
    color: #5bc0de;
}
.file-control-success{
    color: green;
}

.sectionChild{
    padding: 0px 6px 0px;
    border-bottom: 1px solid #bbb;
    margin-bottom: 10px;
}
.sectionChild .section-header-title{
    border-bottom: none;
    color: #aaa;
}
.sectionChild .dynamicActionRow {
    position: relative;
    top: 5px;
    display: inline-block;
    float: right;
    margin-bottom: 0px;
}

.sectionChild .sectionClone {
    margin-bottom: 10px;
}
.sectionChild .col-xs-4 {
    width: 33.30323332%
}

#EFormTemplateWrapper input[type=file]:focus {
    outline: none;
    box-shadow: none;
}

@-moz-document url-prefix() {
    #EFormTemplateWrapper input[type=file] {
        height: inherit;
        padding: 3px 10px;
    }
}
#sectionTabHeader {
    margin-bottom: 10px;
}
.table-control {
    margin: 5px 0;
}
.packaging-control-wrapper {
    position: relative;
}
.packaging-control-wrapper .add-button {
    font-size: 18px;
    position: absolute;
    top: 6px;
    right: 7px;
    color: green;
    width: 16px;
    cursor: pointer;
}
#sectionTabContent .packaging-control-wrapper .select2-container--bootstrap,
#sectionCollapseContainer .packaging-control-wrapper .select2-container--bootstrap {
    /* Sorry, we need to use !important due to it was set above */
    width: calc(100% - 30px) !important;
}

/*=== for view page, hide all border and effect ===*/
.form-control.control-view-page-style {
    height: auto;
    max-height: none;
    box-shadow: none;
    border-color: transparent;
    background-color: transparent;    
    white-space:pre-wrap; 
}
.form-control.form-control-content-area{
}
.select2-control-view-page-style .select2-container *{
    pointer-events: none;
    box-shadow: none;
    border-color: transparent;
    background-color: transparent;
}
.select2-control-view-page-style .select2-container .select2-selection__arrow, 
.select2-control-view-page-style .select2-container .select2-selection__choice__remove {
    display: none;
}

.sectionTabHeader .headerTitleSection,
.sectionTableContainer h4,
.sectionCollapseContainer span.headerTitleSection ,
.sectionChild span.headerTitleSection {
    font-size: 12px;
    font-weight: bold;
    
}