@use '../0-tools/vars' as *;
// Target-X/FormAssembly STYLE OVERRIDES
// ================================================================================ //
//
//  FormAssembly uses some `!important`'s and they are needed where used
//
// ================================================================================ //

.targetx__wrapper {
  margin-top: -35px;
  z-index: -1;
}

// STYLE OVERRIDES TO TARGETX's STYLESHEET:
// ========================================

p.supportInfo {
  display: none; // Hides an empty paragraph that just makes the form longer
}

@media screen and (min-width: 1200px) {
  .wForm form > div.oneField {
    margin-top: 0 !important; // Makes the spacing between form questions tighter/closer-together
  }
}

@media screen and (min-width: 1800px) {
  .wForm form > div.oneField {
    margin-top: 10px !important; // Makes the spacing between form questions tighter/closer-together
  }
}

.wFormContainer {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

@media screen and (min-width: 1600px) {
  .wFormContainer {
    padding: 1rem 2rem !important;
  }
}

#tfa_11::before {
  display: block;
  content: " ";
  margin-top: -60px;
  height: 60px;
  visibility: hidden;
  pointer-events: none;
}

@media screen and (min-width: 1800px) {
  #tfa_775-D {
    margin-top: 5px !important;
  }
}

.oneField.field-container-D {  // Keeps dropdown selection boxes from going wider than other element's in the form
  max-width: 100%;
}

// Submit buttons always have the following ID.
#submit_button {  // YES, the `!important`'s are actually needed!
  background-color: #0051a7 !important;
  border-color: #003773 !important;
  font-family: $font-family-paragraph !important;
  font-weight: 400 !important;
  font-size: 1.25rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; // Same transitioning on buttons used in Bootstrap 4 styling
  &:hover {
    background-color: #022b55 !important;
    border-color: #021e3d !important;
  }
}