body{
  font-family: 'Poppins', 'Sans-serif';
}

/* color 
primary : #36868C
primary-light : #67E9FF
cultured: #F5F5F5
platinum: #DEE8E8
Gargoyle Gas: #FFD243
American Yellow: #F1AD08
*/

.gradient-teal-top-down{
  background-image: linear-gradient(to bottom, #36868c3c, #36868C);
}

.text-sa-primary{
  color:#36868C;
}

.text-sa-primary-light{
  color: #67E9FF;
}

.text-american-yellow{
  color: #F1AD08;
}

.bg-cultured{
  background-color: #F5F5F5;
}

.bg-sa-primary{
  background-color: #36868C;
}

.bg-gargoyle-gas{
  background-color: #FFD243;
}

/* button */
.btn-sa-light, .btn-sa-light:hover{
  color:#36868C;
  padding: 18px;
  font-weight: 600;
}

.btn-sa-user, .btn-sa-user:hover{
  border-radius: 300px;
  color: #36868C;
  background-color: #DEE8E8;
}

.btn-sa-primary, .btn-sa-primary:hover{
  background-color: #36868C;
  border: #36868C;
}

.btn-sa-primary:disabled{
  background-color: #36868C;
  border: #36868C;
  cursor: not-allowed !important;
}

.btn-show-password{
  color: #ffffffa5;
  cursor: pointer;
}

.btn-show-password:hover{
  color: #fff;
  cursor: pointer;
}

/* input text */
.input-sa-teal{
  background-color: #66B5BB32;
  border: 0;
  padding: 18px;
  color: white;
}

.input-sa-teal:hover, .input-sa-teal:focus{
  background-color: #66B5BB3c;
  color: white;
}

.input-sa-teal::placeholder{
  color:#ffffffa5;
}

.input-sa-teal::placeholder:focus{
  color:#ffffff5f;
}

/* navigasi */
.nav.nav-sa .nav-link{
  border-radius: 10px;
}

.nav.nav-sa .nav-item{
  padding-top: 12px;
  padding-bottom: 12px;
}

.nav.nav-sa .nav-link{
  padding: 18px;
  color:#36868C;
}

.nav.nav-sa .nav-link.active, .nav.nav-sa .nav-link:hover{
  background-color: #36868C;
  color: white;
}

.nav-sa-pills .nav-link{
  color:#36868C;
}

.nav-sa-pills .nav-link.active{
  background-color: #36868C;
}

/* pagination */
.pagination-sa .page-link{
  color: #36868C;
}

.pagination-sa .page-link.active{
  color: white;
  background-color: #36868C;
  border-color: #36868C;
}

/* lg */
@media (min-width: 992px) {
  /* CSS untuk layar besar */
  .bg-lg-cultured{
    background-color: #F5F5F5;
  }

  .text-lg-secondary{
    color:#404040 !important;
  }
}

/* map */

/* text size */
.fs-14{
  font-size: 14px;
}

/* breadcrumb */
.breadcrumb-sa a{
  color: #36868C;
}

/* preloader */
.preloader {
  position: fixed;
  top: 0%;
  bottom: 0%;
  right: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  font-weight: 700;
  /* background-image: url(../img/preloader.gif); */
  background-size: cover;
  width: 100px;
  height: 100px;
}
/* end of preloader */