@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

* {
  font-family: "DM Sans", sans-serif;
}

header {
  background-color: #0c7a9d;
  padding: 0 16px;
}

header img {
  width: 90px;
}

header ul {
  background: rgba(218, 236, 240, 0.8);
  width: 100%;
}

header ul li {
  padding: 17px 8px;
  flex: 1;
  color: #7a7c7e;
  font-size: 12px;
}

header ul li a {
  color: unset;
  text-decoration: none;
}

header ul li:hover {
  color: #047a9a;
}

header ul li:hover svg path {
  fill: #047a9a;
}

header ul li.active {
  background-color: #f9fafb;
  color: #047a9a;
}

header ul li.active svg path {
  fill: #047a9a;
}

@media screen and (min-width: 567px) {
  header img {
    width: 142px;
  }
}

@media screen and (min-width: 800px) {
  header {
    padding: 0 32px;
  }

  header img {
    width: 142px;
  }

  header ul {
    width: auto;
  }

  header ul li {
    padding: 12px 40px;
    flex: unset;
    font-size: 14px;
  }
}

@media screen and (min-width: 1200px) {
  header {
    padding: 0 64px;
  }

  header h6 {
    font-size: 18px;
  }
}

@media screen and (min-width: 1600px) {
  header ul li {
    padding: 17px 82px;
  }
}

/*--------------------------------------------------------------
# Header Bar
--------------------------------------------------------------*/
.info {
  border-bottom: 1.5px solid #f2f4f8;
  padding: 14px 16px;
}

.info h2 {
  padding-right: 30px;
  border-right: 1.5px solid #f2f4f8;
  margin-right: 16px;
  font-size: 16px;
}

.info p {
  color: #7a7c7e;
  font-size: 14px;
}

.info .value {
  padding: 4px 10px;
  background-color: #daecf0;
  border: 1px solid #86bfce;
  border-radius: 4px;
}

.info .value a {
  font-size: 12px;
  line-height: 150%;
  color: #047a9a;
  text-decoration: none;
}

.info .value a img {
  margin-right: 4px;
}

@media screen and (min-width: 1200px) {
  .info {
    padding: 14px 32px;
  }

  .info h2 {
    font-size: 22px;
  }

  .info p {
    font-size: 14px;
  }
}

@media screen and (min-width: 1600px) {
  .info {
    padding: 0 120px;
  }

  .info h2 {
    padding: 30px 64px 30px 0;
    margin-right: 32px;
    font-size: 28px;
  }

  .info p {
    font-size: 16px;
  }
}

/*--------------------------------------------------------------
# About Page
--------------------------------------------------------------*/
/* Main Section
------------------------------*/

.about main {
  margin: 40px 0;
}
.about main .container {
  padding: 60px 32px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border: 2px solid #f2f4f8;
  max-width: 1055px;
}

.about main h2 {
  font-size: 28px;
  line-height: 150%;
  letter-spacing: -0.02em;
}

.about main a {
  padding: 12px 65px;
  background-color: #2b8c62;
  border-radius: 6px;
  font-size: 12px;
  transition: 0.3s;
}
.about main a:hover {
  background-color: #39b37e;
}

@media screen and (min-width: 1200px) {
  .about main p {
    font-size: 18px;
  }
}
@media screen and (min-width: 567px) {
  .about main {
    margin: 90px 0;
  }
  .about main .container {
    padding: 144px 80px;
  }
}

/*--------------------------------------------------------------
# Current Job Page & Current Skills page
--------------------------------------------------------------*/
/* Main Section
------------------------------*/

.current-job main > div {
  width: 100%;
  max-width: 924px;
}

.current-job .cards > div, div.go-back {
  font-size: 14px;
  color: #34383c;
  border: 1px solid rgba(43, 140, 98, 0.3);
  border-radius: 1e11px;
  height: 60px;
  cursor: pointer;
  transition: 0.3s;
}
.current-job .cards > div:hover {
  border: 1px solid #2b8c62;
  background-color: rgba(43, 140, 98, 0.1);
}
.current-job .cards > div.active {
  background-color: #2b8c62;
  color: white;
}
.current-job .cards > a {
  height: 60px;
}
.next-btn {
  background: linear-gradient(87.31deg, rgba(192, 244, 159, 0.53) -8.18%, rgba(255, 255, 255, 0) 136.59%);
  border: 1px solid #d5e8e0;
  border-radius: 1e6px;
  transition: 0.3s;
  height: 60px
}
.current-job .next-btn:hover {
  background: linear-gradient(84.43deg, rgba(192, 244, 159, 0.53) 60.13%, rgba(255, 255, 255, 0) 134.9%);
}
.current-job .zip-code {
  width: 153px;
  padding: 8px 12px;
  background-color: var(--color-white-03);
  border: 1px solid #c8d2df;
  border-radius: 8px;
  position: relative;
}

.current-job .zip-code input {
  width: 100%;
  background-color: unset;
  border: unset;
  outline: none;
}

.current-job main .button {
  padding: 12px 95px;
  background-color: #f1f3f7;
  color: #b1b1b1;
  border-radius: 6px;
  pointer-events: none;
  transition: 0.3s;
}

.current-job main .button.active {
  background-color: #2b8c62;
  color: white;
  pointer-events: all;
}
.current-job main .button:hover {
  background-color: #59c98e;
}

/*--------------------------------------------------------------
# Job Match
--------------------------------------------------------------*/
/* Main Section
------------------------------*/

.job-match {
  min-width: 860px;
}
.job-match header {
  padding: 0;
  align-items: self-start;
}
.job-match header .wrapper {
  max-width: 100vw;
  padding: 0 16px;
}

.job-match header ul,
.job-match header ul li {
  border-radius: 8px;
}
.job-match header ul {
  width: 100%;
}
.job-match header ul li {
  padding: 12px 0;
}
.job-match table thead tr {
  border-bottom: 1.5px solid #f2f4f8;
}
.job-match table tbody tr:hover {
  background-color: #e7ecf1;
}

.job-match table td:first-child {
  width: 10%;
}

.job-match table td:nth-child(2) {
  width: 25%;
}

.job-match table td:not(:first-child):not(:nth-child(2)) {
  border-right: 1.5px solid #f2f4f8;
  width: 21.5%;
}
.job-match table td.great-match span,
.job-match table td.good-match span,
.job-match table td.potential-match span {
  padding: 4px 0;
  width: 162px;
}
.job-match table td.great-match span {
  background: #2b8c62;
  color: white;
}
.job-match table td.good-match span {
  background: rgba(43, 140, 98, 0.2);
  color: #2b8c62;
}
.job-match table td.potential-match span {
  border: 1px solid #bbdacd;
  color: #2b8c62;
}

@media screen and (min-width: 992px) {
  .job-match header {
    height: 125px;
  }
  .job-match header .wrapper,
  .job-match header .info {
    width: 100%;
  }
  .job-match header ul,
  .job-match header ul li {
    border-radius: 999px;
  }
  .job-match header ul {
    width: auto;
    min-width: 400px;
  }

  .job-match header ul li {
    padding: 12px 40px;
  }
}

/*--------------------------------------------------------------
# Skills Overlap page
--------------------------------------------------------------*/

.skills-overlap {
  min-width: 1500px;
}
.skills-overlap header {
  padding: 0;
}
.skills-overlap header {
  align-items: self-start;
}
.skills-overlap header .wrapper {
  max-width: 100vw;
  padding: 0 16px;
}

.skills-overlap header ul,
.skills-overlap header ul li {
  border-radius: 8px;
}
.skills-overlap header ul {
  width: 100%;
}
.skills-overlap header ul li {
  padding: 12px 0;
  width: 100%;
}

.skills-overlap header > div:first-of-type {
  max-width: 100vw;
}
.skills-overlap header .overlap .view-legend {
  background-color: #d6e9ef;
  width: 97px;
}
.skills-overlap header .overlap .view-legend span {
  color: #0c7a9d;
}
.skills-overlap header .overlap .slider span {
  white-space: nowrap;
}

.skills-overlap header .overlap .slider > div {
  background: linear-gradient(90deg, #ffffff 0%, #86bfce 100%);
  border: 1px solid #dde5f5;
  width: 120px;
  height: 16px;
  margin: 0 11px;
}

.skills-overlap main .current-job {
  max-width: 260px;
  min-width: 260px;
  height: calc(100vh - 125px);
  border-right: 1px solid #d2d4d7;
  box-shadow: 6px 10px 29px rgba(122, 53, 26, 0.1);
  overflow-y: scroll;
}
.skills-overlap main .current-job::-webkit-scrollbar {
  display: none;
}

.skills-overlap main .current-job {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.skills-overlap main .current-job > div:first-of-type {
  background-color: var(--color-white-02);
  padding: 23.5px 24px;
}
.skills-overlap main .current-job > div:first-of-type span {
  padding: 3px 8px;
  background: #fbefeb;
  border-radius: 57px;
  color: #d66e47;
}
.skills-overlap main li {
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
.skills-overlap main li::after {
  content: "";
  background: url(../imgs/arrow.svg);
  position: absolute;
  top: 22px;
  right: 24px;
  width: 14px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
/*.skills-overlap main li:hover::after,
.skills-overlap main li.active::after {
  opacity: 1;
  visibility: visible;
}*/
.skills-overlap main .current-job h2 {
  font-size: 18px;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: #34383c;
}
.skills-overlap main li p {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  margin: 4px 0 0 0;
  font-size: 14px;
  line-height: 18px;
  color: #34383c;
  transition: max-height 0.3s, opacity 0.5s;
  max-height: 1000px;
}

.skills-overlap main li.active p {
  opacity: 1;
  visibility: visible;
  max-height: 1000px;
}

.skills-overlap main li:not(.active) p {
  max-height: 0;
}
.skills-overlap main li.white {
  background-color: white;
}
/*.skills-overlap main .current-job li.white:hover {
  background: linear-gradient(90.83deg, rgba(189, 201, 212, 0.2) 0.72%, rgba(231, 236, 241, 0.096) 59.74%, rgba(231, 236, 241, 0) 99.64%),
    #ffffff;
  border: 1px solid #b1b1b1;
}
.skills-overlap main li.white:hover {
  background: linear-gradient(90.83deg, rgba(89, 185, 255, 0.14) 0.72%, rgba(75, 120, 224, 0.0290656) 79.1%, rgba(71, 103, 216, 0) 99.64%),
    #ffffff;
  border: 1px solid #047a9a;
}*/
.skills-overlap main li.gray {
  background-color: #ecedee;
}
/*.skills-overlap main li.gray:hover {
  background: linear-gradient(90.83deg, rgba(189, 201, 212, 0.2) 0.72%, rgba(231, 236, 241, 0.096) 59.74%, rgba(231, 236, 241, 0) 99.64%),
    #ecedee;
  border: 1px solid #b1b1b1;
}*/
.skills-overlap main li.dark-gray {
  background-color: #d2d5d7;
}
/*.skills-overlap main li.dark-gray:hover {
  background: linear-gradient(90.83deg, rgba(189, 201, 212, 0.2) 0.72%, rgba(231, 236, 241, 0.096) 59.74%, rgba(231, 236, 241, 0) 99.64%),
    #d2d4d7;
  border: 1px solid #b1b1b1;
}*/

.skills-overlap main li.blue {
  background-color: #daecf0;
}
/*.skills-overlap main li.blue:hover {
  background: linear-gradient(90.83deg, rgba(89, 185, 255, 0.14) 0.72%, rgba(75, 120, 224, 0.0290656) 79.1%, rgba(71, 103, 216, 0) 99.64%),
    #daecf0;
  border: 1px solid #047a9a;
}*/
.skills-overlap main li.dark-blue {
  background-color: #86bfce;
}
/*.skills-overlap main li.dark-blue:hover {
  background: linear-gradient(90.83deg, rgba(89, 185, 255, 0.14) 0.72%, rgba(75, 120, 224, 0.0290656) 79.1%, rgba(71, 103, 216, 0) 99.64%),
    #86bfce;
  border: 1px solid #047a9a;
}*/

.skills-overlap .skills {
  height: calc(100vh - 125px);
  overflow: scroll;
  display: flex;
}
.skills-overlap .skills > div {
  width: 280px;
  min-width: 280px;
  border-width: 0px 1px;
  border-style: solid;
  border-color: #f2f4f8;
}
.skills-overlap .skills h4 {
  background-color: #ecf5f7;
  padding: 37.5px 24px;
  font-size: 18px;
  line-height: 150%;
  color: #047a9a;
  transition: 0.3s;
}
.skills-overlap .skills h4:hover {
  background-color: #b9dae3;
}
.skills-overlap header ul {
}

@media screen and (max-width: 1500px) {
  .skills-overlap main .current-job {
    height: calc(100vh - 142px);
  }
  .skills-overlap .skills {
    height: calc(100vh - 142px);
  }
}
@media screen and (min-width: 1200px) {
  .skills-overlap main .current-job {
    max-width: 383px;
    min-width: 383px;
  }
  .skills-overlap .skills > div {
    width: 380px;
    min-width: 380px;
  }
  .skills-overlap header ul li {
    padding: 12px 40px;
    width: unset;
  }
}

@media screen and (min-width: 992px) {
  .skills-overlap header {
    height: 125px;
  }
  .skills-overlap header .wrapper,
  .skills-overlap header .info {
    width: 100%;
  }
  .skills-overlap header ul,
  .skills-overlap header ul li {
    border-radius: 999px;
  }
  .skills-overlap header ul {
    width: auto;
    min-width: 400px;
  }
}

/*--------------------------------------------------------------
# Map page
--------------------------------------------------------------*/
/* Main
------------------------------*/

body.map {
  min-width: 850px;
}
.map main {
  margin: 0 16px;
}

.map {
  min-width: 860px;
}
.map header {
  padding: 0;
  align-items: self-start;
}
.map header .wrapper {
  max-width: 100vw;
  padding: 0 16px;
}

.map header ul,
.map header ul li {
  border-radius: 8px;
}
.map header ul {
  width: 100%;
}
.map header ul li {
  padding: 12px 0;
}

@media screen and (min-width: 1200px) {
  .map main {
    margin: 0 120px;
  }
}
@media screen and (min-width: 992px) {
  .map header {
    height: 125px;
  }
  .map header .wrapper {
    width: 100%;
  }
  .map header ul,
  .map header ul li {
    border-radius: 999px;
  }
  .map header ul {
    width: auto;
    min-width: 400px;
  }

  .map header ul li {
    padding: 12px 40px;
  }
}

/*
--------------------------------------------------------------*/
/* Modal
------------------------------*/
.modal {
  background: rgba(0, 0, 0, 0.2);
  min-width: 850px;
}
.modal.show {
  padding: 0 !important;
}
.modal-dialog {
  max-width: 850px;
}
.modal-header {
  background-color: #59c98e;
}
.modal-header span {
  background-color: rgba(43, 140, 98, 0.7);
  padding: 4px 48px;
}
.modal .btn-close {
  position: absolute;
  top: 32px;
  right: 32px;
}
.modal .modal-link {
  padding: 12px 45px;
  transition: 0.3s;
}
.modal .modal-link:hover {
  background-color: #f1f4f7 !important;
}
.modal .text-gray {
  color: #7a7c7e;
}
.modal .bg-gray {
  background-color: #f9fafb;
}
.modal .education {
  background: rgba(218, 236, 240, 0.5);
}
.modal .education li span {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 1.5px solid #c8d2df;
}

.modal .requirements li,
.modal .steps li {
  margin-bottom: 12px;
}
.modal .requirements li span,
.modal .steps li span {
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: white;
  border: 1px solid #047a9a;
  border-radius: 50%;
}
.modal .requirements li:not(:last-of-type) span::before,
.modal .steps li:not(:last-of-type) span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 1.5px;
  height: 37px;
  background-color: #c8d2df;
}

@media screen and (min-width: 1200px) {
  .modal-dialog {
    max-width: 1168px;
  }
}

@media (max-width: 1480px) {
  #header-elements {
    flex-direction: column;
  }
  #legend > div:first-child {
    margin-right: 10px;
  }
  #legend {
    display: flex;
    align-self: baseline;
  }
}

div[data-tab-content] {
  display: none;
}
@media (max-width: 550px) {
  footer > div {
    flex-direction: column;
    align-items: center;
  }
}