/*Styling the webform steps throughout the borrower application form*/
form.borrower-application .webform-progressbar {
  width: 25%;
  height: 400px;
  display: inline-block;
}

form.borrower-application .webform-progressbar .webform-progressbar-inner {
  display: none;
}

form.borrower-application .webform-progressbar .webform-progressbar-outer {
  border: none;
  height: inherit;
  left: 10px;
  top: 35px;
}

form.borrower-application .webform-progressbar .webform-progressbar-number {
    display: none;
}

form.borrower-application .webform-progressbar span.webform-progressbar-page {
  position: static;
  display: block;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px 0;
  border: 1px solid #63a541;
}

form.borrower-application .webform-progressbar span.webform-progressbar-page.checkedStep,
form.borrower-application .webform-progressbar span.webform-progressbar-page.current {
  border: none;
}

form.borrower-application .webform-progressbar span.webform-progressbar-page.current,
form.borrower-application .webform-progressbar span.webform-progressbar-page.completed {
  background-color: #63a541;
}

form.borrower-application .webform-progressbar .webform-progressbar-page .webform-progressbar-page-label {
  top: 4px;
  margin: 0;
  left: 40px;
  white-space: nowrap;
}

form.borrower-application .webform-progressbar span.webform-progressbar-page svg.checkedStep {
  height: 30px;
  width: 30px;
  left: -1px;
  top: -24px;
  position: relative;
  fill: #63a541;
  background: white;
}

.currentStep {
  color: #63a541;
  font-weight: bold;
}
/*Webform steps styles end*/

/*Left aligning all fieldset elements on each page of the forms*/
form.borrower-application fieldset.styleHook .form-wrapper,
form.pre-borrower-application fieldset.styleHook .form-wrapper {
  margin-left: 0;
  padding-left: 0;
}


/*Styling labels on input fields*/
form.borrower-application fieldset.styleHook .webform-component-fieldset label,
form.pre-borrower-application fieldset.styleHook .form-item label {
  font-size: 18px;
  line-height: 24px;
  color: #333333;
  font-weight: normal;
}

form.borrower-application fieldset.styleHook .webform-component-fieldset label.error,
form.pre-borrower-application fieldset.styleHook .form-item label.error {
  color: #9C021A;
}

/*Styling small descriptive text across the borrower application*/
form.borrower-application fieldset.styleHook div.description,
form.pre-borrower-application fieldset.styleHook div.description {
  line-height: 15px;
  padding: 5px 0;
}

/*Styling fieldset descriptions*/
form.borrower-application fieldset.styleHook .fieldset-description,
form.pre-borrower-application fieldset.styleHook .fieldset-description {
  font-size: 18px;
  line-height: 24px;
  color: #333333;
  font-weight: 300;
}

/*Bringing the radios and checkboxes closer together in both forms*/
form.borrower-application fieldset.styleHook .webform-component-fieldset .fieldset-wrapper .webform-component-radios .form-item,
form.borrower-application fieldset.styleHook .webform-component-fieldset .fieldset-wrapper .webform-component-checkboxes .form-item,
form.pre-borrower-application fieldset.styleHook .fieldset-wrapper .webform-component-checkboxes .form-item {
  height: 25px;
}

/*Setting the width of the labels within the contract step of the borrower application*/
form.borrower-application fieldset.styleHook .fieldset-wrapper .form-checkboxes label {
  width: 610px;
}

/*Removing up and down arrows from the zipcode input fields*/
form.borrower-application fieldset.styleHook .webform-component-fieldset .fieldset-wrapper .form-item input[type=number]::-webkit-inner-spin-button,
form.borrower-application fieldset.styleHook .webform-component-fieldset .fieldset-wrapper .form-item input[type=number]::-webkit-outer-spin-button,
form.pre-borrower-application fieldset.styleHook .fieldset-wrapper .form-item input[type=number]::-webkit-inner-spin-button,
form.pre-borrower-application fieldset.styleHook .fieldset-wrapper .form-item input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/*Adding padding to the right of dropdown selects to prevent overlap of text and dropdown arrow*/
form.borrower-application fieldset.styleHook .webform-component-fieldset .webform-component-select .form-select,
form.pre-borrower-application fieldset.styleHook .webform-component-select .form-select{
  padding-right: 25px;
}

/*These are removing the margin added by the .webform-component element on the application review page*/
/*This allows the progress image and the preview text to rest on top of one another.*/
form.borrower-application fieldset.styleHook .webform-component#webform-component-progress-image-page11 {
  margin-bottom: 0;
}

form.borrower-application fieldset.styleHook .webform-component#webform-component-profile-preview-text {
  margin-top: 0;
}

/*The following styles control the text along the top of the review page of the borrower application.*/
form.borrower-application fieldset.styleHook .webform-component .profile-preview-container {
  background-color: #efefef;
  display: inline-block;
  width: 100%;
}

form.borrower-application fieldset.styleHook .webform-component .profile-preview-container .application-preview-text {
  margin: 35px 40px;
}

form.borrower-application fieldset.styleHook .webform-component .profile-preview-container .button-wrap {
  margin: 20px 20px 0 0;
  float: right;
}

form.borrower-application fieldset.styleHook .webform-component .profile-preview-container .submit-button {
  font-size: 18px;
  font-weight: 500;
  width: 100%;
  line-height: 36px;
}

form.borrower-application fieldset.styleHook .webform-component .profile-preview-container .edit-button {
  width: 100%;
  height: 64px;
  line-height: 56px;
  font-weight: 500;
  font-size: 18px;
}

/*This is resizing the previous, upload you photo & remove buttons within pre-borrower-application & borrower-application form*/
form.borrower-application .form-wrapper .setting.resizeHook,
form.pre-borrower-application .form-actions input.resizeHook {
  height: 64px;
  font-size: 28px;
  line-height: 59px;
}

/*The following styles apply to the expandable sections of the borrower application*/
/*This is making collapsible sections look like the animated accordion from kiva.org*/
form.borrower-application fieldset.styleHook fieldset.help-text legend,
form.pre-borrower-application fieldset.styleHook fieldset.help-text legend {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
  padding: 10px 0;
}

form.borrower-application fieldset.styleHook fieldset.help-text .form-wrapper legend ,
form.pre-borrower-application fieldset.styleHook fieldset.help-text .form-wrapper legend {
  border-top: none;
}

form.borrower-application fieldset.styleHook fieldset.help-text .fieldset-title,
form.pre-borrower-application fieldset.styleHook fieldset.help-text .fieldset-title {
  font-size: 18px;
  font-family: PostGrotesk, Arial, Helvetica, Sans-Serif;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
  color: black;
}

form.borrower-application fieldset.styleHook .ac-dropdown-icon.collapsed-arrow,
form.pre-borrower-application fieldset.styleHook .ac-dropdown-icon.collapsed-arrow{
  float: right;
}

form.borrower-application fieldset.styleHook .ac-dropdown-icon.flipped-arrow,
form.pre-borrower-application fieldset.styleHook .ac-dropdown-icon.flipped-arrow {
  float: right;
  transform: rotate(180deg);
  height: 23px;
}

form.borrower-application fieldset.styleHook .ac-dropdown-icon.hide,
form.pre-borrower-application fieldset.styleHook .ac-dropdown-icon.hide {
  position: absolute !important;
  left: -9999px;
}

form.borrower-application fieldset.styleHook .ac-dropdown-icon svg.icon-small-chevron,
form.pre-borrower-application fieldset.styleHook .ac-dropdown-icon svg.icon-small-chevron {
  width: 30px;
  height: 25px;
}