.text-mutedx {
    color: #f2f2f2;
}

.text-muted2 {
    color: #bfbfbf;
}

.text-muted3 {
    color: #cccccc;
}

.bg-mutedx {
    background-color: #f2f2f2;
}

.bg-muted2 {
    background-color: #bfbfbf;
}

.bg-muted3 {
    background-color: #cccccc;
}
.bg-teal-muted{
    background-color: #bdffeb;
}
.bg-info-muted{
    background-color: #c4f5fe;
}
.text-smx {
    font-size: 0.6rem !important;
}

.app-wrapper {
    background-color: #f5f6fe;
    min-height: 100vh;
}
.app-wrapper-l2 {
    padding-bottom: 80px;
}
.app-wrapper-container {
    padding: 3rem;
}

.app-branding {
    height: 60px;
    padding-left: 1rem;
}

.app-branding .logo-icon {
    height: 40px;
}

.nav-icon {
    color: #cccccc;
    margin-right: 5px;
}

.nav-text {
    margin-left: 5px;
    margin-top: -3px;
}

@media (min-width: 1199.98px) {
    .sidepanel-toggler {
        display: none;
    }
}

#pdf-container, #pdf-canvas, #tte-image {
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: content-box !important;
}

.marquee-container {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}

.marquee-container p {
    color: #15a362;
    /* Warna teks disesuaikan dengan tema */
    font-size: 17px;
    /* Ukuran font lebih besar */
    font-family: "Montserrat", sans-serif;
    /* Sesuaikan dengan font utama */
    font-weight: bold;
    margin: 0;
}

.auto-width {
    width: auto;
    display: inline-block;
}

.dataTables_filter {
    margin-top: -30px;
}

.table-wrap {
    overflow-x: scroll;
    padding: 50px 0px;
}

.table-wrap-tight-top {
    /* margin-bottom:-50px; */
    margin-left: 15px;
}

.table-wrap-tight-bottom {
    margin-top: -50px;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important
}

.mr-3 {
  margin-right: 1rem !important
}

.ml-4 {
  margin-left: 1.5rem !important
}

.mr-4 {
  margin-right: 1.5rem !important
}

.ml-5 {
  margin-left: 3rem !important
}

.mr-5 {
  margin-right: 3rem !important
}

.font-weight-bold {
  font-weight: 500;
}

.iframe-wrap {
    /* background: #f5f6fe; */
    background: rgb(50, 54, 57);
    padding: 10px 15px;
}

.table-wrap {
    /* background: #ffffff; */
    background: #f5f6fe;
    /* background: rgb(50, 54, 57); */
    padding: 10px 15px;
}

.iframe-component {
    border: 0 !important;
}

.upload-wrapper {
    margin: auto;
    max-width: 640px;
    text-align: center;
}

.upload-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    /*border: 0.5px solid rgba(130, 130, 130, 0.25);*/
    /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba(0, 0, 0, 0.1);*/
}

.upload-container-in {
    background-color: rgb(239, 239, 239);
    border-radius: 6px;
    padding: 10px;
}

.icons {
    color: #95afc0;
    opacity: 0.55;
}

.border-container-in {
    border: 5px dashed rgba(198, 198, 198, 0.65);
    /*   border-radius: 4px; */
    padding: 20px;
}

.border-container-in p {
    color: #130f40;
    font-weight: 600;
    font-size: 1.1em;
    letter-spacing: -1px;
    margin-top: 30px;
    margin-bottom: 0;
    opacity: 0.65;
}

.file-browser {
    text-decoration: none;
    color: rgb(22, 42, 255);
    border-bottom: 3px dotted rgba(22, 22, 255, 0.85);
}

.file-browser:hover {
    color: rgb(0, 0, 255);
    border-bottom: 3px dotted rgba(0, 0, 255, 0.85);
}

.paper {
    color: white;
    font-size: 1.4em;
    line-height: 1.5em;
    width: 300px;
    padding: 2em 1.5em;
    background: #58a;
}

.paper > a {
    font-size: 0.65em;
}

.paper > a:hover {
    font-weight: 600;
}

/* 45-degree folded corner */
.fold {
    background: linear-gradient(
                to left bottom,
                transparent 50%,
                rgba(0, 0, 0, 0.4) 0
            )
            no-repeat 100% 0 / 2em 2em,
        linear-gradient(-135deg, transparent 1.41em, #58a 0);
}

/* 60-degree folded corner */
.sharp-fold {
    position: relative;
    background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    border-radius: 0.5em;
}

.sharp-fold::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(
            to left bottom,
            transparent 50%,
            rgba(0, 0, 0, 0.2) 0,
            rgba(0, 0, 0, 0.4)
        )
        no-repeat 100% 0;
    width: 1.73em;
    height: 3em;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
}

.break-json-md {
    /* width: 350px; */
    overflow-wrap: break-word; /* Break long words and URLs */
    word-break: break-all; /* Optionally, break words at any character */
    white-space: normal;
}

.cursor-pointer {
    cursor: pointer;
}

.float-left,
.min-icon {
    position: absolute;
    right: 1rem;
}

.readonly {
    background-color: #e9ecef;
    opacity: 1;
    pointer-events: none;
}

.btn-border {
    font-weight: 600;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    border: 2px solid black;
    border-radius: 25px;
}
.btn-border-success {
    border-color: #04aa6d;
    color: green;
}
.btn-border-success:hover {
    background-color: #04aa6d;
    color: white;
}
.btn-border-info {
    border-color: #5b99ea;
    color: #5b99ea;
}
.btn-border-info:hover {
    background: #5b99ea;
    color: white;
}
.btn-border-warning {
    border-color: #ff9800;
    color: orange;
}
.btn-border-warning:hover {
    background: #ff9800;
    color: white;
}
.btn-border-danger {
    border-color: #f44336;
    color: red;
}
.btn-border-danger:hover {
    background: #f44336;
    color: white;
}
.btn-border-default {
    border-color: #e7e7e7;
    color: black;
}

.btn-border-default:hover {
    background: #e7e7e7;
}

.link-anima {
    color: #bfbfbf;
}

/* Styling custom button */
.btn-survey {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #7e57c2, #d81b60);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    font-size: 0.70rem;
}
.is-read{
    background-color:lightgrey !important;
}