<div class="o-overlapBox js-resizable d-flex flex-column ">
<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="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 d-flex flex-wrap">
<label class="flex-grow-1">Aanwezigen</label>
<input type="text" class="js-tagsinput cursor-pointer form-control" placeholder="Voeg namen toe">
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Aanwezigen</label>
<input type="text" value="Ruerd Visser,Tjitte Bouma,Mathijs Bannink,Annemarie Simons,Camille Casselman" class="js-tagsinput cursor-pointer form-control" placeholder="Voeg namen toe">
</div>
<div class="form-group d-flex flex-wrap">
<label class="flex-grow-1">Aanwezigen</label>
<input type="text" value="Ruerd Visser,Tjitte Bouma,Mathijs Bannink,Annemarie Simons,Camille Casselman" class="js-tagsinput cursor-pointer form-control" placeholder="Voeg namen toe" disabled>
</div>
<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 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="customRadio98832" name="configuratieundefined" value="" class="custom-control-input">
<label class="custom-control-label cursor-pointer absolute d-flex align-items-center" for="customRadio98832"></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="#collapseListGroup90652" aria-expanded="false" aria-controls="collapseListGroup90652">
<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="collapseListGroup90652">
<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 -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="customRadio57419" name="configuratie-disabled" value="" class="custom-control-input" disabled checked>
<label class="custom-control-label absolute d-flex align-items-center" for="customRadio57419"></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="#collapseListGroup81489" aria-expanded="false" aria-controls="collapseListGroup81489">
<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="collapseListGroup81489">
<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">
<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="#collapseListGroup73678" aria-expanded="false" aria-controls="collapseListGroup73678">
<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="collapseListGroup73678">
<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="#collapseListGroup60918" aria-expanded="false" aria-controls="collapseListGroup60918">
<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="collapseListGroup60918">
<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="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>Voorontwerp Elkien V1</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="d-flex flex-wrap pl-3 pr-3 pl-md-4 pr-md-4 mb-3">
<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-warning btn-sm -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">
Afgewezen
</button></li>
<li class="flex-grow-1"><button type="button" class="btn btn-sm btn-outline-dark -iconRight w-100">
Goedgekeurd
</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="#collapseListGroup3935" aria-expanded="false" aria-controls="collapseListGroup3935">
<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="collapseListGroup3935">
<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="customRadio59012" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio59012">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="customRadio96458" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio96458">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="customRadio61086" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio61086">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="customRadio61090" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio61090">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="customRadio75894" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio75894">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="customRadio34875" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio34875">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="customRadio90140" name="advanced" value="Ja" class="custom-control-input" disabled checked>
<label class="custom-control-label d-flex align-items-center" for="customRadio90140">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="customRadio74611" name="advanced" value="Nee" class="custom-control-input" disabled>
<label class="custom-control-label d-flex align-items-center" for="customRadio74611">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="customRadio38961" name="advanced" value="Ja" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio38961">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="customRadio78200" name="advanced" value="Nee" class="custom-control-input">
<label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio78200">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>
<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 content section (jan 2022)
Added add owner and deadline fields (jan 2022)
Added locked (dec 2021)
#}
<div class="o-overlapBox js-resizable d-flex flex-column {% 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 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 %}
{% 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 '@tagsinput-group' %}
{% render '@tagsinput-group--predefined-tags' %}
{% render '@tagsinput-group--disabled' %}
{% render '@upload-field' %}
{% render '@add-item' %}
{% render '@add-item--disabled' %}
{% render '@configuration-group--radio' %}
{% render '@configuration-group--disabled' %}
{% render '@configuration-group--table' %}
{% render '@configuration-group--planner-with-buttons' %}
{% render '@configuration-group--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' %}
{% 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.