/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

@font-face {
  font-family: keepCalm;
  src: url(font/KeepCalm-Medium.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(font/Roboto/Roboto-Regular.ttf);
}

body {
    padding-top: 4rem;
    padding-bottom: 2rem;
    color: #000000;
  }

  .lead{
    font-family: keepCalm;
  }
  .title-page{
    font-family: keepCalm;

  }


  .sub-title{
    margin-top: 0px;
    font-family: Roboto !important;
    font-size: 16px;
    color: #424242;
  }
  
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered{
    margin-top: 5px;
  }
  .select2-container--default .select2-selection--single{
    height: 40px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow{
    margin-top: 5px;
  }
  .suku_bunga_class{
    height: 40px !important;
    margin:0px !important;
    padding:4px !important;
  }

  .pajak_class{
    height: 40px !important;
    margin:0px !important;
    padding:4px !important;
  }
  
  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }


  .b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  
  /* Carousel base class */
  .carousel {
    margin-bottom: 4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 32rem;
  }
  
  
  /* MARKETING CONTENT
  -------------------------------------------------- */
  
  /* Center align the text within the three columns below the carousel */
  .marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  /* rtl:begin:ignore */
  .marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
  }
  /* rtl:end:ignore */
  
  
  /* Featurettes
  ------------------------- */
  
  .featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }
  
  /* Thin out the marketing headings */
  /* rtl:begin:remove */
  .featurette-heading {
    letter-spacing: -.05rem;
  }
  
  /* rtl:end:remove */
  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
      margin-bottom: 1.25rem;
      font-size: 1.25rem;
      line-height: 1.4;
    }
  
    .featurette-heading {
      font-size: 50px;
    }
  }
  
  @media (min-width: 62em) {
    .featurette-heading {
      margin-top: 7rem;
    }
  }

  input[type=range].styled-slider {
    height: 2.2em;
    -webkit-appearance: none;
  }
  
  /*progress support*/
  input[type=range].styled-slider.slider-progress {
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
  }
  
  input[type=range].styled-slider:focus {
    outline: none;
  }
  
  /*webkit*/
  input[type=range].styled-slider::-webkit-slider-thumb {
    width: 2em;
    height: 2em;
    border-radius: 1em;
    background: #F86C73;
    border: none;
    box-shadow: 0 0 2px black;
    margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - 2em * 0.5);
    -webkit-appearance: none;
  }
  
  input[type=range].styled-slider::-webkit-slider-runnable-track {
    height: 1em;
    border-radius: 0.5em;
    background: #efefef;
    border: 1px solid #b2b2b2;
    box-shadow: none;
  }
  input[type=range].styled-slider::-webkit-slider-thumb:hover {
    background: #F86C73;
  }
  
  input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
    background: #e5e5e5;
    border-color: #9a9a9a;
  }
  
  input[type=range].styled-slider::-webkit-slider-thumb:active {
    background: #F86C73;
  }
  
  input[type=range].styled-slider:active::-webkit-slider-runnable-track {
    background: #f5f5f5;
    border-color: #c1c1c1;
  }
  
  input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
    background: linear-gradient(#F86C73,#F86C73) 0/var(--sx) 100% no-repeat, #efefef;
  }
  
  input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
    background: linear-gradient(#F86C73,#F86C73) 0/var(--sx) 100% no-repeat, #e5e5e5;
  }
  
  input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
    background: linear-gradient(#F86C73,#F86C73) 0/var(--sx) 100% no-repeat, #f5f5f5;
  }
  
  /*mozilla*/
  input[type=range].styled-slider::-moz-range-thumb {
    width: 2em;
    height: 2em;
    border-radius: 1em;
    background: #F86C73;
    border: none;
    box-shadow: 0 0 2px black;
  }
  
  input[type=range].styled-slider::-moz-range-track {
    height: max(calc(1em - 1px - 1px),0px);
    border-radius: 0.5em;
    background: #efefef;
    border: 1px solid #b2b2b2;
    box-shadow: none;
  }
  
  input[type=range].styled-slider::-moz-range-thumb:hover {
    background: #F86C73;
  }
  
  input[type=range].styled-slider:hover::-moz-range-track {
    background: #e5e5e5;
    border-color: #9a9a9a;
  }
  
  input[type=range].styled-slider::-moz-range-thumb:active {
    background: #F86C73;
  }
  
  input[type=range].styled-slider:active::-moz-range-track {
    background: #f5f5f5;
    border-color: #c1c1c1;
  }
  
  input[type=range].styled-slider.slider-progress::-moz-range-track {
    background: linear-gradient(#F86C73,#F86C73) 0/var(--sx) 100% no-repeat, #efefef;
  }
  
  input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
    background: linear-gradient(#F86C73,#F86C73) 0/var(--sx) 100% no-repeat, #e5e5e5;
  }
  
  input[type=range].styled-slider.slider-progress:active::-moz-range-track {
    background: linear-gradient(#F86C73,#F86C73) 0/var(--sx) 100% no-repeat, #f5f5f5;
  }
  
  /*ms*/
  input[type=range].styled-slider::-ms-fill-upper {
    background: transparent;
    border-color: transparent;
  }
  
  input[type=range].styled-slider::-ms-fill-lower {
    background: transparent;
    border-color: transparent;
  }
  
  input[type=range].styled-slider::-ms-thumb {
    width: 2em;
    height: 2em;
    border-radius: 1em;
    background: #F86C73;
    border: none;
    box-shadow: 0 0 2px black;
    margin-top: 0;
    box-sizing: border-box;
  }
  
  input[type=range].styled-slider::-ms-track {
    height: 1em;
    border-radius: 0.5em;
    background: #efefef;
    border: 1px solid #b2b2b2;
    box-shadow: none;
    box-sizing: border-box;
  }
  
  input[type=range].styled-slider::-ms-thumb:hover {
    background: #F86C73;
  }
  
  input[type=range].styled-slider:hover::-ms-track {
    background: #e5e5e5;
    border-color: #9a9a9a;
  }
  
  input[type=range].styled-slider::-ms-thumb:active {
    background: #F86C73;
  }
  
  input[type=range].styled-slider:active::-ms-track {
    background: #f5f5f5;
    border-color: #c1c1c1;
  }
  
  input[type=range].styled-slider.slider-progress::-ms-fill-lower {
    height: max(calc(1em - 1px - 1px),0px);
    border-radius: 0.5em 0 0 0.5em;
    margin: -1px 0 -1px -1px;
    background: #F86C73;
    border: 1px solid #b2b2b2;
    border-right-width: 0;
  }
  
  input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
    background: #F86C73;
    border-color: #9a9a9a;
  }
  
  input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
    background: #F86C73;
    border-color: #c1c1c1;
  }