.video-view-page{
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.user-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    white-space: nowrap; /* Prevent wrapping of table content */
    table-layout: fixed; /* Fix table layout */
    text-align: start;
}
.tooltip {
    position: relative;
    width: 150px; /* Adjust the width of the tooltip container */
}

/* Styles for the tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the element */
    left: 50%;
    margin-left: -75px; /* Adjust according to the width to center it */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/* First column styles */
.user-table td:first-child,
.user-table th:first-child {
    /* Add your specific styles for the first column here */
    /* For example, if you want to prevent wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis for overflow text */
}

/* Rest of the table styles (excluding the first column) */
.user-table th,
.user-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    color: #ffffff;
}

/* Header styles */
.user-table th {
    background-color: #939393;
    font-weight: bold;
    text-align: left;
}

/* Alternate row colors */
.user-table tbody tr:nth-child(even) {
    background-color: #939393;
}
.user-table tbody tr:nth-child(odd) {
    background-color: #5a5a5a;
}

/* Hover effect */
.user-table tbody tr:hover {
    background-color: #5a5a5a;
}

/* Responsive behavior */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Example responsive styles */
@media screen and (max-width: 768px) {
    .user-table th:not(:first-child),
    .user-table td:not(:first-child) {
        padding: 6px 10px;
    }
}

.user-table-dark {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    white-space: nowrap; /* Prevent wrapping of table content */
    table-layout: fixed; /* Fix table layout */
    text-align: start;
}

/* First column styles */
.user-table-dark td:first-child,
.user-table-dark th:first-child {
    /* Add your specific styles for the first column here */
    /* For example, if you want to prevent wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis for overflow text */
}

/* Rest of the table styles (excluding the first column) */
.user-table-dark th,
.user-table-dark td {
    padding: 8px 12px;
    border: 1px solid #ddd;
}

/* Header styles */
.user-table-dark th {
    background-color: #1f2937;
    font-weight: bold;
    text-align: left;
}

/* Alternate row colors */
.user-table-dark tbody tr:nth-child(even) {
    background-color: #1f2937;
}
.user-table-dark tbody tr:nth-child(odd) {
    background-color: #1f2937 !important;
}

/* Hover effect */
.user-table-dark tbody tr:hover {
    background-color: #1f2937;
}

/* Example responsive styles */
@media screen and (max-width: 768px) {
    .user-table-dark th:not(:first-child),
    .user-table-dark td:not(:first-child) {
        padding: 6px 10px;
    }
}
.video-view-page .video-header{
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.video-view-page .video-header .thumb{
    max-width: 250px;
    border: 5px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    min-width: 120px;
}
.video-view-page .video-header .thumb img{
    min-width: 120px;
}
.video-view-page .video-header .info{
    flex-grow: 1;
}
.video-view-page *{
    color: rgb(17, 24, 39);
}
.video-view-page .video-header .info h3{
    font-size: 1.25rem;
    font-weight: 700;
}
.video-view-page .video-header .info .meta{
    font-size: 14px;
}
.video-view-page .video-header .info .description{
    margin-top: 10px;
}
.video-view-page .video-body{
    margin: 20px 0;
}
.video-view-page .video-link{
    display: block;
}
.video-view-page .video-link a{
    display: inline-block;
    padding: 6px 12px;
    background: #eaeaec;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
}
.video-view-page .video-link a img{
    display: inline-block;
    vertical-align: middle;
    max-width: 32px;
    margin-right: 10px;
}
.video-view-page .video-link a span{
    display: inline;
}
.video-view-page .video-link a:hover span{
    color: #f59e0c;
}
.video-view-page .video-description .video-content-section h2, .video-view-page .video-footer h2{
    font-size: 1.25rem;
    font-weight: 700;
    margin: 20px 0;
}

.video-content-section ul {
    list-style: disc !important;
    margin: auto !important;
    padding: revert !important;
}

.video-content-section ol {
    list-style-type: decimal !important;
    margin-left: 40px !important;
    padding-left: 0 !important;
}

.video-content-section blockquote,
.video-content-section dd,
.video-content-section dl,
.video-content-section figure,
.video-content-section h1,
.video-content-section h2,
.video-content-section h3,
.video-content-section h4,
.video-content-section h5,
.video-content-section h6,
.video-content-section hr,
.video-content-section p,
.video-content-section pre {
    margin: revert;
}

.video-content-section h1 {
    font-size: revert;
    font-weight: revert;
}

.video-content-section h2 {
    font-size: revert;
    font-weight: revert;
}
.video-content-section h3 {
    font-size: revert;
    font-weight: revert;
}
.video-content-section h4 {
    font-size: revert;
    font-weight: revert;
}

.video-view-page .video-footer{
    display: flex;
    gap: 5%;
}
.video-view-page .video-footer .metrics{
    min-width: 25%;
}
.video-view-page .video-footer .disclaimer p{
    font-size: 13px;
}
.video-view-page .video-footer ul li{
    display: block;
    font-size: 14px;
}
.video-view-page .video-footer ul li label{
    display: inline-block;
    margin-right: 5px;
    color: #333333;
    font-weight: 500;
}
/***** dark mode *****/
html.dark .video-view-page{
    background: #1f2839;
    box-shadow: none;
}
html.dark .video-view-page *{
    color: #fff;
}
html.dark .video-view-page .video-link a{
    background: #2e3645 ;
    border: 1px solid #363c47;
}
html.dark .video-view-page .video-footer ul li label{
    color: #ddd;
}
html.dark .video-view-page .video-header .thumb{
    border-color: #494e57;
}
/***** responsive *****/
@media (max-width: 767px) {
    .video-view-page .video-header{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .video-view-page .video-link{
        text-align: center;
    }
    .video-view-page .video-footer{
        flex-direction: column;
        gap: 20px;
    }
}

.audio-player-wrapper {
    margin-top: 20px;
}

/*.low_credit_modal > div.max-w-sm {*/
/*    max-width: 50rem;*/
/*}*/
.change_package_modal > div.max-w-sm {
    max-width: 50rem;
}

/* Add to your CSS file */
.card-transition {
    transition: all 0.3s ease-in-out;
}

.card-transition:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}