*
{
	/* Prevent user selection */
	-ms-user-select: none;
	user-select: none;
	outline: 0;
	cursor: default !important;
}

html
{
	background: #F3F3F3;
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI';

	/* Prevent zoom */
	-ms-content-zooming: none; /* Disables zooming */
	touch-action: none; /* Disable any special actions on tap/touch */

	/* Prevent overscroll */
	overflow: hidden;
	height: 100%;
}

/* On Apple devices agaves don't have the outer pane margins */
html.is-apple
{
	padding: 0 20px;
}

html.is-apple span,
html.is-apple div
{
	font-family: 'SF Pro Text','Myriad Set Pro','SF Pro Icons','Helvetica Neue','Helvetica','Arial', sans-serif;
}

body
{
	margin: 0;
	padding: 0;

	/* Prevent overscroll */
	overflow: auto;
	height: 100%;
}

#refresh
{
	position: absolute;
	top: 5px;
	height: 30px;
	width: auto;
	padding: 0;
	z-index: 1;
}

[dir='ltr'] #refresh
{
	right: 0;
}

[dir='rtl'] #refresh
{
	left: 0;
}

[dir='ltr'].is-apple #refresh
{
	right: 20px;
}

[dir='rtl'].is-apple #refresh
{
	left: 20px;
}

#refresh i
{
	color: black;
	line-height: 30px;
	font-size: 18px;
	margin: 0;
}

#refresh:hover i
{
	color: #7719AA;
}

/*
 * Pivot overrides:
 */
.accchecker .ms-Pivot
{
	margin-bottom: 15px;
}

.accchecker .ms-Pivot button
{
	margin: 0;
	padding: 0;
	font-size: 16px;
	outline-offset: -1px;
}

[dir='ltr'] .accchecker .ms-Pivot button
{
	margin-right: 24px;
}

[dir='rtl'] .accchecker .ms-Pivot button
{
	margin-left: 24px;
}

.accchecker .ms-Pivot button::before
{
	left: 0;
	right: 0;
}

.is-apple .accchecker .ms-Pivot button::before
{
	border-bottom-width: 3px;
}

.accchecker i[data-icon-name]
{
	position: relative;
	font-size: 8px;
	line-height: 30px;
	margin: 0 5px;
	height: 30px;
}

[dir='rtl'] .accchecker i[data-icon-name='ChevronRight']
{
	transform: rotate(180deg);
}

/*
 * ProgressIndicator overrides
 */
.ms-Fabric--isFocusVisible .ms-ProgressIndicator-itemName:focus
{
	outline: 1px solid black;
}

/*
 * Help section
 */
hr
{
	margin: 10px 0 0 0;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #E4E4E4;
}

.is-apple hr
{
	margin: 10px -20px 0 -20px;
}

.accchecker #help-section
{
	/* Stick the help section to the bottom */
	background: #F3F3F3;
	position: fixed;
	bottom: 0;
	z-index: 10;
	/* use for calculating how much space */
	margin-top: 10px;
}

[dir='ltr'].is-apple .accchecker #help-section
{
	margin-right: 20px;
}

[dir='rtl'].is-apple .accchecker #help-section
{
	margin-left: 20px;
}

.accchecker .violation-type
{
	font-size: 13px;
	font-weight: bold;
	margin: 10px 0;
}

.accchecker #help-section button
{
	padding: 0;
	font-size: 13px;
	box-sizing: border-box;
}

.accchecker #help-section i[data-icon-name]
{
	color: black;
}

[dir='ltr'] .accchecker #help-section i[data-icon-name]
{
	margin-left: 0;
}

[dir='rtl'] .accchecker #help-section i[data-icon-name]
{
	margin-right: 0;
}

.accchecker #help-section .help-content
{
	font-size: 13px;
	white-space: pre-wrap;
	line-height: 16px;
}

[dir='ltr'] .accchecker #help-section .help-content
{
	margin: 0 0 8px 15px;
}

[dir='rtl'] .accchecker #help-section .help-content
{
	margin: 15px 0 8px 0;
}

.accchecker #help-section .help-content button
{
	height: auto;
	text-decoration: underline;
}

.accchecker #help-section .help-content button:not(:hover)
{
	color: black;
}

.accchecker #help-section .help-content button .ms-Button-label
{
	margin: 0px;
}

.accchecker #learn-more
{
	font-size: 13px;
	margin: 8px 0;
	color: #7719AA;
}

.is-apple .accchecker #learn-more
{
	font-size: 14px;
}

/*
 * Tree section
 */
.accchecker .tree-root
{
	box-sizing: border-box;
	background-color: white;
	padding: 6px 0;
	position: relative;
	overflow: auto;
}

.accchecker .tree-root > .tree-node-item > div,
.accchecker.page-view .tree-root > .tree-node > .tree-node-item > div
{
	font-weight: 600;
}

.accchecker .tree-node-item
{
	height: 30px;
	max-width: 100%;
}

.is-apple .accchecker .tree-node-item
{
	height: 28px;
}

.accchecker .tree-node-item > div
{
	position: relative;
	display: inline-block;
	font-size: 13px;
	line-height: 30px;

	/* Ellipsize the text */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.is-apple .accchecker .tree-node-item > div
{
	font-size: 14px;
	line-height: 28px;
}

.accchecker .tree-node-item > .background
{
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0;
	height: 30px;
	outline-offset: -1px;
}

.is-apple .accchecker .tree-node-item > .background
{
	height: 28px;
}

.ms-Fabric--isFocusVisible .accchecker .tree-node:focus > .tree-node-item > .background
{
	outline: 1px solid black;
}

.accchecker .tree-node-item > :not(.background)
{
	z-index: 1;
}

.accchecker .tree-node-item > div
{
	/* For ellipsis to work, we need to force a max-width:
	 * - 15px is reserved for vertical scrollbars
	 * - The remaining 4px are the margin set below
	 */
	max-width: calc(100% - 19px);
}

[dir='ltr'] .accchecker .tree-node-item > div:first-child
{
	margin-left: 4px;
}

[dir='rtl'] .accchecker .tree-node-item > div:first-child
{
	margin-right: 4px;
}

[dir='ltr'] .accchecker .tree-root > .tree-node-item
{
	margin-left: 15px;
}

[dir='rtl'] .accchecker .tree-root > .tree-node-item
{
	margin-right: 15px;
}

[dir='ltr'] .accchecker .tree-node
{
	padding-left: 12px;
}

[dir='rtl'] .accchecker .tree-node
{
	padding-right: 12px;
}

.accchecker .tree-node-item > .tree-node-leaf
{
	/* For ellipsis to work, we need to force a max-width:
	 * - 15px is reserved for vertical scrollbars
	 * - The remaining 23px are the margin set below
	 */
	max-width: calc(100% - 38px);
}

[dir='ltr'] .accchecker .tree-node .tree-node-item .tree-node-leaf
{
	margin-left: 23px;
}

[dir='rtl'] .accchecker .tree-node .tree-node-item .tree-node-leaf
{
	margin-right: 23px;
}

.accchecker .tree-node:not(.tree-root) .tree-node-item:hover .background,
.accchecker .tree-node:not(.tree-root) .tree-node-item.selected .background
{
	background-color: #F3F3F3;
}

/**
  * Fishbowl
  */
.accchecker #fishbowl
{
	width: 100%;
	background: white;
	text-align: center;
	display: table;
	color: #737373;
}

.accchecker #fishbowl > div
{
	display: table-cell;
	vertical-align: middle;
	padding: 8px;
}

.accchecker #fishbowl > div > span
{
	display: inline-block;
}

.accchecker #fishbowl h1
{
	font-size: 18px;
	font-weight: 400;
	margin-top: 28px;
	margin-bottom: 0;
	text-align: center;
}

.is-apple .accchecker #fishbowl h1
{
	font-size: 14px;
	font-weight: 600;
}

.accchecker #fishbowl :focus
{
	outline: 1px solid black;
}

.accchecker #fishbowl i[data-icon-name='Accepx'],
.accchecker #fishbowl i[data-icon-name='Lock'],
.accchecker #fishbowl i[data-icon-name='StatusCircleErrorX']
{
	width: 40px;
	height: 40px;
	background: #F1F1F1;
	line-height: 40px;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
}

.accchecker #fishbowl i[data-icon-name='ChevronRight']
{
	position: relative;
	top: 2px;
}

.accchecker #fishbowl p
{
	margin: 0;
}

/*
 * Action buttons are layed out in the following way {Icon} {Text}
 * However, our design specifies that we need {Text} {ChevronRight Icon}
 * A quick RTL friendly way to support this without any DOM/JS changes
 * is the "double mirror" trick which involves mirroring a parent element
 * thus flipping the order of its children, and then mirroring every child
 * back so that everything comes back to its natural original rotation.
 * This is why we have the two scaleX(-1) transforms below.
 */
.accchecker #fishbowl .ms-Button--action
{
	margin-top: 4px;
	transform: scaleX(-1);
}

.accchecker #fishbowl .ms-Button--action i,
.accchecker #fishbowl .ms-Button-textContainer
{
	color: black;
	font-weight: 600;
	transform: scaleX(-1);
}

.is-apple .accchecker #fishbowl .ms-Button--action i,
.is-apple .accchecker #fishbowl .ms-Button-textContainer
{
	color: #7719AA;
}

.is-apple .accchecker #fishbowl .ms-Button-textContainer
{
	font-size: 12px;
}

/*
 * Unfortunately CSS transforms are not additive so our scaleX overrites the rotate
 * declared previously for ChevronRight. We have to respecify it for this particular
 * case alongside the scaleX transform to have both enabled.
 */
[dir='rtl'] .accchecker #fishbowl .ms-Button--action i[data-icon-name='ChevronRight']
{
	transform: scaleX(-1) rotate(180deg);
}