body {
  color: #333;
}

.btn {
  border-radius: 25px;
}

.card {
  border-radius: 25px;
}

.bg-blue {
  background-color: #4eb5f1;
}

.bg-yellow {
  background-color: #f7b701;
}

.bg-green {
  background-color: #00a651;
}

.bg-abu {
  background-color: #E5E8E8;
}

.bg-card {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.radius-top {
  border-radius: 25px 25px 0 0;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.btn-blue {
  display: inline-block;
  padding: 0.3em 1.2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto',
    sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  background-color: #4eb5f1;
  text-align: center;
  transition: all 0.2s;
}

.btn-blue:hover {
  background-color: #4095c6;
  color: #FFFFFF;
}

@media all and (max-width:30em) {
  .btn-blue {
    display: block;
    margin: 0.2em auto;
  }
}

.btn-yellow {
  display: inline-block;
  padding: 0.3em 1.2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto',
    sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  background-color: #f7b701;
  text-align: center;
  transition: all 0.2s;
}

.btn-yellow:hover {
  background-color: #f7b701;
  color: #FFFFFF;
}

@media all and (max-width:30em) {
  .btn-yellow {
    display: block;
    margin: 0.2em auto;
  }
}

.btn-green {
  display: inline-block;
  padding: 0.3em 1.2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto',
    sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  background-color: #00a651;
  text-align: center;
  transition: all 0.2s;
}

.btn-green:hover {
  background-color: #04743a;
  color: #FFFFFF;
}

@media all and (max-width:30em) {
  .btn-green {
    display: block;
    margin: 0.2em auto;
  }
}

.btn-red {
  display: inline-block;
  padding: 0.3em 1.2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto',
    sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  background-color: #f10808;
  text-align: center;
  transition: all 0.2s;
}

.btn-red:hover {
  background-color: #ca0909;
  color: #FFFFFF;
}

@media all and (max-width:30em) {
  .btn-red {
    display: block;
    margin: 0.2em auto;
  }
}

.btn-light {
  display: inline-block;
  padding: 0.3em 1.2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto',
    sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  background-color: #c0c0c0;
  text-align: center;
  transition: all 0.2s;
}

.btn-light:hover {
  background-color: #999999;
  color: #FFFFFF;
}

@media all and (max-width:30em) {
  .btn-light {
    display: block;
    margin: 0.2em auto;
  }
}

.bouncy {
  animation: bouncy 5s infinite linear;
  position: relative;
}

@keyframes bouncy {
  0% {
    top: 0em
  }

  40% {
    top: 0em
  }

  43% {
    top: -0.9em
  }

  46% {
    top: 0em
  }

  48% {
    top: -0.4em
  }

  50% {
    top: 0em
  }

  100% {
    top: 0em;
  }
}

.circular--portrait {
  margin: auto;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.circular--portrait-menu {
  margin: auto;
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait-menu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.circular--portrait-header {
  position: relative;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-content {
  /* border: 10px solid #f7b701; */
  min-height: 275px;
  border-radius: 25px;
}

.muat {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8) url('<?php echo asset_url('images/loader.gif') ?>') 50% 50% no-repeat;
}


body.loading .muat {
  overflow: hidden;
}


body.loading .muat {
  display: block;
}

.hr-yelow {
  border-top: 1px solid #4eb5f1;
}

.hr-blue {
  border-top: 1px solid #4eb5f1;
}

.text-blue {
  color: #4eb5f1;
}

.bingkai {
  border: 10px solid #f7b701;
  min-height: 275px;
}

.modal-fullscreen {
  padding: 0 !important;
}

.modal-fullscreen .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen .modal-body {
  overflow-y: auto;
}
}

@media (max-width: 767.98px) {
  .modal-fullscreen-sm {
    padding: 0 !important;
  }

  .modal-fullscreen-sm .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen-sm .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-fullscreen-sm .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 991.98px) {
  .modal-fullscreen-md {
    padding: 0 !important;
  }

  .modal-fullscreen-md .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen-md .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-fullscreen-md .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 1199.98px) {
  .modal-fullscreen-lg {
    padding: 0 !important;
  }

  .modal-fullscreen-lg .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-fullscreen-lg .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-fullscreen-lg .modal-body {
    overflow-y: auto;
  }
}

.modal-fullscreen-xl {
  padding: 0 !important;
}

.modal-fullscreen-xl .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen-xl .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen-xl .modal-body {
  overflow-y: auto;
}