:root {
    --bg-dark:rgb(41, 41, 41);
    --bg-dark-alt:rgb(29, 29, 29);
    --primary-color:rgb(141, 43, 43);
    --secondary-color: #ff3860;
    --text-light: #f8f9fa;
    --text-muted: #a1a1b5;
    --card-glass-bg: rgba(255, 255, 255, 0);
}
main {
flex: 1; /* Allows the main content to expand and fill available space */
display: flex; /* Use flexbox for dynamic layout */
flex-direction: column; /* Stack content vertically */
width: 100%; /* Ensure it uses the full width */
max-width: 100%; /* Remove artificial size limitations */
}
html, body {
background-color: var(--bg-dark);
font-family: 'Poppins', sans-serif;
color: var(--text-light);
height: 100%; /* Ensures the height is 100% of the viewport */
margin: 0; /* Removes default margins */
display: flex;
flex-direction: column; /* Makes the body a flex container */
}

header {
    background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
    color: #fff;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--bg-dark-alt);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
}

footer {
    text-align: center;
    background-color: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
    color: var(--text-muted);
    padding: 15px 0;
    font-size: 0.9rem;
    border-top: 1px solid var(--bg-dark-alt);
}

.card {
background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
color: #f8f9fa;
border: none;
border-radius: 15px;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
padding: 20px;
transition: all 0.3s ease-in-out;
}
.card h5 {
font-size: 1rem; /* Smaller title font size */
margin-bottom: 0.5rem; /* Reduce spacing below title */
}

.card:hover {
transform: translateY(-10px); /* Add lift effect on hover */
box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.7); /* Enhance shadow */
}

.card-title {
color: white; /* Dynamic primary color */
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.card-style {
background: linear-gradient(135deg, rgba(30, 30, 47, 1) 0%, rgba(43, 43, 60, 1) 100%);
color: #f8f9fa;
border: none;
border-radius: 15px;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
padding: 20px;
transition: all 0.3s ease-in-out;
}

/* Hover Effect for Cards */
.card-style:hover {
transform: translateY(-5px);
box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.7);
}

.card-body {
    padding: 1.5rem;
}

.card-text {
font-size: 0.9rem;
line-height: 1.5;
color: #ccc; /* Softer text color */
}

.badge-live {
color: rgb(141, 43, 43); /* Red text for LIVE */
background: transparent; /* Transparent background */
border: 2px solid rgb(141, 43, 43); /* Border matches text color */
font-weight: 700; /* Bold font */
padding: 3px 8px; /* Reduced padding for a compact look */
border-radius: 6px; /* Slightly rounded corners */
text-transform: uppercase; /* Text in uppercase */
font-size: 0.8rem; /* Smaller font size */
transition: transform 0.2s ease; /* Smooth hover effect */
}

.btn-secondary, .btn-danger, .btn-primary {
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-sm {
font-size: 0.8rem; /* Smaller button text */
padding: 4px 8px; /* Smaller padding */
}

.card .collapse .btn {
font-size: 0.8rem; /* Smaller button font */
margin: 2px; /* Reduced margin between buttons */
}

.btn-secondary {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-secondary:hover {
    background-color: #418ad5;
    transform: translateY(-2px);
}

.btn-danger {
    background-color: var(--secondary-color);
    color: #fff;
}

.btn-danger:hover {
    background-color: #ff5f7e;
    transform: translateY(-2px);
}

.btn-secondary, .btn-danger, .btn-primary {
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-secondary {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-secondary:hover {
    background-color: #418ad5;
    transform: translateY(-2px);
}

.btn-danger {
    background-color: var(--secondary-color);
    color: #fff;
}

.btn-danger:hover {
    background-color: #ff5f7e;
    transform: translateY(-2px);
}

.form-check-label {
    color: var(--text-light);
    font-weight: bold;
}

.form-check-input {
    accent-color: var(--primary-color);
}

.collapse.show {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.filter-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 20px;
background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
color: var(--text-light);
border-radius: 15px;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.4);
}

select.form-select-sm {
    width: 200px;
    background-color: var(--bg-dark);
    color: var(--text-light);
    border: 1px solid #555;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-light);
    background-color: var(--bg-dark-alt);
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: all 0.3s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--primary-color);
    color: #fff;
}

#main th {
    background-color: var(--bg-dark-alt);
    color: var(--text-light);
    border: none;
}

#main tr:hover {
    background-color: var(--bg-dark);
}

.search-group {
    box-shadow: 0 4px 8px linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
    border-radius: 25px;
    overflow: hidden;
}

.search-input {
    border: none;
    padding: 12px 20px;
    border-radius: 25px 0 0 25px;
    background-color: rgb(29, 29, 29);
    color: #f8f9fa;
}

.search-input:focus {
    outline: none;
    background-color: rgb(29, 29, 29);
    color: #f8f9fa;
}

.btn-gradient {
background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
color: #fff;
border: none;
padding: 12px 24px;
font-weight: 600;
transition: background 0.3s ease, transform 0.2s ease;
border-radius: 0;
}

.btn-gradient:hover {
background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
transform: translateY(-2px);
color: rgb(141, 43, 43);
}

.btn-gradient:focus {
    outline: none;
}

.search-input::placeholder {
    color: #f8f9fa;
    opacity: 0.8;
}

.badge-upcoming-event {
color: #ffeb3b; /* Yellow text for UPCOMING */
background: transparent; /* Transparent background */
border: 2px solid #ffeb3b; /* Border matches text color */
font-weight: 700; /* Bold font */
padding: 3px 8px; /* Reduced padding for a compact look */
border-radius: 6px; /* Slightly rounded corners */
text-transform: uppercase; /* Text in uppercase */
font-size: 0.8rem; /* Smaller font size */
transition: transform 0.2s ease; /* Smooth hover effect */
}

.badge-live:hover, .badge-upcoming:hover {
transform: scale(1.05); /* Slightly enlarges badge on hover */
}
.user-info-bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 20px;
background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
color: var(--text-light);
border-radius: 15px;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.4);
font-size: 1rem;
}
.user-info-bar strong {
    color: var(--primary-color);
}
.badge {
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 700;
}
        .badge-today, .badge-tomorrow, .badge-on-air, .badge-upcoming, 
        .badge-sport-soccer, .badge-sport-football, .badge-sport-baseball, 
        .badge-sport-hockey, .badge-sport-basketball, .badge-sport-rugby, .badge-sport-cricket, .badge-sport-motorsports, .badge-sport-fighting, .badge-sport-golf {
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 10px;
            margin: 5px;
            font-size: 0.9rem;
            text-transform: uppercase;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease;
            color: #fff;
            cursor: pointer;
            position: relative; /* ← add this line */
            padding-left: 20px; /* Add space for the color bar */
            overflow: hidden; /* Prevent overflow if needed */
            background-color: #000 !important;  /* Force black background */
            color: #fff !important;             /* Ensure white text */
            border: 1px solid #444 !important;  /* Optional: subtle border */
        }


.badge-today:hover, 
.badge-tomorrow:hover, 
.badge-on-air:hover, 
.badge-upcoming:hover, 
.badge-sport-soccer:hover, 
.badge-sport-football:hover, 
.badge-sport-baseball:hover, 
.badge-sport-hockey:hover, 
.badge-sport-basketball:hover, 
.badge-sport-rugby:hover, 
.badge-sport-motorsports:hover, 
.badge-sport-cricket:hover, 
.badge-sport-fighting:hover,
.badge-sport-golf:hover,
.badge-soccer:hover, 
.badge-football:hover, 
.badge-baseball:hover, 
.badge-hockey:hover, 
.badge-basketball:hover, 
.badge-rugby:hover, 
.badge-motorsports:hover, 
.badge-cricket:hover,
.badge-golf:hover,
.badge-fighting:hover {
    transform: scale(1.1);
}

.navbar {
background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
border-radius: 15px;
padding: 15px;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.4);
}
.navbar-nav .nav-link {
color: var(--text-light);
padding: 8px 15px;
border-radius: 10px;
transition: all 0.3s;
}
.navbar-nav .nav-link:hover {
background-color: var(--primary-color);
color: #fff;
}
footer {
background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
color: var(--text-muted);
padding: 15px 0;
border-radius: 15px 15px 0 0;
text-align: center;
box-shadow: 0px -6px 18px rgba(0, 0, 0, 0.4);
}
.header-style {
background: linear-gradient(135deg,rgb(54, 54, 54) 0%, rgb(29, 29, 29) 100%);
color: #f8f9fa;
border: none;
border-radius: 15px;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
padding: 20px;
text-align: center;
transition: all 0.3s ease-in-out;
}
.nav-item .nav-link.active {
background-color: var(--primary-color); /* Darker shade on hover */
}

/* Optional: hover effect for active item */
.nav-item .nav-link.active:hover {
background-color: var(--primary-color); /* Darker shade on hover */
}
.tooltip {
    background-color: var(--bg-dark-alt);
    color: var(--text-light);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 10px;
    font-size: 0.9rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.tooltip .tooltip-arrow {
    border-top-color: var(--primary-color);
}
.header-style:hover {
    transform: translateY(-5px);
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.7);
}

/* Header Text Styling */
.header-style h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

        .content-wrapper {
            max-width: 100%;
            margin: 20px auto;
            background: #1e1e1e;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        }
        .content-header h1 {
            text-align: center;
            font-size: 24px;
            margin: 0 0 20px;
            color: #fff;
        }
        .form-group select {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            background: #2c2c2c;
            color: #fff;
            border: 1px solid #444;
            border-radius: 5px;
        }
        .epg-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px); /* Adjust height dynamically */
    overflow: hidden;
}
.timeline-container {
    position: relative; /* Required for sticky to work */
    overflow-x: auto; /* Allow horizontal scrolling */
    overflow-y: hidden; /* Disable vertical scrolling */
    white-space: nowrap; /* Prevent wrapping of child elements */
}
    .timeline {
    display: flex;
    padding: 10px 0;
    min-width: 2400px; /* Ensure timeline spans enough width for 3 days */
    margin-left: 0px; /* Shift the timeline to the left by one block (120px) */
}
.timeline .time-slot {
    min-width: 310px; /* Adjust width for your needs */
    max-width: 310px;
    padding: 10px;
    text-align: center;
    background: #2c2c2c;
    margin-right: 5px;
    border-radius: 5px;
    color: #ddd;
    font-size: 1rem;
}

.timeline .time-slot.half-hour {
    min-width: 90px; /* Half the width of 1-hour slots */
    max-width: 90px;
}
        .epg-grid-container {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1; /* Allow it to expand and use available space */
}
        .epg-grid {
            display: flex;
            min-width: 2400px; /* Ensure grid spans enough width for 3 days */
        }
        .epg-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #444;
    margin-bottom: 5px; /* Reduced gap between rows */
}
.channel-name {
    width: 300px; /* Adjusted width for tighter layout */
    position: sticky;
    left: 0;
    background: #1e1e1e;
    display: flex;
    align-items: center;
    padding: 5px; /* Reduced padding */
    z-index: 1;
}

.channel-name img {
    width: 40px; /* Smaller logo */
    margin-right: 8px; /* Reduced spacing */
    border-radius: 5px;
}

.channel-name small {
    width: 300px;
}
.channel-name a {
    width: 300px;
}
.program-block {
    margin: 5px;
    padding: 10px;
    background: #2c2c2c;
    border-radius: 10px;
    text-align: left; /* Align text to the left */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9rem; /* Increased font size for better visibility */
    color: #fff;
    display: inline-block;
}
.program-block p {
    font-size: 0.8rem; /* Adjust text size for titles */
    margin: 0;
    color: #fff;
    text-align: left; /* Align text to the left */
}
.program-block small {
    font-size: 0.7rem; /* Adjust text size for time */
    color: #ddd;
    display: block; /* Ensure it stays on its own line */
    margin-top: 5px; /* Add some space between title and time */
    text-align: left; /* Align text to the left */
}

.program-block.medium {
    min-width: 180px; /* Adjusted width for 30-minute programs */
    max-width: 180px;
}

.program-block.large {
    min-width: 360px; /* Adjusted width for 1-hour programs */
    max-width: 360px;
}

.program-block.extra-large {
    min-width: 720px; /* Adjusted width for 2-hour programs */
    max-width: 720px;
}
.program-block:hover {
    background: #3a3a4d; /* Slightly darker on hover */
    cursor: pointer;
}
        .program-block .description {
            display: none;
            margin-top: 10px;
            font-size: 12px;
            color: #ddd;
        }
        .program-block .show-description {
            cursor: pointer;
            font-size: 12px;
            color: #00aaff;
            text-decoration: underline;
        }
        .events-list {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #333;
            color: #ffffff;
            border-radius: 5px;
        }

        .events-list h3 {
            color: #ffffff;
        }

        .event-item {
            margin-bottom: 15px;
            padding: 15px;
            background-color: #444;
            border: 1px solid #555;
            border-radius: 5px;
        }

        .event-item:last-child {
            margin-bottom: 0;
        }

        .event-item strong {
            color: #ffc107;
        }
        .modal {
    background-color: rgba(0, 0, 0, 0.7); /* Darkened background */
}

.modal-content {
    background-color: #333; /* Darker background for modal content */
    color: #fff; /* White text color */
    padding: 20px;
    border-radius: 10px; /* Optional: for rounded corners */
}

.modal .close {
    color: #fff; /* Close button white color */
}

.modal .close:hover,
.modal .close:focus {
    color: #ccc; /* Lighter color on hover/focus */
}
/* Dropdown Styling */
.custom-dropdown {
    background-color: var(--bg-dark-alt);
    color: var(--text-light);
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    padding: 5px 10px;
}

.custom-dropdown option {
    background-color: var(--bg-dark);
    color: var(--text-light);
}
/* Highlight "LIVE" program blocks */
.program-block.highlight-live {
    background: linear-gradient(135deg, #ff4d4d, #ff0000); /* Red gradient */
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.5); /* Glow effect */
}
.live-badge {
    display: inline-flex;
    align-items: center;
    background-color: #ff0000; /* Red background for the badge */
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 8px;
    margin-left: 5px; /* Space between the title and badge */
    border-radius: 5px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(255, 0, 0, 0.5); /* Glow effect */
}

.live-badge i {
    font-size: 0.7rem; /* Slightly smaller icon */
    margin-right: 5px; /* Space between the icon and text */
}
.modal-content {
    background-color: var(--bg-dark-alt);
    color: var(--text-light);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
}

.modal-header {
    border-bottom: 1px solid var(--bg-dark);
}

.modal-footer {
    border-top: 1px solid var(--bg-dark);
}
.day-label {
    position: sticky; /* Enable sticky positioning */
    left: 0; /* Stick to the left when scrolling horizontally */
    top: 0; /* Optional: Stick to the top if needed */
    z-index: 10; /* Ensure it appears above other elements */
    background: linear-gradient(135deg, #333, #444); /* Subtle background */
    color: #fff; /* Text color */
    padding: 10px; /* Add padding */
    font-weight: bold; /* Emphasize the label */
    font-size: 1.2rem; /* Adjust font size */
    border-radius: 5px; /* Optional: rounded corners */
     display: flex; /* Enables flexbox */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    text-align: center; /* Ensure text aligns center */
}
.alert {
    background-color: rgba(255, 0, 0, 0.1);
    color: #ff5f7e;
    border: none;
    border-radius: 10px;
    text-align: center;
}
.team-logo-2 {
    height: 70px;
    width: 70px;
    object-fit: contain;
    background-color: #f0f0f0;  /* Light gray background */
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.badge-sport-soccer::before {
    background-color: #198754; /* green */
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-football::before {
    background-color: #dc3545; /* red */
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-baseball::before {
    background-color: #0d6efd; /* blue */
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-hockey::before {
    background-color: #0dcaf0; /* light blue */
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-basketball::before {
    background-color: #ffc107; /* yellow */
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-rugby::before {
    background-color: #6c757d; /* gray */
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-cricket::before {
    background-color: #f8f9fa; /* light/white */
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-motorsports::before {
    background-color: #fd7e14; /* orange */
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-fighting::before {
    background-color: #d80bce;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.badge-sport-golf::before {
    background-color: #00ff88;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}
.border-sport-golf {
    border-left: 6px solid #00ff88;
}
.border-sport-fighting {
    border-left: 6px solid #d80bce;
}
.border-sport-soccer {
    border-left: 6px solid #198754;
}
.border-sport-football, .border-sport-american-football {
    border-left: 6px solid #dc3545; /* red */
}
.border-sport-baseball {
    border-left: 6px solid #0d6efd; /* blue */
}
.border-sport-ice-hockey {
    border-left: 6px solid #0dcaf0; /* light blue */
}
.border-sport-basketball {
    border-left: 6px solid #ffc107; /* yellow */
}
.border-sport-rugby {
    border-left: 6px solid #6c757d; /* gray */
}
.border-sport-cricket {
    border-left: 6px solid #f8f9fa; /* white */
}
.border-sport-motorsports {
    border-left: 6px solid #fd7e14; /* orange */
}