/* HEADER */
.header {
  background: #fff;
  box-shadow: 0 0 1.25rem 0.938rem rgba(0, 0, 0, 0.05);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  z-index: 100000;
}
.header-min-height {
  min-height: 85vh;
}
.header-logo {
  width: 201px;
  top: 0.938rem;
  left: 1.188rem;
  position: absolute;
  transition: 2s ease;
}

.header-form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.form-wrapper {
  display: flex;
  width: 100%;
}

/* FORM CONTAINER */
.form-container {
  display: flex;
  flex-wrap: wrap;
}

html {
  overflow: hidden;
}

@media screen and (min-width: 480px) {
  #leftsidebar {
    width: 200px;
    float: left;
  }
  #main {
    margin-left: 216px;
  }
}

@media screen and (min-width: 768px) {
  #leftsidebar {
    width: 200px;
    float: left;
  }
  #main {
    margin-left: 216px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    overflow-y: auto;
  }
  .form-container label:not(.error) {
    font-size: 0.85rem;
    line-height: 1.813rem;
  }
  #step-2-buttons {
    left: 105%;
  }
}

@media screen and (min-width: 1200px) {
}

@media screen and (min-width: 1440px) {
}

@media screen and (min-width: 1600px) {
  .form-container label:not(.error) {
    font-size: 1rem;
    line-height: 1.813rem;
  }

  #step-2-buttons {
    right: -25%;
  }
}

@media screen and (min-width: 1920px) {
}

.form-container label:not(.error) {
  font-family: var(--av-medium);
  color: var(--extra-dark-blue);
  background: white;
  width: fit-content;
  height: fit-content;
  margin-top: -0.875rem;
  margin-left: 0.625rem;
  position: absolute;
  padding: 0 6px;
}
.form-container div.validation-error {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-family: var(--av-demi);
  letter-spacing: 0.01rem;
  line-height: 1.813rem;
  color: var(--extra-dark-blue);
  background: white;
  padding: 0 6px;
}
.form-container input {
  border-radius: 0.5rem;
  border: 0.188rem solid var(--light-slate);
  width: 100%;
  height: 3.75rem;
  font-size: 1.5rem;
  padding-left: 0.625rem;
  font-family: var(--av-medium);
  color: #232323;
  box-shadow: 0 0 0 1.875rem white inset !important;
  mix-blend-mode: normal;
  -webkit-box-shadow: 0 0 0 1.875rem white inset !important;
  width: 100%;
  border: 0.188rem solid var(--light-slate);
}

input[disabled] {
  background-color: red;
}

.form-container input:not(:disabled):hover {
  border: 0.188rem solid var(--blue);
}
.form-container input.disabled {
  color: var(--light-slate);
}
.form-container input.validation-error {
  border: 0.188rem solid var(--red);
}

.form-logo {
  width: 200px;
  height: 200px;

  background: #ffffff;

  box-shadow: 0px 0px 10px 10px rgba(150, 178, 186, 0.1);
  border-radius: 20px;
}
/* INPUTS */

input {
  outline: 0;
}

.input-set {
  margin-bottom: 16px;
}
.input-set-large {
  width: calc(100% - 1.875rem);
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.125rem;
  margin-left: 0.625rem;
}
input {
  outline: none;
}
.input-set-large input {
  outline: none;
  font-family: var(--av-medium);
}

.label {
  background: var(--blue);
  border-radius: 0.438rem;
  font-family: var(--av-medium);
  font-style: normal;

  font-size: 1.375rem;
  letter-spacing: 0.08em;
  font-variant: small-caps;
  color: #ffffff;
  width: fit-content;
  padding: 0rem 1.125rem;
  position: absolute;
  margin-top: -0.313rem;
  margin-left: -0.625rem;
  z-index: 10000000;
  float: left;
  line-height: 1.3;
  padding-bottom: 0.125rem;
}

/* BUTTONS */

.blue-button {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-family: var(--av-demi);
  border-radius: 2rem;
  min-width: 221px;
  font-size: 1.35rem;
  background-color: var(--blue) !important;
  color: white;
  transition: all 0.3s ease-in-out;
}

.blue-button:hover {
  background-color: var(--extra-dark-blue) !important;
}
.blue-button-small {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--av-demi);
  border-radius: 2rem;
  font-size: 1rem;
  line-height: 1;
  padding: 0.5rem 1rem;
  background-color: var(--blue) !important;
  color: white;
  transition: all 0.3s ease-in-out;
}

.blue-button-small:hover {
  background-color: var(--extra-dark-blue) !important;
}

.green-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--av-demi);
  border-radius: 2rem;
  letter-spacing: 0.05rem;
  font-size: 1.45rem;
  background-color: var(--light-green);
  color: white;
  transition: all 0.3s ease-in-out;
}
.green-button:hover {
  background-color: var(--dark-green);
}

.blue-button:disabled {
  color: white;
  opacity: 0.7;
  background-color: var(--light-slate) !important;
}

.blue-button #spinner_spinner {
  display: none;
}

.blue-button.loading-state:disabled {
  color: var(--extra-dark-blue);
  opacity: 1;
  background-color: transparent !important;
}
.blue-button.loading-state:disabled #spinner_spinner {
  display: block;
}

#spinner_spinner > div {
  border-color: var(--blue);
  border-top-color: transparent;
  margin-right: 1rem;
}

.centered_spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -85%) !important;
}

.centered_spinner > div {
  border-color: var(--blue);
  border-top-color: transparent;
}

/* STEPPER */
.step-app > .step-content {
  border: none !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.step-app > .step-footer {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
}
.step-app > .step-footer > .step-btn {
  background-color: var(--blue) !important;
  font-family: var(--av-demi);
  border-radius: 2rem !important;
  width: 221px;
  height: 55px;
  font-size: 1.125rem !important;
  color: white !important;
  margin-left: 2rem !important;
}
.step-app > .step-steps {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
}
.step-app > .step-steps > li {
  font-family: var(--av-demi);
  text-align: center !important;
}

.step-app > .step-steps > li.done {
  background-color: var(--green) !important;
}

.step-app > .step-steps > li.active {
  background-color: var(--blue) !important;
}

/* jQueryUI overrides */
.ui-slider-handle {
  top: -0.7rem !important;
  height: 2rem !important;
  width: 2rem !important;
  background: var(--blue) !important;
  border: none !important;
  border-radius: 50% !important;
  outline: none !important;
}

.ui-slider {
  background: var(--extra-light-slate) !important;
  border: none !important;
}

/* Transitions and animations */

.blurred-background {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  border: none;
  top: 0;
  padding: 0 !important;
  margin: 0 !important;

  backdrop-filter: blur(4px);
  z-index: 88888;
}

#step2-edit-icon path,
#step3-edit-icon path {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  fill: var(--light-slate);
}

#link-icon path {
  transition: all 0.3s ease-in-out;
  fill: var(--light-slate);
  color: var(--light-slate);
}

.text-underline {
  text-decoration: underline;
}

#edit-icon-wrapper:hover #step2-edit-icon path {
  fill: var(--extra-dark-blue);
}
#edit-icon-wrapper:hover #step3-edit-icon path {
  fill: var(--extra-dark-blue);
}

#edit-icon-wrapper:hover #link-icon path {
  fill: var(--extra-dark-blue);
}

#edit-icon-wrapper:hover {
  transition: all 0.3s ease-in-out;
  background: var(--crazy-light-slate);
}

/* Tippy "tooltip" overrides */

.tippy-popper.responsify-theme {
}

.tippy-tooltip.responsify-theme {
  border-radius: 5px;
  background: var(--white-white, #fff);

  /* drop-shadow-surface-item */
  box-shadow: 0px 0px 7px 7px rgba(132, 132, 132, 0.05);
  color: var(--extra-dark-blue);
  font-family: var(--av-medium);
}

.tippy-tooltip.responsify-theme[data-placement^="top"] .tippy-arrow {
  border-top-color: white;
}
.tippy-tooltip.responsify-theme[data-placement^="bottom"] .tippy-arrow {
  border-bottom-color: white;
}
.tippy-tooltip.responsify-theme[data-placement^="left"] .tippy-arrow {
  border-left-color: white;
}
.tippy-tooltip.responsify-theme[data-placement^="right"] .tippy-arrow {
  border-right-color: white;
}

#service-level-slider {
  position: relative;
  z-index: 77777;
}

.blur-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  padding: 1rem;
  margin: 0 !important;
  box-shadow: 0px 5px 10px 5px #9acede45;
  background: white;
  border-radius: 10px;
}

.blur-message > div {
  display: flex;
  color: var(--extra-dark-blue);
  font-family: var(--av-medium);
}

#prospect_domain_favicon_wrapper {
  box-shadow: 0px 0px 10px 10px #96b2ba1a;
  border-radius: 20px;
}

.validation-success + div {
  opacity: 0;
}
.validation-error + div {
  opacity: 1;
}

#budget_column,
#website_performance_metrics_column,
#competitor_websites_column {
  box-shadow: 0px 0px 10px 10px #96b2ba1a;
  border-radius: 20px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Styles for smaller screens */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  #smallScreenMessage {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: fixed; /* Position it over all other content */
    top: 0; /* Stretch from the top */
    left: 0; /* Stretch from the left */
    right: 0;
    bottom: 0;
    width: 100vw; /* Take full viewport width */
    height: 100vh; /* Take full viewport height */
    font-family: var(--av-medium);

    background-color: rgba(128, 128, 128, 0.713);
    backdrop-filter: blur(10px);
    color: var(
      --extra-dark-blue
    ); /* Set text color to black, you can customize this */
    font-size: 24px; /* Adjust text size as needed */
    z-index: 999999; /* Ensure it displays over other elements */
  }
}

#budget_background_bar {
  background: var(--extra-light-slate);
}

#budget_high_average_bar {
  background: #c0d5dc;
}

.budget_arrow_down {
  width: 0;
  height: 0;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;

  border-top: 0.8rem solid var(--extra-dark-blue);
}

.budget_arrow_top {
  width: 0;
  height: 0;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;

  border-bottom: 0.8rem solid var(--extra-dark-blue);
}

.tooltiptext {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

#call_to_action_section {
  border-radius: 20px;
  background-image: url(../jpg/call-to-action-bg.jpg);
  height: 41vh;
  max-height: 410px;

  background-position: center;
  background-size: cover;
}

#call_to_action_text {
  line-height: 64px;
}

.override_dot {
  position: absolute;
  top: 0;
  right: -10px;

  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--extra-light-slate);
}