UNPKG

altinn-designsystem

Version:

Altinn Design system based on Pattern Lab.

1,806 lines 59.6 kB
<!-- START: 04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-roller-gi -->
<!-- START: 03-maler-portal-91-modal-01-modal -->
<div class="a-modal fade modal show " tabindex="-1" role="dialog" style="display: block">
  <div class="modal-dialog modal-lg" role="document">
    <div class="container a-p-static">
      <div class="row">
        <div class="col-xl-12">
          <!-- START: 01-molekyler-20-modalelementer-05-modal-header -->
          <div class="a-modal-top">
            <!-- START: 00-atomer-09-bilder-og-media-01-logo -->

            <img src="..&#x2F;..&#x2F;images&#x2F;a-logo-black.svg" alt="Altinn logo" class="a-logo a-modal-top-logo ">

            <!-- END: 00-atomer-09-bilder-og-media-01-logo -->

            <div class="a-modal-top-user">
              <!-- START: 00-atomer-07-tekst-40-innlogget -->
              <div class="a-personSwitcher " title="JAN PETTERSEN ">
                <span class="a-personSwitcher-name">
    <span class="d-block">JAN PETTERSEN</span>
                <span class="d-block"></span>
                </span>
                <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                <i class="ai ai-private-circle-big  a-personSwitcher-icon "></i>


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


              </div>

              <!-- END: 00-atomer-07-tekst-40-innlogget -->

            </div>
          </div>

          <!-- END: 01-molekyler-20-modalelementer-05-modal-header -->

        </div>
      </div>
      <div class="row">
        <div class="col-xl-10 offset-xl-1 a-p-static">
          <!-- START: 01-molekyler-20-modalelementer-10-modal-navbar -->
          <div class="a-modal-navbar">
            <!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
            <button type="button" class="a-modal-back a-js-tabable-popover" onclick="location.href&#x3D;&#39;&#x2F;patterns&#x2F;04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter&#x2F;04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter.html&#39;"
              aria-label="Tilbake">
  <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack">
    <i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-back   "    ></i>
  </span>


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


</button>


            <!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->

            <!-- START: 00-atomer-04-handlingsknapper-10-knapp-ikon -->
            <button type="button" class="a-modal-close a-js-tabable-popover" onclick="location.href&#x3D;&#39;&#x2F;patterns&#x2F;04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter&#x2F;04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter.html&#39;"
              aria-label="Lukk">
  <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class="ai-stack">
    <i class="ai ai-stack-1x ai-plain-circle-big"></i>
<i class="ai-stack-1x ai ai-exit  a-modal-close-icon "    ></i>
  </span>


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


</button>


            <!-- END: 00-atomer-04-handlingsknapper-10-knapp-ikon -->

          </div>

          <!-- END: 01-molekyler-20-modalelementer-10-modal-navbar -->

          <div class="a-modal-content-target">
            <div class="a-page a-current-page">
              <div class="modalPage">
                <div class="modal-content">
                  <!-- START: 01-molekyler-20-modalelementer-15-modal-body-header -->
                  <div class="modal-header a-modal-header">
                    <!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
                    <div class="a-iconText a-iconText-background a-iconText-large ">
                      <div class="a-iconText-icon ">
                        <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
                        <i class="ai ai-corp  a-icon "></i>


                        <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
                      </div>
                      <h1 class="a-iconText-text mb-0">
                        <span class="a-iconText-text-large">Gi og fjerne rettigheter  </span>
                      </h1>
                    </div>

                    <!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->

                  </div>


                  <!-- END: 01-molekyler-20-modalelementer-15-modal-body-header -->


                  <!-- START: 02-organismer-_71-modal-gruppering-02-modal-andre-med-rettigheter -->

                  <!-- START: 02-organismer-70-Modal-innhold-_93-delegering-roller -->
                  <div class="modal-body a-modal-body">
                    <div class="row">
                      <div class="col-12 col-md-6 col-lg-7">
                        <!-- START: 01-molekyler-00-tekst-03-person-rolle -->
                        <div class="a-personRole ">

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


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

                          </div>
                          <div class="a-personRole-text" title="Jan Derek Sørensen">
                            <span class="a-personRole-role">Styremedlem</span>
                            <span class="a-personRole-name">Jan Derek Sørensen</span>
                          </div>
                        </div>

                        <!-- END: 01-molekyler-00-tekst-03-person-rolle -->

                      </div>

                    </div>


                    <div class="row">
                      <div class="col-12">
                        <div class="mt-1 mb-2">
                          <!-- START: 01-molekyler-02-navigasjon-50-ekspanderbar-liste -->
                          <div class="a-list-heading">
                            <!-- START: 00-atomer-05-Ekspansjonsknapper-29-♺-ekspanderbar-tittel-med-underlinje -->
                            <!-- START: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel JS doc: toggleFilter.js -->
                            <div class="a-collapse">
                              <div class="a-dotted">
                                <div class="row">
                                  <div class="col">
                                    <h2 class="a-collapseHeader a-h3">
                                      <a data-toggle="collapse" href="#" data-target="#exp-list-1" aria-expanded="false" aria-controls="exp-list-1" class="a-collapse-title a-collapse-title--absolute no-decoration  collapsed ">
                <span class="a-dropdownArrow"></span> <span>Har disse <span class='badge badge-primary a-label badge-pill'>2</span> rollene:</span> <span class="a-js-none"></span>
            </a>
                                    </h2>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <!-- END: 00-atomer-05-Ekspansjonsknapper-27-ekspanderbar-tittel -->


                            <!-- END: 00-atomer-05-Ekspansjonsknapper-29-♺-ekspanderbar-tittel-med-underlinje -->

                          </div>
                          <div id="exp-list-1" class="a-collapseContent collapse " aria-expanded="false" role="list">
                            <!-- START: 01-molekyler-05-lister-00-liste-unummerert JS doc: selectableCheckbox.js -->
                            <div class="a-list-container ">
                              <ul class="a-list   a-list-borderTop a-list-noIcon ">
                                <li class="a-dotted a-disabled" id="basisrolle">
                                  <div class="row ">
                                    <div class="col">
                                      <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->

                                      Basisrolle







                                      <!-- 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-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="popoverSampleContent">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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">
                                        <div class="container">
                                          <div class="row">
                                            <div class="col-xl-10 offset-xl-1">
                                              <div class="a-modal-body">
                                                <!-- START: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->
                                                <h3 class="mb-2">Hva inneholder rollen?</h3>
                                                <span>Denne rollen gir rettighet til lønns- og personalrelaterte tjenester.</span>
                                                <!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
                                                <ul class="a-list   ">
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div class="col-12">
                                                        <span class="a-fontBold"> 
                Lønn og personalmedarbeider
                 </span>
                                                        <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 59 tjenester
                 </span>
                                                      </div>
                                                    </div>
                                                  </li>
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div>

                                                        — AFP arbeidsgiverskjema

                                                      </div>
                                                    </div>
                                                  </li>
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div>

                                                        — AFP-avgjørelse

                                                      </div>
                                                    </div>
                                                  </li>
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div>

                                                        — Arbeidsgivers oppfølgingsplan for sykmeldte

                                                      </div>
                                                    </div>
                                                  </li>
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div>

                                                        — Eksempel

                                                      </div>
                                                    </div>
                                                  </li>
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div>

                                                        — Eksempel

                                                      </div>
                                                    </div>
                                                  </li>
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div>

                                                        — Eksempel

                                                      </div>
                                                    </div>
                                                  </li>
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div>

                                                        — Eksempel

                                                      </div>
                                                    </div>
                                                  </li>
                                                  <li class="a-dotted a-list a-list-noIcon">
                                                    <div class="row">
                                                      <div>

                                                        — Eksempel

                                                      </div>
                                                    </div>
                                                  </li>
                                                </ul>

                                                <!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


                                                <!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </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" id="signering">
                                  <label class="row">
          > <span  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 -->





    
    Begrenset signeringsrettighet
    






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

            </span>
          > <span  class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
     <span class="d-none d-md-block a-visibleWhenSelected" > 
    Angre
     </span> 






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


<!-- END: 00-atomer-09-bilder-og-media-15-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-hiddenWhenSelected 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="popoverSampleContentSigneringsrett">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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="popoverSampleContentSigneringsrett" 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-_45-liste-med-beskrivelse -->
<h3 class="mb-2">Hva inneholder rollen?</h3>
<span>Denne rollen gir rettighet til lønns- og personalrelaterte tjenester.</span>
<!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
<ul class="a-list   ">
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div class="col-12" >
                 <span class="a-fontBold"> 
                Lønn og personalmedarbeider
                 </span> 
                 <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 59 tjenester
                 </span> 
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — AFP arbeidsgiverskjema
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — AFP-avgjørelse
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Arbeidsgivers oppfølgingsplan for sykmeldte
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
</ul>

<!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


<!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

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




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


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

            </span>
          <input type="checkbox" name="deleteme" class="sr-only a-js-selectable-checkbox" />
          </label>
                                </li>
                                <li class="a-dotted a-selectable a-success">
                                  <label class="row">
          > <span  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 -->





    
    Lønn og personalmedarbeider
    






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

            </span>
          > <span  class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
     <span class="d-none d-md-block a-visibleWhenSelected" > 
    Angre
     </span> 






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


<!-- END: 00-atomer-09-bilder-og-media-15-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-hiddenWhenSelected 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="popoverSampleContent2">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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="popoverSampleContent2" 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-_45-liste-med-beskrivelse -->
<h3 class="mb-2">Hva inneholder rollen?</h3>
<span>Denne rollen gir rettighet til lønns- og personalrelaterte tjenester.</span>
<!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
<ul class="a-list   ">
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div class="col-12" >
                 <span class="a-fontBold"> 
                Lønn og personalmedarbeider
                 </span> 
                 <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 59 tjenester
                 </span> 
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — AFP arbeidsgiverskjema
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — AFP-avgjørelse
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Arbeidsgivers oppfølgingsplan for sykmeldte
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
</ul>

<!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


<!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

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




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


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

            </span>
          <input type="checkbox" name="deleteme" class="sr-only a-js-selectable-checkbox" />
          </label>
                                </li>
                                <li class="a-dotted a-selectable a-success a-js-critical-role-selector" id="hovedadmin">
                                  <label class="row">
          > <span  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 -->





    
    Hovedadministrator
    






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

            </span>
          > <span  class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
     <span class="d-none d-md-block a-visibleWhenSelected" > 
    Angre
     </span> 






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


<!-- END: 00-atomer-09-bilder-og-media-15-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-hiddenWhenSelected 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="popoverSampleContentHovedadmin">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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="popoverSampleContentHovedadmin" 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-_45-liste-med-beskrivelse -->
<h3 class="mb-2">Hva inneholder rollen?</h3>
<span>Denne rollen gir rettighet til tilgangsstyring og klientadministrering samt delegering av roller for tjenester med personsensitivt innhold.</span>
<!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
<ul class="a-list   ">
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div class="col-12" >
                 <span class="a-fontBold"> 
                Hovedadministrator
                 </span> 
                 <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 0 tjenester
                 </span> 
          </div>
      </div>
    </li>
</ul>

<!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


<!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

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




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


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

            </span>
          <input type="checkbox" name="deleteme" class="sr-only a-js-selectable-checkbox" />
          </label>
                                </li>
                                <li class="a-dotted a-selectable a-success a-js-critical-role-selector" id="sensitivTjeneste">
                                  <label class="row">
          > <span  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 -->





    
    Sykmeldinger og andre sensitive tjenester
    






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

            </span>
          > <span  class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
     <span class="d-none d-md-block a-visibleWhenSelected" > 
    Angre
     </span> 






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


<!-- END: 00-atomer-09-bilder-og-media-15-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-hiddenWhenSelected 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="popoverSampleContentSensitiv1">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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="popoverSampleContentSensitiv1" 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-_45-liste-med-beskrivelse -->
<h3 class="mb-2">Hva inneholder rollen?</h3>
<span>Denne rollen gir tilgang til tjenester med personsensitivt innhold.</span>
<!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
<ul class="a-list   ">
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div class="col-12" >
                 <span class="a-fontBold"> 
                Sykmeldinger og andre sensistive tjenester
                 </span> 
                 <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 2 tjenester
                 </span> 
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Sykmelding
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Innsynstjeneste for kjernejournal
                
          </div>
      </div>
    </li>
</ul>

<!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


<!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

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




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


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

            </span>
          <input type="checkbox" name="deleteme" class="sr-only a-js-selectable-checkbox" />
          </label>
                                </li>
                                <li class="a-dotted a-selectable a-success">
                                  <label class="row">
          > <span  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 -->





    
    Lokal rolle nr. 1
    






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

            </span>
          > <span  class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
     <span class="d-none d-md-block a-visibleWhenSelected" > 
    Angre
     </span> 






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


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








    <!-- START: 00-atomer-02-lenker-36-link-ikon -->
<a href="/patterns/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-egendefinert-rolle-rediger/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-egendefinert-rolle-rediger.html" class="a-linkIcon a-btn-blue-noUnderline pr-0 a-hiddenWhenSelected "




>
  <!-- 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-hiddenWhenSelected 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-popover-content="popoverSampleContent3">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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="popoverSampleContent3" 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-_45-liste-med-beskrivelse -->
<h3 class="mb-2">Hva inneholder rollen?</h3>
<span>Denne rollen gir rettighet til lønns- og personalrelaterte tjenester.</span>
<!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
<ul class="a-list   ">
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div class="col-12" >
                 <span class="a-fontBold"> 
                Lønn og personalmedarbeider
                 </span> 
                 <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 59 tjenester
                 </span> 
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — AFP arbeidsgiverskjema
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — AFP-avgjørelse
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Arbeidsgivers oppfølgingsplan for sykmeldte
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
</ul>

<!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


<!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

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




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


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

            </span>
          <input type="checkbox" name="deleteme" class="sr-only a-js-selectable-checkbox" />
          </label>
                                </li>
                                <li class="a-dotted a-selectable a-success">
                                  <label class="row">
          > <span  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 -->





    
    Lokal rolle nr. 2
    






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

            </span>
          > <span  class="col-auto text-right align-items-center d-flex">
            <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
     <span class="d-none d-md-block a-visibleWhenSelected" > 
    Angre
     </span> 






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


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








    <!-- START: 00-atomer-02-lenker-36-link-ikon -->
<a href="/patterns/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-egendefinert-rolle-rediger/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-egendefinert-rolle-rediger.html" class="a-linkIcon a-btn-blue-noUnderline pr-0 a-hiddenWhenSelected "




>
  <!-- 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-popover-content="popoverSampleContent11">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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="popoverSampleContent11" 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-_45-liste-med-beskrivelse -->
<h3 class="mb-2">Hva inneholder rollen?</h3>
<span>Denne rollen gir rettighet til lønns- og personalrelaterte tjenester.</span>
<!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
<ul class="a-list   ">
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div class="col-12" >
                 <span class="a-fontBold"> 
                Lønn og personalmedarbeider
                 </span> 
                 <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 59 tjenester
                 </span> 
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — AFP arbeidsgiverskjema
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — AFP-avgjørelse
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Arbeidsgivers oppfølgingsplan for sykmeldte
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
    <li  class="a-dotted a-list a-list-noIcon"  >
      <div class="row">
          <div  >
                
                — Eksempel
                
          </div>
      </div>
    </li>
</ul>

<!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


<!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

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




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


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

            </span>
          <input type="checkbox" name="deleteme" class="sr-only a-js-selectable-checkbox" />
          </label>
                                </li>
                                <li onclick="location.href='/patterns/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-egendefinert-rolle/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-egendefinert-rolle.html'" class="a-dotted a-clickable" id="leggtil"
                                  tabindex="0">
                                  <div class="row ">
                                    <div class="col-12">
                                      <!-- START: 01-molekyler-05-lister-_00-liste-innhold -->
                                      <span class="a-fontBold"> 
    + Legg til egendefinert rolle
     </span>






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

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


                          </div>
                          <!-- END: 01-molekyler-02-navigasjon-50-ekspanderbar-liste -->

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

                    <div class="row a-js-standard-role-container">
                      <div class="col mt-1">
                        <!-- START: 00-atomer-02-lenker-00-link -->
                        <a href="/patterns/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-delegering-ok/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-delegering-ok.html" class="a-btn a-btn-success mr-2 ">
  Ferdig
  
</a>
                        <!-- END: 00-atomer-02-lenker-00-link -->

                        <!-- START: 00-atomer-02-lenker-00-link -->
                        <a href="/patterns/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-roller-oversikt/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-roller-oversikt.html" class="a-btn-link a-link ">
  Avbryt
  
</a>
                        <!-- END: 00-atomer-02-lenker-00-link -->

                      </div>
                    </div>

                    <div class="row a-js-critical-role-container a-hiddenRow">
                      <div class="col mt-1">
                        <div class="a-message a-message--fullwidth a-message--arrow-off a-message--no-dropshadow a-message-error">
                          <div class="mb-2 a-js-critical-role-msg a-js-critical-role-msg-hovedadmin a-hiddenRow">
                            <strong>Hovedadministrator</strong>
                            <br>Denne rollen gir mottaker mulighet for å gi seg selv alle roller og rettigheter du selv har inkludert tilgangsstyring og klientadministrator.
                            <!-- 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-hiddenWhenSelected 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="popoverSampleContentHovedadmin">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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="popoverSampleContentHovedadmin" 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-_45-liste-med-beskrivelse -->
                                      <h3 class="mb-2">Hva inneholder rollen?</h3>
                                      <span>Denne rollen gir rettighet til tilgangsstyring og klientadministrering samt delegering av roller for tjenester med personsensitivt innhold.</span>
                                      <!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
                                      <ul class="a-list   ">
                                        <li class="a-dotted a-list a-list-noIcon">
                                          <div class="row">
                                            <div class="col-12">
                                              <span class="a-fontBold"> 
                Hovedadministrator
                 </span>
                                              <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 0 tjenester
                 </span>
                                            </div>
                                          </div>
                                        </li>
                                      </ul>

                                      <!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


                                      <!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

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




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

                          </div>
                          <div class="mb-2 a-js-critical-role-msg a-js-critical-role-msg-sensitivTjeneste a-hiddenRow">
                            <strong>Sykmeldinger og andre sensitive tjenester</strong>
                            <br>Denne rollen gir mottaker innsyn i personsensitivt innhold som sykmeldinger og lignende.
                            <!-- 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-hiddenWhenSelected 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="popoverSampleContentSensitiv1">
  <span class="sr-only">
    Klikk for å se hva rollen gir tilgang til
  </span>
    <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
  <span class=" a-js-popoverIconInitial">
<i class="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=" a-js-popoverIconExpanded">
<i class="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="popoverSampleContentSensitiv1" 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-_45-liste-med-beskrivelse -->
                                      <h3 class="mb-2">Hva inneholder rollen?</h3>
                                      <span>Denne rollen gir tilgang til tjenester med personsensitivt innhold.</span>
                                      <!-- START: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover JS doc: listRowToggle.js hvis data-list-selectable="true", addListExpandHandler.js hvis data-toggle="collapse", clickableRow.js hvis klasser .a-clickable .a-selectable -->
                                      <ul class="a-list   ">
                                        <li class="a-dotted a-list a-list-noIcon">
                                          <div class="row">
                                            <div class="col-12">
                                              <span class="a-fontBold"> 
                Sykmeldinger og andre sensistive tjenester
                 </span>
                                              <span class="float-right a-fontSizeXXXS"> 
                Gir rettighet til 2 tjenester
                 </span>
                                            </div>
                                          </div>
                                        </li>
                                        <li class="a-dotted a-list a-list-noIcon">
                                          <div class="row">
                                            <div>

                                              — Sykmelding

                                            </div>
                                          </div>
                                        </li>
                                        <li class="a-dotted a-list a-list-noIcon">
                                          <div class="row">
                                            <div>

                                              — Innsynstjeneste for kjernejournal

                                            </div>
                                          </div>
                                        </li>
                                      </ul>

                                      <!-- END: 01-molekyler-05-lister-_30-liste-unummerert-uten-popover -->


                                      <!-- END: 01-molekyler-00-tekst-_45-liste-med-beskrivelse -->

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




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

                          </div>

                          <!-- START: 00-atomer-02-lenker-00-link -->
                          <a href="/patterns/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-delegering-ok/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-delegering-ok.html" class="a-btn a-btn-danger mr-2 ">
  Jeg forstår. Fullfør delegering
  
</a>
                          <!-- END: 00-atomer-02-lenker-00-link -->

                          <!-- START: 00-atomer-02-lenker-00-link -->
                          <a href="/patterns/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-roller-oversikt/04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-roller-oversikt.html" class="a-btn-link a-link ">
  Avbryt
  
</a>
                          <!-- END: 00-atomer-02-lenker-00-link -->

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- END: 02-organismer-70-Modal-innhold-_93-delegering-roller -->






                <!-- END: 02-organismer-_71-modal-gruppering-02-modal-andre-med-rettigheter -->

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

<!-- DO NOT INCLUDE IN IMPLEMENTATION, ADDED BY BOOTSTRAP WHEN MODAL IS TRIGGERED -->
<div class="modal-backdrop fade show"></div>
<!-- END DO NOT INCLUDE -->

<!-- START: 01-molekyler-06-hjelp-00-hjelp-container -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Should be included for pages that has quickhelp -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->

<div class="a-stickyHelp-container">

  <!-- Open-button for .a-iframeToggle -->
  <!-- HELP ANIMATION:
  On pages that have help in context (step for step guide), add class "a-stickyHelp-animationHint" when users has not been active for 10 seconds -->
  <button type="button" class="a-btn a-stickyHelp-open  collapsed" data-toggle="collapse" data-target="#a-iframeToggle" aria-expanded="false" aria-controls="a-iframeToggle">

    <span class="sr-only a-stickyHelp-openText">Trenger du hjelp</span>
    <i>?</i>
  </button>

  <div id="a-iframeToggle" class="a-iframeToggle collapse">

    <!-- Close-button for .a-iframeToggle -->
    <button type="button" class="a-stickyHelp-close" data-toggle="collapse" data-target="#a-iframeToggle" data-action="close" aria-expanded="true" aria-controls="a-iframeToggle"> <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-exit ai-sm   "   id="close-stickyHelp"   ></i>
  <span class="sr-only">Minimer hjelpevinduet</span>


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

    <iframe class="a-js-stickyHelpFrame" data-src="../../&#x2F;patterns&#x2F;04-sider-infoportal-70-hurtighjelp-60-hurtighjelp\04-sider-infoportal-70-hurtighjelp-60-hurtighjelp.html"></iframe>

  </div>

</div>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- End quickhelp -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - -->

<!-- END: 01-molekyler-06-hjelp-00-hjelp-container -->

<!-- END: 03-maler-portal-91-modal-01-modal -->


<!-- END: 04-sider-portal-92-andre-med-rettigheter-00-andre-med-rettigheter-roller-gi -->