/*---------------------
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;
        }
    }