/* Main site color: #21c087 */

body {
  background: #fafafa;
  color: #333333;
  margin-top: 0vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #444444;
}

ul {
  margin: 0;
}

.bg-steel {
  background-color: #21c087;
}

.site-header .navbar-nav .nav-link {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: .52vw;
  1.04vw;
  border: .052vw solid #dddddd;
  border-radius: .156vw;
  margin-bottom: 1.04vw;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 3.39vw;
  width: 3.39vw;
  margin-right: .833vw;
}

.article-metadata {
  padding-bottom: .052vw;
  margin-bottom: .21vw;
  border-bottom: .052vw solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 1.3vw;
  height: 1.3vw;
  vertical-align: middle;
}

.account-img {
  height: 6.51vw;
  width: 6.51vw;
  margin-right: 1.04vw;
  margin-bottom: .833vw;
}

.account-heading {
  font-size: 2.08vw;
}

.col-md-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 80%;
  max-width: 80%;
}

.error {
  color: red;
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.red {
  color: red;
}

.outline-info {
  color: #21c087;
  display: inline-block;
  border: .104vw solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  padding: .25vw .625vw;
  font-size: .833vw;
  line-height: 1.5;
  border-radius: 1.04vw;
  background-color: #ffffff;
  border-color: #21c087;
}

.outline-info a {
  color: black;
}

.btn {
  display: inline-block;
  font-weight: 525;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: .104vw solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  padding: .5vw 1.25vw;
  font-size: .833vw;
  border-radius: 1.25vw;
  line-height: 1.25;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-narrow {
  display: inline-block;
  font-weight: 525;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: .104vw solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  padding: .25vw .625vw;
  font-size: .833vw;
  border-radius: 1.25vw;
  line-height: 1.25;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-outline-info {
  color: #21c087;
  background-color: #ffffff;
  border-color: #21c087;
}

.btn-outline-info-full-width {
  color: #21c087;
  background-color: #ffffff;
  border-color: #21c087;
  width: 100%;
}

.btn-outline-info-round {
  color: #21c087;
  background-color: #ffffff;
  border-color: #21c087;
  border-radius: 50%;
  padding: .625vw;
  min-width: 2.71vw;
  min-height: 2.71vw;
}

.btn-outline-info:hover,
.btn-outline-info-full-width:hover,
.btn-outline-info-solid {
  color: #ffffff;
  background-color: #21c087;
  border-color: #ffffff;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

*,
::after,
::before {
  box-sizing: none;
}

#status-buttons,
#status-buttons-4 {
  position: relative;
  /* 1 */
  border-radius: 0%;
  display: flex;
  justify-content: space-evenly;
}

#status-buttons a,
#status-buttons-4 a {
  color: #21c087;
  display: inline-block;
  fon-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: .73vw;
  font-weight: strong;
  margin-right: 0;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  max-width: 2.6vw;
}

#status-buttons a:hover,
#status-buttons-4 a:hover {
  text-decoration: none;
}

#status-buttons a.active span,
#status-buttons-4 a.active span {
  color: white;
  background: #21c087;
  /* box-shadow: rgba(0, 0, 0, 0.792157) .156vw .156vw .156vw 0; */
}

#status-buttons::after {
  /* 3 */
  content: "";
  position: absolute;
  width: 73%;
  z-index: -1;
  /* 4 */
  top: 35%;
  left: 15%;
  border: .104vw solid #e8e8e8;
  /* gray line between survey workflow items */
}

#status-buttons-4::after {
  /* 3 */
  content: "";
  position: absolute;
  width: 60%;
  z-index: -1;
  /* 4 */
  top: 35%;
  left: 20%;
  border: .104vw solid #e8e8e8;
  /* gray line between survey workflow items */
}

#status-buttons span,
#status-buttons-4 span {
  color: black;
  font-size: 1.04vw;
  align: center;
  background: #e8e8e8;
  display: block;
  min-width: 2.6vw;
  margin: .52vw;
  auto .52vw;
  padding: .52vw;
  .52vw;
  .52vw;
  .52vw;
  border-radius: 50%;
  /* box-shadow: rgba(0, 0, 0, 0.792157) .156vw .156vw .156vw 0; */
}


.surv-title {
  color: var(--universal--black--000000);
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-ml);
  font-weight: 400;
}

.surv_group_name {
  font-size: 1.09vw;
  font-weight: 510;
}

.surv_review_table_row {
  border-bottom: .052vw solid var(--light-gray);
}

.surv_review_col_header {
  color: var(--universal--black--000000);
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.ques_text {
  color: var(--universal--black--000000);
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.emoji {
  font-size: 1.2vw;
}

.emoji_text {
  color: var(--main-gray-text);
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.riasec-button {
  display: inline-block;
  font-weight: 525;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: .104vw solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  padding: .25vw .625vw;
  font-size: .833vw;
  line-height: 1.5;
  border-radius: 1.04vw;
  width: 8.33vw;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.riasec-href {
  color: black;
}

.riasec-realistic {
  background-color: var(--riasec-realistic-color);
}

.riasec-investigative {
  background-color: var(--riasec-investigative-color);
}

.riasec-artistic {
  background-color: var(--riasec-artistic-color);
}

.riasec-social {
  background-color: var(--riasec-social-color);
}

.riasec-enterprising {
  background-color: var(--riasec-enterprising-color);
}

.riasec-conventional {
  background-color: var(--riasec-conventional-color);
}

/* The popup form - hidden by default */
.popup-base {
  display: none;
  border: .156vw solid #f1f1f1;
  border-radius: 1.04vw;
  z-index: 9;
  background-color: white;
  text-align: left;
  padding: .52vw;
  .52vw;
  .52vw;
  .52vw;
  overflow: auto;
  max-height: calc(100% - 3.125vw);
}

.info-popup {
  width: calc(100% - 3.125vw);
}

.edit-popup {
  width: calc(100% - 25vw);
  border: .125vw solid #1757c6;
}

.popup-position-page-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -85%);
}

.popup-position-where-clicked {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.info-popup-button {
  text-align: right;
}

/* Add styles to the form container */
.info-container {
  max-width: 15.625vw;
  padding: .52vw;
  background-color: white;
}

#popup-title {
  color: var(--universal--black--000000);
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

#info-popup-msg {
  color: var(--main-gray-text);
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

/* The popup form - hidden by default */
.video-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* opacity: 1.0; */
  border: .156vw solid #f1f1f1;
  border-radius: 1.04vw;
  z-index: 9;
  background-color: white;
  text-align: left;
  padding: .52vw;
  .52vw;
  .52vw;
  .52vw;
  overflow: auto;
  z-index: 9999;
}

.video-popup-button {
  text-align: right;
}

.video-popup-player {
  height: 80vh;
  width: 80vw;
}


.grayout {
  background-color: #dedede
    /* color */
}

.job_zone {
  font-size: .94vw;
  font-weight: 600;
}

.matching_career_best_fit {
  color: #ffac2a;
}

.matching_career_great_fit {
  color: #21c087;
}

.matching_career_bright_outlook {
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-s);
  color: #ffac2a;
}

.matching_career_bright_outlook a {
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-s);
  color: #ffac2a;
}

.black_border_and_bold {
  border: .156vw solid black;
  font-weight: 600;
  color: black;
}

.onet_credit {
  font-size: .52vw;
}

.info_circle {
  display: inline-block;
  width: .885vw;
  height: .885vw;
  border: 1px solid;
  border-radius: 50%;
  border-color: var(--main-site-color);
  font-family: var(--font-family-mreaves_xl_mod_ot-reg);
  font-size: var(--font-size-xs);
  text-align: center;
  vertical-align: super;
}

.info_circle::after {
  content: "i";
}

.main-section {
  position: relative;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  padding-top: 0vw;
}

.main-section-outer-table {
  position: relative;
  border: 0vw solid red;
  margin: 0vw;
}

.subcontent-table {
  position: relative;
  margin-top: 2.5vw;
}

@media only screen and (max-width: 999px) {

  .btn,
  .btn-outline-info-solid {
    font-size: var(--font-size-s);
    padding: var(--padding-space-xs) var(--padding-space-ml);
  }

  .onet_credit {
    font-size: var(--font-size-s);
  }

  #status-buttons a,
  #status-buttons-4 a {
    max-width: 4vw;
    position: relative;
    left: -2vw;
    font-size: var(--font-size-m);
  }

  #status-buttons a span,
  #status-buttons-4 a span {
    font-size: var(--font-size-m);
    min-width: var(--font-size-l);
    position: relative;
    left: 1vw;
  }

  .job_zone {
    font-size: var(--font-size-m);
    line-height: var(--font-size-l);
  }

}

@media only screen and (max-width: 600px) {

  #status-buttons a span,
  #status-buttons-4 a span {
    left: 2vw;
  }

  .btn {
    font-size: var(--font-size-m);
    padding: var(--padding-space-xs) var(--padding-space-ml);
  }

  .ques_text {
    font-size: var(--font-size-m);
    line-height: var(--font-size-ml);
  }

  .custom-job-zone-btn {
    font-size: var(--font-size-s);
    padding: 1vw;
    width: 30vw;
    white-space: break-spaces;
  }

  .outline-info {
    font-size: var(--font-size-ml);
    padding: 1vw 2vw;
  }

  .outline-info .btn-outline-info-round {
    padding: 1vw 1.5vw;
    margin-top: -0.5vw;
  }

  .error {
    font-size: var(--font-size-l);
  }

  .survey-results .surv_review_col_header {
    font-size: var(--font-size-mml);
    line-height: var(--font-size-l);
  }
}

.error-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 30vh;
  width: 100%;
  z-index: 5;
}