body {
    font-family: 'Poppins', sans-serif !important;
    background: #F5F9FF;
}

.content {
    max-width: 1280px;
    margin: 0 auto;
}

.berikan-dark {
    color: #03658C; 
}

.berikan-body {
    color: #0389A6;
}

.bg-berikan-body {
    background-color: #0389A6;
}

.berikan-secondary {
    color: #04C4D9;
}

.berikan-orange {
    color: #F69C15;
}

.bg-berikan-orange {
    background-color: #F69C15;
}

.berikan-extralight {
    color: #EFF8FE;
}

.bg-berikan-extralight {
    background-color: #EFF8FE;
}

.bg-berikan-orange:hover {
    background-color: #F69C15;
}

.bg-berikan-secondary {
    background-color: #04C4D9;
}

.secondary, .text-secondary {
    color: #04C4D9;
}

.bg-berikan-dark {
    background: #03658C;
}

.berikan-light {
    color: #A0C5D7;
}

.boder-berikan-light {
    border: solid 1px #A0C5D7;
}


.bg-berikan-light {
    background: #A0C5D7;
}

ul.menu li a.active,
ul.menu li a:hover {
    color: #03658C;
    border-bottom: solid 2px #03658C;
}

ul.menu li a {
    color: #A0C5D7;
}

#why .content {
    margin-left: 35%
}

table.striped tbody tr:nth-child(even) {
    background: #f3f3f3
}
table.striped tbody tr:nth-child(odd) {
    background: #FFF
} 

a.sosmed {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 100%;
    justify-content: center;
    background-color: #03658C;
    color: #fff;
}

a.sosmed:hover {
    background-color: #fff;
    color: #03658C;
}

section#calculator {
    background: url('./../img/bg_calculator.png');
    background-color: #fff !important;
    background-position: top right !important;
    background-repeat: no-repeat !important;
    background-size: auto;
}

section#calculator .step-calculator {
    padding-top: 10px;
    padding-bottom: 15px;
    width: 300px;
    display: inline-flex;
}

section#calculator .step-calculator .number {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 100%;
    margin-right: 10px;
    text-align: center;
    align-items: center;
}
section#calculator .step-calculator.step1 .number {
    background-color: #04C4D9;
    color: #fff;
}

section#calculator .step-calculator.step2 .number {
    background-color: #DCF1F9;
    color: #fff;
}

section#calculator .step-calculator.step1 {
    color: #04C4D9;
    border-bottom: solid 3px #04C4D9;
    font-weight: 600;
}

section#calculator .step-calculator.step2 {
    color: #DCF1F9;
    border-bottom: solid 3px #DCF1F9;
    font-weight: 600;
    padding-left: 10px;
}

.bg-modal {
    background-color: #03658ce7;
    z-index: 99999;
}

/* css dashboard */
ul.sidenav li {
    margin-top: 5px;
    margin-bottom: 5px;
}
ul.sidenav li a {
    color: #A0C5D7;
}

ul.sidenav li a.active,
ul.sidenav li a:hover {
    color: #fff;
    background-color: #04C4D9;
}
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
table.bepro thead {
    background-color: #0389A6;
    color: #fff;
}

table.bepro tbody tr td.info {
    background-color: #0389A6;
    color: #fff;
}

table.bepro thead th,
table.bepro thead td {
    font-weight: 400;
    padding: 10px 20px;
    /* min-width: 180px; */
}

/* slider  */
.home-slider {
    background-color: #DCF1F9;
}

.slider-non {
    width: 245px;
}

.imgs {
    width: 85%; margin-left: -3em;  margin-top: -2em
}

.arrows {
    font-size: 30px;
    color: #fff;
}

/* spinners  */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }