a,a:hover,a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

/* ----- NAVBAR ----- */
.navbar{
  background-color: #FFFFFF;
  height:54px;
  border-bottom: 2px #F5F6F6 solid;
}

.navbar-container{
  padding-left: 20px;
  padding-right: 20px;
}

.nav-link{
  font-family: 'Roboto';
  color:#B2B7BC;
  font-size:1em;
}

.nav-link:hover, .nav-link:active{
  color:#498CF3;
}

/* NAVBAR - Current page */
.nav-link.current{
  color:#495057;
}

/* NAVBAR - Brand at top left */
#logo{
  height:35px;
}

.navbar-brand a{
  font-size:1em;
  font-family:"Roboto";
  color:#495057;
}

.navbar-brand a:hover{
  color:#498CF3;
}

/* NAVBAR - Message */
#navMsg{
  padding-right:35px;
  font-size:1.1em;
  font-family:"Roboto";
  color:#498CF3;
}

/* ----- BODY ----- */
/* Body begins after navbar ends */
body{
  padding-top: 54px;
  font-family: 'Roboto';
  background-color: #F5F6F6;
}

/* ----- SEARCH BAR ----- */

.from-to{
  height:45px;
  background-color: #F5F6F6;
  width:40px;
}

#from{
  color: #498CF3;
  padding-top:12px;
  padding-left:10px;
}

#to{
  color: #00C2A6;
  font-size: 1.2em;
  padding-top:10px;
  padding-left:10px;
}

.input-group{
  top:10px;
  height: 45px;
  width: 450px;
  background-color: #FFFFFF;
  border-top:solid;
  border-color: #F5F6F6;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

@media only screen and (max-width: 500px) {
    .input-group {
        width: 90vw;
    }
} /* expand input-group to 100vw on small screens */


.input-group .form-control {
  font-family: 'Roboto';
  color:#495057;
  border: 2px solid #FFFFFF;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  border-radius:0px;
}

/* remove auto focus */
.input-group .form-control:focus, .btn-default:focus {
  -webkit-box-shadow: none;
  outline: -webkit-focus-ring-color auto 0px;
}

/* custom focus */
.input-group .form-control:focus{
  border: 2px solid #498CF3;
}

#inputTo{
  box-shadow: 0 3.5px 3px -3px rgba(0, 0, 0, 0.25);
}

#transition-img {
  width:250px;
  display: block;
  padding-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 500px) {
    #transition-img {
        width: 50vw;
    }
} /* expand #transition-img to 100vw on small screens */

/* Content */
.container{
  padding-top: 20px;
  padding-right:10%;
  padding-left: 10%;
  padding-bottom: 45px;
}

@media only screen and (max-width: 576px) {
  .container{
    padding-right:20px;
    padding-left: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 768px) {
  .container{
    padding-right:5%;
    padding-left: 5%;
  }
}

#jobSearch{
  padding-top: 10px;
  padding-bottom: 20px;
  color: #495057;
  font-size: 1.2em;
  font-family: "Roboto";
  text-align: center;
}

.step-title-container{
  background-image: linear-gradient(to right, #accaf9, #96d2fa, #86daf4, #81dfe7, #8be3d6);
}

.step-title{
  vertical-align: middle;
  display:block;
  text-align: center;
  color: #FFF;
  font-size: 1.3em;
  font-family: "Roboto";
  padding-top: 20px;
  padding-bottom:10px;
  margin-bottom:0px;
}

.step-subtitle{
  vertical-align: middle;
  display:block;
  text-align: center;
  color: #FFF;
  font-size: 1em;
  font-family: "Roboto";
  padding-bottom: 20px;
}

.container-data{
  background-color: #FFFFFF;
  box-shadow: 0 3.5px 3px -3px rgba(0, 0, 0, 0.25);
  padding:20px;
}

.container-secondary{
  padding-bottom: 20px;
}

.transition-text{
  font-family: 'Source Sans Pro', sans-serif;
  font-size:1em;
  line-height: 2em;
  color: #495057;
  text-align: justify;
}

.transition-title{
  font-family: 'Source Sans Pro', sans-serif;
  font-size:1.1em;
  color: #495057;
  padding-bottom: 7px;
  border-bottom: 1px solid #E9EAEB;
}

.transition-low{
  color:#FCAB26;
}

.transition-medium{
  color:#F17105;
}

.transition-high{
  color:#F94C78;
}

.comment{
  color:#B2B7BC;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.9em;
  line-height: 1.3em;
}

.label{
  font-family:'Source Sans Pro', sans-serif;
  margin-top:4px;
  border-radius: 4px;
  display:inline-block;
}

.skill{
  color: #00C2A6;
  border:1px solid #00C2A6;
}

/* Chart */
/* .chartSize{
  position: relative;
  height:70vh;
  width:75vw;
  padding-top: 100px;
  margin:auto;
} */

.chartSize3{
  position: relative;
  height:200px;
  padding-top: 20px;
  margin:auto;
}

.chartSize{
  position: relative;
  height:50vh;
  width:90%;
  padding-top: 20px;
  margin:auto;
}

@media only screen and (min-width: 500px) and (max-width: 800px) {
    .chartSize{
        width:90%;
        height:40vh;
    }
}

@media only screen and (max-width: 500px) {
    .chartSize{
        width:100%;
        height:40vh;
    }
}

.chartFull{
  position: relative;
  height:70vh;
  width:90vw;
  padding-top: 20px;
  margin:auto;
}

/* TOOLTIP */
.tooltip{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.8em;
}

.tooltip-inner{
  background-color: #495057;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #495057 !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #495057 !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #495057 !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #495057 !important;
}

.transition-data{
  font-family: 'Source Sans Pro', sans-serif;
  font-size:1em;
  line-height: 1.5em;
  color: #495057;
  text-align: justify;
  margin-top: 3%;
  margin-bottom: 3%;
}

.link, .link:active{
  color:#498cf3;
}

/* ----- FOOTER ----- */
.footer{
  display: flex;
  align-items: center;
  background-color: #DFE0E0;
  color: #495057;
  font-family: "Roboto";
  text-align: center;
  font-size:0.7rem;
  height:35px;
  bottom:0;
}