@import "/standimg/SBG/FaceBuild/css/rangeslider.css";

    body {
      /*padding: 20px;*/
      /*background: #eceff1;*/
      position: relative;
    }

    /*.mdl_submit Czwe*/
    .Calculate {
      width: 100%;
      height: 20px;
      font-family: Arial;
      font-size: 14px;
      font-weight: bold;
      font-style: normal;
      font-stretch: normal;
      letter-spacing: -0.2px;
      color: #ffffff;
    }

    label.mdl-textfield__label{
      font-size: 12px !important;
      top: 4px !important;
      visibility: visible !important;
      color: #999999 !important;
    }

    .Calculate input[type=button] {
      background: #117FFC url(http://pvigvpsl1.standardbank.co.za/standimg/SBG/CS/eForms/img/mdl-arrow.svg) 95% 50% no-repeat;
      cursor: pointer;
    }

    .Calculate input[type=button], .Calculate input[type=date] {
      width: 115%;
      /* height: 35px; */
      background-color: #0396fd;
      padding: 10px 0px 10px 0px;
      color: #fff !important;
      line-height: 25px;
      border: 0px;
      /*font-weight: bold;*/
      display: block;
      margin-left: -25px;
    }

    .mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
    color: rgb(0,188,212) !important;
    font-size: 12px;
    top: 4px;
    visibility: visible;
    }
    .mdl-textfield.is-focused .mdl-textfield__input {
      outline: none;
    }

    .mdl-slider__container{
      margin-left: -35px !important;
      margin-right: 30px !important;
      padding-left: 16px !important;
    }

    .calc_spinner{
      width: 19%;
      margin-top: -20px;
      margin-left: 85%;
      border-width: 0px;
      padding-left: 0px !important;
    }

    .sbg_amt_show {
    display: block !important;
    }

    .sbg_amt_hide {
    display: none;
    }

    .calc_spinner{
      border-left: none !important;
      border-right: none !important;
      border-top: none !important;
      box-shadow: none !important;
    }
    #grossAmount{
      border-left: none;
      border-right: none;
      border-top: none;
      box-shadow: none !important;
    }

    #expenses{
      border-left: none;
      border-right: none;
      border-top: none;
      box-shadow: none !important;
    }

    #loan_amountR{
      border-left: none;
      border-right: none;
      border-top: none;
      box-shadow: none !important;
    }

    #depositR{
      border-left: none;
      border-right: none;
      border-top: none;
      box-shadow: none !important;
    }

    .mdl-card.mdl-shadow--2dp.animated.slideInUp {
    box-shadow: none !important;
    }

    .mdl-textfield__input{
      box-shadow: none !important;
      padding: 3px 55px 3px 1px !important;
      margin-bottom: 15px !important;
    }

    .mdl-textfield.mdl-js-textfield {
      padding-top: 24px !important;
    }

    .mdl-card__supporting-text {
      border-radius: 5px !important;
      width: 80% !important;
    }

    .mdl-slider {
    margin: 0 -15px !important;
    }

    input.calc_spinner {
    padding: 4px 0px;
    }

    label.slider-label {
      margin-left: -20px !important;
      margin-top: -20px !important;
      font-size: 12px !important;
      top: 4px !important;
      visibility: visible !important;
      font-weight: normal;
      color: #999999 !important;
    }

    .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label {
      margin-left: -18px !important;
      padding-bottom: 10px !important;
    }

    div.accordion_productdetails div {
      height: 100% !important;
    }


/*    .modal-header {
      height: 8% !important; 
    }*/

    /*end Czwe*/

    /*Zeplin Style*/
    .Home-loan-calculator {
      width: 158px;
      height: 17px;
      font-family: Arial;
      font-size: 14px;
      font-weight: bold;
      font-style: normal;
      font-stretch: normal;
      letter-spacing: -0.2px;
      color: #333333;
    }
    /*zepEnd*/

    .mdl-card{
      margin:0 auto;
    }

    .slider-label{
      color:#9E9E9E;
    }

    .tool-label{
      color:#00BCD4;
      font-size: 24px;
    }

    .installment-label{
      color:#FFFFFF;
      text-align:center;
    }

    .installment-value{
      color:#FFFFFF;
      text-align:center;
      font-size:28px;
    }

    .slider-value{
      font-weight:bold;
    }

    .installment-value{
      text-align:center;
      font-weight:bold;
    }

    .cyan {
      color:#FFFFFF;
      background-color: #3366cc;
    }

    input[type=number]::-webkit-inner-spin-button {
    opacity: 1 !important;
    }

    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button {  
      -webkit-appearance: "Always Show Up/Down Arrows";
    }

    .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.is-upgraded {
      width: 100% !important;
      padding-right: 55px;
    }

    .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.is-upgraded.is-dirty {
    font-size: 14px !important;
    }

    /*Tabs Style*/
      /* Style the list */
ul.tab {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #ffffff;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-width: 2px;
    padding-left: 0px!important;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: #999999 !important;
    text-align: center;
    padding: 0px 15px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

.mdl-textfield {
    width: 285px !important;
}

.mdl-slider {
    width: calc(100% - 25px) !important;
}

calc_spinner.is-upgraded {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 2px;
    background: 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;
    padding: 0;
    color: rgb(0,188,212);
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    z-index: 1;
    cursor: pointer;
}

.mdl-card {
    width: 360px !important;
}

.sbg_amt_display{
  display: none;
}

p.installment-label {
    font-size: 15px !important;
}

p.installment-value{
  font-size: 14px !important;
}

a.tab{
  margin-left: -5px !important;
}

a.tablinks.active {
    border-bottom: 2px solid #0396fd;
    color: #0033F7 !important;

}

.mdl-card__supporting-text p.installment-value {
    font-size: 18px !important;
}

.mdl-card__supporting-text p.installment-label {
    font-size: 14px !important;
}

.mdl-textfield__error {
    margin-top: -14px !important;
}

/* Change background color of links on hover */
ul.tab li a:hover {color: #0033aa !important;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {color: #0033aa !important;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    border-top: none;
    /*border-top: none;*/
}
p.interestP{
      margin-left: -20px !important;
      font-size: 12px !important;
      visibility: visible !important;
      font-weight: normal;
      color: #999999 !important;
      margin-bottom: -10px !important;
}
/*Slider additional css*/

/*input[type=range] {
  border: 1px solid transparent !important;
  outline: 2px solid transparent !important;
  outline-offset: -1px !important;
}
input[type=range]::-ms-thumb {
  height: 80px;
  width: 230px;
  margin-top: -16px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #004795;
  background: url(../images/dot_slide.png) no-repeat #fff 50% 50%;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  margin-top: -8px !important;
  border: 3px solid #004795 !important;
  background: url(../images/dot_slide.png) no-repeat #fff 50% 50%;
}


input[type=range]:focus {
  outline: none;
}
input[type=range]::-ms-track {
  width: 100% !important;
  cursor: pointer !important;
  background: #ccc !important;
  border-color: #ccc !important;
  border-left: 1px solid #0396FD !important;
  height: 4px;
}
input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #004795;
  background: url(../images/dot_slide.png) no-repeat #fff 50% 50%;
}*/
    /*End of tabs style*/