/* 
 * Author : Kaushik Solanki
 */
body {
    padding: 19px;
    margin: 10px 0;
    /*background: #f2f2f2 url('http://formbuilder.readthedocs.io/en/latest/img/noise.png');*/
    background-color: #fff;
    color: #75736f;
}

.datatable {
    width: 100%;
    padding: 17px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #c5c5c5;
}
.contentbox {
    width: 100%;
    /*border: #75736f solid 1px;*/
    padding: 17px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #c5c5c5;
}
.showInfo {
    padding: 17px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-weight: bolder;
    background: #c5c5c5;
}

.setDataWrap {
    text-align: center;
    margin-bottom: 10px;
}
.form-wrap.form-builder .empty .frmb{
    border: 0;
}
.form-wrap.form-builder .empty:before{
    content: '';
    position: absolute;
    top : 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    border: 3px dashed #ccc;
}
.form-wrap.form-builder .stage-wrap {
    position: relative;
    float: right !important;
    width: 74%;
}

.form-wrap.form-builder .cb-wrap {
    position: relative !important;
    float: left;
    width: 25%;
    transition: transform 3.25s;
    left: 0px !important;
}

.form-wrap.form-builder .stage-wrap {
    background-color: whitesmoke;
    border-left: 1px solid #ddd;
    padding: 20px;
    min-height: 508px;
}
.form-wrap.form-builder .frmb li {
    margin:0;
    margin-bottom: 8px;
    padding:15px;
}
.form-wrap.form-builder .frmb li:nth-child(odd){
    border-left:5px solid whitesmoke;
    border-right:5px solid whitesmoke;
}
.form-wrap.form-builder .frmb li:nth-child(even){
    border-left:5px solid whitesmoke;
    border-right:5px solid whitesmoke;
}
/*.form-wrap.form-builder .frmb li{
    border:0px;
}*/
.form-wrap.form-builder .form-control {
    border: 1px solid #ccc;
}
.form-wrap.form-builder .btn {
    border: 1px solid #ccc;
}
.save-all-wrap {
    text-align:center;
    padding:20px;
}
.pull-right {
    float: left !important;
}
.form-wrap.form-builder .frmb{
    display: flex;
    flex-wrap: wrap;
    min-height: auto !important;
    margin:0 0 10px;
}
.form-wrap.form-builder .frmb{
    margin-left:-5px;
    margin-right:-5px;
}



/*************** CSS Class added for customizing columns.Please do not delete without prior permission***************/

.form-wrap.form-builder .frmb > li:hover{
    box-shadow: none;
}
.final-full{
    width:100%;
    padding: 0px 15px;
   
}
.rendered-form{
    display: flex;
    flex-flow: wrap;
}
.final-half{
    width:50%;
    padding:0px 15px; 
}

/*****************************************************************************************************************/

/*form with side label*/
.form-wrap.form-builder .fwsl .frmb li{
    flex: 0 0 100%;
}
.form-wrap.form-builder .fwsl .frmb li .field-label{
    float: left;
    width:15%;
}
.form-wrap.form-builder .fwsl .frmb li .prev-holder{
    float: left;
    width:75%;
}
.form-wrap.form-builder .fwsl .frmb li:after{
    display:table;
    clear:both;
}
.form-wrap.form-builder .fwsl .toggle-form {
    opacity: 1;
}
.form-wrap.form-builder .fwsl .frmb .field-actions{
    opacity: 1;
}
/*form with full label*/
.form-wrap.form-builder .fwfl .frmb li{
    flex: 0 0 100%;    
}
/*half with side label*/
.form-wrap.form-builder .hwsl .frmb li{
    padding-top: 45px;
}
.form-wrap.form-builder .hwsl .frmb li .field-label{
    float: left;
    width:30%;
}
.form-wrap.form-builder .hwsl .frmb li .prev-holder{
    float: left;
    width:70%;
}
.form-wrap.form-builder .hwsl .frmb li:after{
    display:table;
    clear:both;
}
.form-wrap.form-builder .hwsl .toggle-form {
    opacity: 1;
}
.form-wrap.form-builder .hwsl .frmb .field-actions{
    opacity: 1;
}
/*quarter with side label*/
.form-wrap.form-builder .qwhl .frmb li{
    flex: 0 0 33.33%;
}

/*commmon css*/
.settings select {
    width: 25%;
    margin-bottom: 15px;
}
.form-wrap.form-builder .frmb .frm-holder{
    clear:both;
}
.form-wrap.form-builder .frmb li.header-field, .form-wrap.form-builder .frmb li.button-field, .form-wrap.form-builder .frmb li.paragraph-field, .form-wrap.form-builder .frmb li.hidden-field{
    flex: 0 0 100%;
    padding-top: 15px;
}
.form-wrap.form-builder .frmb .prev-holder input[type="number"]{
    width:100%;
}

/*inline radio*/
.form-wrap.form-builder .fb-radio-group .radio-inline, .form-wrap.form-builder .fb-checkbox-group .checkbox-inline{
   display: inline-block;
    margin-right: 15px;
}
.form-wrap.form-builder .fb-radio-group .radio-inline label, .form-wrap.form-builder .fb-checkbox-group .checkbox-inline label{
    float:none;
    width:auto;
}
.rendered-form .fb-radio-group .radio-inline, .rendered-form .fb-checkbox-group .checkbox-inline{
    display:inline-block;
    margin-right: 15px;
}
/*render form css*/
.rendered-form>div, .rendered-form.fwsl>.fb-button.form-group, .rendered-form.fwfl>.fb-button.form-group, .rendered-form.hwsl>.fb-button.form-group, .rendered-form.hwhl>.fb-button.form-group, .rendered-form.qwhl>.fb-button.form-group{
    flex: 0 0 100%;
}
.rendered-form.fwsl>.form-group{
    flex: 0 0 100%;
    display:flex;
    padding: 0 15px;
}
.rendered-form.fwsl>.form-group>label{
    float: left;
    flex: 0 0 15%;
}
.rendered-form.fwsl>.form-group>.form-control{
    float: left;
    flex: 0 0 85%;
}
.rendered-form.fwsl>.form-group:after{
    display:table;
    clear:both;
}
/*render full with full label*/
.rendered-form.fwfl>.form-group{
    flex: 0 0 100%;
    display:block;
    padding: 0 15px;
}
.rendered-form.fwfl>.form-group>label{
    float: none;
    display:block
}
.rendered-form.fwfl>.form-group>.form-control{
    float: none;
}
/*render half with side label*/
.rendered-form.hwsl>.form-group{
    flex: 0 0 50%;
    display:flex;
    padding: 0 15px;
}
.rendered-form.hwsl>.form-group>label{
    float: left;
    width:40%;
}
.rendered-form.hwsl>.form-group>.form-control{
    float: left;
    width:60%;
}
/*render half with half label*/
.rendered-form.hwhl>.form-group{
    flex: 0 0 50%;
    display:block;
    padding: 0 15px;
}
.rendered-form.hwhl>.form-group>label{
    float: none;
    display:block
}
.rendered-form.hwhl>.form-group>.form-control{
    float: none;
}
/*render quarter with half label*/
.rendered-form.qwhl>.form-group{
    flex: 0 0 33.33%;
    display:block;
    padding: 0 15px;
}
.rendered-form.qwhl>.form-group>label{
    float: none;
    display:block
}
.rendered-form.qwhl>.form-group>.form-control{
    float: none;
}