/*
  Responsive layout with adaptable height for Salesforce Pardot
  v1.0
  Jose Atencio
*/
      /*
        2. Custom Fonts
      */
      /* latin */
      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
      /*
        1. Above the Form section
      */
      .aboveForm {
        display: block;
        width: 100%;
        padding: 0!important;
        margin: 0!important;
      }
      .aboveForm p {
          margin: 0!important;
          padding: 0!important;
      }
      .aboveForm * {
        color: #3B3B3B;
      }
      .aboveForm .light * {
        color: #fff;
      }
      .aboveForm h2, .belowForm h2, .thankYou h2 {
        font-size: 1.5rem;
        font-weight: bold;
        margin: 0 0 10px;
        font-family: 'Roboto';
        font-weight: bold;        
      }
      .aboveForm h3, .belowForm h3, .thankYou h3 {
        font-size: 1.2rem;
        font-weight: 400;
        margin: 0;
      }      
      /*
        1. Below the Form section
      */
      .belowForm {
        display: block;
        width: 100%;
        margin-bottom: 15px;
      }
      .belowForm * {
        color: #3B3B3B;
      }
      .belowForm .light * {
        color: #fff;
      }
      /*
        1. Thank you section
      */
      .thankYou {
        display: block;
        width: 100%;
      }
      .thankYou * {
        color: #3B3B3B;
      }
      .thankYou .light * {
        color: #fff;
      }
      /*
        1. Disclaimer
      */
      .disclaimer label {
        margin: 10px auto;
        font-size: 0.8rem!important
        color: #3B3B3B;
      }
      .disclaimer a {
        color: #63B4E4;
      }
      /*
      2. Buttons
      */
      a.button {    
        background-color: #0A8523;
        font-size: 1rem;
        font-family: 'Poppins';
        color: #FFFFFF;
        font-weight: 300;                
        font-weight: bold;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 24px;
        padding-left: 24px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        display: table;
        margin: 10px auto;
        text-decoration: none;
      }
      a.button:hover {
        color: #2B9ABE;
      }
      /*
        2. Main Form container
      */
      form.form {
        padding: 0;
        margin: 0;
        font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;
        font-size: 12px;
      }
      form.form div.form-wrapper, form.form p.submit {
        box-sizing: border-box;
      }
      /*
        Form container size:
        fullWidth: 100%
        oneHalf: 50%
        oneThird: 33.333%
        oneQuarter: 25%
        Note: All of the above classes applies after 480px form width
      */
      form.form div.form-wrapper.fullWidth {
        padding: 0;
        clear: both;     
      }      
      form.form div.form-wrapper.oneHalf, form.form div.form-wrapper.oneThird, form.form div.form-wrapper.oneQuarter {
        display: block;
        box-sizing: border-box;
        margin: 0 0 10px 0;
        width: 100%;
        clear: none;        
      }
      /*
        3. Error Clases: Here you can customize all the properties for alerts and errors
      */
      .red-background, form.form p.errors {
        padding: .75rem 1.25rem;
        width: 100%;
        position: relative;
        border: 1px solid transparent;
        border-radius: .25rem;
        color: #721c24!important;
        background-color: #f8d7da!important;
        border-color: #f5c6cb;
        margin-left: 0;
        box-sizing: border-box;
      }
      .red-color, form.form p.error, form.form span.error, form.form p.error, form.form p.error label {
        margin: 5px 0 0!important;
        color: #bd1010;
      }
      /*
        4. Input Field container properties
      */
      form.form p {
        font-size: 1rem;
      }
      form.form div.form-wrapper {
        clear: none;
        margin: 0 0 20px;
        padding: 0;
      }
      form.form .description {
        font-weight: 400;
        font-size: 13px;
        letter-spacing: 0.03rem;
        color: #4b4b4b;
        margin-left: 0!important;
      }
      form.form .description .GCLID {
          padding: 0;
          margin: 0;
      }
      form.form .hidden {
          display: none;
          margin: 0;
          padding: 0;
      }
      /*
        5. Input fields properties
      */
      form.form p label {
        text-align: left!important;
        margin-bottom: 0.5rem!important;
        font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial;
      }      
      form.form input.text, form.form textarea.standard, form.form textarea, form.form select, form.form input.date { 
        background-color: #FFFFFF;
        border:solid 1px #cdcdcd;
        font-size: 13px;
        color: #3B3B3B;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        width: 100%!important;
        box-sizing: border-box;
      }
      form.form textarea.standard {
          height: 70px;
          width: 100%!important;
      }
      form.form input.text, form.form select {
        height: 38px;
      }
      form.form div.form-wrapper label {
        float: none;
        text-align: left;
        line-height: 1.2em;
        width: auto;
        margin-bottom: 10px;
        display: block;
      }
      form.form div.form-wrapper label, form.form div.form-wrapper input:not([type='checkbox']), form div.form-wrapper select, form div.form-wrapper textarea {
        width: 100%;
        box-sizing: border-box;
        font-weight: normal;
        font-size: 1rem;
      }
      form div.form-wrapper textarea {
          height: 70px;
      }
      form.form p.error input {
        border-color: #8b0000;
      }
      form.form p.error .description {
        color: #3b3b3b;
      }
      /*
        6. Checkbox properties
      */
      form.form span.value {
        margin-left: 0!important;
      }
      form.form span.value span {
        margin-bottom: 5px;
        width: 100%;
        clear: both;
        display: block;
      }
      form.form span.value span label.inline {
        display: contents;
        font-weight: normal;
      }
      form.form p.no-label {
        margin-left: 0!important;
      }
      /*
        7. Submit Button properties
      */
      form.form div.form-wrapper p.submit {
        padding: 0 8px 0;
      }
      form.form p.submit {
        margin: 15px 0 0!important;
        font-weight: normal;
        width: 100%;
        clear: both;
        display: block;
        padding: 0 5px;
        margin-left: 0;
      }
      form.form p.submit input:not([type='checkbox']) {
        padding: 10px 12px;
        width: 100%;
      }          
      form.form p.submit input:not([type='checkbox']), form.form p.submit select {
        background-color: #0A8523;
        font-size: 1rem;
        font-family: 'Poppins';
        color: #FFFFFF;
        font-weight: 400;
        padding: 12px 20px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        display: table;
        margin: 0;
        text-decoration: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;  
        border: 0;      
      }
      form.form p.submit input:not([type='checkbox']):hover {
        color: #FFF;
        background: #00AA49;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;        
      }      
      /*
        8. Responsive properties
        Column classes will apply after 480px.
        Note: Smaller columns like oneThird(33.333%), and oneQuarter(25%) will resize to 50% for display porpuses
      */
      @media(min-width: 480px) {
        form.form div.form-wrapper.fullWidth {
          float: none;
          width: 100%;
          padding: 0 5px;
        }
        form.form div.form-wrapper.oneHalf, form.form div.form-wrapper.oneThird, form.form div.form-wrapper.oneQuarter {
          float: left;
          padding: 0 5px 0;
          width: 50%;
        }
        form.form p.submit input:not([type='checkbox']) {
          min-width: 140px;
          width: auto;
        }
      }
      @media(min-width: 768px) {
        form.form div.form-wrapper.oneHalf {
          width: 50%;
        }        
        form.form div.form-wrapper.oneThird {
          width: 33.333%;
        }
        form.form div.form-wrapper.oneQuarter {
          width: 25%;
        }
      }