/* Hide the first column (ID column) for the specific table class */
    /* .form-detail thead th:first-child,
    .form-detail tbody td:first-child {
        display: none;
    }
     */
    .form-detail tbody td:first-child {
        display: none;
    }

    .btn-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #5e72e4;
        color: white;
        transition: background-color 0.2s;
    }
    
    .btn-circle i {
        padding-top: 8px;
        font-size: 24px; /* Adjust the font size as needed */
    }
    
    .btn-circle:hover {
        background-color: #324cdd;
    }


    .btn.btn-secondary.btn-lg.w-100.save-button-form {
        margin-top: 40px;
    } 

    .btn.btn-primary.btn-sm.float-end.addRowButton {
        margin-bottom: 40px;
    }

    .custom-add-button {
        width: auto; /* Adjust the width as needed */
        padding: 5px 10px; /* Adjust padding as needed */
    }

    .addRowButton {
        width: 5%; 
        margin-left: auto;
        margin-bottom: 20px;  
    }

    .btnSaveForm {
        margin: 15px 0px;
    }

    /* scroller luar */
    .sidenav {
        background-color: #333; /* Background color */
        color: #fff; /* Text color */
    }

    /* Customize the scrollbar track */
    .sidenav::-webkit-scrollbar {
        width: 8px; /* Width of the scrollbar track */
    }

    .sidenav::-webkit-scrollbar-track {
        background-color: #333; /* Color of the scrollbar track */
    }

    /* Customize the scrollbar thumb (the draggable part) */
    .sidenav::-webkit-scrollbar-thumb {
        background-color: #666; /* Color of the scrollbar thumb */
        border-radius: 4px; /* Rounded corners */
    }

    .sidenav::-webkit-scrollbar-thumb:hover {
        background-color: #999; /* Color when hovering over the scrollbar thumb */
    }

    /* scroller dalam */
    #sidenav-collapse-main {
        max-height: calc(100vh - 150px); /* Adjust the value to fit your layout */
        overflow-y: auto;
        scrollbar-width: thin !important; /* For Firefox */
        scrollbar-color: #6c757d #343a40; /* For Firefox */
    }
    
    /* Webkit (Chrome, Safari, Opera) */
    #sidenav-collapse-main::-webkit-scrollbar {
        width: 8px;
    }
    
    #sidenav-collapse-main::-webkit-scrollbar-thumb {
        background-color: #343a40;
        border-radius: 4px;
    }
    
    #sidenav-collapse-main::-webkit-scrollbar-track {
        background-color: #6c757d;
    }

    .navbar-vertical.navbar-expand-xs .navbar-collapse {
        display: block;
        overflow: auto;
        height: calc(140vh - 360px);
    }

    /* scroller table */
    .table-responsive {
        max-height: 500px; /* Adjust the value to fit your layout */
        overflow-x: auto;
        scrollbar-width: thin !important; /* For Firefox */
        scrollbar-color: #6c757d #343a40; /* For Firefox */
    }
    
    /* Webkit (Chrome, Safari, Opera) */
    .table-responsive::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb {
        background-color: #343a40;
        border-radius: 4px;
    }
    
    .table-responsive::-webkit-scrollbar-track {
        background-color: #6c757d;
    }

    /* Style the header row */
.table thead {
    background-color: #7b809a ; /* Set your desired background color */
    color: #fff !important; /* Set the text color for the header cells */
}

/* Style the header cells */
.table thead th {
    color: #fff !important;
    padding: 10px; /* Add some padding for better appearance */
    text-align: center; /* Center-align the text */
    font-weight: bold; /* Make the text bold */
}

.table-detail thead {
    background-color: #6E7387 ; /* Set your desired background color */
    color: #fff !important; /* Set the text color for the header cells */
}

/* Style the header cells */
.table-detail thead th {
    color: #fff !important;
    padding: 4px; /* Add some padding for better appearance */
    text-align: center; /* Center-align the text */
    font-weight: bold; /* Make the text bold */
}

/* For Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.file-info {
    display: inline-block;
    width: 180px; /* You can adjust this value as needed */
}