{% extends 'base.html.twig' %}

{% block title %}{{ page_title }}{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="body-extra-large text-center">Typography</h1>
                <h1 class="body-extra-large">Extra Large</h1>
                <h1 class="h1">Heading one</h1>
                <h2 class="h2">Heading two</h2>
                <h3 class="h3">Heading three</h3>
                <h4 class="h4">Heading Four</h4>
                <p class="body-text">Body text</p>
                <p class="body-text fw-bold">Body text bold</p>
                <p class="body-text-small">Body text small</p>
                <p class="body-text-xsmall">Body text Extra small</p>
                <p class="body-text-small fw-bold">Body text small bold</p>
                <p class="button-text">Button Text</p>
            </div>

            <div class="col-sm-12">
                <h1 class="body-extra-large text-center">Buttons</h1>
                <a href="javascript:;" class="ps-button primary button-text">
            <span>
              <svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M7 8.50781L6.37109 7.87891L1.12109 2.62891L0.492188 2L1.75 0.769531L2.35156 1.39844L7 6.01953L11.6211 1.39844L12.25 0.769531L13.4805 2L12.8516 2.62891L7.60156 7.87891L7 8.50781Z"
                    fill="white"
                />
              </svg>
            </span>
                    <span>Button</span>
                    <span>
              <svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M7 8.50781L6.37109 7.87891L1.12109 2.62891L0.492188 2L1.75 0.769531L2.35156 1.39844L7 6.01953L11.6211 1.39844L12.25 0.769531L13.4805 2L12.8516 2.62891L7.60156 7.87891L7 8.50781Z"
                    fill="white"
                />
              </svg>
            </span>
                </a>
                <a href="javascript:;" class="ps-button secondary button-text">
            <span>
              <svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M7 8.50781L6.37109 7.87891L1.12109 2.62891L0.492188 2L1.75 0.769531L2.35156 1.39844L7 6.01953L11.6211 1.39844L12.25 0.769531L13.4805 2L12.8516 2.62891L7.60156 7.87891L7 8.50781Z"
                    fill="black"
                />
              </svg>
            </span>
                    <span>Button</span>
                    <span>
              <svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M7 8.50781L6.37109 7.87891L1.12109 2.62891L0.492188 2L1.75 0.769531L2.35156 1.39844L7 6.01953L11.6211 1.39844L12.25 0.769531L13.4805 2L12.8516 2.62891L7.60156 7.87891L7 8.50781Z"
                    fill="black"
                />
              </svg>
            </span>
                </a>
                <a href="javascript:;" class="ps-button small button-text h-40">
            <span>
              <svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M7 8.50781L6.37109 7.87891L1.12109 2.62891L0.492188 2L1.75 0.769531L2.35156 1.39844L7 6.01953L11.6211 1.39844L12.25 0.769531L13.4805 2L12.8516 2.62891L7.60156 7.87891L7 8.50781Z"
                    fill="#39A759"
                />
              </svg>
            </span>
                    <span>Button</span>
                    <span>
              <svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M7 8.50781L6.37109 7.87891L1.12109 2.62891L0.492188 2L1.75 0.769531L2.35156 1.39844L7 6.01953L11.6211 1.39844L12.25 0.769531L13.4805 2L12.8516 2.62891L7.60156 7.87891L7 8.50781Z"
                    fill="#39A759"
                />
              </svg>
            </span>
                </a>
                <hr/>
                <a href="javascript:;" class="ps-button dashboard-btn button-text h-40">Dashboard </a>
                <a href="javascript:;" class="ps-button dashboard-btn button-text h-40 active">Dashboard </a>
                <hr/>
                <a href="javascript:;" class="ps-button dashboard-btn button-text h-40">
            <span>
              <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M3.9375 8.26562V1.63281L1.125 2.57031V9.20312L3.9375 8.26562ZM8.4375 9.39062V2.75781L5.0625 1.63281V8.26562L8.4375 9.39062ZM9.5625 9.39062L12.375 8.45312V1.82031L9.5625 2.75781V9.39062ZM0 10.75V9.57812V1.75L4.5 0.25L9 1.75L12.375 0.625L13.5 0.25V1.44531V9.25L9 10.75L4.5 9.25L1.125 10.375L0 10.75Z"
                    fill="#B6B6BE"
                />
              </svg>
            </span>
                    <span>Add</span>
                </a>
                <a href="javascript:;" class="ps-button dashboard-btn button-text h-40 active-green">
            <span>
              <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M3.9375 8.26562V1.63281L1.125 2.57031V9.20312L3.9375 8.26562ZM8.4375 9.39062V2.75781L5.0625 1.63281V8.26562L8.4375 9.39062ZM9.5625 9.39062L12.375 8.45312V1.82031L9.5625 2.75781V9.39062ZM0 10.75V9.57812V1.75L4.5 0.25L9 1.75L12.375 0.625L13.5 0.25V1.44531V9.25L9 10.75L4.5 9.25L1.125 10.375L0 10.75Z"
                    fill="#B6B6BE"
                />
              </svg>
            </span>
                    <span>Add</span>
                </a>
                <hr/>
                <a href="javascript:;" class="ps-button tertiary button-text h-40">
            <span>
              <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M3.9375 8.26562V1.63281L1.125 2.57031V9.20312L3.9375 8.26562ZM8.4375 9.39062V2.75781L5.0625 1.63281V8.26562L8.4375 9.39062ZM9.5625 9.39062L12.375 8.45312V1.82031L9.5625 2.75781V9.39062ZM0 10.75V9.57812V1.75L4.5 0.25L9 1.75L12.375 0.625L13.5 0.25V1.44531V9.25L9 10.75L4.5 9.25L1.125 10.375L0 10.75Z"
                    fill="#ffffff"
                />
              </svg>
            </span>
                    <span>Edit</span>
                </a>
                <hr/>
                <a href="javascript:;" class="ps-button-featured button-text">
            <span class="ps-button-featured__icon">
              <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M14.8965 1.36413L8.32799 14.4988C8.15205 14.8213 7.82948 15.0265 7.4776 14.9972H0.938365C0.410535 14.9972 0 14.5868 0 14.059V13.8245H1.40755C1.64214 13.8245 1.87673 13.6193 1.87673 13.3554C1.87673 13.1208 1.64214 12.8863 1.40755 12.8863H0V11.9481H1.40755C1.64214 11.9481 1.87673 11.7429 1.87673 11.479C1.87673 11.2445 1.64214 11.0099 1.40755 11.0099H0V10.2183C0 9.5733 0.615802 9.13353 1.2316 9.30944L7.74151 11.479V11.5083L13.2251 0.513897C13.4597 0.0448014 14.0168 -0.131109 14.486 0.103438C14.9552 0.337986 15.1311 0.895037 14.8965 1.36413Z"
                    fill="white"
                />
                <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M16.2885 17.4615V15.2885H18.4615C18.8806 15.2885 19.25 14.946 19.25 14.5C19.25 14.0759 18.8857 13.7115 18.4615 13.7115H16.2885V11.5385C16.2885 11.1143 15.9241 10.75 15.5 10.75C15.054 10.75 14.7115 11.1194 14.7115 11.5385V13.7115H12.5385C12.0925 13.7115 11.75 14.081 11.75 14.5C11.75 14.941 12.0975 15.2885 12.5385 15.2885H14.7115V17.4615C14.7115 17.9025 15.059 18.25 15.5 18.25C15.919 18.25 16.2885 17.9075 16.2885 17.4615Z"
                    fill="white"
                />
              </svg>
            </span>
                    <span>New club</span>
                </a>
                <a href="javascript:;" class="ps-button-featured button-text">
            <span class="ps-button-featured__icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
                <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M15.4795 17.6244V15.4795H17.6244C18.038 15.4795 18.4026 15.1415 18.4026 14.7013C18.4026 14.2827 18.043 13.9231 17.6244 13.9231H15.4795V11.7782C15.4795 11.3596 15.1199 11 14.7013 11C14.2611 11 13.9231 11.3646 13.9231 11.7782V13.9231H11.7782C11.338 13.9231 11 14.2877 11 14.7013C11 15.1365 11.343 15.4795 11.7782 15.4795H13.9231V17.6244C13.9231 18.0596 14.2661 18.4026 14.7013 18.4026C15.1149 18.4026 15.4795 18.0646 15.4795 17.6244Z"
                    fill="white"
                />
                <path
                    d="M5.5 6.5C4.37054 6.5 3.33929 5.89062 2.77455 4.875C2.20982 3.88477 2.20982 2.64062 2.77455 1.625C3.33929 0.634766 4.37054 0 5.5 0C6.60491 0 7.63616 0.634766 8.20089 1.625C8.76562 2.64062 8.76562 3.88477 8.20089 4.875C7.63616 5.89062 6.60491 6.5 5.5 6.5ZM4.37054 7.71875H6.60491C9.03571 7.71875 11 9.75 11 12.2637C11 12.6699 10.6562 13 10.2634 13H0.712054C0.319196 13 0 12.6699 0 12.2637C0 9.75 1.93973 7.71875 4.37054 7.71875Z"
                    fill="white"
                />
              </svg>
            </span>
                    <span>New user</span>
                </a>
                <hr/>
                <a href="javascript:;" class="dots-btn">
                    <svg width="3" height="11" viewBox="0 0 3 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M0.875 0.5H2.625V2.25H0.875V0.5ZM0.875 4.875H2.625V6.625H0.875V4.875ZM2.625 9.25V11H0.875V9.25H2.625Z"
                            fill="#333333"
                        />
                    </svg>
                </a>
            </div>

            <div class="col-sm-12">
                <h1 class="body-extra-large text-center">Links</h1>
                <a href="javascript:;" class="ps-link">Link Text</a>
                <hr/>
            </div>

            <div class="col-sm-12">
                <h1 class="body-extra-large text-center">Components</h1>
                <h3>Notifications</h3>
                <div class="notification__wrapper box-shadow p-16px">
                    <div class="notification">
                        <p class="notification__icon">
                            <svg width="13" height="15" viewBox="0 0 13 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6.625 0.75C7.08984 0.75 7.5 1.16016 7.5 1.625V2.17188C9.49609 2.55469 11 4.33203 11 6.4375V6.95703C11 8.24219 11.4648 9.5 12.3125 10.457L12.5039 10.6758C12.75 10.9492 12.8047 11.3047 12.668 11.6328C12.5312 11.9336 12.2031 12.125 11.875 12.125H1.375C1.01953 12.125 0.691406 11.9336 0.554688 11.6328C0.417969 11.3047 0.472656 10.9492 0.71875 10.6758L0.910156 10.457C1.75781 9.5 2.25 8.24219 2.25 6.95703V6.4375C2.25 4.33203 3.75391 2.55469 5.75 2.17188V1.625C5.75 1.16016 6.13281 0.75 6.625 0.75ZM7.85547 14.2578C7.52734 14.5859 7.08984 14.75 6.625 14.75C6.16016 14.75 5.69531 14.5859 5.36719 14.2578C5.03906 13.9297 4.875 13.4648 4.875 13H6.625H8.375C8.375 13.4648 8.18359 13.9297 7.85547 14.2578Z"
                                    fill="#CD3333"
                                />
                            </svg>
                        </p>
                        <div class="notification__content">
                            <p class="proscreen-red-text body-text fw-bold mb-0">Emergency assistance</p>
                            <p class="body-text-small mb-0"><strong>Group 4,</strong> Name, A</p>
                            <p class="body-text-small mb-0">11:48am</p>
                        </div>
                        <p class="notification__close">
                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.93359 1.49609L5.65234 4.77734L8.90625 8.03125C9.17969 8.27734 9.17969 8.6875 8.90625 8.93359C8.66016 9.20703 8.25 9.20703 8.00391 8.93359L4.72266 5.67969L1.46875 8.93359C1.22266 9.20703 0.8125 9.20703 0.566406 8.93359C0.292969 8.6875 0.292969 8.27734 0.566406 8.00391L3.82031 4.75L0.566406 1.49609C0.292969 1.25 0.292969 0.839844 0.566406 0.566406C0.8125 0.320312 1.22266 0.320312 1.49609 0.566406L4.75 3.84766L8.00391 0.59375C8.25 0.320312 8.66016 0.320312 8.93359 0.59375C9.17969 0.839844 9.17969 1.25 8.93359 1.49609Z"
                                    fill="#727987"
                                />
                            </svg>
                        </p>
                    </div>
                    <div class="notification">
                        <p class="notification__icon">
                            <svg width="13" height="15" viewBox="0 0 13 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6.625 0.75C7.08984 0.75 7.5 1.16016 7.5 1.625V2.17188C9.49609 2.55469 11 4.33203 11 6.4375V6.95703C11 8.24219 11.4648 9.5 12.3125 10.457L12.5039 10.6758C12.75 10.9492 12.8047 11.3047 12.668 11.6328C12.5312 11.9336 12.2031 12.125 11.875 12.125H1.375C1.01953 12.125 0.691406 11.9336 0.554688 11.6328C0.417969 11.3047 0.472656 10.9492 0.71875 10.6758L0.910156 10.457C1.75781 9.5 2.25 8.24219 2.25 6.95703V6.4375C2.25 4.33203 3.75391 2.55469 5.75 2.17188V1.625C5.75 1.16016 6.13281 0.75 6.625 0.75ZM7.85547 14.2578C7.52734 14.5859 7.08984 14.75 6.625 14.75C6.16016 14.75 5.69531 14.5859 5.36719 14.2578C5.03906 13.9297 4.875 13.4648 4.875 13H6.625H8.375C8.375 13.4648 8.18359 13.9297 7.85547 14.2578Z"
                                    fill="#CD3333"
                                />
                            </svg>
                        </p>
                        <div class="notification__content">
                            <p class="proscreen-red-text body-text fw-bold mb-0">Emergency assistance</p>
                            <p class="body-text-small mb-0"><strong>Group 4,</strong> Name, A</p>
                            <p class="body-text-small mb-0">10:18am</p>
                        </div>
                        <p class="notification__close">
                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.93359 1.49609L5.65234 4.77734L8.90625 8.03125C9.17969 8.27734 9.17969 8.6875 8.90625 8.93359C8.66016 9.20703 8.25 9.20703 8.00391 8.93359L4.72266 5.67969L1.46875 8.93359C1.22266 9.20703 0.8125 9.20703 0.566406 8.93359C0.292969 8.6875 0.292969 8.27734 0.566406 8.00391L3.82031 4.75L0.566406 1.49609C0.292969 1.25 0.292969 0.839844 0.566406 0.566406C0.8125 0.320312 1.22266 0.320312 1.49609 0.566406L4.75 3.84766L8.00391 0.59375C8.25 0.320312 8.66016 0.320312 8.93359 0.59375C9.17969 0.839844 9.17969 1.25 8.93359 1.49609Z"
                                    fill="#727987"
                                />
                            </svg>
                        </p>
                    </div>
                    <div class="notification">
                        <p class="notification__icon">
                            <svg width="13" height="15" viewBox="0 0 13 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6.625 0.75C7.08984 0.75 7.5 1.16016 7.5 1.625V2.17188C9.49609 2.55469 11 4.33203 11 6.4375V6.95703C11 8.24219 11.4648 9.5 12.3125 10.457L12.5039 10.6758C12.75 10.9492 12.8047 11.3047 12.668 11.6328C12.5312 11.9336 12.2031 12.125 11.875 12.125H1.375C1.01953 12.125 0.691406 11.9336 0.554688 11.6328C0.417969 11.3047 0.472656 10.9492 0.71875 10.6758L0.910156 10.457C1.75781 9.5 2.25 8.24219 2.25 6.95703V6.4375C2.25 4.33203 3.75391 2.55469 5.75 2.17188V1.625C5.75 1.16016 6.13281 0.75 6.625 0.75ZM7.85547 14.2578C7.52734 14.5859 7.08984 14.75 6.625 14.75C6.16016 14.75 5.69531 14.5859 5.36719 14.2578C5.03906 13.9297 4.875 13.4648 4.875 13H6.625H8.375C8.375 13.4648 8.18359 13.9297 7.85547 14.2578Z"
                                    fill="#CD3333"
                                />
                            </svg>
                        </p>
                        <div class="notification__content">
                            <p class="proscreen-red-text body-text fw-bold mb-0">Emergency assistance</p>
                            <p class="body-text-small mb-0"><strong>Group 4,</strong> Name, A</p>
                            <p class="body-text-small mb-0">09:17am</p>
                        </div>
                        <p class="notification__close">
                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.93359 1.49609L5.65234 4.77734L8.90625 8.03125C9.17969 8.27734 9.17969 8.6875 8.90625 8.93359C8.66016 9.20703 8.25 9.20703 8.00391 8.93359L4.72266 5.67969L1.46875 8.93359C1.22266 9.20703 0.8125 9.20703 0.566406 8.93359C0.292969 8.6875 0.292969 8.27734 0.566406 8.00391L3.82031 4.75L0.566406 1.49609C0.292969 1.25 0.292969 0.839844 0.566406 0.566406C0.8125 0.320312 1.22266 0.320312 1.49609 0.566406L4.75 3.84766L8.00391 0.59375C8.25 0.320312 8.66016 0.320312 8.93359 0.59375C9.17969 0.839844 9.17969 1.25 8.93359 1.49609Z"
                                    fill="#727987"
                                />
                            </svg>
                        </p>
                    </div>
                </div>
                <hr/>
                <div class="notification__wrapper box-shadow p-16px">
                    <div class="notification">
                        <p class="notification__icon">
                            <svg width="13" height="15" viewBox="0 0 13 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6.625 0.75C7.08984 0.75 7.5 1.16016 7.5 1.625V2.17188C9.49609 2.55469 11 4.33203 11 6.4375V6.95703C11 8.24219 11.4648 9.5 12.3125 10.457L12.5039 10.6758C12.75 10.9492 12.8047 11.3047 12.668 11.6328C12.5312 11.9336 12.2031 12.125 11.875 12.125H1.375C1.01953 12.125 0.691406 11.9336 0.554688 11.6328C0.417969 11.3047 0.472656 10.9492 0.71875 10.6758L0.910156 10.457C1.75781 9.5 2.25 8.24219 2.25 6.95703V6.4375C2.25 4.33203 3.75391 2.55469 5.75 2.17188V1.625C5.75 1.16016 6.13281 0.75 6.625 0.75ZM7.85547 14.2578C7.52734 14.5859 7.08984 14.75 6.625 14.75C6.16016 14.75 5.69531 14.5859 5.36719 14.2578C5.03906 13.9297 4.875 13.4648 4.875 13H6.625H8.375C8.375 13.4648 8.18359 13.9297 7.85547 14.2578Z"
                                    fill="#CD3333"
                                />
                            </svg>
                        </p>
                        <div class="notification__content">
                            <p class="proscreen-red-text body-text fw-bold mb-0">Emergency assistance</p>
                            <p class="body-text-small mb-0"><strong>Group 4,</strong> Name, A</p>
                            <p class="body-text-small mb-0">11:48am</p>
                        </div>
                    </div>
                    <a href="javascript:;" class="ps-button small button-text h-40 align-self-end">
              <span>
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M8.91406 2.31641L6.48047 4.75L8.91406 7.21094L9.54297 7.8125L8.3125 9.07031L7.68359 8.44141L5.25 6.00781L2.78906 8.44141L2.1875 9.07031L0.929688 7.8125L1.55859 7.21094L3.99219 4.75L1.55859 2.31641L0.929688 1.6875L2.1875 0.457031L2.78906 1.08594L5.25 3.51953L7.68359 1.08594L8.3125 0.457031L9.54297 1.6875L8.91406 2.31641Z"
                      fill="#39A759"
                  />
                </svg>
              </span>
                        <span>Close</span>
                    </a>
                </div>
                <hr/>
                <div class="notification__wrapper box-shadow p-16px">
                    <a href="javascript:;" class="p-8px align-self-end">
              <span class="p-4px">
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M9.43359 1.49609L6.15234 4.77734L9.40625 8.03125C9.67969 8.27734 9.67969 8.6875 9.40625 8.93359C9.16016 9.20703 8.75 9.20703 8.50391 8.93359L5.22266 5.67969L1.96875 8.93359C1.72266 9.20703 1.3125 9.20703 1.06641 8.93359C0.792969 8.6875 0.792969 8.27734 1.06641 8.00391L4.32031 4.75L1.06641 1.49609C0.792969 1.25 0.792969 0.839844 1.06641 0.566406C1.3125 0.320312 1.72266 0.320312 1.99609 0.566406L5.25 3.84766L8.50391 0.59375C8.75 0.320312 9.16016 0.320312 9.43359 0.59375C9.67969 0.839844 9.67969 1.25 9.43359 1.49609Z"
                      fill="#333333"
                  />
                </svg>
              </span>
                    </a>
                    <div class="notification">
                        <p class="notification__icon">
                            <svg width="13" height="15" viewBox="0 0 13 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6.625 0.75C7.08984 0.75 7.5 1.16016 7.5 1.625V2.17188C9.49609 2.55469 11 4.33203 11 6.4375V6.95703C11 8.24219 11.4648 9.5 12.3125 10.457L12.5039 10.6758C12.75 10.9492 12.8047 11.3047 12.668 11.6328C12.5312 11.9336 12.2031 12.125 11.875 12.125H1.375C1.01953 12.125 0.691406 11.9336 0.554688 11.6328C0.417969 11.3047 0.472656 10.9492 0.71875 10.6758L0.910156 10.457C1.75781 9.5 2.25 8.24219 2.25 6.95703V6.4375C2.25 4.33203 3.75391 2.55469 5.75 2.17188V1.625C5.75 1.16016 6.13281 0.75 6.625 0.75ZM7.85547 14.2578C7.52734 14.5859 7.08984 14.75 6.625 14.75C6.16016 14.75 5.69531 14.5859 5.36719 14.2578C5.03906 13.9297 4.875 13.4648 4.875 13H6.625H8.375C8.375 13.4648 8.18359 13.9297 7.85547 14.2578Z"
                                    fill="#CD3333"
                                />
                            </svg>
                        </p>
                        <div class="notification__content">
                            <p class="proscreen-red-text body-text fw-bold mb-0">Emergency assistance</p>
                            <p class="body-text-small mb-0"><strong>Group 4,</strong> Name, A</p>
                            <p class="body-text-small mb-0">11:48am</p>
                        </div>
                    </div>
                </div>
                <hr/>
            </div>

            <div class="col-sm-12">
                <div class="notification__wrapper box-shadow p-16px">
                    <div class="notification">
                        <p class="notification__icon">
                            <svg width="13" height="15" viewBox="0 0 13 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6.625 0.75C7.08984 0.75 7.5 1.16016 7.5 1.625V2.17188C9.49609 2.55469 11 4.33203 11 6.4375V6.95703C11 8.24219 11.4648 9.5 12.3125 10.457L12.5039 10.6758C12.75 10.9492 12.8047 11.3047 12.668 11.6328C12.5312 11.9336 12.2031 12.125 11.875 12.125H1.375C1.01953 12.125 0.691406 11.9336 0.554688 11.6328C0.417969 11.3047 0.472656 10.9492 0.71875 10.6758L0.910156 10.457C1.75781 9.5 2.25 8.24219 2.25 6.95703V6.4375C2.25 4.33203 3.75391 2.55469 5.75 2.17188V1.625C5.75 1.16016 6.13281 0.75 6.625 0.75ZM7.85547 14.2578C7.52734 14.5859 7.08984 14.75 6.625 14.75C6.16016 14.75 5.69531 14.5859 5.36719 14.2578C5.03906 13.9297 4.875 13.4648 4.875 13H6.625H8.375C8.375 13.4648 8.18359 13.9297 7.85547 14.2578Z"
                                    fill="#CD3333"
                                ></path>
                            </svg>
                        </p>
                        <div class="notification__content">
                            <p class="proscreen-black-4-text body-text mb-0"><strong>Hole 9</strong> Name, A</p>
                            <p class="body-text-small mb-0"><strong>Group 4,</strong> Name, A</p>
                            <p class="body-text-small mb-0">11:48am</p>
                        </div>
                        <p class="notification__close">
                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.93359 1.49609L5.65234 4.77734L8.90625 8.03125C9.17969 8.27734 9.17969 8.6875 8.90625 8.93359C8.66016 9.20703 8.25 9.20703 8.00391 8.93359L4.72266 5.67969L1.46875 8.93359C1.22266 9.20703 0.8125 9.20703 0.566406 8.93359C0.292969 8.6875 0.292969 8.27734 0.566406 8.00391L3.82031 4.75L0.566406 1.49609C0.292969 1.25 0.292969 0.839844 0.566406 0.566406C0.8125 0.320312 1.22266 0.320312 1.49609 0.566406L4.75 3.84766L8.00391 0.59375C8.25 0.320312 8.66016 0.320312 8.93359 0.59375C9.17969 0.839844 9.17969 1.25 8.93359 1.49609Z"
                                    fill="#727987"
                                ></path>
                            </svg>
                        </p>
                    </div>
                    <div class="notification">
                        <p class="notification__icon">
                            <svg width="16" height="13" viewBox="0 0 16 13" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8 0.625C8.38281 0.625 8.73828 0.84375 8.92969 1.17188L14.8359 11.2344C15.0273 11.5898 15.0273 12 14.8359 12.3281C14.6445 12.6836 14.2891 12.875 13.9062 12.875H2.09375C1.68359 12.875 1.32812 12.6836 1.13672 12.3281C0.945312 12 0.945312 11.5898 1.13672 11.2344L7.04297 1.17188C7.23438 0.84375 7.58984 0.625 8 0.625ZM8 4.125C7.61719 4.125 7.34375 4.42578 7.34375 4.78125V7.84375C7.34375 8.22656 7.61719 8.5 8 8.5C8.35547 8.5 8.65625 8.22656 8.65625 7.84375V4.78125C8.65625 4.42578 8.35547 4.125 8 4.125ZM8.875 10.25C8.875 9.78516 8.46484 9.375 8 9.375C7.50781 9.375 7.125 9.78516 7.125 10.25C7.125 10.7422 7.50781 11.125 8 11.125C8.46484 11.125 8.875 10.7422 8.875 10.25Z"
                                    fill="#CD3333"
                                ></path>
                            </svg>
                        </p>
                        <div class="notification__content">
                            <p class="proscreen-black-4-text body-text fw-bold mb-0">Hole 9</p>
                            <p class="body-text-small mb-0"><strong>Group 4,</strong> Name, A</p>
                            <p class="body-text-small mb-0">10:18am</p>
                        </div>
                        <p class="notification__close">
                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.93359 1.49609L5.65234 4.77734L8.90625 8.03125C9.17969 8.27734 9.17969 8.6875 8.90625 8.93359C8.66016 9.20703 8.25 9.20703 8.00391 8.93359L4.72266 5.67969L1.46875 8.93359C1.22266 9.20703 0.8125 9.20703 0.566406 8.93359C0.292969 8.6875 0.292969 8.27734 0.566406 8.00391L3.82031 4.75L0.566406 1.49609C0.292969 1.25 0.292969 0.839844 0.566406 0.566406C0.8125 0.320312 1.22266 0.320312 1.49609 0.566406L4.75 3.84766L8.00391 0.59375C8.25 0.320312 8.66016 0.320312 8.93359 0.59375C9.17969 0.839844 9.17969 1.25 8.93359 1.49609Z"
                                    fill="#727987"
                                ></path>
                            </svg>
                        </p>
                    </div>
                    <div class="notification">
                        <p class="notification__icon">
                            <svg width="16" height="13" viewBox="0 0 16 13" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8 0.625C8.38281 0.625 8.73828 0.84375 8.92969 1.17188L14.8359 11.2344C15.0273 11.5898 15.0273 12 14.8359 12.3281C14.6445 12.6836 14.2891 12.875 13.9062 12.875H2.09375C1.68359 12.875 1.32812 12.6836 1.13672 12.3281C0.945312 12 0.945312 11.5898 1.13672 11.2344L7.04297 1.17188C7.23438 0.84375 7.58984 0.625 8 0.625ZM8 4.125C7.61719 4.125 7.34375 4.42578 7.34375 4.78125V7.84375C7.34375 8.22656 7.61719 8.5 8 8.5C8.35547 8.5 8.65625 8.22656 8.65625 7.84375V4.78125C8.65625 4.42578 8.35547 4.125 8 4.125ZM8.875 10.25C8.875 9.78516 8.46484 9.375 8 9.375C7.50781 9.375 7.125 9.78516 7.125 10.25C7.125 10.7422 7.50781 11.125 8 11.125C8.46484 11.125 8.875 10.7422 8.875 10.25Z"
                                    fill="#CD3333"
                                ></path>
                            </svg>
                        </p>
                        <div class="notification__content">
                            <p class="proscreen-black-4-text body-text fw-bold mb-0">Hole 3</p>
                            <p class="body-text-small mb-0"><strong>Group 4,</strong> Name, A</p>
                            <p class="body-text-small mb-0">09:17am</p>
                        </div>
                        <p class="notification__close">
                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.93359 1.49609L5.65234 4.77734L8.90625 8.03125C9.17969 8.27734 9.17969 8.6875 8.90625 8.93359C8.66016 9.20703 8.25 9.20703 8.00391 8.93359L4.72266 5.67969L1.46875 8.93359C1.22266 9.20703 0.8125 9.20703 0.566406 8.93359C0.292969 8.6875 0.292969 8.27734 0.566406 8.00391L3.82031 4.75L0.566406 1.49609C0.292969 1.25 0.292969 0.839844 0.566406 0.566406C0.8125 0.320312 1.22266 0.320312 1.49609 0.566406L4.75 3.84766L8.00391 0.59375C8.25 0.320312 8.66016 0.320312 8.93359 0.59375C9.17969 0.839844 9.17969 1.25 8.93359 1.49609Z"
                                    fill="#727987"
                                ></path>
                            </svg>
                        </p>
                    </div>
                </div>
                <hr/>
            </div>

            <div class="col-sm-12">
                <h3>User Menu - Logout</h3>
                <ul class="user-menu p-24px list-unstyled box-shadow">
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                <span>
                  <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M13.8086 7.21484L10.3086 10.7148C10.0352 10.9883 9.625 10.9883 9.37891 10.7148C9.10547 10.4688 9.10547 10.0586 9.37891 9.78516L11.7578 7.40625H5.03125C4.64844 7.40625 4.375 7.13281 4.375 6.75C4.375 6.39453 4.64844 6.09375 5.03125 6.09375H11.7578L9.37891 3.71484C9.10547 3.46875 9.10547 3.05859 9.37891 2.78516C9.625 2.53906 10.0352 2.53906 10.3086 2.78516L13.8086 6.3125C14.0547 6.55859 14.0547 6.96875 13.8086 7.21484ZM4.59375 1.9375H2.40625C1.77734 1.9375 1.3125 2.42969 1.3125 3.03125V10.4688C1.3125 11.0977 1.77734 11.5625 2.40625 11.5625H4.59375C4.94922 11.5625 5.25 11.8633 5.25 12.2188C5.25 12.6016 4.94922 12.875 4.59375 12.875H2.40625C1.06641 12.875 0 11.8086 0 10.4688V3.03125C0 1.71875 1.06641 0.625 2.40625 0.625H4.59375C4.94922 0.625 5.25 0.925781 5.25 1.28125C5.25 1.66406 4.94922 1.9375 4.59375 1.9375Z"
                        fill="#B6B6BE"
                    />
                  </svg>
                </span>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
                <hr/>
                <h3>User Menu - Club users</h3>
                <ul class="user-menu p-24px list-unstyled box-shadow">
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                <span>
                  <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M1.98438 10.6211C2.09375 10.2383 2.3125 9.88281 2.58594 9.60938L10.8984 1.29688C11.582 0.613281 12.7031 0.613281 13.3867 1.29688L14.4531 2.36328C14.5352 2.44531 14.6172 2.55469 14.6719 2.63672C15.1367 3.32031 15.0547 4.25 14.4531 4.85156L6.14062 13.1641C6.11328 13.1914 6.05859 13.2188 6.03125 13.2734C5.75781 13.4922 5.45703 13.6562 5.12891 13.7656L2.99609 14.3945L1.82031 14.75C1.60156 14.8047 1.35547 14.75 1.19141 14.5586C1 14.3945 0.945312 14.1484 1.02734 13.9297L1.35547 12.7539L1.98438 10.6211ZM3.24219 11.0039L3.05078 11.6328L2.61328 13.1367L4.11719 12.6992L4.74609 12.5078C4.9375 12.4531 5.07422 12.3711 5.21094 12.2344L11.4727 5.97266L9.77734 4.27734L3.51562 10.5391C3.48828 10.5391 3.48828 10.5664 3.46094 10.5938C3.35156 10.7031 3.29688 10.8398 3.24219 11.0039Z"
                        fill="#B6B6BE"
                    />
                  </svg>
                </span>
                            <span>Edit</span>
                        </a>
                    </li>
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                            <svg width="18" height="15" viewBox="0 0 18 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M4.375 3.375C3.88281 3.375 3.47266 3.12891 3.22656 2.71875C2.98047 2.33594 2.98047 1.81641 3.22656 1.40625C3.47266 1.02344 3.88281 0.75 4.375 0.75C4.83984 0.75 5.25 1.02344 5.49609 1.40625C5.74219 1.81641 5.74219 2.33594 5.49609 2.71875C5.25 3.12891 4.83984 3.375 4.375 3.375ZM3.99219 5.5625C3.96484 5.5625 3.9375 5.58984 3.9375 5.58984V9.0625H4.8125V5.58984C4.78516 5.5625 4.75781 5.5625 4.73047 5.5625H3.99219ZM3.9375 14.0938C3.9375 14.4766 3.63672 14.75 3.28125 14.75C2.89844 14.75 2.625 14.4766 2.625 14.0938V6.875L1.42188 8.95312C1.25781 9.28125 0.847656 9.39062 0.546875 9.19922C0.21875 9.03516 0.109375 8.625 0.300781 8.32422L1.88672 5.48047C2.32422 4.74219 3.11719 4.25 3.99219 4.25H4.73047C5.60547 4.25 6.39844 4.74219 6.83594 5.48047L8.42188 8.32422C8.61328 8.625 8.50391 9.03516 8.17578 9.19922C7.875 9.39062 7.46484 9.28125 7.30078 8.95312L6.125 6.875V14.0938C6.125 14.4766 5.82422 14.75 5.46875 14.75C5.08594 14.75 4.8125 14.4766 4.8125 14.0938V10.375H3.9375V14.0938ZM13.125 3.375C12.6328 3.375 12.2227 3.12891 11.9766 2.71875C11.7305 2.33594 11.7305 1.81641 11.9766 1.40625C12.2227 1.02344 12.6328 0.75 13.125 0.75C13.5898 0.75 14 1.02344 14.2461 1.40625C14.4922 1.81641 14.4922 2.33594 14.2461 2.71875C14 3.12891 13.5898 3.375 13.125 3.375ZM12.7422 5.5625C12.7148 5.5625 12.6875 5.58984 12.6875 5.58984V9.0625H13.5625V5.58984C13.5352 5.5625 13.5078 5.5625 13.4805 5.5625H12.7422ZM12.6875 14.0938C12.6875 14.4766 12.3867 14.75 12.0312 14.75C11.6484 14.75 11.375 14.4766 11.375 14.0938V6.875L10.1719 8.95312C10.0078 9.28125 9.59766 9.39062 9.29688 9.19922C8.96875 9.03516 8.85938 8.625 9.05078 8.32422L10.6367 5.48047C11.0742 4.74219 11.8672 4.25 12.7422 4.25H13.4805C14.3555 4.25 15.1484 4.74219 15.5859 5.48047L17.1719 8.32422C17.3633 8.625 17.2539 9.03516 16.9258 9.19922C16.625 9.39062 16.2148 9.28125 16.0508 8.95312L14.875 6.875V14.0938C14.875 14.4766 14.5742 14.75 14.2188 14.75C13.8359 14.75 13.5625 14.4766 13.5625 14.0938V10.375H12.6875V14.0938Z"
                                    fill="#B6B6BE"
                                />
                            </svg>
                            <span>Impersonate</span>
                        </a>
                    </li>
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                            <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M5.6875 5.5625C5.6875 5.86328 5.71484 6.13672 5.76953 6.41016C5.82422 6.62891 5.76953 6.84766 5.60547 7.01172L1.3125 11.3047V13.4375H3.0625V12.3438C3.0625 11.9883 3.33594 11.6875 3.71875 11.6875H4.8125V10.5938C4.8125 10.2383 5.08594 9.9375 5.46875 9.9375H6.94531L7.73828 9.14453C7.90234 8.98047 8.12109 8.92578 8.33984 8.98047C8.61328 9.03516 8.88672 9.0625 9.1875 9.0625C11.1016 9.0625 12.6875 7.50391 12.6875 5.5625C12.6875 3.64844 11.1016 2.0625 9.1875 2.0625C7.24609 2.0625 5.6875 3.64844 5.6875 5.5625ZM9.1875 0.75C11.8398 0.75 14 2.91016 14 5.5625C14 8.24219 11.8398 10.375 9.1875 10.375C8.91406 10.375 8.66797 10.375 8.42188 10.3203L7.68359 11.0586C7.54688 11.1953 7.38281 11.25 7.21875 11.25H6.125V12.3438C6.125 12.7266 5.82422 13 5.46875 13H4.375V14.0938C4.375 14.4766 4.07422 14.75 3.71875 14.75H0.65625C0.273438 14.75 0 14.4766 0 14.0938V11.0312C0 10.8672 0.0546875 10.7031 0.191406 10.5664L4.42969 6.32812C4.375 6.08203 4.375 5.83594 4.375 5.5625C4.375 2.91016 6.50781 0.75 9.1875 0.75ZM10.0625 5.5625C9.57031 5.5625 9.1875 5.17969 9.1875 4.6875C9.1875 4.22266 9.57031 3.8125 10.0625 3.8125C10.5273 3.8125 10.9375 4.22266 10.9375 4.6875C10.9375 5.17969 10.5273 5.5625 10.0625 5.5625Z"
                                    fill="#B6B6BE"
                                />
                            </svg>
                            <span>Reset password</span>
                        </a>
                    </li>
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                            <svg width="14" height="16" viewBox="0 0 14 16" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M10.5273 12.2344L2.51562 4.22266C1.75 5.20703 1.3125 6.4375 1.3125 7.75C1.3125 10.8945 3.85547 13.4375 7 13.4375C8.3125 13.4375 9.54297 13 10.5273 12.2344ZM11.457 11.3047C12.2227 10.3203 12.6875 9.08984 12.6875 7.75C12.6875 4.63281 10.1172 2.0625 7 2.0625C5.66016 2.0625 4.42969 2.52734 3.44531 3.29297L11.457 11.3047ZM0 7.75C0 5.26172 1.3125 2.96484 3.5 1.70703C5.66016 0.449219 8.3125 0.449219 10.5 1.70703C12.6602 2.96484 14 5.26172 14 7.75C14 10.2656 12.6602 12.5625 10.5 13.8203C8.3125 15.0781 5.66016 15.0781 3.5 13.8203C1.3125 12.5625 0 10.2656 0 7.75Z"
                                    fill="#B6B6BE"
                                />
                            </svg>
                            <span>Deactivate</span>
                        </a>
                    </li>
                </ul>
                <hr/>
                <h3>User Menu - Proscreen users</h3>
                <ul class="user-menu p-24px list-unstyled box-shadow">
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                <span>
                  <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M1.98438 10.6211C2.09375 10.2383 2.3125 9.88281 2.58594 9.60938L10.8984 1.29688C11.582 0.613281 12.7031 0.613281 13.3867 1.29688L14.4531 2.36328C14.5352 2.44531 14.6172 2.55469 14.6719 2.63672C15.1367 3.32031 15.0547 4.25 14.4531 4.85156L6.14062 13.1641C6.11328 13.1914 6.05859 13.2188 6.03125 13.2734C5.75781 13.4922 5.45703 13.6562 5.12891 13.7656L2.99609 14.3945L1.82031 14.75C1.60156 14.8047 1.35547 14.75 1.19141 14.5586C1 14.3945 0.945312 14.1484 1.02734 13.9297L1.35547 12.7539L1.98438 10.6211ZM3.24219 11.0039L3.05078 11.6328L2.61328 13.1367L4.11719 12.6992L4.74609 12.5078C4.9375 12.4531 5.07422 12.3711 5.21094 12.2344L11.4727 5.97266L9.77734 4.27734L3.51562 10.5391C3.48828 10.5391 3.48828 10.5664 3.46094 10.5938C3.35156 10.7031 3.29688 10.8398 3.24219 11.0039Z"
                        fill="#B6B6BE"
                    />
                  </svg>
                </span>
                            <span>Edit</span>
                        </a>
                    </li>
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                            <svg width="14" height="15" viewBox="0 0 14 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M5.6875 5.5625C5.6875 5.86328 5.71484 6.13672 5.76953 6.41016C5.82422 6.62891 5.76953 6.84766 5.60547 7.01172L1.3125 11.3047V13.4375H3.0625V12.3438C3.0625 11.9883 3.33594 11.6875 3.71875 11.6875H4.8125V10.5938C4.8125 10.2383 5.08594 9.9375 5.46875 9.9375H6.94531L7.73828 9.14453C7.90234 8.98047 8.12109 8.92578 8.33984 8.98047C8.61328 9.03516 8.88672 9.0625 9.1875 9.0625C11.1016 9.0625 12.6875 7.50391 12.6875 5.5625C12.6875 3.64844 11.1016 2.0625 9.1875 2.0625C7.24609 2.0625 5.6875 3.64844 5.6875 5.5625ZM9.1875 0.75C11.8398 0.75 14 2.91016 14 5.5625C14 8.24219 11.8398 10.375 9.1875 10.375C8.91406 10.375 8.66797 10.375 8.42188 10.3203L7.68359 11.0586C7.54688 11.1953 7.38281 11.25 7.21875 11.25H6.125V12.3438C6.125 12.7266 5.82422 13 5.46875 13H4.375V14.0938C4.375 14.4766 4.07422 14.75 3.71875 14.75H0.65625C0.273438 14.75 0 14.4766 0 14.0938V11.0312C0 10.8672 0.0546875 10.7031 0.191406 10.5664L4.42969 6.32812C4.375 6.08203 4.375 5.83594 4.375 5.5625C4.375 2.91016 6.50781 0.75 9.1875 0.75ZM10.0625 5.5625C9.57031 5.5625 9.1875 5.17969 9.1875 4.6875C9.1875 4.22266 9.57031 3.8125 10.0625 3.8125C10.5273 3.8125 10.9375 4.22266 10.9375 4.6875C10.9375 5.17969 10.5273 5.5625 10.0625 5.5625Z"
                                    fill="#B6B6BE"
                                />
                            </svg>
                            <span>Reset password</span>
                        </a>
                    </li>
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                            <svg width="14" height="16" viewBox="0 0 14 16" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M10.5273 12.2344L2.51562 4.22266C1.75 5.20703 1.3125 6.4375 1.3125 7.75C1.3125 10.8945 3.85547 13.4375 7 13.4375C8.3125 13.4375 9.54297 13 10.5273 12.2344ZM11.457 11.3047C12.2227 10.3203 12.6875 9.08984 12.6875 7.75C12.6875 4.63281 10.1172 2.0625 7 2.0625C5.66016 2.0625 4.42969 2.52734 3.44531 3.29297L11.457 11.3047ZM0 7.75C0 5.26172 1.3125 2.96484 3.5 1.70703C5.66016 0.449219 8.3125 0.449219 10.5 1.70703C12.6602 2.96484 14 5.26172 14 7.75C14 10.2656 12.6602 12.5625 10.5 13.8203C8.3125 15.0781 5.66016 15.0781 3.5 13.8203C1.3125 12.5625 0 10.2656 0 7.75Z"
                                    fill="#B6B6BE"
                                />
                            </svg>
                            <span>Deactivate</span>
                        </a>
                    </li>
                </ul>
                <hr/>
                <h3>User Menu - Club Menu</h3>
                <ul class="user-menu p-24px list-unstyled box-shadow">
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                <span>
                  <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M1.98438 10.6211C2.09375 10.2383 2.3125 9.88281 2.58594 9.60938L10.8984 1.29688C11.582 0.613281 12.7031 0.613281 13.3867 1.29688L14.4531 2.36328C14.5352 2.44531 14.6172 2.55469 14.6719 2.63672C15.1367 3.32031 15.0547 4.25 14.4531 4.85156L6.14062 13.1641C6.11328 13.1914 6.05859 13.2188 6.03125 13.2734C5.75781 13.4922 5.45703 13.6562 5.12891 13.7656L2.99609 14.3945L1.82031 14.75C1.60156 14.8047 1.35547 14.75 1.19141 14.5586C1 14.3945 0.945312 14.1484 1.02734 13.9297L1.35547 12.7539L1.98438 10.6211ZM3.24219 11.0039L3.05078 11.6328L2.61328 13.1367L4.11719 12.6992L4.74609 12.5078C4.9375 12.4531 5.07422 12.3711 5.21094 12.2344L11.4727 5.97266L9.77734 4.27734L3.51562 10.5391C3.48828 10.5391 3.48828 10.5664 3.46094 10.5938C3.35156 10.7031 3.29688 10.8398 3.24219 11.0039Z"
                        fill="#B6B6BE"
                    />
                  </svg>
                </span>
                            <span>Edit</span>
                        </a>
                    </li>
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                            <svg width="18" height="15" viewBox="0 0 18 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M4.375 3.375C3.88281 3.375 3.47266 3.12891 3.22656 2.71875C2.98047 2.33594 2.98047 1.81641 3.22656 1.40625C3.47266 1.02344 3.88281 0.75 4.375 0.75C4.83984 0.75 5.25 1.02344 5.49609 1.40625C5.74219 1.81641 5.74219 2.33594 5.49609 2.71875C5.25 3.12891 4.83984 3.375 4.375 3.375ZM3.99219 5.5625C3.96484 5.5625 3.9375 5.58984 3.9375 5.58984V9.0625H4.8125V5.58984C4.78516 5.5625 4.75781 5.5625 4.73047 5.5625H3.99219ZM3.9375 14.0938C3.9375 14.4766 3.63672 14.75 3.28125 14.75C2.89844 14.75 2.625 14.4766 2.625 14.0938V6.875L1.42188 8.95312C1.25781 9.28125 0.847656 9.39062 0.546875 9.19922C0.21875 9.03516 0.109375 8.625 0.300781 8.32422L1.88672 5.48047C2.32422 4.74219 3.11719 4.25 3.99219 4.25H4.73047C5.60547 4.25 6.39844 4.74219 6.83594 5.48047L8.42188 8.32422C8.61328 8.625 8.50391 9.03516 8.17578 9.19922C7.875 9.39062 7.46484 9.28125 7.30078 8.95312L6.125 6.875V14.0938C6.125 14.4766 5.82422 14.75 5.46875 14.75C5.08594 14.75 4.8125 14.4766 4.8125 14.0938V10.375H3.9375V14.0938ZM13.125 3.375C12.6328 3.375 12.2227 3.12891 11.9766 2.71875C11.7305 2.33594 11.7305 1.81641 11.9766 1.40625C12.2227 1.02344 12.6328 0.75 13.125 0.75C13.5898 0.75 14 1.02344 14.2461 1.40625C14.4922 1.81641 14.4922 2.33594 14.2461 2.71875C14 3.12891 13.5898 3.375 13.125 3.375ZM12.7422 5.5625C12.7148 5.5625 12.6875 5.58984 12.6875 5.58984V9.0625H13.5625V5.58984C13.5352 5.5625 13.5078 5.5625 13.4805 5.5625H12.7422ZM12.6875 14.0938C12.6875 14.4766 12.3867 14.75 12.0312 14.75C11.6484 14.75 11.375 14.4766 11.375 14.0938V6.875L10.1719 8.95312C10.0078 9.28125 9.59766 9.39062 9.29688 9.19922C8.96875 9.03516 8.85938 8.625 9.05078 8.32422L10.6367 5.48047C11.0742 4.74219 11.8672 4.25 12.7422 4.25H13.4805C14.3555 4.25 15.1484 4.74219 15.5859 5.48047L17.1719 8.32422C17.3633 8.625 17.2539 9.03516 16.9258 9.19922C16.625 9.39062 16.2148 9.28125 16.0508 8.95312L14.875 6.875V14.0938C14.875 14.4766 14.5742 14.75 14.2188 14.75C13.8359 14.75 13.5625 14.4766 13.5625 14.0938V10.375H12.6875V14.0938Z"
                                    fill="#B6B6BE"
                                />
                            </svg>
                            <span>Impersonate</span>
                        </a>
                    </li>
                    <li class="user-menu__item">
                        <a href="javascript:;" class="user-menu__link body-text-small">
                            <svg width="14" height="16" viewBox="0 0 14 16" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M10.5273 12.2344L2.51562 4.22266C1.75 5.20703 1.3125 6.4375 1.3125 7.75C1.3125 10.8945 3.85547 13.4375 7 13.4375C8.3125 13.4375 9.54297 13 10.5273 12.2344ZM11.457 11.3047C12.2227 10.3203 12.6875 9.08984 12.6875 7.75C12.6875 4.63281 10.1172 2.0625 7 2.0625C5.66016 2.0625 4.42969 2.52734 3.44531 3.29297L11.457 11.3047ZM0 7.75C0 5.26172 1.3125 2.96484 3.5 1.70703C5.66016 0.449219 8.3125 0.449219 10.5 1.70703C12.6602 2.96484 14 5.26172 14 7.75C14 10.2656 12.6602 12.5625 10.5 13.8203C8.3125 15.0781 5.66016 15.0781 3.5 13.8203C1.3125 12.5625 0 10.2656 0 7.75Z"
                                    fill="#B6B6BE"
                                />
                            </svg>
                            <span>Deactivate</span>
                        </a>
                    </li>
                </ul>
                <hr/>
            </div>

            <div class="col-sm-12">
                <h3>Tooltip</h3>
                <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Group Number">Hover over me</a><br/>
                <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Very Long Name, A..">Hover over
                    me</a>
                <hr/>
            </div>

            <div class="col-sm-12">
                <h3>Pagination</h3>
                <div class="proscreen-pagination p-16px d-flex justify-content-between">
                    <div class="proscreen-pagination__left">
              <span class="proscreen-pagination__btn">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M1.06641 6.24219C0.929688 6.10547 0.875 5.94141 0.875 5.75C0.875 5.58594 0.929688 5.42188 1.06641 5.28516L5.87891 0.691406C6.15234 0.445312 6.5625 0.445312 6.80859 0.71875C7.05469 0.964844 7.05469 1.40234 6.78125 1.64844L3.14453 5.09375H12.4688C12.8242 5.09375 13.125 5.39453 13.125 5.75C13.125 6.13281 12.8242 6.40625 12.4688 6.40625H3.14453L6.78125 9.87891C7.05469 10.125 7.05469 10.5352 6.80859 10.8086C6.5625 11.082 6.15234 11.082 5.87891 10.8359L1.06641 6.24219Z"
                      fill="white"
                  />
                </svg>
              </span>
                        <span class="button-text">Previous</span>
                    </div>
                    <div class="proscreen-pagination__middle d-flex align-items-center justify-content-center gap-2">
                        <span class="proscreen-pagination__btn-text active body-text-small fw-bold">1</span>
                        <span class="proscreen-pagination__btn-text body-text-small fw-bold">2</span>
                        <span class="body-text-small fw-bold">
                <svg width="12" height="3" viewBox="0 0 12 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M1.82344 2.192C1.55677 2.192 1.32744 2.10133 1.13544 1.92C0.954104 1.728 0.863438 1.488 0.863438 1.2C0.863438 0.890667 0.954104 0.645333 1.13544 0.464C1.32744 0.272 1.55677 0.176 1.82344 0.176C2.07944 0.176 2.2981 0.272 2.47944 0.464C2.67144 0.645333 2.76744 0.890667 2.76744 1.2C2.76744 1.488 2.67144 1.728 2.47944 1.92C2.2981 2.10133 2.07944 2.192 1.82344 2.192ZM6.00781 2.192C5.74115 2.192 5.51181 2.10133 5.31981 1.92C5.13848 1.728 5.04781 1.488 5.04781 1.2C5.04781 0.890667 5.13848 0.645333 5.31981 0.464C5.51181 0.272 5.74115 0.176 6.00781 0.176C6.26381 0.176 6.48248 0.272 6.66381 0.464C6.85581 0.645333 6.95181 0.890667 6.95181 1.2C6.95181 1.488 6.85581 1.728 6.66381 1.92C6.48248 2.10133 6.26381 2.192 6.00781 2.192ZM10.1922 2.192C9.92552 2.192 9.69619 2.10133 9.50419 1.92C9.32285 1.728 9.23219 1.488 9.23219 1.2C9.23219 0.890667 9.32285 0.645333 9.50419 0.464C9.69619 0.272 9.92552 0.176 10.1922 0.176C10.4482 0.176 10.6669 0.272 10.8482 0.464C11.0402 0.645333 11.1362 0.890667 11.1362 1.2C11.1362 1.488 11.0402 1.728 10.8482 1.92C10.6669 2.10133 10.4482 2.192 10.1922 2.192Z"
                      fill="#12202C"
                  ></path>
                </svg>
              </span>
                        <span class="proscreen-pagination__btn-text body-text-small fw-bold">5</span>
                        <span class="proscreen-pagination__btn-text body-text-small fw-bold">6</span>
                    </div>
                    <div class="proscreen-pagination__right">
                        <span class="button-text">Next</span>
                        <span class="proscreen-pagination__btn">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M12.9062 6.24219L8.09375 10.8359C7.82031 11.082 7.41016 11.082 7.16406 10.8086C6.91797 10.5352 6.91797 10.125 7.19141 9.87891L10.8281 6.40625H1.53125C1.14844 6.40625 0.875 6.13281 0.875 5.75C0.875 5.39453 1.14844 5.09375 1.53125 5.09375H10.8281L7.19141 1.64844C6.91797 1.40234 6.91797 0.964844 7.16406 0.71875C7.41016 0.445312 7.84766 0.445312 8.09375 0.691406L12.9062 5.28516C13.043 5.42188 13.125 5.58594 13.125 5.75C13.125 5.94141 13.043 6.10547 12.9062 6.24219Z"
                      fill="white"
                  />
                </svg>
              </span>
                    </div>
                </div>
                <hr/>
            </div>

            <div class="col-sm-12">
                <h3>Primary Card</h3>
                <div class="primary-card">
                    <div class="d-flex align-items-center justify-content-between w-100">
                        <p class="body-text text-white d-flex mb-0 gap-2">
                            <span class="fw-bold">Current members </span>
                            <span> .avg</span>
                        </p>
                        <p class="primary-card__icon mb-0">
                            <svg width="13" height="15" viewBox="0 0 13 15" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M8.8125 4.25C8.8125 3.48438 8.375 2.77344 7.71875 2.36328C7.03516 1.98047 6.1875 1.98047 5.53125 2.36328C4.84766 2.77344 4.4375 3.48438 4.4375 4.25C4.4375 5.04297 4.84766 5.75391 5.53125 6.16406C6.1875 6.54688 7.03516 6.54688 7.71875 6.16406C8.375 5.75391 8.8125 5.04297 8.8125 4.25ZM3.125 4.25C3.125 3.01953 3.78125 1.87109 4.875 1.24219C5.94141 0.613281 7.28125 0.613281 8.375 1.24219C9.44141 1.87109 10.125 3.01953 10.125 4.25C10.125 5.50781 9.44141 6.65625 8.375 7.28516C7.28125 7.91406 5.94141 7.91406 4.875 7.28516C3.78125 6.65625 3.125 5.50781 3.125 4.25ZM2.27734 13.4375H10.9727L10.0156 10.375H3.20703L2.27734 13.4375ZM2.25 9.0625H11L12.3398 13.4375L12.75 14.75H11.3555H1.86719H0.5L0.882812 13.4375L2.25 9.0625Z"
                                    fill="white"
                                />
                            </svg>
                        </p>
                    </div>
                    <div class="d-flex align-items-center justify-content-between w-100">
                        <p class="text-white h1 mb-0">189</p>
                        <p class="text-white mb-0 d-flex align-items-center gap-2">
                <span>
                  <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M3.5 0.75H8.75V1.625H6.5625V3.40234C7.90234 3.51172 9.13281 4.08594 10.0352 4.96094L11.0469 3.94922L11.375 3.64844L11.9766 4.25L11.6758 4.57812L10.6367 5.61719C11.375 6.57422 11.8125 7.77734 11.8125 9.0625C11.8125 12.207 9.24219 14.75 6.125 14.75C2.98047 14.75 0.4375 12.207 0.4375 9.0625C0.4375 6.08203 2.73438 3.62109 5.6875 3.40234V1.625H3.5V0.75ZM1.3125 9.0625C1.3125 10.7852 2.21484 12.3711 3.71875 13.2461C5.19531 14.0938 7.02734 14.0938 8.53125 13.2461C10.0078 12.3711 10.9375 10.7852 10.9375 9.0625C10.9375 7.36719 10.0078 5.78125 8.53125 4.90625C7.02734 4.05859 5.19531 4.05859 3.71875 4.90625C2.21484 5.78125 1.3125 7.36719 1.3125 9.0625ZM6.5625 6.4375V9.5V9.9375H5.6875V9.5V6.4375V6H6.5625V6.4375Z"
                        fill="white"
                    />
                  </svg>
                </span>
                            <span class="body-text">20:39</span>
                        </p>
                    </div>
                </div>
                <hr/>
            </div>

            <div class="col-sm-12">
                <h3>Proscreen Table</h3>
                <div class="proscreen-table p-24px gap-24px">
                    <div class="d-flex align-items-center justify-content-between">
                        <p class="body-text fw-bold mb-0">Fastest holes</p>
                        <span class="pro-circle">
                <svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M5.28516 12.3828L1.07422 8.19922L0.609375 7.73438L1.53906 6.80469L2.00391 7.26953L5.09375 10.332V1.28125V0.625H6.40625V1.28125V10.332L9.46875 7.26953L9.93359 6.80469L10.8633 7.73438L10.3984 8.19922L6.21484 12.3828L5.75 12.8477L5.28516 12.3828Z"
                      fill="#39A759"
                  />
                </svg>
              </span>
                    </div>
                    <div class="proscreen-table__content d-flex flex-column gap-2">
                        <div class="proscreen-table__content-header body-text-small proscreen-black-3-text">
                            <span class="hole">Hole</span>
                            <p class="avg mb-0 d-flex gap-1 align-items-center">
                  <span>
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                          d="M3.5 0.75H8.75V1.625H6.5625V3.40234C7.90234 3.51172 9.13281 4.08594 10.0352 4.96094L11.0469 3.94922L11.375 3.64844L11.9766 4.25L11.6758 4.57812L10.6367 5.61719C11.375 6.57422 11.8125 7.77734 11.8125 9.0625C11.8125 12.207 9.24219 14.75 6.125 14.75C2.98047 14.75 0.4375 12.207 0.4375 9.0625C0.4375 6.08203 2.73438 3.62109 5.6875 3.40234V1.625H3.5V0.75ZM1.3125 9.0625C1.3125 10.7852 2.21484 12.3711 3.71875 13.2461C5.19531 14.0938 7.02734 14.0938 8.53125 13.2461C10.0078 12.3711 10.9375 10.7852 10.9375 9.0625C10.9375 7.36719 10.0078 5.78125 8.53125 4.90625C7.02734 4.05859 5.19531 4.05859 3.71875 4.90625C2.21484 5.78125 1.3125 7.36719 1.3125 9.0625ZM6.5625 6.4375V9.5V9.9375H5.6875V9.5V6.4375V6H6.5625V6.4375Z"
                          fill="#727987"
                      />
                    </svg>
                  </span>
                                <span>.avg</span>
                            </p>
                            <span class="member">Member</span>
                        </div>
                        <div
                            class="proscreen-table__content-row body-text-small proscreen-bg-dark proscreen-black-4-text">
                            <span class="pro-circle text-white proscreen-bg-green"> 1 </span>
                            <p class="avg mb-0">
                                <span>10:23</span>
                            </p>
                            <span class="member">Name, A</span>
                        </div>
                        <div
                            class="proscreen-table__content-row body-text-small proscreen-bg-light proscreen-black-4-text">
                            <span class="pro-circle text-white proscreen-bg-green"> 5 </span>
                            <p class="avg mb-0">
                                <span>11:23</span>
                            </p>
                            <span class="member">Very Long Name goes here</span>
                        </div>
                        <div
                            class="proscreen-table__content-row body-text-small proscreen-bg-dark proscreen-black-4-text">
                            <span class="pro-circle text-white proscreen-bg-green"> 4 </span>
                            <p class="avg mb-0">
                                <span>12:23</span>
                            </p>
                            <span class="member">Name, A </span>
                        </div>
                        <div
                            class="proscreen-table__content-row body-text-small proscreen-bg-light proscreen-black-4-text">
                            <span class="pro-circle text-white proscreen-bg-green"> 5 </span>
                            <p class="avg mb-0">
                                <span>15:23</span>
                            </p>
                            <span class="member">Name, A</span>
                        </div>
                    </div>
                </div>
                <hr/>
                <h3>Proscreen Table - Current players</h3>
                <div class="proscreen-table current-players-tbl p-24px gap-24px">
                    <div class="d-flex align-items-center gap-4">
              <span class="pro-circle">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M13.8906 2.03516L7.76562 14.2852C7.60156 14.5859 7.30078 14.7773 6.97266 14.75H0.875C0.382812 14.75 0 14.3672 0 13.875V13.6562H1.3125C1.53125 13.6562 1.75 13.4648 1.75 13.2188C1.75 13 1.53125 12.7812 1.3125 12.7812H0V11.9062H1.3125C1.53125 11.9062 1.75 11.7148 1.75 11.4688C1.75 11.25 1.53125 11.0312 1.3125 11.0312H0V10.293C0 9.69141 0.574219 9.28125 1.14844 9.44531L7.21875 11.4688V11.4961L12.332 1.24219C12.5508 0.804688 13.0703 0.640625 13.5078 0.859375C13.9453 1.07812 14.1094 1.59766 13.8906 2.03516Z"
                      fill="#39A759"
                  />
                </svg>
              </span>
                        <p class="body-text fw-bold mb-0">Current players</p>
                    </div>
                    <div class="proscreen-table__content d-flex flex-column gap-2">
                        <div class="proscreen-table__content-header body-text-small proscreen-black-3-text">
                            <span class="hole">Hole</span>
                            <span class="member">Member</span>
                            <span class="size">Size</span>
                            <span>Group</span>
                        </div>
                        <div class="proscreen-table__content-body d-flex flex-column gap-2">
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 1 </span>
                                <span class="member">Name, A</span>
                                <span class="size">4</span>
                                <span class="pro-circle"> 1 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 2 </span>
                                <span class="member">Name, A</span>
                                <span class="size">1</span>
                                <span class="pro-circle"> 2 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 3 </span>
                                <span class="member">Name, A</span>
                                <span class="size">4</span>
                                <span class="pro-circle"> 3 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 4 </span>
                                <span class="member">Name, A</span>
                                <span class="size">3</span>
                                <span class="pro-circle"> 4</span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 5 </span>
                                <span class="member">Name, A</span>
                                <span class="size">2</span>
                                <span class="pro-circle"> 5 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 6 </span>
                                <span class="member">Name, A</span>
                                <span class="size">3</span>
                                <span class="pro-circle"> 6</span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 7 </span>
                                <span class="member">Name, A</span>
                                <span class="size">2</span>
                                <span class="pro-circle"> 7 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 8 </span>
                                <span class="member">Name, A</span>
                                <span class="size">3</span>
                                <span class="pro-circle"> 8 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 9 </span>
                                <span class="member">Name, A</span>
                                <span class="size">2</span>
                                <span class="pro-circle"> 9 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 10 </span>
                                <span class="member">Name, A</span>
                                <span class="size">3</span>
                                <span class="pro-circle"> 10 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="pro-circle text-white proscreen-bg-blue"> 11 </span>
                                <span class="member">Name, A</span>
                                <span class="size">2</span>
                                <span class="pro-circle"> 11 </span>
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="proscreen-table p-24px gap-24px">
                    <div class="d-flex align-items-center gap-4">
              <span class="pro-circle">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M13.8906 2.03516L7.76562 14.2852C7.60156 14.5859 7.30078 14.7773 6.97266 14.75H0.875C0.382812 14.75 0 14.3672 0 13.875V13.6562H1.3125C1.53125 13.6562 1.75 13.4648 1.75 13.2188C1.75 13 1.53125 12.7812 1.3125 12.7812H0V11.9062H1.3125C1.53125 11.9062 1.75 11.7148 1.75 11.4688C1.75 11.25 1.53125 11.0312 1.3125 11.0312H0V10.293C0 9.69141 0.574219 9.28125 1.14844 9.44531L7.21875 11.4688V11.4961L12.332 1.24219C12.5508 0.804688 13.0703 0.640625 13.5078 0.859375C13.9453 1.07812 14.1094 1.59766 13.8906 2.03516Z"
                      fill="#39A759"
                  ></path>
                </svg>
              </span>
                        <p class="body-text fw-bold mb-0">Current players</p>
                    </div>
                    <div class="proscreen-table__content d-flex flex-column gap-2">
                        <div
                            class="proscreen-table__content-header justify-content-between body-text-small proscreen-black-3-text">
                            <span class="size">Size</span>
                            <span class="py-2 px-3">
                  <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M2.875 4.25C2.875 3.01953 3.53125 1.87109 4.625 1.24219C5.69141 0.613281 7.03125 0.613281 8.125 1.24219C9.19141 1.87109 9.875 3.01953 9.875 4.25C9.875 5.50781 9.19141 6.65625 8.125 7.28516C7.03125 7.91406 5.69141 7.91406 4.625 7.28516C3.53125 6.65625 2.875 5.50781 2.875 4.25ZM0.25 13.957C0.25 11.25 2.41016 9.0625 5.11719 9.0625H7.60547C10.3125 9.0625 12.5 11.25 12.5 13.957C12.5 14.3945 12.1172 14.75 11.6797 14.75H1.04297C0.605469 14.75 0.25 14.3945 0.25 13.957ZM16.9023 14.75H13.1289C13.2656 14.5039 13.375 14.2031 13.375 13.875V13.6562C13.375 12.0156 12.6094 10.5117 11.4609 9.52734C11.5156 9.52734 11.5703 9.5 11.6523 9.5H13.3203C15.7539 9.5 17.75 11.4961 17.75 13.9297C17.75 14.3945 17.3672 14.75 16.9023 14.75ZM12.0625 7.75C11.2148 7.75 10.4492 7.42188 9.875 6.875C10.4219 6.13672 10.75 5.23438 10.75 4.25C10.75 3.53906 10.5586 2.82812 10.2305 2.22656C10.75 1.87109 11.3789 1.625 12.0625 1.625C13.7305 1.625 15.125 3.01953 15.125 4.6875C15.125 6.38281 13.7305 7.75 12.0625 7.75Z"
                        fill="#727987"
                    ></path>
                  </svg>
                </span>
                        </div>
                        <div class="proscreen-table__content-body d-flex flex-column gap-2">
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="size">4</span>
                                <span class="pro-circle"> 1 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="size">1</span>
                                <span class="pro-circle"> 2</span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="size">4</span>
                                <span class="pro-circle"> 3 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="size">3</span>
                                <span class="pro-circle">4</span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="size">4</span>
                                <span class="pro-circle"> 5 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="size">3</span>
                                <span class="pro-circle">6</span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="size">2</span>
                                <span class="pro-circle"> 7 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="size">3</span>
                                <span class="pro-circle">8</span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-3-text">
                                <span class="size">2</span>
                                <span class="pro-circle"> 9 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-3-text">
                                <span class="size">3</span>
                                <span class="pro-circle">10</span>
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="proscreen-table p-24px gap-24px">
                    <div class="d-flex align-items-center gap-4">
              <span class="pro-circle">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M13.8906 2.03516L7.76562 14.2852C7.60156 14.5859 7.30078 14.7773 6.97266 14.75H0.875C0.382812 14.75 0 14.3672 0 13.875V13.6562H1.3125C1.53125 13.6562 1.75 13.4648 1.75 13.2188C1.75 13 1.53125 12.7812 1.3125 12.7812H0V11.9062H1.3125C1.53125 11.9062 1.75 11.7148 1.75 11.4688C1.75 11.25 1.53125 11.0312 1.3125 11.0312H0V10.293C0 9.69141 0.574219 9.28125 1.14844 9.44531L7.21875 11.4688V11.4961L12.332 1.24219C12.5508 0.804688 13.0703 0.640625 13.5078 0.859375C13.9453 1.07812 14.1094 1.59766 13.8906 2.03516Z"
                      fill="#39A759"
                  ></path>
                </svg>
              </span>
                        <p class="body-text fw-bold mb-0">Current players</p>
                        <p class="button-text fw-bold mb-0 ms-auto d-flex align-items-center gap-2 cursor-pointer"
                           id="current-player-hide-show">
                <span class="icon-close">
                  <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M0.75 0.734375L14.6953 11.6797L15 11.9141L14.5312 12.5234L14.2266 12.2891L0.28125 1.34375L0 1.10938L0.445312 0.523438L0.75 0.734375ZM14.25 6.5C13.9922 7.13281 13.5234 8 12.8672 8.84375L12.2578 8.375C12.7969 7.71875 13.1719 7.03906 13.4297 6.5C13.0547 5.72656 12.3984 4.67188 11.4844 3.75781C10.4297 2.77344 9.09375 2 7.5 2C6.58594 2 5.74219 2.25781 5.01562 2.65625L4.38281 2.14062C5.27344 1.60156 6.30469 1.25 7.5 1.25C11.2031 1.25 13.5469 4.76562 14.25 6.5ZM2.13281 4.17969L2.71875 4.64844C2.17969 5.30469 1.80469 5.98438 1.54688 6.5C1.92188 7.29688 2.57812 8.35156 3.51562 9.24219C4.54688 10.25 5.88281 11 7.5 11C8.39062 11 9.23438 10.7656 9.96094 10.3672L10.5938 10.8828C9.70312 11.3984 8.67188 11.75 7.5 11.75C3.77344 11.75 1.45312 8.25781 0.75 6.5C0.984375 5.89062 1.45312 5.02344 2.13281 4.17969ZM7.5 9.5C5.83594 9.5 4.5 8.16406 4.5 6.5C4.5 6.35938 4.5 6.21875 4.52344 6.07812L5.25 6.64062C5.32031 7.83594 6.30469 8.75 7.5 8.75C7.61719 8.75 7.75781 8.75 7.875 8.72656L8.60156 9.28906C8.25 9.42969 7.875 9.5 7.5 9.5ZM10.5 6.5V6.52344C10.5 6.66406 10.4766 6.80469 10.4531 6.94531L9.72656 6.38281C9.65625 5.1875 8.69531 4.27344 7.5 4.27344C7.35938 4.27344 7.21875 4.27344 7.10156 4.29688L6.375 3.73438C6.72656 3.59375 7.10156 3.5 7.5 3.5C9.14062 3.5 10.5 4.85938 10.5 6.5Z"
                        fill="#727987"
                    ></path>
                  </svg>
                </span>
                            <span class="icon-show d-none">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" id="eye">
                    <path
                        fill="#444"
                        d="M8 3.9C1.3 3.9 0 9 0 9s2.2 4.1 7.9 4.1 8.1-4 8.1-4-1.3-5.2-8-5.2zM5.3 5.4c.5-.3 1.3-.3 1.3-.3s-.5.9-.5 1.6c0 .7.2 1.1.2 1.1L5.2 8s-.3-.5-.3-1.2c0-.8.4-1.4.4-1.4zm2.6 6.7c-4.1 0-6.2-2.3-6.8-3.2.3-.7 1.1-2.2 3.1-3.2-.1.4-.2.8-.2 1.3 0 2.2 1.8 4 4 4s4-1.8 4-4c0-.5-.1-.9-.2-1.3 2 .9 2.8 2.5 3.1 3.2-.7.9-2.8 3.2-7 3.2z"
                    ></path>
                  </svg>
                </span>
                            <span class="proscreen-green-text">Hide</span>
                        </p>
                    </div>
                    <div class="proscreen-table__content d-flex flex-column gap-2">
                        <div
                            class="proscreen-table__content-header justify-content-between body-text-small proscreen-black-4-text">
                            <span class="member">Members</span>
                            <span class="size">Size</span>
                            <span class="py-2 px-3">
                  <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M2.875 4.25C2.875 3.01953 3.53125 1.87109 4.625 1.24219C5.69141 0.613281 7.03125 0.613281 8.125 1.24219C9.19141 1.87109 9.875 3.01953 9.875 4.25C9.875 5.50781 9.19141 6.65625 8.125 7.28516C7.03125 7.91406 5.69141 7.91406 4.625 7.28516C3.53125 6.65625 2.875 5.50781 2.875 4.25ZM0.25 13.957C0.25 11.25 2.41016 9.0625 5.11719 9.0625H7.60547C10.3125 9.0625 12.5 11.25 12.5 13.957C12.5 14.3945 12.1172 14.75 11.6797 14.75H1.04297C0.605469 14.75 0.25 14.3945 0.25 13.957ZM16.9023 14.75H13.1289C13.2656 14.5039 13.375 14.2031 13.375 13.875V13.6562C13.375 12.0156 12.6094 10.5117 11.4609 9.52734C11.5156 9.52734 11.5703 9.5 11.6523 9.5H13.3203C15.7539 9.5 17.75 11.4961 17.75 13.9297C17.75 14.3945 17.3672 14.75 16.9023 14.75ZM12.0625 7.75C11.2148 7.75 10.4492 7.42188 9.875 6.875C10.4219 6.13672 10.75 5.23438 10.75 4.25C10.75 3.53906 10.5586 2.82812 10.2305 2.22656C10.75 1.87109 11.3789 1.625 12.0625 1.625C13.7305 1.625 15.125 3.01953 15.125 4.6875C15.125 6.38281 13.7305 7.75 12.0625 7.75Z"
                        fill="#727987"
                    ></path>
                  </svg>
                </span>
                        </div>
                        <div class="proscreen-table__content-body d-flex flex-column gap-2">
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">4</span>
                                <span class="pro-circle"> 1 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-4-text">
                                <span class="member">LongNameExample...</span>
                                <span class="size">1</span>
                                <span class="pro-circle"> 2</span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">4</span>
                                <span class="pro-circle"> 3 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">3</span>
                                <span class="pro-circle">4</span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">4</span>
                                <span class="pro-circle"> 5 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">3</span>
                                <span class="pro-circle">6</span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">2</span>
                                <span class="pro-circle"> 7 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">3</span>
                                <span class="pro-circle">8</span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-dark proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">2</span>
                                <span class="pro-circle"> 9 </span>
                            </div>
                            <div
                                class="proscreen-table__content-row justify-content-between body-text-small proscreen-bg-light proscreen-black-4-text">
                                <span class="member">Name, A</span>
                                <span class="size">3</span>
                                <span class="pro-circle">10</span>
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
            </div>

            <div class="col-sm-12 col-md-3">
                <h3>Map panel</h3>
                <div class="panel">
                    <div class="d-flex gap-8px align-items-center">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="27" height="36" viewBox="0 0 27 36" fill="none">
                  <path
                      d="M26.4706 13.5198C26.4706 19.7164 18.4053 30.6308 14.8208 35.2078C13.9936 36.2641 12.4081 36.2641 11.5809 35.2078C8.06526 30.6308 0 19.7164 0 13.5198C0 6.05575 5.92831 0 13.2353 0C20.5423 0 26.4706 6.05575 26.4706 13.5198Z"
                      fill="white"
                  />
                  <path
                      d="M18.6062 12.4037C18.6062 14.2381 17.6582 15.8534 16.2769 16.7843H10.508C9.12668 15.8534 8.20581 14.2381 8.20581 12.4037C8.20581 9.50154 10.5351 7.14697 13.406 7.14697C16.2769 7.14697 18.6062 9.50154 18.6062 12.4037ZM14.7602 14.1833C14.7602 14.7035 14.354 15.1142 13.8393 15.1142C13.7039 15.1142 13.5956 15.2511 13.7039 15.3332C13.8664 15.4701 14.056 15.5522 14.2998 15.5522C14.7873 15.5522 15.1936 15.1416 15.1936 14.6487C15.1936 14.4023 15.1123 14.2107 14.9769 14.0464C14.8956 13.9369 14.7602 14.0464 14.7602 14.1833ZM13.3247 12.8417C13.1893 12.8417 13.081 12.9786 13.1893 13.0608C13.3518 13.1977 13.5685 13.3072 13.7852 13.3072C14.2998 13.3072 14.706 12.8965 14.706 12.3763C14.706 12.1573 14.5977 11.9382 14.4623 11.774C14.381 11.6645 14.2456 11.774 14.2456 11.9109C14.2456 12.4311 13.8393 12.8417 13.3247 12.8417ZM16.4124 12.3489C16.4124 12.8691 16.0061 13.2798 15.4915 13.2798C15.3561 13.2798 15.2477 13.4167 15.3561 13.4988C15.5186 13.6357 15.7353 13.7452 15.9519 13.7452C16.4665 13.7452 16.8728 13.3346 16.8728 12.8144C16.8728 12.5953 16.7645 12.3763 16.629 12.212C16.5478 12.1025 16.4124 12.212 16.4124 12.3489ZM10.8059 18.5365C10.8059 18.0711 11.1851 17.6604 11.6726 17.6604H13.406H15.1394C15.5998 17.6604 16.0061 18.0711 16.0061 18.5365C16.0061 19.0293 15.5998 19.4126 15.1394 19.4126H14.706C14.4623 19.4126 14.2727 19.6317 14.2727 19.8507V20.2888C14.2727 20.7816 13.8664 21.1649 13.406 21.1649C12.9185 21.1649 12.5393 20.7816 12.5393 20.2888V19.8507C12.5393 19.6317 12.3226 19.4126 12.106 19.4126H11.6726C11.1851 19.4126 10.8059 19.0293 10.8059 18.5365Z"
                      fill="#39A759"
                  />
                </svg>
              </span>
                        <h3>Tee off</h3>
                    </div>
                    <div>
                        <p class="mb-2 body-text-small">
                            <span>Longitude </span>
                            <span class="body-text-small">48.8566 </span>
                        </p>
                        <p class="mb-0 body-text-small">
                            <span>Latitude </span>
                            <span class="fw-bold">2.3522 </span>
                        </p>
                    </div>
                </div>
                <div class="panel">
                    <div class="d-flex gap-8px align-items-center">
              <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="27" height="36" viewBox="0 0 27 36" fill="none">
                  <path
                      d="M26.4706 13.5198C26.4706 19.7164 18.4053 30.6308 14.8208 35.2078C13.9936 36.2641 12.4081 36.2641 11.5809 35.2078C8.06526 30.6308 0 19.7164 0 13.5198C0 6.05575 5.92831 0 13.2353 0C20.5423 0 26.4706 6.05575 26.4706 13.5198Z"
                      fill="white"
                  />
                  <path
                      d="M11.2646 7.47223L16.2113 9.94777C16.4015 10.043 16.5442 10.2334 16.5442 10.4476C16.5442 10.6619 16.4015 10.8761 16.2113 10.9713L11.5975 13.2802V15.1369C12.1921 15.0655 12.8342 15.0179 13.5001 15.0179C16.8534 15.0179 19.5883 16.0414 19.5883 17.303C19.5883 18.5646 16.8534 19.5881 13.5001 19.5881C10.123 19.5881 7.41187 18.5646 7.41187 17.303C7.41187 16.4699 8.62476 15.732 10.456 15.3273V13.1136C10.456 13.0898 10.456 13.066 10.456 13.0184C10.456 12.9946 10.456 12.9708 10.456 12.9232V7.9721C10.456 7.78168 10.5511 7.59125 10.7176 7.49604C10.8841 7.40082 11.0981 7.37702 11.2646 7.47223ZM14.2611 17.303C14.2611 16.8983 13.5714 16.5413 12.7391 16.5413C11.8829 16.5413 11.217 16.8983 11.217 17.303C11.217 17.7314 11.8829 18.0647 12.7391 18.0647C13.5714 18.0647 14.2611 17.7314 14.2611 17.303Z"
                      fill="#39A759"
                  />
                </svg>
              </span>
                        <h3>Tee off</h3>
                    </div>
                    <div>
                        <p class="mb-2 body-text-small">
                            <span>Longitude </span>
                            <span class="body-text-small">48.8566 </span>
                        </p>
                        <p class="mb-0 body-text-small">
                            <span>Latitude </span>
                            <span class="fw-bold">2.3522 </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}