﻿/*---------------------
Theme: Responsive 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: 20px;
}
/*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;
}
[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;
}

/*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 content -wide or shrink*/
.form-label{
    width : 35% !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;
}

.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*/
[data-type="control_fullname"] .form-sub-label-container {
  width: 50% !important;
  margin:0;
  float:left;
  box-sizing: border-box;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container {
  display:inline-block;
  padding-right:5px;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container{
  margin-right:0;
  padding-right:0;
  padding-left:5px;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container{
  margin-right:0;
  padding-right:0;
  padding-left:5px;
}
[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container + .form-sub-label-container{
padding-left:0;
padding-right:5px;
}

[data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container + .form-sub-label-container + .form-sub-label-container{
padding-right:0;
padding-left:5px;
}
#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%;
    float:left;
    box-sizing : border-box;
    margin-right : 0;
    padding-right : 12px;
}

/* responsive date time field */
[data-type="control_datetime"] .form-textbox,
[data-type="control_datetime"] .form-dropdown{
    width:100%;
}
[data-type="control_datetime"] .form-sub-label-container {
    width: 28%;
    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;
}
[data-type="control_datetime"] .form-sub-label-container:last-child {
    width: auto !important;
}

.allowTime-container .form-sub-label-container:last-child {
    width: 20% !important;
}

span.allowTime-container {
    width: 80%;
    padding-top: 14px;
}
.allowTime-container span.form-sub-label-container {
    width: 35%;
}
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: 14px;
}

/*calendar lite mode*/
[data-type="control_datetime"] div[style*="none"] + .form-sub-label-container {
    width: 84%;
    padding-left: 0;
}

/*responsive phone field*/
[data-type="control_phone"] .form-sub-label-container + .form-sub-label-container {
    width : 60%;
    margin-right : 0;
    padding-right : 0;
    padding-left : 12px;
}

/*responsive full address fields*/
.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 : 90% !important;
}
[data-type="control_address"] input[name$="[area]"] {
width: 60%;
}

/*reset submit button*/
[data-type="control_button"]{
    background:transparent !important;
}
.form-submit-button,
.form-submit-reset,
.form-submit-print{
    outline:none;
}

/*remove other checkbox*/
.form-checkbox-other, 
.form-radio-other {
    visibility : hidden !important;
}


/*shruken fields*/
.form-line-column {
  width: 50%;
}
.form-line-column .form-label-top {
  width: 100% !important;
}


/*fix form builder display*/
div#stage.form-all {
max-width: none !important;
margin-right: 0;
}
div#stage .form-input {
    width: 64% !important;
}

/*remove first pagebreak back button*/
.form-all .page-section:first-child .form-pagebreak .form-pagebreak-back-container {
    display:none !important;
}

/* responsive pagebreak */
.form-pagebreak-back-container {
    width : 50% !important;
    text-align : left;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    float : left;
}

.form-pagebreak-next-container {
    width : 50% !important;
    text-align : right;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    float : left;
}

/* 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;
}

.form-radio-item:not(#foo) label:before,
.form-checkbox-item:not(#foo) label:before  {
  border-width:1px;
}


/*responsive credit card on payment fields*/
table td + td {padding-left: 0;}
.form-address-table {
    width: 100%;
}
[data-type="control_stripe"] .form-address-table,
[data-type="control_stripe"] .form-address-table .form-textbox,
[data-type="control_authnet"] .form-address-table,
[data-type="control_authnet"] .form-address-table .form-textbox,
#creditCardTable.form-address-table,
#creditCardTable.form-address-table .form-textbox{
max-width:none;
}

[data-type="control_stripe"] .form-address-table td:last-child .form-sub-label-container,
[data-type="control_authnet"] .form-address-table td:last-child .form-sub-label-container,
#creditCardTable.form-address-table td:last-child .form-sub-label-container {
    margin-left: 0;
    white-space: normal;
}

[data-type="control_stripe"] .form-address-table td .form-sub-label-container,
[data-type="control_authnet"] .form-address-table td .form-sub-label-container,
#creditCardTable.form-address-table td .form-sub-label-container {
    width: 100%;
}

[data-type="control_stripe"] .form-address-table .form-textbox,
[data-type="control_stripe"] .form-address-table .form-dropdown,
[data-type="control_authnet"] .form-address-table .form-textbox,
[data-type="control_authnet"] .form-address-table .form-dropdown,
#creditCardTable.form-address-table .form-textbox,
#creditCardTable.form-address-table .form-dropdown {
    width : 100%;
    visibility:visible;
}

[data-type="control_stripe"] .form-address-table tbody > tr:first-child + tr td:first-child span,
[data-type="control_authnet"] .form-address-table tbody > tr:first-child + tr td:first-child span,
#creditCardTable.form-address-table tbody > tr:first-child + tr td:first-child span {
    margin : 0;
    padding-right : 6px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

[data-type="control_stripe"] .form-address-table tbody > tr:first-child + tr td:first-child + td span,
[data-type="control_authnet"] .form-address-table tbody > tr:first-child + tr td:first-child + td span,
#creditCardTable.form-address-table tbody > tr:first-child + tr td:first-child + td span {
    margin : 0;
    padding-left : 6px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

[data-type="control_stripe"] .form-address-table tbody > tr:first-child + tr +tr td:first-child span,
[data-type="control_stripe"] .form-address-table tbody > tr:first-child + tr +tr+tr td:first-child span,
[data-type="control_authnet"] .form-address-table tbody > tr:first-child + tr +tr td:first-child span,
[data-type="control_authnet"] .form-address-table tbody > tr:first-child + tr +tr+tr td:first-child span,
#creditCardTable.form-address-table tbody > tr:first-child + tr +tr td:first-child span,
#creditCardTable.form-address-table tbody > tr:first-child + tr +tr+tr td:first-child span {
    margin : 0;
    padding-right : 6px;
        width: 50% !important;
    visibility:hidden;
    float : left;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

[data-type="control_stripe"] .form-address-table tbody > tr:first-child + tr +tr td:first-child span + span,
[data-type="control_stripe"] .form-address-table tbody > tr:first-child + tr +tr+tr td:first-child span + span,
[data-type="control_authnet"] .form-address-table tbody > tr:first-child + tr +tr td:first-child span + span,
[data-type="control_authnet"] .form-address-table tbody > tr:first-child + tr +tr+tr td:first-child span + span,
#creditCardTable.form-address-table tbody > tr:first-child + tr +tr td:first-child span + span,
#creditCardTable.form-address-table tbody > tr:first-child + tr +tr+tr td:first-child span + span {
    margin : 0;
        padding-top: 0 !important;
    padding-right : 0;
    padding-left : 6px;
        width: 50% !important;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
}

.cc_ccv {
    width : 100% !important;
}

[data-type="control_stripe"] .form-address-table .form-sub-label,
[data-type="control_authnet"] .form-address-table .form-sub-label,
#creditCardTable.form-address-table .form-sub-label {
    visibility:visible;
}

/*cc fix city state, country */
[data-type="control_stripe"] .form-address-table td[width="50%"]>span:first-child,
[data-type="control_authnet"] .form-address-table td[width="50%"]>span:first-child,
#creditCardTable.form-address-table td[width="50%"]>span:first-child {
    box-sizing: border-box;
    padding-right: 7px;
}
[data-type="control_stripe"] .form-address-table td[width="50%"] + td >span:first-child,
[data-type="control_authnet"] .form-address-table td[width="50%"] + td >span:first-child,
#creditCardTable.form-address-table td[width="50%"] + td >span:first-child {
    box-sizing: border-box;
    padding-left: 7px;
}
[data-type="control_stripe"] .form-address-table td[width="50%"] + td[width="50%"] >span:first-child,
[data-type="control_authnet"] .form-address-table td[width="50%"] + td[width="50%"] >span:first-child,
#creditCardTable.form-address-table td[width="50%"] + td[width="50%"] >span:first-child {
    box-sizing: border-box;
    padding-right: 0;
}
.hover-product-item:hover {
    color: inherit;
}

/*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;
}
/*remove bottom spacing on CC section*/
.form-address-table tbody tr + tr + tr td {
    padding-bottom: 0;
}


@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;
    }
  [data-type=control_fullname] .form-sub-label-container:first-child{
        margin-right: 0;
  }
}