/* these font-face styles will probably be replaced with typekit cdn. */
@font-face {
  font-family: museo-sans;
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/MuseoSans-100.otf');
}

@font-face {
  font-family: museo-sans;
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/MuseoSans-300.otf');
}

@font-face {
  font-family: museo-sans;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/MuseoSans-500.otf');
}

@font-face {
  font-family: museo-sans;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/MuseoSans-700.otf');
}

body {
  font-family: museo-sans, sans-serif;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  font-weight: 500;
  background-color: #ffffff;
}

main {
  background: #323747;
  min-height: calc(100vh - 106px);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

h1 {
  font-size: 50px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

h2 {
  color: #797c8c;
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

/* shrink size of container on standard viewport. */
@media (min-width: 992px) {
  .container {
    max-width: 80%;
  }
}

a:hover {
  text-decoration: none !important;
}

.form-label {
  color: #797c8c;
}

/* top-header with white background and logo. */
.header {
  background: #ffffff;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  min-height: 50px;
}

.header .welcome {
  color: #00aeef;
  text-transform: uppercase;
  font-size: 12px;
  margin-right: 2rem;
}

/* navigation steps between pages. */
.navigation-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.navigation-container .navigation-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5rem;
  width: 100px;
  cursor: pointer;
  opacity: 0.3;
}

/* prevent next steps from being navigated to from the header. */
.navigation-container .navigation-step.disabled {
  pointer-events: none;
}

.navigation-container .navigation-step.active,
.navigation-container .navigation-step:hover {
  opacity: 1;
}

.navigation-container .navigation-step .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  color: #ffffff;
  background: #464b59;
}

.navigation-container .navigation-step label {
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

/* mcompatible label and input type range forms. */

.range-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

@media (max-width: 991px) {
  .range-container {
    display: none !important;
  }
}

.range-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: relative;
  left: 40px;
  width: 100%;
  max-width: 680px;
}

.range-wrapper .range-step {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80px;
  text-align: center;
  font-size: 12px;
  color: #797c8c;
}

.range-group,
.text-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.custom-range {
    direction: rtl;
}
.range-group .custom-range,
.text-group .form-control {
  max-width: 600px;
}

.range-group .range-select {
  display: none;
}

/*@media (max-width: 991px) {

  .range-group,
  .text-group {
    align-items: flex-start;
  }

  .range-group,
  .text-group {
    flex-direction: column;
  }

  .text-group .form-control {
    max-width: 100%;
  }

  .range-group .custom-range {
    display: none !important;
  }

  .range-group .range-select {
    display: initial !important;
  }
}*/

/* alert recreation. */
.notification {
  color: #ffffff;
  background: #00aeef;  
  font-size: 13px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
}

/* info icons on financial-summary page. */
.text-group .fa-question-circle {
  padding-left: 0.5rem;
  cursor: pointer;
}

.text-help {
  color: #ffffff;
  font-size: 13px;
  background: #323747;
}

.summary-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  background-color: #00aeef;
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  cursor: pointer;
}

.summary-section i {
  transform: rotate(0deg);
  transition: transform .3s linear;
}

.summary-section[aria-expanded="true"] i {
  transform: rotate(180deg);
  transition: transform .3s linear;
}

input.form-control {
  font-size: 14px;
  font-weight: 500;
  padding: 18px 11px;
  border-radius: 4px;
  color: #797c8c;
}

/* recolour bootstrap input type range slider. */
.custom-range::-webkit-slider-thumb {
  background-color: #00aeef;
}

.custom-range::-moz-range-thumb {
  background-color: #00aeef;
}

.custom-range::-ms-thumb {
  background-color: #00aeef;
}

/* height 38px for consistency with inputs. */
select.form-control {
  font-size: 14px;
  font-weight: 500;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 4px;
  color: #797c8c;
  height: 38px;
}

/* padding and letter-spacing consistent with website form. */
.btn-info {
    padding: 11px 19px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
}
.btn-primary {
  color: #ffffff !important;
  background: #00aeef;
  border-color: #00aeef;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 12px;
  padding: 11px 19px;
  font-weight: 500;
  letter-spacing: .8px;
  transition: .2s ease-out;
}

.btn-primary:hover {
  color: #ffffff;
  background: #0089bc;
  border-color: #0089bc;
}

.btn-success {
  color: #ffffff !important;
  background: #5cb85c;
  border-color: #5cb85c;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 12px;
  padding: 11px 19px;
  font-weight: 500;
  letter-spacing: .8px;
  transition: .2s ease-out;
}

.btn-success:hover {
  color: #ffffff;
  background: #449d44;
  border-color: #449d44;
}

.btn-md {
  font-weight: 700;
}

.card .card-body {
  padding: 3rem;
}