Block list component: Default

Current release

HTML
View
Context
Info
Notes


        
        <div class="o-blockList">

    <div class="o-blockList__group">
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="o-blockList__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks76471" role="button" aria-expanded="true" aria-controls="collapseTasks76471">
                    <div class="mr-2">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                    </div>
                    <h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
                        Bestelling
                    </h3>
                    <span class="font-weight-normal text-muted">(0/3)</span>
                </div>
                <div class="o-blockList__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
                    <i class="icon-calendar"></i>
                    <span class="ml-1 font-weight-normal line-height-1">3</span>
                </div>
            </div>

            <div class="a-circleLink d-flex align-items-center cursor-pointer">
                <div class="a-circle -avatar -hover -border -pointer cursor-default">
                    <i class="icon-refresh"></i>

                </div>

                <span class="ml-2 d-none d-xs-block">Takenlijst verversen</span>
            </div>

        </div>

        <div class="o-blockList__items collapse show" id="collapseTasks76471">

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks13253" aria-expanded="false" aria-controls="subtasks13253">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                    <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-success -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-success">Vandaag</span>
                            </div>
                        </div>

                        <div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Marcella Vonk&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
                            MV

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -disabled">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks20376" aria-expanded="false" aria-controls="subtasks20376">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-danger -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -active">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks658" aria-expanded="false" aria-controls="subtasks658">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2" />
                                    <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-blue"></div>
                                        <div class="a-dotTag__text">Appartementen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks55594" aria-expanded="false" aria-controls="subtasks55594">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M20.5 4.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#69D2C2" ; stroke-width="2" ; stroke-dasharray="75, 100" stroke-linecap="round" />
                                    <path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black" />
                                    <path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black" />
                                    <path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black" />
                                    <path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black" />
                                    <path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black" />
                                    <path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Welstand ronde 1

                            </strong>

                        </div>
                    </div>

                </div>

                <div class="m-block__bottom w-100 collapse" id="subtasks55594">
                    <div class="m-block__bottomContent">

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks50232" aria-expanded="false" aria-controls="subtasks50232">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                                <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Primaire configuratie wijzigen

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks85679" aria-expanded="false" aria-controls="subtasks85679">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Verkavelingstekening

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks9983" aria-expanded="false" aria-controls="subtasks9983">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Gevelontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks88609" aria-expanded="false" aria-controls="subtasks88609">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Controleer voorontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks95641" aria-expanded="false" aria-controls="subtasks95641">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Adviesgesprek welstand

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks8104" aria-expanded="false" aria-controls="subtasks8104">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-purple"></div>
                                        <div class="a-dotTag__text">Grondgebonden woningen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="o-blockList__group">
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="o-blockList__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks36788" role="button" aria-expanded="true" aria-controls="collapseTasks36788">
                    <div class="mr-2">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                    </div>
                    <h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
                        Offerte
                    </h3>
                    <span class="font-weight-normal text-muted">(0/3)</span>
                </div>
                <div class="o-blockList__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
                    <i class="icon-calendar"></i>
                    <span class="ml-1 font-weight-normal line-height-1">3</span>
                </div>
            </div>

        </div>

        <div class="o-blockList__items collapse show" id="collapseTasks36788">

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks39937" aria-expanded="false" aria-controls="subtasks39937">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                    <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-success -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-success">Vandaag</span>
                            </div>
                        </div>

                        <div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Marcella Vonk&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
                            MV

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -disabled">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks16494" aria-expanded="false" aria-controls="subtasks16494">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-danger -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -active">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks23260" aria-expanded="false" aria-controls="subtasks23260">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2" />
                                    <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-blue"></div>
                                        <div class="a-dotTag__text">Appartementen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks29899" aria-expanded="false" aria-controls="subtasks29899">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M20.5 4.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#69D2C2" ; stroke-width="2" ; stroke-dasharray="75, 100" stroke-linecap="round" />
                                    <path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black" />
                                    <path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black" />
                                    <path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black" />
                                    <path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black" />
                                    <path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black" />
                                    <path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Welstand ronde 1

                            </strong>

                        </div>
                    </div>

                </div>

                <div class="m-block__bottom w-100 collapse" id="subtasks29899">
                    <div class="m-block__bottomContent">

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks81436" aria-expanded="false" aria-controls="subtasks81436">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                                <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Primaire configuratie wijzigen

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks84629" aria-expanded="false" aria-controls="subtasks84629">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Verkavelingstekening

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks69054" aria-expanded="false" aria-controls="subtasks69054">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Gevelontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks63993" aria-expanded="false" aria-controls="subtasks63993">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Controleer voorontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks60246" aria-expanded="false" aria-controls="subtasks60246">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Adviesgesprek welstand

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks2839" aria-expanded="false" aria-controls="subtasks2839">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-purple"></div>
                                        <div class="a-dotTag__text">Grondgebonden woningen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="o-blockList__group">
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="o-blockList__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks33743" role="button" aria-expanded="true" aria-controls="collapseTasks33743">
                    <div class="mr-2">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                    </div>
                    <h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
                        Bevestiging bestelling
                    </h3>
                    <span class="font-weight-normal text-muted">(0/3)</span>
                </div>
                <div class="o-blockList__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
                    <i class="icon-calendar"></i>
                    <span class="ml-1 font-weight-normal line-height-1">3</span>
                </div>
            </div>

        </div>

        <div class="o-blockList__items collapse show" id="collapseTasks33743">

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks6850" aria-expanded="false" aria-controls="subtasks6850">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                    <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-success -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-success">Vandaag</span>
                            </div>
                        </div>

                        <div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Marcella Vonk&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
                            MV

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -disabled">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks2485" aria-expanded="false" aria-controls="subtasks2485">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-danger -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -active">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks51715" aria-expanded="false" aria-controls="subtasks51715">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2" />
                                    <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-blue"></div>
                                        <div class="a-dotTag__text">Appartementen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks81024" aria-expanded="false" aria-controls="subtasks81024">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M20.5 4.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#69D2C2" ; stroke-width="2" ; stroke-dasharray="75, 100" stroke-linecap="round" />
                                    <path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black" />
                                    <path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black" />
                                    <path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black" />
                                    <path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black" />
                                    <path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black" />
                                    <path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Welstand ronde 1

                            </strong>

                        </div>
                    </div>

                </div>

                <div class="m-block__bottom w-100 collapse" id="subtasks81024">
                    <div class="m-block__bottomContent">

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks55918" aria-expanded="false" aria-controls="subtasks55918">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                                <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Primaire configuratie wijzigen

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks42226" aria-expanded="false" aria-controls="subtasks42226">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Verkavelingstekening

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks832" aria-expanded="false" aria-controls="subtasks832">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Gevelontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks37474" aria-expanded="false" aria-controls="subtasks37474">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Controleer voorontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks83315" aria-expanded="false" aria-controls="subtasks83315">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Adviesgesprek welstand

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks92408" aria-expanded="false" aria-controls="subtasks92408">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-purple"></div>
                                        <div class="a-dotTag__text">Grondgebonden woningen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="o-blockList__group">
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="o-blockList__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks82095" role="button" aria-expanded="true" aria-controls="collapseTasks82095">
                    <div class="mr-2">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                    </div>
                    <h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
                        Welstand
                    </h3>
                    <span class="font-weight-normal text-muted">(0/3)</span>
                </div>
                <div class="o-blockList__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
                    <i class="icon-calendar"></i>
                    <span class="ml-1 font-weight-normal line-height-1">3</span>
                </div>
            </div>

        </div>

        <div class="o-blockList__items collapse show" id="collapseTasks82095">

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks63764" aria-expanded="false" aria-controls="subtasks63764">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                    <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-success -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-success">Vandaag</span>
                            </div>
                        </div>

                        <div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Marcella Vonk&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
                            MV

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -disabled">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks46285" aria-expanded="false" aria-controls="subtasks46285">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-danger -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -active">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks55952" aria-expanded="false" aria-controls="subtasks55952">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2" />
                                    <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-blue"></div>
                                        <div class="a-dotTag__text">Appartementen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks71364" aria-expanded="false" aria-controls="subtasks71364">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M20.5 4.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#69D2C2" ; stroke-width="2" ; stroke-dasharray="75, 100" stroke-linecap="round" />
                                    <path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black" />
                                    <path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black" />
                                    <path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black" />
                                    <path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black" />
                                    <path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black" />
                                    <path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Welstand ronde 1

                            </strong>

                        </div>
                    </div>

                </div>

                <div class="m-block__bottom w-100 collapse" id="subtasks71364">
                    <div class="m-block__bottomContent">

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks68835" aria-expanded="false" aria-controls="subtasks68835">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                                <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Primaire configuratie wijzigen

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks73343" aria-expanded="false" aria-controls="subtasks73343">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Verkavelingstekening

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks11471" aria-expanded="false" aria-controls="subtasks11471">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Gevelontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks80478" aria-expanded="false" aria-controls="subtasks80478">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Controleer voorontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks40606" aria-expanded="false" aria-controls="subtasks40606">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Adviesgesprek welstand

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks65466" aria-expanded="false" aria-controls="subtasks65466">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-purple"></div>
                                        <div class="a-dotTag__text">Grondgebonden woningen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="o-blockList__group">
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="o-blockList__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks85468" role="button" aria-expanded="true" aria-controls="collapseTasks85468">
                    <div class="mr-2">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                    </div>
                    <h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
                        Contract
                    </h3>
                    <span class="font-weight-normal text-muted">(0/3)</span>
                </div>
                <div class="o-blockList__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
                    <i class="icon-calendar"></i>
                    <span class="ml-1 font-weight-normal line-height-1">3</span>
                </div>
            </div>

        </div>

        <div class="o-blockList__items collapse show" id="collapseTasks85468">

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks5157" aria-expanded="false" aria-controls="subtasks5157">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                    <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-success -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-success">Vandaag</span>
                            </div>
                        </div>

                        <div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Marcella Vonk&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
                            MV

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -disabled">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks89149" aria-expanded="false" aria-controls="subtasks89149">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-danger -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -active">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks95686" aria-expanded="false" aria-controls="subtasks95686">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2" />
                                    <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-blue"></div>
                                        <div class="a-dotTag__text">Appartementen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks60047" aria-expanded="false" aria-controls="subtasks60047">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M20.5 4.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#69D2C2" ; stroke-width="2" ; stroke-dasharray="75, 100" stroke-linecap="round" />
                                    <path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black" />
                                    <path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black" />
                                    <path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black" />
                                    <path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black" />
                                    <path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black" />
                                    <path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Welstand ronde 1

                            </strong>

                        </div>
                    </div>

                </div>

                <div class="m-block__bottom w-100 collapse" id="subtasks60047">
                    <div class="m-block__bottomContent">

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks89315" aria-expanded="false" aria-controls="subtasks89315">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                                <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Primaire configuratie wijzigen

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks52692" aria-expanded="false" aria-controls="subtasks52692">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Verkavelingstekening

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks61341" aria-expanded="false" aria-controls="subtasks61341">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Gevelontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks58034" aria-expanded="false" aria-controls="subtasks58034">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Controleer voorontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks86186" aria-expanded="false" aria-controls="subtasks86186">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Adviesgesprek welstand

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks64622" aria-expanded="false" aria-controls="subtasks64622">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-purple"></div>
                                        <div class="a-dotTag__text">Grondgebonden woningen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="o-blockList__group">
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="o-blockList__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks36804" role="button" aria-expanded="true" aria-controls="collapseTasks36804">
                    <div class="mr-2">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                    </div>
                    <h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
                        Vergunning
                    </h3>
                    <span class="font-weight-normal text-muted">(0/3)</span>
                </div>
                <div class="o-blockList__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
                    <i class="icon-calendar"></i>
                    <span class="ml-1 font-weight-normal line-height-1">3</span>
                </div>
            </div>

        </div>

        <div class="o-blockList__items collapse show" id="collapseTasks36804">

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks17515" aria-expanded="false" aria-controls="subtasks17515">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                    <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-success -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-success">Vandaag</span>
                            </div>
                        </div>

                        <div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Marcella Vonk&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
                            MV

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -disabled">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks76083" aria-expanded="false" aria-controls="subtasks76083">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-danger -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -active">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks51225" aria-expanded="false" aria-controls="subtasks51225">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2" />
                                    <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-blue"></div>
                                        <div class="a-dotTag__text">Appartementen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks11064" aria-expanded="false" aria-controls="subtasks11064">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M20.5 4.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#69D2C2" ; stroke-width="2" ; stroke-dasharray="75, 100" stroke-linecap="round" />
                                    <path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black" />
                                    <path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black" />
                                    <path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black" />
                                    <path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black" />
                                    <path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black" />
                                    <path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Welstand ronde 1

                            </strong>

                        </div>
                    </div>

                </div>

                <div class="m-block__bottom w-100 collapse" id="subtasks11064">
                    <div class="m-block__bottomContent">

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks4288" aria-expanded="false" aria-controls="subtasks4288">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                                <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Primaire configuratie wijzigen

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks52511" aria-expanded="false" aria-controls="subtasks52511">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Verkavelingstekening

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks9945" aria-expanded="false" aria-controls="subtasks9945">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Gevelontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks58196" aria-expanded="false" aria-controls="subtasks58196">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Controleer voorontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks65758" aria-expanded="false" aria-controls="subtasks65758">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Adviesgesprek welstand

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks74114" aria-expanded="false" aria-controls="subtasks74114">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-purple"></div>
                                        <div class="a-dotTag__text">Grondgebonden woningen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="o-blockList__group">
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="o-blockList__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks17748" role="button" aria-expanded="true" aria-controls="collapseTasks17748">
                    <div class="mr-2">
                        <div class="a-circle -avatar -hover -border -pointer cursor-default">
                            <i class="icon-arrow-right-filled"></i>

                        </div>

                    </div>
                    <h3 class="a-tableHead d-inline-block font-weight-bold mb-0 mr-2 px-0">
                        Verkoop
                    </h3>
                    <span class="font-weight-normal text-muted">(0/3)</span>
                </div>
                <div class="o-blockList__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
                    <i class="icon-calendar"></i>
                    <span class="ml-1 font-weight-normal line-height-1">3</span>
                </div>
            </div>

        </div>

        <div class="o-blockList__items collapse show" id="collapseTasks17748">

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks20058" aria-expanded="false" aria-controls="subtasks20058">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                    <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-success -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-success">Vandaag</span>
                            </div>
                        </div>

                        <div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="hover" data-html="true" title="" data-content="&lt;small class=&#39;d-block text-center&#39;&gt;&lt;strong&gt;Marcella Vonk&lt;/strong&gt;&lt;br&gt;&lt;span class=&#39;text-muted&#39;&gt;Accountmanager&lt;/span&gt;&lt;/small&gt;">
                            MV

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -disabled">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks80256" aria-expanded="false" aria-controls="subtasks80256">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.1687 15.5582C19.0693 15.4588 18.9486 15.4091 18.8065 15.4091H18.6361V14.3863C18.6361 13.7329 18.4018 13.1719 17.933 12.7032C17.4643 12.2344 16.9033 12 16.2498 12C15.5963 12 15.0352 12.2344 14.5665 12.7031C14.0977 13.1719 13.8634 13.7329 13.8634 14.3863V15.4091H13.693C13.551 15.4091 13.4302 15.4588 13.3308 15.5582C13.2313 15.6576 13.1816 15.7784 13.1816 15.9205V18.9887C13.1816 19.1307 13.2314 19.2515 13.3308 19.3509C13.4302 19.4503 13.551 19.5 13.693 19.5H18.8066C18.9487 19.5 19.0694 19.4503 19.1689 19.3509C19.2682 19.2515 19.318 19.1307 19.318 18.9887V15.9204C19.3181 15.7784 19.2682 15.6577 19.1687 15.5582ZM17.6134 15.4091H14.8862V14.3863C14.8862 14.0099 15.0194 13.6885 15.2857 13.4222C15.5521 13.1559 15.8734 13.0228 16.2499 13.0228C16.6263 13.0228 16.9476 13.1559 17.214 13.4222C17.4802 13.6885 17.6134 14.0099 17.6134 14.3863V15.4091Z" fill="black" fill-opacity="0.15" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar bg-danger -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap text-danger">Gisteren</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select -active">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks21914" aria-expanded="false" aria-controls="subtasks21914">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="15" cy="15" r="14" fill="white" stroke="#69D2C2" stroke-width="2" />
                                    <path d="M18.7907 12.1393C18.5306 11.9029 18.1262 11.9214 17.8885 12.1827L13.9911 16.4744L12.1082 14.5602C11.8597 14.3084 11.4559 14.3046 11.2048 14.5525C10.953 14.7998 10.9492 15.2042 11.1971 15.4559L13.5541 17.8519C13.6748 17.9746 13.8384 18.0429 14.0096 18.0429C14.0134 18.0429 14.0179 18.0429 14.0218 18.0436C14.1981 18.0397 14.3642 17.9643 14.4824 17.834L18.8341 13.0421C19.0712 12.7801 19.052 12.3763 18.7907 12.1393Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-blue"></div>
                                        <div class="a-dotTag__text">Appartementen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks39637" aria-expanded="false" aria-controls="subtasks39637">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg -list" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20.5" cy="20.5" r="16" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M20.5 4.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#69D2C2" ; stroke-width="2" ; stroke-dasharray="75, 100" stroke-linecap="round" />
                                    <path d="M16.75 15H15.25C15.112 15 15 15.112 15 15.25V16.75C15 16.888 15.112 17 15.25 17H16.75C16.888 17 17 16.888 17 16.75V15.25C17 15.112 16.888 15 16.75 15Z" fill="black" />
                                    <path d="M16.75 19.0001H15.25C15.112 19.0001 15 19.1121 15 19.2501V20.7501C15 20.8881 15.112 21.0001 15.25 21.0001H16.75C16.888 21.0001 17 20.8881 17 20.7501V19.2501C17 19.1121 16.888 19.0001 16.75 19.0001Z" fill="black" />
                                    <path d="M16.75 22.9999H15.25C15.112 22.9999 15 23.1119 15 23.2499V24.7499C15 24.8879 15.112 24.9999 15.25 24.9999H16.75C16.888 24.9999 17 24.8879 17 24.7499V23.2499C17 23.1119 16.888 22.9999 16.75 22.9999Z" fill="black" />
                                    <path d="M19.0002 16.4999H26.5002C26.7767 16.4999 27.0002 16.2764 27.0002 15.9999C27.0002 15.7234 26.7767 15.4999 26.5002 15.4999H19.0002C18.7237 15.4999 18.5002 15.7234 18.5002 15.9999C18.5002 16.2764 18.7237 16.4999 19.0002 16.4999Z" fill="black" />
                                    <path d="M26.5002 19.5H19.0002C18.7237 19.5 18.5002 19.7235 18.5002 20C18.5002 20.2765 18.7237 20.5 19.0002 20.5H26.5002C26.7767 20.5 27.0002 20.2765 27.0002 20C27.0002 19.7235 26.7767 19.5 26.5002 19.5Z" fill="black" />
                                    <path d="M26.5002 23.5001H19.0002C18.7237 23.5001 18.5002 23.7236 18.5002 24.0001C18.5002 24.2766 18.7237 24.5001 19.0002 24.5001H26.5002C26.7767 24.5001 27.0002 24.2766 27.0002 24.0001C27.0002 23.7236 26.7767 23.5001 26.5002 23.5001Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Welstand ronde 1

                            </strong>

                        </div>
                    </div>

                </div>

                <div class="m-block__bottom w-100 collapse" id="subtasks39637">
                    <div class="m-block__bottomContent">

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks25629" aria-expanded="false" aria-controls="subtasks25629">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="15" cy="15" r="15" fill="#69D2C2" />
                                                <path d="M18.7908 12.1395C18.5308 11.9031 18.1263 11.9216 17.8887 12.1829L13.9912 16.4745L12.1083 14.5604C11.8598 14.3086 11.456 14.3048 11.2049 14.5527C10.9532 14.7999 10.9493 15.2044 11.1972 15.4561L13.5542 17.8521C13.675 17.9747 13.8385 18.0431 14.0097 18.0431C14.0136 18.0431 14.018 18.0431 14.0219 18.0438C14.1982 18.0399 14.3643 17.9645 14.4825 17.8342L18.8342 13.0423C19.0713 12.7803 19.0521 12.3765 18.7908 12.1395Z" fill="white" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Primaire configuratie wijzigen

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks31738" aria-expanded="false" aria-controls="subtasks31738">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Verkavelingstekening

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks99264" aria-expanded="false" aria-controls="subtasks99264">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Gevelontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks38553" aria-expanded="false" aria-controls="subtasks38553">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Controleer voorontwerp

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="m-block d-flex align-items-center flex-wrap -hover user-select -subtask">

                            <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks54674" aria-expanded="false" aria-controls="subtasks54674">

                                <div class="flex-grow-1 pr-2">
                                    <div class="d-flex align-items-center">

                                        <div class="a-statusCircle">
                                            <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                                <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                            </svg>
                                        </div>

                                        <strong class="h5 ml-3 mb-0 font-base">
                                            Adviesgesprek welstand

                                        </strong>

                                        <div class="d-inline-block ml-2">
                                            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                                                <i class="icon-info"></i>

                                            </div>

                                        </div>

                                    </div>
                                </div>

                                <div class="d-none d-lg-flex align-items-center">

                                    <div class="mr-5">
                                        <div class="a-dateDisplay d-flex align-items-center">
                                            <div class="a-circle -avatar -border -pointer cursor-default">
                                                <i class="icon-calendar"></i>

                                            </div>

                                            <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                                        </div>
                                    </div>

                                    <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                                        <i class="icon-profile"></i>

                                    </div>

                                    <div class="popover-content">

                                        Geen eigenaar

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <div class="m-block d-flex align-items-center flex-wrap -hover user-select">

                <div class="m-block__content w-100 d-flex align-items-center cursor-pointer" data-toggle="collapse" data-target="#subtasks5329" aria-expanded="false" aria-controls="subtasks5329">

                    <div class="flex-grow-1 pr-2">
                        <div class="d-flex align-items-center">

                            <div class="a-statusCircle">
                                <svg class="a-statusCircle__svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="15.5" fill="white" stroke="black" stroke-opacity="0.15" />
                                    <path d="M19.7908 13.1403C19.5308 12.9039 19.1263 12.9224 18.8887 13.1837L14.9912 17.4753L13.1083 15.5611C12.8598 15.3094 12.456 15.3056 12.2049 15.5535C11.9532 15.8007 11.9493 16.2052 12.1972 16.4569L14.5542 18.8529C14.675 18.9755 14.8385 19.0439 15.0097 19.0439C15.0136 19.0439 15.018 19.0439 15.0219 19.0445C15.1982 19.0407 15.3643 18.9653 15.4825 18.835L19.8342 14.0431C20.0713 13.7811 20.0521 13.3773 19.7908 13.1403Z" fill="black" />
                                </svg>
                            </div>

                            <strong class="h5 ml-3 mb-0 font-base">
                                Opdrachtgever en contactpersoon

                                <div class="mt-1">
                                    <div class="a-dotTag font-weight-normal text-muted d-flex align-items-center">
                                        <div class="a-dotTag__dot rounded-circle bg-purple"></div>
                                        <div class="a-dotTag__text">Grondgebonden woningen</div>
                                    </div>
                                </div>

                            </strong>

                        </div>
                    </div>

                    <div class="d-none d-lg-flex align-items-center">

                        <div class="mr-5">
                            <div class="a-dateDisplay d-flex align-items-center">
                                <div class="a-circle -avatar -border -pointer cursor-default">
                                    <i class="icon-calendar"></i>

                                </div>

                                <span class="pl-2 white-space-nowrap ">10-01-2022</span>
                            </div>
                        </div>

                        <div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="">
                            <i class="icon-profile"></i>

                        </div>

                        <div class="popover-content">

                            Geen eigenaar

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>

</div>


        <div class="o-blockList">
    {% set tables = ["Bestelling", "Offerte", "Bevestiging bestelling", "Welstand", "Contract", "Vergunning", "Verkoop"] %}
    {% for table in tables %}
    {% set rand=range(1,99999)|random %}
    
    <div class="o-blockList__group">
        <div class="d-flex justify-content-between">
            <div class="d-flex">
                <div class="o-blockList__collapse d-inline-flex align-items-center user-select-none" data-toggle="collapse" href="#collapseTasks{{rand}}" role="button" aria-expanded="true" aria-controls="collapseTasks{{rand}}">
                    <div class="mr-2">
                        {% render '@circle', {size:"avatar", icon:"arrow-right-filled"}, true %}
                    </div>
                    {% render '@table-head', {text:table, large:true}, true %}
                </div>
                <div class="o-blockList__deadlines ml-3 text-danger d-flex align-items-center user-select-none" data-toggle="popover" data-trigger="hover" data-placement="top" data-html="true" data-content="<span class='text-danger'>3 verstreken deadlines</span>">
                    <i class="icon-calendar"></i>
                    <span class="ml-1 font-weight-normal line-height-1">3</span>
                </div>
            </div>
            {% if loop.index == 1 %}
                {% render '@circle-link', {text:text}, true %}
            {% endif %}
        </div>

        <div class="o-blockList__items collapse show" id="collapseTasks{{rand}}">
            {% for i in range(0, 5) -%}
                {% set subtasks = false %}
                {% set highlight = false %}
                {% set tooltip_html = false %}
                {% set popover_content = false %}
                {% if i == 2 %}
                    {% if onboarding == true %}
                        {% set highlight = true %}
                        {% set tooltip = true %}
                        {% set tooltip_html = "Ga verder met deze taak" %}
                        {% set popover_content = true %}
                    {% endif %}
                {% elif i == 3 %}
                    {% set subtasks = true %}
                    {% set label = "Welstand ronde 1" %}
                    {% if onboarding == true %}
                        {% set highlight = true %}
                    {% endif %}
                {% else %}
                    {% set highlight = false %}
                    {% set label = "Opdrachtgever en contactpersoon" %}
                {% endif %}
                {% render '@block', {i:i, subtasks:subtasks, label:label, highlight:highlight, tooltip_html:tooltip_html, popover_content:popover_content}, true %}
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>


        
            
            /* No context defined. */

Handle: @block-list--default
Preview:
- With layout
- Component only
Filesystem Path: templates/fractal/organisms/block-list/block-list.njk
References (4): @circle, @table-head, @circle-link, @block
Referenced by (20): @takenlijst, @takenlijst--subtasks, @takenlijst--subtasks-failed, @takenlijst--overlap-box-locked, @takenlijst--overlap-box-locked-tabs, @takenlijst--notification-feed, @takenlijst--add-owner-deadline, @takenlijst--configurations, @takenlijst--archive-configurations, @takenlijst--modal, @takenlijst--modal-configurator, @takenlijst--modal-confetti, @takenlijst--notifications, @takenlijst--fieldset, @takenlijst--fieldset-list, @takenlijst--modal-gif, @takenlijst--notice-bar-error, @takenlijst--overlap-box, @takenlijst--overlap-box-loading, @takenlijst--tabs

No notes defined.