.form-control {
     padding: 0.5rem 0.75rem !important;
}

#data_table_wrapper select {
     margin: 10px !important;
     margin-left: 0 !important;
}

@media (min-width: 1025px) {
     .pc-sidebar.pc-sidebar-hide~.pc-header {
          left: 0;
     }
}

.modal-image {
     display: none;
     position: fixed;
     padding-top: 100px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgb(0, 0, 0);
     background-color: rgba(0, 0, 0, 0.9);
}

.rotate-left {
     position: absolute;
     top: 30px;
     right: 105px;
     color: #f1f1f1;
     font-size: 20px;
     font-weight: bold;
     transition: 0.3s;
     cursor: pointer;
}

.rotate-right {
     position: absolute;
     top: 30px;
     right: 70px;
     color: #f1f1f1;
     font-size: 20px;
     font-weight: bold;
     transition: 0.3s;
     transform: scaleX(-1);
     cursor: pointer;
}

.close-image {
     position: absolute;
     top: 15px;
     right: 35px;
     color: #f1f1f1;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;
     cursor: pointer;
}

.modal-content-image {
     margin: auto;
     display: block;
     width: 70%;
     max-width: 700px;
}

.modal-content-image #caption {
     -webkit-animation-name: zoom;
     -webkit-animation-duration: 0.6s;
     animation-name: zoom;
     animation-duration: 0.6s;
}

.preview_image {
     cursor: pointer;
}

body .swal2-container.swal2-backdrop-show {
     background: rgba(80, 79, 79, 0.3) !important;
}

.swal2-popup {
     background: #fff !important;
}

.datepicer-js[readonly],
.datepicer-year-js[readonly],
.form-control[readonly] {
     opacity: 3;
     background-color: #e6e6e6;
}

/* CSS untuk mengatur tinggi editor */
.trumbowyg-box,
.trumbowyg-editor {
     min-height: 150px;
     /* height: 150px; Atur tinggi */
}

.panel-actions {
     margin-top: -20px;
     margin-bottom: 0;
     text-align: right;
}

.panel-actions a {
     color: #333;
}

.panel-fullscreen {
     display: block;
     z-index: 9999;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     overflow: auto;
}

.swal2-popup.swal2-loading {
     background: transparent !important;
}

.disabled {
     cursor: not-allowed !important;
}

#note_loader {
     position: absolute;
     left: 52%;
     top: 60%;
     transform: translate(-50%, -50%);
     z-index: 2000;
}

.loader_custom {
     position: absolute;
     left: 52%;
     top: 45%;
     transform: translate(-50%, -50%);
     z-index: 2000;
}

#loader_system {
     display: grid;
     position: fixed;
     z-index: 2000;
     inset: 0;
     box-sizing: border-box;
     grid-template-areas:
          "top-start top top-end"
          "center-start center center-end"
          "bottom-start bottom-center bottom-end";
     grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
     height: 100%;
     padding: .625em;
     overflow-x: hidden;
     transition: background-color .1s;
     background: rgb(255 247 247 / 88%) !important;
}

.text-bg-d-purple {
     color: #fff !important;
     background-color: #483285 !important;
}

.start-10 {
     left: 10% !important;
}

.start-20 {
     left: 20% !important;
}

.start-30 {
     left: 30% !important;
}

.start-40 {
     left: 40% !important;
}

.start-60 {
     left: 60% !important;
}

.start-70 {
     left: 70% !important;
}

.start-80 {
     left: 80% !important;
}

.start-90 {
     left: 90% !important;
}