html {
  overflow-x: hidden !important;
}

a {
  color: #ae42b3;
  text-decoration: none !important;
}

* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.page-loader-container {
  /*display: block !important;*/
}

.page-loader {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background-color: #ae42b3 !important;
  background: linear-gradient(to right, #ae42b3 8%, #C5A059 18%, #ae42b3 33%) !important;
  background-size: 100% 20px !important;
}

/*.dark-placeorder-small{
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background-color: #ae42b3 !important;
  background: linear-gradient(to right, #ae42b3 8%, #e299e5 18%, #ae42b3 33%) !important;
  background-size: 100% 20px !important;
}*/

@keyframes placeHolderShimmer {
  0% {
    background-size: 100% 20px !important;
  }

  0% {
    background-size: 200% 20px !important;
  }

  0% {
    background-size: 300% 20px !important;
  }

  100% {
    background-size: 400% 20px !important;
  }
}

.sidebar-menu-icon {
  filter: grayscale(1) !important;
  opacity: 0.8 !important;
}

.sidebar-menu-icon-active {
  filter: none !important;
  opacity: 1 !important;
}

.list-kolom-mengetahui,
.list-kolom-mengetahui .mengetahui {
  display: none;
}

.staff-column-1 label.error {
  font-family: Sen, sans-serif;
  font-size: .95em;
  font-weight: normal;
  color: #C5A059;
  position: relative;
  top: -10px;
  margin-left: 10px;
  display: block;
}

/* Hide error on inline flex */
.login-radio-inline label.error {
  display: none !important;
}

#barcode,
#canvasBarcode {
  position: fixed;
  z-index: -9999999;
}

.staff-action-btns {
  display: none;
}

.scannerFrame {
  width: 100%;
  min-width: 500px;
  min-height: 400px;
}

.flex-1 {
  flex: 1 !important;
}

/*
@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0 !important;
    }
    100%{
        background-position: 468px 0 !important;
    }
}

.login-style-placeholder {
    animation-duration: 1s !important;
    animation-fill-mode: forwards !important;
    animation-iteration-count: infinite !important;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear !important;
    background: #f6f7f8 !important;
    background: linear-gradient(to right, #f9f4f8 8%, #f3e7f1 18%, #f9f4f8 33%) !important;
    background-size: 800px 60px !important;
    position: relative !important;
}*/
@media (min-width: 0px) and (max-width: 1240px) {
  .main-content {
    transform: translateY(-100px);
    margin-bottom: 50px;
    transition: 0.4s 0.22s ease-in-out;
    perspective: 1000px;
  }
}

.app-content {
  transform-style: preserve-3d;
  transition: all 0.2s ease-out;
  transform: rotateX(0deg);
}

.loading-container {
  height: 100px;
  padding: 10px;
  text-align: center;
  /*display: flex;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading-container .loading {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #ae42b3;
  border-right-color: #ae42b3;
  animation: loading 0.5s infinite forwards;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.flex-1 {
  flex: 1 !important;
}

.white {
  color: #fff !important;
}

a {
  color: #ae42b3;
}

.btn-action-staff a {
  color: #fff !important;
}


/* Tugas */
.search-member-loader {
  width: 50px;
  height: 50px;
  display: block;
  margin: 10px auto;
}

/* SVG Animations */
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #ae42b3;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #ae42b3;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  border: rgba(26, 60, 52, 0.4) 8px solid;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {

  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 40px #ae42b3;
  }
}

/* Scrollbars */
body::-webkit-scrollbar-track,
.popup-search-form-content-result::-webkit-scrollbar-track,
.bottom-right-sidebar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

body::-webkit-scrollbar,
.popup-search-form-content-result::-webkit-scrollbar,
.bottom-right-sidebar::-webkit-scrollbar {
  width: 5px;
  background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb,
.popup-search-form-content-result::-webkit-scrollbar-thumb,
.bottom-right-sidebar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #ae42b3;
}

.bottom-right-sidebar::-webkit-scrollbar-track,
.popup-search-form-content-result::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #fff;
}

.bottom-right-sidebar::-webkit-scrollbar,
.popup-search-form-content-result::-webkit-scrollbar {
  width: 5px;
  background-color: #fff;
}

.bottom-right-sidebar::-webkit-scrollbar-thumb,
.popup-search-form-content-result::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #fff;
}

.bottom-right-sidebar:hover::-webkit-scrollbar-track,
.popup-search-form-content-result:hover::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #fff;
}

.bottom-right-sidebar:hover::-webkit-scrollbar,
.popup-search-form-content-result:hover::-webkit-scrollbar {
  width: 5px;
  background-color: #fff;
}

.bottom-right-sidebar:hover::-webkit-scrollbar-thumb,
.popup-search-form-content-result:hover::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #C5A059;
}

/* Staff Availability Status */
.team-status-tag.online-badge {
  background-color: rgba(66, 179, 132, 0.88);
}

.team-status-tag.off-badge {
  background-color: hsla(0, 0%, 47.1%, 0.79);
}

.team-status-tag.break-badge {
  background-color: rgba(196, 126, 28, 0.9);
}

.team-status-tag.busy-badge {
  background-color: rgba(191, 67, 67, 0.9);
}

.team-status-tag.izin-badge {
  background-color: rgba(66, 98, 179, 0.84)
}

.form-notice a {
  color: #fff !important;
  font-weight: bold;
}

/* Citizen Dashboard */
.list-member-menu .arrow-menu-member {
  display: none !important;
}

.list-member-menu:hover .arrow-menu-member {
  display: block !important;
}

.list-member-menu:hover img {
  /*width: 100px !important;*/
  filter: brightness(0) invert(1) !important;
}

.active-menu-citizen {
  background-color: #ae42b3;
  color: #fff;
}

.active-menu-citizen .arrow-menu-member {
  display: block !important;
}

.active-menu-citizen img {
  filter: brightness(0) invert(1) !important;
}

/* Popup Search Form Jenis Usaha */
.popup-search-form-content-result {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

.error strong {
  font-weight: bold !important;
}

.login-style.error {
  margin: 0px 0px 20px;
  padding: 15px 25px;
  height: 55px;
  font-size: 1.1em;
  line-height: 1.4em;
}

.login-style-textarea.error {
  margin: 0px 0px 20px;
  padding: 15px 25px;
  font-size: 1.1em;
  line-height: 1.4em;
}

.login-radio-btn.error {
  margin-left: -20px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-right: 10px;
  padding-left: 0px !important;
}

@media (min-width: 960px) {
  .popup-search-form-content {
    min-width: 960px !important;
  }
}

@media (max-width: 960px) {
  .popup-search-form-content {
    min-width: 98% !important;
  }
}

label.error {
  margin: -10px 5px 25px;
  font-family: Raleway, sans-serif;
  color: #ff4561;
  font-size: 0.95em;
  line-height: 1.4em;
  font-weight: 500;
}

/* Percircle */
.percircle.dark {
  background-color: #777
}

.percircle.dark .bar,
.percircle.dark .fill {
  border-color: #c6ff00
}

.percircle.dark>span {
  color: #777
}

.percircle.dark:after {
  background-color: #555
}

.percircle.dark:hover>span {
  color: #c6ff00
}

.percircle.red .bar,
.percircle.red .fill {
  border-color: #dd5454
}

.percircle.red:hover>span {
  color: #dd5454
}

.percircle.red.dark .bar,
.percircle.red.dark .fill {
  border-color: #f84a4a
}

.percircle.red.dark:hover>span {
  color: #f84a4a
}

.percircle.blue .bar,
.percircle.blue .fill {
  border-color: #82cefa
}

.percircle.blue:hover>span {
  color: #82cefa
}

.percircle.blue.dark .bar,
.percircle.blue.dark .fill {
  border-color: #20cceb
}

.percircle.blue.dark:hover>span {
  color: #20cceb
}

.percircle.green .bar,
.percircle.green .fill {
  border-color: #8dea7b
}

.percircle.green:hover>span {
  color: #8dea7b
}

.percircle.green.dark .bar,
.percircle.green.dark .fill {
  border-color: #a9ff3a
}

.percircle.green.dark:hover>span {
  color: #a9ff3a
}

.percircle.orange .bar,
.percircle.orange .fill {
  border-color: #e88239
}

.percircle.orange:hover>span {
  color: #e88239
}

.percircle.orange.dark .bar,
.percircle.orange.dark .fill {
  border-color: #dc5b00
}

.percircle.orange.dark:hover>span {
  color: #dc5b00
}

.percircle.pink .bar,
.percircle.pink .fill {
  border-color: #ff8ed0
}

.percircle.pink:hover>span {
  color: #ff8ed0
}

.percircle.pink.dark .bar,
.percircle.pink.dark .fill {
  border-color: #ff58b9
}

.percircle.pink.dark:hover>span {
  color: #ff58b9
}

.percircle.purple .bar,
.percircle.purple .fill {
  border-color: #aa7eff
}

.percircle.purple:hover>span {
  color: #aa7eff
}

.percircle.purple.dark .bar,
.percircle.purple.dark .fill {
  border-color: #7a38f7
}

.percircle.purple.dark:hover>span {
  color: #7a38f7
}

.percircle.yellow .bar,
.percircle.yellow .fill {
  border-color: #dcbd00
}

.percircle.yellow:hover>span {
  color: #dcbd00
}

.percircle.yellow.dark .bar,
.percircle.yellow.dark .fill {
  border-color: #ffdb00
}

.percircle.yellow.dark:hover>span {
  color: #ffdb00
}

.percircle.gt50 .slice,
.rect-auto {
  clip: rect(auto, auto, auto, auto)
}

.gt50 .fill,
.percircle .bar,
.pie {
  position: absolute;
  border: .08em solid #fff;
  width: .84em;
  height: .84em;
  clip: rect(0, .5em, 1em, 0);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg)
}

.bar {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}

.gt50 .bar:after,
.gt50 .fill,
.pie-fill {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.percircle {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  background-color: #ae42b3;
}

.percircle *,
.percircle :after,
.percircle :before {
  box-sizing: content-box
}

.percircle.animate:after,
.percircle.animate>span {
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out
}

.percircle.animate .bar {
  -webkit-transition: -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out
}

.percircle.center {
  float: none;
  margin: 0 auto
}

.percircle.big {
  font-size: 240px
}

.percircle.small {
  font-size: 80px
}

.percircle>span {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: 50%;
  height: 1em;
  margin-top: -.3em;
  font-size: .25em;
  color: #fff;
  font-family: 'Sen', sans-serif;
  font-weight: bold;
  display: block;
  text-align: center;
  white-space: nowrap
}

.perclock>span {
  font-size: .175em
}

.percircle:after {
  position: absolute;
  top: .08em;
  left: .08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: #ae42b3;
  width: .84em;
  height: .84em
}

.percircle .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0, 1em, 1em, .5em)
}

.percircle:hover {
  cursor: default
}

.percircle:hover>span {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  color: #fff;
}

.percircle:hover:after {
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

/* End Percircle */

.loader-list-surat {
  display: block;
  width: 120px;
  height: 120px;
  margin: 30px auto;
}



/* Main Navigation Front End */
.main-nav ul>li>ul {
  position: absolute;
  left: 200px;
  top: 0px !important;
  z-index: 9999;
  display: none;
  width: 200px;
  padding-left: 0px;
  padding-top: 0px !important;
  background-color: hsla(0, 0%, 63.3%, 0.17);
  list-style-type: none;
}

.main-nav-li:hover ul {
  display: block;
}

.main-nav-li:hover ul li ul {
  display: none;
}

.main-nav-li:hover ul li:hover ul {
  display: block;
}

.main-nav-li ul li:hover ul {
  font-size: 1em !important;
}

/* On Light Page */
.light-page .main-nav-li-a {
  color: rgba(0, 0, 0, 0.62) !important;
}

.light-page .main-nav-li-a:hover {
  color: #fff !important;
}

/* Blog Post */
/* Graphik */
@font-face {
  font-family: 'Graphik';
  src: url('../../../assets/fonts/Graphik-Medium-Web.woff2') format('woff2'), url('../../../assets/fonts/Graphik-Medium-Web.eot') format('embedded-opentype'), url('https://assets.website-files.com/6009e6adcf8c45466fee3e56/601316e6d6cd69fc5020cf83_Graphik-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../../../assets/fonts/Graphik-MediumItalic-Web.woff2') format('woff2'), url('../../../assets/fonts/Graphik-MediumItalic-Web.eot') format('embedded-opentype'), url('../../../assets/fonts/Graphik-MediumItalic-Web.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../../../assets/fonts/Graphik-RegularItalic-Web.woff2') format('woff2'), url('../../../assets/fonts/Graphik-RegularItalic-Web.eot') format('embedded-opentype'), url('../../../assets/fonts/Graphik-RegularItalic-Web.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../../../assets/fonts/Graphik-Regular-Web.woff2') format('woff2'), url('../../../assets/fonts/Graphik-Regular-Web.eot') format('embedded-opentype'), url('../../../assets/fonts/Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GraphikWide';
  src: url('../../../assets/fonts/GraphikWide-Medium-Web.woff2') format('woff2'), url('../../../assets/fonts/GraphikWide-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GraphikWide';
  src: url('../../../assets/fonts/Graphik%20Wide-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GraphikWide';
  src: url('../../../assets/fonts/Graphik%20Wide-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Blog Content */
.blog-post p {
  margin-bottom: 30px;
  font-family: 'Graphik', sans-serif;
  line-height: 1.6em;
  font-size: 1.2em;
}

.blog-post>* {
  color: rgba(0, 0, 0, 0.7);
}

.blog-post h1 {
  font-family: Graphik, sans-serif;
  font-size: 2.4em;
  line-height: 1.4em;
  margin-bottom: 25px;
  font-weight: 700;
  color: #000;
}

.blog-post h2 {
  font-family: Graphik, sans-serif;
  font-size: 2em;
  line-height: 1.4em;
  margin-bottom: 25px;
  font-weight: 700;
  color: #000;
}

.blog-post h3 {
  margin-top: 15px;
  font-family: Graphik, sans-serif;
  font-size: 1.8em;
  line-height: 1.4em;
  margin-bottom: 25px;
  font-weight: 700;
  color: #000;
}

.blog-post h4 {
  margin-top: 15px;
  font-family: Graphik, sans-serif;
  font-size: 1.4em;
  line-height: 1.6em;
  margin-bottom: 25px;
  font-weight: 400;
}

.blog-post h5 {
  margin-top: 15px;
  font-family: Graphik, sans-serif;
  font-size: 1.2em;
  line-height: 1.6em;
  margin-bottom: 25px;
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  .blog-post p {
    margin-bottom: 30px;
    font-family: 'Graphik', sans-serif;
    line-height: 1.6em;
    font-size: 1.1em;
    margin-bottom: 20px;
  }

  .blog-post h1 {
    font-size: 1.8em;
    margin-bottom: 20px;
  }

  .blog-post h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
  }

  .blog-post h3 {
    font-size: 1.4em;
    margin-bottom: 20px;
  }

  .blog-post h4 {
    font-size: 1.2em;
    margin-bottom: 20px;
    font-weight: 500;
  }

}

/* Mobile Navigation */
.mobile-nav-menus-list ul {
  display: none;
}

.list-member-menu-mobile-nav img {
  filter: brightness(100);
}