/*-----pl calc css stuff - needs moving out - start ---*/

#sliderLoanamount
{
    margin-top:1.6em;
}

@media (max-width: 639px) {
    #sliderLoanamount
    {
        margin-top:2.2em;
    }
    #sliderLoanamount .ui-slider-pip-top:nth-child(odd) .ui-slider-line-top
    {
        height: 12px;
    }
    #sliderLoanamount .ui-slider-pip-top:nth-child(odd) .ui-slider-label-top
    {
        transform: scale(1.0) translateY(-10px);
        font-size: 0.9em;

    }
    #sliderLoanamount .ui-slider-pip-top:nth-child(even) .ui-slider-label-top
    {
        transform: scale(1.0) ;
        top : -50%;
        font-size: 0.9em;
    }
}


@media only screen and (max-width: 839px) {
    .flex--container    {
        display: flex;
        flex-direction: column;
    }
    #loans > [class*="col-"]:last-of-type
    {
        order:-1;
        margin-top: 0.3rem;
    }
}

@media (max-width: 479px) {
    .pwstool #loansTermSelect {
        display: block !important;
    }
    .pwstool .slider {
        display: block;
    }
}
.pwstool .slider {
    background: white;
    margin: 10px 0;
    border-radius: 2px;
}

.pwstool.box--white .slider {
    background: #e5e5e5;
    margin: 10px 0;
    border-radius: 2px;
}


.pwstool .sliderStyle02 .amountRegion {
    padding-bottom: 6px;
}

.pwstool .ui-slider-horizontal .ui-slider-handle {
    top: -.2em;
    margin-left: -1.2em;
}

/*

.container {
 height: 100%;
 min-height: 100%;
 margin: 0 auto;
}*/

input[type="radio"] {
  position:fixed;
  opacity:0;
}

.button-wrap {
 position: relative;
 text-align: center;
 top: 50%;
 margin-top: -2.5em;
}

@media (max-width: 40em) {
 .button-wrap {
   margin-top: -1.5em;
 }
}

.button-label {
 display: inline-block;
 padding: 0.5em 0.5em;
 margin: 0.2em;
 cursor: pointer;
 color: #292929;
 border-radius: 0.15em;
 background: #e5e5e5;
 font-weight: 600;
 transition: 0.3s;
 user-select: none;
}

.button-label h1 {
 font-size: 1em;
}

.button-label:hover {
 background: #d6d6d6;
}

@media (max-width: 40em) {
 .button-label {
   /*padding: 0em 1em 3px;
   margin: 0.25em;*/
 }
}
#yes-button:checked + .button-label,
#now-button:checked + .button-label
{
 background: #aa4539;
 color: #fff;
}
#yes-button:checked + .button-label:hover,
#now-button:checked + .button-label:hover {
 background: #b84638;
 color: #fff;
}
#no-button:checked + .button-label,
#three-button:checked + .button-label {
 background: #aa4539;
 color: #fff;
}
#no-button:checked + .button-label:hover,
#no-button:checked + .button-label:hover {
 background: #b84638;
 color: #fff;
}

/*-----pl calc css stuff - end ---*/


/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
* Copyright (c) 2016 Simon Goellner <simey.me@gmail.com>; Licensed MIT */

/* HORIZONTAL */
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: #2b2b2b;
  border-color: transparent;
}

.ui-slider .ui-slider-pip-initial-1 .ui-slider-label {
  color: #E80949; }

.ui-slider .ui-slider-pip-initial-2 .ui-slider-label {
  color: #920AFF; }

/* increase bottom margin to fit the pips */
.ui-slider-horizontal.ui-slider-pips {
  margin-bottom: 1.4em;
}

/* default hide the labels and pips that arnt visible */
/* we just use css to hide incase we want to show certain */
/* labels/pips individually later */
.ui-slider-pips .ui-slider-label,
.ui-slider-pips .ui-slider-pip-hide {
  display: none;
}

/* now we show any labels that we've set to show in the options */
.ui-slider-pips .ui-slider-pip-label .ui-slider-label {
  display: block;
}

/* PIP/LABEL WRAPPER */
/* position each pip absolutely just below the default slider */
/* and also prevent accidental selection */
.ui-slider-pips .ui-slider-pip {
  width: 2em;
  height: 1em;
  line-height: 1em;
  position: absolute;
  font-size: 0.8em;
  color: #000;
  overflow: visible;
  text-align: center;
  top: 20px;
  left: 20px;
  margin-left: -1em;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ui-slider-pips .ui-slider-pip-top {
  width: 2em;
  height: 1.6em;
  line-height: 1em;
  position: absolute;
  font-size: 0.8em;
  color: #000;
  overflow: visible;
  text-align: center;
  top: -22px;
  left: 20px;
  margin-left: -1em;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.ui-state-disabled.ui-slider-pips .ui-slider-pip {
  cursor: default;
}

/* little pip/line position & size */
.ui-slider-pips .ui-slider-line {
  background: #000;
  width: 1px;
  height: 3px;
  position: absolute;
  left: 50%;
}

.ui-slider-pips .ui-slider-line-top {
    background: #000;
    width: 1px;
    height: 3px;
    position: absolute;
    left: 50%;
    bottom: 20%;
}


/* the text label postion & size */
/* it overflows so no need for width to be accurate */
.ui-slider-pips .ui-slider-label {
  position: absolute;
  top: 5px;
  left: -50%;
  margin-left: 1.5em;
  width: 1em;

}
.ui-slider-pips .ui-slider-label-top:first {
    left: 0;


}
.ui-slider-pips .ui-slider-label-top {
    position: absolute;
    top: -70%;
    left: 50%;
    margin-left: -1em;
    width: 2em;

}

/* make it easy to see when we hover a label */
.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-pip:hover .ui-slider-label,
.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-label-top:hover
 {
  color: black;
  font-weight: 600;
}


.ui-slider-vertical.ui-slider-pips .ui-slider-label {
  top: 50%;
  left: 0.5em;
  margin-left: 0;
  margin-top: -0.5em;
  width: 2em;
}


/* FLOATING HORIZTONAL TOOLTIPS */
/* remove the godawful looking focus outline on handle and float */
.ui-slider-float .ui-slider-handle:focus,
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label {
  outline: none;
}

/* style tooltips on handles and on labels */
/* also has a nice transition */
/* style tooltips on handles and on labels */
/* also has a nice transition */
.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-label {
  position: absolute;
  visibility: hidden;
  top: -40px;
  display: block;
  width: 120px;
  margin-left: -70px;
  left: 70%;
  height: 20px;
  line-height: 20px;
  background: white;
  border-radius: 3px;
  border: 1px solid #888;
  text-align: center;
  font-size: 12px;
  opacity: 0;
  color: #333;
  -webkit-transition-property: opacity, top, visibility;
  transition-property: opacity, top, visibility;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-duration: 200ms, 200ms, 0ms;
  transition-duration: 200ms, 200ms, 0ms;
  -webkit-transition-delay: 0ms, 0ms, 200ms;
  transition-delay: 0ms, 0ms, 200ms;
}

/*
.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-label {
  position: absolute;
  visibility: hidden;
  top: -40px;
  display: block;
  width: 34px;
  margin-left: -18px;
  left: 50%;
  height: 20px;
  line-height: 20px;
  background: white;
  border-radius: 3px;
  border: 1px solid #888;
  text-align: center;
  font-size: 12px;
  opacity: 0;
  color: #333;
  -webkit-transition-property: opacity, top, visibility;
  transition-property: opacity, top, visibility;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-duration: 200ms, 200ms, 0ms;
  transition-duration: 200ms, 200ms, 0ms;
  -webkit-transition-delay: 0ms, 0ms, 200ms;
  transition-delay: 0ms, 0ms, 200ms;


}
*/
/* show the tooltip on hover or focus */
/* also switch transition delay around */
.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
  opacity: 1;
  top: -30px;
  visibility: visible;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: 200ms, 200ms, 0ms;
  transition-delay: 200ms, 200ms, 0ms;


}

/* put label tooltips below slider */
.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
  top: 42px;
}

.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
  top: 32px;
  font-weight: normal;
}

/* give the tooltip a css triangle arrow */
.ui-slider-float .ui-slider-tip:after,
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
  content: " ";
  width: 0;
  height: 0;
  border: 5px solid rgba(255, 255, 255, 0);
  border-top-color: white;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
}

/* put a 1px border on the tooltip arrow to match tooltip border */
.ui-slider-float .ui-slider-tip:before,
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
  content: " ";
  width: 0;
  height: 0;
  border: 5px solid rgba(255, 255, 255, 0);
  border-top-color: #888;
  position: absolute;
  bottom: -11px;
  left: 50%;
  margin-left: -5px;
}

/* switch the arrow to top on labels */
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
  border: 5px solid rgba(255, 255, 255, 0);
  border-bottom-color: white;
  top: -10px;
}

.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
  border: 5px solid rgba(255, 255, 255, 0);
  border-bottom-color: #888;
  top: -11px;
}

/* FLOATING VERTICAL TOOLTIPS */
/* tooltip floats to left of handle */

.ui-slider-vertical.ui-slider-float .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-tip-label {
  top: 50%;
  margin-top: -11px;
  width: 34px;
  margin-left: 0px;
  left: -60px;
  color: #333;
  -webkit-transition-duration: 200ms, 200ms, 0;
  transition-duration: 200ms, 200ms, 0;
  -webkit-transition-property: opacity, left, visibility;
  transition-property: opacity, left, visibility;
  -webkit-transition-delay: 0, 0, 200ms;
  transition-delay: 0, 0, 200ms;
}

.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
  top: 50%;
  margin-top: -11px;
  left: -50px;
}

/* put label tooltips to right of slider */
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
  left: 47px;
}

.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
  left: 37px;
}

/* give the tooltip a css triangle arrow */
.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
  border: 5px solid rgba(255, 255, 255, 0);
  border-left-color: white;
  border-top-color: transparent;
  position: absolute;
  bottom: 50%;
  margin-bottom: -5px;
  right: -10px;
  margin-left: 0;
  top: auto;
  left: auto;
}

.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
  border: 5px solid rgba(255, 255, 255, 0);
  border-left-color: #888;
  border-top-color: transparent;
  position: absolute;
  bottom: 50%;
  margin-bottom: -5px;
  right: -11px;
  margin-left: 0;
  top: auto;
  left: auto;
}

.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
  border: 5px solid rgba(255, 255, 255, 0);
  border-right-color: white;
  right: auto;
  left: -10px;
}

.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
  border: 5px solid rgba(255, 255, 255, 0);
  border-right-color: #888;
  right: auto;
  left: -11px;
}

/* SELECTED STATES */
/* Comment out this chuck of code if you don't want to have
        the new label colours shown */
        /*
.ui-slider-pips [class*=ui-slider-pip-initial] {
  font-weight: bold;
  color: #14CA82;
}

.ui-slider-pips .ui-slider-pip-initial-2 {
  color: #1897C9;
}

.ui-slider-pips [class*=ui-slider-pip-selected] {
  font-weight: bold;
  color: #FF7A00;
}

.ui-slider-pips .ui-slider-pip-inrange {
  color: black;
}

.ui-slider-pips .ui-slider-pip-selected-2 {
  color: #E70081;
}

.ui-slider-pips [class*=ui-slider-pip-selected] .ui-slider-line,
.ui-slider-pips .ui-slider-pip-inrange .ui-slider-line {
  background: black;
}
*/