@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');

.font-muli {
  font-family: 'Muli', sans-serif;
}

.font-quicksand {
  font-family: 'Quicksand', sans-serif;
}

.font-dosis {
  font-family: 'Dosis', sans-serif;
}

.kartu {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.kartus:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.white {
  background-color: #fff
}

.grey-5 {
  background-color: #fafafa
}

.grey-4 {
  background-color: #f5f5f5
}

.grey-3 {
  background-color: #eeeeee
}

.grey-2 {
  background-color: #e0e0e0
}

.grey-1 {
  background-color: #bdbdbd
}

.grey1 {
  background-color: #9e9e9e
}

.grey2 {
  background-color: #757575
}

.grey3 {
  background-color: #616161
}

.grey4 {
  background-color: #424242
}

.grey5 {
  background-color: #212121
}

.no-margin {
  margin: 0px !important
}

.no-margin-top {
  margin-top: 0px !important
}

.no-margin-bottom {
  margin-bottom: 0px !important
}

.no-margin-right {
  margin-right: 0px !important
}

.no-margin-left {
  margin-left: 0px !important
}

.no-padding {
  padding: 0px !important
}

.no-padding-top {
  padding-top: 0px !important
}

.no-padding-bottom {
  padding-bottom: 0px !important
}

.no-padding-right {
  padding-right: 0px !important
}

.no-padding-left {
  padding-left: 0px !important
}

.margin-atas-10 {
  margin-top: 10px
}

.margin-bawah-10 {
  margin-bottom: 10px
}

.margin-kanan-10 {
  margin-right: 10px
}

.margin-kiri-10 {
  margin-left: 10px
}

.padding-atas-10 {
  padding-top: 10px
}

.padding-bawah-10 {
  padding-bottom: 10px
}

.padding-kanan-10 {
  padding-right: 10px
}

.padding-kiri-10 {
  padding-left: 10px
}

.padding-5 {
  padding: 5px;
}

.margin-bawah-50 {
  margin-bottom: 50px;
}

.kursor {
  cursor: pointer;
}

.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /* Firefox 3.5+, IE10 */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(70%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease;
  /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}

.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

.header {
  transition: top 0.2s ease-in-out;
}

.footr {
  transition: bottom 0.2s ease-in-out;
}

.footr-chat {
  transition: bottom 0.5s ease-in-out;
}

.nav-up {
  top: -60px;
}

.nav-fot {
  bottom: -60px;
}

.chats-up {
  top: -150px;
}

.chats-fot {
  bottom: -150px;
}

.chats-upss {
  top: -50px;
}

.chats-fotss {
  bottom: -50px;
}

#manipulate {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #063;
  bottom: 0px;
  right: 25%;
  left: 50%;
  margin-left: -150px;
}

.chatss {
  margin-bottom: 50px;
  margin-right: 30%;
}

.chatsos {
  margin-bottom: 10px;
  margin-right: 30%;
}

.chats {
  margin: 0px auto 60px auto;
  border-radius: 25px 25px 25px 25px;
  display: block;
  width: 200px;
}

.alias {
  cursor: alias;
}

.all-scroll {
  cursor: all-scroll;
}

.auto {
  cursor: auto;
}

.cell {
  cursor: cell;
}

.context-menu {
  cursor: context-menu;
}

.col-resize {
  cursor: col-resize;
}

.copy {
  cursor: copy;
}

.crosshair {
  cursor: crosshair;
}

.default {
  cursor: default;
}

.e-resize {
  cursor: e-resize;
}

.ew-resize {
  cursor: ew-resize;
}

.grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.help {
  cursor: help;
}

.move {
  cursor: move;
}

.n-resize {
  cursor: n-resize;
}

.ne-resize {
  cursor: ne-resize;
}

.nesw-resize {
  cursor: nesw-resize;
}

.ns-resize {
  cursor: ns-resize;
}

.nw-resize {
  cursor: nw-resize;
}

.nwse-resize {
  cursor: nwse-resize;
}

.no-drop {
  cursor: no-drop;
}

.none {
  cursor: none;
}

.not-allowed {
  cursor: not-allowed;
}

.pointer {
  cursor: pointer;
}

.progress {
  cursor: progress;
}

.row-resize {
  cursor: row-resize;
}

.s-resize {
  cursor: s-resize;
}

.se-resize {
  cursor: se-resize;
}

.sw-resize {
  cursor: sw-resize;
}

.text {
  cursor: text;
}

.url {
  cursor: url(myBall.cur), auto;
}

.w-resize {
  cursor: w-resize;
}

.wait {
  cursor: wait;
}

.zoom-in {
  cursor: zoom-in;
}

.zoom-out {
  cursor: zoom-out;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.backdrop9 {
  background-color: rgba(0, 0, 0, 0.9);
  width: 100vw;
  height: 100vh;
}

.backdrop4 {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
}

.backdrop5 {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
}

.backdrop6 {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
}

.backdrop7 {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100vw;
  height: 100vh;
}

.backdrop8 {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100vw;
  height: 100vh;
}

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.btn-group-justified .btn,
.btn-group-justified .btn-group {
  float: none;
  display: table-cell;
  width: 1%;
}

.btn-group-justified .btn .btn,
.btn-group-justified .btn-group .btn {
  width: 100%;
}

.btn-group-justified .btn .dropdown-menu,
.btn-group-justified .btn-group .dropdown-menu {
  left: auto;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromright {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

.loadthis {
  /* animation: 0.3s ease-in 0s 1 slideInFromLeft; */
}

.loadthisout {
  /* animation: 0.3s ease-out 0s 1 slideInFromright; */
}

#loading {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  /* background-color:rgba(0, 0, 0, 0.80);background-color:#fff; */
  /*background: url(../../asset/bg/loadin.gif) center no-repeat #fff;*/
}

#isi_konten_2 {
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

#manipulate {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #063;
  bottom: 0px;
  right: 25%;
  left: 50%;
  margin-left: -150px;
}

.badge-notify {
  position: relative;
  top: 0px;
  left: 50px;
  height: 18px;
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.card-round {
  border-radius: 10px;
}

.card-round-2 {
  border-radius: 20px;
}

.card-round-3 {
  border-radius: 20px;
}

.m-wrap {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767px) {
  .m-wrap {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

.loadingz {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.80);
  /*color:#ffffff;*/
  /*background: url(../../asset/bg/loadin.gif) center no-repeat #fff;*/
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    opacity: 1\9;
    /* IE9 only */
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
    opacity: 1\9;
    /* IE9 only */
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    opacity: 1\9;
    /* IE9 only */
  }

  to {
    opacity: 1;
  }
}

.fades-in {
  opacity: 0;
  /* make things invisible upon start */
  -webkit-animation: fadeIn ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.fades-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fades-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 2.0s;
  -moz-animation-delay: 2.0s;
  animation-delay: 2.0s;
}

.wrapper {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  background: #fff;
  width: 100%;
  height: 640px;
  display: flex;
  flex-direction: column;
}

.wrapper-cell {
  display: flex;
  margin-bottom: 30px;
}

@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

.animated-background,
.image,
.text-line {
  -webkit-animation-duration: 1.25s;
  animation-duration: 1.25s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background: #F6F6F6;
  background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative;
}

.image {
  height: 60px;
  width: 60px;
}

.text {
  margin-left: 20px;
}

.text-line {
  height: 10px;
  width: 250px;
  margin: 4px 0;
}

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.card-slide {
  display: inline-block;
  width: 100px;
}

.grow {
  transition: all .2s ease-in-out;
}

.grow:hover {
  transform: scale(0.99);
}

.font10 {
  font-size: 10px;
}

.font11 {
  font-size: 11px;
}

.font12 {
  font-size: 12px;
}

.font13 {
  font-size: 13px;
}

.font14 {
  font-size: 14px;
}

.font15 {
  font-size: 15px;
}

.font16 {
  font-size: 16px;
}

.font17 {
  font-size: 17px;
}

.round-atas {
  border-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.round-bawah {
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.round-kanan {
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.round-kiri {
  border-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.links {
  text-decoration: none !important;
}

.r-tl {
  border-top-left-radius: 25px !important;
}

.r-tr {
  border-top-right-radius: 25px !important;
}

.r-bl {
  border-bottom-left-radius: 25px !important;
}

.r-br {
  border-bottom-right-radius: 25px !important;
}

/* STAND UP */

/* .bg-standup {
  width: 100%;
  background: url("https://staging.m.firmanindonesia.com/assets/image/background-disc.jpg") no-repeat center center fixed;
  position: relative;
  min-height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

} */

.header-disc {
  color: #fe04fc;
  font-size: 50px;
  text-shadow: 2px 2px 5px #fe04fc;
}

.card-text-header {
  position: relative;
  top: 30px;
  z-index: 2;
  width: 255px;
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}

.card-bg-disc {
  /*background: #0b193e;*/
  background-color: rgba(20, 9, 117, 0.2);
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}

.media-height {
  min-height: 50px
}

.logo-lebar {
  width: 40px
}

.mt--50 {
  margin-top: -50px;
}

.grad {
  /*background-image: linear-gradient(#ffc94d, #ffb300);
  border-bottom-left-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  background: url('assets/image/banner/bnr.jpg ') no-repeat center center;*/
  height: 85%;
  box-shadow: 0 10px 10px 0 rgba(20, 9, 117, 0.2), 0 6px 20px 0 rgba(20, 9, 117, 0.2);
}

.card-shadow-disc {
  box-shadow: 0 10px 10px 0 rgba(20, 9, 117, 0.2), 0 6px 20px 0 rgba(20, 9, 117, 0.2);
}

.bg-gradasi-firman {
  background: #ffb347;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #ffcc33, #ffb347);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #ffcc33, #ffb347);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.bg-gradasi {
  background-image: -moz-linear-gradient(135deg, rgba(7, 56, 73, 255) 0%, rgba(5, 27, 48, 255) 100%);
  background-image: -webkit-linear-gradient(135deg, rgba(7, 56, 73, 255) 0%, rgba(5, 27, 48, 255) 100%);
  background-image: -ms-linear-gradient(135deg, rgba(7, 56, 73, 255) 0%, rgba(5, 27, 48, 255) 100%);
  background-image: linear-gradient(135deg, rgba(7, 56, 73, 255) 0%, rgba(5, 27, 48, 255) 100%);
}

.font-gradasi {
  background: -moz-linear-gradient(135deg, rgba(7, 56, 73, 255) 0%, rgba(5, 27, 48, 255) 100%);
  background: -webkit-linear-gradient(135deg, rgba(7, 56, 73, 255) 0%, rgba(5, 27, 48, 255) 100%);
  background: -ms-linear-gradient(135deg, rgba(7, 56, 73, 255) 0%, rgba(5, 27, 48, 255) 100%);
  background: linear-gradient(135deg, rgba(7, 56, 73, 255) 0%, rgba(5, 27, 48, 255) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.font12 {
  font-size: 10px;
}

.konten {
  max-width: 80px;
  position: relative;
}

.sub-konten {
  position: absolute;
  right: 0px;
}

.text-disc {
  text-shadow: 0px 0px 5px #fdd400;
}

.img-holder {
  height: 0;
  padding-bottom: 50%;
  overflow: hidden;
}

.label-pulse {
  animation: pulse 1s ease infinite;
}

.lables-pulse {
  animation: pulse2 1s cubic-bezier(0.86, 0, 0.07, 1) infinite;
}

@keyframes pulse2 {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  1% {
    text-shadow: #0087dc 0 0 2px;
  }

  99% {
    text-shadow: rgba(0, 135, 220, 0.3) 0 0 135px;
  }

  100% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

.blurss {
  filter: opacity(15%);
}


/* STAND UP */
/* .bg-warning {
  background-color: #fdd400 !important;
}

.btn-warning {
  background-color: #fdd400 !important;
}

.badge-warning {
  background-color: #fdd400 !important;
} */