PLANET FITNESS, INC.
20210809
578.06 kB
0
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Check Browser, as well as Hostname and set JS, CSS, Favicon path based on that--> <link rel="stylesheet" href="https://xbrl.quotemedia.com/static/ixviewer/v2020-04//bootstrap.min.css"> <link rel="stylesheet" href="https://xbrl.quotemedia.com/static/ixviewer/v2020-04//all.min.css"> <link rel="stylesheet" href="https://xbrl.quotemedia.com/static/ixviewer/v2020-04//app.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://xbrl.quotemedia.com/static/ixviewer/v2020-04//popper.min.js"></script> <script type="text/javascript" src="https://xbrl.quotemedia.com/static/ixviewer/v2020-04//bootstrap.min.js"></script> <script type="text/javascript" src="https://xbrl.quotemedia.com/static/ixviewer/v2020-04//moment.js"></script> <script type="text/javascript" src="https://xbrl.quotemedia.com/static/ixviewer/v2020-04//vanilla-picker.min.js"></script> <script type = "text/javascript" defer=true src="https://xbrl.quotemedia.com/static/ixviewer/v2020-04//ks-prod.js?"></script> <script> var ksDataObj = { 'doc' : "https://xbrl.quotemedia.com/ix?acc=0001637207-21-000034&html=1", 'doc-file' : "plnt-20210809.htm", 'metalinks' : "https://xbrl.quotemedia.com/ix?acc=0001637207-21-000034&json=1", 'metalinks-file' : "MetaLinks.json" }; </script> <title>iXBRL Viewer</title> </head> <body> <noscript>This application relies heavily on JavaScript, you will need to allow JavaScript to use this application.</noscript> <nav class="navbar navbar-expand-md navbar-dark navbar-height bg-sec fixed-top w-100 pl-0"> <button class="navbar-toggler ml-1" type="button" data-test="" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">Inline Viewer</button> <div class="navbar-height collapse navbar-collapse bg-sec w-100" data-test="main-navbar" id="main-navbar"> <ul class="navbar-nav mr-auto bg-inherit"> <li class="nav-item dropdown my-auto ml-1"> <a id="menu-dropdown-link" data-test="menu-dropdown-link" class="nav-link dropdown-toggle click disabled" role="button" onclick="FormInformation.init(event, this);" onkeyup="FormInformation.init(event, this);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="1" accesskey="1"> <i class="nav-loading fas fa-bars"></i> <span class="d-md-none d-lg-inline">Menu</span> <span class="sr-only sr-only-focusable">Menu</span> </a> <div class="dropdown-menu"> <a id="menu-dropdown-information" data-test="menu-dropdown-information" class="dropdown-item click" onclick="ModalsFormInformation.clickEvent(event, this)" onkeyup="ModalsFormInformation.clickEvent(event, this)" tabindex="1">Information</a> <!-- <a id="form-information-instance" data-test="form-information-instance" class="dropdown-item click" target="_blank" tabindex="1">Save XBRL Instance</a> <a id="form-information-zip" data-test="form-information-zip" class="dropdown-item click" target="_blank" tabindex="1">Save XBRL Zip File</a> <a id="form-information-html" data-test="form-information-html" class="dropdown-item click" target="_blank" tabindex="1">Open as HTML</a> <a id="menu-dropdown-settings" data-test="menu-dropdown-settings" class="dropdown-item click" onclick="ModalsSettings.clickEvent(event, this);" onkeyup="ModalsSettings.clickEvent(event, this);" tabindex="1">Settings</a>--> <a id="form-information-help" data-test="form-information-help" class="dropdown-item click" onclick="Help.toggle(event, this)" onkeyup="Help.toggle(event, this)" tabindex="1">Help</a> <span id="form-information-version" class="dropdown-item-text" tabindex="1"></span> </div> </li> <li class="nav-item my-auto ml-1"> <a id="sections-dropdown-link" data-test="sections-dropdown-link" class="nav-link click disabled meta-required" onclick="Sections.toggle(event, this);" onkeyup="Sections.toggle(event, this);" tabindex="2" accesskey="2"> <i class="fas fa-layer-group"></i> <span class="d-md-none d-lg-inline">Sections</span> <span class="sr-only sr-only-focusable">Sections</span> </a> </li> <li class="nav-item my-auto ml-1 mr-1"> <form id="global-search-form" data-test="global-search-form" onsubmit="Search.submit(event, this); return false;" class="my-2 my-lg-0 input-group disabled" novalidate> <div class="input-group-prepend"> <button data-name="global-search-options" class="dropdown btn btn-outline-light disabled" type="button" data-toggle="dropdown" tabindex="3"> <i class="nav-loading fas fa-cog"> <span class="sr-only sr-only-focusable">Additional Search Options</span> </i> </button> <div class="dropdown-menu px-2"> <div class="form-check"> <input disabled class="form-check-input meta-required" type="checkbox" name="search-options" value="1" checked disabled tabindex="3"> <label class="form-check-label"> <span>Include Fact Name</span> </label> </div> <div class="form-check"> <input disabled class="form-check-input meta-required" type="checkbox" name="search-options" value="2" checked disabled tabindex="3"> <label class="form-check-label"> <span>Include Fact Content</span> </label> </div> <div class="form-check"> <input disabled class="form-check-input meta-required" type="checkbox" name="search-options" value="3" checked disabled tabindex="3"> <label class="form-check-label"> <span>Include Labels</span> </label> </div> <div class="form-check"> <input class="form-check-input meta-required" type="checkbox" name="search-options" value="4" disabled tabindex="3"> <label class="form-check-label"> <span>Include Definitions</span> </label> </div> <div class="form-check"> <input class="form-check-input meta-required" type="checkbox" name="search-options" value="5" disabled tabindex="3"> <label class="form-check-label"> <span>Include Dimensions</span> </label> </div> <div class="bg-light border p-1"> <span class="dropdown-item-text">Reference Options</span> <div class="form-check"> <input class="form-check-input meta-required" type="checkbox" name="search-options" value="6" disabled tabindex="3"> <label class="form-check-label"> <span>Include Topic</span> </label> </div> <div class="form-check"> <input class="form-check-input meta-required" type="checkbox" name="search-options" value="7" disabled tabindex="3"> <label class="form-check-label"> <span>Include Sub-Topic</span> </label> </div> <div class="form-check"> <input class="form-check-input meta-required" type="checkbox" name="search-options" value="8" disabled tabindex="3"> <label class="form-check-label"> <span>Include Paragraph</span> </label> </div> <div class="form-check"> <input class="form-check-input meta-required" type="checkbox" name="search-options" value="9" disabled tabindex="3"> <label class="form-check-label"> <span>Include Publisher</span> </label> </div> <div class="form-check"> <input class="form-check-input meta-required" type="checkbox" name="search-options" value="10" disabled tabindex="3"> <label class="form-check-label"> <span>Include Section</span> </label> </div> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="search-options" value="11" tabindex="3"> <label class="form-check-label"> <span>Match Case</span> </label> </div> </div> </div> <input type="text" class="form-control disabled" id="global-search" data-test="global-search" placeholder="Search Facts" disabled aria-label="Search all Facts and highlight them accordingly." tabindex="4"> <div class="input-group-append"> <button data-name="global-search-clear" onclick="Search.clear(event, this);" class="btn btn-outline-light disabled" type="button" tabindex="5"> <i class="nav-loading fas fa-times-circle"></i> <span class="sr-only sr-only-focusable">Clear Search</span> </button> <button class="btn btn-outline-light disabled" type="submit" tabindex="6"> <i class="nav-loading fas fa-search"></i> <span class="sr-only sr-only-focusable">Submit Search</span> </button> </div> </form> </li> <li class="nav-item dropdown my-auto ml-1"> <a href="#" id="nav-filter-data" data-test="nav-filter-data" class="nav-link dropdown-toggle disabled click" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="7" accesskey="3"> <i class="nav-loading fas fa-list-alt"></i> <span class="d-md-none d-lg-inline">Data</span> <span class="sr-only sr-only-focusable">Data</span> </a> <div class="dropdown-menu"> <form data-name="data-dropdown" onchange="UserFiltersDataRadios.clickEvent(event, this)" class="px-2"> <div class="form-check"> <input class="form-check-input" type="radio" name="data-radios" value="0" checked tabindex="7"> <label class="form-check-label">All</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="data-radios" value="1" tabindex="7"> <label class="form-check-label"> <i title="The first time choosing this will take a few moments." class="far fa-clock d-none performance-concern"></i> <span>Amounts Only</span> </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="data-radios" value="2" tabindex="7"> <label class="form-check-label"> <i title="The first time choosing this will take a few moments." class="far fa-clock d-none performance-concern"></i> <span>Text Only</span> </label> </div> <div class="form-check"> <input class="form-check-input meta-required" type="radio" name="data-radios" value="3" disabled tabindex="7"> <label class="form-check-label"> <i title="The first time choosing this will take a few moments." class="far fa-clock d-none performance-concern"></i> <span>Calculations Only</span> </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="data-radios" value="4" tabindex="7"> <label class="form-check-label"> <i title="The first time choosing this will take a few moments." class="far fa-clock d-none performance-concern"></i> <span>Negatives Only</span> </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="data-radios" value="5" tabindex="7"> <label class="form-check-label"> <i title="The first time choosing this will take a few moments." class="far fa-clock d-none performance-concern"></i> <span>Additional Items Only</span> </label> </div> </form> </div> </li> <li class="nav-item dropdown my-auto ml-1"> <a href="#" id="nav-filter-tags" data-test="nav-filter-tags" class="nav-link dropdown-toggle disabled click" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="8" accesskey="4"> <i class="nav-loading fas fa-tags"></i> <span class="d-md-none d-lg-inline">Tags</span> <span class="sr-only sr-only-focusable">Tags</span> </a> <div class="dropdown-menu"> <form data-name="tags-dropdown" onchange="UserFiltersTagsRadios.clickEvent(event, this)" class="px-2"> <div class="form-check"> <input class="form-check-input" type="radio" name="tags-radios" value="0" checked tabindex="8"> <label class="form-check-label">All</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="tags-radios" value="1" tabindex="8"> <label class="form-check-label"> <i title="The first time choosing this will take a few moments." class="far fa-clock d-none performance-concern"></i> <span>Standard Only</span> </label> </div> <div class="form-check"> <input class="form-check-input meta-required" type="radio" name="tags-radios" value="2" disabled tabindex="8"> <label class="form-check-label"> <i title="Facts whose tags are outside the realm of DEI, US-GAAP, etc." class="far fa-question-circle"></i> <i title="The first time choosing this will take a few moments." class="far fa-clock d-none performance-concern"></i> <span>Custom Only</span> </label> </div> </form> </div> </li> <li class="nav-item dropdown my-auto ml-1"> <a href="#" id="nav-filter-more" data-test="nav-filter-more" onclick="UserFiltersGeneral.moreFiltersClickEvent(event, this);" class="nav-link dropdown-toggle disabled click" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="9" accesskey="5"> <i class="nav-loading fas fa-filter"></i> <span class="d-md-none d-lg-inline">More Filters</span> <span class="sr-only sr-only-focusable">More Filters</span> <span title="Total active filters." class="badge badge-warning"></span> </a> <div class="dropdown-menu dropdown-menu-width"> <label class="dropdown-item-text d-none performance-concern"> Selecting any of the below will take a few moments.</label> <div class="accordion" id="more-filters-accordion"> <form data-test="more-filters-form"> <div class="mx-1"> <div class=" px-0 py-0"> <a href="#" data-test="Period" data-target="#user-filters-periods" data-toggle="collapse" class="d-flex justify-content-between align-items-center w-100 click text-primary" tabindex="9"> <span>Periods</span> <span data-test="Period-count" id="filters-periods-count" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </a> </div> <div id="user-filters-periods" class="collapse height-200 overflow-y-auto" data-parent="#more-filters-accordion"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> </form> <form> <div class="mx-1"> <div class=" px-0 py-0"> <a href="#" data-test="Measures" data-target="#user-filters-measures" data-toggle="collapse" class="d-flex justify-content-between align-items-center w-100 click text-primary" tabindex="9"> <span>Measures</span> <span data-test="Measures-count" id="filters-measures-count" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </a> </div> <div id="user-filters-measures" class="collapse height-200 overflow-y-auto" data-parent="#more-filters-accordion"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> </form> <form> <div class="mx-1"> <div class=" px-0 py-0"> <a href="#" data-test="Axis" data-target="#user-filters-axis" data-toggle="collapse" class="d-flex justify-content-between align-items-center w-100 click text-primary" tabindex="9"> <span>Axis</span> <span data-test="Axis-count" id="filters-axis-count" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </a> </div> <div id="user-filters-axis" class="collapse height-200 overflow-y-auto" data-parent="#more-filters-accordion"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> </form> <form> <div class="mx-1"> <div class=" px-0 py-0"> <a href="#" data-test="Members" data-target="#user-filters-members" data-toggle="collapse" class="d-flex justify-content-between align-items-center w-100 click text-primary" tabindex="9"> <span>Members</span> <span data-test="Members-count" id="filters-members-count" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </a> </div> <div id="user-filters-members" class="collapse height-200 overflow-y-auto" data-parent="#more-filters-accordion"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> </form> <form> <div class="mx-1"> <div class=" px-0 py-0"> <a href="#" data-test="Scale" data-target="#user-filters-scales" data-toggle="collapse" class="d-flex justify-content-between align-items-center w-100 click text-primary" tabindex="9"> <span>Scale</span> <span data-test="Scale-count" id="filters-scales-count" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </a> </div> <div id="user-filters-scales" class="collapse height-200 overflow-y-auto" data-parent="#more-filters-accordion"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> </form> <form> <div class="mx-1"> <div class=" px-0 py-0"> <a href="#" data-test="Balance" data-target="#user-filters-balances" data-toggle="collapse" class="d-flex justify-content-between align-items-center w-100 click text-primary" tabindex="9"> <span>Balance</span> <span data-test="Balance-count" id="filters-balances-count" class="badge badge-secondary">2</span> </a> </div> <div id="user-filters-balances" class="collapse height-200 overflow-y-auto" data-parent="#more-filters-accordion"> <div class="d-flex justify-content-between align-items-center w-100 px-2"> <div class="form-check"> <input onclick="UserFiltersMoreFiltersBalances.clickEvent(event, this, 0)" title="Select/Deselect this option." class="form-check-input" type="checkbox" tabindex="9"> <label class="form-check-label">Debit</label> </div> </div> <div class="d-flex justify-content-between align-items-center w-100 px-2"> <div class="form-check"> <input onclick="UserFiltersMoreFiltersBalances.clickEvent(event, this, 1)" title="Select/Deselect this option." class="form-check-input" type="checkbox" tabindex="9"> <label class="form-check-label">Credit</label> </div> </div> </div> </div> </form> </div> </div> </li> <li id="current-filters-reset" data-test="current-filters-reset" class="nav-item d-none my-auto ml-1"> <a href="#" data-name="current-filters-reset" onclick="UserFiltersDropdown.resetAll();" class="nav-link dropdown-toggle text-danger disabled click" tabindex="11" accesskey="7"> <i class="nav-loading fas fa-redo"></i> <span class="d-md-none d-lg-inline">Reset All Filters</span> </a> </li> <li id="links-dropdown" data-test="links-dropdown" class="nav-item dropdown d-none my-auto ml-1"> <a href="#" id="additional-links-dropdown" class="nav-link dropdown-toggle disabled click" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="12" accesskey="8"> <i class="nav-loading fas fa-link"></i> <span class="d-md-none d-lg-inline">Links</span> </a> <div id="links-dropdown-content" class="dropdown-menu dropdown-menu-width"></div> </li> </ul> <ul class="navbar-nav pull-right bg-inherit"> <li class="nav-item my-auto ml-1"> <a id="facts-menu" data-test="facts-menu" class="nav-link click" onclick="TaxonomiesMenu.toggle(event, this);" onkeyup="TaxonomiesMenu.toggle(event, this);" tabindex="13" accesskey="9"> Facts <span class="taxonomy-total-count badge badge-light"> <i class="fas fa-spinner fa-spin"></i> </span> </a> </li> </ul> </div> </nav> <div class="main-container"> <div id="error-container" data-test="error-container" class="px-0"> <!-- Below is populated dynamically VIA JS (error messages) --> </div> <div id="xbrl-form-loading" data-test="xbrl-form-loading" class="jumbotron h-100"> <h2 class="display-4 text-center"> <i class="fas fa-spinner fa-spin"></i> Loading Inline Form. </h2> </div> <div id="sections-menu" data-test="sections-menu" class="left-sidenav col-sm-3 bg-light overflow-x-auto invisible"> <div class="mb-2"> <span class="lead">Tagged Sections</span> <a class="float-right click color-inherit" tabindex="2" onclick="Sections.toggle(event, this);" onkeyup="Sections.toggle(event, this);"> <i class="fas fa-times-circle mt-2"></i> </a> </div> <form data-name="sections-menu-search" onsubmit="SectionsSearch.submit(event, this); return false;" class="my-2 my-lg-0 input-group" novalidate> <div id="sections-search-additional" class="input-group-prepend d-none"> <button class="dropdown btn btn-sec" type="button" data-toggle="dropdown" tabindex="2"> <i class="nav-loading fas fa-cog"></i> </button> <div class="dropdown-menu px-2"> <div class="form-check"> <input class="form-check-input" type="radio" name="sections-search-options" value="1" checked tabindex="2"> <label class="form-check-label">Search in All.</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="sections-search-options" value="2" tabindex="2"> <label class="form-check-label">Search in Internal Sections Only.</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="sections-search-options" value="3" tabindex="2"> <label class="form-check-label">Search in External Sections Only.</label> </div> </div> </div> <input type="text" class="form-control" id="sections-search" data-test="sections-search" placeholder="Search Sections" aria-label="Search all Sections by their associated label." tabindex="2"> <div class="input-group-append"> <button data-name="sections-menu-search-clear" onclick="SectionsSearch.clear(event, this);" class="btn btn-sec" type="button" tabindex="2"> <i class="nav-loading fas fa-times-circle"></i> <span class="sr-only sr-only-focusable">Clear Sections Search</span> </button> <button class="btn btn-sec" type="submit" tabindex="2"> <i class="nav-loading fas fa-search"></i> <span class="sr-only sr-only-focusable">Submit Sections Search</span> </button> </div> </form> <hr> <div class="accordion" id="tagged-sections"> <div class="card" id="tagged-sections-0" data-test="tagged-sections-0"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-target="#collapseDocumentEntityTypes" tabindex="2"> <span>Document Entity Information</span> <span id="collapseDocumentEntityTypesBadge" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </button> </h5> </div> <div id="collapseDocumentEntityTypes" class="collapse" data-parent="#tagged-sections"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> <div class="card" id="tagged-sections-1" data-test="tagged-sections-1"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-target="#collapseFinancialStatements" tabindex="2"> <span>Financial Statements</span> <span id="collapseFinancialStatementsBadge" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </button> </h5> </div> <div id="collapseFinancialStatements" class="collapse" data-parent="#tagged-sections"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> <div class="card" id="tagged-sections-2" data-test="tagged-sections-2"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-target="#collapseNotesToTheFinancials" tabindex="2"> <span>Notes to the Financials</span> <span id="collapseNotesToTheFinancialsBadge" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </button> </h5> </div> <div id="collapseNotesToTheFinancials" class="collapse" data-parent="#tagged-sections"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> <div class="card" id="tagged-sections-3" data-test="tagged-sections-3"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-target="#collapseRRSummaries"> <span>RR Summaries</span> <span id="collapseRRSummariesBadge" class="badge badge-secondary"> <i class="fas fa-spinner fa-spin"></i> </span> </button> </h5> </div> <div id="collapseRRSummaries" class="collapse" data-parent="#tagged-sections"> <!-- Below is populated dynamically VIA JS --> <div class="list-group list-group-flush"></div> </div> </div> </div> </div> <div id="help-menu" data-test="help-menu" class="left-sidenav col-sm-3 bg-light overflow-x-auto invisible"> <div class="mb-2"> <span class="lead">Help</span> <a id="help-menu-close" data-test="help-menu-close" class="float-right click" onclick="Help.toggle(event, this)"> <i class="fas fa-times-circle mt-2"></i> </a> </div> <div class="accordion" id="help-sections"> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-getting-started"> <span>Getting Started</span> </button> </h5> </div> <div id="help-getting-started" class="collapse" data-parent="#help-sections"> <p class="m-2">The Inline XBRL Viewer allows a user to quickly and easily review details of the tagged information in an Inline document by automatically placing a top and bottom highlight border around each tagged numeric fact and left and right border for each block tagged fact. Hovering over a tagged fact will highlight (shade) all content related to the tagged fact, and clicking on a tagged fact will reveal its tagging details in the Fact Review Window. Search and filter options are also provided to easily refine and identify specific types of tagged information.</p> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-fact-review-window"> <span>Fact Review Window</span> </button> </h5> </div> <div id="help-fact-review-window" class="collapse" data-parent="#help-sections"> <p class="m-2">The Fact Review Window shows the tagging details for the currently selected fact, which is highlighted with a solid blue background. There are four categories of fact detail which can be viewed; an ?N/A? value indicates there is no available information for the item within the given category:</p> <ul> <li>Attributes - All primary information (as applicable) describing the tagged fact including period, sign, decimals, dimensional detail (axes and members), scale, measure, data type and footnotes</li> <li>Labels - Detailed documentation (definition) for the tag used, and other labels</li> <li>References - Authoritative reference information (as applicable) for the selected tag</li> <li>Calculation - Balance and calculation hierarchy details (numeric items only)</li> </ul> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-search"> <span>Search</span> </button> </h5> </div> <div id="help-search" class="collapse" data-parent="#help-sections"> <p class="m-2">The Search box can be used to find tagged facts matching entered keywords. By default, tag name, tag labels, and tagged content are included in Search. To search tagged information, enter a keyword and select the magnifying glass icon to return matching results. Tagged facts matching the search criteria are shown with a yellow-colored (default) shading, while Tagged Sections are reduced to just those that included the entered search keywords (if expanded; see Tagged Sections for additional detail). The content included in Search can be increased to included tag definitions, dimensions, and authoritative references. See Settings for more information.</p> <p class="m-2">Search operators ?and? (via ?AND? or ?&?) and ?or? (via ?OR? or ?|?) are available to further refine a search. For example, and with Settings ?Include References? on, searching for ?FASB AND 225? will highlight tagged data that is related to FASB Codification topic 225.</p> <p class="m-2">Filters can be used in conjunction with Search to further refine the scope of Search. Filters reduce the amount of tagged facts that the keyword search is performed on. For example, if ?cash? is entered in conjunction with a Tags filter of ?Custom Only?, the shaded search results will only be indicated on tagged facts based on a custom tag.</p> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-filter"> <span>Filter</span> </button> </h5> </div> <div id="help-filter" class="collapse" data-parent="#help-sections"> <p class="m-2">Filters change the number of highlighted facts indicated by providing several ways to review the tagged information. Multiple filters can be used at once. When the first filter is applied, a filter toolbar indicates all active filter selections and provides the ability to remove one or all applied filters.</p> <p class="m-2">Data Filter</p> <p class="m-2">These filters options allow the user to refine the highlighted tagged facts by data type:</p> <ul> <li>All - Displays all tagged data (default)</li> <li>Amounts Only - Numeric items only</li> <li>Text Only - Textual items only</li> <li>Calculations Only - Numeric items participating in a calculation</li> <li>Negatives Only - Numeric items with the Inline ?sign? option</li> <li>Additional Items Only - Tagged items with potentially no corresponding HTML presentation (i.e., hidden)</li> </ul> <p class="m-2">Tags Filter</p> <p class="m-2">These filters allow the user to refine the highlighted facts by tag type:</p> <ul> <li>Standard Only - Tags from a common taxonomy (e.g., US_GAAP, DEI)</li> <li>Custom Only - Extension tags unique to the entity's document</li> </ul> <p class="m-2">More Filters</p> <p class="m-2">Additional filters that allow user to further refine the highlighted facts:</p> <ul> <li>Periods - List of all used context reporting periods</li> <li>Measures - List of all used units of measure; as applicable</li> <li>Axes - List of all used axes (dimensions); as applicable</li> <li>Scale - List of all used scaled options (e.g., thousands, millions); as applicable</li> <li>Balance - Debit, credit; as applicable</li> </ul> <p class="m-2">Multiple filters work in conjunction with each other. For example, selecting the "Amounts Only" Data filter and "Custom Only" Tags filter will highlight only numeric tagged facts using custom tags. Active filters are displayed in the Filter toolbar as they are selected. Active filters can be removed individually by selecting the "X" icon to the right of each filter, or all at once via the "Clear All" option.</p> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-facts-results-list"> <span>Facts Results List</span> </button> </h5> </div> <div id="help-facts-results-list" class="collapse" data-parent="#help-sections"> <p class="m-2">Selecting the down arrow "V" to the right of the facts count on the toolbar reveals the Facts Results List; a navigable listing of all currently highlighted tagged facts. By default, all tagged facts are displayed in the Facts Results List. The list content and count reflects the currently highlighted facts (i.e., both Filters and Search criteria refine the list to match the highlighted tagged facts). Navigation controls are available to move through the list as well as move the current view to the corresponding highlighted fact location automatically. When a fact in the Facts Results List is selected, it will reveal the Fact Review Window.</p> <p class="m-2">If the letter "A" appears for a fact, it indicates the fact is additional data (i.e., hidden with potentially no corresponding HTML presentation). If the letter "C" appears, the fact is tagged with a custom tag. If the letter "D" appears, the fact is tagged with dimensional information.</p> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-information"> <span>Information</span> </button> </h5> </div> <div id="help-information" class="collapse" data-parent="#help-sections"> <p class="m-2">The Information menu item provides additional detail about the current Inline document and customizable viewer settings.</p> <ul> <li>Document - Basic company and document information</li> <li>Tags - Fact and tag (standard and custom) information</li> <li>Files - Files used</li> <li>Additional Items - Additional data that's been tagged but potentially does not have a corresponding location in the HTML</li> </ul> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-tagged-sections"> <span>Tagged Sections</span> </button> </h5> </div> <div id="help-tagged-sections" class="collapse" data-parent="#help-sections"> <p class="m-2">The Tagged Sections toolbar/menu item provides a listing of the tagged sections of the Inline document. By selecting a section item in the listing, the document will navigate to that section. When the Tagged Sections feature is open, the Search box will additionally filter the list of sections to only those sections that match the entered criteria.</p> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-save-xbrl-instance"> <span>Save XBRL Instance</span> </button> </h5> </div> <div id="help-save-xbrl-instance" class="collapse" data-parent="#help-sections"> <p class="m-2">The Save XBRL Instance menu item allows an XBRL instance document (*.xml) that's extracted from the Inline document to be saved locally.</p> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-save-xbrl-zip"> <span>Save XBRL Zip</span> </button> </h5> </div> <div id="help-save-xbrl-zip" class="collapse" data-parent="#help-sections"> <p class="m-2">The Save XBRL Zip menu item allows a zip file (*.zip) that contains the as-provided XBRL instance document and related custom taxonomy files to be saved locally.</p> </div> </div> <div class="card"> <div class="card-header px-0 py-0"> <h5 class="mb-0"> <button class="btn btn-link d-flex justify-content-between align-items-center w-100" type="button" data-toggle="collapse" data-target="#help-settings"> <span>Settings</span> </button> </h5> </div> <div id="help-settings" class="collapse" data-parent="#help-sections"> <p class="m-2">The Settings menu item provides the ability to customize Viewer features.</p> <p class="m-2">Highlight Colors</p> <ul> <li>Tagged Data - Change the highlight color of the tagged fact border</li> <li>Search Results - Change the background color of tagged items matching the Search results</li> <li>Selected Fact - Change the color of highlight border used to identify the currently selected fact</li> <li>Tag Shading - Change the color of the shading applied to tagged data</li> </ul> <p class="m-2">Search Options</p> <ul> <li>Match Case - Matches the specific case of the entered Search keyword</li> <li>Include Labels - Extends Search to include tag labels</li> <li>Include Definitions - Extends Search to include tag definitions</li> <li>Include Dimensions - Extends Search to include dimensional detail</li> <li>Include References - Extends Search to include authoritative reference information</li> </ul> <p class="m-2">Tagged Fact Hover</p> <ul> <li>Display - Displays the hover fact review window for any tagged fact*</li> <li>Hide - Hides the hover fact review window for any tagged fact (default)</li> </ul> <p class="m-2">*May impact performance with certain web browsers.</p> </div> </div> </div> </div> <div data-test="taxonomies-menu" id="taxonomies-menu" class="right-sidenav col-sm-3 bg-light invisible"> <div class="d-flex flex-column flex-fill h-100"> <div class="mb-2"> <span class="lead">Facts</span> <a data-test="taxonomy-secondary-toggle" class="float-right click" onclick="TaxonomiesMenu.toggle(event, this);"> <i class="fas fa-times-circle mt-2"></i> </a> </div> <div id="taxonomies-menu-list-pagination" class="d-flex flex-column flex-fill h-100 w-100"> <div class="pagination"></div> <div class="form-group"> <select id="taxonomies-menu-page-select" onchange="Pagination.goToPage(event,this);" class="form-control" aria-label="Quickly jump to a page in the Fact Menu." tabindex="13"> <option>Select Page</option> </select> </div> <div class="list-group list-group-flush overflow-x-auto h-100 w-100"></div> </div> </div> </div> <div id="back-to-top" class="d-none"> <button onclick="Scroll.toTop();" type="button" class="btn btn-sm btn-primary"> <i class="fas fa-arrow-up"></i> </button> </div> <div id="dynamic-xbrl-form" class="col-sm-12" onscroll="Scroll.scroll(event, this)"></div> </div> <div id="form-information-modal" data-test="form-information-modal" class="dialog-box fixed-dialog-box d-none bg-white"> <div class="dialog-header bg-sec text-white px-1 d-flex justify-content-between"> <p id="form-information-modal-title" data-test="form-information-modal-title" class="lead mb-0"></p> <div class="dialog-header-actions"> <i id="form-information-modal-drag" title="Click and drag to move this Dialog Box." class="fas fa-arrows-alt m-1 drag-icon d-none d-sm-inline-block" tabindex="14"></i> <i title="Click to Copy all Dialog Box Content." onclick="Modals.copyContent(event,this,'form-information-modal-carousel','form-information-copy-paste')" onkeyup="Modals.copyContent(event,this,'form-information-modal-carousel','form-information-copy-paste')" class="fas fa-copy m-1 click" tabindex="14"></i> <i data-name="Form Information Modal" title="Click to Close this Dialog Box." onclick="Modals.close(event,this)" onkeyup="Modals.close(event,this)" class="fas fa-times m-1 click" tabindex="14"></i> </div> </div> <div class="dialog-content" tabindex="14"> <div id="form-information-copy-paste" class="form-group d-none"> <label>Copy and Paste Below Content.</label> <a class="float-right click color-inherit" onclick="Modals.copyContent(event,this,'form-information-modal-carousel','form-information-copy-paste')" onkeyup="Modals.copyContent(event,this,'form-information-modal-carousel','form-information-copy-paste')" tabindex="14"> <i class="fas fa-times-circle mt-2"></i> </a> <textarea class="form-control" rows="5"></textarea> </div> <div id="form-information-modal-carousel" class="carousel" data-interval="false" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item table-responsive active"> <table class="table table-striped table-sm"> <tbody id="form-information-modal-carousel-page-1"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-bordered table-sm"> <tbody id="form-information-modal-carousel-page-2"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-sm"> <tbody id="form-information-modal-carousel-page-3"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-sm"> <tbody id="form-information-modal-carousel-page-4"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="dialog-footer d-flex justify-content-around"> <a id="form-information-prev" class="btn btn-link text-dark" href="#form-information-modal-carousel" role="button" data-slide="prev" tabindex="14"> <i class="fas fa-chevron-left"></i> <span class="sr-only">Previous</span> </a> <ol id="form-information-carousel-indicators" class="carousel-indicators mx-0 my-3 p-initial"> </ol> <a id="form-information-next" data-test="form-information-next" class="btn btn-link text-dark" href="#form-information-modal-carousel" role="button" data-slide="next" tabindex="14"> <i class="fas fa-chevron-right"></i> <span class="sr-only">Next</span> </a> </div> </div> <div id="settings-modal" data-test="settings-modal" class="dialog-box fixed-dialog-box d-none bg-white"> <div class="dialog-header bg-sec text-white px-1 d-flex justify-content-between"> <p id="settings-modal-title" data-test="settings-modal-title" class="lead mb-0">Settings</p> <div class="dialog-header-actions"> <i id="settings-modal-drag" title="Click and drag to move this Dialog Box." class="fas fa-arrows-alt m-1 drag-icon d-none d-sm-inline-block" tabindex="15"></i> <i data-name="Settings Modal" title="Click to Close this Dialog Box." onclick="Modals.close(event,this)" class="fas fa-times m-1 click" tabindex="15"></i> </div> </div> <div class="dialog-content" tabindex="15"> <form> <div class="form-group row"> <label class="col-sm-4 col-form-label">Hover over Fact for quick information.</label> <select id="hover-option-select" class="col-sm-8 form-control" onchange="ModalsSettings.hoverOption(event, this.value);"> <option value="true">On</option> <option value="false">Off</option> </select> </div> <div class="form-group row"> <label class="col-sm-4 col-form-label">Auto Scrolling Position</label> <select id="scroll-position-select" class="col-sm-8 form-control" onchange="ModalsSettings.scrollPosition(event, this.value);"> <option value="start">Top</option> <option value="center">Center</option> </select> <small class="form-text text-muted col-sm-12">Selecting a fact from the Sections Menu or the Fact Menu will automatically scroll that element to the (Top, or Middle) of the viewer window. This setting will have no use on IE 10, or Safari.</small> </div> <hr> <div class="form-group row"> <label class="col-sm-4 col-form-label"> <span class="tagged-data-example-1">Tagged Data</span> </label> <div class="col-sm-4"> <div id="tagged-data-color-picker" tabindex="15"></div> </div> </div> <hr> <div class="form-group row"> <label class="col-sm-4 col-form-label"> <span class="search-results-example-1">Search Results</span> </label> <div class="col-sm-4"> <div id="search-results-color-picker" tabindex="15"></div> </div> </div> <hr> <div class="form-group row"> <label class="col-sm-4 col-form-label"> <span class="selected-fact-example-1">Selected Fact</span> </label> <div class="col-sm-4"> <div id="selected-fact-color-picker" tabindex="15"></div> </div> </div> <hr> <div class="form-group row"> <label class="col-sm-4 col-form-label"> <span class="tag-shading-exmple-1">Tag Shading (hover)</span> </label> <div class="col-sm-4"> <div id="tag-shading-color-picker" tabindex="15"></div> </div> </div> </form> </div> <div class="dialog-footer d-flex justify-content-around"></div> </div> <div id="taxonomy-modal" class="dialog-box fixed-dialog-box d-none bg-white"> <div class="dialog-header bg-sec text-white px-1 d-flex justify-content-between"> <p id="taxonomy-modal-title" class="lead mb-0"></p> <div class="dialog-header-actions"> <i id="taxonomy-modal-drag" title="Click and drag to move this Dialog Box." class="fas fa-arrows-alt m-1 drag-icon d-none d-sm-inline-block" tabindex="16"></i> <i onclick="Pagination.goToTaxonomy(event, this)" onkeyup="Pagination.goToTaxonomy(event, this)" id="taxonomy-modal-jump" title="Click to see this in the Facts sidebar." class="fas fa-directions m-1 click" tabindex="16"></i> <i onclick="Modals.copyContent(event,this,'taxonomy-modal-carousel','taxonomy-copy-paste')" onkeyup="Modals.copyContent(event,this,'taxonomy-modal-carousel','taxonomy-copy-paste')" class="fas fa-copy m-1 click" tabindex="16"></i> <i id="taxonomy-modal-compress" onclick="Modals.expandToggle(event, this, 'taxonomy-modal', 'taxonomy-modal-expand', 'taxonomy-modal-compress');" onkeyup="Modals.expandToggle(event, this,'taxonomy-modal', 'taxonomy-modal-expand', 'taxonomy-modal-compress');" class="fas fa-compress m-1 click d-none" tabindex="16"></i> <i id="taxonomy-modal-expand" onclick="Modals.expandToggle(event, this,'taxonomy-modal', 'taxonomy-modal-expand', 'taxonomy-modal-compress');" onkeyup="Modals.expandToggle(event, this,'taxonomy-modal', 'taxonomy-modal-expand', 'taxonomy-modal-compress');" class="fas fa-expand m-1 click d-none" tabindex="16"></i> <i onclick="Modals.close(event,this);" onkeyup="Modals.close(event,this);" class="fas fa-times m-1 click" tabindex="16"></i> </div> </div> <div class="dialog-content" tabindex="16"> <p id="taxonomy-modal-subtitle" class="text-center font-weight-bold"></p> <div id="taxonomy-copy-paste" class="form-group d-none"> <label>Copy and Paste Below Content.</label> <a class="float-right click color-inherit" onclick="Modals.copyContent(event,this,'taxonomy-modal-carousel','taxonomy-copy-paste')" onkeyup="Modals.copyContent(event,this,'taxonomy-modal-carousel','taxonomy-copy-paste')" tabindex="16"> <i class="fas fa-times-circle mt-2"></i> </a> <textarea class="form-control" rows="5"></textarea> </div> <div id="taxonomy-modal-carousel" class="carousel" data-interval="false" data-keyboard="true"> <div class="carousel-inner"> <div class="carousel-item table-responsive active"> <table class="table table-striped table-sm"> <tbody id="taxonomy-modal-carousel-page-1"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-sm"> <tbody id="taxonomy-modal-carousel-page-2"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-sm"> <tbody id="taxonomy-modal-carousel-page-3"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-sm"> <tbody id="taxonomy-modal-carousel-page-4"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="dialog-footer d-flex justify-content-around"> <a data-test="modal-taxonomy-prev" class="btn btn-link text-dark" href="#taxonomy-modal-carousel" role="button" data-slide="prev" tabindex="16"> <i class="fas fa-chevron-left"></i> <span class="sr-only">Previous</span> </a> <ol id="taxonomy-modal-carousel-indicators" class="carousel-indicators mx-0 my-3 p-initial"> </ol> <a data-test="modal-taxonomy-next" class="btn btn-link text-dark" href="#taxonomy-modal-carousel" role="button" data-slide="next" tabindex="16"> <i class="fas fa-chevron-right"></i> <span class="sr-only">Next</span> </a> </div> </div> <div id="taxonomy-nested-modal" class="dialog-box fixed-dialog-box d-none bg-white"> <div class="dialog-header bg-sec text-white px-1 d-flex justify-content-between"> <p class="lead mb-0"> Nested Facts <span id="nested-page"></span> <span>/</span> <span id="nested-count"></span> </p> <div class="dialog-header-actions"> <i id="taxonomy-nested-modal-drag" title="Click and drag to move this Dialog Box." class="fas fa-arrows-alt m-1 drag-icon d-none d-sm-inline-block"></i> <i onclick="Pagination.goToTaxonomy(event, this)" onkeyup="Pagination.goToTaxonomy(event, this)" id="nested-taxonomy-modal-jump" title="Click to see this in the Facts sidebar." class="fas fa-directions m-1 click" tabindex="16"></i> <i onclick="Modals.copyContent(event,this,'modal-taxonomy-nested-content-carousel','taxonomy-nested-copy-paste')" onkeyup="Modals.copyContent(event,this,'modal-taxonomy-nested-content-carousel','taxonomy-nested-copy-paste')" class="fas fa-copy m-1 click"></i> <i id="taxonomy-nested-modal-compress" onclick="Modals.expandToggle(event, this,'taxonomy-nested-modal', 'taxonomy-nested-modal-expand', 'taxonomy-nested-modal-compress');" onkeyup="Modals.expandToggle(event, this,'taxonomy-nested-modal', 'taxonomy-nested-modal-expand', 'taxonomy-nested-modal-compress');" class="fas fa-compress m-1 click d-none"></i> <i id="taxonomy-nested-modal-expand" onclick="Modals.expandToggle(event, this,'taxonomy-nested-modal', 'taxonomy-nested-modal-expand', 'taxonomy-nested-modal-compress');" onkeyup="Modals.expandToggle(event, this,'taxonomy-nested-modal', 'taxonomy-nested-modal-expand', 'taxonomy-nested-modal-compress');" class="fas fa-expand m-1 click d-none"></i> <i onclick="Modals.close(this);" class="fas fa-times m-1 click"></i> </div> </div> <div class="dialog-content pt-0"> <div id="modal-nested-fact-labels" class="carousel" data-interval="false" data-keyboard="true"> <div class="d-flex"> <a data-test="modal-taxonomy-nested-prev" class="btn btn-link text-dark" href="#modal-nested-fact-labels" role="button" data-slide="prev"> <i class="fas fa-chevron-left"></i> <span class="sr-only">Previous</span> </a> <div id="modal-taxonomy-nested-label-carousel" class="carousel-inner"> <!-- Below is populated dynamically VIA JS --> </div> <a data-test="modal-taxonomy-nested-next" class="btn btn-link text-dark" href="#modal-nested-fact-labels" role="button" data-slide="next"> <i class="fas fa-chevron-right"></i> <span class="sr-only">Next</span> </a> </div> </div> <div id="taxonomy-nested-copy-paste" class="form-group d-none"> <label>Copy and Paste Below Content.</label> <a class="float-right click color-inherit" onclick="Modals.copyContent(event,this,'modal-taxonomy-nested-content-carousel','taxonomy-nested-copy-paste')" onkeyup="Modals.copyContent(event,this,'modal-taxonomy-nested-content-carousel','taxonomy-nested-copy-paste')" tabindex="14"> <i class="fas fa-times-circle mt-2"></i> </a> <textarea class="form-control" rows="5"></textarea> </div> <div id="modal-taxonomy-nested-content-carousel" class="carousel" data-interval="false" data-keyboard="true"> <div class="carousel-inner"> <div class="carousel-item table-responsive active"> <table class="table table-striped table-sm"> <tbody id="modal-taxonomy-nested-content-carousel-page-1"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-bordered table-sm"> <tbody id="modal-taxonomy-nested-content-carousel-page-2"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-sm"> <tbody id="modal-taxonomy-nested-content-carousel-page-3"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> <div class="carousel-item table-responsive"> <table class="table table-striped table-sm"> <tbody id="modal-taxonomy-nested-content-carousel-page-4"> <!-- Below is populated dynamically VIA JS --> <tr> <td class="text-center"> <i class="fas fa-spinner fa-spin"></i> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div id="taxonomy-nested-nav-controls" class="dialog-footer d-flex justify-content-around"> <a data-test="modal-taxonomy-prev" class="btn btn-link text-dark" href="#modal-taxonomy-nested-content-carousel" role="button" data-slide="prev"> <i class="fas fa-chevron-left"></i> <span class="sr-only">Previous</span> </a> <ol id="taxonomy-nested-modal-carousel-indicators" class="carousel-indicators mx-0 my-3 p-initial"> <!-- Below is populated dynamically VIA JS --> </ol> <a data-test="modal-taxonomy-next" class="btn btn-link text-dark" href="#modal-taxonomy-nested-content-carousel" role="button" data-slide="next"> <i class="fas fa-chevron-right"></i> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>