hunk.code_window:   font-size: 1rem !important;
     text-align: left;
     font-weight: 400;
   }
   .tooltip:hover {
  
hunk.labels: keep keep add keep keep keep
hunk.after_edit:   width: max-content;
  
hunk.file_path: app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css
hunk.type: add
file: <div>
    <div ng-if="!$ctrl.hideTitle" class="col-sm-12 form-section-title"> Access control </div>
    <!-- access-control-switch -->
    <div class="form-group">
      <div class="col-sm-12">
        <por-switch-field
          label-class="'col-sm-2'"
          checked="$ctrl.formData.AccessControlEnabled"
          label="'Enable access control'"
          tooltip="'When enabled, you can restrict the access and management of this resource.'"
          on-change="($ctrl.onChangeEnablement)"
          data-cy="portainer-accessMgmtToggle"
        ></por-switch-field>
      </div>
    </div>
    <!-- !access-control-switch -->
    <!-- restricted-access -->
    <div class="form-group" ng-if="$ctrl.formData.AccessControlEnabled">
      <div class="col-sm-12">
        <div class="boxselector_wrapper">
          <div ng-if="$ctrl.isAdmin">
            <input type="radio" id="access_administrators" ng-model="$ctrl.formData.Ownership" value="administrators" />
            <label for="access_administrators" data-cy="portainer-selectAdminAccess">
              <div class="boxselector_header">
                <pr-icon icon="'eye-off'"></pr-icon>
                Administrators
              </div>
              <p class="boxselector_content">I want to restrict the management of this resource to administrators only</p>
            </label>
          </div>
          <div ng-if="$ctrl.isAdmin">
            <input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted" />
            <label for="access_restricted" data-cy="portainer-selectRestrictedAccess">
              <div class="boxselector_header">
                <pr-icon icon="'users'"></pr-icon>
                Restricted
              </div>
              <p class="boxselector_content"> I want to restrict the management of this resource to a set of users and/or teams </p>
            </label>
          </div>
          <div ng-if="!$ctrl.isAdmin">
            <input type="radio" id="access_private" ng-model="$ctrl.formData.Ownership" value="private" />
            <label for="access_private">
              <div class="boxselector_header">
                <pr-icon icon="'eye-off'"></pr-icon>
                Private
              </div>
              <p> I want to restrict this resource to be manageable by myself only </p>
            </label>
          </div>
          <div ng-if="!$ctrl.isAdmin && $ctrl.availableTeams.length > 0">
            <input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted" />
            <label for="access_restricted">
              <div class="boxselector_header">
                <pr-icon icon="'users'"></pr-icon>
  
                Restricted
              </div>
              <p ng-if="$ctrl.availableTeams.length === 1">
                I want any member of my team (<b>{{ $ctrl.availableTeams[0].Name }}</b
                >) to be able to manage this resource
              </p>
              <p ng-if="$ctrl.availableTeams.length > 1"> I want to restrict the management of this resource to one or more of my teams </p>
            </label>
          </div>
        </div>
      </div>
    </div>
    <!-- restricted-access -->
    <!-- authorized-teams -->
    <div
      class="form-group mt-4"
      ng-if="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === $ctrl.RCO.RESTRICTED && ($ctrl.isAdmin || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1))"
    >
      <div class="w-full vertical-center">
        <label for="group-access" class="control-label text-left col-sm-3 col-lg-2 !pt-0">
          Authorized teams
          <portainer-tooltip
            ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length > 0"
            message="'You can select which teams(s) will be able to manage this resource.'"
          ></portainer-tooltip>
          <portainer-tooltip
            ng-if="!$ctrl.isAdmin && $ctrl.availableTeams.length > 1"
            message="'As you are a member of multiple teams, you can select which teams(s) will be able to manage this resource.'"
          ></portainer-tooltip>
        </label>
        <div class="col-sm-9 col-lg-10">
          <span ng-if="$ctrl.isAdmin && $ctrl.availableTeams.length === 0" class="small text-muted">
            You have not yet created any teams. Head over to the <a ui-sref="portainer.teams">Teams view</a> to manage teams.
          </span>
  
          <por-access-control-form-team-selector
            ng-if="($ctrl.isAdmin && $ctrl.availableTeams.length > 0) || (!$ctrl.isAdmin && $ctrl.availableTeams.length > 1)"
            options="$ctrl.availableTeams"
            value="$ctrl.formData.AuthorizedTeams"
            input-id="'teams-selector'"
            on-change="($ctrl.onAuthorizedTeamsChange)"
          ></por-access-control-form-team-selector>
        </div>
      </div>
    </div>
  
    <!-- !authorized-teams -->
    <!-- authorized-users -->
    <div class="form-group" ng-if="$ctrl.formData.AccessControlEnabled && $ctrl.formData.Ownership === $ctrl.RCO.RESTRICTED && $ctrl.isAdmin">
      <div class="w-full vertical-center">
        <label for="group-access" class="control-label text-left col-sm-3 col-lg-2 !pt-0">
          Authorized users
          <portainer-tooltip
            ng-if="$ctrl.isAdmin && $ctrl.availableUsers.length > 0"
            message="'You can select which user(s) will be able to manage this resource.'"
          ></portainer-tooltip>
        </label>
        <div class="col-sm-9 col-lg-10">
          <span ng-if="$ctrl.availableUsers.length === 0" class="small text-muted">
            You have not yet created any users. Head over to the <a ui-sref="portainer.users">Users view</a> to manage users.
          </span>
  
          <por-access-control-form-user-selector
            ng-if="$ctrl.availableUsers.length > 0"
            options="$ctrl.availableUsers"
            value="$ctrl.formData.AuthorizedUsers"
            input-id="'users-selector'"
            on-change="($ctrl.onAuthorizedUsersChange)"
          ></por-access-control-form-user-selector>
        </div>
      </div>
    </div>
    <!-- !authorized-users -->
  </div>
  