@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,900&display=swap);
/*@import url('https://fonts.googleapis.com/css2?family=Chilanka&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;600&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,400&display=swap');*/

/* Global Akses */
textarea {
  resize: none;
}

/* Spacing */
.m-1 {
  margin: 1px !important;
}
.m-2 {
  margin: 2px !important;
}
.m-3 {
  margin: 3px !important;
}
.m-4 {
  margin: 4px !important;
}
.m-5 {
  margin: 5px !important;
}

/* Text Align */
.text-top {
  vertical-align: top !important;
}
.text-middle {
  vertical-align: middle !important;
}
.text-bottom {
  vertical-align: bottom !important;
}

/* No Padding */
.padding-remove-side {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.padding-remove-left {
  padding-left: 0;
}
.padding-remove-right {
  padding-right: 0;
}

/* FAKTUR / INVOICE / NOTA */
/* #print-paper {
  background-color: #d2d2d2;
} */
#print-header {
  border: 1px solid #c3c3c3;
  padding: 5px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#print-header > div:nth-child(1) {
  border: 1px solid #c3c3c3;
  padding: 5px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#print-header > div:nth-child(2) {
  border: 1px solid #c3c3c3;
  padding: 5px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#tandatangan > div {
  margin-top: 70px;
}
#tandatangan > div > div {
  border-top: 1px dashed gray;
}
#tandatangan h5 {
  text-align: center;
}
#print-content {
  border: 1px solid #c3c3c3;
  padding: 5px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#print-footer {
  border: 1px solid #c3c3c3;
  padding: 5px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
@media print {
  body {
    /*font-family:"Courier New", Courier, monospace; */
    /*font-family: 'Roboto';*/
    font-size: 12px;
    /*border:1px solid red;*/
  }
}

table {
  font-size: 12px;
}
body {
  font-family: var(--font-family);
  font-size: 12px;
  background-color: var(--back-primary) !important;
}

/* Tambahan */
.user-info .username {
  color: var(--theme-font);
  font-size: 14px;
  font-weight: 800;
}
.user-info .status {
  color: var(--theme-font);
  font-size: 12px;
  font-weight: 800;
}
#logo-system {
  margin-top: 4px;
  margin-left: 4px;
  margin-bottom: 4px;
  margin-right: 4px;
  /*height: 28px;
	width: 132px;*/
  /*height: 34px;*/
  /*width: 134px;*/
  width: 200px;
}
#logo-system-2 {
  margin-top: 1px;
  margin-left: 4px;
  /*height: 28px;
	width: 132px;*/
  /*height: 34px;*/
  /*width: 134px;*/
  width: 200px;
}

/* HEADER */
.header-quick-nav > div {
  height: 50px;
}
/* .header {
  background-color:#e63030!important;
} */
.header a {
  color: var(--sidebar-font-color);
}
.header .nav > li.quicklinks > a i {
  font-size: 20px !important;
}
.header .nav > li.quicklinks > a > span {
  font-size: 14px !important;
}
.quick-section {
  margin-top: 10px !important;
}
.quicklinks > a {
  /* color: var(--theme-font); */
  padding: 0px !important;
}
.nav > li.dropdown {
  background-color: var(--back-primary);
}
.nav > li > a:hover,
.nav > li > a:focus {
  /*background-color: var(--back-primary);*/
  color: var(--sidebar-font-color-hover) !important;
}
.nav-tabs > li > a {
  padding: 10px 15px !important;
}
.nav-tabs > li > a:hover {
  color: #555 !important;
  cursor: pointer !important;
}
.header-seperation {
  background-color: var(--back-primary);
  height: 50px !important;
}
.header-quick-nav {
  background-color: var(--back-shadow);
  height: 50px !important;
  /*border-bottom:2px solid blue;*/
  box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03),
    0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03),
    0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05),
    0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
}
.notifcation-center {
  background-color: var(--back-primary);
  margin-top: 1px !important;
  margin-right: 1px !important;
}
.notifcation-center > li {
  background-color: var(--back-primary);
}
.header > .notifcation-center > li > a > i {
  color: var(--theme-font);
}

/* STATISTIC*/
.dropdown-statistic {
  left: -68px !important;
  top: 32px !important;
  border: 1px solid #a2a5a7 !important;
  padding: 2px 2px !important;
}
.dropdown-menu > li {
  background-color: white;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px,
    rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
.dropdown-menu > li > a {
  font-size: 14px !important;
}

/* SIDEBAR */
.page-sidebar {
  /*background-color: var(--back-shadow);*/
  background-color: var(--sidebar-background-color) !important;
  margin-top: 50px !important;
}
#sidebar > li.start > a {
  padding: 4px 10px 4px 2px;
  font-weight: 600;
  font-size: var(--sidebar-font-size);
  color: var(--sidebar-font-color);
  background-color: var(--sidebar-background-color); /*!important*/
}
#sidebar > li.start > ul > li.li-report > ul > li > a {
  margin-left: 60px !important;
}
#sidebar > li.start > a:hover,
#sidebar > li.start > ul.sub-menu > li.start > a:hover,
#sidebar > li.start > ul.sub-menu > li.start.li-report > ul.sub-menu > li:hover,
#sidebar
  > li.start
  > ul.sub-menu
  > li.start.li-report
  > ul.sub-menu
  > li.start
  > a:hover {
  font-weight: 600;
  color: var(--sidebar-font-color-hover) !important;
  background: var(--back-shadow) !important;
  font-size: var(--sidebar-font-size);
  /*padding-left:20px!important; */
}
#sidebar > li.start > a > i {
  font-size: 14px;
  top: 0;
}
#sidebar > li.open > ul.open > li > a {
  padding: 2px 0px;
  padding-left: 26px !important;
  font-size: 14px;
}
#sidebar > li > a > .material-icons {
  position: relative;
  top: 4px;
}
.separate {
  background-color: #d1dade;
  width: 84%;
  height: 1px;
  left: 12px;
  position: relative;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.menu-title {
  color: var(--theme-font);
}
.menu-title a {
  color: var(--theme-font);
}
/* .header-quick-nav {
  background-color: var(--back-primary);
} */
/*.page-sidebar-wrapper > ul > li > a{
	color:var(--theme-font);
	background-color:var(--back-primary);
}
.page-sidebar-wrapper > ul > li > a > i{
	color:var(--theme-font);
}
.page-sidebar-wrapper > ul > li:hover > a{
	color:var(--theme-font);
	background-color:var(--back-hover);
}
.page-sidebar-wrapper > ul > li > ul.sub-menu{
	background-color: var(--back-shadow);
	color:var(--theme-font);
}
.page-sidebar .page-sidebar-wrapper > ul > li.open > a, .page-sidebar .page-sidebar-wrapper > ul > li > a:hover, .page-sidebar .page-sidebar-wrapper > ul > li:hover > a {
	background-color:var(--back-primary);
	color:var(--theme-font);
}
.page-sidebar .page-sidebar-wrapper > ul > li > a {
	color:var(--theme-font);	
}
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu > li > a {
	color:var(--theme-font);
}
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu > li > a:hover {
	color: var(--theme-font);
	background: var(--back-primary);
}
.page-sidebar-wrapper > ul > li.start > a {
	background-color: var(--back-primary);
}*/

/* Footer */
.footer-widget {
  background-color: var(--back-primary);
}
.footer-widget .details-status {
  color: var(--theme-font);
  background-color: var(--back-shadow);
}
.footer-widget a {
  color: var(--theme-font);
}
.footer-widget i {
  color: var(--theme-font);
}

.kolom-ttd {
  margin-top: 50px;
}
/* .kolom-ttd > div {
  border-top:1px solid gray;margin:10px;
} */
.kolom-ttd h5 {
  text-align: center;
}

/*
.user-info-wrapper .user-info {
  color: #5f5e5e;
  display: inline-block;
}
.menu-title{
	color:#5f5e5e!important;
}
.page-sidebar{
	background-color:#ffffff!important;
}
.page-sidebar .page-sidebar-wrapper > ul > li.open > a, .page-sidebar .page-sidebar-wrapper > ul > li > a:hover, .page-sidebar .page-sidebar-wrapper > ul > li:hover > a {
  background-color: #d0cbcb!important;
  color: #403f3f;
}
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu {
  background-color: #ff0000;
}
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu {
  background-color: #dadada;
}
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu > li > a {
  color: #35383a;
}
.page-sidebar .page-sidebar-wrapper ul > li.open > a i, .page-sidebar .page-sidebar-wrapper > ul > li.open > a i {
  color: #5e5d5d !important;
} */

/* Hover Label */
.label-green {
  background-color: rgb(46, 204, 113);
  color: white;
}
.label-orange {
  background-color: #faa652;
  color: white;
}
.label-blue {
  background-color: #0090d9;
  color: white;
}
.label-red {
  background-color: rgb(231, 76, 60);
  color: white;
}
.label-black {
  background-color: #454b50;
  color: white;
}
.label-purple {
  background-color: rgb(155, 89, 182);
  color: white;
}
.label-yellow {
  background-color: rgb(241, 196, 15);
  color: #737373;
}
.label-peach {
  background-color: rgb(52, 231, 228);
  color: #ffe4b5;
}
.label-cyan {
  background-color: #00ffff;
  color: #737373;
}

/* Lain-lain */
.grid-body h5 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.grid.simple .grid-body {
  padding: 8px 8px 8px 8px !important;
}
.progress-bar {
  background-color: var(--theme-font);
}
.btn-full {
  width: 100%;
}
.close {
  position: relative;
  top: -28px;
  color: white;
}
.close > span {
  color: white;
  /*opacity: 0;*/
}
.pic-user-sidebar {
  background-color: transparent !important;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fixed-sidebar {
  padding-bottom: 60px !important;
  display: block !important;
}
.bg-transparent {
  background-color: transparent !important;
}

@media (max-width: 767px) {
  .padding-remove-left,
  .padding-remove-right {
    /*padding-left:15px!important;*/
    /*padding-right: 15px!important;*/
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  /* .padding-remove-side {
    padding-left: 15px!important;
    padding-right: 15px!important;
  } */
}

/* custome daterangepicker */
.calendar-table > table > thead > tr > th,
.calendar-table > table > tbody > tr > td {
  padding: 0px !important;
}
.filter-daterangepicker {
  background: #fff;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #a2a4a6;
  width: 100%;
  border-radius: 4px;
}

/* custome scrollbar */
.scroll-bar {
  background-color: var(--theme-font);
}

/* custome clockpicker popup in modal */
.clockpicker-popover {
  z-index: 99999999999 !important; /* 999999 */
}

/* Floating Buttom */
.btn-floating-container {
  right: 50px;
  bottom: 50px;
  position: fixed;
}
.btn-floating {
  width: 50px;
  height: 50px;
  border-radius: 40%;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(245, 245, 245, 0.075);
  text-align: center;
  padding: 0px;
  font-size: 24px;
}

/* background profile user dashboard */
.profile-user {
  height: 100px !important;
  animation: animateBg 25s linear infinite;
  background-image: linear-gradient(
    90deg,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #522ae8,
    #cd76d6,
    #ff0000,
    #ffff00
  );
  background-size: 900% 100%;
}
@keyframes animateBg {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* custome btn pada google map */
.pac-container {
  z-index: 10000 !important;
}
.custom-map-control-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.custom-map-control-button:hover {
  background: rgb(235, 235, 235);
}

/* fix width data table */
.table-responsive {
  overflow-x: unset;
}

/* fix label display */
.label {
  line-height: 2 !important;
}

.disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

/* start responsive website resolusi */
/* very small devices */
@media only screen and (max-width: 283px) {
  #logo-system {
    margin-left: -50px;
    margin-right: -50px;
    width: 130px !important;
    margin-top: 10px !important;
  }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #logo-system {
    width: 160px;
    margin-top: 10px;
  }
  .page-sidebar {
    width: 212px;
  }
  .page-content .content {
    padding-top: 65px !important;
  }
  .fixed-sidebar {
    overflow: hidden !important;
  }
  .fixed-scrollbar-x-sidebar-from-page-container {
    overflow-x: clip;
  }

  /* jquery scrollbar */
  .scroll-wrapper > .scroll-content {
    width: 100% !important;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .fixed-sidebar {
    overflow: hidden !important;
  }
  .fixed-scrollbar-x-sidebar-from-page-container {
    overflow-x: clip;
  }
  .page-content .content {
    padding-top: 65px !important;
  }

  /* jquery scrollbar */
  .scroll-wrapper > .scroll-content {
    width: 100% !important;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .page-sidebar .page-sidebar-wrapper {
    float: none !important;
    height: auto !important;
    width: auto !important;
    position: absolute !important;
  }
  .page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu {
    background-color: var(--back-primary);
  }
  .page-sidebar .page-sidebar-wrapper > ul {
    padding-top: 5px !important;
  }
  #sidebar > li.start > a {
    padding: 13px;
  }
  .page-content .content {
    padding-top: 65px !important;
  }
  .fixed-sidebar {
    overflow: visible !important;
  }
}
/* Large devices (laptops/desktops, 1025px and up) 992px */
@media only screen and (min-width: 1025px) {
  .page-sidebar .page-sidebar-wrapper {
    float: left !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
  }
  .page-sidebar {
    width: 212px;
  }
  #sidebar > li.start > a {
    padding: 4px 10px 4px 2px;
  }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .page-sidebar {
    width: 212px;
  }
}
/* end responsive website resolusi */