:root {
  --radius: 18px;
  --box-shadow2: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
  --box-shadow: 0;
  --primary-color: #5CC7FF !important;
  --primary-color2: #CFEFFF !important;
}

#authorization-sidebar-toggle {
  background-color: #fff;
}

#authorization-b-left {
  border: 0 !important;
  padding-left: 0 !important;
}

#authorization-body {
  background-color: #EAEAEA !important;
}

#authorization-wrapper #authorization-header {
  display: flex;
  flex-wrap: nowrap;
  padding: 12px 24px;
  justify-content: space-between;
  border-bottom: none;
  height: 100px;
  background: #5CC7FF;
}

#authorization-wrapper #authorization-body #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a.active,
#authorization-wrapper #authorization-body #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a:hover {
  background-color: #F9FAFB;
  color: #101928;
  font-weight: 600;
  /* border-radius: 30px; */
}

#authorization-wrapper #authorization-body:not(.sidebar-close) #authorization-b-left #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a,
#authorization-wrapper #authorization-body:not(.sidebar-close) #authorization-b-left #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li button,
#authorization-wrapper #authorization-body #authorization-b-left:hover #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a,
#authorization-wrapper #authorization-body #authorization-b-left:hover #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li button {
  gap: 12px;
  padding: 16px 16px;
  margin-top: 8px;
  margin-bottom: 8px;
}

#authorization-wrapper #authorization-body:not(.sidebar-close) #authorization-b-left #authorization-b-menu .authorization-b-menu-section .authorization-bm-list > li > a,
#authorization-wrapper #authorization-body #authorization-b-left:hover #authorization-b-menu .authorization-b-menu-section .authorization-bm-list > li > a {
  margin-top: 0;
  margin-bottom: 0;
  
  border-left: 8px solid #5CC7FF00;
}

#authorization-wrapper #authorization-body:not(.sidebar-close) #authorization-b-left #authorization-b-menu .authorization-b-menu-section .authorization-bm-list > li > button,
#authorization-wrapper #authorization-body #authorization-b-left:hover #authorization-b-menu .authorization-b-menu-section .authorization-bm-list > li > button {
  border-left: 8px solid #5CC7FF00;
}

#authorization-wrapper #authorization-body:not(.sidebar-close) #authorization-b-left #authorization-b-menu .authorization-b-menu-section .authorization-bm-list > li > a.active,
#authorization-wrapper #authorization-body #authorization-b-left:hover #authorization-b-menu .authorization-b-menu-section .authorization-bm-list > li > a.active {
  border-left: 8px solid #5CC7FF;
}

#authorization-wrapper #authorization-body #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a.active,
#authorization-wrapper #authorization-body #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a:hover {
  color: #5CC7FF;
  font-weight: 100;
}

#authorization-wrapper #authorization-body #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a.active img,
#authorization-wrapper #authorization-body #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a:hover img {
  /* filter: brightness(0) invert(1); */
  filter: none;
}

.d-btn.info {
  border: none;
  background-color: #5CC7FF !important;
  color: #FFFFFF !important;
  border-radius: 24px;
}

.d-header-info h2 {
  color: rgba(82, 92, 105, .80);
}

.shadow-sm {
  box-shadow: var(--box-shadow);
}

#filter-dashboard-wrapper .d-form-group .input-group.input-group-right .form-control {
  padding-left: 12px;
}

#filter-dashboard-wrapper .d-form-group .input-group {
  border-radius: 12px !important;

  width: 260px;
}

#filter-dashboard-inpre_assessment_numput {
  border-radius: 12px 0 0 12px !important;
}

#filter-dashboard-wrapper .input-group-prepend {
  background-color: #FFFFFF;
  padding-right: 12px;
  border-radius: 0 12px 12px 0 !important;
}

div.daterangepicker.ltr.show-calendar.opensleft {
  border: 0;
  box-shadow: var(--box-shadow);
  border-radius: 12px;
}

.input-group {
  border: 0;
  box-shadow: var(--box-shadow2);
  border-radius: var(--radius) !important;
}

#filter-dashboard-date {
  border: 0;
  box-shadow: var(--box-shadow2);
  border-radius: 12px;
  height: 44px !important;
  padding: 0 30px 0 10px;
}

/* .form-control,
.input-group-text {
  border: 0 !important;
} */

/* 
#filter-dashboard-date {
  box-shadow: var(--box-shadow);
  border-radius: 12px;
  padding: 10px 15px;
  height: 44px;
} */

/* Dashbaord card =================================================================================================== */
/* Kartu */
.dashboard-card {
  width: 100%;
  box-shadow: var(--box-shadow);
  background-color: white;
  overflow: hidden;
  border-radius: var(--radius);
}

/* Bagian Atas (Background dengan SVG) */
.dashboard-card-header {
  position: relative;
  height: 80px;
  background-color: #5CC7FF;
  /* Biru Muda */
}

.dashboard-card-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0.2;
}

/* Bagian Bawah */
.dashboard-card-body {
  padding: 24px;
  text-align: left;
}

.dashboard-card-body p {
  margin: 5px 0;
}

.dashboard-card-body .dashboard-number {
  font-size: 28px;
  font-weight: bold;
  color: #111827;
  margin-bottom: 4px;
}

.dashboard-card-body .dashboard-label {
  font-size: 17px;
  color: #6b7280;
}

/* Dashbaord card =================================================================================================== */

/* Datatable =================================================================================================== */
.d-box-content-wrapper {
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
}

.d-btn {
  border-radius: var(--radius);
  /* box-shadow: var(--box-shadow); */
  border: none;
}

/* Datatable =================================================================================================== */


.d-step-wrapper .d-step .d-step-item.active button,
.d-step-wrapper .d-step .d-step-item.done button {
  background-color: var(--primary-color);
  border: 0;
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
}

.d-step-wrapper .d-step .d-step-item button {
  border-radius: var(--radius);
  border: 0;
  background-color: #fff;
  box-shadow: var(--box-shadow);
}

.dataTables_processing.card {
  border-radius: var(--radius);
  box-shadow: var(--box-shadow2);
  border: 0;
}

#authorization-wrapper #authorization-body #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li a,
#authorization-wrapper #authorization-body #authorization-b-menu .authorization-b-menu-section .authorization-bm-list li button {
  color: #525C69;
}

.card-body.d-datatable {
  border-radius: var(--radius);
}

.card {
  border-radius: var(--radius);
  border: 0;
}


/* Datatable ======================================================================================================== */
.page-item.active .page-link {
  color: #fff !important;
  background-color: var(--primary-color) !important;
  border: 0;
  border-radius: var(--radius);
}

.paginate_button.page-item.next.disabled {
  border: 0 !important;
}

.page-item.disabled .page-link {
  color: #6c757d;
  border: 0;
}

.page-link{
  border: 0;
}

.dataTables_filter .form-control.form-control-sm {
  border: 1px solid rgba(82, 92, 105, 0.1) !important;
  background-color: #fff !important;
  border-radius: var(--radius);
}

.table.dataTable.no-footer th {
  border: 0 !important;
}

.table.dataTable.no-footer td {
  border: 0 !important;
}

.btn.d-datatable-action {
  border: 0 !important;
}

.d-datatable-dropdown {
  border: 0 !important;
  box-shadow: var(--box-shadow2);
}

.d-filter-wrapper .input-group.input-group-left .input-group-prepend .input-group-text {
  border-right: 0;
  border-top: 1px solid rgba(82, 92, 105, 0.1) !important;
  border-left: 1px solid rgba(82, 92, 105, 0.1) !important;
  border-bottom: 1px solid rgba(82, 92, 105, 0.1) !important;
  background-color: #fff !important;
  border-radius: 18px 0 0 18px !important;
}

.d-filter-wrapper .input-group.input-group-left .form-control {
  border-radius: 0 18px 18px 0 !important;
  border-left: 0;
  border-top: 1px solid rgba(82, 92, 105, 0.1) !important;
  border-right: 1px solid rgba(82, 92, 105, 0.1) !important;
  border-bottom: 1px solid rgba(82, 92, 105, 0.1) !important;
  background-color: #fff !important;
}

.d-filter-wrapper .input-group.input-group-left .form-control:focus {
  border-top: 1px solid var(--primary-color) !important;
  border-right: 1px solid var(--primary-color) !important;
  border-bottom: 1px solid var(--primary-color) !important;
}



.d-filter-wrapper .input-group.input-group-left{
  box-shadow: none;
}

/* Datatable ======================================================================================================== */

/* Navigation ======================================================================================================== */
.d-breadcrumb-wrapper ul li:not(:last-child):after {
  position: absolute;
  top: 2px;
  right: -10px;
  content: "->";
  color: #677792;
  font-weight: bold;
}

.d-breadcrumb-wrapper ul li:last-child span {
  color: #344054 !important;
  font-weight: bold !important;
}

/* Navigation ======================================================================================================== */

/* Dashboard ========================================================================================================= */
.dashboard-summary-icon{
  height: 50px !important;
  width: 50px !important;

}
.dashboard-summary-icon.warning{
  background-color: #FECE53 !important;
}
.dashboard-summary-icon.blue{
  background-color: #1F6BFF !important;
}
.dashboard-summary-icon.info{
  background-color: #5CC7FF !important;
}
.dashboard-summary-icon.info1{
  background-color: #CFEFFF !important;
}
.dashboard-summary-icon.success{
  background-color: #35C88E !important;
}
.dashboard-summary-icon.secondary{
  background-color: #6c757d !important
}

.d-chart-wrapper .d-chart-doughnut{
  width: 100% !important;
}

.d-chart-legend.inline-legend{
  justify-content: center;
}
/* Dashboard ========================================================================================================= */

/* Permohonan ========================================================================================================= */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px;
  padding-left: 20px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right: 1px solid #fff !important;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding: 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 8px !important;
}
/* Permohonan ========================================================================================================= */



.btn-sm {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  padding: 0.25rem 0.5rem; /* Padding lebih kecil */
  font-size: 0.875rem; /* Ukuran font lebih kecil */
  line-height: 1.5;
  border-radius: 0.2rem;
  border: 1px solid transparent;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

/* Variasi warna seperti Bootstrap */
.btn-sm-primary {
  color: #fff;
  background-color: #5CC7FF ;
  border-color: #5CC7FF ;
}

.btn-sm-primary:hover {
  background-color: #89d6ff ;
  border-color: #5CC7FF ;
}

.btn-sm-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-sm-secondary:hover {
  background-color: #5c636a;
  border-color: #565e64;
}

.btn-sm-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-sm-success:hover {
  background-color: #157347;
  border-color: #146c43;
}

/* Tambahan efek fokus dan disabled */
.btn-sm:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.btn-sm:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}


.dashboard-summary-wrapper .dashboard-summary-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 40px !important;
}

.d-step-wrapper .d-step .d-step-item:after {
    display: none;
}

.custom-step#step-wrapper {
    overflow: auto;
    position: relative;
    padding: 10px 0;
    padding-right: 60px;
}

.custom-step#step-wrapper::-webkit-scrollbar {
  width: 6px;       /* Tipis */
  height: 6px;
}

.custom-step#step-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.custom-step#step-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.steps {
    position: relative;
    overflow: auto;
    display: flex;
    width: fit-content;
    background: white;
    border-radius: 50px;
    margin-left: 10px;
    box-shadow: 0 4px 10px #00000030;
}

.steps .custom-step-item button:focus,
.steps .custom-step-item button:active,
.steps .custom-step-item button {
    outline: none;
    border: none;
    padding: 10px 20px 10px 60px;
    border-radius: 50px;
    margin-left: -30px;
    background: white;
    color: #5CC7FF;
    cursor: pointer;
    box-shadow: inset 0 4px 10px #00000030;
    white-space: nowrap;
    transition: .3s ease;
}

.steps .custom-step-item:hover button {
    padding: 10px 20px 10px 80px;
}

.steps .custom-step-item:first-child button {
    outline: none;
    padding: 10px 20px 10px 20px;
    margin-left: 0px;
    background: white;
    color: #5CC7FF;
}

.steps .custom-step-item.active button {
    outline: none;
    background: #5CC7FF;
    color: white;
    box-shadow: 0 4px 10px #00000030;
}

.steps .custom-step-item:nth-child(1) {
    z-index: 15;
}

.steps .custom-step-item:nth-child(2) {
    z-index: 14;
}

.steps .custom-step-item:nth-child(3) {
    z-index: 13;
}

.steps .custom-step-item:nth-child(4) {
    z-index: 12;
}

.steps .custom-step-item:nth-child(5) {
    z-index: 11;
}

.steps .custom-step-item:nth-child(6) {
    z-index: 10;
}

.steps .custom-step-item:nth-child(7) {
    z-index: 9;
}

.steps .custom-step-item:nth-child(8) {
    z-index: 8;
}

.steps .custom-step-item:nth-child(9) {
    z-index: 7;
}

.steps .custom-step-item:nth-child(10) {
    z-index: 6;
}

.steps .custom-step-item:nth-child(11) {
    z-index: 5;
}

.steps .custom-step-item:nth-child(12) {
    z-index: 4;
}

.steps .custom-step-item:nth-child(13) {
    z-index: 3;
}

.steps .custom-step-item:nth-child(14) {
    z-index: 2;
}

.steps .custom-step-item:nth-child(15) {
    z-index: 1;
}

.steps .custom-step-item:nth-child(16) {
    z-index: 0;
}

.custom-step-item button .current-step {
    width: 10px;
    height: 10px;
    border: 4px solid #5CC7FF;
    border-top: none;
    border-left: none;
    transform: rotate(-45deg);
    margin-right: 10px;
    margin-left: -10px;
    /* animation: arrow-idle 1s ease infinite; */
}

.custom-step-item.active button .current-step {
    border-color: white;
}

@keyframes arrow-idle {
    0%, 100% {
        margin-left: -15px;
        margin-right: 15px;
    }
    50% {
        margin-left: -10px;
        margin-right: 10px;
    }
}

#authorization-b-menu-top .user {
    padding: 20px;
}

#authorization-b-menu-top .user .right .logout {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F9FAFB;
    cursor: pointer;
    transition: .3s ease;
}

#authorization-b-menu-top .user .right .logout:hover {
    background: #5CC7FF;
}

#authorization-b-menu-top .user .right .logout:hover img {
    filter: brightness(1) invert(0);
    transition: .3s ease;
}

#authorization-b-menu-top .user .right .logout:hover img {
    filter: brightness(0) invert(1);
}