.timetable-container{width:100%;height:auto}.timetable{flex-direction:column;align-items:center;width:100%;height:auto;margin-top:30px;padding-bottom:100px;display:flex;position:relative;top:100px}.timetable .header{flex-direction:column;justify-content:center;align-items:center;width:100%;height:auto;margin-bottom:20px;display:flex}.timetable .header .title{font-size:50px;font-weight:500}.timetable .header .title span{color:#cc0100}.timetable .header .line{margin-bottom:15px}.timetable .header .mobile-day-selector{justify-content:center;align-items:center;margin-top:10px;margin-bottom:15px;display:flex}.timetable .header .mobile-day-selector .current-day{text-align:center;min-width:60px;margin:0 20px;font-size:24px;font-weight:600}.timetable .header .mobile-day-selector .day-nav-btn{color:#fff;cursor:pointer;background-color:#cc0100;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;transition:background-color .2s,transform .2s;display:flex}.timetable .header .mobile-day-selector .day-nav-btn:hover{background-color:#a30000}.timetable .header .mobile-day-selector .day-nav-btn:active{transform:scale(.95)}.timetable .schedule{--time-col-width:70px;--header-height:44px;--hour-height:60px;--hours:15;box-sizing:border-box;width:100%;min-width:768px;margin-top:10px;position:relative}@media (max-width:768px){.timetable .schedule{min-width:auto}}.timetable .schedule .schedule-grid{grid-template-columns:var(--time-col-width)repeat(7,1fr);grid-template-rows:var(--header-height)calc(var(--hour-height)*var(--hours));width:100%;height:calc(var(--hour-height)*var(--hours) + var(--header-height));align-items:stretch;gap:0;margin-top:150px;display:grid;position:relative;overflow:hidden}@media (max-width:768px){.timetable .schedule .schedule-grid{grid-template-columns:var(--time-col-width)1fr}}.timetable .schedule .time-col-header{grid-area:1/1}.timetable .schedule .day-col-header{text-align:center;-webkit-user-select:none;user-select:none;grid-row:1;align-self:center;padding:10px 6px;font-size:14px;font-weight:700}.timetable .schedule .time-col{z-index:4;background:0 0;flex-direction:column;grid-area:2/1;align-items:flex-start;display:flex}.timetable .schedule .time-cell{height:var(--hour-height);color:#bdbdbd;box-sizing:border-box;background:0 0;padding-top:6px;padding-left:8px;font-size:12px}.timetable .schedule .day-col{z-index:3;background:0 0;border-left:3px solid #b40000f2;grid-row:2;position:relative}.timetable .schedule .event{box-sizing:border-box;color:#111;z-index:6;cursor:pointer;border-radius:8px;flex-direction:column;justify-content:space-between;width:88%;padding:6px 8px;font-family:Montserrat Alternates,sans-serif;font-size:13px;font-weight:500;transition:transform .1s,z-index .1s;display:flex;position:absolute;left:6%;overflow:hidden;box-shadow:0 2px 4px #0000001a}.timetable .schedule .event .title{white-space:nowrap;text-overflow:ellipsis;width:100%;font-weight:700;line-height:1.2;overflow:hidden}.timetable .schedule .event .time{opacity:.85;white-space:nowrap;margin-top:2px;font-size:11px}.timetable .schedule .event.short-mode{flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;padding:0 6px}.timetable .schedule .event.short-mode .title{flex:1;margin-bottom:0;font-size:12px}.timetable .schedule .event.short-mode .time{flex-shrink:0;margin-top:0;font-size:10px;font-weight:600}.timetable .schedule .event:hover{z-index:20;transform:scale(1.02)}.timetable .schedule .grid-lines{left:0;right:0;top:var(--header-height);height:calc(var(--hour-height)*var(--hours));z-index:1;pointer-events:none;background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--hour-height) - 3px),#b40000f2 calc(var(--hour-height) - 3px)var(--hour-height));background-repeat:repeat;background-size:100% var(--hour-height);position:absolute}.timetable .schedule .current-time-line{left:var(--time-col-width);z-index:7;pointer-events:none;background:linear-gradient(90deg,orange,#ff6e00);height:4px;position:absolute;right:0;box-shadow:0 0 8px #ff8c0080}@media (max-width:1024px){.timetable .schedule{margin-top:30px;padding:0 20px!important}.timetable .schedule .event{padding:4px 6px;font-size:12px}.timetable .schedule .event .time{font-size:10px}}@media (max-width:768px){.timetable .header .title{font-size:36px}.timetable .header .mobile-day-selector{margin-top:20px;margin-bottom:20px}.timetable .header .mobile-day-selector .current-day{font-size:28px}.timetable .schedule{-webkit-overflow-scrolling:touch;margin-top:20px;overflow-x:visible;padding:0!important}.timetable .schedule .day-col-header{font-size:18px;font-weight:700}.timetable .schedule .day-col{border-top:3px solid #b40000f2;border-left:none;padding-top:10px}.timetable .schedule .event{width:94%;left:3%}}@media (max-width:480px){.timetable .header .title{font-size:28px}.timetable .schedule{--hour-height:70px;margin-top:30px}.timetable .schedule .time-cell{padding-left:4px;font-size:10px}.timetable .schedule .event{width:92%;padding:4px 6px;font-size:11px;left:4%}.timetable .schedule .event .time{font-size:9px}}.timetable .event-popup{z-index:1000;background-color:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.timetable .event-popup .popup-header{padding:16px 20px;position:relative}.timetable .event-popup .popup-header h3{color:#111;margin:0;padding-right:40px;font-size:20px;font-weight:600}.timetable .event-popup .popup-header .close-popup{color:#fff;cursor:pointer;background-color:#0000004d;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:24px;transition:background-color .2s;display:flex;position:absolute;top:12px;right:12px}.timetable .event-popup .popup-header .close-popup:hover{background-color:#00000080}.timetable .event-popup .popup-content{background-color:#fff;border-radius:12px;width:90%;max-width:500px;margin:10% auto;overflow:hidden;box-shadow:0 8px 25px #00000080}.timetable .event-popup .popup-content p{color:#333;margin:12px 0;padding:0 20px 20px;font-size:16px;line-height:1.5}@media (max-width:768px){.timetable .event-popup .popup-content{width:95%;margin:20% auto}.timetable .event-popup .popup-header h3{font-size:18px}.timetable .event-popup .popup-content p{font-size:15px}}