.activity-log {
    display: flex;
    flex-direction: column;
    padding: 20px;
    // background-color: #F0F0F1;
    border-radius: 8px;
    height: 100vh;

    .acb_left {
        margin-bottom: 20px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: 1px 1px 1px 1px #008080;
        padding: 25px;
        overflow-y: scroll;
        height: calc(100vh - 120px);

        // Custom scrollbar styling for WebKit browsers
        &::-webkit-scrollbar {
            width: 2px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #008080; // Thumb color
            border-radius: 10px;
        }

        &::-webkit-scrollbar-track {
            // background-color: #F0F0F1; // Track color
        }

        // Firefox scrollbar
        scrollbar-width: thin; // Makes the scrollbar thinner in Firefox
        scrollbar-color: #008080 #f0f0f1; // Sets the thumb and track colors


        .system-header {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: 4px;

            svg.system-header-icon {
                fill: #f37f7f;
            }
        }

        // Filter 
        .activity-filters {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;

            select {
                padding: 5px 26px;
                border: 1px solid #ccc;
                border-radius: 4px;
                background-color: #fff;
                font-size: 14px;
                color: #333;
                transition: border-color 0.3s ease, box-shadow 0.3s ease;

                &:focus {
                    border-color: #008080;
                    box-shadow: 0 0 5px rgba(0, 128, 128, 0.4);
                    outline: none;
                }

                option {
                    color: #333;
                    background-color: #fff;
                }
            }

            button {
                padding: 8px 16px;
                background-color: #008080;
                color: #fff;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                cursor: pointer;
                transition: background-color 0.3s ease, transform 0.2s ease;

                &:hover {
                    background-color: #044e4e;
                }

                &:active {
                    transform: scale(0.98);
                }
            }
        }



        // Table 
        .activity-table {
            #DataTables_Table_0_wrapper {
                display: flex;
                flex-direction: column;
                position: relative;

                .dt-layout-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;

                    select#dt-length-0 {
                        width: 55px;
                    }

                    select.dt-input {
                        padding: 4px 21px 2px 5px;
                    }

                }

                .dt-layout-cell.dt-layout-full {
                    display: contents;
                }


                .dataTables_length {
                    order: 1;
                    margin-right: auto;
                }

                .dataTables_filter {
                    order: 2;
                    margin-left: auto;
                }

                .dataTables_info {
                    order: 1;
                    margin-right: auto;
                }

                .dataTables_paginate {
                    order: 2;
                    margin-left: auto;
                }
            }

            // Additional SCSS for DataTable design
            table.dataTable {
                width: 100%;
                border-collapse: collapse;

                th {
                    background-color: #f4f4f4;
                    font-weight: bold;
                    padding: 10px;
                    border-bottom: 2px solid #ccc;
                    text-align: left;
                    position: sticky;
                    top: -24px;
                }

                td {
                    padding: 10px;
                    border-bottom: 1px solid #ddd;
                    text-align: left;
                }

                tbody tr:hover {
                    background-color: #f1f1f1;
                }

                // IP column 
                .ip-cell {
                    display: flex;
                    align-items: center;

                    span {
                        margin-right: 10px;
                    }

                    .view-button {
                        background-color: #008080;
                        color: #fff;
                        border: none;
                        border-radius: 4px;
                        padding: 5px 10px;
                        cursor: pointer;
                        display: block !important;

                        &:hover {
                            background-color: #046e6e;
                        }
                    }
                }

                // Styles for User Column
                .user-cell {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .user-thumb {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        object-fit: cover;
                        border: 2px solid #ccc;
                        padding: 2px;
                    }

                    .user-info {
                        display: flex;
                        flex-direction: column;

                        .user-name {
                            font-weight: bold;
                            color: #333;
                        }

                        .user-role {
                            font-size: 12px;
                            color: #888;
                        }
                    }
                }

            }

            .dataTables_paginate .paginate_button {
                padding: 5px 10px;
                margin: 0 3px;
                background-color: #008080;
                color: rgb(251, 251, 251);
                border: none;
                border-radius: 3px;

                &:hover {
                    background-color: #044e4e;
                }
            }

            // Custom pagination button layout
            .dt-paging {
                display: flex;
                justify-content: center;

                .dt-paging-button {
                    padding: 8px 12px;
                    margin: 0 4px;
                    border: none;
                    background-color: #f1f1f1;
                    color: #333;
                    border-radius: 4px;
                    font-size: 14px;
                    transition: background-color 0.3s ease, color 0.3s ease;

                    &:hover {
                        background-color: #008080;
                        color: white;
                        border: unset;
                    }

                    &.disabled {
                        background-color: #e9ecef;
                        color: #6c757d;
                        cursor: not-allowed;
                        border: unset;
                    }

                    &.current {
                        background-color: #008080;
                        color: rgb(246, 243, 243) !important;
                        font-weight: bold;
                        border: unset;
                    }
                }
            }


            .dataTables_filter input {
                padding: 5px;
                border: 1px solid #ccc;
                border-radius: 3px;
            }

        }
    }

}