/*LOADER*/
.sk-circle {
    margin: auto;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding: 20px;
    background: white;
    border-radius: 20px;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

div#loading-container {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: black;
    opacity: 0.5;
    z-index: 99999;
    display: none;
}

div#circle-container {
    position: relative;
    margin: auto;
    width: 80px;
    height: 80px;
    background-color: white;
    opacity: 1;
    top: calc((100% - 40px) / 2);
    border-radius: 18px;
}

/* .box.box-warning {
    border-top-color: #3c8dbc;
} */

.main-header div.logo {
    padding: 0px;
    height: 55px;
}
.logo .sidebar-toggle {
    color:white;
    width: 47px;
}
a.logo-title {
    width: calc(100% - 47px);
    float: left;
    color: white;
    font-size: 18px;
    text-align: left;
    padding: 15px 0px;
}

.sidebar-mini nav.navbar.navbar-static-top .logo {
    /*display: none;*/
    font-size: 18px;
    text-align: left;
    display: block;
    width: 300px;
    height: 55px;
    line-height: 1.5;
    background-color: inherit;    
}

.sidebar-mini.sidebar-collapse nav.navbar.navbar-static-top .logo {
    font-size: 18px;
    text-align: left;
    display: block;
    width: 300px;
    height: 55px;
    line-height: 1.5;
    background-color: inherit;
}

a.logo.single-line span {
    line-height: 55px;
}

@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .main-header .logo .logo-title {
        display: none;
    }
}

@media (max-width: 767px) {
    nav.navbar.navbar-static-top {
        display: none;
    }
    .main-sidebar {
        padding-top: 50px;
    }
}

li.dropdown.user.user-menu > a {
    height: 55px;
    padding: 0px 15px;
}

li.dropdown.user.user-menu > a span {
    display: inherit;
    line-height: 1.3;
    text-align: right;
    font-weight: 700;
}

.fontpt16 {
    font-size: 22px !important;
}
.fontpt14 {
    font-size: 19px !important;
}
.fontpt12 {
    font-size: 16px !important;
}
.fontpt11 {
    font-size: 15px !important;
}
.fontpt9 {
    font-size: 12px !important;
}

.font20 {
    font-size: 20px;
}
.font16 {
    font-size: 16px;
}
.font14 {
    font-size: 14px;
}
.font12 {
    font-size: 12px;
}
.margbotmin15 {
    margin-bottom: -15px;
}
.margbot0 {
    margin-bottom: 0px;
}
.margbot5 {
    margin-bottom: 5px;
}
.margbot10 {
    margin-bottom: 10px;
}
.margbot20 {
    margin-bottom: 20px;
}
.margtop5 {
    margin-top: 5px;
}
.margtop10 {
    margin-top: 10px;
}
.margleft0 {
    margin-left: 0px;
}
.margright0 {
    margin-right: 0px;
}
.padright0 {
    padding-right: 0px;
}
.padright5 {
    padding-right: 5px;
}
.padleft0 {
    padding-left: 0px;
}
.padleft7-5 {
    padding-left: 7.5px;
}
.radius0 {
    border-radius: 0px;
}
.shadow-none {
    box-shadow: none;
}
.back-color-white {
    background-color: white !important;
}


.main-header div.logo, .sidebar-mini nav.navbar.navbar-static-top .logo,
li.dropdown.user.user-menu > a, .main-header div.logo a {
    height: 75px
}

.sidebar-mini nav.navbar.navbar-static-top .logo span {
    position: absolute;
    top: calc(50% - 27px);
}
.skin-blue .main-header .navbar .nav>li>a{
    background: rgba(0, 0, 0, 0) !important;
}


aside.main-sidebar {
    padding-top: 75px;
}

.main-header div.logo a {
    line-height: 45px;
}

.ui-datepicker-inline.ui-datepicker {
    width: 90%;
    margin: 0px auto;
}

table.table-main-menu.table-task td.col-button {
    border-left: none !important;
    border-right: none !important;
}

table.table-main-menu.table-task th {
    white-space: nowrap;
    position: sticky;
    top: -1px;
    z-index: 10;
}

td, th {
  font-size: 15px;
}

.row.small-gap {
    margin-left: -4px;
    margin-right: -4px;
}

.row.small-gap div[class^="col-"] {
    padding: 0px 4px;
}

.button-small {
    padding: 2px 12px;
}
.box.box-warning.with-bottom-line {
    border-bottom: solid 3px #3c8dbc;
}

.change-language-container span.fa {
    font-size: 25px;
    float: left;
    margin-right: 10px;
    line-height: 34px;
}

.change-language-container select {
    float: left;
    width: calc(100% - 35px);
}

.change-language-container {
    width: 150px;
}
.fieldLabel {
    line-height: 26px;
    margin: 0px;
    font-size: 15px;
    font-weight: 500;
}
.ss-main {
    height: auto;
    padding: 0px;
    border: none;
}

.sidebar-menu .navMenu > a > span {
    display: block;
    float: left;
    width: calc(100% - 23px);
    white-space: break-spaces;
    margin-left: 3px;
}

.sidebar-menu .navMenu > a > i {
    float: left;
    width: 20px;
    line-height: 18px;
}

.sidebar-menu .navMenu a:after {content: " ";clear: both;display: table;}

.sidebar-menu .treeview.navMenu > a span:nth-child(2) {
    width: calc(100% - 49px);
}

label.required-label {
    float: right;
    color: red;
    margin-right: -15px;
}
@media (min-width: 768px){
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
        width: 230px;
    }
}

.lock-collapse-child {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    height: auto !important;
}
.treeViewLine{
    width: auto;
    height: 5px;
    border-bottom: 1px solid black;
}
#modalAlertAndConfirm .modal-dialog{
    width: 440px;
}
#modalAlertAndConfirm .modal-body{
    max-height: 600px; 
    overflow: auto;
}
.modalButtonContainer {
    position: relative;
    /* height:50px; */
}
  
.buttonCenter {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.modal-table-lookup{
    max-height: 400px;
    display: none;
}
.modal-table-lookup .table-custom-container{
    max-height: 300px;
}
th.modalalert-col-no, .modalalert-col-no .box-content{
    width: 50px;
}
th.modalalert-col-desc, .modalalert-col-desc .box-content{
    width: 330px;
}
.modal-table-lookup th, .modal-table-lookup th .box-content{
    background-color: #fff56b;
}

.bg-blue-light-hartono {
    background-color: #008bca !important;
}

.bg-blue-hartono {
    background-color: rgb(33, 85, 157) !important;
}

.bg-yellow-hartono {
    background-color: rgb(255, 210, 0) !important;
}

.text-blue-hartono {
    color: rgb(33, 85, 157) !important;
}

.text-blue-light-hartono {
    color: #008bca !important;
}

.text-yellow-hartono {
    color: rgb(255, 210, 0) !important;
}

.box.box-primary {
  border-top-color: #008bca !important;
}

/* .content-wrapper {
  padding: 15px 0 0;
  background-color: #f0f0f0;
  background-repeat: no-repeat;
  background-image: url(/static/images/bg1.png), url(/static/images/bg2.png);
  background-position: 20% 80%, 100% 15%;
  background-attachment: fixed;
} */

.btn-primary {
    background-color: #008bca;
    border-color: #008bca;
    color: white;
    font-weight: 700;
}

.btn-primary:not(:disabled):hover, .btn-primary:not(:disabled).active, .btn-primary:not(:disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: rgb(33, 85, 157);
    border-color: rgb(33, 85, 157);
    font-weight: 700;
    color: white;
}

.btn-primary:disabled {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.btn-warning {
    background-color: rgb(255, 210, 0);
    border-color: rgb(255, 210, 0);
    color: #008bca;
    font-weight: 700;
}

.btn-warning:not(:disabled):not(.disabled):hover, 
.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show>.btn-warning.dropdown-toggle {
    background-color: rgb(255, 210, 0);
    border-color: rgb(255, 210, 0);
    font-weight: 700;
    color: rgb(33, 85, 157);
}

.btn-warning.disabled, .btn-warning:disabled {
    color: #212529 !important;
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.modal-content {
    border-radius: 12px;
}

.BodyOverFlowHidden{
    overflow: hidden;
}

.BodyOverFlowHidden .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.form-control:focus {
  border-color: #008bca;
}

.box-content label {
  margin-bottom: 0px !important;
}

.content-wrapper {
    min-height: calc(100vh - 130px) !important;
}

.input-with-button input {
    float: left;
    width: calc(100% - 38px);
    border-radius: 3px 0px 0px 3px;
}

.input-with-button button {
    width: 38px;
    float: left;
    border-radius: 0px 3px 3px 0px;
}

.ss-single-selected {
    height: 38px !important;
}

.border-blue-light-hartono {
    border-color: #008bca !important;
}

.group-box {
    border: solid 1px #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.group-header {
    padding: .25rem;
    border-radius: 3px 3px 0px 0px;
}

.group-box-body {
    padding: 1rem;
}

.cursor-pointer {
    cursor: pointer;
}

.resize-none {
    resize: none;
}

.btn-secondary {
    background-color: white;
    border-color: #008bca;
    color: #008bca;
    font-weight: 700;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary.hover,
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    background-color: white;
    border-color: rgb(33, 85, 157);
    font-weight: 700;
    color: rgb(33, 85, 157);
}

.groupbox {
    border: solid 2px #ccc;
    border-radius: 9px;
    position: relative;
    padding: 1rem;
}

lable.groupbox-title {
    margin: 0px;
    position: absolute;
    top: -0.8rem;
    background: white;
    padding: 0px 7px;
    left: 7px;
    font-weight: 700;
}
.btn{
    font-size: 15px !important;
}
.input-with-button button{
    height: 33px;
}
input[type="text"]{
    height: 33px;
}
.ss-single-selected{
    height: 33px !important;
}

/*
.table-custom-container th{
    height: 100% !important;
}
.mb-2{
    margin-bottom: -2px !important;
}*/
button[disabled], button:disabled, .btn-primary:disabled, .btn-primary[disabled]{
    background-color: #888888 !important;
    border-color: #D0D0D0 !important;
}
.box.box-warning {
    border-top-color: #3c8dbc;
}

th.sticky-column {
    z-index: 12 !important;
}
td.sticky-column {
    z-index: 2 !important;
}

.circle-notification {
    width: 27px;
    height: 27px;
    background-color: #F92F2F;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    text-align: center;
}

.text-notification_99
{
    font-size:12px;
    margin-bottom:0px;
    margin-left:5px
}
.text-notification
{
    font-size:12px;
    margin-bottom:0px;
}
.text-notification-plus
{
    font-size:12px
}










/* ams */

.modal.custom .modal-dialog {
    width:120%;
    max-height:100%;
    position:fixed;
    bottom:0;
    right:0;
    margin:0;
}

.modal.custom .modal-dialog {
right: -50%;
position:absolute;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
}

.position_relative_inline_block{
position: relative; display: inline-block;
}

.div_input_label_search{
font-weight: 500;
font-size: 14px;
line-height: 25px;
position: relative;
display: inline-block;
cursor: pointer;
/* width: 200px; Adjust the width as needed */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}

.capsule_pilihan_user{
background-color: #E1E1E1;
min-width: 44px;  
height: 24px;
border-radius: 25px;
margin-left: 10px;
margin-bottom: 10px;
position: relative;
text-align: center;
/* margin-left: 10px;
margin-right: 12px; */
padding-left: 10px;
padding-right: 10px;
}

.modal_hasil_filter_terpilih_pg_categ{
min-height: 0px;
border-radius: 12px;
row-gap: 12px;
margin-left: 16px;
margin-right: 16px;
background-color: white;
margin-bottom: 16px;
overflow-y: auto;
overflow-x: hidden;
}

.modal.custom.show .modal-dialog {
right: 0;
box-shadow: 0px 0px 19px 
rgba(0,0,0,.5);
}

/* ----- MODAL STYLE ----- */
.modal-content {
border-radius: 0;
border: none;
}

.modal-header.left_modal, .modal-header.right_modal {

padding: 10px 15px;
border-bottom-color: 
#EEEEEE;
background-color: 
#FAFAFA;
}

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sidebar {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.3s;
  /* padding-top: 60px; */
  padding-left: 10px;
  padding-right: 0px;
  overflow-y:hidden !important;
  display: flex;
  flex-direction: column;
}

.sidebar a, .dropdown-btn {
  padding: 13px 7px;
  text-decoration: none;
  font-size: 16px;
  color: black;
  transition: 0.3s;
  /* font-weight: bold; */
  display: flex;
  align-items: center;
  border: none;
  background: none;
  width:100%;
  cursor: pointer;
  outline: none;
}

.sidebar a i {
  margin-right: 5px;
}

.sidebar i {
  color: grey;
}
.sidebar  a:hover i {
  color: black;
}

.sidebar a:hover, .dropdown-btn:hover, .sidebar .active {
  background-color: #E8EDF5;
  color: darkblue;
  /* width: 96.5%; */
  /* padding-left: 8px; */
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: white;
  color: black;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #E8EDF5;
  border-radius: 25%;
  width: 96.5%;
}

#main {
  transition: margin-left .3s;

}

.navbar-nav > li {
float: left;
position: relative;
}

.btn-burger{
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
  border:1px solid silver;
  border-style: solid;
  border-radius: 25%;
}

.font-color-black{
  color:black;
}

.main-content{
  padding: 36px 24px;
  height: 100%;
}

.sidebar a:hover, .sidebar .dropdown-btn:hover {
  background-color: #E8EDF5;
  /* margin: 5px;
  border-radius: 5px;
  width: 96.5%; */
  
}

.sidebar a.dropdown-child:hover {
  background-color: #E8EDF5;
  /* margin-left: 15px;
  border-radius: 5px;
  width: 90%; */
  
}
/* .sidebar .active {
  background-color: #04AA6D;
} */

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  /* .sidebar {padding-top: 15px;} */
  .sidebar a {font-size: 18px;}
}

.brand-link-2 .brand-image {
  /* float: left; */
  /* line-height: .8; */
  /* margin-left: .8rem; */
  margin-right: .5rem;
  align-content: center;
  max-height: 33px;
  width: auto;

}
.brand-link-2 {
  /* line-height: 2.8; */
  margin-right: .5rem;
  max-height: 33px;
  width: auto;
  display: flex;
  align-items: center;
}
.brand-link-2 label{
  margin-bottom: 0;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: inherit;
  
  /* margin-left: 8px; */
}
.dropdown-child{
  margin-left: 20px;
}
.fa-chevron-down{
  float: right;
  padding-right: 8px;
}


.fa-chevron-down::before,
.fa-chevron-down::after {
position: relative;
display: block;
width: 10px;
height: 1px;
transition: 0.3s ease-in-out;
}

.fa-chevron-down::before {
transform: rotate(0deg);
}

.fa-chevron-down::after {
left: 6px;
/* top: -10px; */
transform: rotate(-180deg);
}

.dropdown-btn.active .fa-chevron-down::before {
transform: rotate(-180deg);
top:18px;
}

.dropdown-btn.active .fa-chevron-down::after {
transform: rotate(0deg);
}

.nav-bar-main{
/* height: 300px; */
overflow-y:auto;
scrollbar-width: thin;
overflow-x: hidden;

}
.nav-bar-main::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}

.nav-bar-main ul {
margin-bottom: 0 !important;
padding-inline-start: 0 !important;
}

.nav-bar-main ul a {
padding-left: 40px !important;
}

.nav-bar-main ul ul a {
padding-left: 80px !important;
}

.nav-bar-main ul, .nav-bar-main li {
list-style-type: none
}

.nav-bar-main a.sidebar-item img.arrow-menu {
margin-left:auto;

-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}

.nav-bar-main a.sidebar-item.collapsed img.arrow-menu {
-webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}

.nav.tab-bar {
text-align: center;
font-size: 1rem;
border-bottom: 1px solid #dee2e6;
padding-left: 5px;
padding-right: 5px;
margin-top: 20px;
}

.tab-bar .nav-link {
text-decoration: none;
display: inline-block;
padding: 10px 40px;
color: #212529;
margin-right: 5px;
font-weight: bold;
}

.tab-bar .nav-link:hover {
text-decoration:none;
/* background-color: #d0ebff; */
border-bottom: 2px solid black
}
.tab-bar .nav-link.current {
border-bottom: 2px solid black;
}
.btn {
padding: 10px 20px;
font-size: 1rem;
}

/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: black;
}

input:focus + .slider {
box-shadow: 0 0 1px black;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.bg-light-success{
  color: #12B76A;
  background-color: #E7F8F0;
}

/* template tampilan depan dashboard welcome back */
.main_navbar_atas{
width: 100%;
display: flex;
flex-direction: column;
}

.welcome_back{
  column-width: 1440px;height: 212px; 
  /* padding-top: 36px;
  padding-bottom: 36px;
  padding-left: 50px;
  padding-right: 24px; */
}

.textcolorgrey{
  color: #667085;
}

/* template halaman utama template */
@font-face {
font-family: inter-font;
src: url(/static/lib/fonts/Inter-Medium.ttf);
}

body, html {
font-family: inter-font !important;
height:100% !important;
background-color: white;
}

.circle-notification {
border-radius: 50%;
background-color: #F92F2F;
float: right;
color: white;
height: 20px;
width: 20px;
text-align: center;
font-size: 14px;
margin-left: auto;
}

.user-panel {
flex-grow: 0;
flex-shrink: 0;
}

.user-panel .image {
display: flex;
align-items: center;
}

.sidebar_module_container {
border-bottom: 1px solid rgba(0,0,0,.1);
margin: 0px 8px;
height: 52px;
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
}

.sidebar_module_container label {
font-size: 1rem;
font-weight: 100 !important;
}

.sidebar_menus_container {
/* border-bottom: 1px solid rgba(0,0,0,.1); */
margin: 0px 8px;
font-weight: 100 !important;
/* display: flex; */
flex-grow: 0;
flex-shrink: 0;
}

.sidebar_apps_container {
border-bottom: 1px solid rgba(0,0,0,.1);
margin: 0px 8px;
overflow-y: auto;
scrollbar-width: thin;
flex-grow: 1;
flex-shrink: 1;
}

.sidebar_apps_title {
display: flex;
align-items: center;
min-height: 33px;
padding: 16px 8px 8px 0px;
color: #595959;
}

.sidebar_profile_container .nav-bar-main {
overflow-y: hidden;
flex-grow: 0;
flex-shrink: 0;
}

.sidebar_profile_container {
border-top: 1px solid rgba(0,0,0,.1);
margin: 0px 8px;
font-weight: 100 !important;
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
}


.pagebodyfixsize{
  width: 100%;
  height: 900px;  
}

.navbaratas{  
  height: 52px; 
  width:auto;
  align-items: center;
  padding-left: 28px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  min-width: 300px;
}
.buttonnavbar{
  border: 1px solid #BDBDBD;
  height: 24px;
  width: 24px;
  border-radius: 8px;
  text-align: center;   
}

.buttonnavbarimg{
margin-top:-3px
}

a:hover {
  color: black;
}

.spacing-letter-1{
  letter-spacing: -1px;
}

.modal-content_960{
width: 960px;
margin-left: -174%;
height: 900px;
border: none;
overflow-y: auto;
overflow-x: hidden;
}

.main_body_AMS{
padding: 0px 24px;
width: 100%;  /* Ikuti width dari figma*/
height: auto;
}

.width1416px{
width : auto;

}

.bodyKanan{
/* width: 1164px;
height: 898px;  */
width: 100%;
height: auto;
flex-grow:1;
display:flex;
align-items: flex-start;
justify-content: center;
min-width: 300px;
/* height: 100vh; */
/* padding-top: 36px;
padding-bottom: 36px;
padding-left: 5px;
padding-right: 24px; */
background-color: #f6f6f6;
}

.wrapper {
/* max-width: 1440px; */
margin: auto;
display:flex;
}

/* end template halaman utama template */


/* Bagian head body */
.head_body{
height: 38px; 
padding-top: 36px;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 24px;

}
.judul_menu_schedule{          
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
width: auto;
padding-left: 10px;
}

.font_lable_24_spacing_05{
font-size: 24px;
font-weight: 600;
line-height: 30px;
letter-spacing: -0.5px;
}

.div_btn_create_opname{            
width:auto;
padding-right: 6px;
padding-left: 0px;  
float:right;
}

.btn_create_opname{
background-color: #1A4798;
color: white;
width: auto;
height: 36px;
text-align: center;  
line-height: 20px; 
border-radius: 8px;
padding-top: 8px;
padding-bottom: 14px;
padding-left: 8px;
padding-right: 14px;
float:right;
}
/* End Bagian head body */

/* Bagian NavMenu dalam Menu */
.nav_body{
column-width: auto;height: 35px; 
padding-top: 36px;
padding-bottom: 36px;
padding-left: 5px;
padding-right: 24px;
}

.topnavmenu {
overflow: hidden;
background-color: #FCFCFC;
width: auto;
height: 55px;
border-radius: 0.5px;
}

.topnavmenu a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}

/* .topnavmenu a:hover {
border-bottom: 3px solid #1A4798;
} */

.topnavmenu a.active {
border-bottom: 3px solid #1A4798;
color: #1A4798;
}
/* End Bagian NavMenu dalam Menu */

/* Bagian filter menu */
/* .filter_body{
  column-width: auto;height: auto; 
  padding-top: 36px;
  padding-bottom: 36px;
  padding-left: 0px;
  padding-right: 24px;
}

.row_filter{
column-width: 1230px;height: 38px; 
}

.filter_sebelah_kiri{
width: auto;
height: 40px;
padding-left: 10px;
}

.resize_slim_select
{
width: 203px;
border-radius: 8px;
padding-left: 10px;
}

.select_filter_size{
display: block;
height: calc(2.25rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 8px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.filter_floating_right{
width:auto ;
padding-right: 5px;
padding-left: 0px;  
} */
.row_filter{
display: flex;
flex-wrap: wrap;
margin-right: 0px;
margin-left: -7.5px;
}

.filter_body{
width: auto;
height: 38px; 
padding-top: 36px;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 24px;

}
.filter_nav_kanan{          
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 15%;
max-width: 15%;
padding-left: 10px;
}
.filter_nav_kiri{          
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
width: auto;
padding-left: 10px;
}
.filter_nav_space{
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
width: 30px;
padding-left: 0px;
}
/* end Bagian filter Menu */

/* Bagian Main Body */


.main_body{
column-width: auto;height: 638px; 
padding-top: 36px;
padding-bottom: 36px;
padding-left: 5px;
padding-right: 24px;
}

.body_detail {
/* overflow: hidden; */
background-color: #FCFCFC; 
padding-top: 36px;
width: auto;
height: 638px;
border-radius: 8px;
margin-top: 36px;
}

.img-container {
/* text-align: center;
display: block;
 */
text-align: center;
object-fit: scale-down;
position:relative;
top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}

.font_mainmenu_center{
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
color: #A6A6A6;
}

.grayscale { 
  filter: grayscale(100%); 
}
/* End Bagian AMS */






    /*=@font-face {
          font-family: "Inter-Medium";
          src: url("/static/lib/fonts/Inter-Medium.ttf") format("truetype");
      } */        
      body{
        font-family: "inter-font" !important;
      }
      /*.modal-xl{
        bottom:0 !important;
        right:0 !important;
        margin:0 !important;
        max-height: 100%;
      }*/
    
      /* table {
        display: block;
        overflow: scroll;
        white-space: nowrap;
      } */

      select {

      /* styling */
        width: 100%;
        background-color: white;
        border-top: 1px solid #ced4da;
        border-left: 1px solid #ced4da;
        border-right: 1px solid #ced4da;
        border-bottom: 1px solid #ced4da;
        border-radius: 8px 8px 8px 8px;
        border-radius: 4px;
        display: inline-block;
        font: inherit;
        line-height: 1.5em;
        padding: 0.5em 3.5em 0.5em 1em;

      /* reset */

      margin: 0;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          -webkit-appearance: none;
          -moz-appearance: none;
      }

      /* arrows */

      select.classic {
        background-image:
        linear-gradient(45deg, transparent 50%, blue 50%),
        linear-gradient(135deg, blue 50%, transparent 50%),
        linear-gradient(to right, skyblue, skyblue);
        background-position:
        calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        100% 0;
        background-size:
        5px 5px,
        5px 5px,
        2.5em 2.5em;
        background-repeat: no-repeat;
      }

      select.classic:focus {
        background-image:
        linear-gradient(45deg, white 50%, transparent 50%),
        linear-gradient(135deg, transparent 50%, white 50%),
        linear-gradient(to right, gray, gray);
        background-position:
        calc(100% - 15px) 1em,
        calc(100% - 20px) 1em,
        100% 0;
        background-size:
        5px 5px,
        5px 5px,
        2.5em 2.5em;
        background-repeat: no-repeat;
        border-color: grey;
        outline: 0;
      }

      select.round {
        background-image:
        linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%),
        radial-gradient(#ddd 70%, transparent 72%);
        background-position:
        calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        calc(100% - .5em) .5em;
        background-size:
        5px 5px,
        5px 5px,
        1.5em 1.5em;
        background-repeat: no-repeat;
      }

      select.round:focus {
        background-image:
        linear-gradient(45deg, white 50%, transparent 50%),
        linear-gradient(135deg, transparent 50%, white 50%),
        radial-gradient(gray 70%, transparent 72%);
        background-position:
        calc(100% - 15px) 1em,
        calc(100% - 20px) 1em,
        calc(100% - .5em) .5em;
        background-size:
        5px 5px,
        5px 5px,
        1.5em 1.5em;
        background-repeat: no-repeat;
        border-color: green;
        outline: 0;
      }

      select.minimal {
          background-image:
              linear-gradient(45deg, transparent 50%, gray 50%),
              linear-gradient(135deg, gray 50%, transparent 50%),
              linear-gradient(to right, #ccc, #ccc);
          background-position:
              calc(100% - 20px) calc(1em + 2px),
              calc(100% - 15px) calc(1em + 2px),
              calc(100% - 2.5em) 0.5em;
          background-size:
              5px 5px,
              5px 5px,
              1px 1.5em;
          background-repeat: no-repeat;
      }

      select.minimal:focus {
        background-image:
        linear-gradient(45deg, green 50%, transparent 50%),
        linear-gradient(135deg, transparent 50%, green 50%),
        linear-gradient(to right, #ccc, #ccc);
        background-position:
        calc(100% - 15px) 1em,
        calc(100% - 20px) 1em,
        calc(100% - 2.5em) 0.5em;
        background-size:
        5px 5px,
        5px 5px,
        1px 1.5em;
        background-repeat: no-repeat;
        border-color: green;
        outline: 0;
      }

      select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
      }

      /* body { */
          /* font: 1em/100% "Helvetica Neue", Arial, sans-serif; */
          /* padding: 2em 0; */
      /* } */

      h1 {
        /* color: white; */
        line-height: 120%;
        margin: 0 auto 2rem auto;
        max-width: 30rem;
      }

      .svg-icon:hover path {
          fill: darkblue; /* Change color on hover */
      }



       /* CSS Custom */
       .modal.right .modal-dialog {
        position: absolute;
        right: 0;
        margin: 0;
      }
      .btn {
        z-index: 0!important;
      }
      body {
          margin: 0;
          padding: 0;
          /* display: flex; */
          min-height: 100vh;
      }
      .sidebar {
          width: 250px;
          background-color: white;
          /* color: white; */
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: fixed;
          left: 0;
          top: 0;
          bottom: 0;
      }
      /* .sidebar .top-section {
          padding: 20px;
      }
      .sidebar .bottom-section {
          padding: 20px;
      } */
      .content {
          margin-left: 250px;
          padding: 20px;
          flex-grow: 1;
      }


      /* modal alert */
.modal_size{
    min-height: 210px;
    min-width: 512px;
  }
  .modal-content-radius-12 {
    border-radius: 12px;
  }
  .modal_radius_12{
   border-radius: 12px;
  }
  
  .modal_header{
    padding-left:24px;
    padding-right:24px;
    padding-top:24px;
    padding-bottom:14px
  }
  
  .modal_body{
    padding-left:24px;
    padding-right:24px;
    padding-top:0px;
    padding-bottom:32px
  }
  
  .modal_footer{
    padding-left:24px;
    padding-right:24px;
    padding-bottom:24px
  }
  
  .modal_header_remove_bottom_line{
    border-bottom:0px;
  }
  
  .modal_button_show_alert{
    background-color: #1A4798;
    border: 1px solid #1A4798;
    color: #FCFCFC;
    border-radius: 8px !important;
  }
  
  .display_none{
    display: none;
  }
  .ss-main .ss-single-selected {
      border-radius: 8px;  
    }
    
    .modal_header_no_bottom_line{
      border-bottom:0px;
      border-top:0px;
    }
    .modal.custom .modal-dialog {
        /* width:120%;
        max-height:100%;
        position:fixed;
        bottom:0;
        right:0;
        margin:0; */
        width:960px;
        position:fixed;
        bottom:0;
        right:100%;
        margin:0;
  
    }
  
    .modal.custom .modal-dialog {
    right: -50%;
    /* right : 10%; */
    position:absolute;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
         -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
  }
  
  .btn:hover{
    color:#9dd3f7;
  }
  
  .modal.custom.show .modal-dialog {
    /* right: 36.4%; */
    right: 0%;
    box-shadow: 0px 0px 19px 
  rgba(0,0,0,.5);
  }
  
  /* ----- MODAL STYLE ----- */
  
  .modal-content_960{
    width: 960px;
    height: 900px;
    /* height: auto; */
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .modal-content {
    border: none;
  }
  
  .modal-header.left_modal, .modal-header.right_modal {
  
    padding: 10px 15px;
    border-bottom-color: 
  #EEEEEE;
    background-color: 
  #FAFAFA;
  }
  .width_100{
    width: 100%;
  }