/*---------------------
Theme: Generic Theme
Author: Elton Cris - idarktech@jotform.com
www.jotform.com
----------------------*/

.form-all{ 
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
box-sizing : border-box;
}

[data-type="control_head"] {
    padding-bottom: 10px;
}

/* Responsive fields */
[data-type="control_textbox"] .form-textbox, 
[data-type="control_fullname"] .form-textbox,
[data-type="control_email"] .form-textbox,
[data-type="control_textarea"] .form-textarea, 
[data-type="control_dropdown"] .form-dropdown {
    width : 100% !important;
    max-width: none !important;
}
.form-textbox, .form-textarea, .form-dropdown {
    max-width: none !important;
    box-shadow : none;
    outline : none;
    box-sizing : border-box;
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    font-family: inherit;
}

.form-textarea-limit>span {
    display: block;
}

[data-type="control_dropdown"] .form-input, 
[data-type="control_dropdown"] .form-input-wide {
    width: 100%;
}

/*Input focus*/
.form-line-active input:focus, .form-line-active textarea:focus, .form-line-active select:focus {
    box-shadow:none;
}

/*Reset error*/
.form-line-error{
    box-shadow:none;
}

/*for shrink fields*/
.form-line-column{
    white-space: normal;
}

/*Input error*/
.form-line-error input:not(#coupon-input), .form-line-error textarea, .form-line-error select, .form-line-error .form-validation-error{
    border:1px solid #e15353 !important;
    box-shadow: none !important;  
}

.form-line-active{
    color:inherit !important;
}

/*Responsive form labels*/
.form-label-left,
.form-label-auto{
    width : 35% !important;
    float:left !important;
    box-sizing : border-box;
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
}
.form-label-top {
    width : 100% !important;
}
.form-line{
    box-sizing : border-box;
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    width:100%;
}

.form-checkbox-other-input {
  width: 80% !important;
}

/*Responsive content -wide or shrink*/
.form-input {
    width : 65% !important;
    max-width: none !important;
}
.form-input-wide{
    max-width: none !important;
    display: inline-block;
    width: 100%;  
}

/*single fields with sublabels*/
[data-type="control_textbox"] .form-input-wide .form-sub-label-container, 
[data-type="control_fullname"] .form-input-wide .form-sub-label-container,
[data-type="control_email"] .form-input-wide .form-sub-label-container,
[data-type="control_textarea"] .form-input-wide .form-sub-label-container, 
[data-type="control_dropdown"] .form-input-wide .form-sub-label-container,
[data-type="control_textbox"] .form-input .form-sub-label-container, 
[data-type="control_fullname"] .form-input .form-sub-label-container,
[data-type="control_email"] .form-input .form-sub-label-container,
[data-type="control_textarea"] .form-input .form-sub-label-container, 
[data-type="control_dropdown"] .form-input .form-sub-label-container{
    width : 100%;
    max-width: none !important;
}

[data-type="control_dropdown"] .form-input-wide {
    width: 100%;
}
/*Responsive full name - 2 col - prefix, middle, suffix */
[data-type="control_fullname"] .form-sub-label-container {
  width: 50% !important;
  margin:0 !important;
  float:left;
  box-sizing: border-box;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container {
  display:inline-block;
  padding-right:10px;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container{
  margin-right:0;
  padding-right:0;
  padding-left:10px;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container{
  margin-right:0;
  padding-right:0;
  padding-left:10px;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container + .form-sub-label-container{
padding-left:0;
padding-right:10px;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container + .form-sub-label-container + .form-sub-label-container{
padding-left:10px;
padding-right:0;
}

[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container  + .form-sub-label-container + .form-sub-label-container + .form-sub-label-container{
padding-right:5px;
padding-left:0;
}

#sublabel_prefix, #sublabel_first, #sublabel_middle {
  /*margin-bottom: 10px;*/
}

/*Remove sepatators on date and phone*/
.phone-separate, .date-separate {
    display: none;
}

/*Responsive phone fields*/

[data-type="control_phone"] input[name$="[area]"] {
  width: 100%;
}
[data-type="control_phone"] input[name$="[phone]"] {
  width: 100%;
}
[data-type="control_phone"] input[name$="[full]"] {
  width: 100%;
}

[data-type="control_phone"] .form-sub-label-container {
    width : 40% !important;
    float:left;
    box-sizing : border-box;
    margin-right : 0 !important;
    padding-right : 12px;
}
[data-type="control_phone"] .form-sub-label-container + .form-sub-label-container {
    width : 60% !important;
    margin-right : 0;
    padding-right : 0;
    padding-left : 12px;
}


/* Responsive date time field  - 2 rows*/
[data-type="control_datetime"] .form-textbox,
[data-type="control_datetime"] .form-dropdown{
    width:100%;
}
[data-type="control_datetime"] .form-sub-label-container {
    width: 20%;
    padding-left: 4px;
    box-sizing: border-box;
    margin-right: 0;
}
[data-type="control_datetime"] .form-sub-label-container:first-child{
    padding-left: 0;
}
[data-type="control_datetime"] .form-sub-label-container:first-child + .form-sub-label-container + .form-sub-label-container{
    padding-right: 0;
}
.allowTime-container .form-sub-label-container:last-child {
    width: 33.3% !important;
}

span.allowTime-container {
    width: 60%;
    padding-top:10px;
    display: inline-block;
}
.allowTime-container span.form-sub-label-container {
    width: 33.3%;
}
span.allowTime-container .form-dropdown{
    width:100%;
}
span.allowTime-container > span:first-child {
    display:none;
}
span.allowTime-container > span:first-child + span {
    padding-left:0;
}
.showAutoCalendar + label {
    display: none;
}
span.allowTime-container + span {
    padding-top: 10px;
    padding-left: 10px !important;
    width: auto !important;
}

/*Responsive Calendar lite mode*/
.form-line-column span.allowTime-container {
    width: 93%;
}    
[data-type="control_datetime"] .form-input,
[data-type="control_datetime"] .form-input-wide {
    position: relative;
}
[data-type="control_datetime"] div[style*="none"] + .form-sub-label-container {
    width: 100%;
    padding-left: 0;
    box-sizing: border-box;
    float: left;
}

/*[data-type="control_datetime"] div[style*="none"] + .form-sub-label-container + .form-sub-label-container {
    width: 4%;
    box-sizing: border-box;
    text-align: left;
    padding-left: 0;
    position: absolute;
    right: 4px;
    top: 2px;
}*/

/*Responsive full address field*/
.form-address-city, .form-address-line, .form-address-postal, 
.form-address-state, .form-address-table, 
.form-address-table .form-sub-label-container, .form-address-table select {
    width : 100%;
    max-width: 100%;
}

[data-type="control_address"] input[name$="[city]"],
[data-type="control_address"] input[name$="[postal]"] {
    width : 100% !important;
}
[data-type="control_address"] .form-address-table tbody tr+tr+tr>td:first-child,
[data-type="control_address"] .form-address-table tbody tr+tr+tr+tr>td:first-child {
    padding-right: 10px;
    box-sizing: border-box;
}
[data-type="control_address"] .form-address-table tbody tr+tr+tr>td+td,
[data-type="control_address"] .form-address-table tbody tr+tr+tr+tr>td+td {
    padding-left: 10px;
    box-sizing: border-box;
}

[data-type="control_address"] .form-sub-label-container {
    margin-right: 0;
}

/*Remove button container background*/
.form-all [data-type="control_button"]{
    background:transparent !important;
}
.form-submit-button,
.form-submit-reset,
.form-submit-print{
    outline:none;
}

.form-submit-button:hover,
.form-submit-reset:hover,
.form-submit-print:hover {
}

/*Remove other checkbox*/
.form-checkbox-other, 
.form-radio-other {
    visibility : hidden !important;
}


/*Shruken fields 2 column*/
.form-line-column {
  width: 50%;
}
.form-line-column .form-label-top {
  width: 100% !important;
}


/*Fix form builder display for v3*/
div#stage.form-all {
max-width: none !important;
margin-right: 0;
}
div#stage .form-input {
    width: 64% !important;
}

/*Responsive pagebreak */

.form-all .page-section:first-child .form-pagebreak .form-pagebreak-back-container {
    display:none !important; /*remove first pagebreak back button*/
}


.form-all .form-section:first-child [data-type="control_pagebreak"] .form-pagebreak-next-container {
    text-align: center; /*center align first pagebreak next button*/
    width: 100% !important;
}

.form-pagebreak-back-container {
    width : 50% !important;
    text-align : left;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    float : left !important;
}

.form-pagebreak-next-container {
    width : 50% !important;
    text-align : right;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    float : left !important;
}

/*Radio-checkbox button make border 1px */
.form-radio-item:not(#foo) label:after,
.form-radio-item:not(#foo) label:before {
  border-radius: 50%;
}
.form-checkbox-item:not(#foo) label:after,
.form-checkbox-item:not(#foo) label:before {
    border-radius : 0 !important;
}

.form-radio-item:not(#foo) label:before,
.form-checkbox-item:not(#foo) label:before  {
  border-width:1px !important;
}


/*Responsive credit card on payment fields*/
/*Updated (4/21/2017) - Payments : Remove dash+ slash and alignment on credit card labels - Ibrahim Nergiz*/
/*https://github.com/jotform/Jotform3/commit/ad98d4260cb81e8afaebb0a8aa25ca4de1d9ad56*/

.payment-form-table td + td {padding-left: 0;}
.form-address-table {
    width: 100%;
    max-width: 100% !important;
}
.payment-form-table,
.payment-form-table .form-textbox{
max-width:none;
}

.payment-form-table td:last-child .form-sub-label-container {
    margin: 0;
    white-space: normal;
}

.payment-form-table td .form-sub-label-container {
    width: 100%;
}
.payment-form-table .form-textbox,
.payment-form-table .form-dropdown {
    width : 100%;
}

.payment-form-table tbody > tr:first-child + tr td:first-child span {
    margin : 0;
    padding-right : 10px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

.payment-form-table tbody > tr:first-child + tr td:first-child + td span {
    margin : 0;
    padding-left : 10px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

.payment-form-table tbody > tr:first-child + tr +tr td:first-child span.form-sub-label-container,
.payment-form-table tbody > tr:first-child + tr +tr+tr td:first-child span.form-sub-label-container {
    margin : 0;
    padding-right : 10px;
    width: 100% !important;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

.payment-form-table tbody > tr:first-child + tr +tr td:first-child span + span.form-sub-label-container,
.payment-form-table tbody > tr:first-child + tr +tr+tr td:first-child span + span.form-sub-label-container{
    margin : 0;
    padding-top: 0 !important;
    padding-right : 0;
    padding-left : 10px;
    width: 50% !important;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

.cc_ccv {
    width : 100% !important;
}

/*Credit card fix billing- city state, country */
.payment-form-table td[width="50%"]>span:first-child {
    box-sizing: border-box;
    padding-right: 10px;
}

.payment-form-table td[width="50%"] + td >span:first-child {
    box-sizing: border-box;
    padding-left: 10px;
}

.payment-form-table td[width="50%"] + td[width="50%"] >span:first-child {
    box-sizing: border-box;
    padding-right: 0;
}
.hover-product-item:hover {
    color: inherit;
}
.form-product-item .form-dropdown {
    height: auto !important;
}

/*WorldPay US Fix*/
[data-type="control_worldpayus"] td:last-child .form-sub-label-container {
    margin-left: 0;
}
[data-type="control_worldpayus"] td .form-sub-label-container {
    width: 100%;
}

/*Fix for braintree cc styling*/
[data-type="control_braintree"] .form-sub-label-container {
    width: 100% !important;
    padding: 4px;
    box-sizing: border-box;
}
[data-type="control_braintree"] .form-textbox{
    width: 100%;
}
.braintree-hosted-fields {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 28px;
}

/*fix chargify expand*/
[data-type="control_chargify"] .payment-form-table td[width="50%"]>span:first-child {
    padding-right: 0;
}
[data-type="control_chargify"] .payment-form-table tr+tr td[width="50%"]:first-child>span:first-child {
    padding-right: 10px;
}
/*square payment symmetric*/
.square-hosted-fields {
    width: 100%;
    height: 30px;
    padding: 4px 2px;
    box-sizing: border-box;
}


/*fix pagebreak display on form builder*/
#stage .form-all .page-section:first-child .form-pagebreak .form-pagebreak-back-container {
    display: inline-block !important;
}
#stage .form-all .form-section:first-child [data-type="control_pagebreak"] .form-pagebreak-next-container {
    text-align: right;
    width: 50% !important;
}
div#stage [data-type="control_pagebreak" ] .form-input {
    width: 100% !important;
}


@media screen and (max-width:768px){
    .form-all {
      margin : 0 auto !important;
      width:100% !important;
    }
    [data-type=control_fullname] .form-sub-label-container:first-child{
        margin-right: 0;
  }
}
@media screen and (max-width:480px){
    .jotform-form {
        padding : 0;
    }
    .form-input {
        width : 100% !important;
    }

    .form-label {
        width : 100% !important;
        float:none !important;
    }
    .form-line-column {
        width: 100% !important;
    }
    div.form-header-group {
        margin: 0 !important;
        padding: 24px 20px !important;
    }
    [data-type="control_datetime"] .form-sub-label-container {
        float: left;
    }
    span.allowTime-container {
        width: 100%;
        padding-left: 0;
    }
    span.allowTime-container + span {
        padding-left: 0 !important;
    }
  [data-type=control_fullname] .form-sub-label-container:first-child{
        margin-right: 0;
    }
    div[id*=at_] {
        height: auto;
    }
}