:root {
    --color-muted: #99A1B7;
}

body {
    font-family: 'Poppins','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.ki-duotone {
  font-family: 'keenicons-duotone' !important;
}
.fa {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}

.not-allowed {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn { border-radius: 1.5em; }
.border-radius-right { border-radius: 0 1.5em 1.5em 0 !important; }
.border-radius-left { border-radius: 1.5em 0 0 1.5em !important; }

.captcha {
    font-size: 2.3em;
    padding: 0em 1em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.sippp-fitur {
    padding: 0.5em 0.5em;
    display: inline-block;
    border: 1px solid #e9ebed63;
    border-radius: 1em;
    margin: 0.3em;
    background: #ffffffb0;
    box-shadow: 1px 3px 7px #ffffffa3;
    font-size: 1.5em;
    height: 2.2em;
}

select[readonly].select2-hidden-accessible + .select2-container {
  pointer-events: none;
  touch-action: none;
  opacity: 0.7;
}
table.table.table-form th { background-color: rgba(4, 49, 49, 0.11);text-align: right;vertical-align: middle; }
table.table tr.row-selected { background: #247aff3b; }

td .misi.badge,td .pp.badge,td .spp.badge { 
  white-space: normal;
  width: 11em;
  text-align: left;
}

.modal-dialog.modal-88 {
  max-width: 88% !important;
}

table.sub-table th {
  padding: 0.357em 1em !important;
  border-bottom: 1px solid #aaa;
  font-weight: 600;
}
table.sub-table td {
  padding: 0 1em !important;
  border-bottom: 1px solid #aaa;
}


 
.card-no-border, #ctn-table.card  {
  border: none !important;
  --bs-card-border-color: transparant;
  --bs-card-box-shadow: transparant;
}

.table-responsive {
  border-radius: 1.5em 1.5em 0em 0em;
}
.table-responsive thead th {
  background: #11164E !important;
  color: #fff !important;
  padding: 1em !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.table-responsive table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  box-shadow: inset 0 0 0 9999px #A9AFF533;
}
table.table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--bs-primary) !important;
  color: var(--bs-primary-inverse) !important;
}

#filter-dt .select2-container--bootstrap5 .select2-selection { border-radius: 1.5em !important; }
#filter-dt #kt_datatable_search_text { border-radius: 1.5em !important; }
#filter-dt #kt_datatable_search { background: #7B7FF1 !important;color: #fff !important;font-family: Poppins !important;border-radius: 1.5em; }
#filter-dt #kt_datatable_search .ki-filter-search * { color: #fff; }
#filter-dt #filter-download-excel { font-family: Poppins !important;border-radius: 1.5em; }

#filter-dt-ba .select2-container--bootstrap5 .select2-selection { border-radius: 1.5em !important; }

.page-item.active .page-link { border-radius: 1.5em !important; }
.form-select.form-select-solid { border-radius: 1.5em !important; }

.btn-gradien-primary {
  cursor: pointer;
   margin: 10px;
   padding: 15px 45px;
   text-align: center;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 0.5em 0.03em  #111111 !important;
   border-radius: 10px;
   display: block;
}
.btn-gradien-primary {background-image: linear-gradient(to right, #314755 0%, #26a0da  51%, #314755  100%)}
.btn-gradien-primary:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
}


 .btn-gradien-muted {background-image: linear-gradient(to right, #abbaab 0%, #ffffff  51%, #abbaab  100%)}
 .btn-gradien-muted {
  cursor: pointer;
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    box-shadow: 0 0 0.5em 0.03em  #111111 !important;
    display: block;
  }
  .btn-gradien-muted:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
         
.bulet { border-radius: 50%;border: 1px solid #000;background: #357;color: #fff;padding: 0.3em;font-size: 2em;width: 2em;height: 2em;display: block;text-align: center; }

#frm-profil-akun .form-group.row { margin-bottom: 1.5em; }
#frm-profil-akun .form-group.row .form-control { border-radius: 1.5em;padding-left: 1.5em; }
#frm-profil-akun .form-group.row .input-group .input-group-text { border-radius: 1.5em 0 0 1.5em; }
#frm-profil-akun .form-group.row .input-group .form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
 
.badge.misi-1 {
  background-color: #C0EACE;
  color: #059536;
}
.badge.misi-2 {
  background-color: #D8C8FF;
  color: #7C40FB;
}
.badge.misi-3 {
  background-color: #D7DDFF;
  color: #1623e1;
}
.badge.misi-4{
  background-color: #F4F4F4;
  color: #a0a0a1;
}
.badge.misi-5 {
  background-color: #FFF9CA;
  color: #e18d20;
}
.badge.misi-6 {
background-color: #FFE3E3;
  color: #df5e5e;
}
.badge.misi-7 {
background-color: #ECD49C;
  color: #976607;
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
  padding: 0.3em 1.5em;
}
.btn-primary-purple{
    background-color: #7B7FF1 !important;
    border-color: #7B7FF1 !important;
    color: #fff !important;
    padding: 10px 20px !important;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
   
  }
.btn-primary-purple:hover{
    background-color: #5054c7!important;
    border-color: #5054c7!important;
    color: #fff!important;
    padding: 10px 20px !important;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }
  .btn-dark-purple{
    background-color: #11164E !important;
    border-color: #11164E !important;
    color: #fff !important;
    padding: 10px 20px !important;
    height: fit-content;
  }
  .btn-dark-purple:hover{
    background-color: #11164E!important;
    border-color: #11164E!important;
    color: #fff!important;
    padding: 10px 20px !important;
    height: fit-content;
  }
  .btn-light-blue{
    background-color: #41CFFF !important;
    border-color: #41CFFF !important;
    color: #fff !important;
    padding: 10px 20px !important;
    height: fit-content;
  }
  .btn-bg-purple{
    background-color: rgb(90, 95, 255, 1) !important; 
    border-color: rgb(90, 95, 255, 1) !important;
    color: #fff !important;
    
  }
  .btn-light-blue:hover{
    background-color: #41CFFF!important;
    border-color: #41CFFF!important;
    color: #fff!important;
    padding: 10px 20px !important;
    height: fit-content;
  }
  .btn-dark-success{
    background-color: #3d9d43 !important;
    border-color: #3d9d43 !important;
    color: rgba(255, 255, 255, 1)!important;
    padding: 10px 20px !important;
    height: fit-content;
  }
  .btn-dark-success:hover{
    background-color: #3d9d43!important;
    border-color: #3d9d43!important;
    color: rgba(255, 255, 255, 1)!important;
    padding: 10px 20px !important;
    height: fit-content;
  }
  
  .flex-set{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }
  
  
.form-select{
  background-image:url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 fill=%27%23333%27 class=%27bi bi-caret-down-fill%27 viewBox=%270 0 16 16%27%3e%3cpath d=%27M7.247 11.14 2.451 5.658C1.885 4.968 2.345 4 3.204 4h9.592c.859 0 1.319.968.753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z%27/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: right 1em center;
}
.capitalize{
  text-transform: lowercase;
  display: inline-block;
}
.capitalize::first-line{
  text-transform: capitalize;
}
.for-btn-BA{
  border: 1px dashed #BA2727;
  border-style: dashed 2.2px;
  padding: 10px 30px;
  border-radius: 10px;
  display: flex;
  width: 35%;
}
td .misi.badge, td .pp.badge, td .spp.badge {
  font-size: 12px!important;
  font-weight: 600!important;
  line-height: 1.4!important;
  font-family: 'poppins';
  letter-spacing: 0.1!important;

}
.badge-light-success{
  color: #059536 !important;
  
  letter-spacing: 0.1!important;
}
.grey-badge-no-bg{
  color: #aaa !important;
  font-size: 12px !important;
  line-height:1.4!important;
  display: inline-block;
}
.table:not(.table-bordered)>:not(:last-child)>:last-child>*{
  vertical-align: middle;
}
 .logo-containter {
  /* display: flex; */
 width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.logo-containter .sub-logo {
  position: relative;
  flex-shrink: 0;
  background: #fff;
  padding: 12px 15px;
  border-radius: 15px;
}
.logo-containter .sub-logo > img {
  position: relative;
  width: 100%;
  z-index: 1;
} 

.sub-logo::after{
  position: absolute;
  content: "2.0";
  font-size: 3.8em;
  font-weight: 900;
  z-index: 0;
  opacity: 0.2;
  color: #99A1B7;
  right: 10px;
  bottom: -10px;
}
.app-sidebar-logo{
  height: auto;
  padding-top: 20px;
  padding-left: 5px;
  padding-right: 5px;
}
.img-minim-logo{
  position:relative; 
  z-index:1; 
  height: 4.5em;
  width: 14em;
  left: 10px;
}  
.st-lock{
  font-size: 1.1em;
  color: #aaa;
  margin-right: 1em;
  margin-top: 0.5em;
  line-height: 1.9;
}
.con-lock{
  margin-right: 5px;
  margin-top: 8px;
}
.switch-style .form-check-input {
  cursor: pointer;
  background-color: #E5E6F4!important;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23D9D9D9'/%3e%3c/svg%3e")!important;

  
}
.switch-style .form-check-input:checked{
  background-color: #7B7FF1 !important;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")!important;

}
@media (min-width: 1500px) {
  :root {
      --bs-app-sidebar-width: 300px;
      --bs-app-sidebar-width-actual: 300px;
      --bs-app-sidebar-gap-start: 0px;
      --bs-app-sidebar-gap-end: 0px;
      --bs-app-sidebar-gap-top: 0px;
      --bs-app-sidebar-gap-bottom: 0px;
     
  }
  .img-minim-logo{
    position:relative; 
    z-index:1; 
    height: 4.5em;
    width: 18em;
    left: 0px;
  } 
   

} 

.login-page-app{
  position: absolute;
  top: 3%;
  left: 4%;
  margin: 1em !important;
}
 
.bg-logo-block::before{
  position: absolute;
  content: "";
  background: #fff;
  height: 75px;
  width: 80px;
  left: 6px;
  bottom: -8px;
  border-radius: 10px;
}
/* .bg-logo-block::before{
position: absolute;
content: "";
background: #fff;
height: 75px;
width: 80px;
left: 0;
bottom: -8px;
} */