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%, #e299e5 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: #AE42B3;
	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: #952c9a;
  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 #952c9a;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  border:rgba(174, 66, 179, 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 #952c9a;
  }
}

/* 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: #f1a2f5;
}

/* 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: #d091d3;
}

.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);
}