#faqTable_wrapper {
    max-width: 100%; /* Limit table to container width */
    overflow-x: auto; /* Allow horizontal scrolling if necessary */
}

#faqTable td {
    padding:0px;
}

#faqs .faq-card {
    display: block;
    width: 100%;
    background-color: #FFFFFF;
    padding: 0px;
    align-items: flex-start;
    box-sizing: border-box;
}

#faqs .help-faq-question,
#faqs .help-faq-answer {
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words if necessary */
    overflow-wrap: break-word; /* Handle long, unbreakable strings */
}

#faqs .help-faq-question {
    font-weight: 400;
    margin: 0;
    border-top: none;
    padding: 8px 8px 8px 16px;
    cursor: pointer;
    min-height: 18px;
}

#faqs .help-faq-question.Active {
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
}

#faqs .help-faq-answer {
    display: none;
    padding: 10px 8px 15px 16px;
    background-color: #ffffff;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    width: 100%;
    box-sizing: border-box;
    margin-top: -1px;
}

#faqs .help-faq-vote {
    margin: 18px 0 0 0;
    padding-bottom: 0;
}

#faqs .faq-vote-btn {
    cursor: pointer;
}

#faqs .filter-select {
    margin: 10px;
}

#HelpFaqTableSearch {
    width: 80%;
}

/* Style for the search box */
#faqs .search-box-container {
    margin: 10px 0;
    padding: 10px;
    background-color: #f7e688; /* Yellow filter box color */
    display: inline-block;
    width: fit-content;
}

#faqs .filter-search {
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 14px;
}

/* Style for the table wrapper */
#faqs div.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    flex-wrap: nowrap;  /* Ensure elements are on the same line */
}

#faqs .dataTables_paginate {
    margin: 0;  /* Remove extra margin around pagination */
}

#faqs .dt-column-order {
    display: none;
}

#faqs .dt-layout-end .dt-paging {
    float: right;
    margin-right: 10px;
}

#faqs div.dt-container select.dt-input {
    padding: 4px;
    margin-right: 10px;
}


/* Modal overlay */
#relatedVideoModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);  /* Dark transparent background */
}

/* Modal content */
#relatedVideoModal .modal-content {
    position: relative;
    margin: 5% auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);  /* Modern shadow */
}

/* Close button */
#relatedVideoModal .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    color: #333;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 9999;
}

#relatedVideoModal .close-btn:hover {
    color: #2785de;  /* Red on hover */
}

/* Video container */
#relatedVideoModal .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

#relatedVideoModal .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    .faq-card {
        padding: 8px;
    }
    .help-faq-question,
    .help-faq-answer {
        padding: 8px;
    }
}