/*--------------------------------------------------------------
# PAGES

Styles for pages of website
If it's specifi to an only page - please add a custom page stylesheet

--------------------------------------------------------------*/

.page-template-diagnostic .content-area {
  background: var(--bright);
}

.diagnostic img {
  display: block;
}

.card-info.digiforma-card-grid-card-info {
  color: var(--text-color);
}

@media (min-width: 1024px) {
  .diagnostic {
    display: flex;
    align-items: center;
  }

  .diagnostic > div {
    width: 50%;
  }

  .diagnostic-container {
    max-width: 720px;
    padding: 110px;
  }
}

.diagnostic .gform_fields {
  margin: 64px 0 !important;
}

.diagnostic .gform_fields .gfield--type-select {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.diagnostic .gform_fields .gfield--type-select > div {
  width: 50%;
}

.diagnostic .gform_fields .gfield--type-select label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 !important;
}

.diagnostic .ginput_container_select select {
  background: var(--bright);
  padding: 16px;
  font-weight: 400;
  color: var(--text-color);
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  padding: 0 16px !important;
  border: none !important;
  box-shadow: none !important;
}

.diagnostic .ginput_container_select select:hover,
.diagnostic .ginput_container_select select:focus {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.ginput_container_select {
  position: relative !important;
}

.ginput_container_select:before {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 3px);
  right: 16px;
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23414648' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
}

.ginput_container_select::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-color);
}

.diagnostic .gform-theme--framework .gf_progressbar .percentbar_blue {
  background: var(--accent-color) !important;
}

.graduate .diagnostic .gform-theme--framework .gf_progressbar .percentbar_blue,
.graduate .ginput_container_select::after {
  background: linear-gradient(
    to right,
    var(--second-graduate-color-primary),
    var(--second-graduate-color-secondary)
  ) !important;
}

.gform-page-footer input {
  margin: 0 auto !important;
  background: var(--accent-color) !important;
  color: var(--white) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
}

.diagnostic legend {
  text-align: center !important;
  font-size: 20px !important;
  line-height: 35px !important;
  color: var(--accent-color) !important;
  font-weight: 600 !important;
  margin-bottom: 24px !important;
}

.diagnostic .gfield_checkbox input[type="checkbox"] {
  display: none !important;
}

.diagnostic .gfield_checkbox label {
  margin-left: 32px !important;
  position: relative;
  cursor: pointer;
}

.diagnostic .gfield_checkbox label:before {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  position: absolute;
  left: -32px;
  top: calc(50% - 8px);
  content: "";
  background: var(--accent-color);
}

.diagnostic .gfield_checkbox input[type="checkbox"]:checked + label:before {
  background: var(--secondary-color);
}

.graduate
  .diagnostic
  .gfield_checkbox
  input[type="checkbox"]:checked
  + label:before {
  background: linear-gradient(
    to right,
    var(--second-graduate-color-primary),
    var(--second-graduate-color-secondary)
  );
}

.diagnostic .gfield_checkbox label:after {
  content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  left: -32px;
  top: calc(50% - 8px);
  background: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3327 1.5L4.99935 8.83333L1.66602 5.5' stroke='%23FBF9FC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: 10px;
  opacity: 0;
}

.diagnostic .gfield_checkbox input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.diagnostic .gfield {
  position: relative !important;
}

.diagnostic .gfield_description {
  position: absolute !important;
  bottom: -40px !important;
  left: 0 !important;
}

.diagnostic .gfield--type-email,
.diagnostic .gfield--type-text {
  display: flex !important;
  justify-content: space-between !important;
  gap: 32px !important;
  align-items: center !important;
}

.diagnostic .gfield--type-email .ginput_container,
.diagnostic .gfield--type-text .ginput_container {
  flex: 2;
}

.diagnostic .gfield--type-email label,
.diagnostic .gfield--type-text label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-color) !important;
  margin: 0 !important;
}

.diagnostic .gfield--type-email .ginput_container input,
.diagnostic .gfield--type-text .ginput_container input {
  background: var(--white) !important;
  padding: 16px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--text-color) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.diagnostic .gform_confirmation_wrapper ul li {
  list-style: none !important;
  font-size: 20px !important;
  line-height: 36px !important;
  font-weight: 400 !important;
  color: var(--text-color) !important;
  padding-left: 64px !important;
  position: relative !important;
}

.diagnostic .gform_confirmation_wrapper ul li:before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  top: calc(50% - 10px);
  border-left: 10px solid var(--accent-color);
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
}

.diagnostic .gform_confirmation_wrapper {
  font-size: 16px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: var(--text-color) !important;
}

.diagnostic .gform_confirmation_wrapper a {
  font-weight: 600 !important;
}

@media (max-width: 1024px) {
  .diagnostic-container {
    padding: 64px 30px;
  }
}