@font-face {
  font-family: 'OpenSans-Regular';
font-display: swap;
src: url('fonts/OpenSans-Regular.woff2') format('woff2'), 
  url('fonts/OpenSans-Regular.woff') format('woff');
}
@font-face {
  font-family: 'OpenSans-Bold';
font-display: swap;
src: url('fonts/OpenSans-Bold.woff2') format('woff2'), 
  url('fonts/OpenSans-Bold.woff') format('woff');
}



body{
 font-family: 'Open Sans', sans-serif!important;
 background-color: #f7f7f7;
 font-size: 14px !important;
 color: #5c5c5c !important;


}
h1, h2, h3, h4, h5{
  font-family: 'Open Sans', sans-serif!important;

}
#example1_wrapper .scrol-parent, #example_wrapper .scrol-parent, #example2_wrapper .scrol-parent {
  overflow:auto;
  overflow-y: hidden;
  clear: both;
  width: 100%;
}
 
.dataTables_wrapper{
  padding-bottom: 10px;
}

#example_wrapper div.form-check{overflow: revert;}

input[readonly="readonly"] {
  background: #F7F7F7!important;
  }


input[type=text]:focus{
  box-shadow: 0 !important;
}
.btn-square-close{
  border: 0;
    height: 28px;
}
.kpi_name_tr{    
  width: 300px;
  white-space: break-spaces;
}
.z-avg{    width: 68px;}

.form-check input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e")!important;
  border-color: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(0,0,0,.25)!important;
}
.toast-close-button{
  top: 0 !important
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important;
}
table #kpi_number{white-space: initial;}

/* .dimensi table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after{
  display:none;
} */

/* .dimensi table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after {
  display:none;
} */


textarea:focus, 
button:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus,  
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
/* [contenteditable].form-control:focus {
box-shadow: inset 0 -1px 0 #D0D0D0;
} */
.btn-check:focus+.btn, .btn:focus {
outline: 0!important;
box-shadow: none!important;
border-color: #01D0A6 !important;
}

.emoj-img-box .outline {
  outline: 0!important;
  box-shadow: none!important;
  border-color: #01D0A6 !important;
  }

textarea {
  outline: 0;
  font-size: 14px;
  color: #686868;
}
section.innerpage-contain.title-h6 h6 {
  font-size: 14px;
}
table form a{
cursor: pointer;
} 
input[type="checkbox"] {
cursor: pointer;
}
.btn:disabled {
  opacity: inherit !important;
}
.papan-title .breadcrumb{
  padding: 0;
  margin-bottom: 0;
  font-size: 12px;
}
.breadcrumb-item+.breadcrumb-item::before {
  color: #000!important;
  content: "\f105"!important;
  font-family: FontAwesome!important;
  font-size: 12px;
}

.document span figure td{white-space: normal !important;}

@media screen and (prefers-reduced-motion: reduce) {
.fade {
  transition: none;
}
}
.fade:not(.show) {
opacity: 0;
}
.collapse:not(.show) {
display: none;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
@media screen and (prefers-reduced-motion: reduce) {
.collapsing {
  transition: none;
}
}
.dropup,
.dropright,
.dropdown,
.dropleft {
position: relative;
}
.dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
button.head-btn {
border: 1px solid #D0D0D0;
border-radius: 0;
padding: 2px 0;
font-size: 14px;
color: #2f2f2f;
}
.dropdown-toggle:empty::after {
margin-left: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 13rem;
padding: 0.65rem 0;
margin: 0.125rem 0 0;
font-size: 0.88rem;
color: #495057;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
@media (min-width: 576px) {
.dropdown-menu-sm-right {
  right: 0;
  left: auto;
}
}
@media (min-width: 768px) {
.dropdown-menu-md-right {
  right: 0;
  left: auto;
}
}
@media (min-width: 992px) {
.dropdown-menu-lg-right {
  right: 0;
  left: auto;
}
}
@media only screen and (max-width: 1230px) and (min-width: 1024px)  {
  .widget-heading {
    margin-right: -15px;
  }
  .widget-heading {
    margin-right: 0px !important;
  }
  .app-header .app-header__content .header-menu .nav-link{
    padding: .5rem 0.5rem;
  }
  ul.header-menu.nav{
    flex-wrap: nowrap;
  }
}
@media (min-width: 1200px) {
 
.dropdown-menu-xl-right {
  right: 0;
  left: auto;
}
}
.dropdown-menu-left {
right: auto;
left: 0;
}
@media (min-width: 576px) {
.dropdown-menu-sm-left {
  right: auto;
  left: 0;
}
}
@media (min-width: 768px) {
.dropdown-menu-md-left {
  right: auto;
  left: 0;
}
}
@media (min-width: 992px) {
.dropdown-menu-lg-left {
  right: auto;
  left: 0;
}
}
@media (min-width: 1200px) {
.dropdown-menu-xl-left {
  right: auto;
  left: 0;
}
}
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 0.125rem;
}
.dropup .dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0;
border-right: 0.3em solid transparent;
border-bottom: 0.3em solid;
border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
margin-left: 0;
}
.dropright .dropdown-menu {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
margin-left: 0.125rem;
}
.dropright .dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid transparent;
border-right: 0;
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid;
}
.dropright .dropdown-toggle:empty::after {
margin-left: 0;
}
.dropright .dropdown-toggle::after {
vertical-align: 0;
}
ul.select2-selection__rendered {
  display: block !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear{
  margin-top: 0 !important;
}
.dropleft .dropdown-menu {
top: 0;
right: 100%;
left: auto;
margin-top: 0;
margin-right: 0.125rem;
}
.dropleft .dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
}
.dropleft .dropdown-toggle::after {
display: none;
}
.dropleft .dropdown-toggle::before {
display: inline-block;
margin-right: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid transparent;
border-right: 0.3em solid;
border-bottom: 0.3em solid transparent;
}
.dropleft .dropdown-toggle:empty::after {
margin-left: 0;
}
.dropleft .dropdown-toggle::before {
vertical-align: 0;
}
.dropdown-menu[x-placement^="top"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"] {
right: auto;
bottom: auto;
}
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.4rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
color: #16181b;
text-decoration: none;
background-color: #e0f3ff;
}
.dropdown-item.active,
.dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #3f6ad8;
}
.dropdown-item.disabled,
.dropdown-item:disabled {
color: #6c757d;
pointer-events: none;
background-color: transparent;
}
.dropdown-menu.show {
display: block;
margin-bottom:0!important;
}
.dropdown-header {
display: block;
padding: 0.65rem 1.5rem;
margin-bottom: 0;
font-size: 0.968rem;
color: #6c757d;
white-space: nowrap;
}
.dropdown-item-text {
display: block;
padding: 0.4rem 1.5rem;
color: #212529;
}
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
flex: 1 1 auto;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
z-index: 1;
}
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
z-index: 1;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
margin-left: -1px;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
margin-left: 0;
}
.dropleft .dropdown-toggle-split::before {
margin-right: 0;
}
.btn-sm + .dropdown-toggle-split,
.btn-group-sm > .btn + .dropdown-toggle-split {
padding-right: 0.375rem;
padding-left: 0.375rem;
}
.btn-lg + .dropdown-toggle-split,
.btn-group-lg > .btn + .dropdown-toggle-split {
padding-right: 0.75rem;
padding-left: 0.75rem;
}


.nav-link:hover,
.nav-link:focus {
text-decoration: none;
}
.nav-link.disabled {
color: #6c757d;
pointer-events: none;
cursor: default;
}


/* .app-sidebar .scrollbar-sidebar {
  z-index: 15;
  width: 100%;

} */
.scrollbar-sidebar, .scrollbar-container {
  position: relative;
  height: 100%;
}
.scrollbar-sidebar{
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll; 
}
.scrollbar-sidebar::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}





.app-container {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}

.app-header {
height: 60px;
display: flex;
align-items: center;
align-content: center;
position: relative;
z-index: 10;
transition: all 0.2s;
}
.app-header.header-shadow {
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);
}
.app-header .app-header__content {
display: flex;
align-items: center;
align-content: center;
flex: 1;
padding: 0 1.5rem;
height: 60px;
}
.app-header .app-header__content .app-header-left {
display: flex;
align-items: center;
}
.app-header .app-header__content .header-menu .nav-link {
color: #6c757d;
display: flex;
}
.app-header .app-header__content .header-menu .nav-link i {
color: #666666;
font-size: 16px;
margin-bottom: 3px;
}
.app-header .app-header__content .header-menu .nav-link:hover {
color: #212529;
}
.app-header .app-header__content .app-header-right {
align-items: center;
display: flex;
margin-left: auto;
}
.app-header .header-user-info > .widget-heading,
.app-header .header-user-info > .widget-subheading {
white-space: nowrap;
}
.app-header .header-user-info > .widget-subheading {
font-size: 0.8rem;
}
.widget-content-wrapper {
  display: flex;
  align-items: center;
 
}
.app-header__logo {
padding:0 10px;
height: 60px;
width: 220px;
display: flex;
align-items: center;
transition: width 0.2s;
justify-content: space-between;
}
.app-header__logo .logo-src {
height: 160px;
width: 165px;
background: url(../images/kpi_new_4.png);
background-repeat: no-repeat;
background-size: contain;
}
.app-header__menu,
.app-header__mobile-menu {
display: none;
padding: 0 1.5rem;
height: 60px;
align-items: center;
}
.fixed-header .app-header {
position: fixed;
width: 100%;
top: 0;
background:#fff;
border-bottom: #E0E0E0 solid 1px;
}
.fixed-header .app-header .app-header__logo {
visibility: visible;
}
.fixed-header .app-main {
padding-top: 15px;
display:flex;
}
.fixed-header:not(.fixed-sidebar):not(.closed-sidebar)
.app-sidebar
.app-header__logo {
visibility: hidden;
}
.app-header.header-text-light .app-header-left > .nav > li > .nav-link {
color: rgba(255, 255, 255, 0.7);
}
.app-header.header-text-light
.app-header-left
> .nav
> li
> .nav-link
.nav-link-icon {
color: rgba(255, 255, 255, 0.8);
}
.app-header.header-text-light .app-header-left > .nav > li > .nav-link:hover {
color: #fff;
}
.app-header.header-text-light .app-header-right .icon-wrapper-alt .fa,
.app-header.header-text-light .app-header-right .icon-wrapper-alt .icon {
color: rgba(255, 255, 255, 0.7) !important;
transition: all 0.2s;
}
.app-header.header-text-light
.app-header-right
.icon-wrapper-alt
.icon-wrapper-bg {
background: rgba(255, 255, 255, 0.1) !important;
transition: all 0.2s;
opacity: 1;
}
.app-header.header-text-light .app-header-right .icon-wrapper-alt:hover .fa,
.app-header.header-text-light .app-header-right .icon-wrapper-alt:hover .icon {
color: rgba(255, 255, 255, 0.9) !important;
}
.app-header.header-text-light
.app-header-right
.icon-wrapper-alt:hover
.icon-wrapper-bg {
background: rgba(255, 255, 255, 0.15) !important;
}
.app-header.header-text-light .app-header-right .icon-wrapper-alt .badge-dot {
border-color: transparent;
}
.app-header.header-text-light
.app-header-right
> .header-btn-lg
.widget-content-left
.btn-group
> .btn,
.app-header.header-text-light
.app-header-right
> .header-btn-lg
.widget-heading,
.app-header.header-text-light
.app-header-right
> .header-btn-lg
.widget-subheading {
color: rgba(255, 255, 255, 0.8);
}
.app-header.header-text-light
.app-header-right
> .header-btn-lg
.header-user-info
> .btn-shadow {
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1),
  0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.app-header.header-text-light .search-wrapper .input-holder .search-icon {
background: rgba(0, 0, 0, 0.1);
}
.app-header.header-text-light
.search-wrapper
.input-holder
.search-input::placeholder,
.app-header.header-text-light
.search-wrapper
.input-holder
.search-input::-webkit-input-placeholder,
.app-header.header-text-light
.search-wrapper
.input-holder
.search-input:-ms-input-placeholder,
.app-header.header-text-light
.search-wrapper
.input-holder
.search-input:-moz-placeholder,
.app-header.header-text-light
.search-wrapper
.input-holder
.search-input::-moz-placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
.app-header.header-text-light .search-wrapper.active .input-holder {
background: rgba(255, 255, 255, 0.1);
}
.app-header.header-text-light
.search-wrapper.active
.input-holder
.search-input {
color: rgba(255, 255, 255, 0.8);
}
.app-header.header-text-light
.search-wrapper.active
.input-holder
.search-icon {
background: rgba(255, 255, 255, 0.1);
}
.app-header.header-text-light .header-btn-lg::before {
background: rgba(255, 255, 255, 0.2);
}
.app-header.header-text-light .header-btn-lg .hamburger-inner,
.app-header.header-text-light
.header-btn-lg
.hamburger.is-active
.hamburger-inner,
.app-header.header-text-light .header-btn-lg .hamburger-inner::before,
.app-header.header-text-light .header-btn-lg .hamburger-inner::after,
.app-header.header-text-light .header__pane .hamburger-inner,
.app-header.header-text-light
.header__pane
.hamburger.is-active
.hamburger-inner,
.app-header.header-text-light .header__pane .hamburger-inner::before,
.app-header.header-text-light .header__pane .hamburger-inner::after {
background-color: rgba(255, 255, 255, 0.8) !important;
}
.app-header.header-text-light
.search-wrapper
.input-holder
.search-icon
span::after {
border-color: rgba(255, 255, 255, 0.8);
}
.app-header.header-text-light .search-wrapper .close::before,
.app-header.header-text-light .search-wrapper .close::after,
.app-header.header-text-light
.search-wrapper
.input-holder
.search-icon
span::before {
background: rgba(255, 255, 255, 0.8);
}
.app-header.header-text-light .app-header__logo .logo-src {
background: url(assets/images/logo.png);
}
.app-header.header-text-light .app-header__mobile-menu .hamburger-inner,
.app-header.header-text-light .app-header__mobile-menu .hamburger-inner::before,
.app-header.header-text-light .app-header__mobile-menu .hamburger-inner::after {
background: rgba(255, 255, 255, 0.9);
}
.app-header.header-text-dark .app-header-left > .nav > li > .nav-link {
color: rgba(0, 0, 0, 0.7);
}
.app-header.header-text-dark
.app-header-left
> .nav
> li
> .nav-link
.nav-link-icon {
color: rgba(0, 0, 0, 0.8);
}
.app-header.header-text-dark .app-header-left > .nav > li > .nav-link:hover {
color: #000;
}
.app-header.header-text-dark .app-header-right .icon-wrapper-alt .fa,
.app-header.header-text-dark .app-header-right .icon-wrapper-alt .icon {
color: rgba(0, 0, 0, 0.7) !important;
transition: all 0.2s;
}
.app-header.header-text-dark
.app-header-right
.icon-wrapper-alt
.icon-wrapper-bg {
background: rgba(0, 0, 0, 0.1) !important;
transition: all 0.2s;
opacity: 1;
}
.app-header.header-text-dark .app-header-right .icon-wrapper-alt:hover .fa,
.app-header.header-text-dark .app-header-right .icon-wrapper-alt:hover .icon {
color: rgba(0, 0, 0, 0.95) !important;
}
.app-header.header-text-dark
.app-header-right
.icon-wrapper-alt:hover
.icon-wrapper-bg {
background: rgba(0, 0, 0, 0.15) !important;
}
.app-header.header-text-dark .app-header-right .icon-wrapper-alt .badge-dot {
border-color: transparent;
}
.app-header.header-text-dark
.app-header-right
> .header-btn-lg
.widget-content-left
.btn-group
> .btn,
.app-header.header-text-dark .app-header-right > .header-btn-lg .widget-heading,
.app-header.header-text-dark
.app-header-right
> .header-btn-lg
.widget-subheading {
color: rgba(0, 0, 0, 0.8);
}
.app-header.header-text-dark
.app-header-right
> .header-btn-lg
.header-user-info
> .btn-shadow {
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1),
  0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.app-header.header-text-dark .search-wrapper .input-holder .search-icon {
background: rgba(0, 0, 0, 0.1);
}
.app-header.header-text-dark .search-wrapper.active .input-holder {
background: rgba(0, 0, 0, 0.1);
}
.app-header.header-text-dark
.search-wrapper.active
.input-holder
.search-input {
color: rgba(0, 0, 0, 0.8);
}
.app-header.header-text-dark .search-wrapper.active .input-holder .search-icon {
background: rgba(0, 0, 0, 0.1);
}
.app-header.header-text-dark .header-btn-lg::before {
background: rgba(0, 0, 0, 0.2);
}
.app-header.header-text-dark .header-btn-lg .hamburger-inner,
.app-header.header-text-dark
.header-btn-lg
.hamburger.is-active
.hamburger-inner,
.app-header.header-text-dark .header-btn-lg .hamburger-inner::before,
.app-header.header-text-dark .header-btn-lg .hamburger-inner::after,
.app-header.header-text-dark .header__pane .hamburger-inner,
.app-header.header-text-dark
.header__pane
.hamburger.is-active
.hamburger-inner,
.app-header.header-text-dark .header__pane .hamburger-inner::before,
.app-header.header-text-dark .header__pane .hamburger-inner::after {
background-color: rgba(0, 0, 0, 0.8) !important;
}
.app-header.header-text-dark
.search-wrapper
.input-holder
.search-icon
span::after {
border-color: rgba(0, 0, 0, 0.8);
}
.app-header.header-text-dark .search-wrapper .close::before,
.app-header.header-text-dark .search-wrapper .close::after,
.app-header.header-text-dark
.search-wrapper
.input-holder
.search-icon
span::before {
background: rgba(0, 0, 0, 0.8);
}
.app-header.header-text-dark .app-header__logo .logo-src {
background: url(assets/images/logo-inverse.png);
}
.app-sidebar {
width: 240px;
display: flex;
z-index: 11;
overflow: hidden;
min-width: 240px;
position: relative;
flex: 0 0 280px;
margin-top: -60px;
padding-top: 60px;
transition: all 0.2s;
}
.app-sidebar .app-sidebar__inner {
padding: 2px 0rem 0rem;
/* background: #332A7B; */
background: #8c0b1a;
height: 100vh;
height: auto;
}

.app-sidebar .app-sidebar-bg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
opacity: 0.05;
background-size: cover;
z-index: 10;
}
.app-sidebar .app-header__logo {
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 11;
}

.app-sidebar__heading {
text-transform: uppercase;
font-size: 0.8rem;
margin: 0.75rem 0;
font-weight: 700;
/* color: #3f6ad8; */
color: #3f6ad8;
white-space: nowrap;
position: relative;
}
.sidebar-mobile-overlay {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #333;
opacity: 0.6;
left: 0;
top: 0;
z-index: 12;
}
.vertical-nav-menu {
margin: 0;
padding: 10px 0;
position: relative;
list-style: none;
}
.vertical-nav-menu::after {
content: " ";
pointer-events: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.vertical-nav-menu .mm-collapse:not(.mm-show) {
display: block;
}
.vertical-nav-menu .mm-collapsing {
position: relative;
height: 0;
overflow: hidden;
transition-timing-function: ease;
transition-duration: 0.25s;
transition-property: height, visibility;
}

.vertical-nav-menu:before {
opacity: 0;
transition: opacity 300ms;
}
.vertical-nav-menu li a {
  display: flex;
  line-height: initial;
  height: auto;
  padding: 8px 0.5rem 0 10px;
  position: relative;
  border-radius: 0.25rem;
  color: #ABB9E8;
  white-space: nowrap;
  transition: all 0.2s;
  margin: 0.5rem 0;
  text-decoration: none;
  font-size: 0.8rem;
  white-space: normal;
}
img.metismenu-state-icon.caret-left {
float: right;
margin-left: auto;
transition: 0.5s;
}
img.metismenu-icon {
margin-right: 7px;
margin-top: -10px;
}
.vertical-nav-menu li a:hover {
color: #fff;
}
.vertical-nav-menu li a:hover i.metismenu-icon {
opacity: 0.6;
}
.vertical-nav-menu li a:hover i.metismenu-state-icon {
opacity: 1;
}

.vertical-nav-menu li.mm-active > a i.metismenu-state-icon {
transform: rotate(-180deg);
}

.vertical-nav-menu i.metismenu-state-icon,
.vertical-nav-menu i.metismenu-icon {

  text-align: center;
  width: 34px;
  height: 34px;
  line-height: 34px;
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -17px;
  font-size: 1.2rem;
  opacity: 0.7;
  transition: color 300ms;

}
.vertical-nav-menu i.metismenu-state-icon {
transition: transform 300ms;
left: auto;
right: 0;
}
.vertical-nav-menu ul {
transition: padding 300ms;
padding: 0.6em 0 0 3rem;
margin-top: -12px;

}
.mm-collapse li:before{
content: "";
position: absolute;
width: 5px;
height: 5px;
background-color: #ABB9E8;
border-radius: 10px;
top: 13px;
left: 10px;
}
.mm-collapse li{
position: relative;
}
.vertical-nav-menu ul > li > a {
color: #ABB9E8;
height: auto;
line-height: initial;
padding: 0 1.5rem;
}

.vertical-nav-menu ul > li > a .metismenu-icon {
display: none;
}

.app-sidebar.sidebar-text-light {
border-right: 0 !important;
}
.app-sidebar.sidebar-text-light .app-sidebar__heading {
color: rgba(255, 255, 255, 0.6);
}
.app-sidebar.sidebar-text-light .app-sidebar__heading::before {
background: rgba(255, 255, 255, 0.5) !important;
}
.app-sidebar.sidebar-text-light .vertical-nav-menu li a {
color: rgba(255, 255, 255, 0.7);
}
.app-sidebar.sidebar-text-light .vertical-nav-menu li a i.metismenu-icon {
opacity: 0.5;
}
.app-sidebar.sidebar-text-light .vertical-nav-menu li a i.metismenu-state-icon {
opacity: 0.5;
}
.app-sidebar.sidebar-text-light .vertical-nav-menu li a:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.app-sidebar.sidebar-text-light .vertical-nav-menu li a:hover i.metismenu-icon {
opacity: 0.8;
}
.app-sidebar.sidebar-text-light
.vertical-nav-menu
li
a:hover
i.metismenu-state-icon {
opacity: 1;
}
.app-sidebar.sidebar-text-light .vertical-nav-menu li a.mm-active {
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.15);
}
.app-sidebar.sidebar-text-light .vertical-nav-menu ul:before {
background: rgba(255, 255, 255, 0.1);
}
.app-sidebar.sidebar-text-light .vertical-nav-menu ul > li > a {
color: rgba(255, 255, 255, 0.6);
}
.app-sidebar.sidebar-text-light .vertical-nav-menu ul > li > a:hover {
color: #fff;
}
.app-sidebar.sidebar-text-light .vertical-nav-menu ul > li > a.mm-active {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
.app-sidebar.sidebar-text-light .ps__thumb-y {
background: rgba(255, 255, 255, 0.3);
}
.app-sidebar.sidebar-text-light .ps__rail-y:hover .ps__thumb-y {
background: rgba(255, 255, 255, 0.2);
}
.app-sidebar.sidebar-text-light .app-header__logo .logo-src {
background: url(assets/images/logo.png);
}
.app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner,
.app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner::before,
.app-sidebar.sidebar-text-light .app-header__logo .hamburger-inner::after {
background-color: rgba(255, 255, 255, 0.8);
}
.app-sidebar.sidebar-text-dark {
border-right: 0 !important;
}
.app-sidebar.sidebar-text-dark .app-sidebar__heading {
color: rgba(0, 0, 0, 0.6);
}
.app-sidebar.sidebar-text-dark .app-sidebar__heading::before {
background: rgba(0, 0, 0, 0.5) !important;
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu li a {
color: rgba(0, 0, 0, 0.6);
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu li a i.metismenu-icon {
opacity: 0.5;
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu li a i.metismenu-state-icon {
opacity: 0.5;
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu li a:hover {
background: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.7);
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu li a:hover i.metismenu-icon {
opacity: 0.7;
}
.app-sidebar.sidebar-text-dark
.vertical-nav-menu
li
a:hover
i.metismenu-state-icon {
opacity: 1;
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu li a.mm-active {
color: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.15);
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu ul:before {
background: rgba(0, 0, 0, 0.1);
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu ul > li > a {
color: rgba(0, 0, 0, 0.4);
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu ul > li > a:hover {
color: rgba(0, 0, 0, 0.7);
}
.app-sidebar.sidebar-text-dark .vertical-nav-menu ul > li > a.mm-active {
color: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.15);
}
.app-sidebar.sidebar-text-dark .ps__thumb-y {
background: rgba(0, 0, 0, 0.3);
}
.app-sidebar.sidebar-text-dark .ps__rail-y:hover .ps__thumb-y {
background: rgba(0, 0, 0, 0.2);
}
.app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner,
.app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner::before,
.app-sidebar.sidebar-text-dark .app-header__logo .hamburger-inner::after {
background-color: rgba(0, 0, 0, 0.8);
}
.fixed-sidebar .app-sidebar {
position: fixed;
height: 100vh;
z-index:99;
}

.fixed-sidebar.fixed-header .app-sidebar .app-header__logo {
display: none;
}
.fixed-sidebar:not(.fixed-header) .app-sidebar .app-header__logo {
display: flex;
}
.fixed-sidebar:not(.fixed-header) .app-header {
margin-left: 280px;
}
.fixed-sidebar:not(.fixed-header) .app-header .app-header__logo {
display: none;
}
.fixed-sidebar.closed-sidebar:not(.fixed-header) .app-header {
margin-left: 80px;
}
.fixed-sidebar.closed-sidebar:not(.fixed-header)
.app-sidebar
.app-header__logo {
width: 80px;
padding: 0;
}
.fixed-sidebar.closed-sidebar:not(.fixed-header)
.app-sidebar
.app-header__logo
.logo-src {
display: none;
}
.fixed-sidebar.closed-sidebar:not(.fixed-header)
.app-sidebar
.app-header__logo
.header__pane {
margin-right: auto;
}
.closed-sidebar .app-sidebar {
transition: all 0.3s ease;
width: 80px;
min-width: 80px;
flex: 0 0 80px;
z-index: 13;
}
.closed-sidebar .app-sidebar .app-sidebar__inner .app-sidebar__heading {
text-indent: -999em;
}
.closed-sidebar .app-sidebar .app-sidebar__inner .app-sidebar__heading::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #e0f3ff;
text-indent: 1px;
}
.closed-sidebar .app-sidebar .app-sidebar__inner ul li a {
text-indent: -99rem;
padding: 0;
}
.closed-sidebar .app-sidebar .app-sidebar__inner .metismenu-icon {
text-indent: 0;
left: 50%;
margin-left: -17px;
}
.closed-sidebar .app-sidebar .app-sidebar__inner .metismenu-state-icon {
visibility: hidden;
}
.closed-sidebar .app-sidebar .app-sidebar__inner ul::before {
display: none;
}
.closed-sidebar .app-sidebar .app-sidebar__inner ul.mm-show {
padding: 0;
}
.closed-sidebar .app-sidebar .app-sidebar__inner ul.mm-show > li > a {
height: 0;
}
.closed-sidebar .app-sidebar:hover {
flex: 0 0 280px !important;
width: 280px !important;
}
.closed-sidebar .app-sidebar:hover .app-sidebar__inner .app-sidebar__heading {
text-indent: initial;
}
.closed-sidebar
.app-sidebar:hover
.app-sidebar__inner
.app-sidebar__heading::before {
display: none;
}
.closed-sidebar .app-sidebar:hover .app-sidebar__inner ul::before {
display: block;
}
.closed-sidebar .app-sidebar:hover .app-sidebar__inner ul li a {
text-indent: initial;
padding: 0 1.5rem 0 45px;
}
.closed-sidebar .app-sidebar:hover .app-sidebar__inner .metismenu-icon {
text-indent: initial;
left: 5px;
margin-left: 0;
}
.closed-sidebar .app-sidebar:hover .app-sidebar__inner .metismenu-state-icon {
visibility: visible;
}
.closed-sidebar .app-sidebar:hover .app-sidebar__inner ul.mm-show {
padding: 0.5em 0 0 2rem;
}
.closed-sidebar .app-sidebar:hover .app-sidebar__inner ul.mm-show > li > a {
height: 2.3em;
}
.closed-sidebar .app-sidebar:hover .app-sidebar__inner ul ul li a {
padding-left: 1em;
}
.closed-sidebar:not(.sidebar-mobile-open) .app-sidebar .scrollbar-sidebar {
position: static;
height: auto;
overflow: initial !important;
}
.closed-sidebar:not(.sidebar-mobile-open)
.app-sidebar:hover
.scrollbar-sidebar {
position: absolute;
height: 100%;
overflow: hidden !important;
}
.closed-sidebar:not(.closed-sidebar-mobile) .app-header .app-header__logo {
width: 80px;
}
.closed-sidebar:not(.closed-sidebar-mobile)
.app-header
.app-header__logo
.logo-src {
display: none;
}
.closed-sidebar:not(.closed-sidebar-mobile)
.app-header
.app-header__logo
.header__pane {
margin-right: auto;
}
.closed-sidebar.fixed-sidebar .app-main__outer {
padding-left: 80px;
}
.closed-sidebar.fixed-header:not(.fixed-sidebar)
.app-sidebar
.app-header__logo {
visibility: hidden;
}
.closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo,
.closed-sidebar.closed-sidebar-mobile .app-header .app-header__logo {
width: auto;
display: flex;
}
.closed-sidebar.closed-sidebar-mobile
.app-sidebar
.app-header__logo
.header__pane,
.closed-sidebar.closed-sidebar-mobile
.app-header


.closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo {
display: flex;
width: 80px;
padding: 0 1.5rem !important;
}
.closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo .logo-src {
display: block !important;
margin: 0 auto;
width: 21px;
}
.closed-sidebar.closed-sidebar-mobile
.app-sidebar
.app-header__logo
.header__pane {
display: none;
}
.closed-sidebar.closed-sidebar-mobile .app-sidebar:hover .app-header__logo {
width: 280px;
}
.closed-sidebar.closed-sidebar-mobile
.app-sidebar:hover
.app-header__logo
.logo-src {
width: 97px;
margin: 0;
}
.closed-sidebar.closed-sidebar-mobile .app-header {
margin-left: 0 !important;
}
.closed-sidebar.fixed-footer .app-footer__inner {
margin-left: 0 !important;
}
.app-main {
flex: 1;

z-index: 8;
position: relative;
}
.app-main .app-main__outer {
flex: 1;
flex-direction: column;
display: flex;
z-index: 12;
overflow: hidden;
}
.drawer-content-wrapper table td{
border-bottom: 0;
}
.app-main .app-main__inner {
padding: 10px 8px 0;
flex: 1;
display: flex;
flex-direction: column;
background-color: #F7F7F7;
}

.app-footer {
height: 40px;
background: #fff;
/* margin-top: 30px; */
}
.app-footer p{
margin-bottom: 0;
}
.app-footer .app-footer__inner {
padding: 0 1.5rem 0 2rem;
height: 40px;
display: flex;
align-content: center;
align-items: center;
text-align: left;
  color: #393939;
  font-size: 12px;
  font-style: normal;
font-weight: 400;
line-height: normal;
}
.app-footer .app-footer__inner .app-footer-left {
display: flex;
align-items: center;
}
.app-footer .app-footer__inner .app-footer-right {
margin-left: auto;
display: flex;
}
.fixed-footer .app-footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 7;
}
.fixed-footer .app-footer .app-footer__inner {
margin-left: 280px;
box-shadow: 0.3rem -0.46875rem 2.1875rem rgba(4, 9, 20, 0.02),
  0.3rem -0.9375rem 1.40625rem rgba(4, 9, 20, 0.02),
  0.3rem -0.25rem 0.53125rem rgba(4, 9, 20, 0.04),
  0.3rem -0.125rem 0.1875rem rgba(4, 9, 20, 0.02);
}
.fixed-footer .app-main .app-main__outer {
padding-bottom: 60px;
}

.dropdown-menu.show {
animation: fade-in2 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
max-height: 200px;
    overflow-y: auto;
}
.popover:not([data-placement^="top"]).show {
animation: fade-in2 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.dropdown-menu[data-placement^="top"].show {
animation: fade-in3 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
bottom: auto !important;
top: auto !important;
}
@keyframes fade-in2 {
0% {
  margin-top: -50px;
  visibility: hidden;
  opacity: 0;
}
100% {
  margin-top: 0;
  visibility: visible;
  opacity: 1;
}
}
.form-control {
transition: all 0.2s;
}
.dropdown-toggle::after {
position: relative;
top: 2px;
opacity: 0.8;
}
.dropright .dropdown-toggle::after {
top: 0;
}
.dropdown-toggle-split {
border-left: rgba(255, 255, 255, 0.1) solid 1px;
}

.dropdown-menu {
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);
margin: 0.125rem;
}
.dropdown-menu.dropdown-menu-right {
right: 0 !important;
}
.dropdown-menu .dropdown-header {
text-transform: uppercase;
font-size: 0.73333rem;
color: #3f6ad8;
font-weight: 700;
}
.dropdown-menu .dropdown-item {
font-size: 0.88rem;
display: flex;
align-items: center;
transition: background-color 0.3s ease, color 0.3s ease;
cursor: pointer;
z-index: 6;
position: relative;
}
.dropdown-menu .dropdown-item .dropdown-icon {
font-size: 1rem;
margin-right: 0.325rem;
width: 30px;
text-align: center;
opacity: 0.3;
margin-left: -10px;
}
.dropdown-menu .dropdown-item:hover .dropdown-icon {
opacity: 0.7;
}
.dropdown-menu.dropdown-menu-shadow {
box-shadow: 0 0.66875rem 2.3875rem rgba(4, 9, 20, 0.03),
  0 1.1375rem 1.60625rem rgba(4, 9, 20, 0.03),
  0 0.45rem 0.73125rem rgba(4, 9, 20, 0.05),
  0 0.325rem 0.3875rem rgba(4, 9, 20, 0.03);
}
.dropdown-toggle::after {
position: relative;
top: 2px;
opacity: 0.8;
margin-left: 5px;
}
.dropdown-toggle-split::after {
margin-left: 0;
}
.dropright .dropdown-toggle::after {
top: 0;
}
.dropdown-toggle-split {
border-left: rgba(255, 255, 255, 0.1) solid 2px;
}


.body-tabs-shadow .body-tabs-animated {
padding: 0.75rem 0;
}
.body-tabs-shadow .body-tabs-animated .nav-link span {
position: relative;
z-index: 5;
}
.body-tabs-shadow .body-tabs-animated .nav-link::before {
height: 70%;
top: 15%;
z-index: 4;
bottom: auto;
box-shadow: 0 16px 26px -10px rgba(63, 106, 216, 0.56),
  0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(63, 106, 216, 0.2);
border-radius: 100%;
opacity: 0.5;
}
.body-tabs-shadow .body-tabs-animated .nav-link.active,
.body-tabs-shadow .body-tabs-animated .nav-link:hover {
color: #fff;
}
.body-tabs-shadow .body-tabs-animated .nav-link.active::before,
.body-tabs-shadow .body-tabs-animated .nav-link:hover::before {
border-radius: 0.25rem;
opacity: 1;
}
.body-tabs-line .body-tabs-layout {
margin: 0 -30px;
padding: 0 30px;
margin-bottom: 30px;
border-bottom: #dee2e6 solid 1px;
}

.widget-heading h5{
font-size: 0.9rem;
  margin-bottom: 0;
  margin-top: 20px;
}
.widget-heading {

text-transform: uppercase;

}
.year{
  color:#585A60;
  word-wrap: normal;
  white-space: nowrap;
  font-size: 12px;
  text-transform: capitalize;
  margin-right: 5px;
}
.nav-link {
display: flex;
align-items: center;
transition: background-color 0.3s ease, color 0.3s ease;
cursor: pointer;
flex-direction: column;
}
.header-user-info img{
width: 45px;
height: 45px;
object-fit: contain;

}
.widget-content {
font-size: 12px;
}
.app-header-left h5 {
font-size: 16px;
margin-left: 46px;
margin-top: -6px;
text-transform: uppercase;
color: #585A60;
font-style: normal;
font-weight: 400;
line-height: normal;
font-family: 'Open Sans', sans-serif!important;
}
.nav-link .nav-link-icon {
color: #3f6ad8;
font-size: 1rem;
width: 30px;
text-align: center;
opacity: 0.45;
margin-left: -10px;
}
.nav-link:hover {
color: #495057;
}
.nav-link:hover .nav-link-icon {
opacity: 0.9;
color: #3f6ad8;
}
.nav-link:disabled .nav-link-icon,
.nav-link.disabled .nav-link-icon {
opacity: 0.3;
}
.nav-item.nav-item-header {
text-transform: uppercase;
font-size: 0.73333rem;
color: #6c757d;
font-weight: 700;
padding: 0.5rem 1rem;
}
.nav-item.nav-item-btn {
padding: 0.5rem 1rem;
}
.nav-item.nav-item-divider {
margin: 0.5rem 0;
height: 1px;
overflow: hidden;
background: #dee2e6;
}
.nav .badge {
margin-left: 8px;
}


.scrollbar-sidebar,
.scrollbar-container {
position: relative;
height: 100%;
overflow: auto;
}
.scroll-area {
overflow-x: hidden;
height: 400px;
}
.header__pane{
  position: relative;
  left:72px;
}
.hamburger {
padding: 0;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #ff2b2b;
}
.hamburger-box {
width: 24px;
height: 14px;
display: inline-block;
position: relative;

}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -1px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 20px;
height: 2px;
background-color: #6c757d;
border-radius: 10px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -6px;
}
.hamburger-inner::after {
bottom: -6px;
}
.hamburger--elastic .hamburger-inner {
top: 1px;
transition-duration: 0.275s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}
.hamburger--elastic .hamburger-inner::before {
top: 5px;
transition: opacity 0.125s 0.275s ease;
}
.hamburger--elastic .hamburger-inner::after {
top: 10px;
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic.is-active .hamburger-inner {
transform: translate3d(0, 6px, 0) rotate(135deg);
transition-delay: 0.075s;
}
.hamburger--elastic.is-active .hamburger-inner::before {
transition-delay: 0s;
opacity: 0;
}
.hamburger--elastic.is-active .hamburger-inner::after {
transform: translate3d(0, -12px, 0) rotate(-270deg);
transition-delay: 0.075s;
}

.closed-sidebar.closed-sidebar-mobile .app-sidebar .app-header__logo, .closed-sidebar.closed-sidebar-mobile .app-header .app-header__logo {
  width: auto;
  display: flex;
}


@media only screen and (max-width: 1320px) {
.header-user-info {
  display: none;
}
}
@media (max-width: 991.98px) {
.header__pane{
  display: none;
}
.app-main {
  display: block;
}
.dropdown-menu::before,
.dropdown-menu::after {
  display: none;
}
.app-sidebar {
  flex: 0 0 280px !important;
  width: 280px !important;
  transform: translateX(-280px);
  position: fixed;
}
.app-sidebar .app-header__logo {
  display: none;
}

.sidebar-mobile-open .app-sidebar {
  transform: translateX(0);
}
.sidebar-mobile-open .app-sidebar .app-sidebar__inner .app-sidebar__heading {
  text-indent: initial;
}
.sidebar-mobile-open
  .app-sidebar
  .app-sidebar__inner
  .app-sidebar__heading::before {
  display: none;
}
.sidebar-mobile-open .app-sidebar .app-sidebar__inner ul li a {
  text-indent: initial;
  padding: 0 1.5rem 0 45px;
}
.sidebar-mobile-open .app-sidebar .app-sidebar__inner .metismenu-icon {
  text-indent: initial;
  left: 5px;
  margin-left: 0;
}
.sidebar-mobile-open .app-sidebar .app-sidebar__inner .metismenu-state-icon {
  visibility: visible;
}
.sidebar-mobile-open .app-sidebar .app-sidebar__inner ul::before {
  display: block;
}
.sidebar-mobile-open .app-sidebar .app-sidebar__inner ul ul li a {
  padding-left: 1em;
}
.sidebar-mobile-open .app-sidebar .app-sidebar__inner ul.mm-show {
  padding: 0.5em 0 0 2rem;
}
.sidebar-mobile-open .app-sidebar .app-sidebar__inner ul.mm-show > li > a {
  height: 2rem;
  line-height: 2rem;
}
.sidebar-mobile-open .app-sidebar .app-header__logo {
  width: auto !important;
}
.sidebar-mobile-open .app-sidebar .app-header__logo .logo-src {
  width: 97px !important;
  margin-left: auto;
  margin-right: 0;
}
.sidebar-mobile-open .fixed-sidebar .app-sidebar {
  height: 100%;
}
.sidebar-mobile-open .sidebar-mobile-overlay {
  display: block;
}
.app-main .app-main__outer {
  padding-left: 0 !important;
}
.app-header {
  justify-content: space-between;
}
.app-header .app-header__logo {
  
  order: 2;
  background: 0 0 !important;
  border: 0 !important;
}
.app-header .app-header__content {
  visibility: hidden;
  opacity: 0;
  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);
  position: absolute;
  left: 2%;
  width: 95%;
  top: 0;
  transition: all 0.2s;
  background: #fff;
  border-radius: 50px;
  padding: 0 10px;
  overflow: hidden;
}

.app-header .app-header__content .header-btn-lg {
  margin-left: -1.5rem;
  padding: 0 0.5rem;
}
.app-header .app-header__content .app-header-left .nav {
  display: none;
}
.app-header .app-header__content.header-mobile-open {
  visibility: visible;
  opacity: 1;
  top: 53px;
}
.app-header .app-header__mobile-menu {
  display: flex;
  order: 1;
}
.app-header .app-header__menu {
  display: flex;
  order: 3;
}
.app-header.header-text-light .app-header__menu > span .btn,
.app-header.header-text-light .app-header__menu > .btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}
.app-header.header-text-light .header-mobile-open {
  background: #343a40;
}

.app-page-title {
  text-align: center;
}
.app-page-title .page-title-heading,
.app-page-title .page-title-wrapper {
  margin: 0 auto;
  display: block;
}
.app-page-title .page-title-actions {
  margin: 15px auto 0;
}
.app-page-title .page-title-actions .breadcrumb-item,
.app-page-title .page-title-actions .breadcrumb,
.app-page-title .page-title-subheading .breadcrumb-item,
.app-page-title .page-title-subheading .breadcrumb {
  display: inline-block;
}
/*
.app-footer .app-footer__inner .app-footer-right {
  display: none;
}
*/
.app-footer .app-footer__inner .app-footer-left {
  width: 100%;
}
.app-footer .app-footer__inner .app-footer-left .footer-dots {
  margin: 0 auto;
}
.widget-content .widget-numbers {
  font-size: 1.6rem;
  line-height: 1;
}


}
@media (max-width: 991.98px) {
.app-page-title .page-title-icon,
.ui-theme-settings {
  display: none;
}
 .sidebar-mobile-open .app-sidebar .app-header__logo {
  display: none;
  visibility: hidden;
}

}


@media (max-width: 767.98px) {


.app-page-title {
  padding: 15px;
  margin: -15px -15px 15px;
}
.app-page-title + .body-tabs-layout {
  margin-top: -15px !important;
}
.body-tabs-line .body-tabs-layout {
  margin-bottom: 15px;
  margin-left: -15px;
  margin-right: -15px;
  padding: 0 15px;
}
.body-tabs {
  padding: 0 15px;
  display: block;
}
.body-tabs .nav-item .nav-link {
  margin: 0;
}
.popover,
.dropdown-menu {
  width: 80%;
  left: 10%;
}


.header-icon {
  display: none;
}

.slick-slider-sm .slick-slider .slick-prev {
  left: 15px;
}
.slick-slider-sm .slick-slider .slick-next {
  right: 15px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1500px) {

.swatch-holder {
width: 24px;
height: 24px;
line-height: 24px;
margin: 5px 5px 0;
transition: all 0.2s;
opacity: 0.7;
display: inline-block;
border-radius: 30px;
}
.swatch-holder.active {
border: #fff solid 2px;
box-shadow: 0 0 0 5px #3f6ad8;
opacity: 1;
}
.swatch-holder:hover {
opacity: 1;
}
.swatch-holder-lg {
width: 48px;
height: 48px;
line-height: 48px;
}
}
@media (max-width: 991.98px){
.popover, .dropdown-menu {
  position: fixed!important;
  z-index: 50;
  left: 5%!important;
  top: 22%!important;
  width: 90%!important;
  transform: translateY(-50%)!important;
  min-width: 10px!important;
}
}



@media(max-width:360px){
  .app-main__inner{
    padding:0 !important; 
}
}


.app-main__inner .card {
margin-bottom: 20px;
}
.app-main__inner .box {
padding: 12px;

}
.bg-color-orange{
background: #fb9d36;

  padding: 12px;
}
.bg-color-green{
background: #2dd0a6;
}
.app-main__inner .bg-color-pink{
background: #ed526b;
}
.orange-icons i{font-size: 37px; color: #fb9d36; text-align: center; display: block;}
.green-icons i{font-size: 37px; color: #2dd0a6; text-align: center; display: block;}
.pink-icons i{font-size: 37px; color: #ed526b; text-align: center; display: block;}

.papan-title h5{
color: #01D0A6;
font-size: 12px;
}
.table-bg th {
background-color: #F1F3F9;
}
table.dataTable td, table.dataTable th{
font-size: 14px;
color: #585A60;
border-bottom: 1px solid #DBDBDB;


}
.form-switch.form-switch-sm {
  margin-bottom: 0 !important;
  margin-top: 6px;
}
table.dataTable td{
  padding: 8px 10px 4px !important;
  line-height: 2;
}
table.dataTable.no-footer{
  border-bottom: 0 !important;
}
.table>:not(:last-child)>:last-child>* {
border-bottom-color: transparent;
}
.page-item.active .page-link {
z-index: 3;
color: #39a2ff;
background-color: transparent;
border-color: #5d9eff;
}
.page-item:not(:first-child) .page-link {
margin-left: 3px;
}
table.dataTable th, table.dataTable td {
  box-sizing: border-box !important;
}
.page-link{
color: #4c4c4c;
padding: 0.2rem 0.75rem;
background: #f7f7f7;
}
div.dataTables_wrapper div.dataTables_info {

font-size: 12px;
color: #6a6a6a;
 margin-top: 0; 

}
.dataTables_wrapper .dataTables_length{

  margin-top: 3px;
    padding-top: 0.755em;
}
.dataTables_wrapper .dataTables_paginate{
  padding: 12px 0 0px;


}
.table-title{
position: absolute;
right: 20%;
top: 16%;
background: #3bd2a8;
color: #fff;
padding: 8px;
line-height: 16px;
font-size: 12px;
}


/*---dashboard table--*/
.learder-board{
flex: 1;
padding-bottom: 20px;
}
.learder-board .table{
margin-bottom: 0;
/* background: #fff; */
overflow: auto;

white-space: nowrap;
-webkit-overflow-scrolling: touch;


}

.learder-board .panel-heading{
color: #fff;
/* background-color: #4b9bec; */
background-color: #c2091f;
padding: 4px 7px 7px 10px;
border-bottom: 1px solid transparent;

}
.learder-board .pull-right {
float: right !important;
}
.learder-board .btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.learder-board .btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}

.learder-board .table-padding{
padding: 12px;
padding-bottom: 0;
}
.learder-board .table>thead{
background: #F1F3F9 !important;
position: sticky;
top: 0;

}
.learder-board .table>thead th {
  border-bottom: 0;
}
.learder-board .table>thead th{
color: #585A60;

}
.learder-board thead tr,.learder-board .thead-bg {
border-bottom: none !important;

}
.learder-board .star-icon i{
color: #efd05b;
font-size: 14px;
text-align: left;
display: block;
}
.learder-board .table-body-border{
border: 1px solid #ede5e5;
}
.table-responsive {
display: inline-block;
height: 300px;
overflow: auto;
width: 100%;
}
.learder-board .table-fixed tbody {
height: 200px;
overflow-y: auto;
width: 100%;
}
.learder-board .table-fixed thead, .learder-board .table-fixed tbody, .learder-board .table-fixed tr, .learder-board .table-fixed td, .learder-board .table-fixed th {
display: block;
}

.learder-board .table-fixed thead tr th {
float: left;
border-color: #fff;
background: #ebebeb !important;
}

.learder-board .dropdown-menu{
--bs-dropdown-min-width: 3rem;
}

/* width */
::-webkit-scrollbar {
display: block;
width: 5px;
height: 5px;


}
rect.highcharts-scrollbar-thumb{
  fill: #8f8f8f;
  height: 6px;
}
rect.highcharts-scrollbar-track{
  height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #9b9b9b; 
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #8f8f8f; 
border-radius: 10px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #8b8b8d; 
}

figure {
margin: 0 0 0rem;
}
.header-user-info button.head-btn {
border: 0;
cursor: default;
}
.header-user-info .dropdown-menu {
width: auto;
min-width: 8rem !important;
}

.percentage .bg-blue{
background-color: #4b9bec;
}
.percentage .bg-green{
background-color: #2dd0a6;
}
.percentage .bg-orange{
background-color: #fb9d36;
}
.percentage .bg-red{
background-color: #ed526b;
}
.percentage .progress{
background-color: #ffffff5e !important;
}
.percentage .progess-font-size{
font-size: 12px;
}
.percentage .progess-percent-size{
font-size: 0.8rem;
}
.percentage .progessbar-height{
height: 2px;
}
@media (max-width: 991.98px){

}
@media (max-width: 576px){
.container{
   width: 94%;
   margin: 0 auto;
}
}

/* donut css*/
.donut-chart .btn-xs {
font-size: 12px;
border-radius: 0px;
}  
.donut-chart .dropdown-menu{
--bs-dropdown-min-width: 3rem;
}
.donut-chart .primary-chart-bg{
background-color: #4b9bec;
}

.donut-chart .widget {
margin: 0 auto;
width: 350px;
position: relative;
}

.donut-chart .chart-header {
height: 40px;
color: #16140d;
text-align: center;
line-height: 40px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
font-weight: 400;
font-size: 1.5em;
}

.donut-chart .chart-footer {
color: #16140d;
text-align: center;
font-size: 10px;
}

.donut-chart .chart-container {
padding: 40px;
}

.donut-chart .chart-text {
color: #16140d;
text-align: center;
font-size: 10px;
position: absolute;
z-index: 3;
right: 50%;
top: 55%;
}

.donut-chart .chart-indicatiors{
list-style-type: none;
padding: 0;
margin: 0;
background: #FFF;
padding: 15px;
font-size: 13px;
}
.donut-chart .chart-indicatiors li{
    margin-bottom: 0.7em;
    padding-left: 1em;
}
.donut-chart .chart-indicatiors .chart-color-one{
    border-left: 1.25em solid #fb9d36;
}
.donut-chart .chart-indicatiors .chart-color-two{
    border-left: 1.25em solid #4b9bec;
}

/*----sistem.css----*/
.innerpage-contain{
  background-color: #fff;
  padding: 10px 10px 20px;
  border: 1px solid #E0E0E0;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.10);
  margin-top: 30px;
  }
  .pyd-ketuta {
    text-transform: uppercase;
}
  .learder-board.sistem.ldap.Email .innerpage-contain {
    padding-top: 50px !important;
}
.learder-board.sistem .innerpage-contain{
  padding-top: 50px !important;
}
.sistem .col-lg-2.mb-4 {
  width: 18%;
}
.sistem .col-lg-10.mb-4 {
  width: 82%;
}
input, textarea{
  border: 1px solid #D0D0D0;
  width: 100%;
  border-bottom: 1px solid #D0D0D0 !important;
  padding-left: 8px;
}
.sistem-form input{
  border: 0;
  font-size: 14px;
  color: #5c5c5c;
  /* text-transform: uppercase; */
}
.sistem-form span.text-danger {
font-size: 12px;
}

.sistem-form.dat-label input {
  font-weight: 600;
}

input:focus{
  outline: none;
  border-bottom: 1px solid #01D0A6 !important;
}
textarea:focus{
  outline: none;
  border: 1px solid #01D0A6 !important;
}
.sistem-form textarea{
  width: 100%;
  color: #686868;
 

}
span.text-danger.errmsg {
  display: flex;
  position: absolute;
  font-size: 12px;
}
button.dimension_add {
  font-weight: 600;
  font-size: 14px !important;
}
th:last-child:before, th:last-child:after {
  visibility: hidden !important;
}
.btn-success {
  color: #fff!important;
  background-color: #01D0A6!important;
  border-color: #01D0A6!important;
  border-radius: 2px!important;
  
}
.sistem-btn{
text-align: right;
}
.innerpage-contain .btn-check:focus+.btn, .btn:focus{
box-shadow: none;
}
.innerpage-contain .btn{
padding: 7px 20px;
text-decoration: none;
border-radius: 0;
font-size: 14px;
}
.btn.btn-outline-success.prev {
  border: 1px solid #808080;
  color: #808080;
}
.btn-outline-success.prev:hover {
  background-color: transparent !important;
  color: #808080 !important;
  border: 1px solid #808080 !important;
}
.btn-success:hover {
border-color: #18a17b;
background-color: #18a17b;
}
.btn-outline-success:hover{
border-color: #18a17b!important;
background-color: #18a17b!important;
color:#fff!important;
}
.btn-transition {
color:#01D0A6!important;
border-color: #01D0A6!important;
background-color: none!important;
border-radius: 0 !important;
}
.field-icon {
float: right;
margin-left: -25px;
margin-top: 5px;
position: relative;
z-index: 2;
color:#686868;
}
.sistem-form .card-header{
background-color: transparent;
padding-left: 0;
}
.sistem-form h5{
font-size: 14px;
  color: #686868;
}
.sistem-form img{
margin: 0 0 0 auto;
  
}
.sistem-form [aria-expanded="true"] i {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
[aria-expanded="true"] img.metismenu-state-icon.caret-left {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
li{
list-style: none;
}
.accordion-wrapper button{
width: 100%;
display: flex;
}
.accordion-wrapper ul{
padding-left: 0;
}
.accordion-wrapper .card-body{
padding-right: 0;
border: 1px solid #D0D0D0;
padding-left: 0;
border-bottom: 0;
padding-bottom: 0;
}
.accordion-wrapper .card-body li{ 
padding-bottom: 10px;
  border-bottom: 1px solid #D0D0D0;
  padding-left: 10px;
}


/*----*/
.app-drawer-overlay {
position: fixed;
height: 100%;
width: 100%;
z-index: 999;
background: rgba(0, 0, 0, 0.4);
display: block;
content: "";
left: 0;
top: 0;
}
.d-none {
display: none!important;
}
.app-drawer-wrapper {
width: 300px;
height: 100%;
position: fixed;
right: -450px;
top: 0;
transition: all 0.2s;
z-index: 9999;
}
.app-drawer-wrapper.drawer-open {
right: 0;
box-shadow: 0 0.76875rem 2.4875rem rgba(52, 58, 64, 0.3),
  0 1.3375rem 1.70625rem rgba(52, 58, 64, 0.3),
  0 0.55rem 0.53125rem rgba(0, 0, 0, 0.05),
  0 0.225rem 0.4375rem rgba(52, 58, 64, 0.3);
}
.app-drawer-wrapper.drawer-open::before {
opacity: 1;
}
.drawer-content-wrapper {
background: #fff;
position: relative;
height: 100%;
}
.drawer-content-wrapper .drawer-heading {
font-size: 13px;
color: #585A60;
margin: 0;
background: #fff;
padding: 0rem;
/* border-bottom: #dee2e6 solid 1px; */
/* border-top: #dee2e6 solid 1px; */
}
.offcanvas-header .btn-close{
  filter: invert(17%) sepia(92%) saturate(6890%) hue-rotate(2deg) brightness(93%) contrast(124%);
}
.offcanvas.show{
  width: 20%;
}
.scrollbar-container .offcanvas-header{
  padding: 15px 10px 15px 8px;
}
.scrollbar-container thead th:last-child, .scrollbar-container tbody td:last-child{
  text-align: right;
} 

.scrollbar-container thead th{
  color: #5c5c5c;
  font-size: 14px;
}
.drawer-content-wrapper .drawer-heading:first-child {
border-top: 0;
position: sticky;
  top: 0;
}
.drawer-content-wrapper .drawer-section {
padding: 1.5rem;
}
.drawer-content-wrapper > .app-sidebar__heading:first-child {
margin-top: 0;
}
.modal .modal-header span button {
background: transparent;
border: 0;

}
.modal-content{
border-radius: 0 !important;
}
.modal-dialog.modal-lg.kelompok-pop {
width:770px;
}
.drawer-nav-btn {

position: absolute;
right: 0.75rem;
top: 0;
padding: 0.5rem;

z-index: 20;
}
.drawer-nav-btn .hamburger {
margin-top: 4px;
}

.vertical-nav-menu li a.mm-active img {
filter: hue-rotate(43deg) saturate(1000%) brightness(1000%);
}
.vertical-nav-menu li a.mm-active:focus img {
filter: hue-rotate(43deg) saturate(1000%) brightness(1000%);
}
.vertical-nav-menu li a.mm-active {
color: #fff ;
}


input[type=checkbox] + label {
display: block;

  cursor: pointer;
 
  background: transparent;
  box-shadow: none;
}

input[type=checkbox] {
display: none;
}
.form-switch input[type=checkbox]{
display: block !important
}
input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #585A60;
  border-radius: 0.2em;
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

input[type=checkbox] + label:active:before {
transform: scale(0);
}

input[type=checkbox]:checked + label:before {
background-color: #01D0A6;
border-color: #01D0A6;
color: #fff;
line-height: 1;
}
input[type=checkbox]:disabled + label:before {
transform: scale(1);
border-color: #aaa;
}
.sistem-form.tamba-in input{
  padding: 0 20px;
}
/* .datatables_wrapper .btn{
padding: 7px 40px !important;
} */
.form-switch.form-switch-sm .form-check-input:focus{
box-shadow: none;
}
.tamba .nav-tabs {
border: 1px solid #dee2e6;
margin: 10px;
margin-left: 0;
}
.tamba .nav-tabs li{

padding: 10px 0 10px  0;
border-right: 1px solid #D0D0D0;

}
.datatables_wrapper.tamba .btn.btn-link{
padding: 0 !important;
text-decoration: none;
}
a{
text-decoration: none !important;
}

.custom-file-upload {
border: 1px solid #ccc;
display: flex;
padding: 6px 12px;
cursor: pointer;
position: relative;
width: 100%;
height: 10rem;
text-align: center;
align-items: center;
justify-content: center;
position: relative;
padding: 0px;
height: 1.5rem;
font-size: 14px;
border: 1px solid #D4D4D4;
background: linear-gradient(180deg, #F2F2F2 0%, rgba(255, 255, 255, 0.00) 179.17%);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.10);
width: 5rem;
}

.tamba .nav-tabs li a{
color: #393939;
padding: 10px;

}

.sistem-form select.form-select {
border: 0;
border-bottom: 1px solid #D0D0D0 !important;
border-radius: 0;
font-size: 14px;
color: #686868;
}
.combo {

position: relative;
}

.combo::after {
border-bottom: 2px solid rgb(0 0 0 / 68%);
border-right: 2px solid rgb(0 0 0 / 68%);
content: "";
display: block;
height: 8px;
pointer-events: none;
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -65%) rotate(45deg);
width: 8px;
}

.input-wrapper {
border-radius: 4px;
}



select.combo-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.open .combo-input {
border-radius: 4px 4px 0 0;
}

.combo-input:focus {
border-color: #0067b8;
box-shadow: 0 0 4px 2px #0067b8;
outline: 5px solid transparent;
}

.combo-label {
display: block;
font-size: 20px;
font-weight: 100;
margin-bottom: 0.25em;
}

.combo-menu {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.42);
border-radius: 0 0 4px 4px;
display: none;
max-height: 200px;
overflow-y: scroll;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 100;
}

.open .combo-menu {
display: block;
}

.combo-option {
padding: 10px 12px 12px;
}

.combo-option.option-current,
.combo-option:hover {
background-color: rgba(0, 0, 0, 0.1);
}

.combo-option.option-selected {
padding-right: 30px;
position: relative;
}

.combo-option.option-selected::after {
border-bottom: 2px solid #000;
border-right: 2px solid #000;
content: "";
height: 16px;
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%) rotate(45deg);
width: 8px;
}

/* multiselect list of selected options */
.selected-options {
list-style-type: none;
margin: 0;
max-width: 400px;
padding: 0;
}

.selected-options li {
display: inline-block;
margin-bottom: 5px;
}

.remove-option {
background-color: #6200ee;
border: 1px solid #6200ee;
border-radius: 3px;
color: #fff;
font-size: 0.75em;
font-weight: bold;
margin-bottom: 6px;
margin-right: 6px;
padding: 0.25em 1.75em 0.25em 0.25em;
position: relative;
}

.remove-option:focus {
border-color: #baa1dd;
box-shadow: 0 0 3px 1px #6200ee;
outline: 3px solid transparent;
}

.remove-option::before,
.remove-option::after {
border-right: 2px solid #fff;
content: "";
height: 1em;
right: 0.75em;
position: absolute;
top: 50%;
width: 0;
}

.remove-option::before {
transform: translate(0, -50%) rotate(45deg);
}

.remove-option::after {
transform: translate(0, -50%) rotate(-45deg);
}


.tbl-accordion-body {
display: none;
background: #F7F7F7 !important;
}
.rotate {
  -moz-transition: all .5s linear;
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
  cursor: pointer;
}
.rotate.down {
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}
.float-start a span{
  color: #01D0A6;
}
.dimensi .table>:not(:last-child)>:last-child>* {
  border-bottom-color: #dfdfdf;
}

.svg-filter {
filter: brightness(0) invert(1);
}
.ck-editor__editable li {
  list-style: initial !important;
}
.ck-editor__editable li {
  list-style: inherit !important;
}
table.dataTable.no-footer {
border-bottom: 1px solid #DBDBDB;
}

/*---side menu---*/


.dashboard {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
}

.dashboard-app {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
margin-top:0px;
}

.dashboard-content {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
padding: 25px;
}

.dashboard-nav {
min-width: 238px;
/* position: fixed; */
left: 0;
top: 0;
bottom: 0;
overflow: auto;
/* background-color: #312b79; */
background-color: #8c0b1a;
}

.dashboard-compact .dashboard-nav {
display: none;
}

.dashboard.dashboard-compact .sidebar-shadow{
  z-index: 0;
}

.dashboard-nav header {
min-height: 84px;
padding: 8px 27px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.dashboard-nav header .menu-toggle {
display: none;
margin-right: auto;
}


@media (min-width: 992px){
.dashboard-compact .dashboard-app {
margin-left: 0;
}
.dashboard-app {
margin-left: 234px;
}
}

.dashboard-nav-dropdown {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.dashboard-nav-dropdown.show img.metismenu-state-icon.caret-left {
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
transition: 0.5s;
}
.dashboard-nav .dashboard-nav-dropdown-toggle:after {
border-top-color: rgba(255, 255, 255, 0.72);
}

.dashboard-nav-dropdown-menu {
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

/* .modal-backdrop{
z-index: -1 !important;
} */

         /* Logout icon css */
         .header-user-info .dropdown-menu {
          width: auto;
          /* min-width: 11rem !important; */
          right: 0px !important;
          /* left: 9.2rem !important; */
          transform: translate(0px, 68px) !important;
          border-radius: unset;
       }

       .header-user-info .logout-color{
          color: #F01D42;
       }

       .header-user-info .logout-pad{
          padding: 0.4rem 0.5rem;
          color: #585A60 !important;
       }
       .uom_error_msg span.text-danger.errmsg {
        position: static;
    }
.label-name label b{
color: #5c5c5c;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.label-name label span {
  color: red;
  font-size: 16px;
  padding: 2px;
}
.modal-content .justify-content-center .me-2 b {
  font-weight: 600;
  color: #5c5c5c;
}
.modal .modal-body .table tr td:first-child {
  white-space: nowrap;
}
.label-name label{

  text-align: left;
  /* word-break: break-all; */
  
  }
/* .form-switch{
display: contents!important;
} */
[aria-label="Action: activate to sort column ascending"]{
width: 20%!important;
}

.dropdown-menu .text-danger{
color: #F00!important;
font-size: 14px;
}

/* nilai section css */
.nilai .input-color{
color: #848484;
padding: 10px 135px 6px 10px;
}
.modal-head{
font-size: 14px; 
font-style: normal;
font-weight: 600; 
}
.nilai .svg-filter{
filter: brightness(0) invert(1);
}
.nilai .modal-margin-auto{
width: 80%; 
margin:0 auto
}
.nilai .modal-left-pad{
padding-left: 70px;
}
.modal-form-input {
border-bottom: 1px solid #D0D0D0 !important;
background-color: transparent;
}

.sistem-form .modal-form-input{
  background-color: transparent;
}
.sistem-form .modal-form-input option{
  background-color: #fff !important;
}


.nilai .modal-form-background{
background: #F7F7F7;
}
.nilai .text-area{
font-size: 14px;
color: #686868;
width: 100%;
}
.nilai .modal-text-info{
color: #808080;
font-size: 12px;
font-weight: 400;
}
.nilai .modal-form-top{
top:59px; 
left:32px;
}
.nilai .modal-formbg{
width: 12%; 
color: #808080;
font-weight: 600;
}
.nilai .modal-form-box{
border: 1px solid #D0D0D0; 
width: 93%; 
margin-left: 30px;
}
@media (min-width: 992px){
.modal-lg-nilai {
    width: 874px;
    height: 730px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 991px){
.nilai .modal-txtleft{
    text-align: left !important;
}
.nilai .modal-form-box{
    margin-left: 0px;
    width: 100%;
}
.nilai .modal-form-top{
    top: 56px;
    left: 6px
}
.nilai .input-color {
  color: #848484;
  padding: 10px 70px 6px 40px;
}
.nilai .modal-formbg {
    width: 18%;
    text-align: center !important;
}
.nilai .modal-displayflex{
    display: flex;
}
.nilai .modal-left-pad {
    padding-left: 0px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 991px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2){
.nilai .modal-form-top{
    top: 51px;
    left: 0px
}
}
.dimensi tr.tbl-accordion-body.even td {
  padding: 5px 10px !important;
}
/*--select2--*/
.select2-container{
  width: 100% !important;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 1px solid #b5b5b5;
border-radius: 0;
background-color: #fff;
margin-right: 10px;
vertical-align: middle;
}
.select2-results__option[aria-selected=true]:before {
font-family:fontAwesome;
content: "\f00c";
color: #fff;
background-color: #01D0A6;
border: 0;
display: inline-block;
padding-left: 3px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #eaeaeb;
color: #272727;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.han .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-radius: 4px;
  position: absolute;
  height: 90px;
  z-index: 99;
  overflow: auto;
}

.kpi-sel .select2-dropdown{
  top: 70px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;

z-index: 99;
top: 0;

display: block;
width: 100%;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple::we
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #f77750;
border-width: 2px;
}
.select2-container--default .select2-selection--multiple {
border-width: 2px;
}
.select2-container--open .select2-dropdown--below {

border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);

}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
display: none;
}
.select-icon .placeholder {
/* 	display: none; */
}
.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
display: none !important;
/* content: "" !important; */
}
.select-icon  .select2-search--dropdown {
display: none;
}
input.select2-search__field {
border-bottom: 0 !important;

}

.select2-results__option[aria-selected] {

border-bottom: 1px solid #D0D0D0;
}
.h.select2-dropdown{
border: 1px solid #01D0A6 !important;
top: 70px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
background-color: transparent !important;
color: #272727 !important;
}
.select2-container--default .select2-selection--multiple{
border-radius: 0 !important;
border: 1px solid #D0D0D0 !important;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.05) inset !important;
color: #848484 !important;
padding: 8px  !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  margin-top: 0 !important;
  margin-bottom: 5px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: 1px solid #01D0A6 !important;

}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--open .select2-dropdown--below {
border-radius: 0;
box-shadow: none;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: transparent !important;
}
.form-select {
  background-size: 14px 10px!important;
  background-position: right .5rem center!important;
}
/*--select2--*/

.kelompok-pop .sistem-form input {
border: 1px solid #ced4da;
border-radius: 0;
padding: 10px;
}
/*--171023--*/
.widget-content-left select.form-select.form-select-sm.head-btn {
    border-radius: 0;
    color:#585A60;
    font-size: 12px;
    border: 1px solid #D4D4D4;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.10);
}
/* .ldap .sistem-form {
  margin-bottom: 15px;
} */

.fa-fw.field-icon {
  margin-right: 15px;
  position: relative;
  font-size: 24px;
  top: -31px;
  color: #808080;
}
.Email .sistem-form input {
  border-radius: 0;
}
.Email .mbb {
  margin-bottom: 13px !important;
}
.kelompok .input-box {
  box-sizing: border-box;
  border-bottom: 0px;
  border: 1px solid #E1E1E1 !important;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.05) inset;
  color: #848484;
  padding: 10px;
  }
  .kelompok .input-box:focus {
  border: 1px solid #01D0A6 !important;
  }
input.select2-search__field:focus{
  border: 0 !important;
}
.kelompok .input-box:focus {
  border: 1px solid #01D0A6 !important; 
}
.dimensi .input-box{
  border: 1px solid rgba(1, 208, 166, 0.05);
box-shadow: none;
background: rgba(1, 208, 166, 0.05);
border: 0 !important;

}

.dataTables_wrapper .dataTables_length select {
 border-radius: 0 !important;
 box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.10);
 margin-top: 0;
 
}

.sistem-form.disable input, .sistem-form.disable select {
  background: #F7F7F7 !important;
  padding: 7px;
}
.tamba .nav-tabs li a.active{
  color: #01D0A6;
  border-bottom: 2px solid #01D0A6;
  }
  .tamba .nav-tabs li.active a{
    color: #01D0A6;
    border-bottom: 2px solid #01D0A6;
    }
  
      .breadcrumb{
        background-color: transparent !important;
      }
.tamba h3 {
  color: #5c5c5c !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.learder-board.sistem .sub-kpi-top{
  padding-top: 10px !important;
}
.sistem-form.tamba-in select.form-select {
  border: 1px solid #D0D0D0;
  background-color: #F1F3F9;
}
.select2-container--default .select2-selection--multiple .select2-search__field{
  margin-top: 0 !important;
  width:100%!important;
}
/* .select2-container--default .select2-selection__rendered li input{
  width:100%!important;
}
.select2-container--default .select2-selection__rendered li:last-child input{
  width:0!important;
} */


.form-check-input:checked {
  background-color: #399BF2!important;
  border-color: #399BF2!important;
}
.form-switch.form-switch-sm .form-check-input {
  height: 14px!important;
  width: 28px!important;
}
.form-check-input {
  margin-top: 5px;

}

.form-check-input:focus:not(:checked)~.form-check-label::before{
  border-color: #adb5bd !important;
  box-shadow: none !important; 
}

.modal-dialog .form-check-input {
  margin-top: -2px;

}
.modal-header {
  color: #5c5c5c!important;
  border-bottom: 1px solid #E0E0E0 !important;
  font-weight: 600;
}
.input-text-info{
  color: #585A60;
  font-size: 12px;
  font-weight: 400;
}
.dimensi-input-color{
  border: 1px solid #E1E1E1 !important;
  /* background: rgba(1, 208, 166, 0.05); */
  /* box-shadow: none !important; */
  box-sizing: border-box;
  border-bottom: 0px;
  border: 1px solid #D0D0D0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.05) inset;
  color: #848484;
  padding: 10px;
}
 
.dimensi-input-color:focus {
  border: 1px solid #01D0A6 !important;
}

.form-select:focus{
  box-shadow: none !important;
  border-bottom: 1px solid #01D0A6 !important;
}
.breadcrumb li a:hover {
  color: #332A7B !important;
}

.upload-file-border {
  border-bottom: 1px solid #ddd;
}
.modal-body.text-center.fs-5 {
  font-size: 18px !important;
  font-weight: 600;
  color: #585A60;
}

.generik-upload .custom-file-upload{
  width: 60%;
  height: 135px;
  background: #F1F3F9;
  display: grid;
  border: 1px dashed #6d6d6d;
  color: #393939;
  font-weight: 600;
}
.generik-upload .custom-file-upload i{
  color: #9d9d9d;
    font-size: 30px;
    margin-top: 15px;
}
select.form-select.kpi-sel:focus {
  border: 1px solid #01D0A6;
}
.dimen-td table.dim td{
  color:#5c5c5c;
  font-weight: 600;

}
.modal-body table tr td b{
  color:#5c5c5c;
  font-weight: 600;
  font-size: 14px;
}
.dimen-td table.dim td span{
  font-weight: 400;
  font-size: 14px;
}
.me-2.stat-font{
  font-weight: 600;
}
.petunjuk td span {
  margin-left: 9px;
  position: relative;
  top: -7px;
}
.space-dat {
  position: relative;
}
.space-dat .sistem-form input::after{
  position: absolute;
  width: 4px;
  height: 2px;
  background: #767676;
  content: "";
  right: 18px;
  top: 15px;
}

.notify-badge-color{
  left:48px; 
  background-color: #01D0A6 !important;
}
.sistem-form.search-sel .bootstrap-select{
  width: 100%;
}
.sistem-form.search-sel .bootstrap-select .dropdown-toggle{
    width: 100%;
    background: transparent;
    border-bottom: 1px solid #D0D0D0 !important;
    border: 0;
    outline: 0 !important;
    font-size: 14px;
    color: #686868;
    padding-left: 10px !important;
}

.innerpage-contain .sistem-btn input.btn-outline-success {
  width: 10%;
  background-color: transparent;
}
button.border-dashed {
  border: 1px dashed;
}
.col-lg-4.space-col {
  width: 31.4%;
}
td.ac-space {
  width:30%;
}

.table>:not(:last-child)>:last-child>*{
  border-bottom: 1px solid #DBDBDB !important;
}

.scrollbar-container .table>:not(:last-child)>:last-child>*{
  border-bottom: 0 !important;
}

/* .form-check.ps-0.ml-n1 {
  margin-left: -32px;
} */
.show-p .sistem-form p{
  font-size: 14px;
    color: #5c5c5c;
}

/* 01.11.2023 */
input.form-control.audit-width {
  width: 25%;
}

#questiondetail_edit_form input.form-control.audit-width {
  width: 60%;
}


/* 04.11.2023 */
.modal-dialog.modal-lg.Sector-popup {
  width: 681px;
}
.sistem-kpi .col-lg-2.mb-4 {
  width: 15%;
}

.sistem-kpi .col-lg-10.mb-4 {
  width: 85%;
}
.sistem-form.tamba-in input {
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
  height: 50px;
}
.tamba-in .content {
  border-top: 1px solid#DBDBDB;
  margin: 0px 20px;
  position: relative;
  top: -13px;
}
.radio-buttons.row .chk-option{
  display: flex;
    align-items: center;
    flex-direction: row-reverse;
    white-space: nowrap;
}



/* width */
table::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
table::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

/* Handle */
table::-webkit-scrollbar-thumb {
  background: #686868; 
  border-radius: 10px;
}

/* Handle on hover */
table::-webkit-scrollbar-thumb:hover {
  background: #a7a2a2e8; 
}


@media (max-width: 1024px){
  .app-header-left h5{
    margin-left: 0px;
  }
  .app-header .app-header__content{
    padding-right: 0;
  }
  ul.header-menu.nav{
    flex-wrap: nowrap;
  }
  .app-header .app-header__content .header-menu .nav-link{
    padding: 0.5rem 0.5rem;
  }
  .header__pane{
    left: 20px;
  }
  .kpi-sel.drop-sel{
    width: 28%;
  }
  #toggleBtnMSG {
    margin-top: 10px;
  }
  #toggleBtn {
    margin-top: 10px;
  }
  .widget-heading h5 {
    margin-top: 10px;
  }
  .tahun_penilian {
    display: block !important;
  }
  .widget-content-wrapper {
    margin-left: -15px;
  }
}
/*---71123---*/
@media (max-width: 991px){
 
  .widget-content-wrapper {
    margin-left: 47px;
  }
  .modal-dialog.modal-lg.modal-dialog-centered.modal-lg-nilai {
    max-width: 630px !important;
  }
  .app-sidebar{
    transform: translateX(0px);
  }
  td.ac-space {
    width:100%;
    white-space: nowrap;
  }
  td.text-nowrap.ac-space{
    width: 30%;
  }
  form.icon-sp{
    display: flex;
  }
  .app-header .app-header__content .app-header-right{
    margin:0;
  }
  .app-header .app-header__content .header-menu .nav-link span{
    display: block;
    text-align: center;
  }
  .tahun_penilian {
    display: block !important;
  }
  .year {
    font-size: 14px;
  }
  .quest {
    margin-top: 10px;
  }
  .app-header-left h5 {
    
    position: relative;
    left: 5px;
  }
  .widget-heading h5 {
    display: block;
    font-size: 8px;
    margin-top: 0;
   
  }
  .widget-heading p {
    display: block;
    font-size: 8px;
  }
  .quest {
    margin-top: 2px;
  }
  .header-user-info {
    margin-left: 0 !important;
  }
  .header-user-info .dropdown-menu {
    right: 0 !important;
    left: 48% !important;
    top: 75px !important;
    width: 47% !important;
    /* border-radius: 40px; */
    padding: 0px;
  }
}

@media (max-width: 767px){


  .app-header .app-header__content .header-btn-lg{
    margin-left: 2.5rem;
  }
  .senari-pad {
    display: block !important;
  }
  .col-md-2.mb-3.pe-0.vi-col {
    padding-right: 12px !important;
  }
  .innerpage-contain{
    margin-top: 10px;
  }
  .innerpage-contain .buttonforcari {
    margin-top: 20px !important;
  }
  .col-md-2.mb-3.ps-0.vi-col {
      padding-left: 12px !important;
  }
  .dataTables_wrapper .dataTables_info{
    float: left !important;
  }
  .dataTables_wrapper .dataTables_paginate {
    float: right !important;
  }
  td.text-nowrap.ac-space{
    width: 100% ;
    display: flex;
  }
  .senari-head{
    white-space: nowrap;
  }
  table.dataTable td, table.dataTable th{
    white-space: nowrap;
  }
  .d-flex.justify-content-between.tamba.sen-block{
    display: block !important;
  }
  .nilai .modal-form-top {
    top: 86px;
    left: 6px;
  }
  .digunakan{
    flex-wrap: inherit;
  } 
  .col-lg-4.space-col {
    width: auto;
  }
  .akhir {
    padding-left: 10px !important;
  }
  .app-header .app-header__content {
    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);
    left: 0;
    width: 100%;
    border-radius:0;
  }
  .app-header-left h5{
    width: 75px;
    font-size: 12px;
    margin-left: -10px;
    white-space: normal;
  }
  .year{
    white-space: nowrap;
    /* margin-left: 15px; */
  }
  .quest {
    margin-left: -12px;
    margin-top: 10px;
  }
  a#toggleBtnMSG {
    margin-left: 0px;
    margin-right: -4px;
  }
  a#toggleBtn {
    margin-left: 0px;
  }
  .widget-heading h5 {
    display: none;
  }
  .widget-heading p {
    display: none;
  }
  .app-header .app-header__content .app-header-left{
    display:none;
  }
  .tahun_penilian {
    display: block !important;
    margin-left: 28px;
  }
  .quest span {
    display: none !important;
  }
  .app-header .app-header__content.header-mobile-open {
    border-radius:40px;
  }
  .header-user-info .dropdown-menu {
    right: 0 !important;
    left: 48% !important;
    top: 75px !important;
    width: 50% !important;
    /* border-radius: 40px; */
    padding: 0px;
  }
}

.modal-footer.modal-footer-center.sen .btn {
    padding: 7px 37px;
}
 .sim .btn {
    width: 138px;
    height: 40px;
    
}
.modal-dialog.modal-dialog-centered.je-model{
  position: absolute;
  top: 0;
 left: 0;
 bottom: 0;
}
.border-tab .line:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 35px;
  background: #fff;
  top: -9px;
  right: -9px;
}
.border-tab .line{
  position: relative;
  margin-right: 18px;
}
.form-check.line-chk {
  line-height: 1.4;
}
.form-check.line-chk {
margin-bottom: 0.2rem;
}
.learder-board.sistem .innerpage-contain.kpi-top{
  padding-top: 10px !important;
}
.modal .modal-body .table tr td {
  font-size: 14px;
}
th.sort-remove:before, th.sort-remove:after {
  visibility: hidden !important;
}
.modal .modal-body .table  {
 width: 100%;
  overflow: auto;
  word-break: break-all;
  display: block;
}
.setting-head {
  color: #01D0A6 !important;
  font-size: 12px;
  font-weight: 600;
}
.modal .modal-body .table tbody {
  display: inline-table;
  width: -webkit-fill-available;
}
.title-tag {
position: relative;

}

.title-tag .titletext {
visibility: hidden;
width: auto;
background-color: #fff;
color: #333;
text-align: left;
border: 1px solid #a1a1a1;
padding: 2px 4px;
font-size: 12px;
position: absolute;
z-index: 1;
top: 34px;
}
button.dimension_add:active, button.dimension_add:focus, button.dimension_add:active, button.dimension_add:hover  {
  border: none !important;
  outline: 0 !important;

}
button.dimension_add{
  border: 0 !important;
}
.title-tag:hover .titletext{
visibility: visible;
}
.row.taj-title{
  background-color: #F1F3F9;
  border-bottom: 1px solid #DBDBDB;
  padding-bottom: 7px;
}
.row.taj-title h5{
  font-size: 14px;
  font-weight: 600;
  color: #585A60;
}

/*------readmore readless----*/
#container-show-hide {

}
#container-show-hide .row {

}
#container-show-hide .show-hide:nth-child(n+6) {
	display:none;
	animation: fadeIn 2s ease 0s 1 normal;
}
.readmore {
   display: block;
    width: 193px;
    /* padding: 10px 0; */
    margin: 0 auto;
}
.readmore span {
   width: 100%;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: 0.5s;
    color: #01D0A6;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 0;
    border: 1px dashed #01D0A6;
   
}

.readmore.close{
   opacity: 1 !important;
   margin: 0 auto;
}

.readmore span::before {
	content: "";
	display: inline-block;
	border-right: 0.1rem solid #432A0F;
	border-bottom: 0.1rem solid #432A0F;
	width: 8px;
	height: 8px;
	transform: rotate(45deg);
	margin: 0 1rem 0 -1rem;
	vertical-align: 0.1rem;
	transition: 0.5s;   
}
.readmore.close span::before {
	transform: rotate(-135deg);
	transition: 0.5s;   
	margin-top: 0;
	vertical-align: -0.1rem;
}
.readmore span::after {
	content: "Baca lagi";
}
.readmore.close span::after {
	content: "Kurangkan membaca";
}
.readmore.close span{
   padding: 10px 0;
}
.readmore.close {
   
    float: none;
}
/* #container #rowdata_0{
   display:flex!important;
} */
.select2-container--default .select2-selection--multiple .select2-selection__clear{
  position: absolute;
  right: 0;
}
.btn.tier-edit-clk.assign:disabled {
  background-color: #808080 !important;
  border-color: #808080 !important;
}

/* input.year-cal {
 
  background: url(../images/calendar.svg) no-repeat !important;
  width: 20px;
  height: 20px;
 
} */

.cari-close {
  position: relative;
  margin-right: 7px;
}
.cari-close input {
  padding-right: 23px !important;
}
.cari-close .cari-in-img {
  position: absolute;
  top: 9px;
  right: 0;
  cursor: pointer;
}
.pre .modal-body{
  margin: 0px 25px 30px;
}
.pre .modal-body .modal-title {
  color: #5c5c5c;
  font-weight: 600;
  margin: 5px 0 20px;
}
.prev-bg{
  background-color: #F1F3F9;
  padding: 9px 0 2px;
}
.emoj-img-box {
  border-radius: 1.616px;
  border: 0.808px solid var(--Stroke, #E0E0E0);
 width: 100px;
  height: auto;
  text-align: center;
  /* padding: 10px; */
}
.emoj-img-box p{
  font-size: 11px;
  margin: 8px 0 0;
  white-space: nowrap;
}
.pre .sangat{
  border-bottom: 1px solid #ACACAC;
  padding: 10px 0 20px;
}
.emoj-img-box .btn {
  padding: 10px;
  width: 100px;
}
.emoj-img-box span{
  display: none;
}
/*.emoj-img-box input{
  display: none;
}*/
.table-head {
  font-size: 16px;
  font-weight: 600;
}
table.cari-tab td {
  font-weight: 600;
  padding: 10px;
  width: 50%;
}
.table.buti td:first-child{
  width: 20%;
}

.sistem-form .calendar .table{
  display: table;
  }
  .kpi-table .table tr td:nth-child(2) {
    text-align: right;
}
.kpi-table .table tr td{
  color:  #585A60;
  font-size: 12px;
  font-weight: 600;
  float: left;
  width: 50%;
}
.cont-k{
  background-color: #f7f7f7;
  padding: 10px;
  /* display: flex; */
  border-bottom: 0;
  height: 70px;
  width: auto;
}
.kpi-img {
  margin-top: 20px;
}
.kpi-img h5, .kpi-img p.kp-tit{
  font-size: 13px;
  color: #585A60;
  font-weight: 600;
  margin: 20px 0 5px;
}
.kpi-img p.kp-tit{
  font-weight: 400;
  margin: 5px 0 12px;
}

select.form-select.form-select-sm.kam-sel {
  width: auto;
  margin-left: 10px;
  justify-content: end;
   font-size: 14px;
}
select.form-select.form-select-sm.kam-sel:focus{
  border: 1px solid #01D0A6 !important;
}
button.dark-gre {
  background-color: #008000 !important;
  border-color: #008000 !important;
}

.kendiri .image-circle {
  position: absolute;
  top: 88px;
  bottom: 0;
  display: flex;
  align-items: center;
  right: 70px;
}

.kendiri .modal-dialog.modal-xl {
  max-width: 84%;
}
.kendiri .modal .modal-body .table tbody {
  display: revert;
}
.kendiri table textarea{
width: auto;
}
div[role=menu].temp-sub {
  top: 80px;
  display: none;
  right:92px;
}
.drop-show{
  left:11rem !important;
}
span.draf{
  color: #FFA500;
}
span.selesai{
color: #008000;
}
span.belum{
  color:#FF0000;
}
.kendiri .modal-title{
  font-size: 16px;
}
.kendiri table .fa-plus-circle, .kendiri table .fa-minus-circle{
color: #5296e5;
font-size: 16px;
}
.kendiri table .fa-minus-circle{
color: #df9221;
position: relative;
right: 14px;
}
.kendiri .table>:not(:last-child)>:last-child>*{
  border-color: #DBDBDB;
}
tr.sec-r{
  border-color: #DBDBDB !important;

}
.kendiri .modal .modal-body .table tr td{
  border-width: 1px 1px;
}
.kendiri .table-bordered>:not(caption)>* {
  border-width: 0px 0 !important;
}
.kendiri .table>:not(:last-child)>:last-child>* {
  border-bottom: 0 !important;
}

.innerpage-contain .btn.org{
  background-color: #FFA500 !important;
  border-color: #FFA500 !important;
}
.innerpage-contain .btn.org-r{
  background-color:#FF0000 !important;
  border-color: #FF0000 !important;
}
.innerpage-contain .btn.grn{
  background-color:#008000 !important;
  border-color: #008000 !important;
}
/*
.select2-selection__rendered .select2-selection__choice:first-of-type span {
  display: none!important;
}
*/
.textellipsis{

        max-width: 15ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

}
.select2-container--default span.select2-selection__clear {
  display: none;
}
.select2-container--default.select2-container--open span.select2-selection__clear {
  display: block;
}
/* .select2-container--default .select2-selection--multiple:before {
  content: ' ';
  display: block;
  position: absolute;
  border-color: #888 transparent transparent transparent;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  height: 0;
  right: 10px;
  margin-left: -4px;
  margin-top: 0px;
  top: 36%;
  width: 0;
  cursor: pointer;
} */

/* .select2-container--open .select2-selection--multiple:before {
  content: ' ';
  display: block;
  position: absolute;
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px;
  height: 0;
  right: 6px;
  margin-left: -4px;
  margin-top: -2px;top: 50%;
  width: 0;cursor: pointer
} */
.kpi-sel .select2-container--open .select2-selection--multiple:after {
display: none;
}

/* .kpi-sel .select2-container--default .select2-selection--multiple::after {
  position: absolute;
  right: 12px;
  top: 26%;
  content: "";
  width: 9px;
  height: 9px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transition: .3s all cubic-bezier(1, 0.25, 0.25, .8);
  transform: rotate(134deg);
  cursor: pointer; 
} */
.kpi-sel .select2-container--default .select2-selection--multiple .select2-selection__choice{
  background-color: #01D0A6;
  border-color: #01D0A6;
  color: #fff;
  border-radius: 50px;
  padding: 5px 20px;
}
.kpi-sel .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color: #fff;
}

.kendiri .modal-body{
  background: #fff;
}
.kendiri .modal-content{
  height: 100%;
}
.kendiri .modal-dialog{
  position:  relative!important;
}
.text-asses{
  resize: unset;
    height: 27px;
    width: 100px !important;
    text-align: right;
}
.kpi-img img{
  width: 86px;
    height: 81px;
    object-fit: contain;
}
.ed-btn .btn-square.text-nowrap {
  padding: 7px 10px !important;
}

.kpi-space .sistem-form span p {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
.cari-pop .label-name label b{
  word-break: break-word;
}
table.table.yang tr td{
  white-space: normal;
  width: 100%;
}
.sistem-form.tamba-in.select-rm select {
  background-image: none;
}

/* notification */

.notifi {
  border: 1px solid #E0E0E0;
  width: 28rem;
  margin: 50px auto;
  background: #ffffff;
  position: absolute;
  left: -21rem;
  top: 0.7rem;
  height: 32rem;
  overflow: auto;
}
.notifi h5 {
  color: #01D0A6;
  font-weight: 600;
  padding: 10px;
  border-bottom: 1px solid #E0E0E0;
}
.notifi .kata {
  padding: 10px;
  border-bottom: 1px solid #E0E0E0;
}
.notifi .kata .baru {
  font-size: 14px;
  font-weight: 600;
  color: #585A60;
}
.notifi .kata .ini {
  font-size: 14px;
  font-weight: 400;
  color: #585A60;
}
.notifi .clock span {
  font-size: 12px;
  font-weight: 600;
  padding-left: 5px;
  color: #808080;
}
.notifi .semua p {
  font-size: 12px;
  font-weight: 600;
  color: #01D0A6;
  border-top: 1px solid #E0E0E0;
  margin: 30% 0 0 0;
  padding: 10px;
  text-align: center;
}
#notification {
  display: none;
  /* additional styling */
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  /* padding: 10px; */
  z-index: 1; /* Ensure notification is above other content */
}
.chatmessage {
  display: none;
}
/* #toggleBtn {
  margin-bottom: 10px;
} */


/* chat */

.container.message {
  /* margin: 30px auto; */
  padding: 0;
  display: none;
  background: #fff;
  position: fixed;
  max-width: 596px;
  left: 39rem;
  top: 4.3rem;
}
.mese {
    width: 569px;
   
}
.mese p {
  color: #01D0A6;
  font-size: 14px;
  font-weight: 600;
  background: #ffffff;
  margin-bottom: 0;
  padding: 10px;
}
textarea#message-to-send{
  border:none !important;
}
textarea#message-to-send:focus {
  border: none !important;
}
.people-list {
  width: 168px;
  height: 27.9rem;
  float: left;
  background: #ffffff;
  position: relative;
  border: 1px solid #E0E0E0;
}
.chat-message.clearfix {
    border: 1px solid #E0E0E0;
    background: #ffffff;
}
.people-list .search {
  padding: 20px;
}
.people-list input {
  border-radius: 3px;
  border: none;
  padding: 14px;
  color: white;
  background: #6A6C75;
  width: 90%;
  font-size: 14px;
}
.people-list .fa-search {
  position: relative;
  left: -25px;
}
li.clearfix.Penye .name {
    font-size: 14px;
    font-weight: 600;
}
.Penye {
    padding: 10px !important;
}
.people-list ul {
  padding: 0 12px;
  list-style: none;
}
.people-list ul li {
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #E0E0E0;
    width: 11.9rem;
    right: 12px;
}
.people-list img {
  float: left;
  height: 32px;
}
.people-list .about {
    float: left;
    margin-top: 5px;
    padding-left: 8px;
    font-size: 12px;
    font-weight: 400;
}
.people-list .status {
  color: #92959E;
}

.chat {
    width: 428px;
    float: left;
    background: #F2F5F8;
    color: #434651;
    border: 1px solid #E0E0E0;
}
.chat .chat-header {
  padding: 9px;
  background: #F1F3F9;
  border-bottom: 2px solid white;
}
.chat .chat-header img {
  float: left;
}
.chat .chat-header .chat-about {
  float: left;
  padding-left: 10px;
  margin-top: 6px;
}
.chat .chat-header .chat-with {
  font-weight: 600;
  font-size: 13px;
}
.chat .chat-header .chat-num-messages {
  color: #92959E;
}
.chat .chat-header .fa-star {
  float: right;
  color: #D8DADF;
  font-size: 20px;
  margin-top: 12px;
}
ul.list img {
    width: 30px;
    height: 30px;
}

/* chat history */

.chathistory li.clearfix {
    border-bottom: 1px solid #E0E0E0;
}
.chat .chathistory {
  padding: 10px 0px 10px;
  border-bottom: 2px solid white;
  height: 300px;
  overflow-y: auto;
  background: #ffffff;
}
.chat .chathistory .message-data-time {
  color: #a8aab1;
  padding-left: 6px;
}
.chat .chathistory .message {
    color: #585A60;
    font-size: 14px;
    font-weight: 400;
    margin: 0px 50px 10px;
    width: 73%;
    position: relative;
}
.chat .chathistory .my-message {
  background: #ffffff;
}
.chat .chathistory .other-message {
    background: #ffffff;
}
.chathistory ul {
    padding-left: 0rem;
}
.chathistory ul li {
    list-style: none;
}

.message-data {
    margin-left: 10px;
}
span.message-data-name {
    color: #393939;
    font-size: 12px;
    font-weight: 600;
    padding: 0 5px;
}


.chat .chat-message textarea {
    width: 85%;
    border: none;
    font: 14px / 22px "Lato", Arial, sans-serif;
    margin: 5px auto 0px;
    resize: none;
}
.chat img {
    width: 30px;
    height: 30px;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
  font-size: 16px;
  color: gray;
  cursor: pointer;
}
.chat .chat-message button {
    float: right;
    color: #ffffff !important;
    font-size: 12px;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-weight: 600;
    background: #01D0A6;
}
.chat .chat-message button:hover {
  color: #75b1e8;
}

.online, .offline, .me {
  margin-right: 3px;
  font-size: 10px;
}

.online {
  color: #86BB71;
}

.offline {
  color: #E38968;
}

.me {
  color: #94C2ED;
}


/*--------daterangepicker----------*/

input[name="datetimes"] {
  width:20%;
  margin: 10px;
}

  .daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}
button.applyBtn {
    background: #01d0a6;
    border: none;
}
.daterangepicker.drop-up {
  margin-top: -7px;
}
button.cancelBtn:focus {
    border: none;
}
button.applyBtn:active {
    background: #01d0a6 !important;
}

button.applyBtn:hover {
    background: #25a68b !important;
}
button.cancelBtn {
    background: #ffffff;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #357ebd;
    border-color: transparent;
    color: #fff;
    border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

.digunakan{
  position: relative; 
  top: -47px;
  flex-wrap: wrap;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}
/* --------------- */

a#toggleBtnMSG span.badge {
  margin-left: -12px;
}
.kpi-sel.drop-sel {
  position: absolute;
  width: 24%;
  z-index: 9;
}

.ck-powered-by{
  display:none;
 }
 .select2-container .select2-search--inline {
  float: revert;
}
.report-sector .form-check {
  position: relative;
  right: 10px;
  padding: 0;
  margin: 0;
}
.modal-dialog .modal-content .modal-body .row .col-lg-3 {
  width: 20%;
  
}
.modal-dialog .modal-content .modal-body .row .col-lg-9 {
  width: 80%;
  
}