<div class="o-overlapBox js-resizable d-flex flex-column -tabs">
<div class="o-overlapBox__resizer resizer"></div>
<div class="o-overlapBox__header d-flex flex-row justify-content-between align-items-center">
<h3 class="o-overlapBox__title d-flex align-items-center mb-0">Bestelgegevens</h3>
<div class="d-flex">
<div class="a-circle -small -hover -border -pointer cursor-default">
<i class="icon-close"></i>
</div>
</div>
</div>
<div class="m-noticeBar -error -overlapbox alert alert-dismissible fade show position-sticky" role="alert">
<div class="m-noticeBar__content invalid-feedback d-flex flex-row justify-content-center align-items-center">
<strong>De takenlijst laadt niet lorem ipsum dolor sit amet consectetuer adipiscing elit</strong>
</div>
<button type="button" class="btn m-noticeBar__close position-absolute" data-dismiss="alert" aria-label="Close">
<i class="icon-close"></i>
</button>
</div>
<div class="o-overlapBox__body flex-grow-1">
<div class="o-overlapBox__content">
<div class="o-overlapBox__contentHeader">
<div class="form-group d-flex flex-wrap align-items-center mb-1 -sideBySide position-relative">
<label class="mb-0 d-flex align-items-center">Eigenaar<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,<br> consectetur adipiscing elit nulla.">
<i class="icon-info"></i>
</div>
</div></label>
<div class="m-clearHover rounded d-flex align-items-center">
<div class="m-addItem -noBox d-flex align-items-center position-relative user-select-none">
<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>
<span class="pl-2 cursor-pointer" data-toggle-prev>Eigenaar toevoegen</span>
</div>
</div>
</div>
<div class="form-group -sideBySide mb-1 d-flex align-items-center">
<label class="mb-0 d-flex align-items-center">Deadline<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,<br> consectetur adipiscing elit nulla.">
<i class="icon-info"></i>
</div>
</div></label>
<div class="m-addItem -noBox d-flex align-items-center position-relative user-select-none">
<div class="js-datepicker position-relative d-flex align-items-center m-addItem__datePicker m-clearHover rounded" data-min-date="today" data-wrap="true">
<div class="a-circle -avatar -hover -border -pointer cursor-default" data-toggle>
<i class="icon-plus"></i>
</div>
<div class="m-clearHover__inputWrap d-inline-flex align-items-center position-relative ">
<span class="d-none align-items-center pl-2 pr-1 cursor-pointer" data-toggle>Vandaag</span>
<input type="text" readonly class=" cursor-pointer pl-2" value="20-11-2024" data-input placeholder="Deadline toevoegen">
<span class="pl-2 m-clearHover__datePickerText cursor-pointer" data-toggle>Deadline toevoegen</span>
</div>
<div class="pl-1 cursor-pointer m-clearHover__cross position-relative" data-clear><i class="icon-cross"></i></div>
</div>
</div>
</div>
</div>
<div class="m-tabsGroup -overlapBox">
<ul class="nav nav-tabs m-tabs position-relative">
<li class="nav-item active" role="presentation">
<a href="#nav-tasks" class="nav-link" id="nav-tasks-tab" data-toggle="tab" href="#nav-tasks" role="tab" aria-controls="nav-tasks" aria-selected="true">Taken</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-attachment" class="nav-link" id="nav-attachment-tab" data-toggle="tab" href="#nav-attachment" role="tab" aria-controls="nav-attachment" aria-selected="true">Bijlage</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-activities" class="nav-link" id="nav-activities-tab" data-toggle="tab" href="#nav-activities" role="tab" aria-controls="nav-activities" aria-selected="true">Activiteiten</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-comments" class="nav-link" id="nav-comments-tab" data-toggle="tab" href="#nav-comments" role="tab" aria-controls="nav-comments" aria-selected="true">Opmerkingen<span class="ml-2"><span class="badge -count d-table font-weight-bold rounded-sm -left">2</span>
</span></a>
</li>
<div class="nav-line"></div>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="nav-tasks" role="tabpanel" aria-labelledby="nav-tasks-tab">
<div class="form-group">
<h4>Basisstukken</h4>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 d-flex align-items-center">Bestelnaam</label>
<input name="inputField" type="text" class="form-control " placeholder="Bestelnaam">
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 d-flex align-items-center">Bestelnaam</label>
<input name="inputField" type="text" class="form-control " placeholder="Bestelnaam" value="Bestelnaam" disabled>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Type project</label>
<select name="selectField" class="form-control cursor-pointer ">
<option>Select field item 1</option>
<option>Select field item 2</option>
<option>Select field item 3</option>
</select>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Type project</label>
<select name="selectField" class="form-control cursor-pointer " disabled>
<option>Select field item 1</option>
<option>Select field item 2</option>
<option>Select field item 3</option>
</select>
</div>
<div class="form-group d-flex flex-wrap position-relative">
<label class="flex-grow-1">Teamleden</label>
<ul class="m-teamList position-relative list-unstyled mb-0 w-100 d-flex">
<li>
<div tabindex="0" class="a-avatar bg-greenblue 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="<small class='d-block text-center'><strong>Frans Canten</strong><br><span class='text-muted'>Accountmanager</span></small>">
FC
</div>
</li>
<li>
<div tabindex="0" class="a-avatar bg-bronze 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="<small class='d-block text-center'><strong>Britt Kaag</strong><br><span class='text-muted'>Projectmanager</span></small>">
BK
</div>
</li>
<li>
<div tabindex="0" class="a-avatar bg-darkblue 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="<small class='d-block text-center'><strong>Luuk Maartens</strong><br><span class='text-muted'>Architect</span></small>">
LM
</div>
</li>
<li>
<div tabindex="0" class="a-avatar bg-brightpink 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="<small class='d-block text-center'><strong>Thomas Rademakers</strong><br><span class='text-muted'>Architect</span></small>">
TR
</div>
</li>
<li>
<div tabindex="0" class="a-avatar bg-defaultgray 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='<ul class="m-teamList -vertical flex-column position-relative list-unstyled mb-0 w-100 d-flex">
<li><div tabindex="0" class="a-avatar bg-pistache rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
HP
</div>
<small>Hendrik Pieters</small></li>
<li><div tabindex="0" class="a-avatar bg-greyblue rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
PV
</div>
<small>Piet van Veen</small></li>
<li><div tabindex="0" class="a-avatar bg-lightyellow rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
ED
</div>
<small>Eva Dijkstra</small></li>
</ul>'">
+3
</div>
</li>
<li class=" ml-1">
<div class="a-circle -avatar -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-custom-class="-teamSelect">
<i class="icon-plus"></i>
</div>
<div class="popover-content">
<div class="m-searchInput">
<span class="d-block d-xxxxl-none">
<input type="search" class="form-control" id="search" placeholder="Zoeken">
</span>
<span class="d-none d-xxxxl-block">
<input type="search" class="form-control" id="search" placeholder="Zoeken">
</span>
<i class=" icon-search cursor-pointer"></i>
</div>
<div class="m-teamSelect js-teamSelect">
<i class="m-teamSelect__noresults">No matching results</i>
<ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
MV
</div>
<span class=" pl-2">Marcella Vonk</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
DW
</div>
<span class=" pl-2">Daniëlle van der Wei</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
FA
</div>
<span class=" pl-2">Ferry van Asperen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
IP
</div>
<span class=" pl-2">Isabel Pedersen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
RG
</div>
<span class=" pl-2">Robert Giezen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
JT
</div>
<span class=" pl-2">Jappy Toering</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
RV
</div>
<span class=" pl-2">Ruerd Visser</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
RW
</div>
<span class=" pl-2">Robin Woudstra</span>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Omschrijving situatie</label>
<textarea name="textArea" class="form-control" rows="7" placeholder="Omschrijving situatie"></textarea>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Datum</label>
<div class="m-fieldWrap -picker w-100 position-relative">
<div class="a-circle -smallest -hover bg-primary -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<input type="text" class="js-datepicker cursor-pointer form-control" placeholder="Datum">
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Datum</label>
<div class="m-fieldWrap -picker w-100 position-relative -disabled">
<div class="a-circle -smallest -hover bg-primary -pointer cursor-default">
<i class="icon-calendar"></i>
</div>
<input type="text" class="js-datepicker cursor-pointer form-control" placeholder="Datum" value="01-01-2021" disabled>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Tijdstip</label>
<div class="m-fieldWrap -picker cursor-pointer w-100 position-relative">
<div class="a-circle -smallest -hover bg-primary -pointer cursor-default">
<i class="icon-time"></i>
</div>
<select name="timepickerField" class="form-control cursor-pointer">
<option>8 : 00</option>
<option>8 : 30</option>
<option>9 : 00</option>
<option>9 : 30</option>
<option>10 : 00</option>
<option>10 : 30</option>
<option>11 : 00</option>
<option>11 : 30</option>
<option>12 : 00</option>
<option>12 : 30</option>
<option>13 : 00</option>
<option>13 : 30</option>
<option>14 : 00</option>
<option>14 : 30</option>
<option>15 : 00</option>
<option>15 : 30</option>
<option>16 : 00</option>
<option>16 : 30</option>
<option>17 : 00</option>
</select>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Tijdstip</label>
<div class="m-fieldWrap -picker cursor-pointer w-100 position-relative -disabled">
<div class="a-circle -smallest -hover bg-primary -pointer cursor-default">
<i class="icon-time"></i>
</div>
<select name="timepickerField" class="form-control cursor-pointer" disabled>
<option>8 : 00</option>
<option>8 : 30</option>
<option>9 : 00</option>
<option>9 : 30</option>
<option>10 : 00</option>
<option>10 : 30</option>
<option>11 : 00</option>
<option>11 : 30</option>
<option>12 : 00</option>
<option>12 : 30</option>
<option>13 : 00</option>
<option>13 : 30</option>
<option>14 : 00</option>
<option>14 : 30</option>
<option>15 : 00</option>
<option>15 : 30</option>
<option>16 : 00</option>
<option>16 : 30</option>
<option>17 : 00</option>
</select>
</div>
</div>
<div class="form-group">
<fieldset class="m-fieldset ">
<legend class="h4 d-flex align-items-center">Nieuwe offerte aanmaken<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,<br> consectetur adipiscing elit nulla.">
<i class="icon-info"></i>
</div>
</div>
</legend>
<div class="m-fieldset__body">
<div class="m-tabsGroup -fieldset">
<ul class="nav nav-tabs m-tabs position-relative">
<li class="nav-item active" role="presentation">
<a href="#nav-tasks-fieldset" class="nav-link" id="nav-tasks-fieldset-tab" data-toggle="tab" href="#nav-tasks-fieldset" role="tab" aria-controls="nav-tasks-fieldset" aria-selected="true">Taken</a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-attachment-fieldset" class="nav-link" id="nav-attachment-fieldset-tab" data-toggle="tab" href="#nav-attachment-fieldset" role="tab" aria-controls="nav-attachment-fieldset" aria-selected="true">Bijlage</a>
</li>
<div class="nav-line"></div>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="nav-tasks-fieldset" role="tabpanel" aria-labelledby="nav-tasks-fieldset-tab">
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 d-flex align-items-center">Bestelnaam<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,<br> consectetur adipiscing elit nulla.">
<i class="icon-info"></i>
</div>
</div></label>
<input name="inputField" type="text" class="form-control " placeholder="Bestelnaam">
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Omschrijving situatie</label>
<textarea name="textArea" class="form-control" rows="7" placeholder="Omschrijving situatie"></textarea>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<div class="m-configuration w-100 overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="/fractal/build/img/img11.jpg">
<div class="flex-grow-1">
<strong>De Klamp Schets 1</strong>
<div class="text-muted">Totaal opties: € 15.317,65</div>
<div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup12090" aria-expanded="false" aria-controls="collapseListGroup12090">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup12090">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="nav-attachment-fieldset" role="tabpanel" aria-labelledby="nav-attachment-fieldset-tab">
<div class="form-group">
<label>Getekende offerte uploaden</label>
<div class="m-addItem -small rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<span class="text-muted user-select">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
<ul class="list-group -separated">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</div>
<div class="form-group d-flex flex-wrap w-100">
<label class="flex-grow-1">Status</label>
<ul class="m-buttonGroup list-unstyled d-flex flex-wrap w-100">
<li><button type="button" class="btn btn-sm btn-primary -iconRight">
Button
</button></li>
<li><button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Button
</button></li>
<li><button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Button
</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="m-fieldset__bottom">
<div class="row gutters-10">
<div class="col-6"><button type="button" class="btn btn-block btn-outline-dark -iconRight">
Annuleren
</button></div>
<div class="col-6"><button type="button" class="btn btn-block btn-primary -iconRight">
Opslaan
</button></div>
</div>
</div>
</fieldset>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<p class="form-text">Voer eventuele wijzigingen door aan de primaire configuratie, of dupliceer de configuratie.</p>
<div class="m-configuration w-100 -radio overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__radio mr-3 mr-lg-4">
<div class="custom-control custom-radio -fill custom-control-inline mr-0">
<input type="radio" id="customRadio2036" name="configuratieundefined" value="" class="custom-control-input">
<label class="custom-control-label cursor-pointer absolute d-flex align-items-center" for="customRadio2036"></label>
</div>
</div>
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="/fractal/build/img/img11.jpg">
<div class="flex-grow-1">
<strong>De Klamp Schets 1</strong>
<div class="text-muted">Totaal opties: € 15.317,65</div>
<div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Naam wijzigen</div>
<div class='dropdown-item'>Notitie toevoegen</div>
<div class='dropdown-divider'></div>
<div class='dropdown-item'>Archiveren</div>
<div class='dropdown-divider'></div>
<div class='dropdown-item'>Archiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup88438" aria-expanded="false" aria-controls="collapseListGroup88438">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup88438">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<p class="form-text">Voer eventuele wijzigingen door aan de primaire configuratie, of dupliceer de configuratie.</p>
<div class="m-configuration w-100 is-invalid overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="/fractal/build/img/img11.jpg">
<div class="flex-grow-1">
<strong>De Klamp Schets 1</strong>
<div class="text-muted">Totaal opties: € 15.317,65</div>
<div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup47711" aria-expanded="false" aria-controls="collapseListGroup47711">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup47711">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="list-group -collapse">
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup49504" aria-expanded="false" aria-controls="collapseListGroup49504">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Notities</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-edit-alt"></i>
<span class="ml-1">1</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup49504">
<li class="list-group-item p-3 p-md-4 -notes">
<div class="m-comment js-comment -paragraph -addField d-flex flex-column position-relative w-100">
<span class="mb-2">
<p tabindex="-1" placeholder="Voeg een opmerking toe..." class="form-control cursor-text" contenteditable></p>
<div class="popover-content">
<div class="m-teamSelect js-teamSelect">
<i class="m-teamSelect__noresults">No matching results</i>
<ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
MV
</div>
<span class=" pl-2">Marcella Vonk
</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
DW
</div>
<span class=" pl-2">Daniëlle van der Wei</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
FA
</div>
<span class=" pl-2">Ferry van Asperen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
IP
</div>
<span class=" pl-2">Isabel Pedersen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
RG
</div>
<span class=" pl-2">Robert Giezen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
JT
</div>
<span class=" pl-2">Jappy Toering</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
RV
</div>
<span class=" pl-2">Ruerd Visser</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
RW
</div>
<span class=" pl-2">Robin Woudstra</span>
</li>
</ul>
</div>
</div>
</span>
<div class="d-flex justify-content-end w-100 mt-3">
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Plaatsen
</button>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<div class="m-configuration w-100 -radio -disabled -checked overflow-hidden" aria-disabled="true">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__radio mr-3 mr-lg-4">
<div class="custom-control custom-radio -fill custom-control-inline mr-0 -disabled -checked">
<input type="radio" id="customRadio12040" name="configuratie-disabled" value="" class="custom-control-input" disabled checked>
<label class="custom-control-label absolute d-flex align-items-center" for="customRadio12040"></label>
</div>
</div>
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="/fractal/build/img/img11.jpg">
<div class="flex-grow-1">
<strong>De Klamp Schets 1</strong>
<div class="text-muted">Totaal opties: € 15.317,65</div>
<div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup61164" aria-expanded="false" aria-controls="collapseListGroup61164">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup61164">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<div class="m-configuration w-100 overflow-hidden">
<div class="d-flex flex-wrap pl-3 pr-3 pl-md-4 pr-md-4 pt-3 pt-md-4 mb-3 mb-md-4">
<div class="d-flex flex-wrap w-100">
<label class="flex-grow-1"></label>
<ul class="m-buttonGroup list-unstyled d-flex flex-wrap w-100 is-full flex-column flex-xs-row">
<li class="flex-grow-1"><button type="button" class="btn btn-info btn-sm -iconRight w-100">
Niet van toepassing
</button></li>
<li class="flex-grow-1"><button type="button" class="btn btn-sm btn-outline-dark -iconRight w-100">
In behandeling
</button></li>
<li class="flex-grow-1"><button type="button" class="btn btn-sm btn-outline-dark -iconRight w-100">
Afgerond
</button></li>
</ul>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup75305" aria-expanded="false" aria-controls="collapseListGroup75305">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup75305">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Selecteer een definitieve configuratie</label>
<div class="m-configuration w-100 -tabs overflow-hidden">
<div class="d-flex flex-wrap pl-3 pr-3 pl-md-4 pr-md-4 pt-3 pt-md-4 mb-3 mb-md-4">
<div class="d-flex flex-wrap w-100">
<label class="flex-grow-1"></label>
<ul class="m-buttonGroup list-unstyled d-flex flex-wrap w-100 is-full flex-column flex-xs-row">
<li class="flex-grow-1"><button type="button" class="btn btn-info btn-sm -iconRight w-100">
Niet van toepassing
</button></li>
<li class="flex-grow-1"><button type="button" class="btn btn-sm btn-outline-dark -iconRight w-100">
In behandeling
</button></li>
<li class="flex-grow-1"><button type="button" class="btn btn-sm btn-outline-dark -iconRight w-100">
Afgerond
</button></li>
</ul>
</div>
</div>
<div class="m-configuration__bottom ">
<div class="m-tabsGroup -element">
<ul class="nav nav-tabs m-tabs position-relative pl-3 pr-3 pl-md-4 pr-md-4">
<li class="nav-item active" role="presentation">
<a href="#nav-files-configuration" class="nav-link" id="nav-files-configuration-tab" data-toggle="tab" href="#nav-files-configuration" role="tab" aria-controls="nav-files-configuration" aria-selected="true">Bestanden<span class="ml-2"><span class="badge -count d-table font-weight-bold rounded-sm -left">2</span>
</span></a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-notes-configuration" class="nav-link" id="nav-notes-configuration-tab" data-toggle="tab" href="#nav-notes-configuration" role="tab" aria-controls="nav-notes-configuration" aria-selected="true">Notities<span class="ml-2"><span class="badge -count d-table font-weight-bold rounded-sm -left">2</span>
</span></a>
</li>
<div class="nav-line"></div>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="nav-files-configuration" role="tabpanel" aria-labelledby="nav-files-configuration-tab">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup7835" aria-expanded="false" aria-controls="collapseListGroup7835">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup7835">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane" id="nav-notes-configuration" role="tabpanel" aria-labelledby="nav-notes-configuration-tab">
<div class="m-comment js-comment pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4 -addField d-flex flex-column position-relative w-100">
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder="Voeg een notitie toe"></textarea>
</div>
</span>
<div class="d-flex justify-content-end w-100 mt-3">
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Plaatsen
</button>
</div>
</div>
<div class="m-tabsGroup__container overflow-auto">
<div class="m-comment js-comment pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<span class="text-muted ml-2 d-none d-xs-inline-flex align-items-center">1 sec. geleden</span>
</div>
<div class="d-flex flex-row">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</div>
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder="Maar goed dat ik ze vandaag heb aangevraagd. Ik mail ze begin volgende week opnieuw. Maar goed dat ik ze vandaag heb aangevraagd. Ik mail ze begin volgende week opnieuw">Maar goed dat ik ze vandaag heb aangevraagd. Ik mail ze begin volgende week opnieuw. Maar goed dat ik ze vandaag heb aangevraagd. Ik mail ze begin volgende week opnieuw</textarea>
</div>
</span>
</div>
<div class="m-comment js-comment pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<span class="text-muted ml-2 d-none d-xs-inline-flex align-items-center">1 sec. geleden</span>
</div>
</div>
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder="">Ik zou in deze case rekening houden met veel vertraging. Ik hoorde van Pieter dat hij 3 maanden heeft gewacht op de benodigde documenten</textarea>
</div>
</span>
<div class="d-flex justify-content-end w-100 mt-3">
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Annuleren
</button>
<span class="ml-3">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Opslaan
</button>
</span>
</div>
</div>
<div class="m-comment js-comment pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="d-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<div class="d-flex flex-column ml-2">
<span class="">Ik heb de bestanden aangevraagd bij de gemeente en wacht nu op reactie</span>
<span class="text-muted mt-2">20-03-2021 om 12:22, door Marcella Vonk</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="nav-attachment" role="tabpanel" aria-labelledby="nav-attachment-tab">
<div class="form-group">
<label>Offerte uploaden</label>
<div class="m-addItem -small rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<span class="text-muted user-select">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
<ul class="list-group -separated">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Maak een nieuw conceptontwerp</label>
<div class="m-addItem rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Maak een nieuw conceptontwerp</label>
<div class="m-addItem -disabled rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<span class="text-muted user-select">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="nav-activities" role="tabpanel" aria-labelledby="nav-activities-tab">
<div class="form-group d-flex flex-wrap">
<div class="m-configuration w-100 overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<img class="m-configuration__img rounded-circle mr-3 mr-lg-4" src="/fractal/build/img/img11.jpg">
<div class="flex-grow-1">
<strong>De Klamp Schets 1</strong>
<div class="text-muted">Totaal opties: € 15.317,65</div>
<div class="text-muted">Laatst gewijzigd: 12-03-2021, 13:25</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom -borderTop p-3 p-md-4">
<table class="m-configuration__table table -noBorder">
<thead>
<tr>
<th colspan="2"><strong>Besteloverzicht</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>Type bestelling</td>
<td class="text-right">Huur</td>
</tr>
<tr>
<td>Aantal woningen</td>
<td class="text-right">24, waarvan 12 hoekwoningen</td>
</tr>
<tr>
<td>Woningtypes en beukmaten</td>
<td class="text-right">Fijn 101 5040, Fijn 201 5040</td>
</tr>
<tr>
<td>Datum offerte akkoord</td>
<td class="text-right">21-01-2021</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Totaalsom</strong></td>
<td class="text-right"><strong>€8.817.000</strong></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Adviesgesprekken</label>
<div class="m-configuration w-100 overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<div class="flex-grow-1">
<strong>Adviesgesprek 1</strong>
<div class="text-muted">17-04-2021</div>
<div class="d-flex flex-wrap mt-3">
<div class="mr-2"><button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Goedgekeurd
</button></div>
<button type="button" class="btn btn-danger btn-sm -iconRight">
Afgewezen
</button>
</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup42097" aria-expanded="false" aria-controls="collapseListGroup42097">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup42097">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="m-configuration w-100 overflow-hidden">
<div class="m-configuration__main d-flex justify-content-between align-items-center position-relative p-3 p-md-4">
<div class="m-configuration__info d-flex align-items-center flex-grow-1">
<div class="flex-grow-1">
<strong>Adviesgesprek 2</strong>
<div class="text-muted">17-04-2021</div>
<div class="d-flex flex-wrap mt-3">
<div class="mr-2"><button type="button" class="btn btn-success btn-sm -iconRight">
Goedgekeurd
</button></div>
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Afgewezen
</button>
</div>
</div>
</div>
<div class="m-configuration__actions d-flex flex-column flex-sm-row ml-2">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="bottom" data-trigger="click" data-html="true" title="" data-popover-group="open_close_configuration_menu" data-custom-class="-menu">
<i class="icon-vertical-dots"></i>
</div>
<div class="popover-content">
<div class='m-popoverMenu'>
<div class='dropdown-item'>Dearchiveren</div>
</div>
</div>
</div>
</div>
<div class="m-configuration__bottom ">
<ul class="list-group -collapse">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li>
<div class="list-group-item user-select-none py-2 px-3 px-md-4 d-flex align-items-center cursor-pointer collapsed" data-toggle="collapse" data-target="#collapseListGroup5479" aria-expanded="false" aria-controls="collapseListGroup5479">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-arrow-right-filled"></i>
</div>
<strong class="ml-2">Documenten</strong>
<div class="list-group-indicator text-muted ml-3 d-flex align-items-center">
<i class="icon-documents"></i>
<span class="ml-1">3</span>
</div>
</div>
<ul class="collapse list-group" id="collapseListGroup5479">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 d-flex align-items-center">Flora en Fauna onderzocht <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,<br> consectetur adipiscing elit nulla.">
<i class="icon-info"></i>
</div>
</div></label>
<div class="m-advancedRadioWrap w-100">
<div class="form-row">
<div class="col-6">
<div class="m-advancedRadio overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio53613" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio53613">Ja</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="m-advancedRadio overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio17918" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio17918">Nee</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 ">Flora en Fauna onderzocht </label>
<div class="m-advancedRadioWrap w-100">
<div class="form-row">
<div class="col-8">
<div class="m-advancedRadio -open overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio29315" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio29315">Ja</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -extraSmall rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<ul class="list-group">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-4">
<div class="m-advancedRadio overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio92294" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio92294">Nee</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -extraSmall rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<ul class="list-group">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 d-flex align-items-center">Flora en Fauna onderzocht <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,<br> consectetur adipiscing elit nulla.">
<i class="icon-info"></i>
</div>
</div></label>
<div class="m-advancedRadioWrap w-100">
<div class="form-row">
<div class="col-8">
<div class="m-advancedRadio -tabs -open overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__radio position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio98056" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio98056">Ja</label>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<div class="m-tabsGroup -element">
<ul class="nav nav-tabs m-tabs position-relative pl-3 pr-3 pl-md-4 pr-md-4">
<li class="nav-item active" role="presentation">
<a href="#nav-files-advanced-radio" class="nav-link" id="nav-files-advanced-radio-tab" data-toggle="tab" href="#nav-files-advanced-radio" role="tab" aria-controls="nav-files-advanced-radio" aria-selected="true">Bestanden<span class="ml-2"><span class="badge -count d-table font-weight-bold rounded-sm -left">2</span>
</span></a>
</li>
<li class="nav-item" role="presentation">
<a href="#nav-notes-advanced-radio" class="nav-link" id="nav-notes-advanced-radio-tab" data-toggle="tab" href="#nav-notes-advanced-radio" role="tab" aria-controls="nav-notes-advanced-radio" aria-selected="true">Notities<span class="ml-2"><span class="badge -count d-table font-weight-bold rounded-sm -left">2</span>
</span></a>
</li>
<div class="nav-line"></div>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="nav-files-advanced-radio" role="tabpanel" aria-labelledby="nav-files-advanced-radio-tabs">
<ul class="list-group">
<li class="list-group-item -upload py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<div class="w-100 position-relative">
<div class="m-addItem -noBox d-flex align-items-center absolute cursor-pointer user-select-none">
<div class="a-circle -avatar -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
<div class="ml-2">
<span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
</div>
</div>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane" id="nav-notes-advanced-radio" role="tabpanel" aria-labelledby="nav-notes-advanced-radio-tab">
<textarea name="textArea" class="form-control" rows="7" placeholder="Omschrijving situatie"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="m-advancedRadio overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio29863" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio29863">Nee</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -extraSmall rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<ul class="list-group">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 ">Flora en Fauna onderzocht </label>
<div class="m-advancedRadioWrap w-100">
<div class="form-row">
<div class="col-8">
<div class="m-advancedRadio -disabled -checked -open overflow-hidden d-flex flex-wrap w-100" aria-disabled="true">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0 -disabled -checked">
<input type="radio" id="customRadio91069" name="advanced" value="Ja" class="custom-control-input" disabled checked>
<label class="custom-control-label d-flex align-items-center" for="customRadio91069">Ja</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -disabled -extraSmall rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<ul class="list-group">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-4">
<div class="m-advancedRadio -disabled overflow-hidden d-flex flex-wrap w-100" aria-disabled="true">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0 -disabled">
<input type="radio" id="customRadio10466" name="advanced" value="Nee" class="custom-control-input" disabled>
<label class="custom-control-label d-flex align-items-center" for="customRadio10466">Nee</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -disabled -extraSmall rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<ul class="list-group">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1 ">Bijzonderheden in de planning </label>
<div class="m-advancedRadioWrap w-100">
<div class="form-row">
<div class="col-8">
<div class="m-advancedRadio -open overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left flex-grow-1 position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio62884" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio62884">Ja</label>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<textarea name="textArea" class="form-control" rows="7" placeholder="Omschrijving situatie"></textarea>
</div>
</div>
</div>
<div class="col-4">
<div class="m-advancedRadio overflow-hidden d-flex flex-wrap w-100">
<div class="d-flex w-100">
<div class="m-advancedRadio__left position-relative">
<div class="custom-control custom-radio custom-control-inline mr-0">
<input type="radio" id="customRadio92042" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio92042">Nee</label>
</div>
</div>
<div class="m-advancedRadio__right">
<div class="m-addItem -extraSmall rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
<div class="d-flex flex-wrap justify-content-center align-items-center">
<div class="mt-1">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-plus"></i>
</div>
</div>
<div class="mx-2 mt-1 text-center">
<u class="user-select">bladeren</u>
</div>
</div>
</div>
</div>
</div>
<div class="m-advancedRadio__bottom w-100">
<ul class="list-group">
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Genereer
</button>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex text-muted pointer-events-none"><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<span class="d-none d-md-inline-block text-muted mr-2 white-space-nowrap">Document genereren</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="20 20 60 60">
<circle cx="50" cy="50" r="27" stroke="#ececec" stroke-width="5" fill="none" />
<circle cx="50" cy="50" r="27" stroke="#69d2c2" stroke-width="5" stroke-linecap="round" fill="none">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.5384615384615383s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" />
<animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.5384615384615383s" values="15.079644737231007 173.41591447815657;147.0265361880023 41.469023027385276;15.079644737231007 173.41591447815657" keyTimes="0;0.5;1" />
</circle>
</svg>
</div>
</li>
<li class="list-group-item py-2 px-3 px-md-4 d-flex justify-content-between align-items-center">
<a href="bestand.pdf" target="_blank" class="mr-3 d-flex "><span class="list-group-label flex-grow-1">Listgroup label of bestandsnaam</span><span>.pdf</span></a>
<div class="d-flex align-items-center">
<a href="" target="_blank" class="a-circle -view -sm -hover -border -pointer cursor-default">
<i class="icon-view"></i>
</a>
<div class="a-circle -download -sm -hover -border -pointer cursor-default">
<i class="icon-download-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group d-flex flex-column">
<label>Kaart</label>
<div class="a-map" id="js-map"></div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck1" class="custom-control-input ">
<label class="custom-control-label cursor-pointer pl-1" for="customCheck1">Ik bevestig dat de welstandscommissie akkoord is met de conceptontwerpen</label>
</div>
</div>
</div>
<div class="tab-pane" id="nav-comments" role="tabpanel" aria-labelledby="nav-comments-tab">
<div class="form-group d-flex flex-wrap">
<div class="m-comment js-comment -border pt-4 pb-3 px-4 -addField d-flex flex-column position-relative w-100">
<span class="mb-2">
<p tabindex="-1" placeholder="Voeg een opmerking toe..." class="form-control cursor-text" contenteditable></p>
<div class="popover-content">
<div class="m-teamSelect js-teamSelect">
<i class="m-teamSelect__noresults">No matching results</i>
<ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
MV
</div>
<span class=" pl-2">Marcella Vonk
</span></li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
DW
</div>
<span class=" pl-2">Daniëlle van der Wei</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
FA
</div>
<span class=" pl-2">Ferry van Asperen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
IP
</div>
<span class=" pl-2">Isabel Pedersen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
RG
</div>
<span class=" pl-2">Robert Giezen</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
JT
</div>
<span class=" pl-2">Jappy Toering</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
RV
</div>
<span class=" pl-2">Ruerd Visser</span>
</li>
<li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
<div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
RW
</div>
<span class=" pl-2">Robin Woudstra</span>
</li>
</ul>
</div>
</div>
</span>
<div class="d-flex justify-content-end w-100 mt-3">
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Plaatsen
</button>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<div class="m-comment js-comment -border py-3 px-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<span class="text-muted ml-2 d-none d-xs-inline-flex align-items-center">1 sec. geleden</span>
</div>
<div class="d-flex flex-row">
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-edit-alt"></i>
</div>
<div class="a-circle -sm -hover -border -pointer cursor-default">
<i class="icon-bin"></i>
</div>
</div>
</div>
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder=" Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien" readonly> Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien</textarea>
</div>
</span>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<div class="m-comment js-comment -border py-3 px-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<span class="text-muted ml-2 d-none d-xs-inline-flex align-items-center">1 sec. geleden</span>
</div>
</div>
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder=""> Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien</textarea>
</div>
</span>
<div class="d-flex justify-content-end w-100 mt-3">
<button type="button" class="btn btn-sm btn-outline-dark -iconRight">
Annuleren
</button>
<span class="ml-3">
<button type="button" class="btn btn-sm btn-primary -iconRight">
Opslaan
</button>
</span>
</div>
</div>
</div>
<div class="form-group d-flex flex-wrap">
<div class="m-comment js-comment -border py-3 px-4 d-flex flex-column position-relative w-100">
<div class="d-flex d-flex align-items-center justify-content-between">
<div class="mr-3 d-inline-flex">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
MV
<img src="../../img/mv.jpg" alt="Avatar" class="cover">
</div>
<span class="d-inline-flex">
<strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
</span>
<span class="text-muted ml-2 d-none d-xs-inline-flex align-items-center">1 sec. geleden</span>
</div>
</div>
<span class="mb-2">
<div class="d-flex flex-wrap">
<label class="flex-grow-1"></label>
<textarea name="textArea" class="form-control" placeholder=" Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien" readonly> Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien</textarea>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-overlapBox__footer d-flex align-items-center">
<div class="d-flex h-100 w-100 justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="a-circle -button -hover bg-primary -pointer cursor-default">
<i class="icon-save"></i>
</div>
<span class="text-muted d-none d-sm-block px-2 pl-md-3"><span class="d-inline-block">Laatst opgeslagen:</span> <span class="d-inline-block">3 seconden geleden</span></span>
</div>
<button type="button" class="btn btn-outline-dark -icon -iconLeft">
<i class="icon-checkmark"></i>
Taak voltooien
</button>
</div>
</div>
</div>
{#
Added resizer (nov 2021)
Added locked (dec 2021)
Added content section (jan 2022)
Added add owner and deadline fields (jan 2022)
#}
<div class="o-overlapBox js-resizable d-flex flex-column -tabs{% if locked %} -locked{% endif %}">
<div class="o-overlapBox__resizer resizer"></div>
<div class="o-overlapBox__header d-flex flex-row justify-content-between align-items-center">
<h3 class="o-overlapBox__title d-flex align-items-center mb-0">{{title}}{% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}{% if locked %}<i class="ml-2 icon-lock"></i>{% endif %}</h3>
<div class="d-flex">
{% render '@circle', {icon:"close", size:"small"}, true %}
</div>
</div>
{% if (fieldset == false) and (offerte_list == false) %}{% render '@notice-bar--error', {overlapbox:true, utilitybar:false}, true %}{% endif %}
<div class="o-overlapBox__body flex-grow-1">
<div class="o-overlapBox__content">
{% if loading %}
<div class="d-flex flex-column align-items-center justify-content-center absolute">
{% render '@loader--wave' %}
<span class="text-muted mt-3">Taak laden...</span>
</div>
{% elif fieldset %}
{% render '@fieldset' %}
{% elif offerte_list %}
{% render '@configuration-group--planner', {label:"Offertes", title1:"Offerte V1", title2:"Offerte V2", add:true, badge:true}, true %}
{% else %}
<div class="o-overlapBox__contentHeader">
{% render '@teamlist-group--add-single', {info:true}, true %}
{% render '@datepicker--circle', {info:true}, true %}
</div>
<div class="m-tabsGroup -overlapBox">
{% render '@tabs--overlapbox', {items: items, count: count}, true %}
<div class="tab-content">
<div class="tab-pane show active" id="nav-tasks" role="tabpanel" aria-labelledby="nav-tasks-tab">
{% render '@form-heading' %}
{% render '@input-field-group' %}
{% render '@input-field-group--disabled' %}
{% render '@select-field' %}
{% render '@select-field--disabled' %}
{% render '@teamlist-group--with-add-button' %}
{% render '@textarea-group' %}
{% render '@datepicker' %}
{% render '@datepicker--disabled' %}
{% render '@timepicker' %}
{% render '@timepicker--disabled' %}
{% render '@fieldset--tabs', {info:true}, true %}
{% render '@configuration-group--radio' %}
{% render '@configuration-group--notes' %}
{% render '@configuration-group--disabled' %}
{% render '@configuration-group--documentation-checklist' %}
{% render '@configuration-group--documentation-checklist-tabs' %}
</div>
<div class="tab-pane" id="nav-attachment" role="tabpanel" aria-labelledby="nav-attachment-tab">
{% render '@upload-field' %}
{% render '@add-item' %}
{% render '@add-item--disabled' %}
</div>
<div class="tab-pane" id="nav-activities" role="tabpanel" aria-labelledby="nav-activities-tab">
{% render '@configuration-group--table' %}
{% render '@configuration-group--planner-with-buttons' %}
{% render '@advanced-radio-group' %}
{% render '@advanced-radio-group--open' %}
{% render '@advanced-radio-group--tabs' %}
{% render '@advanced-radio-group--disabled' %}
{% render '@advanced-radio-group--textarea-open' %}
{% render '@map-group' %}
{% render '@checkbox' %}
</div>
<div class="tab-pane" id="nav-comments" role="tabpanel" aria-labelledby="nav-comments-tab">
{% render '@comment-group--add-comment-paragraph', { button_text:"Plaatsen" }, true %}
{% render '@comment-group--circles' %}
{% render '@comment-group--buttons' %}
{% render '@comment-group' %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="o-overlapBox__footer d-flex align-items-center">
<div class="d-flex h-100 w-100 justify-content-between align-items-center">
<div class="d-flex align-items-center">
{% render '@circle--filled-bg', {icon:"save"}, true %}
<span class="text-muted d-none d-sm-block px-2 pl-md-3"><span class="d-inline-block">Laatst opgeslagen:</span> <span class="d-inline-block">3 seconden geleden</span></span>
</div>
{% render '@button--border-icon-left', {icon:"checkmark", text:"Taak voltooien"}, true %}
</div>
</div>
</div>
{
"title": "Bestelgegevens",
"loading": false,
"fieldset": false,
"offerte_list": false,
"locked": false,
"info": false
}
Add the .-locked class to the .o-overlapBox div. View and download buttons still need to be available, to distinguish them, add .-download or .-view classes to the wrapping .a-circle buttons.