@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvao4CP.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaooCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvoooCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVsEpYCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVs9pYCP.ttf) format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVtapYCP.ttf) format('truetype');
}
* {
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
}
.calculator {
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}
.calculator .option-2 {
  display: none;
}
.calculator .option-2 #annual-spend-value {
  padding-left: 10px;
}
.calculator .savings {
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .calculator .savings {
    margin-bottom: 0px;
  }
}
.calculator .savings .options {
  margin-top: 10px;
}
.calculator .savings .options h1 {
  color: #6F1D46;
  font-size: 25px;
  margin-bottom: 20px;
}
.calculator .savings .options .col-sm-6,
.calculator .savings .options .col-xs-6 {
  padding-left: 5px;
  padding-right: 5px;
}
.calculator .savings .options .btn {
  border-radius: 0px;
  width: 285px;
  font-size: 16px;
  padding: 20px;
  height: 125px;
  border: 1px solid #6F1D46;
}
@media (max-width: 768px) {
  .calculator .savings .options .btn {
    width: 100%;
    margin-bottom: 20px;
  }
}
.calculator .savings .options .btn p {
  color: #6F1D46;
}
.calculator .savings .options .use {
  float: right;
}
.calculator .savings .options .use img {
  width: 15px;
  margin-top: -10px;
}
.calculator .savings .options .spend {
  float: left;
}
.calculator .savings .options .spend img {
  width: 30px;
  margin-top: -10px;
}
.calculator .savings .options .active.spend,
.calculator .savings .options .spend:hover {
  background-color: #6F1D46;
}
.calculator .savings .options .active.spend p,
.calculator .savings .options .spend:hover p {
  color: #ffffff;
}
.calculator .savings .options .active.spend img,
.calculator .savings .options .spend:hover img {
  content: url("../images/coin-icon-selected.svg");
}
.calculator .savings .options .active.use,
.calculator .savings .options .use:hover {
  background-color: #6F1D46;
}
.calculator .savings .options .active.use p,
.calculator .savings .options .use:hover p {
  color: #ffffff;
}
.calculator .savings .options .active.use img,
.calculator .savings .options .use:hover img {
  content: url("../images/person-icon-selected.svg");
}
.calculator .calculate .left {
  width: 65.666667%;
  margin-right: 0.5%;
  padding: 60px 40px;
  background-color: #878787;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .calculator .calculate .left {
    width: 100%;
  }
}
.calculator .calculate .left h2 {
  font-size: 35px;
  margin-bottom: 20px;
}
.calculator .calculate .left p {
  font-size: 24px;
}
.calculator .calculate .left input {
  color: black;
  background-color: white;
  padding: 8px 10px;
  border: 0px;
  outline: 0px;
  padding-left: 30px;
}
.calculator .calculate .left .search-input {
  position: relative;
}
.calculator .calculate .left .search-input .search {
  position: absolute;
  left: 8px;
  top: 6px;
}
.calculator .calculate .left .slider {
  margin-top: 30px;
}
.calculator .calculate .left .slider input {
  margin-top: 30px;
  width: 100%;
}
.calculator .calculate .right {
  padding: 20px 15px;
  background-color: #6F1D46;
  text-align: left;
}
@media (max-width: 768px) {
  .calculator .calculate .right {
    margin-top: 20px;
  }
}
.calculator .calculate .right p {
  margin: 0px;
  font-size: 16px;
  width: 200px;
}
.calculator .calculate .right hr,
.calculator .calculate .right h3 {
  margin: 5px 0px;
  font-size: 50px;
  font-weight: 600;
}
@media (max-width: 1200px) {
  .calculator .calculate .right hr,
  .calculator .calculate .right h3 {
    font-size: 3vw;
  }
}
@media (max-width: 768px) {
  .calculator .calculate .right hr,
  .calculator .calculate .right h3 {
    font-size: 40px;
  }
}
.calculator .calculate .right .final {
  color: #F7EB63;
  font-size: 60px;
  font-weight: 800;
}
@media (max-width: 1200px) {
  .calculator .calculate .right .final {
    font-size: 4vw;
  }
}
@media (max-width: 768px) {
  .calculator .calculate .right .final {
    font-size: 50px;
  }
}
.calculator .calculate .right .final span {
  color: #F7EB63;
}
.calculator .calculate .right .job-bag {
  font-size: 10px;
}
.rangeslide .slider .thumb {
  background: url(../images/anchor.svg);
  height: 52px !important;
  width: 32px !important;
  border: 0px;
  box-shadow: none;
  margin-top: -53px !important;
  margin-left: -15px;
}
.rangeslide .value-indicator.above {
  margin-top: 5px;
  margin-left: -4px;
}
.rangeslide .slider .track {
  box-shadow: 1px 1px 1px #707070, 0px 0px 1px #707070;
  background: #ffffff;
  border: 0.2px solid #707070;
  border-radius: 20px;
  background: linear-gradient(to bottom, #aaaaaa, #ffffff);
}
.rangeslide .slider .track-progress {
  background: #6F1D46;
  border: 1px solid #707070;
  border-radius: 20px;
  background: repeating-linear-gradient(-45deg, #BF789C, transparent 10px, #843E61 10px, #843E61 20px), linear-gradient(to bottom, #BF789C, #BF789C) !important;
}
.tick-label:first-child .tick {
  visibility: hidden;
}
.tick-label:last-child .tick {
  visibility: hidden;
}
.rangeslide .labels-container {
  margin-top: -22px;
  color: white;
}
.rangeslide .labels-container .tick-label .tick {
  border-color: white;
}
.rangeslide {
  margin-left: 0px;
}
.controls {
  position: relative;
  top: 20px;
  cursor: pointer;
}
.preview {
  display: inline-block;
  vertical-align: top;
}
@media screen and (max-width: 768px) {
  .rangeslide .labels-container .tick-label span {
    display: none;
  }
  .rangeslide .labels-container .tick-label:first-child span {
    display: block;
  }
  .rangeslide .labels-container .tick-label:last-child span {
    display: block;
  }
}