/**
 * Self-assessment tool styling, ported from the legacy WordPress theme.
 *
 * Everything here is scoped under .mental-health-tool-section so it cannot
 * leak into the rest of the site / the new design system. The legacy
 * bootstrap.min.css + style.css were loaded unscoped before this and
 * collided with the new design system (e.g. both defined a global .row),
 * which is why they were replaced with this targeted file.
 */

/* Minimal Bootstrap 3 primitives actually used by the tool markup. */
.mental-health-tool-section .container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.mental-health-tool-section .row {
  margin-right: -15px;
  margin-left: -15px;
}

.mental-health-tool-section .row:before,
.mental-health-tool-section .row:after {
  display: table;
  content: " ";
}

.mental-health-tool-section .row:after {
  clear: both;
}

.mental-health-tool-section .col-sm-12,
.mental-health-tool-section .col-sm-6 {
  position: relative;
  float: left;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.mental-health-tool-section .col-sm-12 {
  width: 100%;
}

.mental-health-tool-section .col-sm-6 {
  width: 50%;
}

.mental-health-tool-section .text-center {
  text-align: center;
}

.mental-health-tool-section .text-right {
  text-align: right;
}

.mental-health-tool-section .pull-left {
  float: left !important;
}

.mental-health-tool-section .pull-right {
  float: right !important;
}

.mental-health-tool-section .hide {
  display: none !important;
}

.mental-health-tool-section legend {
  padding: 0;
  margin: 0;
  border: none;
}

.mental-health-tool-section .nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.mental-health-tool-section .nav > li {
  position: relative;
  display: block;
}

.mental-health-tool-section .nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.mental-health-tool-section .nav-pills > li {
  float: left;
}

.mental-health-tool-section .nav-pills > li > a {
  border-radius: 4px;
}

.mental-health-tool-section .nav-pills > li + li {
  margin-left: 2px;
}

.mental-health-tool-section .nav-pills > li.active > a,
.mental-health-tool-section .nav-pills > li.active > a:focus,
.mental-health-tool-section .nav-pills > li.active > a:hover {
  color: #fff;
  background-color: #337ab7;
}

.mental-health-tool-section .list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}

.mental-health-tool-section .list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

.mental-health-tool-section .list-unstyled {
  padding-left: 0;
  list-style: none;
}

.mental-health-tool-section .fade {
  opacity: 0;
  transition: opacity .15s linear;
}

.mental-health-tool-section .fade.in {
  opacity: 1;
}

.mental-health-tool-section .tab-content > .tab-pane {
  display: none;
}

.mental-health-tool-section .tab-content > .active {
  display: block;
}

.mental-health-tool-section .radio,
.mental-health-tool-section .radio-inline {
  position: relative;
  padding-left: 20px;
}

.mental-health-tool-section .radio-inline {
  display: inline-block;
}

.mental-health-tool-section .radio.radio-inline {
  margin-top: 0;
}

.mental-health-tool-section .radio.radio-inline label {
  padding-left: 10px;
}

/* Native radio input is invisible; the circle + fill dot are drawn via the
 * label's ::before/::after so the checked state can be styled. */
.mental-health-tool-section .radio input[type="radio"] {
  opacity: 0;
}

.mental-health-tool-section .radio input[type="radio"]:focus ~ label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.mental-health-tool-section .radio input[type="radio"]:checked ~ label::after {
  transform: scale(1, 1);
}

.mental-health-tool-section .radio input[type="radio"]:disabled ~ label {
  opacity: .65;
}

.mental-health-tool-section .radio input[type="radio"]:disabled ~ label::before {
  cursor: not-allowed;
}

.mental-health-tool-section .radio label {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  padding-left: 40px;
}

.mental-health-tool-section .radio label span {
  position: absolute;
  top: 0;
  left: 15px;
  height: 100%;
  background: #fff;
}

.mental-health-tool-section .radio label::before,
.mental-health-tool-section .radio label::after {
  display: inline-block;
  margin-left: -20px;
  border-radius: 50%;
  content: "";
}

.mental-health-tool-section .radio label::before {
  position: absolute;
  top: 5px;
  left: 0;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 1px solid #757575;
  transition: border .15s ease-in-out;
}

.mental-health-tool-section .radio label::after {
  position: absolute;
  top: 8px;
  left: 3px;
  width: 12px;
  height: 12px;
  background-color: #230050;
  transform: scale(0, 0);
  transition: transform .1s ease-in-out;
}

.mental-health-tool-section .form-group {
  margin-bottom: 15px;
}

.mental-health-tool-section .form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

/* Legacy visual skin (colors, icons, fonts), already scoped to this section
 * in the original theme's style.css. Re-created here so we don't have to
 * load the entire 220KB legacy stylesheet (which also contained several
 * unscoped global selectors, e.g. body/a/legend, that bled into the rest
 * of the page).
 */
.mental-health-tool-section .content-title,
.mental-health-tool-section .tab-content .content-title {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0;
  color: #230050;
  font-family: overpassbold, sans-serif;
}

.mental-health-tool-section .content-sub-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: #230050;
  font-family: overpassbold, sans-serif;
}

.mental-health-tool-section .border-bottom {
  position: relative;
}

.mental-health-tool-section .border-bottom:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #e0e2f3;
}

.mental-health-tool-section .tab-content ul {
  padding-left: 17px;
  margin-bottom: 0;
}

.mental-health-tool-section .tab-content ul li {
  position: relative;
  margin-bottom: 5px !important;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: .36px;
  color: #230050;
  font-family: noto_sansregular, sans-serif;
}

.mental-health-tool-section .tab-content .radio {
  padding-left: 10px;
  position: static;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: .36px;
  color: #230050;
  font-family: noto_sansregular, sans-serif;
}

.mental-health-tool-section .tab-content .radio label {
  padding-left: 35px;
}

.mental-health-tool-section .tab-content .radio label span {
  left: 10px;
}

.mental-health-tool-section .tab-content .radio-inline {
  position: relative;
}

.mental-health-tool-section .tab-content .radio.radio-inline label {
  padding-left: 10px;
  margin-right: 10px;
}

.mental-health-tool-section .tab-content .form-control {
  height: 52px;
  padding: 12px;
  border: 1px solid #e0e2f3;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: none;
}

.mental-health-tool-section .tab-content .form-control::placeholder {
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0;
  color: #757575;
  font-family: noto_sansregular, sans-serif;
}

.mental-health-tool-section .tab-content .cancel-btn-view a,
.mental-health-tool-section .tab-content .cancel-btn-view button {
  display: block;
  border: none;
  background: none;
}

.mental-health-tool-section .tab-content .cancel-btn-view span.link-text {
  float: left;
  padding: 30px 35px 3px 0;
  margin-right: 5px;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0;
  color: #fa3c4b;
  border-bottom: 1px solid #fa3c4b;
  font-family: noto_sansitalic, sans-serif;
  text-transform: uppercase;
}

.mental-health-tool-section .tab-content .cancel-btn-view span.arrow-bg {
  display: table-cell;
  width: 69px;
  height: 69px;
  font-size: 42px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  background: #fa3c4b;
  border: 1px solid #fa3c4b;
}

.mental-health-tool-section .tab-content .finish-btn {
  margin-left: 20px;
  padding-left: 40px;
  border-left: 1px solid #fa3c4b;
}

.mental-health-tool-section .tab-content .finish-btn a {
  border: none;
}

.mental-health-tool-section .container-wrap {
  margin: 50px 0;
  background-color: #1e2dbe;
}

.mental-health-tool-section .container-wrap h2 {
  color: #fff;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 0;
  font-family: overpassbold, sans-serif;
}

.mental-health-tool-section .container-wrap .nav-pills li {
  display: inline-block;
  float: none;
  padding: 10px 0 20px 0;
  margin: 0 40px;
  pointer-events: none;
}

@media (min-width: 320px) and (max-width: 767px) {
  .mental-health-tool-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mental-health-tool-section .container-wrap .nav-pills li {
    margin: 0 10px;
  }

  .mental-health-tool-section .container-wrap .nav-pills li:before {
    left: 50px;
  }
}

.mental-health-tool-section .container-wrap .nav-pills li a {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: 0 0;
  cursor: default;
}

.mental-health-tool-section .container-wrap .nav-pills li a:focus,
.mental-health-tool-section .container-wrap .nav-pills li a:hover {
  background-color: transparent;
}

.mental-health-tool-section .container-wrap .nav-pills li:before {
  content: " ";
  position: absolute;
  top: 15px;
  left: 80px;
  width: 18px;
  height: 34px;
  background-image: url(../images/svg_icons/arrow_next_icon.svg);
  background-repeat: no-repeat;
  background-position: right 50%;
}

.mental-health-tool-section .container-wrap .nav-pills li:last-child:before {
  background: none;
}

.mental-health-tool-section .container-wrap .nav-pills li.active:after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -20px;
  border: solid transparent;
  border-width: 20px;
  border-color: rgba(36, 78, 111, 0);
  border-top-color: #1e2dbe;
  pointer-events: none;
}

.mental-health-tool-section .container-wrap .nav-pills li.active a {
  background-color: transparent;
}

.mental-health-tool-section .container-wrap .nav-pills li .icon-1 {
  background-image: url(../images/svg_icons/stay_round_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li .icon-2 {
  background-image: url(../images/svg_icons/mental_health_round_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li .icon-3 {
  background-image: url(../images/svg_icons/stigma_awar_round_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li .icon-4 {
  background-image: url(../images/svg_icons/training_round_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li .icon-5 {
  background-image: url(../images/svg_icons/mental_accom_round_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.active .icon-1 {
  background-image: url(../images/svg_icons/stay_yellow_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.active .icon-2 {
  background-image: url(../images/svg_icons/mental_health_yellow_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.active .icon-3 {
  background-image: url(../images/svg_icons/stigma_awar_yellow_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.active .icon-4 {
  background-image: url(../images/svg_icons/training_yellow_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.active .icon-5 {
  background-image: url(../images/svg_icons/mental_accom_yellow_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.completed .icon-1 {
  background-image: url(../images/svg_icons/stay_white_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.completed .icon-2 {
  background-image: url(../images/svg_icons/mental_health_white_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.completed .icon-3 {
  background-image: url(../images/svg_icons/stigma_awar_white_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.completed .icon-4 {
  background-image: url(../images/svg_icons/training_white_icon.svg);
}

.mental-health-tool-section .container-wrap .nav-pills li.completed .icon-5 {
  background-image: url(../images/svg_icons/mental_accom_white_icon.svg);
}