::-webkit-scrollbar { width: 5px;height:8px; }
::-webkit-scrollbar-track { background: transparent !important;  }
::-webkit-scrollbar-thumb { background: #607d8b !important;  }
::-webkit-scrollbar-thumb:hover { background: #009688 !important;  }
.user-avatar img{ height:100% !important;  }
.container_loading_bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container_loading_bar .loading-bar {
  display: flex;
  height: 5px;
  width: 100%;
  max-width: 320px;
  box-shadow: inset 0px 0px 0px 1px #C8C8CD;
  border-radius: 50px;
  overflow: hidden;
}
@-webkit-keyframes progress-animation {
  0% {
    width: 0%;
  }
  20% {
    width: 25%;
  }
  40% {
    width: 50%;
  }
  50% {
    width: 75%;
  }
  100% {
    width: 100%;
  }
}
@keyframes progress-animation {
  0% {
    width: 0%;
  }
  20% {
    width: 25%;
  }
  40% {
    width: 50%;
  }
  50% {
    width: 75%;
  }
  100% {
    width: 90%;
  }
}
.container_loading_bar .loading-bar .progress-bar {
  display: flex;
  height: 100%;
  width: 100%;
  background: linear-gradient(-180deg,#f53d2d,#f63) !important;
  -webkit-animation: progress-animation 3s ease-in-out;
          animation: progress-animation 3s ease-in-out;
}



#startup {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #FFFFFF;

  -moz-user-select: none;
  -webkit-user-select: none;

  display: flex;
  align-items: center;
  justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  padding:0px;
  position: absolute;
    left: 0;
    right: 0;
}

.spinner-container {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}

.spinner-container .path {
  stroke-dasharray: 1,150; /* 1%, 101% circumference */
  stroke-dashoffset: 0;
  stroke: rgba(27, 154, 89, 0.7);
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite;

}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotate{
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1,150;  /* 1%, 101% circumference */
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90,150; /* 70%, 101% circumference */
    stroke-dashoffset: -35;   /* 25% circumference */
  }
  100% {
    stroke-dasharray: 90,150; /* 70%, 101% circumference */
    stroke-dashoffset: -124;  /* -99% circumference */
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,150;  /* 1%, 101% circumference */
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90,150; /* 70%, 101% circumference */
    stroke-dashoffset: -35;   /* 25% circumference */
  }
  100% {
    stroke-dasharray: 90,150; /* 70%, 101% circumference */
    stroke-dashoffset: -124;  /* -99% circumference */
  }
}

.hide_element{
  display: none !important;
}

.show_element{
  display: block !important;
}

.swal2-icon.swal2-info, .swal2-icon.swal2-warning, .swal2-icon.swal2-danger, .swal2-icon.swal2-error, .swal2-icon.swal2-question, .swal2-icon.swal2-success{
  /*padding: 3px !important;
  border: none !important;
  border-color: #ffffff !important;*/
}

.icon-circle-xxl, .icon-circle.xxl{
  font-size: 100px !important;
}

.edit_foto{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 25px !important;
  height: 25px !important;
  line-height: 25px !important;
  text-align: center !important;
  border-radius: 50% !important;
  font-size: 15px !important;
}
.edit_foto .icon{
  line-height: 25px !important;
}

.form-group{
   margin-bottom: 15px !important;
}
.form-group label{
  margin-bottom: 5px !important;
}

.form-group .invalid{
  position: absolute;
    left: 0;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    bottom: calc(100% + 4px);
    background: #ed756b;
    padding: .3rem .5rem;
    z-index: 1;
    border-radius: 3px;
    white-space: nowrap;
}

.form-group .invalid:before{
  position: absolute;
    content: '';
    height: 0;
    width: 0;
    border-left: 6px solid #ed756b;
    border-right: 6px solid transparent;
    left: 10px;
    border-bottom: 6px solid transparent;
    bottom: -6px;
}

.pagination li a{
  font-size: 0.8125rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: calc(1rem + 1.125rem + 2px) !important;
    position: relative !important;
    padding: 0.5625rem 0.625rem !important;
    margin-left: -1px !important;
    line-height: 1rem !important;
    color: #526484;
    background-color: #fff;
    border: 1px solid #e5e9f2;
}

.pagination li.active a{
  color: #fff !important;
    background-color: #854fff !important;
    border-color: #854fff !important;
}

.bootstrap-tagsinput{
  width: 100% !important;
}

.label-info {
    background-color: #5bc0de;
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.pull_left{
  float: left !important;
}
.pull_right{
  float: right !important;
}
.custom-file-input{
  position: absolute !important;
}

.pointer{
  cursor: pointer !important;
}

.icon-status.no-notif:after{
  display: none !important;
}
.carousel-control-prev, .carousel-control-next{
    z-index: 9999 !important;
}

.item-table-responsive ul{
      text-align: left !important;
}

.img-list{
    height: 200px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.img-list.small{
  height: 150px !important;
}
.img-list img{
    width: auto !important;
    height: auto !important;
    max-height: 200px !important;
}
.img-list.small img{
  max-height: 150px !important;
}
.singkat{
  text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/*=============== MOBILE DEVICE =====================*/
@media screen and (max-width: 1200px) {
    .item-table-responsive .nk-tb-actions{
         justify-content:left !important;
       }
}

@media screen and (max-width: 768px) {
  /*=============== START LINE MOBILE DEVICE =====================*/

  .mobile-none{
    display: none !important;
  }
  .no-padding-m, .no-pading-m{
    padding: 0px !important;
  }
  .no-margin-m{
    margin: 0px !important;
  }
  .cat-home{
    justify-content: space-between !important;
    margin: 0px !important;
    overflow: auto !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  .p-5-m{
    padding: 5px !important;
  }
  .p-10-m{
    padding: 10px !important;
  }

  .left-m{
    float: left !important;
  }

  .full-m{
    display: inline-block !important;
    width: 100% !important;
  }

  .item-table-responsive .nk-tb-actions{
     display: inline-block !important;
   }

  /*=============== END LINE MOBILE DEVICE =====================*/
}
/*=============== END MOBILE DEVICE =====================*/

.brd-0{border-radius: 0px !important;} .ls-05{letter-spacing: 0.5px !important;}
.is-relative{position: relative !important;} .is-absolute{position: absolute !important;}
.top-0{top:0 !important;} .right-0{right: 0 !important;} .left-0{left:0 !important;} .bottom-0{bottom: 0 !important;}
.form-group.mb-1 {
    margin-bottom: 0.375rem !important;
}

.note-editable ul, .note-editable ol{
    list-style: inside !important;
}
.note-btn-group .note-btn{
  font-size: 10px !important;
  padding: 0.14rem 0.35rem;
}
.note-editor.note-frame, .note-editor.note-airframe{width:100% !important;}
.chosen-container-multi .chosen-choices{
  border: 1px solid #b4bdd3 !important;
  border-radius: 4px !important;
  background-image:none !important;
}