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

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 {
  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 {
}

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

.form-all .form-section:first-child [data-type="control_pagebreak"] .form-pagebreak-next-container {
  text-align: center;
  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;
  }
}

@media screen and (max-width:768px) {
  [data-type=control_fullname] .form-sub-label-container:first-child {
    margin-right: 0;
  }
}

@media screen and (max-width:480px) {
  .jotform-form {
    padding: 0;
  }
}

@media screen and (max-width:480px) {
  .form-input {
    width: 100% !important;
  }
}

@media screen and (max-width:480px) {
  .form-label {
    width: 100% !important;
    float: none !important;
  }
}

@media screen and (max-width:480px) {
  .form-line-column {
    width: 100% !important;
  }
}

@media screen and (max-width:480px) {
  div.form-header-group {
    margin: 0 !important;
    padding: 24px 20px !important;
  }
}

@media screen and (max-width:480px) {
  [data-type="control_datetime"] .form-sub-label-container {
    float: left;
  }
}

@media screen and (max-width:480px) {
  span.allowTime-container {
    width: 100%;
    padding-left: 0;
  }
}

@media screen and (max-width:480px) {
  span.allowTime-container + span {
    padding-left: 0 !important;
  }
}

@media screen and (max-width:480px) {
  [data-type=control_fullname] .form-sub-label-container:first-child {
    margin-right: 0;
  }
}

@media screen and (max-width:480px) {
  div[id*=at_] {
    height: auto;
  }
}