/*---------------------

Generic Theme
Elton Cris - idarktech@jotform.com
www.jotform.com
Description: This theme resets some of the fixed default theme's style and make the following fields mobile responsive.
 >All Payment CC, Billing Address fields
 >Full Name field including Prefix, Suffix, Middle (2 column layout)
 >Address field
 >Date field lite mode and default mode
 >Phone field
 >Page Break
 >Two column layout for shrunken fields

----------------------*/

.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;
}

.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{
/*    -webkit-box-shadow: inset 0 8px 8px -12px rgb(255, 78, 93);
    -moz-box-shadow: inset 0 8px 8px -12px rgb(255, 78, 93);
    box-shadow: inset 0 8px 8px -12px rgb(255, 78, 93);*/
    box-shadow:none !important;
}

/*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;
    margin:0 !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;
}
[data-type="control_dropdown"] .form-input{
    width : 65% !important;
} 
[data-type="control_dropdown"] .form-input-wide {
    width: 100% !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 ------ OLD
[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:10px;
padding-left:0;
}
-----------------------*/

/********* NEW Responsive Full Name Reference: https://codepen.io/mattlubner/pen/RWPYdx *********/
[data-type="control_fullname"] .form-dropdown {
    width: 100% !important;
}
[data-type="control_fullname"] .form-sub-label-container {
  margin:0 !important;
 float:left;
  box-sizing: border-box;
}
[data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(2), 
[data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(2) ~ span {
    width: 50%;
}

[data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(3), 
[data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(3) ~ span {
    width: 33.3%;
    padding:4px;
}

[data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(4), 
[data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(4) ~ span {
    width: 25%;
    padding:4px;
}

[data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(5), 
[data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(5) ~ span {
    width: 50%;
}

[data-type="control_fullname"] span.form-sub-label-container:nth-child(odd){
    padding-right:4px !important;
}
[data-type="control_fullname"] span.form-sub-label-container:nth-child(even){
    padding-left:4px !important;
}
[data-type="control_fullname"] span.form-sub-label-container:first-child{
    padding-left:0 !important;
}
[data-type="control_fullname"] span.form-sub-label-container:last-child{
    padding-right:0 !important;
}
[data-type="control_fullname"] span.form-sub-label-container:nth-child(5){
    padding-right:4px !important;
}

#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"] .form-textbox{
  width: 100%;
}

[data-type="control_phone"] span.form-sub-label-container:first-child:nth-last-child(2){
    width: 30%;
}
[data-type="control_phone"] span.form-sub-label-container:first-child:nth-last-child(2) ~ span {
    width: 70%;  
}

[data-type="control_phone"] span.form-sub-label-container:first-child:nth-last-child(3){
    width: 30% !important;
} 
[data-type="control_phone"] span.form-sub-label-container:first-child:nth-last-child(3) ~ span {
   width: 35% !important; 
}

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

[data-type="control_phone"] .form-sub-label-container + .form-sub-label-container {
    margin-right : 0 !important;
    margin-left: 0 !important;
    padding-right : 0;
    padding-left : 4px;
}
[data-type="control_phone"] .form-input-wide > .form-sub-label-container:first-child {
    width: 100% !important;
    padding: 0;
}

/* 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 {
    padding-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    width:33.33%;
    float:left;
}
[data-type="control_datetime"] .form-sub-label-container:first-child,
span.allowTime-container > span:first-child + span {
    padding-left: 0;
    padding-right:10px;
}

[data-type="control_datetime"] .allowTime-container  > span:first-child + span + span{
    padding-left:0 !important;
}

[data-type="control_datetime"] .form-sub-label-container:first-child + .form-sub-label-container + .form-sub-label-container{
    padding-right: 0;
    padding-left:10px;
}

.allowTime-container .form-sub-label-container:last-child {
    width: 33.3% !important;
    padding-left:10px;
}

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%;
}
/* March 09, 2020 at 04:31 PM update thread #2201011
span.allowTime-container > span:first-child {
    display:none;
}
*/

.showAutoCalendar + label {
    display: none;
}

span.allowTime-container + span {
    padding-top: 10px;
    padding-left: 10px !important;
    width: auto !important;
}

.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;
}
li[data-type="control_datetime"] input.form-textbox {
    padding: 3px 3px 4px 10px;
    margin: 0;
}

/*Date Picker calendar button position*/

[data-type="control_datetime"] img[src*="calendar"] {
    margin:0 !important;
    vertical-align: top !important;
}

input[id*="lite_mode"] + img {
    margin: 0 !important;
    position: absolute;
    z-index: 9;
    right: 2px;
    top: 2px;
}
[data-type="control_datetime"] div .allowTime-container + .form-sub-label-container {
    padding: 0 !important;
    position: absolute;
    top: 2px;
    right: 2px;
}

[data-type="control_datetime"] div[id*="cid"] div > .form-sub-label-container:nth-child(4) {
    padding: 0 !important;
    position: absolute;
    top: 2px;
    right: 2px;
    width: auto !important;
}


/******* Responsive full address field----- OLD TABLE *********************/
.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;
}



/*******NEW responsive tableless address field ******/
[data-type="control_address"] .form-address-line input {
    width: 100%;
}
[data-type="control_address"] .form-sub-label-container {
    margin: 0;
}
[data-type="control_address"] .form-address-table 
.form-address-line-wrapper + 
.form-address-line-wrapper +
.form-address-line-wrapper {
    width:100%;
}
[data-type="control_address"] .form-address-table 
.form-address-line-wrapper + 
.form-address-line-wrapper +
.form-address-line-wrapper .form-address-line{
    width:50%;
    float:left;
    display:inline-block;
    box-sizing:border-box;
}
.form-address-city-line,
.form-address-zip-line{
    padding-right:4px;
}
.form-address-state-line,
.form-address-country-line{
    padding-left:4px;
}

[data-type="control_address"] .form-address-table 
.form-address-line-wrapper + 
.form-address-line-wrapper +
.form-address-line-wrapper +
.form-address-line-wrapper{
    width:100%;
}
[data-type="control_address"] .form-address-table 
.form-address-line-wrapper + 
.form-address-line-wrapper +
.form-address-line-wrapper +
.form-address-line-wrapper .form-address-line{
    width:50%;
    float:left;
    box-sizing:border-box;
}



/*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/radio button */
.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% !important;
    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;
    }
}