/* General styles */

.custom_form {
  padding: 20px;
  box-sizing: border-box;
}

/* Fields */
.hs-form-field {
  height: fit-content;
  min-height: 54px;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */
form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%!important;
  margin: 0 auto;
}

form textarea {
  resize: vertical;
}

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

form fieldset > div {
  width: 100%;
}

/* SELECT */
.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 47px;
    cursor: pointer;
}

.custom-select--open {
    border: 1px solid #868a95;
}

.custom-select--open .custom-select__dropdown-icon {
    transform: rotate(180deg) translateY(25%);
}

.custom-select__dropdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 100%;
}

.custom-select__selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    color: #868a95;
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 170%;
    letter-spacing: 0.16px;
}

.custom-select__options {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;

    padding: 15px;

    display: none;
    flex-direction: column;

    border-radius: 7px;
    border: 1px solid #dcdfe8;
    background: #fff;
    box-shadow: 0px 194px 54px 0px rgba(20, 27, 57, 0), 0px 124px 50px 0px rgba(20, 27, 57, 0),
        0px 70px 42px 0px rgba(20, 27, 57, 0.02), 0px 31px 31px 0px rgba(20, 27, 57, 0.03),
        0px 8px 17px 0px rgba(20, 27, 57, 0.03);

    z-index: 1;
}

.custom-select__option {
    color: var(--Text-Primary, #0f1322);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 27.2px */
    letter-spacing: 0.16px;
    margin-bottom: 10px;
}

.custom-select__options--open {
    display: flex;
}

/* CHECKBOXES AND RADIO BUTTONS */

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

form .inputs-list > li > label {
  width: calc(100% - 30px);
  display: flex;
  align-items: center;
  gap: 10px;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  min-height: 50px;
  margin-right: 0.35rem;
  height: 22px!important;
  width: 22px!important;
  border: 1px solid #D0D4E1;
}

form input[type=checkbox]:hover,
form input[type=radio]:hover {
  border: 1px solid #141418;
}

form input[type=checkbox]:checked,
form input[type=radio]:checked {
  accent-color: #141418;
}

form input[type=radio] {
  border-radius: 50%;
}


/* DATE PICKER */

.pika-table {
  border-collapse: collapse;
  background-color: #FFF;
}

.hs-dateinput {
  position: relative;
  width: 100%;
  max-width: 315px;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  color: #868A95;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-lendar {
    float: left;
    width: 280px!important;
    margin: 8px;
}

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

.fn-date-picker td .pika-button {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: #FFF;
  color: #141418!important;
  font-size: 14px;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 100px;
  background: #141418!important;
  color: #FFF!important;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 100px!important;
  border: 1px solid #141418!important;
  background: #FFF!important;
  color: #141418!important;
}

/* FILE UPLOAD */

form input[type="file"] {
    display: none;
}

.custom-file-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 7px;
    border: 1px solid #dcdfe8;
    cursor: pointer;
    width: 90%;
}

.custom-file-input__text {
    color: #868a95;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 170%;
    letter-spacing: 0.16px;
}

.custom-file-input:hover .custom-file-input__text {
    color: #0f1322;
    text-decoration: underline;
}

/* Headings and text */

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

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

/* GDPR */

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

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

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

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 2px solid #141418;
  border-radius: 80px;

  margin-bottom: 20px;
  margin-top: 20px;

  transition: all 0.15s linear;
}

form input[type=submit]:hover,
form .hs-button:hover {
  background-color: #141418;
  color: #FFF;
  transition: all 0.15s linear;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}

{% if ( get_asset_version("@hubspot/search_input") == "1" ) %}
  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }
{% endif %}

.input input,
.input textarea { 
  height: 56px;
}

.field > label {
  position: relative;
  top: 8px;
  left: 20px;
  background: white;
  padding: 5px;
  z-index: 1;
}