iframe.note-video-clip {
    width: 320px;
    height: 180px;
}


        .ag-info p {
            margin: 4px 0;
            color: #555;
            font-size: 16px;
        }



      

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #0056b3;
            font-size: 2.5em;
            margin-bottom: 40px;
        }
      
        .schedule {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        .schedule th, .schedule td {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: center;
            width: 16.6%; /* Equal width for all columns */
        }
        .schedule th {
            background-color: #f8f9fa;
            color: #0056b3;
        }
        .course-card {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s;
        }


      

         .ag-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            background-color: white;
        }

        .ag-table th, .ag-table td {
            padding: 12px 15px;
            text-align: left;
            border: 1px solid #ddd;
        }


        .ag-table th, .ag-tabletd {
            background-color: #007bff;
            color: white;
        }

        .ag-table td {
            font-size: 0.9em;
            color: #333;
        }

        /* Highlight bei Hover */
        .ag-table tr:hover {
            background-color: #f1f1f1;
            cursor: pointer;
        }

        select  {
            width: 120px;
            padding: 5px 5px;
            border-radius: 8px;
            border: 1px solid #ccc;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-size: 1.0em;
            transition: all 0.3s ease;

        }

         input[type="text"],input[type="date"],input[type="file"]  {
            width: 180px;
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #ccc;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-size: 1.0em;
            transition: all 0.3s ease;
        }

        /* Hover-Effekt */
        input[type="text"]:hover, input[type="date"], select:hover {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            border-color: #007bff;
        }

        /* Fokus-Effekt */
        input[type="text"]:focus,input[type="date"], select:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
        }    

         .highlight-list-item {
        transition: background 0.3s ease, transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.5s ease;
    }
    .highlight-list-item:hover {
        transform: scale(1.02); /* Leichter Zoom-Effekt */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.30); /* Schatten für Hover */
}


.course-list {
            list-style: none;
            padding: 0;
        }
        .course-list li {
            background-color: #e8f0fe;
            margin: 10px 0;
            padding: 15px;
            border-radius: 5px;
            Xdisplay: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .course-list li:hover {
            background-color: #cde0ff;
            background-image: inear-gradient(to right, rgba(209, 236, 241, 0.99), rgba(190, 229, 235, 0.1));
        }
        .course-details {
            display: flex;
            flex-direction: column; /*column; see curse_table*/
        }
        .course-title {
            font-size: 1.2em;
            color: #0056b3;
            margin: 0;
        }
        .course-info {
            color: #555;
             text-shadow: 2px 2px 5px white;
        }

           .btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #0056b3;
        }

        .warning {
            text-align: center;
            font-size: 18px;
            color: #ff3333;
            background-color: #ffe6e6;
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 20px;
            border: 1px solid #ff8080;
            visibility: hidden; 
        }

       
        .conflict-box {
            justify-content: center;
            display: flex;
            align-items: center;
            xjustify-content: space-between;
            background-color: #ffe0e0;
            padding: 20px;
            border: 2px solid #ff4d4d;
            border-radius: 12px;
            margin-bottom: 30px;
           
        }

        .conflict-box h2 {
            color: #ff4d4d;
            font-size: 24px;
            margin: 0 0 10px 0;
        }

        .course-card h3 {
            font-size: 1.2em;
            margin: 0;
            color: #0056b3;
        }
        .course-info {
            font-size: 1em;
            color: #555;
            margin: 5px 0;
        }