@extends('student.layouts.layout')

@section('content')
<div class=" flex xl:flex-nowrap flex-wrap gap-4 w-full">

    <div class="flex sm:flex-nowrap flex-wrap border 2xl:w-[52%] xl:w-[70%] w-full border-[#D9D9D9] rounded-lg overflow-hidden bg-white">
        <div class="sm:w-[57%] w-full  border-r border-[#D9D9D9]">
            <div class="p-6 pb-2">
                <h3 class="font-semibold text-[22px] mb-1 text-[#133754] Poppins-medium">Set your availability</h3>
                <div class="flex items-center gap-2 mb-2 mt-5">
                    <i class="fa-regular fa-calendar-days text-lg"></i>
                    <p class="text-[#222222] Poppins-medium text-[16px] leading-none">
                        Weekly hours
                    </p>
                </div>
                <p class="Poppins text-sm text-[#626262]">Set when you are typically available for meetings</p>
            </div>
            <hr class="text-[#D9D9D9]">
            <div class="space-y-4 p-6">
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="flex items-center gap-4 text-[#222222] Poppins-medium text-[16px] cursor-pointer">
                            <input type="checkbox" checked class="hidden peer">

                            <span
                                class="w-[25px] h-[25px] flex items-center justify-center  rounded border border-[#1CD8C4]  bg-[#1CD8C4] peer-checked:bg-[#1CD8C4]">
                                <img src="{{ asset('student/Sites/images/tick-icon.png') }}" />
                            </span>

                            Monday
                        </label>

                        <span class="text-sm text-[#1CD8C4] Poppins-medium cursor-pointer">Add another Timeslot</span>
                    </div>

                    <div class="flex gap-3 mt-6">
                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                From
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>9:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>


                        <div class="relative w-1/2">
                            
                            

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                To
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>18:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                            
                            
                        </div>
                        

                    </div>
                    <div class="mt-2">

                        <input class="w-[48.5%] clone-extrainput appearance-none text-center text-[#5B5B5B] Poppins placeholder:text-[#5B5B5B] text-[16px] border border-[#F4C701] rounded
                        px-3 pt-[18px] pb-[10px] pr-8 text-sm
                        focus:outline-none focus:border-teal-400" placeholder="9 : 00" />
                    </div>
                    </div>

                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="flex items-center gap-4 text-[#222222] Poppins-medium text-[16px] cursor-pointer">
                            <input type="checkbox" checked class="hidden peer">

                            <span
                                class="w-[25px] h-[25px] flex items-center justify-center
                 rounded border border-[#1CD8C4]
                 bg-[#1CD8C4] peer-checked:bg-[#1CD8C4]">
                                <img src="{{ asset('student/Sites/images/tick-icon.png') }}" />
                            </span>

                            Tuesday
                        </label>

                        <span class="text-sm text-[#1CD8C4] Poppins-medium cursor-pointer">Add another Timeslot</span>
                    </div>

                    <div class="flex gap-3 mt-6">
                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                From
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>9:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>


                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                To
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>17:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="flex items-center gap-4 text-[#222222] Poppins-medium text-[16px] cursor-pointer">
                            <input type="checkbox" checked class="hidden peer">

                            <span
                                class="w-[25px] h-[25px] flex items-center justify-center
                 rounded border border-[#1CD8C4]
                 bg-[#1CD8C4] peer-checked:bg-[#1CD8C4]">
                                <img src="{{ asset('student/Sites/images/tick-icon.png') }}" />
                            </span>

                            Wednesday
                        </label>

                        <span class="text-sm text-[#1CD8C4] Poppins-medium cursor-pointer">Add another Timeslot</span>
                    </div>

                    <div class="flex gap-3 mt-6">
                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                From
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>9:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>


                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                To
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>17:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="flex items-center gap-4 text-[#222222] Poppins-medium text-[16px] cursor-pointer">
                            <input type="checkbox" checked class="hidden peer">

                            <span
                                class="w-[25px] h-[25px] flex items-center justify-center
                 rounded border border-[#1CD8C4]
                 bg-[#1CD8C4] peer-checked:bg-[#1CD8C4]">
                                <img src="{{ asset('student/Sites/images/tick-icon.png') }}" />
                            </span>

                            Thursday
                        </label>

                        <span class="text-sm text-[#1CD8C4] Poppins-medium cursor-pointer">Add another Timeslot</span>
                    </div>

                    <div class="flex gap-3 mt-6">
                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                From
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>9:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>


                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                To
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>17:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label class="flex items-center gap-4 text-[#222222] Poppins-medium text-[16px] cursor-pointer">
                            <input type="checkbox" checked class="hidden peer">

                            <span
                                class="w-[25px] h-[25px] flex items-center justify-center
                 rounded border border-[#1CD8C4]
                 bg-[#1CD8C4] peer-checked:bg-[#1CD8C4]">
                                <img src="{{ asset('student/Sites/images/tick-icon.png') }}" />

                            </span>

                            Friday
                        </label>

                        <span class="text-sm text-[#1CD8C4] Poppins-medium cursor-pointer">Add another Timeslot</span>
                    </div>

                    <div class="flex gap-3 mt-6">
                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                From
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>9:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>


                        <div class="relative w-1/2">

                            <label
                                class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                                To
                            </label>


                            <select
                                class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                                <option>17:00</option>
                                <option>10:00</option>
                                <option>11:00</option>
                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                                <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                            </div>
                        </div>
                    </div>
                </div>

                <label class="flex items-center gap-4 text-[#222222] Poppins-medium text-[16px] cursor-pointer">
                    <input type="checkbox" class="hidden peer">

                    <span
                        class="w-[25px] h-[25px] flex items-center justify-center
               rounded border border-[#1CD8C4]
               bg-white
               peer-checked:bg-[#1CD8C4]
               peer-checked:[&>img]:block">

                        <img src="{{ asset('student/Sites/images/tick-icon.png') }}" class="hidden" />
                    </span>

                    Saturday
                </label>


                <label class="flex items-center gap-4 text-[#222222] Poppins-medium text-[16px] cursor-pointer">
                    <input type="checkbox" class="hidden peer">

                    <span
                        class="w-[25px] h-[25px] flex items-center justify-center
               rounded border border-[#1CD8C4]
               bg-white
               peer-checked:bg-[#1CD8C4]
               peer-checked:[&>img]:block">

                        <img src="{{ asset('student/Sites/images/tick-icon.png') }}" class="hidden" />
                    </span>

                    Sunday
                </label>


            </div>
  
        </div>


        <div class="sm:w-[43%] w-full p-4 pt-1">
            <div class="flex items-center gap-2 mb-2 mt-5">
                <i class="fa-regular fa-calendar-days text-xl"></i>
                <p class="text-[#222222] Poppins-medium text-[16px] leading-none">
                    Date-specific hours
                </p>
            </div>
            <p class="Poppins text-sm text-[#626262]">Adjust hours for specific days</p>


            <button
                class="bg-[#F4C701] w-full text-center text-[#133754] text-[16px] Poppins-medium font-medium px-4 mt-3 py-[10px] rounded mb-4">
                + Date
            </button>

            <div class="space-y-6 ">
                <div class="relative w-full">

                    <label
                        class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                        Date
                    </label>


                    <select
                        class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                        <option>12/11/2025</option>
                        <option>10:00</option>
                        <option>11:00</option>
                    </select>

                    <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                        <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                    </div>
                </div>
                <div class="relative w-full">

                    <label
                        class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                        From
                    </label>


                    <select
                        class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                        <option>9:00</option>
                        <option>10:00</option>
                        <option>11:00</option>
                    </select>

                    <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                        <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                    </div>
                </div>

                <div class="relative w-full">

                    <label
                        class="absolute -top-2 left-3 bg-white px-1
               text-sm text-[#49454F] Poppins z-10">
                        To
                    </label>


                    <select
                        class="w-full appearance-none text-[#1D1B20] Poppins placeholder:text-[#1D1B20] text-[18px] border border-[#DBDBDB] rounded
               px-3 pt-[18px] pb-[10px] pr-8 text-sm
               focus:outline-none focus:border-teal-400">
                        <option>9:00</option>
                        <option>10:00</option>
                        <option>11:00</option>
                    </select>

                    <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                        <img src="{{ asset('student/Sites/images/arrow-down.png') }}" class=" text-gray-500" />

                    </div>
                </div>

                <span class="text-sm text-[#1CD8C4] Poppins-medium cursor-pointer float-right -mt-3">Add another
                    Timeslot</span>
            </div>

            <button class="w-full bg-[#133754] Poppins-medium text-[15px] text-white py-4 mt-8 rounded font-medium">
                Save
            </button>
        </div>

    </div>

    <div class=" border-[#E5E5E5] rounded-[10px] border  p-2 xl:w-[48%] md:w-[57%] w-full">
        <div class="flex items-center justify-between mb-4">


        </div>
        <div class="flex gap-12 justify-center">
            <button
                class="border cursor-pointer rounded-sm border-[#EEEEEE] sm:h-[38px] sm:w-[38px] w-[36px] flex justify-center items-center">
                <i class="fa-solid fa-arrow-left text-[#898989]"></i>
            </button>
            <h2 class="text-[#2A2A2A] sm:text-[22px] flex items-center text-[15px] sm:mt-0 mt-2 Poppins ml-3">
                December 2025
            </h2>
            <button
                class="border cursor-pointer rounded-sm border-[#EEEEEE] sm:h-[38px] sm:w-[38px] w-[36px] flex justify-center items-center">
                <i class="fa-solid fa-arrow-right text-[#898989]"></i>
            </button>

        </div>


        <div class="grid grid-cols-7 text-center text-sm font-medium text-gray-700 mb-3 mt-5">
            <div class="text-[#2A2A2A] sm:text-[24px] text-lg Poppins leading-none  flex flex-col">
                <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>15<br><span
                    class="sm:text-lg text-[12px] text-[#626262]">Mon</span>
            </div>
            <div class="text-[#2A2A2A] sm:text-[24px] text-lg Poppins leading-none flex flex-col">
                <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>16<br><span
                    class="sm:text-lg text-[12px] text-[#626262]">Tue</span>
            </div>
            <div class="text-[#2A2A2A] sm:text-[24px] text-lg Poppins leading-none flex flex-col">
                <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>17<br><span
                    class="sm:text-lg text-[12px] text-[#626262]">Wed</span>
            </div>
            <div class="text-[#2A2A2A] sm:text-[24px] text-lg Poppins leading-none flex flex-col">
                <div class="border-t border-4 border-[#00C200] rounded-[10px] mb-3 w-[80%] mx-auto"></div>18<br><span
                    class="sm:text-lg text-[12px] text-[#626262]">Thu</span>
            </div>
            <div class="text-[#2A2A2A] sm:text-[24px] text-lg Poppins leading-none flex flex-col">
                <div class="border-t border-4 border-[#CFCFCF] rounded-[10px] mb-3 w-[80%] mx-auto"></div>19<br><span
                    class="sm:text-lg text-[12px] text-[#626262]">Fri</span>
            </div>
            <div class="text-[#2A2A2A] sm:text-[24px] text-lg Poppins leading-none flex flex-col">
                <div class="border-t border-4 border-[#C20000] rounded-[10px] mb-3 w-[80%] mx-auto"></div>20<br><span
                    class="sm:text-lg text-[12px] text-[#626262]">Sat</span>
            </div>
            <div class="text-[#2A2A2A] sm:text-[24px] text-lg Poppins leading-none flex flex-col">
                <div class="border-t border-4 border-[#C20000] rounded-[10px] mb-3 w-[80%] mx-auto"></div>21<br><span
                    class="sm:text-lg text-[12px] text-[#626262]">Sun</span>
            </div>
        </div>


        <div class="grid grid-cols-7 gap-2 text-xs text-center">


            <div class="space-y-5">
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">09:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">10:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">11:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">12:00</div>
                <div class="text-[#2A2A2A] Poppins sm:text-[16px] text-[13px]">13:00</div>
                <div class="text-[#2A2A2A] Poppins sm:text-[16px] text-[13px]">14:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">15:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">16:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">17:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">18:00</div>
            </div>


            <div class="space-y-5">
                <div class="Poppins sm:text-[16px] text-[13px]">09:00</div>
                <div class="Poppins sm:text-[16px] text-[13px]">10:00</div>
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">11:00</div>
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">12:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>13:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>14:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">15:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">16:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">17:00</div>
                <div class="text-green-600 Poppins sm:text-[16px] text-[13px]">18:00</div>
            </div>


            <div class="space-y-5">
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">09:00</div>
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">10:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>11:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>12:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>13:00</div>
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">14:00</div>
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">15:00</div>
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">16:00</div>
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">17:00</div>
                <div class="text-[#C20000] Poppins sm:text-[16px] text-[13px]">18:00</div>
            </div>


            <div class="space-y-5">
                <div class='Poppins sm:text-[16px] text-[13px]'>09:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>10:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>11:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>12:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>13:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>14:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>15:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>16:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>17:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>18:00</div>
            </div>

            <div class="space-y-5">
                <div class='Poppins sm:text-[16px] text-[13px]'>09:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>10:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>11:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>12:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>13:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>14:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>15:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>16:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>17:00</div>
                <div class='Poppins sm:text-[16px] text-[13px]'>18:00</div>
            </div>


            <div class="space-y-2 text-[#C20000]">
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
            </div>


            <div class="space-y-2 text-[#C20000]">
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
                <div class='Poppins sm:text-[16px] text-[13px]'></div>
            </div>

        </div>
    </div>
</div>
@endsection