
/* Form */

form {
  font-family: Inter, sans-serif;

}

.hs-form-field {
  margin-bottom: 40px;
}

/* Labels */

form label {
  color: #23282B;
  display: block;
  font-size: .9em;
  font-weight:400;
  padding-top: 0;
  margin-bottom: 10px;
  text-align: left;
  width: auto;
}

/* Help text - legends */

form legend {
  color: #667B8A;
  font-size: 0.8em;
  line-height:1.5em;
  margin-bottom:10px;
}

.hs-form-required {
   -webkit-appearance: none;
    display: none;
}



/* Inputs */

.input {
  position: relative;

}

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=file],
textarea {
  background-color: #FFF;
  border: 1px solid #C6CFD7;
  border-radius: 4px;
  color: #23282B;
  display: inline-block;
  font-size: 1em;
  padding: 0.7rem;
  width: 100%;
    -webkit-appearance: none;
 
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=file]:focus,
textarea:focus {
  outline-color: #23282B;
}

fieldset {
  max-width: 100% !important;
}

::-webkit-input-placeholder {
  color: #C6CFD7;
}

::-moz-placeholder {
  color: #C6CFD7;
}

:-ms-input-placeholder {
  color: #C6CFD7;
}

:-moz-placeholder {
  color: #C6CFD7;
}

::placeholder {
  color: #C6CFD7;
}



/* SELECT */




select {
  background-color: #FFF;
  border: 1px solid #C6CFD7;
  border-radius: 4px;
  color: #33475B;
  display: inline-block;
  font-size: 1em;
  padding: 0.7rem;
  width: 100%;

  /*   reset */

  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;



  /* arrows */

  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select:focus {
  outline-color: #23282B;

  /* arrows */

  background-repeat: no-repeat;
  border-color: #23282B;
  outline: 0;
}

/* SELECT ENDS */

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.inputs-list > li {
  display: block;
  margin: 0.7rem 0;
  padding: 0;
  width: 100%;
}

/* Checkboxes labels font size */
.inputs-list input,
.inputs-list span {
  font-size: 1em;
  vertical-align: middle;
}

.hs-input[type=checkbox],
.hs-input[type=radio] {
  border: none;
  cursor: pointer;
  height: auto;
  line-height: normal;
  margin-right: 0.35rem;
  padding: 0;
  width: auto;
} 


/* CHECKBOXES */


.hs-form-checkbox {
    margin-bottom: 1em;
   
    }

.hs-input[type=checkbox] {
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    
    
}
.hs-form-checkbox-display span,
.hs-form-booleancheckbox-display span{
  cursor: pointer;
    display: block;
    padding-left: 2.5em;
    margin-bottom:1.4em;
    font-family:Inter, sans-serif;
    line-height:1.4em;
    background-image: url(https://statics.jolt.us/assets/_general/web/Img/checkbox-off.svg);
    background-repeat: no-repeat;
    
}

.hs-form-checkbox-display span span,
.hs-form-booleancheckbox-display span span{
  
    display: none;
      
}

input:checked + span  {
    background-image: url(https://statics.jolt.us/assets/_general/web/Img/checkbox-on.svg);
}

input:disabled + span  {
    background-image: url(https://statics.jolt.us/assets/_general/web/Img/checkbox-off-disabled.svg);
}


input:checked:disabled + span  {
    background-image: url(https://statics.jolt.us/assets/_general/web/Img/checkbox-on-disabled.svg);
}

/* CHECKBOXES ENDS */


/* Inputs - datepicker */

.hs-fieldtype-date .input .hs-dateinput:before {
  color: #33475B;
  content:'\01F4C5';
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-today .pika-button {
  color: #343A40;
}

.fn-date-picker td.is-selected .pika-button {
  background: #343A40;
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover {
  background-color: #343A40 !important;
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

input[type=file] {
  background-color: transparent;
  border: initial;
  box-shadow: none;
  line-height: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 1em;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

form .header {
  background-color: transparent;
  border: none;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  font-size: 0.8em;
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #23282B;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  font-size: 0.8em;
  color: #EC305D;
  margin-top: 10px;
}

/* Submit button */


form input[type=submit],
.hs-button {
  font-family: Plus Jakarta Sans;
  background-color: #FFD400;
  border: 1px solid #FFD400;
  border-radius: 5px;
  color: #23282B;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  height: auto;
  line-height: 1.1;
  margin: 0px 0px 10px 0px;
  padding: 16px 40px;
  position: relative;
  text-align: center;
{# default "Get Free Widget" form (renders when no form is passed to the form HubL tag) is an anchor (a.hs-button) rather than a real input, so it needs explcit css to avoid link styling #}
  text-decoration: none;
  transition: all 0.15s linear;
  white-space: normal;
  width: auto;
  word-break: break-word;
  -webkit-appearance: none;
  -moz-appearance: none;
  

  
}

form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
  background-color: #FFDF40;
  border-color: #FFDF40;
{# see "no form selected" note above #}
  color: #FFF;
}

form input[type=submit]:active,
form .hs-button:active {
  background-color: #FFD400;
  border-color: #1FA4A2;
{# see "no form selected" note above #}
  color: #FFF;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}

/* Checkbox list containert */
form .multi-container  {
  margin-top: 50px;
}

.hs-button.calendly {
  background-color: #f2f2f2;
  border-width: 0px;
  color: #667B8A;
  font-weight: 400;
  margin-top: 20px;

}

/* Custom Job Dropdown */
.ant-input-affix-wrapper-focused {
border: 1px solid #C6CFD7 !important;
outline: auto;
}