UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

3,623 lines 110 kB
<!DOCTYPE html>
<html lang="no" class="">

<head>
  <title>DESIGNSYSTEM PROTOTYPE - Altinn</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <meta name="format-detection" content="telephone=no">
  <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">

  <!-- Favicons -->
  <link rel="apple-touch-icon" sizes="57x57" href="../../images/favicons/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="../../images/favicons/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="../../images/favicons/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="../../images/favicons/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="../../images/favicons/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="../../images/favicons/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="../../images/favicons/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="../../images/favicons/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="../../images/favicons/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" href="../../images/favicons/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="../../images/favicons/android-chrome-192x192.png" sizes="192x192">
  <link rel="icon" type="image/png" href="../../images/favicons/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="../../images/favicons/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="../../images/favicons/manifest.json">
  <link rel="mask-icon" href="../../images/favicons/safari-pinned-tab.svg">
  <meta name="apple-mobile-web-app-title" content="Altinn">
  <meta name="application-name" content="Altinn">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-TileImage" content="/mstile-144x144.png">
  <meta name="theme-color" content="#ffffff">

  <!-- FortAwesome icons-->
  <script src="https://use.fortawesome.com/ed31cded.js"></script>
  <script src="https://use.fortawesome.com/df832575.js"></script>

  <!-- Theme stylesheet -->
  <link rel="stylesheet" href="../../css/style.prototype.altinn.css" type="text/css" media="screen">
  <link rel="stylesheet" href="../../css/style.dist.brreg.css" type="text/css" media="screen">
  <link rel="stylesheet" href="../../css/style.dist.altinnett.css" type="text/css" media="screen">

  <script type="text/javascript">
    if (self === top) {
      var elm = document.getElementsByTagName("html")[0];
      elm.style.display = "none";
    }
  </script>


  <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
  <!-- never cache patterns -->
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="pragma" content="no-cache" />

  <link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1572447195570" media="all">
  <link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1572447195570" media="all" />

  <!-- End Pattern Lab -->

</head>

<body class="" id="top">
  <div class="a-sg-content-preloader">
    <div class="a-sg-content-preloader-status">&nbsp;</div>
  </div>
  <!-- START: 01-molekyler-05-lister-10-♺-liste-unummerert-radvarianter JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable, toggleRoleRights.js hvis klasse a-js-toggleRights -->
  <!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
  <div class="a-list-container ">
    <ul class="a-list    ">
      <li class="a-dotted a-selectable" id="firstRow">
        <div class="row ">
          <div class="a-w-7 text-center d-none d-md-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-private   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-9 col-sm-5 col-md-3">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-fontBold"> 
    Navn Navnesenku
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-3 d-none d-sm-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            2 roller







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="a-hiddenWhenSelected">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->


            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#" class="a-btn-blue-noUnderline text-right a-fontBold a-fullWidthLink collapsed a-hiddenWhenExpanded pr-0 pr-md-5 " data-toggle="collapse" data-target="#collapseIdSample" aria-controls="collapseIdSample">
  <span class='d-none d-sm-block'>Gi rettigheter</span>
  
</a>
            <!-- END: 00-atomer-02-lenker-00-link -->




            <span class="a-fontBold a-visibleWhenSelected d-none d-sm-block"> 
    Lagt til
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col pr-0 pr-md-5 text-right a-visibleWhenSelected">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-fontBold"> 
    Lagt til
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
        <div class="col-12 collapse" id="collapseIdSample" aria-expanded="false" role="tabpanel">
          <!-- START: 01-molekyler-05-lister-_00-liste-ekspanderbart-innhold -->

          <!-- START: 01-molekyler-04-grupper-02-midtstilte-valgknapper-med-tekst JS doc: addRightsTableHandler.js for prototype only -->
          <div id="collapseIdSampleContent">
            <div class="a-list-content">
              <div class="row">
                <div class="col ml-0 ml-md-7">
                  Velg roller den ansatte skal ha:
                </div>

                <div class="col-12 col-sm-auto pr-1 pr-md-4 mt-1 mt-md-0">
                  <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
                  <button type="button" class="a-btn-link  " aria-label="Fjern alle roller">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exit ai-nw  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->



    <span class="a-btn-icon-text a-btn-black-noUnderline a-fontBold">
      Fjern alle
    </span>


</button>


                  <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->

                </div>
              </div>

              <div class="text-sm-center mt-1">
                <!-- START: 00-atomer-01-forms-03-valgknapp -->
                <div class="a-switch   ">
                  <input id="filterID14" class="sr-only" type="checkbox" name="filterID14" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID14" class="a-switch-label ">
      Begrenset signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID15" class="sr-only" type="checkbox" name="filterID15" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID15" class="a-switch-label ">
      Lønn og personalmedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID16" class="sr-only" type="checkbox" name="filterID16" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID16" class="a-switch-label ">
      Primærnæring og næringsmidler
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID17" class="sr-only" type="checkbox" name="filterID17" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID17" class="a-switch-label ">
      Regnskapsfører med signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID18" class="sr-only" type="checkbox" name="filterID18" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID18" class="a-switch-label ">
      Regnskapsfører lønn
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID19" class="sr-only" type="checkbox" name="filterID19" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID19" class="a-switch-label ">
      Basisrolle
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID20" class="sr-only" type="checkbox" name="filterID20" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID20" class="a-switch-label ">
      Regnskapsfører uten signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID21" class="sr-only" type="checkbox" name="filterID21" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID21" class="a-switch-label ">
      Revisorattester - MVA kompensasjon
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID22" class="sr-only" type="checkbox" name="filterID22" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID22" class="a-switch-label ">
      Utfyller/Innsender
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID23" class="sr-only" type="checkbox" name="filterID23" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID23" class="a-switch-label ">
      Ansvarlig revisor
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID24" class="sr-only" type="checkbox" name="filterID24" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID24" class="a-switch-label ">
      Revisormedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID25" class="sr-only" type="checkbox" name="filterID25" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID25" class="a-switch-label ">
      Revisorrettighet
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID26" class="sr-only" type="checkbox" name="filterID26" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID26" class="a-switch-label ">
      Regnskapsmedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>

                <!-- END: 00-atomer-01-forms-03-valgknapp -->

              </div>



            </div>

            <!-- START: 01-molekyler-20-modalelementer-20-ferdigsegment -->
            <div class="a-list-fullWidthRow">
              <div class="modal-table-segment-box"></div>
              <div class="modal-table-segment ">

                <div class="float-right mt-2">
                  <span class="mr-3">
            <!-- START: 00-atomer-03-knapper-10-knapp -->
<button
   type="button" 
   onclick="$(this).closest('li').addClass('a-success a-disabled');" 
  class="a-btn a-btn-success collapsed a-js-enableWhenValid"
  
  
  data-toggle="collapse"
  
  
  
  data-target="#collapseIdSample"
  
   
   data-set-selected-target="#firstRow">
  
    Ferdig
  
</button>

<!-- END: 00-atomer-03-knapper-10-knapp -->

          </span>
                  <span class="mr-3">
            <!-- START: 00-atomer-03-knapper-15-♺-knapp-link -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button
   type="button" 
  
  class="a-btn-link collapsed "
  
  
  data-toggle="collapse"
  
  
  
  data-target="#collapseIdSample"
  
   
  >
  <span>
    Avbryt
  </span>
                  </button>

                  <!-- END: 00-atomer-03-knapper-10-knapp -->


                  <!-- END: 00-atomer-03-knapper-15-♺-knapp-link -->

                  </span>
                </div>

              </div>
            </div>

            <!-- END: 01-molekyler-20-modalelementer-20-ferdigsegment -->

          </div>
          <!-- END: 01-molekyler-04-grupper-02-midtstilte-valgknapper-med-tekst -->



          <!-- END: 01-molekyler-05-lister-_00-liste-ekspanderbart-innhold -->

        </div>
      </li>
      <li class="a-dotted a-disabled a-success a-selectable a-selected" id="secondRow">
        <div class="row ">
          <div class="a-w-7 text-center d-none d-md-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-private   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-12 col-sm-5 col-md-3">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-fontBold"> 
    Navn Navnesen
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-3 d-none d-sm-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            2 roller







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div>
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->


            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#collapseIdSample2" class="a-btn-blue-noUnderline text-right a-fullWidthLink a-fontBold a-hiddenWhenSelected pr-0 pr-md-5 " data-toggle="collapse" data-target="##collapseIdSample2" aria-controls="#collapseIdSample2" data-set-selected-target="#secondRow">
  <span class='d-none d-sm-block'>Gi rettigheter</span>
  
</a>
            <!-- END: 00-atomer-02-lenker-00-link -->





            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col d-none d-sm-block a-visibleWhenSelected text-right pr-0 pr-md-5">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-fontBold a-visibleWhenSelected"> 
    Lagt til
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
        <div class="col-12 collapse" id="collapseIdSample2" aria-expanded="false" role="tabpanel">
          <!-- START: 01-molekyler-05-lister-_00-liste-ekspanderbart-innhold -->

          <!-- START: 01-molekyler-04-grupper-02-midtstilte-valgknapper-med-tekst JS doc: addRightsTableHandler.js for prototype only -->
          <div id="collapseIdSample2Content">
            <div class="a-list-content">
              <div class="row">
                <div class="col ml-0 ml-md-7">
                  Velg roller den ansatte skal ha:
                </div>

                <div class="col-12 col-sm-auto pr-1 pr-md-4 mt-1 mt-md-0">
                  <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
                  <button type="button" class="a-btn-link  " aria-label="Fjern alle roller">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exit ai-nw  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->



    <span class="a-btn-icon-text a-btn-black-noUnderline a-fontBold">
      Fjern alle
    </span>


</button>


                  <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->

                </div>
              </div>

              <div class="text-sm-center mt-1">
                <!-- START: 00-atomer-01-forms-03-valgknapp -->
                <div class="a-switch   ">
                  <input id="filterID14" class="sr-only" type="checkbox" name="filterID14" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID14" class="a-switch-label ">
      Begrenset signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID15" class="sr-only" type="checkbox" name="filterID15" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID15" class="a-switch-label ">
      Lønn og personalmedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID16" class="sr-only" type="checkbox" name="filterID16" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID16" class="a-switch-label ">
      Primærnæring og næringsmidler
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID17" class="sr-only" type="checkbox" name="filterID17" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID17" class="a-switch-label ">
      Regnskapsfører med signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID18" class="sr-only" type="checkbox" name="filterID18" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID18" class="a-switch-label ">
      Regnskapsfører lønn
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID19" class="sr-only" type="checkbox" name="filterID19" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID19" class="a-switch-label ">
      Basisrolle
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID20" class="sr-only" type="checkbox" name="filterID20" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID20" class="a-switch-label ">
      Regnskapsfører uten signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID21" class="sr-only" type="checkbox" name="filterID21" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID21" class="a-switch-label ">
      Revisorattester - MVA kompensasjon
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID22" class="sr-only" type="checkbox" name="filterID22" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID22" class="a-switch-label ">
      Utfyller/Innsender
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID23" class="sr-only" type="checkbox" name="filterID23" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID23" class="a-switch-label ">
      Ansvarlig revisor
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID24" class="sr-only" type="checkbox" name="filterID24" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID24" class="a-switch-label ">
      Revisormedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID25" class="sr-only" type="checkbox" name="filterID25" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID25" class="a-switch-label ">
      Revisorrettighet
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID26" class="sr-only" type="checkbox" name="filterID26" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID26" class="a-switch-label ">
      Regnskapsmedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>

                <!-- END: 00-atomer-01-forms-03-valgknapp -->

              </div>



            </div>

            <!-- START: 01-molekyler-20-modalelementer-20-ferdigsegment -->
            <div class="a-list-fullWidthRow">
              <div class="modal-table-segment-box"></div>
              <div class="modal-table-segment ">

                <div class="float-right mt-2">
                  <span class="mr-3">
            <!-- START: 00-atomer-03-knapper-10-knapp -->
<button
   type="button" 
  
  class="a-btn a-btn-success a-js-enableWhenValid"
  
  
  data-toggle="collapse"
  
  
  
  data-target="#collapseIdSample2"
  
   
   data-set-selected-target="#secondRow">
  
    Ferdig
  
</button>

<!-- END: 00-atomer-03-knapper-10-knapp -->

          </span>
                  <span class="mr-3">
            <!-- START: 00-atomer-03-knapper-15-♺-knapp-link -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button
   type="button" 
  
  class="a-btn-link "
  
  
  data-toggle="collapse"
  
  
  
  data-target="#collapseIdSample2"
  
   
   data-set-selected-target="#secondRow">
  <span>
    Avbryt
  </span>
                  </button>

                  <!-- END: 00-atomer-03-knapper-10-knapp -->


                  <!-- END: 00-atomer-03-knapper-15-♺-knapp-link -->

                  </span>
                </div>

              </div>
            </div>

            <!-- END: 01-molekyler-20-modalelementer-20-ferdigsegment -->

          </div>
          <!-- END: 01-molekyler-04-grupper-02-midtstilte-valgknapper-med-tekst -->



          <!-- END: 01-molekyler-05-lister-_00-liste-ekspanderbart-innhold -->

        </div>
      </li>
      <li class="a-dotted a-selectable a-disabled a-danger a-selected" id="thirdRow">
        <div class="row ">
          <div class="a-w-7 text-center d-none d-md-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-private   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-12 col-sm-5 col-md-3">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-fontBold"> 
    Navn Navnesen
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-3 d-none d-sm-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            2 roller







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div>
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->


            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#collapseIdSample3" class="a-btn-blue-noUnderline text-right a-fullWidthLink a-hiddenWhenSelected pr-0 pr-md-5 " data-toggle="collapse" data-target="##collapseIdSample3" aria-controls="#collapseIdSample3" data-set-selected-target="#thirdRow">
  <b class='d-none d-sm-block'>Gi rettigheter</b>
  
</a>
            <!-- END: 00-atomer-02-lenker-00-link -->





            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col d-none d-sm-block text-right a-visibleWhenSelected pr-0 pr-md-5">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-fontBold"> 
    Slettet
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
        <div class="col-12 collapse" id="collapseIdSample3" aria-expanded="false" role="tabpanel">
          <!-- START: 01-molekyler-05-lister-_00-liste-ekspanderbart-innhold -->

          <!-- START: 01-molekyler-04-grupper-02-midtstilte-valgknapper-med-tekst JS doc: addRightsTableHandler.js for prototype only -->
          <div id="collapseIdSample3Content">
            <div class="a-list-content">
              <div class="row">
                <div class="col ml-0 ml-md-7">
                  Velg roller den ansatte skal ha:
                </div>

                <div class="col-12 col-sm-auto pr-1 pr-md-4 mt-1 mt-md-0">
                  <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
                  <button type="button" class="a-btn-link  " aria-label="Fjern alle roller">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exit ai-nw  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->



    <span class="a-btn-icon-text a-btn-black-noUnderline a-fontBold">
      Fjern alle
    </span>


</button>


                  <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->

                </div>
              </div>

              <div class="text-sm-center mt-1">
                <!-- START: 00-atomer-01-forms-03-valgknapp -->
                <div class="a-switch   ">
                  <input id="filterID14" class="sr-only" type="checkbox" name="filterID14" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID14" class="a-switch-label ">
      Begrenset signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID15" class="sr-only" type="checkbox" name="filterID15" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID15" class="a-switch-label ">
      Lønn og personalmedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID16" class="sr-only" type="checkbox" name="filterID16" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID16" class="a-switch-label ">
      Primærnæring og næringsmidler
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID17" class="sr-only" type="checkbox" name="filterID17" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID17" class="a-switch-label ">
      Regnskapsfører med signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID18" class="sr-only" type="checkbox" name="filterID18" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID18" class="a-switch-label ">
      Regnskapsfører lønn
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID19" class="sr-only" type="checkbox" name="filterID19" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID19" class="a-switch-label ">
      Basisrolle
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID20" class="sr-only" type="checkbox" name="filterID20" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID20" class="a-switch-label ">
      Regnskapsfører uten signeringsrett
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID21" class="sr-only" type="checkbox" name="filterID21" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID21" class="a-switch-label ">
      Revisorattester - MVA kompensasjon
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID22" class="sr-only" type="checkbox" name="filterID22" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID22" class="a-switch-label ">
      Utfyller/Innsender
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID23" class="sr-only" type="checkbox" name="filterID23" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID23" class="a-switch-label ">
      Ansvarlig revisor
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID24" class="sr-only" type="checkbox" name="filterID24" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID24" class="a-switch-label ">
      Revisormedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID25" class="sr-only" type="checkbox" name="filterID25" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID25" class="a-switch-label ">
      Revisorrettighet
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>
                <div class="a-switch   ">
                  <input id="filterID26" class="sr-only" type="checkbox" name="filterID26" value="checkbutton-read" class="sr-only" data-toggle="popover" data-placement="bottom" data-animation="false" data-popover-content="popoverWithIconToggle">
                  <label for="filterID26" class="a-switch-label ">
      Regnskapsmedarbeider
    </label>
                  <div id="popoverWithIconToggle" class="d-none">
                    <div class="pb-1">Dette er en popover tekst</div>
                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn a-btn-danger mr-1">
  
    knapp
  
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                    <!-- START: 00-atomer-03-knapper-10-knapp -->
                    <button type="button" class="a-btn-link a-linkDanger mr-1">
  <span>
    link
  </span>
</button>

                    <!-- END: 00-atomer-03-knapper-10-knapp -->

                  </div>
                </div>

                <!-- END: 00-atomer-01-forms-03-valgknapp -->

              </div>



            </div>

            <!-- START: 01-molekyler-20-modalelementer-20-ferdigsegment -->
            <div class="a-list-fullWidthRow">
              <div class="modal-table-segment-box"></div>
              <div class="modal-table-segment ">

                <div class="float-right mt-2">
                  <span class="mr-3">
            <!-- START: 00-atomer-03-knapper-10-knapp -->
<button
   type="button" 
  
  class="a-btn a-btn-success a-js-enableWhenValid"
  
  
  data-toggle="collapse"
  
  
  
  data-target="#collapseIdSample3"
  
   
   data-set-selected-target="#thirdRow">
  
    Ferdig
  
</button>

<!-- END: 00-atomer-03-knapper-10-knapp -->

          </span>
                  <span class="mr-3">
            <!-- START: 00-atomer-03-knapper-15-♺-knapp-link -->
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button
   type="button" 
  
  class="a-btn-link "
  
  
  data-toggle="collapse"
  
  
  
  data-target="#collapseIdSample3"
  
   
   data-set-selected-target="#thirdRow">
  <span>
    Avbryt
  </span>
                  </button>

                  <!-- END: 00-atomer-03-knapper-10-knapp -->


                  <!-- END: 00-atomer-03-knapper-15-♺-knapp-link -->

                  </span>
                </div>

              </div>
            </div>

            <!-- END: 01-molekyler-20-modalelementer-20-ferdigsegment -->

          </div>
          <!-- END: 01-molekyler-04-grupper-02-midtstilte-valgknapper-med-tekst -->



          <!-- END: 01-molekyler-05-lister-_00-liste-ekspanderbart-innhold -->

        </div>
      </li>
      <li class="a-dotted">
        <div class="row ">
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Vanlig rad, ikke klikkbar







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted">
        <div class="row ">
          <div class="col-4 pr-1">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Vanlig rad med flere kolonner







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-4 pr-1 d-none d-md-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Denne kolonnen skjules på liten skjerm, neste kolonne tar plassen som frigjøres







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            En særdeles lang tekst som går over flere linjer med lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit purus eu vehicula bibendum. Duis luctus magna ac dui convallis iaculis.







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-danger a-selectable a-selected">
        <div class="row ">
          <div class="col a-lineThrough-selected">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Eksempel på valgt rad som gir rød bakgrunn og strikethrough på tekst







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-clickable">
        <div class="row ">
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Blå bakgrunn ved hover, klikkbar rad







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-disabled">
        <div class="row ">
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Disablet bakgrunn - ikke klikkbar







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-disabled a-danger">
        <div class="row ">
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Rød disablet bakgrunn - ikke klikkbar







            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-deadline   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-disabled a-success">
        <div class="row ">
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Grønn disablet bakgrunn - ikke klikkbar







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted">
        <div class="row ">
          <div class="col-12 col-md-2">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            06.01.2017







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-12 col-md-2">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-fontBold"> 
     Rolle tildelt 
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-12 col-md-8">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-blueText a-fontBold text-uppercase"> 
     Pelle Hansen 
     </span> fikk rollen






            <span class="a-fontBold"> 
     Begrenset signeringsrettighet 
     </span> . Det var






            <span class="a-blueText a-fontBold text-uppercase"> 
    David Karlsson
     </span> som tildelte rollen.











            <!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
            <a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-js-persistPopover a-js-popoverBig a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click"
              data-popover-class="popover-big" data-popover-content="popoverSamtykke1">
  <span class="sr-only">
    Klikk for å se mer informasjon
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconInitial">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-help-popicon   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconExpanded">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-circle-exit   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

    <span class="sr-only">Vis mer info</span>
</a>



            <div id="popoverSamtykke1" style="display: none">
              <div class="container">
                <div class="row">
                  <div class="col-xl-10 offset-xl-1">
                    <div class="a-modal-body">
                      <!-- START: 01-molekyler-00-tekst-46-tekstinnhold-beskrivelse -->
                      <h2 class="a-h3 mb-1">Samtykke til medlertidig innsyn er git til Altinn1 ANS</h2>
                      <span>Velkommen til samtykkeløsningen</span>
                      <div class="mt-2">
                        <h3 class="a-fontReg mb-1">Følgende informasjon er omfattet av samtykket: </h3>
                        <span class="a-fontBold">Summert skattegrunnlag fra Skattetaten</span>
                        <p> Innsyn i ditt skattegrunnlag.</p>
                      </div>

                      <!-- END: 01-molekyler-00-tekst-46-tekstinnhold-beskrivelse -->

                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div id="popoverSamtykke1" style="display: none">
              <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->


              Dette er en tekst








              <!-- START: 00-atomer-02-lenker-00-link -->
              <a href="http://www.altinn.no" class=" ">
  med en lenke som står i løpende tekst
  
</a>
              <!-- END: 00-atomer-02-lenker-00-link -->





              og man kan ha mer tekst etter.





              <!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->

            </div>

            <!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->


            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-clickable a-fontSizeM a-fontBold a-list-item-loadMore" role="button">
        <div class="row ">
          <div class="a-w-7 text-center d-none d-md-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-plus   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-plus  d-md-none "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            Klikkbar rad med tekst og ikon







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-clickable">
        <div class="row ">
          <div class="a-w-7 text-center d-none d-md-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-plus   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col a-fontBold">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-plus  d-md-none mx-1 "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





            <span class="a-fontBold"> 
    Klikkbar rad med tekst og ikon med mye luft
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable a-success">
        <div class="row ">
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-circle-plus  a-blueText "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            Rollenavn







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto text-right">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->





            <!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
            <a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-js-persistPopover a-js-popoverBig a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click"
              data-popover-class="popover-big" data-content="Innholdet i popover fra spørsmålstegn-ikonet kommer her.." data-popover-content="popoverSampleContent">
  <span class="sr-only">
    Klikk for å se mer informasjon
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconInitial">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-help-popicon   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconExpanded">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-circle-exit   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

    <span class="sr-only">Vis mer info</span>
</a>




            <div id="popoverSampleContent" style="display: none">
              <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->


              Dette er en tekst








              <!-- START: 00-atomer-02-lenker-00-link -->
              <a href="http://www.altinn.no" class=" ">
  med en lenke som står i løpende tekst
  
</a>
              <!-- END: 00-atomer-02-lenker-00-link -->





              og man kan ha mer tekst etter.





              <!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->

            </div>

            <!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->


            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable a-success">
        <div class="row ">
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-circle-plus  a-blueText a-hiddenWhenSelected "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            Rollenavn







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->



            <!-- START: 00-atomer-02-lenker-36-link-ikon -->
            <a href="#" class="a-linkIcon a-btn-blue-noUnderline pr-0 ">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-sm ai-edit   "></i>


              <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

              <span class="d-none d-lg-inline a-fontSizeXS pr-1">
    Rediger
  </span>
            </a>

            <!-- END: 00-atomer-02-lenker-36-link-ikon -->








            <!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
            <a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-js-persistPopover a-js-popoverBig a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click"
              data-popover-class="popover-big a-hiddenWhenSelected" data-content="Innholdet i popover fra spørsmålstegn-ikonet kommer her.." data-popover-content="popoverSampleContent">
  <span class="sr-only">
    Klikk for å se mer informasjon
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconInitial">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-help-popicon   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconExpanded">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-circle-exit   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

    <span class="sr-only">Vis mer info</span>
</a>




            <div id="popoverSampleContent" style="display: none">
              <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->


              Dette er en tekst








              <!-- START: 00-atomer-02-lenker-00-link -->
              <a href="http://www.altinn.no" class=" ">
  med en lenke som står i løpende tekst
  
</a>
              <!-- END: 00-atomer-02-lenker-00-link -->





              og man kan ha mer tekst etter.





              <!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->

            </div>

            <!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->



            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#" class="no-decoration a-visibleWhenSelected ">
  Angre
  
</a>
            <!-- END: 00-atomer-02-lenker-00-link -->





            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-undo  a-visibleWhenSelected "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable a-success a-selected">
        <div class="row ">
          <div class="col">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-circle-plus  a-blueText a-hiddenWhenSelected "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            Rollenavn







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->



            <!-- START: 00-atomer-02-lenker-36-link-ikon -->
            <a href="#" class="a-linkIcon a-btn-blue-noUnderline a-hiddenWhenSelected pr-0 ">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-sm ai-edit   "></i>


              <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

              <span class="d-none d-lg-inline a-fontSizeXS pr-1">
    Rediger
  </span>
            </a>

            <!-- END: 00-atomer-02-lenker-36-link-ikon -->








            <!-- START: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon JS doc: popover.js -->
            <a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-js-persistPopover a-hiddenWhenSelected a-js-popoverBig a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom"
              data-trigger="click" data-popover-class="popover-big" data-content="Innholdet i popover fra spørsmålstegn-ikonet kommer her.." data-popover-content="popoverSampleContent">
  <span class="sr-only">
    Klikk for å se mer informasjon
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconInitial">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-help-popicon   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack a-js-popoverIconExpanded">
    <i class="ai ai-stack-1x ai-plain-circle"></i>
<i class="ai-stack-1x ai ai-circle-exit   "    ></i>
  </span>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

    <span class="sr-only">Vis mer info</span>
</a>




            <div id="popoverSampleContent" style="display: none">
              <!-- START: 00-atomer-07-tekst-_00-varsel-innhold -->


              Dette er en tekst








              <!-- START: 00-atomer-02-lenker-00-link -->
              <a href="http://www.altinn.no" class=" ">
  med en lenke som står i løpende tekst
  
</a>
              <!-- END: 00-atomer-02-lenker-00-link -->





              og man kan ha mer tekst etter.





              <!-- END: 00-atomer-07-tekst-_00-varsel-innhold -->

            </div>

            <!-- END: 00-atomer-05-Ekspansjonsknapper-32-link-med-popover-ikon -->

            <span class="d-none d-sm-block a-visibleWhenSelected"> 
    Angre
     </span>






            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-undo  a-visibleWhenSelected a-danger "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable a-danger">
        <div class="row ">
          <div class="col" data-searchable="true">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-js-sortValue a-lineThrough-selected"> 
    Patent, varemerke og design
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="d-none d-sm-block a-hiddenWhenSelected a-hiddenWhenDeleted"> 
    Fjern
     </span>






            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-circle-exit  a-danger a-hiddenWhenSelected a-hiddenWhenDeleted "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





            <span class="d-none d-sm-block a-visibleWhenSelected a-hiddenWhenDeleted"> 
    Angre
     </span>






            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-undo  a-danger a-visibleWhenSelected a-hiddenWhenDeleted "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





            <span class="d-none d-sm-block a-visibleWhenDeleted"> 
    Slettet
     </span>






            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-fw  a-danger a-visibleWhenDeleted "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable a-selected a-danger">
        <div class="row ">
          <div class="col" data-searchable="true">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-js-sortValue a-lineThrough-selected"> 
    Privatperson begrensede rettigheter, med litt ekstra tekst slik at denne går over to linjer
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="d-none d-sm-block a-hiddenWhenSelected a-hiddenWhenDeleted"> 
    Fjern
     </span>






            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-circle-exit  a-danger a-hiddenWhenSelected a-hiddenWhenDeleted "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





            <span class="d-none d-sm-block a-visibleWhenSelected a-hiddenWhenDeleted"> 
    Angre
     </span>






            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-undo  a-danger a-visibleWhenSelected a-hiddenWhenDeleted "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





            <span class="d-none d-sm-block a-visibleWhenDeleted"> 
    Slettet
     </span>






            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-fw  a-danger a-visibleWhenDeleted "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable a-selected a-success a-defaultCursor">
        <div class="row ">
          <div class="col-12 col-sm" data-searchable="true">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Egendefinert redigerbar rolle med ny rettighet.







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto mr-2 text-left">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Les">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-read   "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRights a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Skriv">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-write  a-clickable "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRights a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Signer">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sign  s-clickable "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->


            <span class="a-danger a-visibleWhenDisabled a-displayInlineBlock"> 
    Mangler tilgang
     </span>





            <span class="a-visibleWhenDeleted a-displayInlineBlock"> 
    Angre sletting
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRightsDelete a-hiddenWhenDeleted a-hiddenWhenDisabled a-displayInlineBlock  " aria-label="Slett rolle" title="Slett rolle">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-minus  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRightsDelete a-visibleWhenDeleted  a-displayInlineBlock  " aria-label="Angre slett rolle" title="Angre slett rolle" tabindex="-1">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-undo  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->



            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-fw  a-visibleWhenDisabled  a-displayInlineBlock "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable a-disabled a-danger">
        <div class="row ">
          <div class="col-12 col-sm" data-searchable="true">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            Egendefinert redigerbar rolle med manglende tilgang til rettighet.







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto mr-2 text-left">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Les" tabindex="-1">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-read   "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRights a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Skriv" tabindex="-1">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-write  a-clickable "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRights a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Signer" tabindex="-1">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sign  a-clickable "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->


            <span class="a-danger a-visibleWhenDisabled a-displayInlineBlock"> 
    Mangler tilgang
     </span>





            <span class="a-visibleWhenDeleted a-displayInlineBlock"> 
    Angre sletting
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRightsDelete a-hiddenWhenDeleted a-hiddenWhenDisabled a-displayInlineBlock  " aria-label="Slett rolle" title="Slett rolle" tabindex="-1">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-minus  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRightsDelete a-visibleWhenDeleted a-displayInlineBlock  " aria-label="Angre slett rolle" title="Angre slett rolle" tabindex="-1">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-undo  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->



            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-fw  a-visibleWhenDisabled  a-displayInlineBlock "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable a-defaultCursor">
        <div class="row ">
          <div class="col-12 col-sm" data-searchable="true">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
            <span class="a-js-sortValue"> 
    Egendefinert redigerbar rolle med eksisterende rettighet.
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto mr-2 text-left">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Les">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-read   "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRights a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Skriv">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-write  a-clickable "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRights a-hiddenWhenDeleted a-hiddenWhenDisabled  " aria-label="knapp med popover" title="Signer">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-sign  a-clickable "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->


            <span class="a-danger a-visibleWhenDisabled a-displayInlineBlock"> 
    Mangler tilgang
     </span>





            <span class="a-visibleWhenDeleted a-displayInlineBlock"> 
    Angre sletting
     </span>






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRightsDelete a-hiddenWhenDeleted a-hiddenWhenDisabled a-displayInlineBlock  " aria-label="Slett rolle" title="Slett rolle">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-minus  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->






            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn-link a-js-toggleRightsDelete a-visibleWhenDeleted a-displayInlineBlock  " aria-label="Angre slett rolle" title="Angre slett rolle" tabindex="-1">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-undo  a-danger "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->





</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->



            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai-fw  a-visibleWhenDisabled  a-displayInlineBlock "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->






            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
      </li>
      <li class="a-dotted a-selectable">
        <div class="row ">
          <div class="col-auto pr-2 pb-1 pb-md-0">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            ReceiverUser2







            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-12 d-md-none pb-1">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->


            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#" class="collapsed a-hiddenWhenExpanded a-noUnderline a-pr-half " data-toggle="collapse" data-target="#collapseIdSampleSertificate" aria-controls="collapseIdSampleSertificate">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-edit  a-hiddenWhenExpanded ai-left a-blueText "></i>


              <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

              <span>Rediger</span>

            </a>
            <!-- END: 00-atomer-02-lenker-00-link -->






            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#" class="a-visibleWhenExpanded " data-toggle="collapse" data-target="#collapseIdSampleSertificate" aria-controls="collapseIdSampleSertificate">
  <span>Avbryt</span>
  
</a>
            <!-- END: 00-atomer-02-lenker-00-link -->





            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-12 col-md-auto a-visibleWhenExpanded pr-2 pb-1 pb-md-0">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn a-btn-icon  " aria-label="knapp med popover">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exit  a-danger a-blueText ai-left "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->



    <span class="a-btn-icon-text ">
      Slett
    </span>


</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->



            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-12 col-md-auto a-visibleWhenExpanded pb-1 pb-md-0">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->




            <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
            <button type="button" class="a-btn a-btn-icon  " aria-label="knapp med popover">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-edit  a-blueText ai-left "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->



    <span class="a-btn-icon-text ">
      Endre
    </span>


</button>


            <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->



            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col a-visibleWhenExpanded">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
          <div class="col-auto text-right d-none d-md-block">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->


            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#" class="collapsed a-fullWidthLink a-hiddenWhenExpanded a-noUnderline a-pr-half " data-toggle="collapse" data-target="#collapseIdSampleSertificate" aria-controls="collapseIdSampleSertificate">
              <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
              <i class="ai ai-edit  a-hiddenWhenExpanded a-blueText "></i>


              <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

              <span>Rediger</span>

            </a>
            <!-- END: 00-atomer-02-lenker-00-link -->






            <!-- START: 00-atomer-02-lenker-00-link -->
            <a href="#" class="a-fullWidthLink a-fullWidthLink--underline a-visibleWhenExpanded a-pr-half " data-toggle="collapse" data-target="#collapseIdSampleSertificate" aria-controls="collapseIdSampleSertificate">
  <span>Avbryt</span>
  
</a>
            <!-- END: 00-atomer-02-lenker-00-link -->





            <!-- END: 01-molekyler-05-lister-_00-liste-innhold -->

          </div>
        </div>
        <div class="col-12 collapse" id="collapseIdSampleSertificate" aria-expanded="false" role="tabpanel">
          <!-- START: 01-molekyler-05-lister-_00-liste-ekspanderbart-innhold -->


          <!-- START: 01-molekyler-00-tekst-80-info-delete-add -->
          <div class="a-delete-add-container row">
            <div class="col pb-1 a-fontBold">Tittel på elementet</div>
            <div class="col-md-auto col-sm-12 pb-sm-1">
              <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
              <button type="button" class="a-btn a-btn-icon  " aria-label="knapp med popover" title="Tittel på elementet">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exit  a-danger ai-left "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->



    <span class="a-btn-icon-text ">
      Slett
    </span>


</button>


              <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->

            </div>
            <div class="col-12">Dette er en beskrivelse av elementet som er blitt lagt til</div>
          </div>
          <div class="row pb-1">
            <div class="col">
              <!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
              <button type="button" class="a-btn a-btn-icon a-btn-add a-add-certificate  " aria-label="knapp med popover">

    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-plus  a-blueText "    ></i>


<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->



    <span class="a-btn-icon-text ">
      Legg til
    </span>


</button>


              <!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->

            </div>
          </div>
          <!-- END: 01-molekyler-00-tekst-80-info-delete-add -->


          <!-- END: 01-molekyler-05-lister-_00-liste-ekspanderbart-innhold -->

        </div>
      </li>
    </ul>
  </div>
  <!-- END: 01-molekyler-05-lister-00-liste-unummerert -->


  <!-- END: 01-molekyler-05-lister-10-♺-liste-unummerert-radvarianter -->
  <!-- DO NOT REMOVE -->
  <script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
    {
      "cssEnabled": false,
      "patternLineageExists": true,
      "patternLineages": [{
        "lineagePattern": "molekyler-liste-unummerert",
        "lineagePath": "../../patterns/01-molekyler-05-lister-00-liste-unummerert\\01-molekyler-05-lister-00-liste-unummerert.html",
        "lineageState": "complete altinn altinnett"
      }],
      "lineage": [{
        "lineagePattern": "molekyler-liste-unummerert",
        "lineagePath": "../../patterns/01-molekyler-05-lister-00-liste-unummerert\\01-molekyler-05-lister-00-liste-unummerert.html",
        "lineageState": "complete altinn altinnett"
      }],
      "patternLineageRExists": false,
      "patternLineagesR": [],
      "lineageR": [],
      "patternLineageEExists": true,
      "patternDesc": "<p>NB: Det trengs en opprydning i de mulige radvariantene. Implementasjon av liste som støtter variabelt antall rader, kolonner og innhold i kolonnene. Målet er at denne skal erstatte den eksisterende listen, men arbeid på denne pågår enda.</p>\n<p>Egendefinert redigerbar rolle har ikon-knapper som &quot;toggles&quot; ved hjelp av javascript. Se sider-portal-andre-med-rettigheter-egendefinert-rolle-rediger for eksempel. Ikon-forklaring er også på eksempelsiden. Tastaturstøtte er implementert.</p>\n",
      "patternBreadcrumb": {
        "patternType": "molekyler",
        "patternSubtype": "lister"
      },
      "patternExtension": "mustache",
      "patternName": "♺ Liste Unummerert Radvarianter",
      "patternPartial": "molekyler-♺-liste-unummerert-radvarianter",
      "patternState": "needsrevalidation altinn",
      "patternEngineName": "mustache",
      "extraOutput": {}
    }
  </script>

  <script>
    /*!
     * scriptLoader - v0.1
     *
     * Copyright (c) 2014 Dave Olsen, http://dmolsen.com
     * Licensed under the MIT license
     *
     */

    var scriptLoader = {

      run: function(js, cb, target) {
        var s = document.getElementById(target + '-' + cb);
        for (var i = 0; i < js.length; i++) {
          var src = (typeof js[i] != 'string') ? js[i].src : js[i];
          var c = document.createElement('script');
          c.src = '../../' + src + '?' + cb;
          if (typeof js[i] != 'string') {
            if (js[i].dep !== undefined) {
              c.onload = function(dep, cb, target) {
                return function() {
                  scriptLoader.run(dep, cb, target);
                }
              }(js[i].dep, cb, target);
            }
          }
          s.parentNode.insertBefore(c, s);
        }
      }

    }
  </script>

  <script id="pl-js-polyfill-insert-1572447195570">
    (function() {
      if (self != top) {
        var cb = '1572447195570';
        var js = [];
        if (typeof document !== 'undefined' && !('classList' in document.documentElement)) {
          js.push('styleguide/bower_components/classList.min.js');
        }
        scriptLoader.run(js, cb, 'pl-js-polyfill-insert');
      }
    })();
  </script>

  <script id="pl-js-insert-1572447195570">
    (function() {
      if (self != top) {
        var cb = '1572447195570';
        var js = [{
          'src': 'styleguide/bower_components/jwerty.min.js',
          'dep': ['styleguide/js/patternlab-pattern.min.js']
        }];
        scriptLoader.run(js, cb, 'pl-js-insert');
      }
    })();
  </script>

  <!-- JQUERY -->
  <script src="../../js/jquery.min.js"></script>
  <!-- CODE PRETTIFY: Prettify code snippets in HTML -->
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>
  <!-- Bundled assets -->
  <script src="../../js/altinnPrototyping.vendor.js"></script>
  <!-- ALTINN DEV custom JavaScript -->
  <script src="./../../js/altinnPrototyping.js"></script>
  <!-- CSS uploader inline javascript -->
  <script type="text/javascript">
    <!-- Check if current Window is in iFrame -->

    $(document).ready(function() {
      if (self === top) {
        var $body = 'body';
        if ($('.sg-top').length) {
          var $panelBrsys = '.welcome-panel-brsys';
          var $panelaltinn = '.welcome-panel-altinn';
          switch (window.localStorage.getItem('selected_project')) {
            case 'altinn':
              $('link[href*="style.dist.altinnett.css"]').remove();
              $('link[href*="style.dist.brreg.css"]').remove();
              $($panelBrsys).hide();
              $($panelaltinn).show();
              break;
            case 'altinnett':
              $('link[href*="style.prototype.altinn.css"]').remove();
              $('link[href*="style.dist.brreg.css"]').remove();
              $($panelBrsys).hide();
              $($panelaltinn).show();
              break;
            case 'brsys':
              $('link[href*="style.prototype.altinn.css"]').remove();
              $('link[href*="style.dist.altinnett.css"]').remove();
              $($panelaltinn).hide();
              $($panelBrsys).show();
              break;
            default:
              $('link[href*="style.prototype.altinn.css"]').remove();
              $('link[href*="style.dist.altinnett.css"]').remove();
              $('link[href*="style.dist.brreg.css"]').attr({
                href: '../../css/style.prototype.altinn.css?1572447195570',
                media: 'all'
              });
              break;
          }
        } else {
          $('link[href*="style.prototype.altinn.css"]').remove();
          $('link[href*="style.dist.altinnett.css"]').remove();
          $('link[href*="style.dist.brreg.css"]').attr({
            href: '../../css/style.prototype.altinn.css?1572447195570',
            media: 'all'
          });
        }
      }
    });

    $(window).on('load', function() {
      if (self === top) {
        var elm = document.getElementsByTagName("html")[0];
        elm.style.display = "block";
      }
    });
  </script>
</body>

</html>