@push('styles_top')
    <style>
        .extended-info-popup {
            position: absolute;
            /* top: 0; */
            
            background-color: var(--bs-page-bg) !important;
            border: 1px solid #ddd;
            /* border-radius: 5px; */
            display: block !important;
            z-index: 10000 !important;
            opacity: 0;
            /* transform: translateY(-30px); */
            transform: scale(0, 0);
            transition: scale 0.3s ease, transform 0.3s ease;
        }

        .extended-info-popup.left {
            right: 100%;
            margin-right: 10px;
        }

        .extended-info-popup.right {
            left: 100%;
            margin-left: 10px;
        }

        .extended-info-popup.show {
            opacity: 1;
            /* display:block !important; */
            display: block !important;
            z-index: 10000 !important;
            /* transform: translateX(0); */
            transform: scale(1, 1);
        }
        .extended-info-popup.hide {
            opacity: 0;
            /* display:block !important; */
            display: none !important;
            z-index: 0 !important;
            /* transform: translateX(0); */
            /* transform: scale(1, 1); */
        }

        .popup-content {
            font-size: 14px;
        }
    </style>
@endpush
<div class="extended-info-popup p-1 d-flex flex-row w-300px h-auto shadow-sm " id="popup-{{ $courseUID }}">
    {{-- Course Title --}}
    <div class="d-flex flex-column-auto text-break p-1 h-auto fs-3 fw-bold "
        style="word-wrap: break-word !important; overflow-wrap: break-word !important;">
        <a class="" href="{{ $webinar->getUrl() }}">

            {{ clean($webinar->title, 'title') }}
        </a>
    </div>

    {{-- Course Category --}}
    {{-- <div class="d-flex flex-column-auto text-break h-auto fs-3 mx-2"
        style="word-wrap: break-word !important; overflow-wrap: break-word !important;">
        @if (!empty($webinar->category))
            <span class="fs-4 ">{{ trans('public.in') }} <a href="{{ $webinar->category->getUrl() }}"
                    target="_blank" class="text-decoration-none ">{{ $webinar->category->title }}</a></span>
        @endif
    </div> --}}

    {{-- Course Duration and Level --}}
    <div class="d-flex align-items-center text-break h-auto my-1 mx-2 fs-5 "
        style="word-wrap: break-word !important; overflow-wrap: break-word !important;">
        <i class="ki-outline ki-time fs-5"></i>
        <span class="mx-2 fs-5 text-gray-600">{{ convertMinutesToHourAndMinute($webinar->duration) }}
            {{ trans('home.hours') }}</span>
        <span class="mx-2 fs-5 text-gray-600">-</span>
        <span class="mx-2 fs-5 text-gray-600">All Levels</span>
    </div>

    {{-- Course Description --}}
    <div class="d-flex align-items-center text-break h-auto my-2 fs-5 "
        style="word-wrap: break-word !important; overflow-wrap: break-word !important;">

        <span class="mx-2 fs-4 fw-bold text-gray">This is an example short description of the course. Keep it about this length.</span>
        
    </div>

    {{-- Course Sub Description --}}
    <div class="d-flex align-items-center text-break h-auto my-1 fs-5 mx-2"
        style="word-wrap: break-word !important; overflow-wrap: break-word !important;">

        <i class="mx-4 ki-outline ki-check fs-4 text-primary"></i>
        
        <span class="mx-2 fs-5 text-gray">This is course sub-description 1</span>
        
    </div>
    {{-- Course Sub Description --}}
    <div class="d-flex align-items-center text-break h-auto my-1 fs-5 mx-2"
        style="word-wrap: break-word !important; overflow-wrap: break-word !important;">

        <i class="mx-4 ki-outline ki-check fs-4 text-primary"></i>
        
        <span class="mx-2 fs-5 text-gray">This is course sub-description 2</span>
        
    </div>
    {{-- Course Sub Description --}}
    <div class="d-flex align-items-center text-break h-auto my-1 fs-5 mx-2"
        style="word-wrap: break-word !important; overflow-wrap: break-word !important;">

        <i class="mx-4 ki-outline ki-check fs-4 text-primary"></i>
        
        <span class="mx-2 fs-5 text-gray">This is course sub-description 3</span>
        
    </div>
        <div class="d-flex flex-end align-items-center justify-content-center text-break h-auto my-4 fs-5 mx-2"
        style="word-wrap: break-word !important; overflow-wrap: break-word !important;">
        <a href="index.html" class="btn btn-primary w-80" style="width: 80%;">Add To Cart</a>
    </div>
</div>