body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin: 0;
                padding: 0;
                background-color: #1e1e2f;
                color: #ffffff;
                display: flex;
                flex-direction: column; 
                min-height: 100vh;
            }
            .container {
                flex: 1; 
                width: 90%;
                padding: 20px;
                background-color: #2b2b3c;
                border-radius: 8px;
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
                margin: 20px auto;
            }
            h1 {
                text-align: center;
                margin-bottom: 20px;
                color: #ffffff;
            }

            .search-container
            {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 20px;
                width: 100%;
            }

            .input-search {
                padding: 10px;
                border: 1px solid #dfdfe3;
                border-radius: 5px;
                width: 30%;
                background-color: #2b2b3c;
                color: #ffffff;
                
            }


            .categories {
                display: flex;
                flex-wrap: wrap; 
                gap: 10px;
                margin-bottom: 20px;
            }
            .category {
                padding: 10px 20px;
                background-color: #3a3a4a;
                color: #ffffff;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                white-space: nowrap;
                transition: background-color 0.3s, transform 0.3s;
            }
            .category.active {
                background-color: #007bff;
                transform: scale(1.05);
            }
            .category:hover {
                background-color: #0056b3;
            }
            .event {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #3a3a4a;
                padding: 10px;
                border-radius: 8px;
                margin-bottom: 10px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                transition: transform 0.3s, box-shadow 0.3s;
            }
            .event:hover {
                transform: scale(1.02);
                box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
            }
            .event-name {
                font-size: 18px;
                color: #ffffff;
                margin: 0;
                /* flex: 1; */
                width: 80%;
            }
            .iframe-link {
                width: 80%;
                padding: 8px;
                background-color: #2b2b3c;
                color: #ffffff;
                border: none;
                border-radius: 5px;
                text-align: center;
                margin-left: 10px;
            }
            .copy-button {
                padding: 4px 40px 4px 40px;
                background-color: #ff9800;
                color: #ffffff;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                margin-left: 10px;
                margin-right: 10px;
                transition: background-color 0.3s;
                text-decoration: none;
                
            }
            .copy-button:hover {
                background-color: #ff5722;
            }
            .copy-button:active {
                background-color: #4caf50;
            }
            
            .status-button {
                padding: 6px 20px;
                border: none;
                color: white;
                border-radius: 5px;
                font-weight: bold;
                display: flex;
                align-items: center;
                gap: 5px;
                width: 110px;
                
            }
            
            .status-live {
                background-color: #2ebb2e;
            }
            .status-next {
                background-color: blue;
            }
            .status-finished {
                background-color: black;
            }

            #notification {
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background-color: #4caf50;
                color: #ffffff;
                padding: 10px 20px;
                border-radius: 5px;
                display: none;
                opacity: 0;
                transition: opacity 0.5s, transform 0.5s;
            }
            .footer {
                background-color: #121212;
                color: #cccccc;
                text-align: center;
                padding: 10px 0;
                font-size: 14px;
                border-top: 1px solid #3a3a4a;
            }
            .update-text {
                color: #18d763;
                text-align: center;
                margin-bottom: 20px;
                font-weight: bold;
            }        .open-in-new-tab-icon {
                font-size: 14px;
                color: #007bff;
                margin-left: 8px;
                cursor: pointer;
            }
            .open-in-new-tab-icon:hover {
                color: #0056b3;
            }

            .buttons_container {
                display: flex;
                justify-content: space-between;
                align-items: center;
             
            }

            .iframe-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 70%;
            }

            .language_text {
                color: #dad8d8;
                font-size: 12px;
                margin-left: 20px;
                margin-right: 20px;
            }


            @media (max-width: 768px) {
                .event {
                    flex-direction: column;
                    align-items: flex-start;
                }

                .event-name {
                    width: 100%;
                }
                .iframe-container
                {
                                width: 100%;
                }
                .iframe-link {
                    width: 100%;
                    margin-top: 10px;
                    margin-left: 0;
                }

                .copy-button {
                                
                                width: 10%;
                                margin-top: 10px;
                                margin-left: 0;
                }
                .status-button {
                                
                                width: 30%;
                                margin-top: 10px;
                                margin-left: 0;
                }

                .buttons_container
                {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                width: 100%;
                }

                .input-search
                {
                                width: 100%;    
                }
                
                .language_text{
                    display: none;
                }

                .open-in-new-tab-icon
                {
                    display: none;
                }
            }