diff --git a/dist/components/Breadcrumb/Breadcrumb.hbs b/dist/components/Breadcrumb/Breadcrumb.hbs
new file mode 100644
index 00000000..def2a24e
--- /dev/null
+++ b/dist/components/Breadcrumb/Breadcrumb.hbs
@@ -0,0 +1,21 @@
+
+
+
+
+
+ {{#each props.items}}
+
+ {{name}}
+
+
+ {{/each}}
+
+
\ No newline at end of file
diff --git a/dist/components/Breadcrumb/Breadcrumb.json b/dist/components/Breadcrumb/Breadcrumb.json
new file mode 100644
index 00000000..42d5f7c1
--- /dev/null
+++ b/dist/components/Breadcrumb/Breadcrumb.json
@@ -0,0 +1,6 @@
+{
+ "name": "Breadcrumb",
+ "dependencies": [
+ "ContextualMenu"
+ ]
+}
diff --git a/dist/components/Breadcrumb/Breadcrumb.scss b/dist/components/Breadcrumb/Breadcrumb.scss
new file mode 100644
index 00000000..be341397
--- /dev/null
+++ b/dist/components/Breadcrumb/Breadcrumb.scss
@@ -0,0 +1,177 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Breadcrumb styles
+
+
+.ms-Breadcrumb {
+ @include ms-baseFont;
+ margin: 23px 0 1px;
+
+ &.is-overflow {
+ .ms-Breadcrumb-overflow {
+ display: inline;
+ }
+ }
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: $ms-font-size-s;
+ color: $ms-color-neutralSecondary;
+ vertical-align: top;
+ margin: 11px 7px;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+
+ .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+
+ &:last-of-type {
+ .ms-Breadcrumb-chevron {
+ display: none;
+ }
+ }
+ }
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+
+ .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ display: inline-block;
+ color: $ms-color-themePrimary;
+ padding: 8px;
+ cursor: pointer;
+ vertical-align: top;
+ }
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+ margin-right: -2px;
+
+ &.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ @include drop-shadow;
+ background-color: $ms-color-white;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle);
+ }
+
+ &::before {
+ position: absolute;
+ @include drop-shadow;
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ transform: rotate(45deg);
+ background-color: $ms-color-white;
+ }
+
+ .ms-ContextualMenu {
+ border: 0;
+ box-shadow: none;
+ position: relative;
+ width: 190px;
+
+ &.is-open {
+ margin-bottom: 0;
+ }
+ }
+}
+
+.ms-Breadcrumb-itemLink,
+.ms-Breadcrumb-overflowButton {
+ text-decoration: none;
+ outline: transparent;
+
+ &:hover {
+ background-color: $ms-color-neutralLighter;
+ cursor: pointer;
+ }
+
+ &:focus {
+ outline: $ms-color-neutralSecondaryAlt solid 1px;
+ color: $ms-color-black;
+ }
+
+ &:active {
+ outline: transparent;
+ background-color: $ms-color-neutralTertiaryAlt;
+ }
+}
+
+.ms-Breadcrumb-itemLink {
+ font-weight: $ms-font-weight-light;
+ font-size: $ms-font-size-xl;
+ color: $ms-color-neutralPrimary;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ vertical-align: top;
+}
+
+
+@media screen and (max-width: $ms-screen-md-max) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: $ms-font-size-l;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 10px;
+ margin: 8px 5px;
+ }
+
+ .ms-Breadcrumb-overflow {
+ .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ padding: 5px 4px;
+ }
+ }
+}
+
+@media screen and (max-width: $ms-screen-sm-max) {
+ .ms-Breadcrumb-itemLink {
+ font-size: $ms-font-size-m;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin: 5px 4px;
+ }
+
+ .ms-Breadcrumb-overflow {
+ .ms-Breadcrumb-overflowButton {
+ padding: 2px 4px;
+ }
+ }
+}
diff --git a/dist/components/Button/Button.hbs b/dist/components/Button/Button.hbs
new file mode 100644
index 00000000..6d886b5f
--- /dev/null
+++ b/dist/components/Button/Button.hbs
@@ -0,0 +1,19 @@
+
+
+<{{props.tag}} class="ms-Button {{props.customClasses}}
+ {{#if props.modifier}}ms-Button--{{props.modifier}}{{/if}}
+ {{#if props.label}}{{else}}ms-Button--noLabel{{/if}}">
+ {{#if props.icon}}
+
+ {{/if}}
+ {{props.label}}
+ {{#if props.description}}
+ {{props.description}}
+ {{/if}}
+ {{#if props.dropdownIcon}}
+
+ {{/if}}
+{{props.tag}}>
\ No newline at end of file
diff --git a/dist/components/Button/Button.json b/dist/components/Button/Button.json
new file mode 100644
index 00000000..2026b0a2
--- /dev/null
+++ b/dist/components/Button/Button.json
@@ -0,0 +1,7 @@
+{
+ "name": "Button",
+ "props": {
+ "label": "Create Account",
+ "tag": "button"
+ }
+}
diff --git a/dist/components/Button/Button.scss b/dist/components/Button/Button.scss
new file mode 100644
index 00000000..b1990401
--- /dev/null
+++ b/dist/components/Button/Button.scss
@@ -0,0 +1,289 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Button styles
+
+
+.ms-Button {
+ @include ms-u-normalize;
+ @include ms-baseFont;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ background-color: $ms-color-neutralLighter;
+ border: 1px solid $ms-color-neutralLighter;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+
+ &.is-hidden {
+ display: none;
+ }
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ border-color: $ms-color-neutralLight;
+
+ .ms-Button-label {
+ color: $ms-color-black;
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackSelected;
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteSelected;
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ &:focus {
+ background-color: $ms-color-neutralLight;
+ border-color: $ms-color-themePrimary;
+ outline: 1px solid transparent;
+
+ .ms-Button-label {
+ color: $ms-color-black;
+ }
+ }
+
+ &:active {
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+
+ .ms-Button-label {
+ color: $ms-color-white;
+ }
+ }
+
+ &:disabled,
+ &.is-disabled {
+ background-color: $ms-color-neutralLighter;
+ border-color: $ms-color-neutralLighter;
+ cursor: default;
+
+ .ms-Button-label {
+ color: $ms-color-neutralTertiary;
+ }
+
+ &:hover,
+ &:focus {
+ outline: 0;
+ }
+ }
+}
+
+.ms-Button-label {
+ color: $ms-color-neutralPrimary;
+ font-weight: $ms-font-weight-semibold;
+ font-size: $ms-font-size-m;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+//== Modifier: Primary action button
+//
+.ms-Button.ms-Button--primary {
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+
+ .ms-Button-label {
+ color: $ms-color-white;
+ }
+
+ &:hover {
+ background-color: $ms-color-themeDark;
+ border-color: $ms-color-themeDark;
+ }
+
+ &:focus {
+ background-color: $ms-color-themeDark;
+ border-color: $ms-color-themeDarker;
+ }
+
+ &:active {
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+ }
+
+ &:disabled,
+ &.is-disabled {
+ background-color: $ms-color-neutralLighter;
+ border-color: $ms-color-neutralLighter;
+
+ .ms-Button-label {
+ color: $ms-color-neutralTertiary;
+ }
+ }
+}
+
+
+//== Modifier: Hero button
+//
+.ms-Button.ms-Button--hero {
+ align-items: center;
+ background-color: transparent;
+ border: 0;
+ display: flex;
+ padding: 0;
+
+ .ms-Button-icon {
+ color: $ms-color-themePrimary;
+ display: inline-block;
+ font-size: $ms-font-size-s;
+ margin-right: 4px;
+ position: relative;
+ top: 1px;
+ text-align: center;
+
+ .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid $ms-color-themePrimary;
+ font-size: $ms-font-size-s;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+ }
+ }
+
+ .ms-Button-label {
+ color: $ms-color-themePrimary;
+ font-size: $ms-font-size-xl;
+ font-weight: $ms-font-weight-light;
+ position: relative;
+ text-decoration: none;
+ }
+
+ &:hover,
+ &:focus {
+ .ms-Button-icon {
+ color: $ms-color-themeDark;
+
+ .ms-Icon {
+ border: 1px solid $ms-color-themeDark;
+ }
+ }
+
+ .ms-Button-label {
+ color: $ms-color-themeDarker;
+ }
+ }
+
+ &:active {
+ .ms-Button-icon {
+ color: $ms-color-themePrimary;
+
+ .ms-Icon {
+ border: 1px solid $ms-color-themePrimary;
+ }
+ }
+
+ .ms-Button-label {
+ color: $ms-color-themePrimary;
+ }
+ }
+
+ &:disabled,
+ &.is-disabled {
+ .ms-Button-icon {
+ color: $ms-color-neutralTertiaryAlt;
+
+ .ms-Icon {
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ }
+ }
+
+ .ms-Button-label {
+ color: $ms-color-neutralTertiary;
+ }
+ }
+}
+
+
+//== Modifier: Compound button
+//
+.ms-Button.ms-Button--compound {
+ display: block;
+ height: auto;
+ max-width: 280px;
+ min-height: 72px;
+ padding: 20px;
+
+ .ms-Button-label {
+ display: block;
+ font-weight: $ms-font-weight-semibold;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+ }
+
+ .ms-Button-description {
+ color: $ms-color-neutralSecondary;
+ display: block;
+ font-weight: $ms-font-weight-regular;
+ font-size: $ms-font-size-s;
+ position: relative;
+ text-align: left;
+ top: 3px;
+ }
+
+ &:hover {
+ .ms-Button-description {
+ color: $ms-color-neutralDark;
+ }
+ }
+
+ &:focus {
+ border-color: $ms-color-themePrimary;
+ background-color: $ms-color-neutralLighter;
+
+ .ms-Button-label {
+ color: $ms-color-neutralPrimary;
+ }
+
+ .ms-Button-description {
+ color: $ms-color-neutralSecondary;
+ }
+ }
+
+ &:active {
+ background-color: $ms-color-themePrimary;
+
+ .ms-Button-description,
+ .ms-Button-label {
+ color: $ms-color-white;
+ }
+ }
+
+ &:disabled,
+ &.is-disabled {
+ .ms-Button-label,
+ .ms-Button-description {
+ color: $ms-color-neutralTertiary;
+ }
+
+ &:focus,
+ &:active {
+ border-color: $ms-color-neutralLighter;
+ background-color: $ms-color-neutralLighter;
+
+ .ms-Button-label,
+ .ms-Button-description {
+ color: $ms-color-neutralTertiary;
+ }
+ }
+ }
+}
diff --git a/dist/components/Callout/Callout.hbs b/dist/components/Callout/Callout.hbs
new file mode 100644
index 00000000..d12c496e
--- /dev/null
+++ b/dist/components/Callout/Callout.hbs
@@ -0,0 +1,30 @@
+
+
+
+
+
+ {{#if props.closeIcon}}
+
+
+
+ {{/if}}
+
+
+
+
+ {{#each props.actions}}
+ {{renderPartial component props}}
+ {{/each}}
+
+
+
+
diff --git a/dist/components/Callout/Callout.json b/dist/components/Callout/Callout.json
new file mode 100644
index 00000000..50cb4193
--- /dev/null
+++ b/dist/components/Callout/Callout.json
@@ -0,0 +1,10 @@
+{
+ "name": "Callout",
+ "dependencies": [
+ "Button",
+ "Label",
+ "Link",
+ "ContextualHost",
+ "CommandButton"
+ ]
+}
diff --git a/dist/components/Callout/Callout.scss b/dist/components/Callout/Callout.scss
new file mode 100644
index 00000000..4d7e6914
--- /dev/null
+++ b/dist/components/Callout/Callout.scss
@@ -0,0 +1,160 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Callout styles
+
+$ms-Callout-commandButtonHeight: 27px;
+
+.ms-Callout {
+ @include ms-baseFont;
+ width: 288px;
+
+ &.is-hidden {
+ display: none;
+ }
+}
+
+.ms-Callout-header {
+ z-index: ($ms-zIndex-Callout + $ms-zIndex-middle);
+ padding-top: 24px;
+ padding-bottom: 12px;
+ padding-left: 28px;
+ padding-right: 28px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-xl;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-weight: $ms-font-weight-semilight;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-s;
+}
+
+.ms-Callout-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: $ms-color-neutralSecondary;
+ z-index: 110;
+}
+
+.ms-Callout-link {
+ font-size: $ms-font-size-m;
+}
+
+.ms-Callout-inner {
+ height: 100%;
+ padding-top: 0;
+ padding-bottom: 12px;
+ padding-left: 28px;
+ padding-right: 28px;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+
+ .ms-CommandButton.ms-CommandButton--inline {
+ height: $ms-Callout-commandButtonHeight;
+ line-height: $ms-Callout-commandButtonHeight;
+
+ .ms-CommandButton-button {
+ height: $ms-Callout-commandButtonHeight;
+ line-height: $ms-Callout-commandButtonHeight;
+ }
+
+ .ms-CommandButton-label {
+ line-height: $ms-Callout-commandButtonHeight;
+ }
+
+ .ms-CommandButton-icon {
+ line-height: $ms-Callout-commandButtonHeight;
+ }
+
+ &:hover .ms-Button,
+ &:focus .ms-Button {
+ color: $ms-color-themePrimary;
+ }
+ }
+
+ .ms-Callout-button {
+ margin-right: 12px;
+ }
+}
+
+//= Modifier: OOBE (Out of box experience) callout
+//
+.ms-Callout.ms-Callout--OOBE {
+
+ .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: $ms-color-themePrimary;
+ }
+
+ .ms-Callout-title {
+ font-weight: $ms-font-weight-light;
+ font-size: $ms-font-size-xxl;
+ color: $ms-color-white;
+ }
+
+ .ms-Callout-inner {
+ padding-top: 20px;
+ }
+
+ .ms-Callout-subText {
+ font-size: $ms-font-size-m;
+ }
+}
+
+
+//= Modifier: ActionText callout
+//
+.ms-Callout.ms-Callout--actionText {
+ .ms-Callout-actions {
+ border-top: 1px solid $ms-color-neutralLight;
+ padding-top: 12px;
+ }
+
+ .ms-Callout-inner {
+ padding-bottom: 12px;
+ }
+}
+
+
+//= Modifier: Peek callout
+//
+.ms-Callout.ms-Callout--peek {
+ .ms-Callout-header {
+ padding-bottom: 0;
+ }
+
+ .ms-Callout-title {
+ font-size: $ms-font-size-m;
+ }
+
+ .ms-Callout-actions {
+ margin-top: 12px;
+ margin-bottom: -4px;
+ }
+}
diff --git a/dist/components/CheckBox/CheckBox.hbs b/dist/components/CheckBox/CheckBox.hbs
new file mode 100644
index 00000000..7f718a11
--- /dev/null
+++ b/dist/components/CheckBox/CheckBox.hbs
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ {{props.label}}
+
+
diff --git a/dist/components/CheckBox/CheckBox.json b/dist/components/CheckBox/CheckBox.json
new file mode 100644
index 00000000..ac890ff0
--- /dev/null
+++ b/dist/components/CheckBox/CheckBox.json
@@ -0,0 +1,6 @@
+{
+ "name": "CheckBox",
+ "dependencies": [
+ "Label"
+ ]
+}
diff --git a/dist/components/CheckBox/CheckBox.scss b/dist/components/CheckBox/CheckBox.scss
new file mode 100644
index 00000000..8e0db7f9
--- /dev/null
+++ b/dist/components/CheckBox/CheckBox.scss
@@ -0,0 +1,175 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// CheckBox styles
+
+$ms-checkbox-field-size: 20px;
+$ms-checkbox-transition-duration: 200ms;
+$ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
+
+
+.ms-CheckBox {
+ box-sizing: border-box;
+ color: $ms-color-neutralPrimary;
+ font-family: $ms-font-family-base;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ min-height: 36px;
+ position: relative;
+
+ .ms-Label {
+ font-size: $ms-font-size-m;
+ padding: 0 0 0 26px;
+ cursor: pointer;
+ display: inline-block;
+ }
+}
+
+// The hidden input
+.ms-CheckBox-input {
+ position: absolute;
+ opacity: 0;
+}
+
+// The checkbox square container
+.ms-CheckBox-field::before {
+ content: '';
+ display: inline-block;
+ border: 2px solid $ms-color-neutralTertiary;
+ width: $ms-checkbox-field-size;
+ height: $ms-checkbox-field-size;
+ cursor: pointer;
+ font-weight: normal;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: background, border, border-color;
+ transition-duration: $ms-checkbox-transition-duration;
+ transition-timing-function: $ms-checkbox-transition-timing;
+}
+
+// The check mark icon
+.ms-CheckBox-field::after {
+ @include ms-Icon--CheckMark;
+ font-family: 'FabricMDL2Icons';
+ display: none;
+ position: absolute;
+ font-weight: 900;
+ background-color: transparent;
+ font-size: $ms-font-size-s-plus;
+ top: 0;
+ color: $ms-color-white;
+ line-height: $ms-checkbox-field-size;
+ width: $ms-checkbox-field-size;
+ text-align: center;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-black;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-white;
+ }
+}
+
+// The checkbox field
+.ms-CheckBox-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+
+ &:hover,
+ &:focus {
+ &::before {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+
+ .ms-Label {
+ color: $ms-color-black;
+ }
+ }
+
+ //== State: A disabled checkbox
+ //
+ &.is-disabled {
+ cursor: default;
+
+ &::before {
+ background-color: $ms-color-neutralTertiaryAlt;
+ border-color: $ms-color-neutralTertiaryAlt;
+ color: $ms-color-neutralTertiaryAlt;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+
+ .ms-Label {
+ color: $ms-color-neutralTertiary;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+ }
+
+ //== State: A checkbox in focus
+ //
+ &.in-focus {
+ &::before {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+
+ &.is-disabled::before {
+ border-color: $ms-color-neutralTertiaryAlt;
+ }
+
+ &.is-checked::before {
+ border-color: $ms-color-themeDarkAlt;
+ }
+ }
+}
+
+//== State: When the checkbox is checked
+//
+.ms-CheckBox-field.is-checked {
+ &::before {
+ border: 10px solid $ms-color-themePrimary;
+ background-color: $ms-color-themePrimary;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ &::after {
+ display: block;
+ }
+
+ &:hover,
+ &:focus {
+ &::before {
+ border-color: $ms-color-themeDarkAlt;
+ }
+ }
+}
diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs
new file mode 100644
index 00000000..2131e158
--- /dev/null
+++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs
@@ -0,0 +1,15 @@
+
+
+
+
+ {{props.title}}
+
+
+ {{#each props.fields}}
+ {{renderPartial component props}}
+ {{/each}}
+
+
\ No newline at end of file
diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json
new file mode 100644
index 00000000..710cfa8b
--- /dev/null
+++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json
@@ -0,0 +1,7 @@
+{
+ "name": "ChoiceFieldGroup",
+ "dependencies": [
+ "Label",
+ "CheckBox"
+ ]
+}
diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss
new file mode 100644
index 00000000..3ecd646f
--- /dev/null
+++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss
@@ -0,0 +1,16 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+//== Component: Choicefield group
+//
+// Choice field groups contain multiple radio buttons or checkboxes
+.ms-ChoiceFieldGroup {
+ @include ms-baseFont;
+ margin-bottom: 4px;
+
+ .ms-ChoiceFieldGroup-list {
+ padding: 0;
+ margin: 0;
+ }
+}
diff --git a/dist/components/CommandBar/CommandBar.hbs b/dist/components/CommandBar/CommandBar.hbs
new file mode 100644
index 00000000..cb53d1ca
--- /dev/null
+++ b/dist/components/CommandBar/CommandBar.hbs
@@ -0,0 +1,27 @@
+
+
+
+ {{#if props.sideCommands}}
+
+ {{#each props.sideCommands}}
+ {{renderPartial component props}}
+ {{/each}}
+
+ {{/if}}
+
+ {{#if props.transientComponent}}
+ {{renderPartial props.transientComponent.component props.transientComponent.props}}
+ {{/if}}
+ {{#each props.commands}}
+ {{renderPartial component props}}
+ {{/each}}
+ {{#if props.overflow}}
+
+ {{renderPartial props.overflow.component props.overflow.props}}
+
+ {{/if}}
+
+
\ No newline at end of file
diff --git a/dist/components/CommandBar/CommandBar.json b/dist/components/CommandBar/CommandBar.json
new file mode 100644
index 00000000..be5ece1f
--- /dev/null
+++ b/dist/components/CommandBar/CommandBar.json
@@ -0,0 +1,11 @@
+{
+ "name": "CommandBar",
+ "dependencies": [
+ "ContextualMenu",
+ "Button",
+ "Label",
+ "SearchBox",
+ "CommandButton",
+ "ContextualHost"
+ ]
+}
diff --git a/dist/components/CommandBar/CommandBar.scss b/dist/components/CommandBar/CommandBar.scss
new file mode 100644
index 00000000..671119ed
--- /dev/null
+++ b/dist/components/CommandBar/CommandBar.scss
@@ -0,0 +1,141 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Command Bar styles
+
+$CommandBar-height: 40px;
+$CommandBar-md-height: 44px;
+$CommandBar-iconSize: 18px;
+$CommandBar-sideAreaWidthsm: 128px;
+$SearchBox-width: 220px;
+$CommandBarItem-height: $CommandBar-height;
+$red: #FF0000;
+
+@mixin highContrastBorder($color) {
+ border-left: 1px solid $color;
+ border-right: 1px solid $color;
+}
+
+.ms-CommandBar {
+ @include ms-baseFont;
+ background-color: $ms-color-neutralLighter;
+ height: $CommandBar-height;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+
+ &:focus {
+ outline: none;
+ }
+
+ .ms-CommandButton--actionButton {
+ border-right: 1px solid $ms-color-neutralLight;
+ }
+
+ //== CommandBar -> ms-Button specific changes
+ //
+ .ms-Button {
+ height: 100%;
+
+ &.ms-Button--noLabel {
+ .ms-Button-icon {
+ padding-right: 0;
+ }
+ }
+
+ &.is-hidden {
+ display: none;
+ }
+ }
+
+ .ms-SearchBox,
+ .ms-SearchBox-field,
+ .ms-SearchBox-label {
+ height: 100%;
+ }
+
+ .ms-SearchBox {
+ display: inline-block;
+ vertical-align: top;
+ transition: margin-right $ms-duration2;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: $SearchBox-width;
+
+ @media only screen and (max-width: $ms-screen-md-max) {
+ width: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ z-index: $ms-zIndex-front;
+ }
+ }
+
+ .ms-CommandBar-overflowButton {
+ .ms-CommandButton-button {
+ font-size: 18px;
+ padding: 0 11px;
+ }
+ }
+
+ // Search is collapsed unless activated and its only
+ // collapsed < L break points
+
+ @media only screen and (min-width: $ms-screen-xl-min) {
+ .ms-SearchBox {
+ margin-right: 24px;
+ }
+ }
+
+ @media only screen and (max-width: $ms-screen-md-max) {
+ height: $CommandBar-md-height;
+ }
+
+ @media only screen and (min-width: $ms-screen-lg-min) {
+
+ &.search-expanded {
+ .ms-SearchBox {
+ margin-right: 8px;
+ }
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ transition: none;
+ }
+ }
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ height: 100%;
+ overflow: hidden;
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 4px;
+ height: 100%;
+
+ .ms-Button:last-child {
+ margin-right: 0;
+ }
+
+ @media only screen and (min-width: $ms-screen-lg-min) {
+ min-width: $CommandBar-sideAreaWidthsm;
+ }
+
+ @media only screen and (min-width: $ms-screen-xl-min) {
+ padding-right: 20px;
+ }
+}
diff --git a/dist/components/CommandButton/CommandButton.hbs b/dist/components/CommandButton/CommandButton.hbs
new file mode 100644
index 00000000..bb5ca3ba
--- /dev/null
+++ b/dist/components/CommandButton/CommandButton.hbs
@@ -0,0 +1,20 @@
+
+
+
+ <{{props.tag}} class="ms-CommandButton-button" {{#if props.disabled}}tabIndex="-1"{{/if}}>
+ {{#if props.icon}}
+ {{/if}}{{props.label}} {{#if props.dropdownIcon}}
+ {{/if}}
+ {{props.tag}}>
+ {{#if props.splitIcon}}
+ <{{props.tag}} class="ms-CommandButton-splitIcon">
+
+ {{props.tag}}>
+ {{/if}}
+ {{#if props.dropdown}}
+ {{renderPartial props.dropdown.component props.dropdown.props}}
+ {{/if}}
+
\ No newline at end of file
diff --git a/dist/components/CommandButton/CommandButton.json b/dist/components/CommandButton/CommandButton.json
new file mode 100644
index 00000000..d4d92167
--- /dev/null
+++ b/dist/components/CommandButton/CommandButton.json
@@ -0,0 +1,13 @@
+{
+ "name": "CommandButton",
+ "dependencies": [
+ "ContextualMenu",
+ "ContextualHost"
+ ],
+ "props": {
+ "label": "Command",
+ "icon": "circleFill",
+ "tag": "button",
+ "iconColor": "themePrimary"
+ }
+}
diff --git a/dist/components/CommandButton/CommandButton.scss b/dist/components/CommandButton/CommandButton.scss
new file mode 100644
index 00000000..a1a93bdf
--- /dev/null
+++ b/dist/components/CommandButton/CommandButton.scss
@@ -0,0 +1,296 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Button styles
+
+$CommandButton-height: 40px;
+$CommandButton-md-height: 44px;
+$CommandButton-padding: 8px;
+$CommandButtonIcon-size: 16px;
+$CommandButtonIcon-md-size: 20px;
+
+.ms-CommandButton {
+ @include ms-baseFont;
+ display: inline-block;
+ position: relative;
+ vertical-align: top;
+
+ &.is-hidden {
+ display: none;
+ }
+
+ &:disabled,
+ &.is-disabled {
+ .ms-CommandButton-button {
+ cursor: default;
+
+ &:hover {
+ background-color: $ms-color-themeLighterAlt;
+ }
+
+ .ms-CommandButton-label {
+ color: $ms-color-neutralTertiary;
+ }
+
+ .ms-CommandButton-icon {
+ color: $ms-color-neutralTertiary;
+ }
+ }
+ }
+
+ .ms-ContextualMenu {
+ display: none;
+ }
+}
+
+//== Mixins: Base button, focus, and icon alignments
+//
+@mixin ms-CommandButton-iconBase {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+@mixin ms-CommandBar-focusRectangle {
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid $ms-color-neutralPrimary;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+@mixin ms-CommandBarButton-buttonBase {
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ // background-color: $ms-color-themeLighterAlt;
+ // border: 1px solid $ms-color-themeLighterAlt;
+ cursor: pointer;
+ display: inline-block;
+ height: $CommandButton-height;
+ line-height: $CommandButton-height;
+ outline: 1px solid transparent;
+ padding: 0 $CommandButton-padding;
+ position: relative;
+ vertical-align: top;
+ background: transparent;
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+
+ .ms-CommandButton-label {
+ color: $ms-color-neutralDark;
+ }
+ }
+
+ &:active {
+ background-color: $ms-color-neutralLight;
+ }
+
+ &:focus::before {
+ @include ms-CommandBar-focusRectangle;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ @media only screen and (max-width: $ms-screen-md-max) {
+ height: $CommandButton-md-height;
+
+ .ms-CommandButton-icon {
+ font-size: $CommandButtonIcon-md-size;
+ }
+
+ .ms-CommandButton-label {
+ line-height: $CommandButton-md-height;
+ }
+ }
+}
+
+.ms-CommandButton-button,
+.ms-CommandButton-splitIcon {
+ @include ms-CommandBarButton-buttonBase;
+}
+
+.ms-CommandButton-button {
+ border: 0;
+ margin: 0;
+}
+
+// Add space between adjacent command buttons.
+.ms-CommandButton + .ms-CommandButton {
+ margin-left: 8px;
+
+ @media only screen and (max-width: $ms-screen-md-max) {
+ margin-left: 4px;
+ }
+}
+
+.ms-CommandButton-icon {
+ display: inline-block;
+ margin-right: $CommandButton-padding;
+ position: relative;
+ font-size: $CommandButtonIcon-size;
+ min-width: 16px;
+ height: 100%;
+
+ .ms-Icon {
+ @include ms-CommandButton-iconBase;
+ }
+}
+
+.ms-CommandButton-label {
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ color: $ms-color-neutralPrimary;
+ line-height: $CommandButton-height;
+ height: 100%;
+ display: inline-block;
+ vertical-align: top;
+
+ &:hover {
+ color: $ms-color-neutralDark;
+ }
+}
+
+.ms-CommandButton-dropdownIcon,
+.ms-CommandButton-splitIcon {
+ display: inline-block;
+ position: relative;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-s;
+ font-weight: $ms-font-weight-semilight;
+ min-width: 12px;
+ height: 100%;
+ vertical-align: top;
+ margin-left: 8px;
+
+ .ms-Icon {
+ line-height: normal;
+ padding-top: $CommandButton-padding * 2;
+ }
+
+ &:focus::before {
+ @include ms-CommandBar-focusRectangle;
+ }
+
+ @media only screen and (max-width: $ms-screen-md-max) {
+ display: none;
+ }
+}
+
+.ms-CommandButton-splitIcon {
+ margin-left: -2px;
+ width: 27px;
+ border: 0;
+
+ .ms-Icon {
+ margin-left: -1px;
+ position: relative;
+ padding-top: 16px;
+
+ &::after {
+ position: absolute;
+ content: ' ';
+ width: 1px;
+ height: 16px;
+ top: 12px;
+ left: -8px;
+ border-left: 1px solid $ms-color-neutralTertiaryAlt;
+ }
+ }
+}
+
+//= Modifier: No Label modifier
+//
+.ms-CommandButton.ms-CommandButton--noLabel {
+ .ms-CommandButton-icon {
+ margin-right: 0;
+ }
+
+ .ms-CommandButton-label {
+ display: none;
+ }
+
+ .ms-CommandButton-button {
+ padding: 0 12px;
+ }
+}
+
+//= Modifier: Inline modifier
+//
+.ms-CommandButton.ms-CommandButton--inline {
+ .ms-CommandButton-button {
+ background: none;
+ }
+}
+
+//= Modifier: Action Button modifier
+//
+.ms-CommandButton.ms-CommandButton--actionButton {
+ .ms-CommandButton-button {
+ width: 50px;
+ height: $CommandButton-height;
+ }
+
+ .ms-CommandButton-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 16px;
+ height: 16px;
+ padding-right: 0;
+ }
+}
+
+@mixin ms-CommandButton-pivotLine {
+ content: '';
+ height: 2px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ background-color: $ms-color-themePrimary;
+ bottom: 0;
+ z-index: $ms-zIndex-middle;
+}
+
+//= Modifier: Pivot Button modifier
+//
+.ms-CommandButton.ms-CommandButton--pivot {
+
+ &.is-active::before {
+ @include ms-CommandButton-pivotLine;
+ }
+
+ &:hover {
+ &::before {
+ @include ms-CommandButton-pivotLine;
+ }
+ }
+}
+
+.ms-CommandButton.ms-CommandButton--textOnly,
+.ms-CommandButton.ms-CommandButton--pivot {
+
+ .ms-CommandButton-label {
+ display: inline-block;
+
+ @media only screen and (max-width: $ms-screen-sm-max) {
+ font-size: 16px;
+ }
+ }
+}
diff --git a/dist/components/ContextualHost/ContextualHost.hbs b/dist/components/ContextualHost/ContextualHost.hbs
new file mode 100644
index 00000000..7e4b0e5a
--- /dev/null
+++ b/dist/components/ContextualHost/ContextualHost.hbs
@@ -0,0 +1,15 @@
+
+
+
+
+
+ {{#if @partial-block}} {{> @partial-block }} {{/if}}
+
+
+
\ No newline at end of file
diff --git a/dist/components/ContextualHost/ContextualHost.json b/dist/components/ContextualHost/ContextualHost.json
new file mode 100644
index 00000000..eadbe3b7
--- /dev/null
+++ b/dist/components/ContextualHost/ContextualHost.json
@@ -0,0 +1,3 @@
+{
+ "name": "ContextualHost"
+}
diff --git a/dist/components/ContextualHost/ContextualHost.scss b/dist/components/ContextualHost/ContextualHost.scss
new file mode 100644
index 00000000..c473ac41
--- /dev/null
+++ b/dist/components/ContextualHost/ContextualHost.scss
@@ -0,0 +1,145 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+.ms-ContextualHost {
+ @include ms-baseFont;
+ z-index: $ms-zIndex-front;
+ margin: 16px auto;
+ position: relative;
+ min-width: 10px;
+ display: none;
+ background-color: $ms-color-white;
+ @include drop-shadow;
+
+ &.is-positioned {
+ position: absolute;
+ margin: 0;
+ }
+
+ &.is-open {
+ display: inline-block;
+ }
+}
+
+// Mixin for arrow size and color
+@mixin arrowBorders($ms-color-top, $ms-color-right, $ms-color-bottom, $ms-color-left) {
+ border-top: 10px solid $ms-color-top;
+ border-right: 10px solid $ms-color-right;
+ border-bottom: 10px solid $ms-color-bottom;
+ border-left: 10px solid $ms-color-left;
+}
+
+.ms-ContextualHost-beak {
+ box-shadow: 0 0 15px -5px $ms-color-neutralPrimaryAlt;
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ background: $ms-color-white;;
+ border: 1px solid $ms-color-neutralLight;
+ box-sizing: border-box;
+ top: -6px;
+ display: none;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ z-index: $ms-zIndex-back;
+ outline: 1px solid transparent;
+}
+
+//= Modifier: ContextualHost with left and right arrows
+//
+.ms-ContextualHost.ms-ContextualHost--arrowLeft,
+.ms-ContextualHost.ms-ContextualHost--arrowRight {
+ .ms-ContextualHost-beak {
+ top: 40px;
+ display: none; // Hide left and right arrows on sm screens
+ }
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft {
+ .ms-ContextualHost-beak {
+ left: -10px;
+ }
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowRight {
+ .ms-ContextualHost-beak {
+ right: -10px;
+ }
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowTop {
+ .ms-ContextualHost-beak {
+ display: block;
+ top: -10px;
+ }
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowBottom {
+ .ms-ContextualHost-beak {
+ display: block;
+ bottom: -10px;
+ }
+}
+
+// The actual ContextualHost element
+.ms-ContextualHost-main {
+ position: relative;
+ background-color: $ms-color-white;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: $ms-zIndex-middle;
+ min-height: 10px;
+}
+
+.ms-ContextualHost-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: $ms-font-size-m;
+ color: $ms-color-neutralSecondary;
+ z-index: $ms-zIndex-front;
+}
+
+//= Modifier: Close button ContextualHost
+//
+.ms-ContextualHost.ms-ContextualHost--close {
+ .ms-ContextualHost-title {
+ margin-right: 20px; // Avoid overlap with close button
+ }
+}
+
+//= Modifier: Close button ContextualHost
+//
+
+.ms-ContextualHost.ms-ContextualHost--primaryArrow {
+ .ms-ContextualHost-beak {
+ background-color: $ms-color-themePrimary;
+ }
+}
+
+@media (min-width: $ms-screen-md-min) {
+ // Make width larger and remove centering on md+ screens
+ .ms-ContextualHost {
+ margin: 16px;
+
+ &.is-positioned {
+ margin: 0;
+ }
+ }
+
+ // Show arrows right and left
+ .ms-ContextualHost.ms-ContextualHost--arrowRight,
+ .ms-ContextualHost.ms-ContextualHost--arrowLeft {
+ .ms-ContextualHost-beak {
+ display: block;
+ }
+ }
+}
diff --git a/dist/components/ContextualMenu/ContextualMenu.hbs b/dist/components/ContextualMenu/ContextualMenu.hbs
new file mode 100644
index 00000000..d12fb663
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.hbs
@@ -0,0 +1,28 @@
+
+
+
\ No newline at end of file
diff --git a/dist/components/ContextualMenu/ContextualMenu.json b/dist/components/ContextualMenu/ContextualMenu.json
new file mode 100644
index 00000000..e77900f9
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.json
@@ -0,0 +1,6 @@
+{
+ "name": "ContextualMenu",
+ "dependencies": [
+ "ContextualHost"
+ ]
+}
diff --git a/dist/components/ContextualMenu/ContextualMenu.scss b/dist/components/ContextualMenu/ContextualMenu.scss
new file mode 100644
index 00000000..e9abf61b
--- /dev/null
+++ b/dist/components/ContextualMenu/ContextualMenu.scss
@@ -0,0 +1,211 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Contextual Menu styles
+
+.ms-ContextualMenu {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ display: block;
+ min-width: 180px;
+ max-width: 220px;
+ list-style-type: none;
+ position: relative;
+ background-color: $ms-color-white;
+
+ &.is-hidden {
+ display: none;
+ }
+}
+
+.ms-ContextualMenu-item {
+ position: relative;
+}
+
+.ms-ContextualMenu-link {
+ @include ms-u-borderBox;
+ text-decoration: none;
+ color: $ms-color-neutralPrimary;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ overflow: hidden;
+ line-height: 34px;
+ padding: 0 16px 0 25px;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: $ms-color-neutralLighter;
+ color: $ms-color-neutralDark;
+
+ .ms-ContextualMenu-subMenuIcon {
+ color: $ms-color-neutralDark;
+ }
+ }
+
+ &:focus {
+ outline: transparent;
+ border: 1px solid $ms-color-neutralSecondary;
+ }
+
+ &.is-selected {
+ background-color: $ms-color-neutralQuaternaryAlt;
+ color: $ms-color-black;
+ font-weight: $ms-font-weight-semibold;
+
+ ~.ms-ContextualMenu-subMenuIcon {
+ color: $ms-color-black;
+ }
+
+ &:hover {
+ background-color: $ms-color-neutralQuaternary;
+ }
+ }
+
+ &.is-disabled {
+ color: $ms-color-neutralTertiary;
+ background-color: $ms-color-white;
+ pointer-events: none;
+
+ &:active,
+ &:focus {
+ border-color: $ms-color-white;
+ }
+
+ .ms-Icon {
+ color: $ms-color-neutralTertiary;
+ pointer-events: none;
+ cursor: default;
+ }
+ }
+}
+
+// Modifier: Menu item Dividers
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ background-color: $ms-color-neutralLight;
+ position: relative;
+}
+
+// Modifier: Menu item Headers
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: $ms-color-themePrimary;
+ font-size: $ms-font-size-s;
+ text-transform: uppercase;
+ height: 36px;
+ line-height: 36px;
+ padding: 0 18px;
+}
+
+// Modifier: Contextual menu with submenu
+.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px; // Move the submenu to the left of the menu item that triggered it
+}
+
+// Right chevron.
+// Note: The .ms-ContextualMenu-caretRight class has been deprecated.
+// Please use .ms-ContextualMenu-subMenuIcon.
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: $ms-color-neutralPrimary;
+ font-size: 8px;
+ font-weight: 600;
+ width: 24px;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ pointer-events: none;
+}
+
+//== Modifier: Multi-select menu
+//
+.ms-ContextualMenu.ms-ContextualMenu--multiselect {
+
+ // Align the header with the items
+ .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 16px 0 26px;
+ }
+
+ .ms-ContextualMenu-link {
+
+ // Multi-select checkmark
+ &.is-selected {
+ background-color: $ms-color-white;
+ font-weight: $ms-font-weight-semibold;
+ color: $ms-color-neutralPrimary;
+
+ // Checkmark
+ &::after {
+ @include ms-Icon;
+ color: $ms-color-neutralPrimary;
+ content: '\E73E';
+ font-size: $ms-icon-size-xs;
+ font-weight: 800;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ left: 7px;
+ }
+
+ &:hover,
+ &:focus {
+ color: $ms-color-neutralDark;
+ background-color: $ms-color-neutralLighter;
+
+ &::after {
+ color: $ms-color-neutralDark;
+ }
+ }
+
+ &:active {
+ color: $ms-color-black;
+ background-color: $ms-color-neutralQuaternary;
+
+ &::after {
+ color: $ms-color-black;
+ }
+ }
+ }
+ }
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons,
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks {
+ .ms-ContextualMenu-link {
+ padding-left: 40px;
+ }
+
+ .ms-Icon {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 40px;
+ text-align: center;
+ }
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons {
+ width: 220px;
+}
diff --git a/dist/components/DatePicker/DatePicker.hbs b/dist/components/DatePicker/DatePicker.hbs
new file mode 100644
index 00000000..882e01ca
--- /dev/null
+++ b/dist/components/DatePicker/DatePicker.hbs
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Start date
+
+
+
+
+
+
+
+
+
Go to today
+
+
+
+ Jan
+ Feb
+ Mar
+ Apr
+ May
+ Jun
+ Jul
+ Aug
+ Sep
+ Oct
+ Nov
+ Dec
+
+
+
+
diff --git a/dist/components/DatePicker/DatePicker.json b/dist/components/DatePicker/DatePicker.json
new file mode 100644
index 00000000..86873e2f
--- /dev/null
+++ b/dist/components/DatePicker/DatePicker.json
@@ -0,0 +1,3 @@
+{
+ "name": "DatePicker"
+}
diff --git a/dist/components/DatePicker/DatePicker.scss b/dist/components/DatePicker/DatePicker.scss
new file mode 100644
index 00000000..3437a831
--- /dev/null
+++ b/dist/components/DatePicker/DatePicker.scss
@@ -0,0 +1,530 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Date Picker styles
+
+
+.ms-DatePicker {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ margin-bottom: 17px;
+ z-index: $ms-zIndex-DatePicker;
+
+ .ms-TextField { position: relative; }
+}
+
+// Base wrapper for the date picker.
+.ms-DatePicker-picker {
+ color: $ms-color-black;
+ font-size: $ms-font-size-m;
+ position: relative;
+ text-align: left;
+ z-index: $ms-zIndex-back;
+}
+
+// Insert a calendar icon over the date field.
+.ms-DatePicker-event {
+ color: $ms-color-neutralSecondary;
+ font-size: 21px;
+ line-height: 20px;
+ pointer-events: none;
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ z-index: $ms-zIndex-middle;
+}
+
+// The holder is the only "scrollable" top-level container element.
+.ms-DatePicker-holder {
+ -webkit-overflow-scrolling: touch;
+ @include ms-u-borderBox;
+ background: $ms-color-white;
+ position: absolute;
+ min-width: 300px;
+ display: none;
+}
+
+
+// When the picker opens, reveal the content.
+.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
+ @include ms-u-slideDownIn10;
+ @include ms-u-borderBox;
+ @include drop-shadow;
+ border: 1px solid $ms-color-neutralLight;
+ display: block;
+}
+
+// When a picker opens, always open it in front of other closed pickers
+.ms-DatePicker-picker--opened {
+ position: relative;
+ z-index: $ms-zIndex-front;
+}
+
+
+// The frame and wrap work together to ensure that
+// clicks within the picker don’t reach the holder.
+.ms-DatePicker-frame {
+ padding: 1px;
+}
+
+.ms-DatePicker-wrap {
+ margin: -1px;
+ padding: 9px;
+}
+
+
+// Wrapper containing the calendar view to pick a specific date.
+.ms-DatePicker-dayPicker {
+ display: block;
+ margin-bottom: 30px;
+}
+
+
+// The header containing the month and year.
+.ms-DatePicker-header {
+ height: 40px;
+ line-height: 44px;
+}
+
+
+// The month and year labels.
+.ms-DatePicker-month,
+.ms-DatePicker-year {
+ display: inline-block;
+ font-weight: $ms-font-weight-light;
+ font-size: 21px;
+ color: $ms-color-themePrimary;
+ margin-top: -1px;
+
+ &:hover {
+ color: $ms-color-themeDark;
+ cursor: pointer;
+ }
+}
+
+.ms-DatePicker-month {
+ margin-left: 15px;
+}
+
+.ms-DatePicker-year {
+ margin-left: 5px;
+}
+
+
+// The calendar table of dates.
+.ms-DatePicker-table {
+ text-align: center;
+ border-collapse: collapse;
+ border-spacing: 0;
+ table-layout: fixed;
+ font-size: inherit;
+
+ td {
+ margin: 0;
+ padding: 0;
+
+ &:hover { outline: 1px solid transparent; }
+ }
+}
+
+
+// The days on the calendar.
+.ms-DatePicker-day,
+.ms-DatePicker-weekday {
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ line-height: 40px;
+ font-weight: $ms-font-weight-regular;
+ font-size: 15px;
+ color: $ms-color-neutralPrimary;
+}
+
+
+// Today.
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: $ms-color-themeLight;
+}
+
+
+// Disabled day.
+.ms-DatePicker-day--disabled::before {
+ border-top-color: $ms-color-neutralTertiary;
+}
+
+
+// Out of focus days.
+.ms-DatePicker-day--outfocus {
+ color: $ms-color-neutralTertiary;
+ font-weight: $ms-font-weight-regular;
+}
+
+
+// Hovered date picker items.
+.ms-DatePicker-day--infocus:hover,
+.ms-DatePicker-day--outfocus:hover {
+ cursor: pointer;
+ color: $ms-color-black;
+ background: $ms-color-neutralLight;
+}
+
+
+// Highlighted and hovered/focused dates.
+.ms-DatePicker-day--highlighted:hover,
+.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
+ cursor: pointer;
+ color: $ms-color-white;
+ background: $ms-color-themePrimary;
+}
+
+
+// Disabled and highlighted dates.
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
+ background: $ms-color-neutralTertiary;
+}
+
+
+// Month and year pickers, hidden on small screens by default.
+.ms-DatePicker-monthPicker,
+.ms-DatePicker-yearPicker {
+ display: none;
+}
+
+
+// Month and year previous/next components.
+.ms-DatePicker-monthComponents {
+ position: absolute;
+ top: 9px;
+ right: 9px;
+ left: 9px;
+}
+
+.ms-DatePicker-yearComponents,
+.ms-DatePicker-decadeComponents {
+ position: absolute;
+ right: 10px;
+}
+
+.ms-DatePicker-prevMonth,
+.ms-DatePicker-nextMonth,
+.ms-DatePicker-prevYear,
+.ms-DatePicker-nextYear,
+.ms-DatePicker-prevDecade,
+.ms-DatePicker-nextDecade {
+ width: 40px;
+ height: 40px;
+ display: block;
+ float: right;
+ margin-left: 10px;
+ text-align: center;
+ line-height: 40px;
+ font-size: 21px;
+ color: $ms-color-neutralSecondary;
+ position: relative;
+ top: 3px;
+
+ &:hover {
+ color: $ms-color-neutralDark;
+ cursor: pointer;
+ outline: 1px solid transparent;
+ }
+}
+
+// Without modifying the Pickadate JS, this transparent
+// button is necessary to toggle the month view.
+.ms-DatePicker-headerToggleView {
+ height: 40px;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 140px;
+ z-index: $ms-zIndex-middle;
+ cursor: pointer;
+}
+
+
+// Text showing the currently-selected year.
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: $ms-font-weight-semilight;
+ font-size: 21px;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 15px;
+}
+
+// The current year is blue and actionable.
+.ms-DatePicker-currentYear {
+ color: $ms-color-themePrimary;
+
+ &:hover {
+ color: $ms-color-themeDark;
+ cursor: pointer;
+ }
+}
+
+
+// A grid of month or year options, which pushes them over
+// five pixels for horizontal centering and moves them down.
+.ms-DatePicker-optionGrid {
+ position: relative;
+ height: 210px;
+ width: 280px;
+ margin: 10px 0 30px 5px;
+}
+
+// Button to select a different month.
+.ms-DatePicker-monthOption,
+.ms-DatePicker-yearOption {
+ background-color: $ms-color-neutralLighter;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ cursor: pointer;
+ float: left;
+ margin: 0 10px 10px 0;
+ font-weight: $ms-font-weight-regular;
+ font-size: 13px;
+ color: $ms-color-neutralPrimary;
+ text-align: center;
+
+ &:hover {
+ background-color: $ms-color-neutralTertiaryAlt;
+ outline: 1px solid transparent;
+ }
+
+ &.is-highlighted {
+ background-color: $ms-color-neutralPrimary;
+ color: $ms-color-white;
+ }
+}
+
+
+// Button to navigate to the current date.
+.ms-DatePicker-goToday {
+ bottom: 9px;
+ color: $ms-color-themePrimary;
+ cursor: pointer;
+ font-weight: $ms-font-weight-semilight;
+ font-size: 13px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ position: absolute;
+ right: 9px;
+
+ &:hover {
+ outline: 1px solid transparent;
+ }
+}
+
+// State: The picker is showing the year components.
+.ms-DatePicker.is-pickingYears {
+
+ // Hide the day picking components.
+ .ms-DatePicker-dayPicker,
+ .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ // Hide the month picking components.
+ .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ // Show the year picking components.
+ .ms-DatePicker-yearPicker {
+ display: block;
+ }
+
+}
+
+// 460px and up.
+//
+// On screens that can fit it, we show the month picker next to the day picker at all times.
+@media (min-width: 460px) {
+
+ .ms-DatePicker-holder {
+ width: 440px;
+ }
+
+
+ // Update header text styles.
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-weight: $ms-font-weight-semilight;
+ font-size: 17px;
+ color: $ms-color-neutralPrimary;
+
+ &:hover {
+ color: $ms-color-neutralPrimary;
+ cursor: default;
+ }
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ // Contains the calendar view for picking a day.
+ .ms-DatePicker-dayPicker {
+ @include ms-u-borderBox;
+ border-right: 1px solid $ms-color-neutralLight;
+ width: 220px;
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ // Show the month picker.
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ // Style the the month and year pickers.
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0;
+ }
+
+ // Size the month components to the day picker's new width
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ // Size and position of the month and year labels.
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+
+ // Calendar day cells are smaller.
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-weight: $ms-font-weight-semibold;
+ font-size: 12px;
+ }
+
+
+ // Reduce the size of arrows to change month/year.
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-prevYear,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-nextDecade {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+
+ // This component is only used on small displays.
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+
+ // Position the current year and decade labels.
+ .ms-DatePicker-currentYear,
+ .ms-DatePicker-currentDecade {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+
+ // Reduce the size of the month buttons.
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 10px 10px 0;
+
+ &:hover {
+ outline: 1px solid transparent;
+ }
+ }
+
+
+ // Position the "Go to today" button below the month picker.
+ .ms-DatePicker-goToday {
+ @include ms-u-borderBox;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ right: 10px;
+ text-align: right;
+ top: 199px;
+ width: 210px;
+ }
+
+ // State: The picker is showing the year components.
+ // On larger screens the calendar will remain and the years
+ // will replace the months.
+ .ms-DatePicker.is-pickingYears {
+
+ // On large screens, we need to keep the day picker
+ // and month components in view.
+ .ms-DatePicker-dayPicker,
+ .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ // Hide the month picking components.
+ .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ // Show the year picking components.
+ .ms-DatePicker-yearPicker {
+ display: block;
+ }
+ }
+}
+
+// On smaller screens the month button toggles to the picking months state.
+@media (max-width: 459px) {
+
+ // State: The picker is showing the month components.
+ .ms-DatePicker.is-pickingMonths {
+
+ // Hide the day picking components.
+ .ms-DatePicker-dayPicker,
+ .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ // Show the month picking components.
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+ }
+}
diff --git a/dist/components/DetailsList/DetailsList.hbs b/dist/components/DetailsList/DetailsList.hbs
new file mode 100644
index 00000000..6c13ef2d
--- /dev/null
+++ b/dist/components/DetailsList/DetailsList.hbs
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Commissioned Research
+
Yesterday, 3:34pm
+
Alton Lafferty
+
Editor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Commissioned Research
+
Yesterday, 3:34pm
+
Alex Darrow
+
Editor
+
+
+
+
+
+
diff --git a/dist/components/DetailsList/DetailsList.json b/dist/components/DetailsList/DetailsList.json
new file mode 100644
index 00000000..0eb1c58e
--- /dev/null
+++ b/dist/components/DetailsList/DetailsList.json
@@ -0,0 +1,13 @@
+{
+ "name": "DetailsList",
+ "notes": "",
+ "description": "DetailsList is a derivative of List and provides a sortable, filterable, justified table for rendering large sets of items.",
+ "template": "DetailsList.html",
+ "class": "ms-DetailsList",
+ "branches": [
+ {
+ "name": "Default",
+ "default": true
+ }
+ ]
+}
diff --git a/dist/components/DetailsList/DetailsList.scss b/dist/components/DetailsList/DetailsList.scss
new file mode 100644
index 00000000..9b76d498
--- /dev/null
+++ b/dist/components/DetailsList/DetailsList.scss
@@ -0,0 +1,340 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Styles for details list
+
+// Variables
+$rowHeight: 36px;
+$selectedColor: $ms-color-themeLighter;
+$selectedHoverColor: $ms-color-themeLight;
+$focusedBorderColor: $ms-color-neutralTertiary;
+$selectedColor: $ms-color-themeLighter;
+$selectedHoverColor: $ms-color-themeLight;
+$unselectedHoverColor: $ms-color-themeLighterAlt;
+
+//== DetailsList
+//
+.ms-DetailsList {
+ position: relative;
+}
+
+.ms-DetailsList.is-horizontalConstrained {
+ overflow-x: auto;
+ overflow-y: inherit;
+}
+
+.ms-DetailsList-cell {
+ word-break: break-word;
+}
+
+
+//== DetailsHeader
+//
+.ms-DetailsHeader {
+ display: inline-block;
+ min-width: 100%;
+ height: $rowHeight;
+ line-height: $rowHeight;
+ white-space: nowrap;
+ padding-bottom: 1px;
+ border-bottom: 1px solid $ms-color-neutralLight;
+ margin-bottom: 1px;
+ cursor: default;
+
+ @include user-select(none);
+
+ &.is-singleSelect {
+ padding-left: 40px;
+ }
+
+ &.is-resizingColumn .ms-DetailsHeader-sizerCover {
+ background: transparent;
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ cursor: col-resize;
+ }
+}
+
+.ms-DetailsHeader-cell.is-check .ms-Check-circle {
+ visibility: hidden;
+}
+
+.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,
+.ms-DetailsHeader.is-allSelected .ms-Check-circle {
+ visibility: visible;
+}
+
+.ms-DetailsHeader-cellWrapper {
+ display: inline-block;
+ position: relative;
+}
+
+.ms-DetailsHeader-cellSizeWrapper {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 16px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
+
+.ms-DetailsHeader-filterChevron.ms-Icon {
+ color: $ms-color-neutralTertiary;
+ padding-left: 4px;
+ vertical-align: middle;
+}
+
+.ms-DetailsHeader-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ color: $ms-color-neutralTertiary;
+ border: 0;
+ background: none;
+ line-height: inherit;
+ margin: 0;
+ font-size: inherit;
+ font-family: inherit;
+ text-align: left;
+ height: $rowHeight;
+ vertical-align: top;
+
+ &.is-check {
+ position: relative;
+ padding: 8px 10px;
+ margin: 0;
+ }
+
+ &:focus {
+ outline: transparent;
+ }
+
+ &.is-sortable {
+ color: $ms-color-black;
+ cursor: default;
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ }
+ }
+
+ &.is-filter {
+ position: absolute;
+ right: 0;
+ width: 20px;
+ top: 0;
+ bottom: 0;
+ padding: 0;
+ text-align: center;
+ color: $ms-color-black;
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ }
+ }
+
+ &.is-filter::before {
+ content: '';
+ position: absolute;
+ border-left: 1px solid $ms-color-neutralTertiary;
+ top: 10px;
+ bottom: 10px;
+ left: 0;
+ }
+
+ &.is-sizer {
+ position: absolute;
+ width: 16px;
+ cursor: col-resize;
+ bottom: 0;
+ top: 0;
+ height: inherit;
+ z-index: 99;
+ }
+
+ &.is-sorted.is-sortable .ms-DetailsHeader-sortArrow {
+ display: inline;
+ }
+
+ &is-sortedDescending .ms-DetailsHeader-sortArrow {
+ transform: rotate(180deg);
+ }
+}
+
+.ms-DetailsHeader-cell.is-resizing.is-sizer::after,
+.ms-DetailsHeader-cell.is-sizer:hover::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background: $ms-color-neutralLight;
+ border: 1px solid $ms-color-white;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsHeader-cell:focus::before {
+ content: '';
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid $ms-color-neutralTertiary;
+}
+
+.ms-DetailsHeader-sortArrow.ms-Icon {
+ font-size: 12px;
+ margin-right: 4px;
+ display: none;
+ color: $ms-color-neutralTertiary;
+}
+
+
+//== DetailsRow
+//
+.ms-DetailsRow {
+ position: relative;
+ display: inline-block;
+ min-width: 100%;
+ min-height: $rowHeight;
+ vertical-align: top;
+ white-space: nowrap;
+ padding: 10px 0;
+
+ @include user-select(none);
+
+ cursor: default;
+ box-sizing: border-box;
+
+ &:focus {
+ outline: transparent;
+ }
+
+ &.ms-DetailsRow.is-selected {
+ background: $selectedColor;
+ }
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsRow:hover {
+ background: $unselectedHoverColor;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsRow.is-selected:hover {
+ background: $selectedHoverColor;
+}
+
+.ms-DetailsRow-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ vertical-align: top;
+ white-space: normal;
+ word-break: break-word;
+ margin-right: 16px;
+
+ &.is-clipped {
+ overflow: hidden;
+ }
+}
+
+.ms-DetailsRow-cell:last-child {
+ margin-right: 0;
+}
+
+.ms-DetailsRow-cellIcon {
+ display: inline-block;
+ margin-right: 6px;
+ position: relative;
+ bottom: -2px;
+}
+
+.ms-DetailsRow-check {
+ display: inline-block;
+ cursor: default;
+ padding: 10px;
+ margin: -10px 0;
+ box-sizing: border-box;
+ vertical-align: top;
+ background: none;
+ border: 0;
+ visibility: hidden;
+
+ &:focus {
+ outline: transparent;
+ }
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-DetailsRow.is-selected .ms-DetailsRow-check {
+ visibility: visible;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox,
+// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
+.ms-DetailsRow:focus .ms-DetailsRow-focusBox {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border: 1px solid $focusedBorderColor;
+}
+
+.ms-DetailsRow-cellMeasurer {
+ position: absolute;
+ visibility: hidden;
+ white-space: nowrap;
+ top: -1000000000;
+}
+
+//== Check
+//
+.ms-Check {
+ display: inline-block;
+ cursor: default;
+ line-height: 0;
+ vertical-align: top;
+
+ &.is-checked {
+
+ .ms-Check-circle {
+ fill: $ms-color-themePrimary;
+ stroke: $ms-color-white;
+ stroke-width: 1px;
+ }
+
+ .ms-Check-check {
+ stroke: $ms-color-white;
+ }
+ }
+}
+
+.ms-Check-circle {
+ fill: $ms-color-white;
+ stroke: $ms-color-neutralTertiaryAlt;
+}
+
+.ms-Check-check {
+ stroke: $ms-color-neutralTertiaryAlt;
+}
diff --git a/dist/components/Dialog/Dialog.hbs b/dist/components/Dialog/Dialog.hbs
new file mode 100644
index 00000000..f3c8fab8
--- /dev/null
+++ b/dist/components/Dialog/Dialog.hbs
@@ -0,0 +1,30 @@
+
+
+
+ {{#if props.closeIcon}}
+
+
+
+ {{/if}}
+
{{props.title}}
+
+ {{#if props.subText}}
+
{{props.subText}}
+ {{/if}}
+ {{#if props.components}}
+ {{#each props.components}}
+ {{renderPartial component props}}
+ {{/each}}
+ {{/if}}
+
+ {{#if props.actions}}
+
+ {{#each props.actions}}
+ {{renderPartial component props}}
+ {{/each}}
+
+ {{/if}}
+
diff --git a/dist/components/Dialog/Dialog.json b/dist/components/Dialog/Dialog.json
new file mode 100644
index 00000000..0a3aa60c
--- /dev/null
+++ b/dist/components/Dialog/Dialog.json
@@ -0,0 +1,9 @@
+{
+ "name": "Dialog",
+ "dependencies": [
+ "Button",
+ "CheckBox",
+ "Overlay",
+ "ContextualHost"
+ ]
+}
diff --git a/dist/components/Dialog/Dialog.scss b/dist/components/Dialog/Dialog.scss
new file mode 100644
index 00000000..d9d29ac4
--- /dev/null
+++ b/dist/components/Dialog/Dialog.scss
@@ -0,0 +1,121 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Dialog styles
+
+.ms-Dialog {
+ @include ms-baseFont;
+ @include drop-shadow(0, 0, 5px, 0, .4);
+ background-color: $ms-color-white;
+ display: none;
+ height: auto;
+ min-width: 220px;
+ max-width: 340px;
+ padding: 28px 24px;
+ z-index: $ms-zIndex-front;
+ position: fixed;
+ transform: translate(-50%, -50%);
+ left: 50%;
+ top: 50%;
+}
+
+.ms-Dialog.is-open {
+ display: block;
+}
+
+.ms-Dialog-title {
+ font-size: $ms-font-size-xl;
+ font-weight: $ms-font-weight-light;
+ margin-bottom: 24px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+}
+
+.ms-Dialog-subText {
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-s;
+ font-weight: $ms-font-weight-semilight;
+ line-height: 1.5;
+}
+
+.ms-Dialog-actions {
+ margin-top: 24px;
+ text-align: right;
+}
+
+//= Modifier: Multiline button dialog
+//
+.ms-Dialog--multiline {
+ .ms-Dialog-title {
+ font-size: $ms-font-size-xxl;
+ }
+}
+
+//= Modifier: Large header dialog
+//
+.ms-Dialog.ms-Dialog--lgHeader {
+ .ms-Dialog-title {
+ background-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+ font-size: $ms-font-size-xxl;
+ font-weight: $ms-font-weight-light;
+ padding: 28px 24px;
+ margin-top: -28px;
+ margin-left: -24px;
+ margin-right: -24px;
+ }
+}
+
+// Close button, hidden by default
+.ms-Dialog-buttonClose {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ margin: 0;
+ padding: 4px;
+ position: absolute;
+ right: 12px;
+ top: 12px;
+ z-index: $ms-zIndex-front;
+
+ .ms-Icon.ms-Icon--Cancel {
+ color: $ms-color-neutralSecondary;
+ font-size: 16px;
+ }
+}
+
+// Add margin bottom between compound buttons
+.ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+//= Modifier: Dialog with close button
+//
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) {
+ // Push the right side over so the icon doesn't overlap the text
+ .ms-Dialog-title {
+ margin-right: 20px;
+ }
+
+ // Show the close button
+ .ms-Dialog-button.ms-Dialog-buttonClose {
+ display: block;
+ }
+}
+
+@media (min-width: $ms-screen-md-min) {
+ // Allow wider dialog on larger screens
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
diff --git a/dist/components/DialogHost/DialogHost.hbs b/dist/components/DialogHost/DialogHost.hbs
new file mode 100644
index 00000000..5e1bb727
--- /dev/null
+++ b/dist/components/DialogHost/DialogHost.hbs
@@ -0,0 +1,10 @@
+
+
+
+ {{#if @partial-block}} {{> @partial-block }} {{/if}}
+
+
\ No newline at end of file
diff --git a/dist/components/DialogHost/DialogHost.json b/dist/components/DialogHost/DialogHost.json
new file mode 100644
index 00000000..9651c4df
--- /dev/null
+++ b/dist/components/DialogHost/DialogHost.json
@@ -0,0 +1,3 @@
+{
+ "name": "DialogHost"
+}
diff --git a/dist/components/DialogHost/DialogHost.scss b/dist/components/DialogHost/DialogHost.scss
new file mode 100644
index 00000000..fdf4b4bb
--- /dev/null
+++ b/dist/components/DialogHost/DialogHost.scss
@@ -0,0 +1,15 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+.ms-DialogHost {
+ @include ms-baseFont;
+ @include drop-shadow;
+ background-color: $ms-color-white;
+ box-sizing: border-box;
+ line-height: 1.35;
+ width: 288px;
+ position: relative;
+ text-align: left;
+ outline: 1px solid transparent;
+}
diff --git a/dist/components/Dropdown/Dropdown.hbs b/dist/components/Dropdown/Dropdown.hbs
new file mode 100644
index 00000000..3a1404f9
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.hbs
@@ -0,0 +1,16 @@
+
+
+
+
+
+ {{props.label}}
+
+
+ {{#each props.items}}
+ {{name}}
+ {{/each}}
+
+
\ No newline at end of file
diff --git a/dist/components/Dropdown/Dropdown.json b/dist/components/Dropdown/Dropdown.json
new file mode 100644
index 00000000..f10c83ad
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.json
@@ -0,0 +1,6 @@
+{
+ "name": "Dropdown",
+ "dependencies": [
+ "Label"
+ ]
+}
diff --git a/dist/components/Dropdown/Dropdown.scss b/dist/components/Dropdown/Dropdown.scss
new file mode 100644
index 00000000..6a5a82e3
--- /dev/null
+++ b/dist/components/Dropdown/Dropdown.scss
@@ -0,0 +1,254 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Dropdown styles
+
+// Mixin for high contrast mode link states
+@mixin highContrastListItemState {
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-contrastBlackSelected;
+ border-color: $ms-color-contrastBlackSelected;
+ color: $ms-color-black;
+
+ &:focus {
+ border-color: $ms-color-black;
+ }
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-contrastWhiteSelected;
+ border-color: $ms-color-contrastWhiteSelected;
+ color: $ms-color-white;
+ }
+}
+
+.ms-Dropdown {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ margin-bottom: 10px;
+ position: relative;
+ outline: 0;
+
+ &:hover,
+ &:focus,
+ &:active {
+ .ms-Dropdown-title,
+ .ms-Dropdown-caretDown {
+ color: $ms-color-black;
+ }
+ }
+
+ &:hover,
+ &:active {
+ .ms-Dropdown-title {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+ }
+
+ &:focus {
+ .ms-Dropdown-title {
+ border-color: $ms-color-themePrimary;
+ }
+ }
+
+ .ms-Label {
+ display: inline-block;
+ margin-bottom: 8px;
+ }
+}
+
+//== State: A disabled dropdown
+.ms-Dropdown.is-disabled {
+ .ms-Dropdown-title {
+ background-color: $ms-color-neutralLighter;
+ border-color: $ms-color-neutralLighter;
+ color: $ms-color-neutralTertiary;
+ cursor: default;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackDisabled;
+ color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteDisabled;
+ color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+
+ .ms-Dropdown-caretDown {
+ color: $ms-color-neutralTertiary;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+}
+
+// When the dropdown is opened
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: absolute;
+}
+
+// Adjustments for when the dropdown is open as a panel on small screens
+.ms-Panel .ms-Dropdown-items {
+ box-shadow: none;
+ overflow-y: auto;
+ padding-top: 4px;
+ max-height: 100%;
+
+ .ms-Dropdown-item {
+ padding: 7px 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &::before {
+ content: none;
+ border: 0;
+ }
+}
+
+// Hide the original dropdown
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: $ms-color-neutralDark;
+ font-size: $ms-icon-size-s;
+ position: absolute;
+ right: 13px;
+ bottom: 9px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+// Style the new, replacement component
+.ms-Dropdown-title {
+ @include ms-u-normalize;
+ background: $ms-color-white;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ padding: 5px 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+
+ &.ms-Dropdown-truncator {
+ height: auto;
+ display: block;
+ position: absolute;
+ visibility: hidden;
+ }
+}
+
+// Container for the dropdown items, displayed as a panel on small screens.
+.ms-Dropdown-items {
+ @include ms-u-normalize;
+ @include drop-shadow;
+ background-color: $ms-color-white;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ z-index: ($ms-zIndex-Dropdown + $ms-zIndex-back);
+ overflow-y: scroll;
+
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+
+ &::before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid $ms-color-neutralLight;
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ border: 1px solid $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border: 1px solid $ms-color-black;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ padding: 7px 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-black;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-white;
+ }
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ color: $ms-color-black;
+
+ @include highContrastListItemState;
+ }
+
+ &:active {
+ background-color: $ms-color-neutralLight;
+ border-color: $ms-color-themePrimary;
+ color: $ms-color-black;
+ }
+
+ &.is-disabled {
+ background: $ms-color-white;
+ color: $ms-color-neutralTertiary;
+ cursor: default;
+ }
+}
+
+//== State: A selected dropdown item
+// Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version.
+// Use .is-selected instead.
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: $ms-color-themeLight;
+ color: $ms-color-black;
+
+ &:hover {
+ background-color: $ms-color-themeLight;
+ }
+
+ @include highContrastListItemState;
+}
diff --git a/dist/components/FacePile/FacePile.hbs b/dist/components/FacePile/FacePile.hbs
new file mode 100644
index 00000000..2b7fcdf2
--- /dev/null
+++ b/dist/components/FacePile/FacePile.hbs
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+ {{#each props.members}}
+ {{> Persona props=props}}
+ {{/each}}
+
+
+ +3
+
+
\ No newline at end of file
diff --git a/dist/components/FacePile/FacePile.json b/dist/components/FacePile/FacePile.json
new file mode 100644
index 00000000..da44785d
--- /dev/null
+++ b/dist/components/FacePile/FacePile.json
@@ -0,0 +1,13 @@
+{
+ "name": "FacePile",
+ "dependencies": [
+ "Overlay",
+ "Link",
+ "Panel",
+ "PeoplePicker",
+ "Persona",
+ "PersonaCard",
+ "Spinner",
+ "ContextualHost"
+ ]
+}
diff --git a/dist/components/FacePile/FacePile.scss b/dist/components/FacePile/FacePile.scss
new file mode 100644
index 00000000..e2df3ae1
--- /dev/null
+++ b/dist/components/FacePile/FacePile.scss
@@ -0,0 +1,107 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// FacePile styles
+
+.ms-FacePile {
+ @include ms-baseFont;
+ position: relative;
+ height: 32px;
+ width: auto;
+
+ .ms-FacePile-personaCardHost {
+ display: none;
+ }
+}
+
+.ms-FacePile-addButton {
+ @include button-reset;
+ position: relative;
+ height: 32px;
+ width: 32px;
+ line-height: 32px;
+ text-align: center;
+ float: left;
+ padding: 0;
+ margin-right: 4px;
+ outline: transparent;
+ border-radius: 50%;
+ vertical-align: top;
+
+ .ms-Persona-presence,
+ .ms-Persona-details {
+ display: none;
+ }
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson {
+ background-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+ font-size: $ms-font-size-l - 1;
+
+ &:hover,
+ &:focus {
+ background-color: $ms-color-themeDark;
+ }
+
+ &:active {
+ background-color: $ms-color-themeDarker;
+ }
+
+ &:disabled {
+ background-color: $ms-color-neutralTertiaryAlt;
+ }
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow {
+ background-color: $ms-color-neutralLight;
+ color: $ms-color-neutralSecondary;
+ display: none;
+
+ &.is-active {
+ display: block;
+ }
+
+ &:hover {
+ color: $ms-color-neutralDark;
+ }
+
+ &:disabled {
+ color: $ms-color-neutralTertiaryAlt;
+ }
+}
+
+.ms-FacePile-addPersonIcon {
+ position: relative;
+ top: -1px;
+}
+
+.ms-FacePile-overflowText {
+ font-size: $ms-font-size-m;
+}
+
+//== Panels
+// Overflow panel - only show member list
+.ms-FacePile-panel.ms-FacePile-panel--overflow {
+ .ms-Panel-headerText,
+ .ms-PeoplePicker-searchBox,
+ .ms-PeoplePicker-results,
+ .ms-PeoplePicker-resultAction {
+ display: none;
+ }
+
+ .ms-PeoplePicker-selectedHeader {
+ font-weight: $ms-font-weight-light;
+ font-size: $ms-font-size-xl;
+ color: $ms-color-neutralPrimary;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+ }
+}
diff --git a/dist/components/Label/Label.hbs b/dist/components/Label/Label.hbs
new file mode 100644
index 00000000..73a870a1
--- /dev/null
+++ b/dist/components/Label/Label.hbs
@@ -0,0 +1,6 @@
+
+
+{{props.label}}
diff --git a/dist/components/Label/Label.json b/dist/components/Label/Label.json
new file mode 100644
index 00000000..46d39a60
--- /dev/null
+++ b/dist/components/Label/Label.json
@@ -0,0 +1,3 @@
+{
+ "name": "Label"
+}
diff --git a/dist/components/Label/Label.scss b/dist/components/Label/Label.scss
new file mode 100644
index 00000000..f5d94f4e
--- /dev/null
+++ b/dist/components/Label/Label.scss
@@ -0,0 +1,40 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Form field label styles
+
+@mixin ms-Label-is-disabled {
+ color: $ms-color-neutralTertiary;
+}
+
+@mixin ms-Label-is-required {
+ &::after {
+ content: ' *';
+ color: $ms-color-error;
+ }
+}
+
+.ms-Label {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-s;
+ font-weight: $ms-font-weight-regular;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+
+ &.is-required {
+ @include ms-Label-is-required;
+ }
+
+ &.is-disabled {
+ @include ms-Label-is-disabled;
+ }
+}
diff --git a/dist/components/Link/Link.hbs b/dist/components/Link/Link.hbs
new file mode 100644
index 00000000..3965e27d
--- /dev/null
+++ b/dist/components/Link/Link.hbs
@@ -0,0 +1,11 @@
+
+
+
+{{props.label}}
+
diff --git a/dist/components/Link/Link.json b/dist/components/Link/Link.json
new file mode 100644
index 00000000..13c35771
--- /dev/null
+++ b/dist/components/Link/Link.json
@@ -0,0 +1,3 @@
+{
+ "name": "Link"
+}
diff --git a/dist/components/Link/Link.scss b/dist/components/Link/Link.scss
new file mode 100644
index 00000000..cd2586bd
--- /dev/null
+++ b/dist/components/Link/Link.scss
@@ -0,0 +1,34 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Link (anchor) styles
+
+
+@mixin ms-Link {
+ @include ms-baseFont;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ color: $ms-color-themePrimary;
+ text-decoration: none;
+ cursor: pointer;
+ outline: none;
+
+ &:hover,
+ &:focus {
+ color: $ms-color-themeDarker;
+ }
+
+ &:active {
+ color: $ms-color-themePrimary;
+ }
+}
+
+.ms-Link {
+ @include ms-Link;
+}
diff --git a/dist/components/List/List.hbs b/dist/components/List/List.hbs
new file mode 100644
index 00000000..4707e355
--- /dev/null
+++ b/dist/components/List/List.hbs
@@ -0,0 +1,11 @@
+
+
+
+
+ {{#each props.listItems}}
+ {{> (lookup . 'name') props=props}}
+ {{/each}}
+
diff --git a/dist/components/List/List.json b/dist/components/List/List.json
new file mode 100644
index 00000000..b453a215
--- /dev/null
+++ b/dist/components/List/List.json
@@ -0,0 +1,6 @@
+{
+ "name": "List",
+ "dependencies": [
+ "ListItem"
+ ]
+}
diff --git a/dist/components/List/List.scss b/dist/components/List/List.scss
new file mode 100644
index 00000000..3f0663b4
--- /dev/null
+++ b/dist/components/List/List.scss
@@ -0,0 +1,19 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// List styles
+
+.ms-List {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ list-style-type: none;
+}
diff --git a/dist/components/ListItem/ListItem.hbs b/dist/components/ListItem/ListItem.hbs
new file mode 100644
index 00000000..6da26acc
--- /dev/null
+++ b/dist/components/ListItem/ListItem.hbs
@@ -0,0 +1,23 @@
+
+
+
+
+ {{#if props.image}}
{{/if}}
+ {{#if props.primaryText}}{{props.primaryText}} {{/if}}
+ {{#if props.secondaryText}}{{props.secondaryText}} {{/if}}
+ {{#if props.tertiaryText}}{{props.tertiaryText}} {{/if}}
+ {{#if props.metaText}}{{props.metaText}} {{/if}}
+ {{#if props.listIcon}}
{{/if}}
+
+
+ {{#each props.actions}}{{/each}}
+
+
+
+
+
+
+
diff --git a/dist/components/ListItem/ListItem.json b/dist/components/ListItem/ListItem.json
new file mode 100644
index 00000000..51a3ba44
--- /dev/null
+++ b/dist/components/ListItem/ListItem.json
@@ -0,0 +1,6 @@
+{
+ "name": "ListItem",
+ "dependencies": [
+ "List"
+ ]
+}
diff --git a/dist/components/ListItem/ListItem.scss b/dist/components/ListItem/ListItem.scss
new file mode 100644
index 00000000..1a8dff97
--- /dev/null
+++ b/dist/components/ListItem/ListItem.scss
@@ -0,0 +1,240 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// List item styles
+
+
+.ms-ListItem {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ @include ms-u-clearfix;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ padding: 9px 28px 3px;
+ position: relative;
+ display: block;
+}
+
+.ms-ListItem-primaryText,
+.ms-ListItem-secondaryText,
+.ms-ListItem-tertiaryText {
+ @include noWrap;
+ display: block;
+}
+
+.ms-ListItem-primaryText {
+ color: $ms-color-neutralDark;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-xl;
+ padding-right: 80px; // Prevent overlap with up to three actions.
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: $ms-color-neutralPrimary;
+ font-weight: $ms-font-weight-regular;
+ font-size: $ms-font-size-m;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: $ms-color-neutralSecondaryAlt;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-m;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: $ms-color-neutralPrimary;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-xs;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px; // Images sit closer to the edge than text.
+ margin-right: 10px;
+ width: 70px;
+ background-color: $ms-color-neutralPrimary;
+}
+
+.ms-ListItem-selectionTarget {
+ display: none;
+}
+
+.ms-ListItem-actions {
+ max-width: 80px; // Up to three actions.
+ position: absolute;
+ right: 30px;
+ text-align: right;
+ top: 10px;
+}
+
+.ms-ListItem-action {
+ color: $ms-color-neutralTertiary;
+ display: inline-block;
+ font-size: 15px;
+ position: relative;
+ text-align: center;
+ top: 3px;
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+
+ .ms-Icon {
+ vertical-align: top;
+ }
+
+ &:hover {
+ color: $ms-color-neutralSecondary;
+ outline: 1px solid transparent;
+ }
+}
+
+
+//== State: Unread list item
+//
+.ms-ListItem.is-unread {
+ border-left: 3px solid $ms-color-themePrimary;
+ padding-left: 27px; // Reduce padding to allow room for border.
+
+ .ms-ListItem-secondaryText,
+ .ms-ListItem-metaText {
+ color: $ms-color-themePrimary;
+ font-weight: $ms-font-weight-semibold;
+ }
+}
+
+
+//== State: Unseen list item
+//
+.ms-ListItem.is-unseen {
+ &::after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid $ms-color-themePrimary;
+ left: 0;
+ position: absolute;
+ top: 0;
+ }
+}
+
+
+//== State: Selectable list item
+//
+.ms-ListItem.is-selectable {
+ .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+ }
+
+ .ms-ListItem-image {
+ margin-left: 0;
+ }
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ cursor: pointer;
+ outline: 1px solid transparent;
+
+ // Insert the empty box.
+ &::before {
+ @include ms-Icon;
+ position: absolute;
+ top: 14px;
+ left: 7px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid $ms-color-neutralSecondaryAlt;
+ }
+ }
+}
+
+
+//== State: Selected list item
+//
+.ms-ListItem.is-selected {
+ // Insert the checkmark.
+ &::before {
+ border: 1px solid transparent;
+ }
+
+ &::before,
+ &:hover::before {
+ @include ms-Icon;
+ content: '\e73A';
+ font-size: $ms-font-size-l;
+ color: $ms-color-neutralSecondaryAlt;
+ position: absolute;
+ top: 23px;
+ left: 7px;
+ border: 0;
+ }
+
+ &:hover {
+ background-color: $ms-color-themeLight;
+ outline: 1px solid transparent;
+ }
+}
+
+
+//== Modifier: Document list item
+//
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+
+ // The icon for a file or folder in the items list. This may
+ // be an .ms-Icon or a specific modifier that loads an image.
+ .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+ }
+
+ // If the item icon is an .ms-Icon, position and color it appropriately.
+ .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: $ms-color-neutralSecondary;
+ }
+
+ // Primary text, typically the name.
+ .ms-ListItem-primaryText {
+ @include noWrap;
+ font-size: $ms-font-size-m;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+ }
+
+ // Secondary text, typically the modified date or some other metadata.
+ .ms-ListItem-secondaryText {
+ @include noWrap;
+ color: $ms-color-neutralSecondary;
+ font-weight: $ms-font-weight-regular;
+ font-size: $ms-font-size-xs;
+ padding-top: 6px;
+ }
+}
diff --git a/dist/components/MessageBanner/MessageBanner.hbs b/dist/components/MessageBanner/MessageBanner.hbs
new file mode 100644
index 00000000..074573c7
--- /dev/null
+++ b/dist/components/MessageBanner/MessageBanner.hbs
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+ {{props.message}}
+
+
+
+
+
+
+ {{renderPartial props.button.name props.button.props}}
+
+
+
+
+
+
diff --git a/dist/components/MessageBanner/MessageBanner.json b/dist/components/MessageBanner/MessageBanner.json
new file mode 100644
index 00000000..87c9aad0
--- /dev/null
+++ b/dist/components/MessageBanner/MessageBanner.json
@@ -0,0 +1,17 @@
+{
+ "name": "MessageBanner",
+ "dependencies": [
+ "Button"
+ ],
+ "props": {
+ "message": "You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.",
+ "button": {
+ "name": "Button",
+ "props": {
+ "label": "Get More Storage",
+ "modifier": "primary",
+ "tag": "button"
+ }
+ }
+ }
+}
diff --git a/dist/components/MessageBanner/MessageBanner.scss b/dist/components/MessageBanner/MessageBanner.scss
new file mode 100644
index 00000000..975160d9
--- /dev/null
+++ b/dist/components/MessageBanner/MessageBanner.scss
@@ -0,0 +1,131 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// MessageBanner Styles
+
+$MessageBanner-height: 52px;
+$MessageBanner-iconSize: 40px;
+
+.ms-MessageBanner {
+ @include ms-baseFont;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-s;
+ font-weight: $ms-font-weight-regular;
+ position: relative;
+ border-bottom: 1px solid $ms-color-neutralSecondaryAlt;
+ background-color: $ms-color-themeLighterAlt;
+ min-width: 320px;
+ width: 100%;
+ height: $MessageBanner-height;
+ text-align: center;
+ overflow: hidden;
+ @include ms-u-slideDownIn20;
+
+ .ms-Icon {
+ font-size: 16px;
+ }
+
+ &.hide {
+ @include ms-u-slideUpOut20;
+ }
+
+ &.is-hidden {
+ display: none;
+ }
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: $MessageBanner-height;
+ width: $MessageBanner-iconSize;
+ cursor: pointer;
+ border: 0;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-close {
+ position: absolute;
+ right: 0;
+ top: 0;
+ line-height: $MessageBanner-height;
+ color: $ms-color-neutralSecondary;
+}
+
+.ms-MessageBanner-text {
+ display: inline-block;
+ padding: 18px 0;
+ margin-left: 0;
+ max-width: 770px;
+ overflow: hidden;
+ text-align: left;
+}
+
+.ms-MessageBanner-expand {
+ display: none;
+ vertical-align: top;
+
+ &.is-visible {
+ display: inline-block;
+ }
+}
+
+.ms-MessageBanner-action {
+ display: inline-block;
+ vertical-align: top;
+ margin-top: 10px;
+ margin-left: 10px;
+ padding-right: 36px;
+
+ .ms-Button {
+ color: $ms-color-white;
+ }
+}
+
+.ms-MessageBanner-clipper {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-MessageBanner.is-expanded {
+ height: auto;
+
+ .ms-MessageBanner-clipper {
+ white-space: normal;
+ }
+}
+
+
+@media screen and (max-width: 479px) {
+ .ms-MessageBanner-action {
+ margin: 0;
+ display: block;
+ text-align: right;
+ padding: 0 10px 10px 0;
+ }
+
+ .ms-MessageBanner-text {
+ margin-left: -25px;
+ padding: 18px 0 10px;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ display: inline-block;
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+
+ .ms-Icon {
+ color: $ms-color-themePrimary;
+ }
+ }
+}
diff --git a/dist/components/MessageBar/MessageBar.hbs b/dist/components/MessageBar/MessageBar.hbs
new file mode 100644
index 00000000..41507610
--- /dev/null
+++ b/dist/components/MessageBar/MessageBar.hbs
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+
Hyperlink string
+
+
+
diff --git a/dist/components/MessageBar/MessageBar.json b/dist/components/MessageBar/MessageBar.json
new file mode 100644
index 00000000..0a8cba9c
--- /dev/null
+++ b/dist/components/MessageBar/MessageBar.json
@@ -0,0 +1,6 @@
+{
+ "name": "MessageBar",
+ "dependencies": [
+ "Link"
+ ]
+}
diff --git a/dist/components/MessageBar/MessageBar.scss b/dist/components/MessageBar/MessageBar.scss
new file mode 100644
index 00000000..2ae7247b
--- /dev/null
+++ b/dist/components/MessageBar/MessageBar.scss
@@ -0,0 +1,90 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// MessageBar Styles
+
+$MessageBar-padding: 8px;
+
+.ms-MessageBar {
+ @include ms-baseFont;
+ padding: $MessageBar-padding;
+ display: table;
+ @include ms-bgColor-info;
+
+ .ms-Link {
+ font-size: $ms-font-size-s;
+ }
+}
+
+.ms-MessageBar-icon,
+.ms-MessageBar-text {
+ display: table-cell;
+ vertical-align: top;
+}
+
+.ms-MessageBar-icon {
+ padding-right: $MessageBar-padding;
+ font-size: $ms-icon-size-m;
+ @include ms-fontColor-neutralSecondaryAlt;
+}
+
+.ms-MessageBar-text {
+ @include ms-font-s;
+}
+
+
+//== Modifier: Warning message
+//
+.ms-MessageBar.ms-MessageBar--warning {
+ @include ms-bgColor-warning;
+}
+
+
+//== Modifier: Severe Warning message
+//
+.ms-MessageBar.ms-MessageBar--severeWarning {
+ @include ms-bgColor-severeWarning;
+
+ .ms-MessageBar-icon {
+ @include ms-fontColor-severeWarning;
+ }
+}
+
+
+//== Modifier: Error message
+//
+.ms-MessageBar.ms-MessageBar--error {
+ @include ms-bgColor-error;
+
+ .ms-MessageBar-icon {
+ @include ms-fontColor-error;
+ }
+}
+
+
+//== Modifier: Blocked message
+//
+.ms-MessageBar.ms-MessageBar--blocked {
+ @include ms-bgColor-error;
+
+ .ms-MessageBar-icon {
+ @include ms-fontColor-error;
+ }
+}
+
+
+//== Modifier: Success message
+//
+.ms-MessageBar.ms-MessageBar--success {
+ @include ms-bgColor-success;
+
+ .ms-MessageBar-icon {
+ @include ms-fontColor-green;
+ }
+}
diff --git a/dist/components/OrgChart/OrgChart.hbs b/dist/components/OrgChart/OrgChart.hbs
new file mode 100644
index 00000000..91a3ee3c
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.hbs
@@ -0,0 +1,22 @@
+
+
+
+
+ {{#each props.groups}}
+
+ {{#if title}}
{{title}}
{{/if}}
+
+ {{#each personas}}
+
+
+ {{renderPartial component props}}
+
+
+ {{/each}}
+
+
+ {{/each}}
+
\ No newline at end of file
diff --git a/dist/components/OrgChart/OrgChart.json b/dist/components/OrgChart/OrgChart.json
new file mode 100644
index 00000000..c8fb308e
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.json
@@ -0,0 +1,6 @@
+{
+ "name": "OrgChart",
+ "dependencies": [
+ "Persona"
+ ]
+}
diff --git a/dist/components/OrgChart/OrgChart.scss b/dist/components/OrgChart/OrgChart.scss
new file mode 100644
index 00000000..3338f2ee
--- /dev/null
+++ b/dist/components/OrgChart/OrgChart.scss
@@ -0,0 +1,49 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Org chart styles
+
+
+.ms-OrgChart {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+}
+
+.ms-OrgChart-groupTitle {
+ color: $ms-color-neutralSecondary;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px;
+}
+
+.ms-OrgChart-listItem {
+ height: 50px;
+ width: 100%;
+ position: relative;
+ list-style: none;
+ margin-bottom: 8px;
+}
+
+.ms-OrgChart-listItemBtn {
+ @include button-reset;
+ position: relative;
+ height: 50px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0;
+ padding: 0;
+}
diff --git a/dist/components/Overlay/Overlay.hbs b/dist/components/Overlay/Overlay.hbs
new file mode 100644
index 00000000..8195ea83
--- /dev/null
+++ b/dist/components/Overlay/Overlay.hbs
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/dist/components/Overlay/Overlay.json b/dist/components/Overlay/Overlay.json
new file mode 100644
index 00000000..74e58eb2
--- /dev/null
+++ b/dist/components/Overlay/Overlay.json
@@ -0,0 +1,3 @@
+{
+ "name": "Overlay"
+}
diff --git a/dist/components/Overlay/Overlay.scss b/dist/components/Overlay/Overlay.scss
new file mode 100644
index 00000000..72e32502
--- /dev/null
+++ b/dist/components/Overlay/Overlay.scss
@@ -0,0 +1,37 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Modal overlay styles
+
+
+.ms-Overlay {
+ @include ms-baseFont;
+ background-color: $ms-color-whiteTranslucent40;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: $ms-zIndex-back;
+ display: none;
+}
+
+.ms-Overlay.is-visible {
+ display: block;
+}
+
+//== Modifier: Dark overlay
+//
+.ms-Overlay--dark {
+ background-color: $ms-color-blackTranslucent40;
+}
+
+.ms-u-overflowHidden {
+ overflow: hidden;
+}
diff --git a/dist/components/Panel/Panel.hbs b/dist/components/Panel/Panel.hbs
new file mode 100644
index 00000000..f02db754
--- /dev/null
+++ b/dist/components/Panel/Panel.hbs
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+ {{props.content}}
+
+
+
\ No newline at end of file
diff --git a/dist/components/Panel/Panel.json b/dist/components/Panel/Panel.json
new file mode 100644
index 00000000..1306aa8c
--- /dev/null
+++ b/dist/components/Panel/Panel.json
@@ -0,0 +1,3 @@
+{
+ "name": "Panel"
+}
diff --git a/dist/components/Panel/Panel.scss b/dist/components/Panel/Panel.scss
new file mode 100644
index 00000000..f4d65bbe
--- /dev/null
+++ b/dist/components/Panel/Panel.scss
@@ -0,0 +1,158 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Panel styles
+
+$ms-panel-width-sm: 272px;
+$ms-panel-width-md: 340px;
+$ms-panel-width-lg: 644px;
+$ms-panel-width-xl: 940px;
+$ms-panel-width-xxl: 1192px;
+
+$ms-panel-margin-md: 48px;
+$ms-panel-margin-lg: 428px;
+$ms-panel-margin-xl: 176px;
+
+$ms-panel-close-button-height: 40px;
+
+// The panel itself, where the content goes.
+.ms-Panel {
+ @include ms-baseFont;
+ background-color: $ms-color-white;
+ width: 100%;
+ max-width: $ms-panel-width-md;
+ @include drop-shadow(-30px, 0, 30px, -30px, .2);
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: $ms-zIndex-front;
+ display: none;
+ height: 100%;
+
+ // Animations -- Default (anchored right)
+ &.animate-in {
+ @include ms-u-slideLeftIn40;
+ }
+
+ &.animate-out {
+ @include ms-u-slideRightOut40;
+ }
+
+ &.is-open {
+ display: block;
+ }
+
+ .ms-CommandBar {
+ padding-right: 0;
+ padding-left: 8px;
+ }
+}
+
+//== Modifier: Medium panel (anchored right, fixed width)
+//
+.ms-Panel.ms-Panel--md {
+ max-width: $ms-panel-width-md;
+}
+
+//== Modifier: Large panel (anchored right, fluid width)
+//
+.ms-Panel.ms-Panel--lg {
+ max-width: $ms-panel-width-lg;
+}
+
+//== Modifier: XLarge panel (anchored right, fluid width)
+//
+.ms-Panel.ms-Panel--xl {
+ max-width: $ms-panel-width-xl;
+}
+
+//== Modifier: XLarge panel (anchored right, fluid width)
+//
+.ms-Panel.ms-Panel--xxl {
+ max-width: $ms-panel-width-xxl;
+}
+
+//== Modifier: Left anchored panel (anchored left, fixed width)
+// Note: This panel variant should only be used for left nav.
+.ms-Panel--left {
+ @include drop-shadow(-30px, 0, 30px, 30px, .2);
+ left: 0;
+ right: auto;
+
+ &.animate-in {
+ @include ms-u-slideRightIn40;
+ }
+
+ &.animate-out {
+ @include ms-u-slideLeftOut40;
+ }
+}
+
+// The close button in the top right (x)
+.ms-Panel-closeButton {
+ @include button-reset;
+ position: absolute;
+ right: 6px;
+ top: 0;
+ height: $ms-panel-close-button-height;
+ width: $ms-panel-close-button-height;
+ line-height: $ms-panel-close-button-height;
+ outline: 0;
+ padding: 0;
+ color: $ms-color-neutralSecondary;
+ font-size: $ms-icon-size-m;
+
+ &:hover {
+ color: $ms-color-neutralPrimary;
+ }
+
+ .ms-Icon--Cancel {
+ margin-top: 2px;
+ }
+
+ @media (max-width: $ms-screen-md-max) {
+ font-size: $ms-icon-size-l;
+ line-height: $ms-icon-size-l;
+ height: 44px;
+ right: 4px;
+ }
+}
+
+// Scrollable content area
+.ms-Panel-contentInner {
+ margin-top: $ms-panel-close-button-height;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+ height: 100%;
+
+ @media (min-width: $ms-screen-lg-min) {
+ padding: 0 32px 20px;
+ }
+
+ @media (min-width: $ms-screen-xxl-min) {
+ padding: 0 40px 20px;
+ }
+}
+
+// Header text at the top of the panel.
+.ms-Panel-headerText {
+ font-weight: $ms-font-weight-light;
+ font-size: $ms-font-size-xl;
+ color: $ms-color-neutralPrimary;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ @media (min-width: $ms-screen-xl-min) {
+ margin-top: 30px;
+ }
+}
diff --git a/dist/components/PanelHost/PanelHost.hbs b/dist/components/PanelHost/PanelHost.hbs
new file mode 100644
index 00000000..d61b033f
--- /dev/null
+++ b/dist/components/PanelHost/PanelHost.hbs
@@ -0,0 +1,7 @@
+
+
+ {{> Overlay }}
+
\ No newline at end of file
diff --git a/dist/components/PanelHost/PanelHost.json b/dist/components/PanelHost/PanelHost.json
new file mode 100644
index 00000000..3e44136f
--- /dev/null
+++ b/dist/components/PanelHost/PanelHost.json
@@ -0,0 +1,6 @@
+{
+ "name": "PanelHost",
+ "dependencies": [
+ "Overlay"
+ ]
+}
diff --git a/dist/components/PanelHost/PanelHost.scss b/dist/components/PanelHost/PanelHost.scss
new file mode 100644
index 00000000..97b4049b
--- /dev/null
+++ b/dist/components/PanelHost/PanelHost.scss
@@ -0,0 +1,18 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// The panel covers the entire screen.
+.ms-PanelHost {
+ @include ms-baseFont;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: $ms-zIndex-front;
+}
+
+.ms-PanelHost .ms-Overlay {
+ cursor: pointer;
+}
diff --git a/dist/components/PeoplePicker/PeoplePicker.hbs b/dist/components/PeoplePicker/PeoplePicker.hbs
new file mode 100644
index 00000000..f4ab9712
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.hbs
@@ -0,0 +1,62 @@
+
+
+
+
+
+ {{> TextField props=props.textFieldProps}}
+
+
+ {{#each props.groups}}
+
+
+ {{title}}
+
+ {{#each personas}}
+
+ {{> Persona props=props}}
+
+
+ {{/each}}
+
+ {{/each}}
+ {{#if props.searchMoreText}}
+
+
+
+
+
+ {{props.searchMoreText}}
+
+
+ {{/if}}
+
+ {{#each props.members}}
+
+
+
+ {{#each personas}}
+
+ {{> Persona props=props}}
+
+
+ {{/each}}
+
+
+ {{/each}}
+
\ No newline at end of file
diff --git a/dist/components/PeoplePicker/PeoplePicker.json b/dist/components/PeoplePicker/PeoplePicker.json
new file mode 100644
index 00000000..2900b7ae
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.json
@@ -0,0 +1,12 @@
+{
+ "name": "PeoplePicker",
+ "dependencies": [
+ "Label",
+ "Persona",
+ "PersonaCard",
+ "Spinner",
+ "TextField",
+ "ContextualHost",
+ "OrgChart"
+ ]
+}
diff --git a/dist/components/PeoplePicker/PeoplePicker.scss b/dist/components/PeoplePicker/PeoplePicker.scss
new file mode 100644
index 00000000..946a8070
--- /dev/null
+++ b/dist/components/PeoplePicker/PeoplePicker.scss
@@ -0,0 +1,452 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// People Picker styles
+
+$personaItemHeight: 40px;
+$ms-Persona-leftPadding: 16px;
+
+.ms-PeoplePicker {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ background-color: $ms-color-white;
+ margin-bottom: 10px;
+}
+
+// Box that contains the search field and selected people.
+.ms-PeoplePicker-searchBox {
+ border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
+ cursor: text;
+ flex-flow: row wrap;
+ display: flex;
+ align-items: stretch;
+
+ &:hover {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+
+ &.is-active,
+ &:focus {
+ border-color: $ms-color-themePrimary;
+ }
+
+ &:hover,
+ &:focus {
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ @include input-placeholder {
+ color: $ms-color-neutralSecondary;
+ }
+
+ .ms-TextField.ms-TextField--textFieldUnderlined {
+ border: 0;
+ margin-bottom: 0;
+ display: inline-block;
+ width: 100%;
+ flex: 1;
+
+ .ms-TextField-field {
+ min-height: 40px;
+ border: 0;
+ }
+ }
+}
+
+// Highlight the search box when the people picker is active
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ .ms-TextField-field {
+ border-color: $ms-color-themePrimary;
+ }
+}
+
+.ms-PeoplePicker-persona {
+ cursor: pointer;
+}
+
+// The selected persona may be in an error state.
+.ms-PeoplePicker-persona.has-error {
+ .ms-Persona-primaryText {
+ color: $ms-color-error;
+ }
+}
+
+// Button to remove a selected person.
+.ms-PeoplePicker-personaRemove {
+ @include button-reset;
+ background-color: $ms-color-neutralLighter;
+ color: $ms-color-neutralSecondary;
+ display: inline-block;
+ text-align: center;
+ height: 32px;
+ width: 32px;
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ color: $ms-color-neutralPrimary;
+ cursor: pointer;
+ }
+
+ &:focus {
+ background-color: $ms-color-neutralLight;
+ color: $ms-color-neutralPrimary;
+ border: 1px solid $ms-color-themePrimary;
+ outline: none;
+ }
+}
+
+// Results area, hidden by default
+.ms-PeoplePicker-results {
+ background-color: $ms-color-white;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ margin-bottom: -1px;
+ padding-top: 9px;
+ width: 100%;
+ padding-left: 0;
+ box-sizing: border-box;
+}
+
+// Show the results area when the people picker is active
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+
+// A group of results
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid $ms-color-neutralLight;
+
+ // The first result group needs to be bumped up 1px to account for border on ms-PeoplePicker-results
+ &:first-child {
+ border-top: 0;
+ }
+}
+
+// Title for a group of results (optional)
+.ms-PeoplePicker-resultGroupTitle {
+ color: $ms-color-themePrimary;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-s;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ text-transform: uppercase;
+ padding-left: $ms-Persona-leftPadding;
+}
+
+// List of results
+.ms-PeoplePicker-resultList {
+ @include ms-u-normalize;
+ margin-bottom: -1px;
+ list-style-type: none; // Browser default override.
+}
+
+// A single result in the result list
+.ms-PeoplePicker-result {
+ position: relative;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ padding-left: $ms-Persona-leftPadding;
+ cursor: pointer;
+ outline: 0;
+
+ &:hover,
+ &:focus {
+ background-color: $ms-color-neutralLight;
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 1px $ms-color-themePrimary inset;
+ }
+
+ &.is-selected {
+ background-color: $ms-color-themeLight;
+
+ .ms-PeoplePicker-resultAction {
+ &:hover {
+ background-color: $ms-color-themeTertiary;
+ }
+
+ &:active {
+ background-color: $ms-color-themeTertiary;
+ }
+ }
+ }
+}
+
+// Result buttons
+.ms-PeoplePicker-resultBtn,
+.ms-PeoplePicker-peopleListBtn {
+ @include button-reset;
+ position: relative;
+ box-sizing: border-box;
+ height: 34px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0 0 10px;
+ padding: 0 0 0 9px;
+
+ @media (min-width: $ms-screen-md-min) {
+ height: 48px;
+ }
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ outline: 1px solid transparent;
+ }
+
+ &:focus {
+ outline: 1;
+ }
+
+ &.ms-PeoplePicker-resultBtn--compact {
+ height: 32px;
+ }
+}
+
+.ms-PeoplePicker-peopleListBtn {
+ margin-bottom: 0;
+ padding: 0;
+
+ &:hover {
+ background-color: transparent;
+ }
+}
+
+// Actionable icon on a result
+.ms-PeoplePicker-resultAction {
+ @include button-reset;
+ display: block;
+ height: 100%;
+ transition: background-color .367s $ms-ease1;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 40px;
+ text-align: center;
+
+ .ms-Icon {
+ color: $ms-color-neutralSecondary;
+ font-size: $ms-font-size-m-plus;
+ }
+
+ &:hover {
+ background-color: $ms-color-neutralTertiaryAlt;
+ outline: 1px solid transparent;
+ }
+
+ &:active {
+ background-color: $ms-color-neutralTertiary;
+ }
+}
+
+// A result can contain additional content (usually a ms-PeoplePicker-resultList of Persona components) that is hidden initially
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+// Use the .is-expanded state to reveal the additional content
+.ms-PeoplePicker-result.is-expanded {
+ background-color: $ms-color-neutralLighter;
+ margin-bottom: 11px;
+
+ // Switch the toggle icon
+ .ms-PeoplePicker-resultAction .ms-Icon {
+ transform: rotate(180deg);
+ }
+
+ // Show the content
+ .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+ }
+}
+
+// After the result groups we have a button to trigger additional searches
+.ms-PeoplePicker-searchMore {
+ @include button-reset;
+ height: 40px;
+ position: relative;
+ width: 100%;
+
+ &:hover {
+ background-color: $ms-color-neutralLighter;
+ }
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ font-size: $ms-font-size-xl;
+ height: 40px;
+ left: 16px;
+ line-height: 40px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ width: 40px;
+}
+
+.ms-PeoplePicker-searchMoreText {
+ @include ms-baseFont;
+ font-size: $ms-font-size-m;
+ height: 40px;
+ left: 64px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+}
+
+//== Modifier: People Picker Compact
+//
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact {
+ .ms-PeoplePicker-resultAction {
+ height: 32px;
+ width: 32px;
+ }
+
+ .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+ }
+}
+
+
+//== Modifier: facePile
+//
+.ms-PeoplePicker.ms-PeoplePicker--facePile {
+ //= State: Searching in peoplepicker search field
+ &.is-searching {
+ .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+ }
+
+ .ms-PeoplePicker-peopleListHeader {
+ display: none;
+ }
+ }
+
+ .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+
+ &.is-active {
+ display: block;
+ }
+ }
+
+ .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+ }
+}
+
+// PeoplePicker results - facePile
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ border-bottom: 1px solid $ms-color-neutralLight;
+}
+
+// Personas are size xs on mobile, sm on md screens and above
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile,
+.ms-PeoplePicker-selectedPeople {
+ @media (max-width: $ms-screen-sm-max) {
+ .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-s;
+ line-height: 32px;
+ }
+
+ .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-m;
+ padding-top: 3px;
+ }
+
+ .ms-Persona-secondaryText {
+ display: none;
+ }
+ }
+
+ @media (min-width: $ms-screen-md-min) {
+ .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+ }
+
+ .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-peopleListBtn {
+ @media (min-width: $ms-screen-md-min) {
+ height: $personaItemHeight;
+ }
+ }
+
+ .ms-PeoplePicker-resultAction {
+ @media (min-width: $ms-screen-md-min) {
+ height: $personaItemHeight;
+ }
+ }
+
+ .ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+
+ &.is-active {
+ display: block;
+ }
+ }
+}
+
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: $ms-color-themePrimary;
+ font-size: $ms-font-size-s;
+ font-weight: $ms-font-weight-regular;
+ height: 50px;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker-selectedPeople,
+.ms-PeoplePicker-peopleList {
+ @include ms-u-normalize;
+ list-style: none;
+}
+
+.ms-PeoplePicker-selectedPerson {
+ margin-bottom: 8px;
+ position: relative;
+}
+
+.ms-PeoplePicker-peopleListItem {
+ margin-bottom: 6px;
+ position: relative;
+}
diff --git a/dist/components/Persona/Persona.hbs b/dist/components/Persona/Persona.hbs
new file mode 100644
index 00000000..12dd1f38
--- /dev/null
+++ b/dist/components/Persona/Persona.hbs
@@ -0,0 +1,48 @@
+
+
+
+
+
+ {{#if props.initials}}
+
{{props.initials}}
+ {{/if}}
+ {{#if props.image}}
+
+ {{/if}}
+
+
+ {{#if props.icon}}
+
+ {{/if}}
+
+
+ {{#if props.primaryText}}
+
{{props.primaryText}}
+ {{/if}}
+ {{#if props.secondaryText}}
+
{{props.secondaryText}}
+ {{/if}}
+ {{#if props.tertiaryText}}
+
{{props.tertiaryText}}
+ {{/if}}
+ {{#if props.optionalText}}
+
{{props.optionalText}}
+ {{/if}}
+
+ {{#if props.actionIcon}}
+
+
+
+ {{/if}}
+ {{#if props.personaCardProps}}
+ {{> PersonaCard props=props.personaCardProps}}
+ {{/if}}
+
diff --git a/dist/components/Persona/Persona.json b/dist/components/Persona/Persona.json
new file mode 100644
index 00000000..c9387dc7
--- /dev/null
+++ b/dist/components/Persona/Persona.json
@@ -0,0 +1,7 @@
+{
+ "name": "Persona",
+ "dependencies": [
+ "PersonaCard",
+ "ContextualHost"
+ ]
+}
diff --git a/dist/components/Persona/Persona.scss b/dist/components/Persona/Persona.scss
new file mode 100644
index 00000000..63c694e3
--- /dev/null
+++ b/dist/components/Persona/Persona.scss
@@ -0,0 +1,734 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Persona styles
+
+
+// Skype presence colors
+$ms-color-presence-available: #7FBA00;
+$ms-color-presence-away: #FCD116;
+$ms-color-presence-busy: #E81123;
+$ms-color-presence-dnd-background: #E81123;
+$ms-color-presence-dnd-line: #FFFFFF;
+$ms-color-presence-offline: #93ABBD;
+$ms-color-presence-out-of-office: $ms-color-magenta;
+
+// Other presence colors
+$ms-color-presence-blocked-background: #DEDEDE;
+$ms-color-presence-blocked-line: #C72D25;
+$ms-color-presence-busy-stripe-light: #E57A79;
+$ms-color-presence-busy-stripe-dark: #D00E0D;
+$ms-color-presence-busy-average: #D93B3B;
+
+// Persona Sizes
+$ms-Persona-sizeTiny: 30px;
+$ms-Persona-sizeXs: 32px;
+$ms-Persona-sizeSm: 40px;
+$ms-Persona-sizeMd: 48px;
+$ms-Persona-sizeLg: 72px;
+$ms-Persona-sizeXl: 100px;
+
+// Details Spacing
+$ms-Persona-imageDetailsSmSpace: 8px;
+$ms-Persona-imageDetailsLgSpace: 12px;
+$ms-Persona-imageDetailsXlSpace: 20px;
+
+// Presence Sizes
+$ms-Persona-presenceSizeMd: 12px;
+$ms-Persona-presenceSizeLg: 20px;
+$ms-Persona-presenceSizeXl: 28px;
+
+
+.ms-Persona {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ line-height: 1;
+ position: relative;
+ width: 100%;
+ height: $ms-Persona-sizeMd;
+ display: table;
+ table-layout: fixed;
+ border-collapse: separate;
+
+ .ms-ContextualHost {
+ display: none;
+ }
+}
+
+.ms-Persona-imageArea {
+ position: absolute;
+ overflow: hidden;
+ text-align: center;
+ max-width: $ms-Persona-sizeMd;
+ height: $ms-Persona-sizeMd;
+ border-radius: 50%;
+ z-index: $ms-zIndex-back;
+ width: 100%;
+ top: 0;
+ left: 0;
+
+ @media screen and (-ms-high-contrast: active) {
+ border: 1px solid $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border: 1px solid $ms-color-black;
+ }
+}
+
+//= Note: The doughboy placeholder is being deprecated.
+// The initials color block (.ms-Persona-initials) will be used going forward
+// as a fallback when the persona does not have an image.
+.ms-Persona-placeholder {
+ color: $ms-color-white;
+ position: absolute;
+ right: 0;
+ left: 0;
+ font-size: 47px;
+ top: 9px;
+ z-index: $ms-zIndex-middle;
+}
+
+.ms-Persona-initials {
+ color: $ms-color-white;
+ font-size: $ms-font-size-l;
+ font-weight: $ms-font-weight-light;
+ line-height: $ms-Persona-sizeMd;
+
+ &.ms-Persona-initials--blueLight {
+ background-color: $ms-color-blueLight;
+ }
+
+ &.ms-Persona-initials--blue {
+ background-color: $ms-color-blue;
+ }
+
+ &.ms-Persona-initials--blueDark {
+ background-color: $ms-color-blueDark;
+ }
+
+ &.ms-Persona-initials--teal {
+ background-color: $ms-color-teal;
+ }
+
+ &.ms-Persona-initials--greenLight {
+ background-color: $ms-color-greenLight;
+ }
+
+ &.ms-Persona-initials--green {
+ background-color: $ms-color-green;
+ }
+
+ &.ms-Persona-initials--greenDark {
+ background-color: $ms-color-greenDark;
+ }
+
+ &.ms-Persona-initials--magentaLight {
+ background-color: $ms-color-magentaLight;
+ }
+
+ &.ms-Persona-initials--magenta {
+ background-color: $ms-color-magenta;
+ }
+
+ &.ms-Persona-initials--purpleLight {
+ background-color: $ms-color-purpleLight;
+ }
+
+ &.ms-Persona-initials--purple {
+ background-color: $ms-color-purple;
+ }
+
+ &.ms-Persona-initials--black {
+ background-color: $ms-color-black;
+ }
+
+ &.ms-Persona-initials--orange {
+ background-color: $ms-color-orange;
+ }
+
+ &.ms-Persona-initials--red {
+ background-color: $ms-color-red;
+ }
+
+ &.ms-Persona-initials--redDark {
+ background-color: $ms-color-redDark;
+ }
+}
+
+.ms-Persona-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: $ms-Persona-sizeMd;
+ z-index: $ms-zIndex-front;
+ width: 100%;
+
+ &[src=''] {
+ display: none;
+ }
+}
+
+.ms-Persona-presence {
+ background-color: $ms-color-presence-available;
+ position: absolute;
+ height: $ms-Persona-presenceSizeMd;
+ width: $ms-Persona-presenceSizeMd;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid $ms-color-white;
+ text-align: center;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-black;
+ box-shadow: 0 0 0 1px $ms-color-contrastBlackSelected inset;
+ color: $ms-color-black;
+ background-color: $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-white;
+ box-shadow: 0 0 0 1px $ms-color-contrastWhiteSelected inset;
+ color: $ms-color-white;
+ background-color: $ms-color-black;
+ }
+}
+
+.ms-Persona-presenceIcon {
+ color: $ms-color-white;
+ font-size: 8px;
+ line-height: $ms-Persona-presenceSizeMd;
+ vertical-align: top;
+}
+
+.ms-Persona-details {
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+ text-align: left;
+ padding-left: $ms-Persona-sizeMd + $ms-Persona-imageDetailsLgSpace;
+ display: table-cell;
+ width: 100%;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ @include noWrap;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: $ms-color-neutralPrimary;
+ font-weight: $ms-font-weight-regular;
+ font-size: $ms-font-size-l;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: $ms-color-neutralSecondary;
+ font-weight: $ms-font-weight-regular;
+ font-size: $ms-font-size-s;
+ white-space: nowrap;
+ line-height: 1.3;
+}
+
+.ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ padding-top: 5px;
+ display: none; // Hidden on default persona
+}
+
+
+//== Modifier: Tiny Persona
+//
+.ms-Persona.ms-Persona--tiny {
+ height: $ms-Persona-sizeTiny;
+ display: inline-block;
+
+ .ms-Persona-imageArea {
+ overflow: visible;
+ display: none;
+ }
+
+ .ms-Persona-presence {
+ right: auto;
+ top: 10px;
+ left: 0;
+ border: 0;
+
+ @media screen and (-ms-high-contrast: active) {
+ top: 9px;
+ border: 1px solid $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border: 1px solid $ms-color-black;
+ }
+ }
+
+ .ms-Persona-details {
+ padding-left: 20px;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-m;
+ padding-top: 9px;
+ }
+
+ .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+
+//== Modifier: Tiny Persona with read only state
+//
+// This variant includes a semicolon, and is
+// most often presented within a People Picker.
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
+ padding: 0;
+ background-color: transparent;
+
+ .ms-Persona-primaryText {
+ &::after {
+ content: ';';
+ }
+ }
+}
+
+
+//== Modifier: Extra Small Persona, FacePile and Token modifiers
+//
+.ms-Persona.ms-Persona--xs,
+.ms-Persona.ms-Persona--facePile,
+.ms-Persona.ms-Persona--token {
+ height: $ms-Persona-sizeXs;
+
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ max-width: $ms-Persona-sizeXs;
+ height: $ms-Persona-sizeXs;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-s;
+ line-height: $ms-Persona-sizeXs;
+ }
+
+ .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-Persona-details {
+ padding-left: $ms-Persona-sizeXs + $ms-Persona-imageDetailsSmSpace;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-m;
+ padding-top: 3px;
+ }
+
+ .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+
+//== Modifier: Small Persona
+//
+.ms-Persona.ms-Persona--sm {
+ height: $ms-Persona-sizeSm;
+
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ max-width: $ms-Persona-sizeSm;
+ height: $ms-Persona-sizeSm;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 38px;
+ top: 5px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-m;
+ line-height: $ms-Persona-sizeSm;
+ }
+
+ .ms-Persona-presence {
+ left: 27px;
+ }
+
+ .ms-Persona-details {
+ padding-left: $ms-Persona-sizeSm + $ms-Persona-imageDetailsSmSpace;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-m;
+ }
+
+ .ms-Persona-primaryText,
+ .ms-Persona-secondaryText {
+ padding-top: 1px;
+ }
+}
+
+
+//== Modifier: Large Persona
+//
+.ms-Persona.ms-Persona--lg {
+ height: $ms-Persona-sizeLg;
+
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ max-width: $ms-Persona-sizeLg;
+ height: $ms-Persona-sizeLg;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 67px;
+ top: 10px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-xxl;
+ line-height: $ms-Persona-sizeLg;
+ }
+
+ .ms-Persona-presence {
+ left: 49px;
+ height: $ms-Persona-presenceSizeLg;
+ width: $ms-Persona-presenceSizeLg;
+ border-width: 3px;
+ }
+
+ .ms-Persona-presenceIcon {
+ line-height: $ms-Persona-presenceSizeLg;
+ font-size: $ms-font-size-m;
+ }
+
+ .ms-Persona-details {
+ padding-left: $ms-Persona-sizeLg + $ms-Persona-imageDetailsLgSpace;
+ }
+
+ .ms-Persona-secondaryText {
+ padding-top: 3px;
+ }
+
+ .ms-Persona-tertiaryText {
+ padding-top: 5px;
+ display: block; // Show tertiary text
+ }
+}
+
+
+//== Modifier: Extra Large Persona
+//
+.ms-Persona.ms-Persona--xl {
+ height: $ms-Persona-sizeXl;
+
+ .ms-Persona-imageArea,
+ .ms-Persona-image {
+ max-width: $ms-Persona-sizeXl;
+ height: $ms-Persona-sizeXl;
+ }
+
+ .ms-Persona-placeholder {
+ font-size: 95px;
+ top: 12px;
+ }
+
+ .ms-Persona-initials {
+ font-size: $ms-font-size-su;
+ line-height: $ms-Persona-sizeXl;
+ }
+
+ .ms-Persona-presence {
+ height: $ms-Persona-presenceSizeXl;
+ width: $ms-Persona-presenceSizeXl;
+ left: 71px;
+ border-width: 4px;
+ }
+
+ .ms-Persona-presenceIcon {
+ line-height: $ms-Persona-presenceSizeXl;
+ font-size: $ms-font-size-xl;
+ position: relative;
+ top: 1px;
+ }
+
+ .ms-Persona-details {
+ padding-left: $ms-Persona-sizeXl + $ms-Persona-imageDetailsXlSpace;
+ }
+
+ .ms-Persona-primaryText {
+ font-size: $ms-font-size-xl;
+ font-weight: $ms-font-weight-semilight;
+ margin-top: 0;
+ }
+
+ .ms-Persona-secondaryText {
+ padding-top: 2px;
+ }
+
+ .ms-Persona-tertiaryText,
+ .ms-Persona-optionalText {
+ padding-top: 5px;
+ display: block; // Show tertiary and optional text
+ }
+}
+
+
+//== Modifier: Persona with darker text
+//
+// Note: Typically applied when the component has a colored background.
+.ms-Persona.ms-Persona--darkText {
+ .ms-Persona-primaryText {
+ color: $ms-color-neutralDark;
+ }
+
+ .ms-Persona-secondaryText,
+ .ms-Persona-tertiaryText,
+ .ms-Persona-optionalText {
+ color: $ms-color-neutralPrimary;
+ }
+}
+
+
+//== Modifier: Selectable Persona
+//
+.ms-Persona.ms-Persona--selectable {
+ cursor: pointer;
+ padding: 0 10px;
+
+ &:not(.ms-Persona--xl) {
+ &:hover,
+ &:focus {
+ background-color: $ms-color-themeLighter;
+ outline: 1px solid transparent;
+ }
+ }
+}
+
+
+//== Presence indicator variants.
+
+//== Modifier: Persona with available presence
+//
+.ms-Persona.ms-Persona--available {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-available;
+ }
+}
+
+
+//== Modifier: Persona with away presence
+//
+.ms-Persona.ms-Persona--away {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-away;
+ }
+
+ .ms-Persona-presenceIcon {
+ position: relative;
+ left: 1px;
+ }
+}
+
+
+//== Modifier: Persona with blocked presence
+//
+.ms-Persona.ms-Persona--blocked {
+ .ms-Persona-presence {
+ background-color: $ms-color-white;
+
+ &::before {
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset;
+ border-radius: 50%;
+ }
+
+ &::after {
+ content: '';
+ width: 100%;
+ height: 2px;
+ background-color: $ms-color-presence-busy-average;
+ transform: rotate(-45deg);
+ position: absolute;
+ top: 5px;
+ left: 0;
+ }
+ }
+
+ &.ms-Persona--lg {
+ .ms-Persona-presence {
+ &::after {
+ top: 9px;
+ }
+ }
+ }
+
+ &.ms-Persona--xl {
+ .ms-Persona-presence {
+ &::after {
+ top: 13px;
+ }
+ }
+ }
+}
+
+
+//== Modifier: Persona with busy presence
+//
+.ms-Persona.ms-Persona--busy {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-busy-average;
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+}
+
+
+//== Modifier: Persona with do not disturb presence
+//
+.ms-Persona.ms-Persona--dnd {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-dnd-background;
+ }
+}
+
+
+//== Modifier: Persona with offline presence
+//
+.ms-Persona.ms-Persona--offline {
+ .ms-Persona-presence {
+ background-color: $ms-color-presence-offline;
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-black;
+ box-shadow: 0 0 0 1px $ms-color-white inset;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-white;
+ box-shadow: 0 0 0 1px $ms-color-black inset;
+ }
+ }
+}
+
+//== Modifier: FacePile
+//
+.ms-Persona.ms-Persona--facePile {
+ display: inline-block;
+ width: auto;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .ms-Persona-imageArea {
+ position: relative;
+ width: 100%;
+ min-width: $ms-Persona-sizeXs;
+ }
+
+ .ms-Persona-initials {
+ position: relative;
+ }
+
+ .ms-Persona-details {
+ display: none;
+ }
+
+ .ms-Persona-presence {
+ display: none;
+ }
+}
+
+//== Modifier: FacePile
+//
+.ms-Persona.ms-Persona--token {
+ display: inline-flex;
+ width: auto;
+ background-color: $ms-color-neutralLighter;
+ border-radius: 20px;
+ margin: 4px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .ms-Persona-actionIcon {
+ border-radius: 20px;
+ display: inline-block;
+ width: $ms-Persona-sizeXs;
+ height: $ms-Persona-sizeXs;
+ padding: 0;
+ line-height: 30px;
+ transition: background-color $ms-duration1 $ms-ease1;
+ text-align: center;
+
+ &:hover {
+ background-color: $ms-color-neutralLight;
+ }
+ }
+
+ .ms-Persona-imageArea {
+ width: 100%;
+ min-width: $ms-Persona-sizeXs;
+ }
+
+ .ms-Persona-details {
+ height: 30px;
+ display: inline-block;
+ width: auto;
+ padding-right: 8px;
+ }
+
+ .ms-Persona-primaryText {
+ padding-top: 0;
+ line-height: 34px;
+ }
+
+ .ms-Persona-initials {
+ position: relative;
+ }
+}
diff --git a/dist/components/PersonaCard/PersonaCard.hbs b/dist/components/PersonaCard/PersonaCard.hbs
new file mode 100644
index 00000000..615a2e08
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.hbs
@@ -0,0 +1,40 @@
+
+
+
+
+ {{> Persona props=props.personaProps}}
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
Details
+
Personal: 555.206.2443
+
Work: 555.929.8240
+
+
+
+
+ {{> OrgChart props=props.orgChartProps}}
+
+
+
diff --git a/dist/components/PersonaCard/PersonaCard.json b/dist/components/PersonaCard/PersonaCard.json
new file mode 100644
index 00000000..ec62b5ef
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.json
@@ -0,0 +1,3 @@
+{
+ "name": "PersonaCard"
+}
diff --git a/dist/components/PersonaCard/PersonaCard.scss b/dist/components/PersonaCard/PersonaCard.scss
new file mode 100644
index 00000000..bf75e32d
--- /dev/null
+++ b/dist/components/PersonaCard/PersonaCard.scss
@@ -0,0 +1,211 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Persona Card styles
+
+
+// Small
+//
+// The persona card docks to the bottom of the viewport.
+.ms-PersonaCard {
+ @include ms-baseFont;
+ @include ms-u-slideUpIn10;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: $ms-color-neutralLighter;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-left: 20px;
+}
+
+.ms-PersonaCard-actions {
+ @include ms-u-borderBox;
+ position: relative;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ background-color: $ms-color-white;
+ height: 48px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 47px;
+ left: 0;
+ width: 100%;
+ border-top: 1px solid $ms-color-neutralTertiaryAlt;
+ }
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: $ms-icon-size-m;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: $ms-color-neutralSecondary;
+ outline: transparent;
+ position: relative;
+ @include ms-u-borderBox;
+
+ &:hover {
+ color: $ms-color-neutralDark;
+ }
+
+ &:active {
+ color: $ms-color-themePrimary;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ top: 0;
+ left: 0;
+ z-index: 100;
+ }
+
+ // Currently-selected action
+ &.is-active {
+ color: $ms-color-themePrimary;
+
+ // Arrow
+ &::after {
+ @include ms-u-borderBox;
+ @include rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ background-color: $ms-color-white;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 13px;
+ }
+ }
+}
+
+.ms-PersonaCard-overflow {
+ font-size: $ms-font-size-m;
+ color: $ms-color-neutralPrimary;
+ float: right;
+ margin-top: -1px;
+
+ &:hover {
+ color: $ms-color-themePrimary;
+ }
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: -95px;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: $ms-color-white;
+}
+
+// Active detail items
+.ms-PersonaCard-details {
+ display: none;
+ width: 100%;
+ margin: 0;
+ max-height: 300px;
+ min-height: 48px;
+ color: $ms-color-neutralSecondary;
+ padding: 9px 20px;
+ box-sizing: border-box;
+
+ &.is-active {
+ display: block;
+ }
+
+ // State: Contents are collapsed to a single line.
+ &.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+
+ // Show the expander icon.
+ .ms-PersonaCard-detailExpander::after {
+ @include ms-Icon--ChevronDown;
+ }
+ }
+}
+
+.ms-PersonaCard-details[data-detail-id='org'] {
+ max-height: 300px;
+}
+
+// Icon to expand a collapsed actionDetails section.
+.ms-PersonaCard-detailExpander {
+ color: $ms-color-neutralPrimary;
+ cursor: pointer;
+ font-size: $ms-icon-size-m;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 2px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+
+ &::after {
+ @include ms-Icon;
+ @include ms-Icon--ChevronUp;
+ }
+}
+
+.ms-PersonaCard-detailLine {
+ color: $ms-color-neutralPrimary;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: $ms-color-neutralSecondary;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart {
+ &::after {
+ display: none; // Hide arrow for orgchart action
+ }
+}
+
+@media (min-width: $ms-screen-md-min) {
+ // Undock the persona card and give it a shadow.
+ .ms-PersonaCard {
+ @include drop-shadow;
+ max-width: 360px;
+ position: relative;
+ }
+
+ .ms-ContextualHost {
+ .ms-PersonaCard {
+ box-shadow: none;
+ }
+ }
+}
diff --git a/dist/components/Pivot/Pivot.hbs b/dist/components/Pivot/Pivot.hbs
new file mode 100644
index 00000000..dfe70153
--- /dev/null
+++ b/dist/components/Pivot/Pivot.hbs
@@ -0,0 +1,25 @@
+
+
+
+
+
+ {{#each props.links}}
+
+ {{text}}
+
+ {{/each}}
+ {{#if props.hasEllipsis}}
+
+
+
+ {{/if}}
+
+ {{#each props.links}}
+
+ {{content}}
+
+ {{/each}}
+
diff --git a/dist/components/Pivot/Pivot.json b/dist/components/Pivot/Pivot.json
new file mode 100644
index 00000000..1eb16a64
--- /dev/null
+++ b/dist/components/Pivot/Pivot.json
@@ -0,0 +1,3 @@
+{
+ "name": "Pivot"
+}
diff --git a/dist/components/Pivot/Pivot.scss b/dist/components/Pivot/Pivot.scss
new file mode 100644
index 00000000..d4d8b119
--- /dev/null
+++ b/dist/components/Pivot/Pivot.scss
@@ -0,0 +1,204 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Pivot and tab styles
+
+
+.ms-Pivot {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+}
+
+.ms-Pivot-links {
+ font-size: 0; // Bring inline-block children together
+ height: 40px;
+ list-style-type: none;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: $ms-color-neutralPrimary;
+ display: inline-block;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ line-height: 40px;
+ margin-right: 8px;
+ padding: 0 8px;
+ text-align: center;
+ vertical-align: top;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ // Underline, not yet visible
+ &::before {
+ background-color: transparent;
+ bottom: 0;
+ content: '';
+ height: 2px;
+ left: 8px;
+ position: absolute;
+ right: 8px;
+ transition: background-color $ms-duration2 $ms-ease2;
+ }
+
+ // Make room for the heavier text of the selected state
+ &::after {
+ color: transparent;
+ content: attr(title);
+ display: block;
+ font-weight: bold;
+ height: 1px;
+ overflow: hidden;
+ visibility: hidden;
+ }
+
+ //== State: Selected
+ &.is-selected {
+ font-weight: $ms-font-weight-semibold;
+ position: relative;
+
+ // Show the underline
+ &::before {
+ background-color: $ms-color-themePrimary;
+ }
+ }
+
+ //== State: Disabled
+ &.is-disabled {
+ color: $ms-color-neutralTertiary;
+ }
+}
+
+
+
+
+// @TODO: Determine if any of the styles below this are necessary anymore.
+
+
+// Overflow (ellipsis)
+.ms-Pivot-link.ms-Pivot-link--overflow {
+ color: $ms-color-neutralSecondary;
+
+ &.is-selected {
+ color: $ms-color-themePrimary;
+ }
+
+ &:hover:not(.is-selected),
+ &:focus:not(.is-selected) {
+ color: $ms-color-neutralDark;
+ }
+
+ &:active {
+ color: $ms-color-themePrimary;
+ }
+}
+
+// Ellipsis icon
+.ms-Pivot-ellipsis {
+ font-size: $ms-font-size-m-plus;
+ position: relative;
+ top: 0;
+}
+
+// Pivot content, hidden by default
+.ms-Pivot-content {
+ display: none;
+ margin-top: 20px;
+}
+
+
+//== Modifier: Large Pivots
+//
+.ms-Pivot.ms-Pivot--large {
+ .ms-Pivot-link {
+ font-size: $ms-font-size-l;
+
+ &.is-selected {
+ font-weight: $ms-font-weight-semilight;
+ }
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow {
+ &::after {
+ font-size: $ms-font-size-l;
+ }
+ }
+}
+
+
+//== Modifier: Tabs
+//
+.ms-Pivot.ms-Pivot--tabs {
+
+ .ms-Pivot-link {
+ height: 40px;
+ background-color: $ms-color-neutralLighter;
+ line-height: 40px;
+ margin-right: -2px; // Remove space next to inline-block element
+ padding: 0 10px;
+
+ &:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
+ &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) {
+ color: $ms-color-black;
+ }
+
+ &:active {
+ color: $ms-color-white;
+ background-color: $ms-color-themePrimary;
+ }
+
+ //== State: Selected
+ &.is-selected {
+ background-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+ font-weight: $ms-font-weight-semilight;
+ }
+ }
+
+ .ms-Pivot-link.ms-Pivot-link--overflow {
+ &:hover:not(.is-selected),
+ &:focus:not(.is-selected) {
+ background-color: $ms-color-white;
+ }
+
+ &:active {
+ background-color: $ms-color-themePrimary;
+ }
+ }
+}
+
+// @TODO: Confirm that this component is not responsive.
+//
+// @media (min-width: $ms-screen-lg-min) {
+// .ms-Pivot-link {
+// font-size: $ms-font-size-m;
+// }
+
+// .ms-Pivot-link.ms-Pivot-link--overflow {
+// &:after {
+// font-size: $ms-font-size-m;
+// }
+// }
+// }
+
+// All high contrast styling rules
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs {
+ .ms-Pivot-link {
+ &.is-selected {
+ font-weight: $ms-font-weight-semibold;
+ }
+ }
+ }
+}
diff --git a/dist/components/ProgressIndicator/ProgressIndicator.hbs b/dist/components/ProgressIndicator/ProgressIndicator.hbs
new file mode 100644
index 00000000..873c46ab
--- /dev/null
+++ b/dist/components/ProgressIndicator/ProgressIndicator.hbs
@@ -0,0 +1,14 @@
+
+
+
+
+
{{props.title}}
+
+
{{props.title}}
+
diff --git a/dist/components/ProgressIndicator/ProgressIndicator.json b/dist/components/ProgressIndicator/ProgressIndicator.json
new file mode 100644
index 00000000..a3119c9f
--- /dev/null
+++ b/dist/components/ProgressIndicator/ProgressIndicator.json
@@ -0,0 +1,3 @@
+{
+ "name": "ProgressIndicator"
+}
diff --git a/dist/components/ProgressIndicator/ProgressIndicator.scss b/dist/components/ProgressIndicator/ProgressIndicator.scss
new file mode 100644
index 00000000..208c9e6d
--- /dev/null
+++ b/dist/components/ProgressIndicator/ProgressIndicator.scss
@@ -0,0 +1,67 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// ProgressIndicator Styles
+
+
+$ProgressIndicatorMarginBetweenText: 8px;
+$ProgressIndicatorButtonsWidth: 218px;
+$ProgressIndicatorTextHeight: 18px;
+
+.ms-ProgressIndicator {
+ @include ms-baseFont;
+ font-weight: $ms-font-weight-regular;
+}
+
+.ms-ProgressIndicator-itemName {
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: $ProgressIndicatorMarginBetweenText / 2;
+ line-height: $ProgressIndicatorTextHeight + 2;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: $ms-color-neutralSecondaryAlt;
+ font-size: $ms-font-size-xs;
+ line-height: $ProgressIndicatorTextHeight;
+}
+
+.ms-ProgressIndicator-itemProgress {
+ position: relative;
+ width: 180px;
+ height: 2px;
+ padding: $ProgressIndicatorMarginBetweenText 0;
+}
+
+.ms-ProgressIndicator-progressTrack {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: $ms-color-neutralLight;
+ outline: 1px solid transparent;
+}
+
+.ms-ProgressIndicator-progressBar {
+ background-color: $ms-color-themePrimary;
+ height: 2px;
+ position: absolute;
+ transition: width .3s ease;
+ width: 0;
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-black;
+ }
+}
diff --git a/dist/components/RadioButton/RadioButton.hbs b/dist/components/RadioButton/RadioButton.hbs
new file mode 100644
index 00000000..49e0e33f
--- /dev/null
+++ b/dist/components/RadioButton/RadioButton.hbs
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ {{props.label}}
+
+
\ No newline at end of file
diff --git a/dist/components/RadioButton/RadioButton.json b/dist/components/RadioButton/RadioButton.json
new file mode 100644
index 00000000..2816006c
--- /dev/null
+++ b/dist/components/RadioButton/RadioButton.json
@@ -0,0 +1,6 @@
+{
+ "name": "RadioButton",
+ "dependencies": [
+ "Label"
+ ]
+}
diff --git a/dist/components/RadioButton/RadioButton.scss b/dist/components/RadioButton/RadioButton.scss
new file mode 100644
index 00000000..d8a58571
--- /dev/null
+++ b/dist/components/RadioButton/RadioButton.scss
@@ -0,0 +1,197 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// RadioButton styles
+
+$ms-radiobutton-field-size: 20px;
+$ms-radiobutton-transition-duration: 200ms;
+$ms-radiobutton-transition-duration-inner: 150ms;
+$ms-radiobutton-transition-timing: cubic-bezier(.4, 0, .23, 1);
+
+.ms-RadioButton {
+ @include ms-baseFont;
+ box-sizing: border-box;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ min-height: 36px;
+ position: relative;
+
+ .ms-Label {
+ font-size: $ms-font-size-m;
+ padding: 0 0 0 26px;
+ cursor: pointer;
+ display: inline-block;
+ }
+}
+
+// The hidden input
+.ms-RadioButton-input {
+ position: absolute;
+ opacity: 0;
+}
+
+// The radio button circle container
+.ms-RadioButton-field::before {
+ content: '';
+ display: inline-block;
+ border: 2px solid $ms-color-neutralTertiary;
+ width: $ms-radiobutton-field-size;
+ height: $ms-radiobutton-field-size;
+ cursor: pointer;
+ font-weight: normal;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: border-color;
+ transition-duration: $ms-radiobutton-transition-duration;
+ transition-timing-function: $ms-radiobutton-transition-timing;
+ border-radius: 50%;
+}
+
+// The inner circle indicating a checked radio button
+.ms-RadioButton-field::after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ bottom: 0;
+ right: 0;
+ transition-property: top, left, width, height;
+ transition-duration: $ms-radiobutton-transition-duration-inner;
+ transition-timing-function: $ms-radiobutton-transition-timing;
+ box-sizing: border-box;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteDisabled;
+ }
+}
+
+// The radio button field
+.ms-RadioButton-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+
+ &:hover,
+ &:focus {
+ &::before {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+
+ .ms-Label {
+ color: $ms-color-black;
+ }
+ }
+
+ //== State: A disabled radio button
+ //
+ &.is-disabled {
+ cursor: default;
+
+ &::before {
+ background-color: $ms-color-neutralTertiaryAlt;
+ border-color: $ms-color-neutralTertiaryAlt;
+ color: $ms-color-neutralTertiaryAlt;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+
+ .ms-Label {
+ color: $ms-color-neutralTertiary;
+
+ @media screen and (-ms-high-contrast: active) {
+ color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ &::before {
+ border-color: $ms-color-neutralTertiaryAlt;
+ }
+ }
+ }
+
+ //== State: A radio button in focus
+ //
+ &.in-focus {
+ &::before {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+ }
+}
+
+
+//== State: When the radio button is selected (checked)
+//
+.ms-RadioButton-field.is-checked {
+ &::before {
+ border: 2px solid $ms-color-themePrimary;
+ background-color: transparent;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ &::after {
+ background-color: $ms-color-themePrimary;
+ top: 5px;
+ left: 5px;
+ width: 10px;
+ height: 10px;
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ &::before {
+ border-color: $ms-color-themePrimary;
+ }
+ }
+
+ //== State: A radio button in focus
+ //
+ &.in-focus {
+ &::before {
+ border-color: $ms-color-themePrimary;
+ }
+ }
+}
diff --git a/dist/components/SearchBox/SearchBox.hbs b/dist/components/SearchBox/SearchBox.hbs
new file mode 100644
index 00000000..1be3ef76
--- /dev/null
+++ b/dist/components/SearchBox/SearchBox.hbs
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ {{#if props.icon}} {{/if}}
+ {{props.label}}
+
+ {{renderPartial props.clearButton.component props.clearButton.props}}
+ {{#if props.exitButton}}{{renderPartial props.exitButton.component props.exitButton.props}}{{/if}}
+ {{#if props.filterButton}}{{renderPartial props.filterButton.component props.filterButton.props}}{{/if}}
+
\ No newline at end of file
diff --git a/dist/components/SearchBox/SearchBox.json b/dist/components/SearchBox/SearchBox.json
new file mode 100644
index 00000000..783f569b
--- /dev/null
+++ b/dist/components/SearchBox/SearchBox.json
@@ -0,0 +1,26 @@
+{
+ "name": "SearchBox",
+ "props": {
+ "label": "Search",
+ "defaultValue": "",
+ "icon": "search",
+ "clearButton": {
+ "component": "CommandButton",
+ "props": {
+ "icon": "x",
+ "modifier": "noLabel",
+ "tag": "button",
+ "customClasses": "ms-SearchBox-close"
+ }
+ },
+ "filterButton": {
+ "component": "CommandButton",
+ "props": {
+ "icon": "Filter",
+ "modifier": "noLabel",
+ "tag": "button",
+ "customClasses": "ms-SearchBox-filter"
+ }
+ }
+ }
+}
diff --git a/dist/components/SearchBox/SearchBox.scss b/dist/components/SearchBox/SearchBox.scss
new file mode 100644
index 00000000..6ab0cbe7
--- /dev/null
+++ b/dist/components/SearchBox/SearchBox.scss
@@ -0,0 +1,372 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Search box styles
+
+$SearchBox-width: 208px;
+$SearchBox-field-padding-left: 45px;
+$SearchBox-height: 36px;
+$SearchBox-commandbarHeight: 40px;
+$SearchBox-commandbar-md-height: 44px;
+$disabled-color: #F4F4F4;
+$SearchBox-command-color: #F4F4F4;
+
+.ms-SearchBox {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ height: $SearchBox-height;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+ overflow: hidden;
+ background-color: $ms-color-white;
+
+ // State: Active searchbox
+ &.is-active {
+ z-index: $ms-zIndex-front;
+
+ .ms-SearchBox-label {
+ display: none;
+ }
+
+ .ms-SearchBox-clear {
+ display: block;
+ }
+ }
+
+ &:hover {
+ background-color: $ms-color-themeLighter;
+
+ .ms-SearchBox-label {
+ color: $ms-color-black;
+
+ .ms-Icon {
+ color: $ms-color-neutralPrimary;
+ }
+ }
+ }
+
+ // State: Disabled searchbox
+ &.is-disabled {
+ background-color: $disabled-color;
+ pointer-events: none;
+
+ .ms-SearchBox-label {
+ @include ms-Label-is-disabled;
+ }
+
+ .ms-SearchBox-icon {
+ color: $ms-color-neutralTertiary;
+ }
+
+ .ms-SearchBox-field {
+ color: $ms-color-neutralTertiary;
+ background-color: transparent;
+ border-color: $ms-color-neutralLighter;
+ cursor: default;
+ }
+ }
+}
+
+.ms-SearchBox-clear {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: $ms-zIndex-front;
+
+ .ms-CommandButton-button {
+ background-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+ height: $SearchBox-height;
+ }
+
+ .ms-CommandButton-icon {
+ color: $ms-color-white;
+ }
+}
+
+.ms-SearchBox-icon {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ display: inline-block;
+ font-size: 16px;
+ width: 16px;
+ margin-left: 12px;
+ margin-right: 6px;
+ color: $ms-color-themePrimary;
+ vertical-align: top;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ @include ms-u-normalize;
+ border: 1px solid $ms-color-themeTertiary;
+ outline: transparent 1px solid;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-m;
+ color: $ms-color-black;
+ height: $SearchBox-height;
+ padding: 6px 3px 7px $SearchBox-field-padding-left;
+ width: $SearchBox-width;
+ background-color: transparent;
+ z-index: $ms-zIndex-middle;
+ transition: padding-left $ms-duration1;
+
+ &:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: $ms-color-themePrimary;
+ background-color: $ms-color-themeLighter;
+ }
+
+ &::-ms-clear {
+ display: none;
+ }
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: $SearchBox-height;
+ line-height: $SearchBox-height;
+ color: $ms-color-neutralSecondary;
+}
+
+//== Modifier: CommandBar Search
+//
+.ms-SearchBox.ms-SearchBox--commandBar {
+ @include ms-bgColor-white;
+ width: $SearchBox-width;
+ height: $SearchBox-commandbarHeight;
+
+ .ms-SearchBox-field,
+ .ms-SearchBox-label {
+ height: $SearchBox-commandbarHeight;
+ line-height: $SearchBox-commandbarHeight;
+ }
+
+ .ms-SearchBox-field {
+ transition: none;
+ border: 0;
+
+ &:focus {
+ background-color: transparent;
+ padding: 6px 3px 7px $SearchBox-field-padding-left;
+ }
+ }
+
+ .ms-SearchBox-clear,
+ .ms-SearchBox-filter,
+ .ms-SearchBox-exit {
+ display: none;
+ position: absolute;
+ top: 0;
+ z-index: $ms-zIndex-front;
+ color: $ms-color-neutralTertiary;
+
+ .ms-CommandButton-button {
+ height: $SearchBox-commandbarHeight;
+ background-color: transparent;
+ }
+ }
+
+ .ms-SearchBox-clear {
+ right: 8px;
+ }
+
+ .ms-SearchBox-filter {
+ right: 8px;
+
+ .ms-CommandButton-icon {
+ color: $ms-color-themePrimary;
+ }
+ }
+
+ &::before {
+ position: absolute;
+ content: ' ';
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: 0 8px;
+ border-bottom: 1px solid $ms-color-neutralLight;
+ }
+
+ &:hover {
+ background-color: $ms-color-white;
+
+ .ms-SearchBox-label {
+ color: $ms-color-neutralDark;
+ }
+
+ .ms-SearchBox-icon {
+ color: $ms-color-themePrimary;
+ }
+ }
+
+ &:focus {
+ background-color: transparent;
+ }
+
+ &.is-active {
+ .ms-CommandButton {
+ .ms-SearchBox-exit,
+ .ms-SearchBox-filter {
+ display: block;
+ }
+ }
+ }
+
+ &.is-collapsed {
+ width: 50px;
+ min-height: 40px;
+ z-index: $ms-zIndex-back;
+ background-color: $SearchBox-command-color;
+
+ .ms-SearchBox-text {
+ display: none;
+ }
+
+ .ms-SearchBox-field {
+ cursor: pointer;
+ width: calc(100% - 50px);
+ }
+
+ &::before {
+ visibility: hidden;
+ }
+ }
+
+ &.is-collapsed.is-active {
+ width: 100%;
+
+ .ms-SearchBox-field {
+ display: block;
+ cursor: text;
+ }
+
+ .ms-SearchBox-text {
+ display: inline-block;
+ }
+
+ @media only screen and (max-width: $ms-screen-md-max) {
+ width: 100%;
+
+ .ms-SearchBox-clear {
+ display: inline-block;
+ right: 58px;
+ }
+
+ .ms-SearchBox-filter {
+ display: inline-block;
+ }
+
+ &.is-animated {
+ transition: width $ms-duration1 $ms-ease1;
+ }
+ }
+
+ &::before {
+ visibility: visible;
+ }
+ }
+
+ &.has-text {
+ .ms-SearchBox-clear {
+ display: inline-block;
+
+ .ms-CommandButton-icon {
+ color: $ms-color-neutralTertiary;
+
+ &:active {
+ color: $ms-color-themePrimary;
+ }
+ }
+ }
+ }
+
+ @media only screen and (min-width: $ms-screen-xl-min) {
+ @include ms-bgColor-white;
+ border-right: 1px solid $ms-color-neutralLight;
+ }
+
+ @media only screen and (max-width: $ms-screen-md-max) {
+ height: $SearchBox-commandbar-md-height;
+
+ .ms-SearchBox-icon,
+ .ms-SearchBox-exit,
+ .ms-SearchBox-field,
+ .ms-SearchBox-label {
+ height: $SearchBox-commandbar-md-height;
+ line-height: $SearchBox-commandbar-md-height;
+ }
+
+ .ms-SearchBox-icon,
+ .ms-SearchBox-exit,
+ .ms-SearchBox-filter,
+ .ms-SearchBox-clear {
+ font-size: 20px;
+
+ .ms-CommandButton-button {
+ height: $SearchBox-commandbar-md-height;
+ }
+ }
+
+ .ms-SearchBox-field,
+ .ms-SearchBox-label {
+ font-size: 16px;
+ }
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active {
+ @include ms-bgColor-white;
+
+ .ms-SearchBox-label {
+ display: block;
+ line-height: $SearchBox-commandbarHeight;
+ height: $SearchBox-commandbarHeight;
+
+ .ms-SearchBox-text {
+ display: none;
+ }
+ }
+
+ &::before {
+ visibility: visible;
+ }
+
+ @media only screen and (max-width: $ms-screen-md-max) {
+ .ms-SearchBox-field {
+ width: 100%;
+ padding-right: 100px;
+ }
+
+ .ms-SearchBox-icon {
+ display: none;
+ }
+
+ .ms-SearchBox-exit {
+ display: inline-block;
+ }
+
+ &.has-text {
+ .ms-SearchBox-filter {
+ .ms-CommandButton-icon {
+ color: $ms-color-neutralTertiary;
+ }
+ }
+ }
+ }
+}
diff --git a/dist/components/Spinner/Spinner.hbs b/dist/components/Spinner/Spinner.hbs
new file mode 100644
index 00000000..89c8fe8e
--- /dev/null
+++ b/dist/components/Spinner/Spinner.hbs
@@ -0,0 +1,13 @@
+
+
+
+
+ {{#if props.label}}
+
+ {{props.label}}
+
+ {{/if}}
+
diff --git a/dist/components/Spinner/Spinner.json b/dist/components/Spinner/Spinner.json
new file mode 100644
index 00000000..a09023e5
--- /dev/null
+++ b/dist/components/Spinner/Spinner.json
@@ -0,0 +1,3 @@
+{
+ "name": "Spinner"
+}
diff --git a/dist/components/Spinner/Spinner.scss b/dist/components/Spinner/Spinner.scss
new file mode 100644
index 00000000..0902866f
--- /dev/null
+++ b/dist/components/Spinner/Spinner.scss
@@ -0,0 +1,51 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Spinner styles
+
+
+.ms-Spinner {
+ @include ms-baseFont;
+ position: relative;
+ height: 20px;
+
+ &.ms-Spinner--large {
+ height: 28px;
+
+ .ms-Spinner-label {
+ left: 34px;
+ top: 6px;
+ }
+ }
+}
+
+.ms-Spinner-circle {
+ position: absolute;
+ border-radius: 100px;
+ background-color: $ms-color-themePrimary;
+ opacity: 0;
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-black;
+ }
+}
+
+.ms-Spinner-label {
+ @include ms-baseFont;
+ position: relative;
+ font-size: $ms-font-size-s;
+ font-weight: $ms-font-weight-regular;
+ color: $ms-color-themePrimary;
+ left: 28px;
+ top: 2px;
+}
diff --git a/dist/components/Table/Table.hbs b/dist/components/Table/Table.hbs
new file mode 100644
index 00000000..8ccaf0af
--- /dev/null
+++ b/dist/components/Table/Table.hbs
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ {{#if props.isSelectable}}
+
+ {{/if}}
+ {{#each props.headers}}
+ {{value}}
+ {{/each}}
+
+
+
+ {{#each props.rows}}
+
+ {{#if ../props.isSelectable}}
+
+ {{/if}}
+ {{#each columns}}
+ {{value}}
+ {{/each}}
+
+ {{/each}}
+
+
diff --git a/dist/components/Table/Table.json b/dist/components/Table/Table.json
new file mode 100644
index 00000000..b354b7f1
--- /dev/null
+++ b/dist/components/Table/Table.json
@@ -0,0 +1,3 @@
+{
+ "name": "Table"
+}
diff --git a/dist/components/Table/Table.scss b/dist/components/Table/Table.scss
new file mode 100644
index 00000000..aab338da
--- /dev/null
+++ b/dist/components/Table/Table.scss
@@ -0,0 +1,126 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Data table styles
+
+.ms-Table {
+ @include ms-baseFont;
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+// makes the table cells not expand with the content, keeping the table cells at a fixed size
+.ms-Table--fixed {
+ table-layout: fixed;
+}
+
+.ms-Table tr,
+.ms-Table-row {
+ display: table-row;
+ line-height: 30px;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-s;
+ color: $ms-color-neutralPrimary;
+
+ // Rows can be selected.
+ &.is-selected {
+ background-color: $ms-color-themeLight;
+
+ // A checkmark in a selected row.
+ .ms-Table-rowCheck {
+ background-color: $ms-color-themePrimary;
+
+ // Hide the checkbox.
+ &::before {
+ display: none;
+ }
+
+ // But show the mark.
+ &::after {
+ @include ms-Icon--CheckboxComposite;
+ color: $ms-color-white;
+ }
+ }
+ }
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+// Style the first row as a header.
+.ms-Table thead th,
+.ms-Table-head {
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-xs;
+ color: $ms-color-neutralSecondary;
+}
+
+.ms-Table thead,
+.ms-Table-head {
+ td,
+ th,
+ .ms-Table-cell,
+ .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid $ms-color-neutralLight;
+ }
+}
+
+// On selectable tables, each row has a checkbox.
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+
+ // Empty checkbox.
+ &::after {
+ @include ms-Icon;
+ @include ms-Icon--Checkbox;
+ color: $ms-color-neutralTertiary;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 1px;
+ }
+}
+
+// A table with selectable rows
+.ms-Table--selectable {
+ tr:hover,
+ .ms-Table-row:hover {
+ background-color: $ms-color-neutralLighter;
+ cursor: pointer;
+ outline: 1px solid transparent;
+ }
+}
+
+// All high contrast styling rules
+@media screen and (-ms-high-contrast: active) {
+ .ms-Table-row {
+ // Rows can be selected.
+ &.is-selected {
+ // A checkmark in a selected row.
+ .ms-Table-rowCheck {
+ background: none;
+
+ // Show the checkbox.
+ &::before {
+ display: block;
+ }
+ }
+ }
+ }
+}
diff --git a/dist/components/TextField/TextField.hbs b/dist/components/TextField/TextField.hbs
new file mode 100644
index 00000000..23582a3a
--- /dev/null
+++ b/dist/components/TextField/TextField.hbs
@@ -0,0 +1,12 @@
+
+
+
+
+ {{#if props.label}}{{props.label}} {{/if}}
+ {{#if props.textfield}} {{/if}}
+ {{#if props.multiline}}{{/if}}
+ {{#if props.description}}{{props.description}} {{/if}}
+
diff --git a/dist/components/TextField/TextField.json b/dist/components/TextField/TextField.json
new file mode 100644
index 00000000..ee904cbd
--- /dev/null
+++ b/dist/components/TextField/TextField.json
@@ -0,0 +1,3 @@
+{
+ "name": "TextField"
+}
diff --git a/dist/components/TextField/TextField.scss b/dist/components/TextField/TextField.scss
new file mode 100644
index 00000000..7c3a7371
--- /dev/null
+++ b/dist/components/TextField/TextField.scss
@@ -0,0 +1,235 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+@import '../Label/Label';
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Single line (input) and multiline (textarea) form field styles
+
+.ms-TextField {
+ @include ms-baseFont;
+ @include ms-u-normalize;
+ color: $ms-color-neutralPrimary;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ margin-bottom: 8px;
+
+ .ms-Label {
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-semibold;
+ }
+}
+
+//= State: A disabled textfield
+.ms-TextField.is-disabled {
+ .ms-TextField-field {
+ background-color: $ms-color-neutralLighter;
+ border-color: $ms-color-neutralLighter;
+ pointer-events: none;
+ cursor: default;
+ }
+
+ @include input-placeholder {
+ color: $ms-color-neutralTertiary;
+ }
+}
+
+//= State: A required textfield
+.ms-TextField.is-required {
+ .ms-Label {
+ @include ms-Label-is-required
+ }
+
+ @include input-placeholder {
+ @include ms-Label-is-required
+ }
+}
+
+//= State: An active textfield
+.ms-TextField.is-active {
+ border-color: $ms-color-themePrimary;
+}
+
+.ms-TextField-field {
+ @include ms-u-normalize;
+ border: 1px solid $ms-color-neutralTertiaryAlt;
+ border-radius: 0;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-m;
+ color: $ms-color-neutralPrimary;
+ height: 32px;
+ padding: 6px 12px 7px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+ text-overflow: ellipsis;
+
+ &:hover {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+
+ &:focus {
+ border-color: $ms-color-themePrimary;
+ }
+
+ &:hover,
+ &:focus {
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ &[disabled] {
+ background-color: $ms-color-neutralLighter;
+ border-color: $ms-color-neutralLighter;
+ pointer-events: none;
+ cursor: default;
+ }
+
+ @include input-placeholder {
+ color: $ms-color-neutralSecondary;
+ }
+}
+
+.ms-TextField-description {
+ color: $ms-color-neutralSecondaryAlt;
+ font-size: $ms-font-size-xs;
+}
+
+
+//== Modifier: Single line (default), placeholder label
+//
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+ background-color: $ms-color-white;
+
+ .ms-TextField-field {
+ position: relative;
+ background-color: transparent;
+ z-index: $ms-zIndex-middle;
+ }
+
+ .ms-Label {
+ position: absolute;
+ font-weight: $ms-font-weight-semilight;
+ font-size: $ms-font-size-m;
+ color: $ms-color-neutralSecondary;
+ padding: 6px 12px 7px;
+ pointer-events: none;
+ z-index: $ms-zIndex-back;
+ }
+
+ &.is-disabled {
+ color: $ms-color-neutralTertiary;
+
+ .ms-Label {
+ @include ms-Label-is-disabled;
+ }
+ }
+}
+
+
+//== Modifier: Single line (default), underlined
+//
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+
+ &:hover {
+ border-color: $ms-color-neutralSecondaryAlt;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+
+ &:active,
+ &:focus {
+ border-color: $ms-color-themePrimary;
+ }
+
+ .ms-Label {
+ font-size: $ms-font-size-m;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: top;
+ padding-left: 12px;
+ padding-top: 9px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+ }
+
+ .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 3px;
+
+ &:active,
+ &:focus,
+ &:hover {
+ outline: 0;
+ }
+ }
+
+ &.is-disabled {
+ border-bottom-color: $ms-color-neutralLight;
+
+ .ms-Label {
+ @include ms-Label-is-disabled;
+ }
+
+ .ms-TextField-field {
+ background-color: transparent;
+ color: $ms-color-neutralTertiary;
+ }
+ }
+
+ &.is-active {
+ border-color: $ms-color-themePrimary;
+
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackSelected;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteSelected;
+ }
+ }
+}
+
+
+//== Modifier: Multiline textfield
+//
+.ms-TextField.ms-TextField--multiline {
+ .ms-TextField-field {
+ @include ms-baseFont;
+ color: $ms-color-neutralSecondary;
+ font-family: $ms-font-family-base;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+ }
+}
diff --git a/dist/components/Toggle/Toggle.hbs b/dist/components/Toggle/Toggle.hbs
new file mode 100644
index 00000000..7982546a
--- /dev/null
+++ b/dist/components/Toggle/Toggle.hbs
@@ -0,0 +1,14 @@
+
+
+
+
+ {{props.description}}
+
+
+ {{props.offText}}
+ {{props.onText}}
+
+
diff --git a/dist/components/Toggle/Toggle.json b/dist/components/Toggle/Toggle.json
new file mode 100644
index 00000000..c8c368a6
--- /dev/null
+++ b/dist/components/Toggle/Toggle.json
@@ -0,0 +1,6 @@
+{
+ "name": "Toggle",
+ "dependencies": [
+ "Label"
+ ]
+}
diff --git a/dist/components/Toggle/Toggle.scss b/dist/components/Toggle/Toggle.scss
new file mode 100644
index 00000000..759f040b
--- /dev/null
+++ b/dist/components/Toggle/Toggle.scss
@@ -0,0 +1,252 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Toggle styles
+
+
+@import '../Label/Label.scss';
+
+// Slider mixin
+@mixin ms-Toggle-slider($direction) {
+ // Slider pseudo element
+ &::before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ #{$direction}: 4px;
+ background-color: $ms-color-neutralSecondary;
+ outline: 1px solid transparent;
+ transition-property: background, left;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+
+ @media screen and (-ms-high-contrast: active) {
+ border: 2.5px solid $ms-color-white;
+ height: 15px;
+ outline: 0;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-black;
+ }
+ }
+
+ @if $direction == left {
+ &::before {
+ right: auto;
+ }
+ }
+
+ @if $direction == right {
+ &::before {
+ background-color: $ms-color-white;
+ left: 28px;
+ }
+ }
+}
+
+// Toggle
+.ms-Toggle {
+ @include ms-baseFont;
+ @include ms-font-m;
+ @include ms-u-normalize;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+
+ // Action label (on/off) on the right of the toggle
+ .ms-Label {
+ position: relative;
+ top: -2px;
+ padding: 0 0 0 50px;
+ }
+
+ // 'Off' state - slider on the left
+ & .ms-Toggle-field {
+ @include ms-Toggle-slider(left);
+
+ // Show the off label / hide the on label
+ .ms-Label--off {
+ display: block;
+ }
+
+ .ms-Label--on {
+ display: none;
+ }
+ }
+
+ // 'On' state - slider on the right
+ & .ms-Toggle-field.is-selected {
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+
+ @include ms-Toggle-slider(right);
+
+ // Show the on label / hide the off label
+ .ms-Label--off {
+ display: none;
+ }
+
+ .ms-Label--on {
+ display: block;
+ }
+
+ @media screen and (-ms-high-contrast: active) {
+ background-color: $ms-color-white;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ background-color: $ms-color-black;
+ }
+ }
+
+ &:focus,
+ &:hover {
+ & + .ms-Toggle-field {
+ border-color: $ms-color-neutralSecondary;
+ }
+
+ & + .ms-Toggle-field::before {
+ background-color: $ms-color-neutralPrimary;
+ }
+
+ &:checked + .ms-Toggle-field {
+ background-color: $ms-color-themeDarkAlt;
+ border-color: $ms-color-themeDarkAlt;
+ }
+
+ &:checked + .ms-Toggle-field::before {
+ background-color: $ms-color-white;
+ }
+ }
+
+ &:active {
+ &:checked + .ms-Toggle-field {
+ background-color: $ms-color-themeDark;
+ border-color: $ms-color-themeDark;
+ }
+ }
+
+ .ms-Toggle-field {
+ &:focus,
+ &:hover {
+ border-color: $ms-color-neutralPrimary;
+ }
+
+ &.is-selected {
+ &:focus,
+ &:hover {
+ background-color: $ms-color-themeDarkAlt;
+ border-color: $ms-color-themeDarkAlt;
+ }
+ }
+
+ .ms-Label {
+ color: $ms-color-black;
+ user-select: none;
+ }
+
+ &:hover {
+ .ms-Label {
+ color: $ms-color-black;
+ }
+ }
+
+ &:active {
+ .ms-Label {
+ color: $ms-color-neutralPrimary;
+ }
+ }
+ }
+
+ // Disabled state
+ &.is-disabled {
+ .ms-Label {
+ @include ms-Label-is-disabled;
+ }
+
+ .ms-Toggle-field {
+ background-color: $ms-color-white;
+ border-color: $ms-color-neutralTertiaryAlt;
+ pointer-events: none;
+ cursor: default;
+
+ &::before {
+ background-color: $ms-color-neutralTertiaryAlt;
+ }
+ }
+
+ .ms-Toggle-field,
+ .ms-Toggle-field::before {
+ @media screen and (-ms-high-contrast: active) {
+ border-color: $ms-color-contrastBlackDisabled;
+ }
+
+ @media screen and (-ms-high-contrast: black-on-white) {
+ border-color: $ms-color-contrastWhiteDisabled;
+ }
+ }
+ }
+}
+
+// Description text
+.ms-Toggle-description {
+ position: relative;
+ font-size: $ms-font-size-m;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+// Toggle input field
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 45px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2px solid $ms-color-neutralTertiary;
+ border-radius: 20px;
+ cursor: pointer;
+ transition-property: background, left, border-color;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+ outline: 0;
+
+ &:hover,
+ &:focus {
+ border-color: $ms-color-neutralSecondary;
+ }
+}
+
+// On/Off slide states
+.ms-Toggle-input {
+ display: none;
+}
+
+//== Modifier: Toggle with description text left
+//
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+
+ .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+ }
+
+ .ms-Toggle-field {
+ float: right;
+ }
+}
diff --git a/dist/css/fabric.components.css b/dist/css/fabric.components.css
new file mode 100644
index 00000000..7d0244aa
--- /dev/null
+++ b/dist/css/fabric.components.css
@@ -0,0 +1,6190 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+.ms-Breadcrumb {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ margin: 23px 0 1px;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 12px;
+ color: #666666;
+ vertical-align: top;
+ margin: 11px 7px;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ display: inline-block;
+ color: #0078d7;
+ padding: 8px;
+ cursor: pointer;
+ vertical-align: top;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+ margin-right: -2px;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu::before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: #ffffff;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: 0;
+ box-shadow: none;
+ position: relative;
+ width: 190px;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open {
+ margin-bottom: 0;
+}
+
+.ms-Breadcrumb-itemLink,
+.ms-Breadcrumb-overflowButton {
+ text-decoration: none;
+ outline: transparent;
+}
+
+.ms-Breadcrumb-itemLink:hover,
+.ms-Breadcrumb-overflowButton:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-itemLink:focus,
+.ms-Breadcrumb-overflowButton:focus {
+ outline: #767676 solid 1px;
+ color: #000000;
+}
+
+.ms-Breadcrumb-itemLink:active,
+.ms-Breadcrumb-overflowButton:active {
+ outline: transparent;
+ background-color: #c8c8c8;
+}
+
+.ms-Breadcrumb-itemLink {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ vertical-align: top;
+}
+
+@media screen and (max-width: 639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 10px;
+ margin: 8px 5px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ padding: 5px 4px;
+ }
+}
+
+@media screen and (max-width: 479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin: 5px 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding: 2px 4px;
+ }
+}
+
+.ms-Button {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button.is-hidden {
+ display: none;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Button:hover {
+ color: #1aebff;
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Button:hover {
+ color: #37006e;
+ border-color: #37006e;
+ }
+}
+
+.ms-Button:focus {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button:active .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button:disabled,
+.ms-Button.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ cursor: default;
+}
+
+.ms-Button:disabled .ms-Button-label,
+.ms-Button.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button:disabled:hover,
+.ms-Button:disabled:focus,
+.ms-Button.is-disabled:hover,
+.ms-Button.is-disabled:focus {
+ outline: 0;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-weight: 600;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: transparent;
+ border: 0;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ margin-right: 4px;
+ position: relative;
+ top: 1px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ font-size: 12px;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-size: 21px;
+ font-weight: 100;
+ position: relative;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ border: 1px solid #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ border: 1px solid #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ border: 1px solid #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ display: block;
+ height: auto;
+ max-width: 280px;
+ min-height: 72px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-weight: 600;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-weight: 400;
+ font-size: 12px;
+ position: relative;
+ text-align: left;
+ top: 3px;
+}
+
+.ms-Button.ms-Button--compound:hover .ms-Button-description {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--compound:focus {
+ border-color: #0078d7;
+ background-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--compound:focus .ms-Button-label {
+ color: #333333;
+}
+
+.ms-Button.ms-Button--compound:focus .ms-Button-description {
+ color: #666666;
+}
+
+.ms-Button.ms-Button--compound:active {
+ background-color: #0078d7;
+}
+
+.ms-Button.ms-Button--compound:active .ms-Button-description,
+.ms-Button.ms-Button--compound:active .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--compound:disabled .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled .ms-Button-description {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound:disabled:focus,
+.ms-Button.ms-Button--compound:disabled:active,
+.ms-Button.ms-Button--compound.is-disabled:focus,
+.ms-Button.ms-Button--compound.is-disabled:active {
+ border-color: #f4f4f4;
+ background-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,
+.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description {
+ color: #a6a6a6;
+}
+
+.ms-Callout {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ width: 288px;
+}
+
+.ms-Callout.is-hidden {
+ display: none;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding-top: 24px;
+ padding-bottom: 12px;
+ padding-left: 28px;
+ padding-right: 28px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-weight: 300;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-weight: 300;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: #666666;
+ z-index: 110;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+}
+
+.ms-Callout-inner {
+ height: 100%;
+ padding-top: 0;
+ padding-bottom: 12px;
+ padding-left: 28px;
+ padding-right: 28px;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline {
+ height: 27px;
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button {
+ height: 27px;
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label {
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon {
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button,
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button {
+ color: #0078d7;
+}
+
+.ms-Callout-actions .ms-Callout-button {
+ margin-right: 12px;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-weight: 100;
+ font-size: 28px;
+ color: #ffffff;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-inner {
+ padding-top: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-subText {
+ font-size: 14px;
+}
+
+.ms-Callout.ms-Callout--actionText .ms-Callout-actions {
+ border-top: 1px solid #eaeaea;
+ padding-top: 12px;
+}
+
+.ms-Callout.ms-Callout--actionText .ms-Callout-inner {
+ padding-bottom: 12px;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-header {
+ padding-bottom: 0;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-title {
+ font-size: 14px;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-actions {
+ margin-top: 12px;
+ margin-bottom: -4px;
+}
+
+.ms-CheckBox {
+ box-sizing: border-box;
+ color: #333333;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-CheckBox .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.ms-CheckBox-input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ms-CheckBox-field::before {
+ content: '';
+ display: inline-block;
+ border: 2px solid #a6a6a6;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ font-weight: normal;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: background, border, border-color;
+ transition-duration: 200ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+.ms-CheckBox-field::after {
+ content: '\E73E';
+ font-family: 'FabricMDL2Icons';
+ display: none;
+ position: absolute;
+ font-weight: 900;
+ background-color: transparent;
+ font-size: 13px;
+ top: 0;
+ color: #ffffff;
+ line-height: 20px;
+ width: 20px;
+ text-align: center;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field::after {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field::after {
+ color: #ffffff;
+ }
+}
+
+.ms-CheckBox-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+}
+
+.ms-CheckBox-field:hover::before,
+.ms-CheckBox-field:focus::before {
+ border-color: #767676;
+}
+
+.ms-CheckBox-field:hover .ms-Label,
+.ms-CheckBox-field:focus .ms-Label {
+ color: #000000;
+}
+
+.ms-CheckBox-field.is-disabled {
+ cursor: default;
+}
+
+.ms-CheckBox-field.is-disabled::before {
+ background-color: #c8c8c8;
+ border-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-disabled::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-disabled::before {
+ border-color: #600000;
+ }
+}
+
+.ms-CheckBox-field.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-CheckBox-field.in-focus::before {
+ border-color: #767676;
+}
+
+.ms-CheckBox-field.in-focus.is-disabled::before {
+ border-color: #c8c8c8;
+}
+
+.ms-CheckBox-field.in-focus.is-checked::before {
+ border-color: #106ebe;
+}
+
+.ms-CheckBox-field.is-checked::before {
+ border: 10px solid #0078d7;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-checked::before {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-checked::before {
+ border-color: #37006e;
+ }
+}
+
+.ms-CheckBox-field.is-checked::after {
+ display: block;
+}
+
+.ms-CheckBox-field.is-checked:hover::before,
+.ms-CheckBox-field.is-checked:focus::before {
+ border-color: #106ebe;
+}
+
+.ms-RadioButton {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-RadioButton .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.ms-RadioButton-input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ms-RadioButton-field::before {
+ content: '';
+ display: inline-block;
+ border: 2px solid #a6a6a6;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ font-weight: normal;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: border-color;
+ transition-duration: 200ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ border-radius: 50%;
+}
+
+.ms-RadioButton-field::after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ bottom: 0;
+ right: 0;
+ transition-property: top, left, width, height;
+ transition-duration: 150ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field::after {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field::after {
+ color: #600000;
+ }
+}
+
+.ms-RadioButton-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+}
+
+.ms-RadioButton-field:hover::before,
+.ms-RadioButton-field:focus::before {
+ border-color: #767676;
+}
+
+.ms-RadioButton-field:hover .ms-Label,
+.ms-RadioButton-field:focus .ms-Label {
+ color: #000000;
+}
+
+.ms-RadioButton-field.is-disabled {
+ cursor: default;
+}
+
+.ms-RadioButton-field.is-disabled::before {
+ background-color: #c8c8c8;
+ border-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-disabled::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-disabled::before {
+ border-color: #600000;
+ }
+}
+
+.ms-RadioButton-field.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-RadioButton-field.is-disabled:hover::before,
+.ms-RadioButton-field.is-disabled:focus::before {
+ border-color: #c8c8c8;
+}
+
+.ms-RadioButton-field.in-focus::before {
+ border-color: #767676;
+}
+
+.ms-RadioButton-field.is-checked::before {
+ border: 2px solid #0078d7;
+ background-color: transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-checked::before {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-checked::before {
+ border-color: #37006e;
+ }
+}
+
+.ms-RadioButton-field.is-checked::after {
+ background-color: #0078d7;
+ top: 5px;
+ left: 5px;
+ width: 10px;
+ height: 10px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-checked::after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-checked::after {
+ background-color: #37006e;
+ }
+}
+
+.ms-RadioButton-field.is-checked:hover::before,
+.ms-RadioButton-field.is-checked:focus::before {
+ border-color: #0078d7;
+}
+
+.ms-RadioButton-field.is-checked.in-focus::before {
+ border-color: #0078d7;
+}
+
+.ms-ChoiceFieldGroup {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ margin-bottom: 4px;
+}
+
+.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list {
+ padding: 0;
+ margin: 0;
+}
+
+.ms-CommandBar {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: #f4f4f4;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar .ms-CommandButton--actionButton {
+ border-right: 1px solid #eaeaea;
+}
+
+.ms-CommandBar .ms-Button {
+ height: 100%;
+}
+
+.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon {
+ padding-right: 0;
+}
+
+.ms-CommandBar .ms-Button.is-hidden {
+ display: none;
+}
+
+.ms-CommandBar .ms-SearchBox,
+.ms-CommandBar .ms-SearchBox-field,
+.ms-CommandBar .ms-SearchBox-label {
+ height: 100%;
+}
+
+.ms-CommandBar .ms-SearchBox {
+ display: inline-block;
+ vertical-align: top;
+ transition: margin-right 0.267s;
+}
+
+.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 220px;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ z-index: 10;
+ }
+}
+
+.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button {
+ font-size: 18px;
+ padding: 0 11px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar .ms-SearchBox {
+ margin-right: 24px;
+ }
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandBar {
+ height: 44px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar.search-expanded .ms-SearchBox {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ transition: none;
+ }
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ height: 100%;
+ overflow: hidden;
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 4px;
+ height: 100%;
+}
+
+.ms-CommandBar-sideCommands .ms-Button:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 20px;
+ }
+}
+
+.ms-CommandButton {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ position: relative;
+ vertical-align: top;
+}
+
+.ms-CommandButton.is-hidden {
+ display: none;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button,
+.ms-CommandButton.is-disabled .ms-CommandButton-button {
+ cursor: default;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button:hover,
+.ms-CommandButton.is-disabled .ms-CommandButton-button:hover {
+ background-color: #eff6fc;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label,
+.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label {
+ color: #a6a6a6;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,
+.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon {
+ color: #a6a6a6;
+}
+
+.ms-CommandButton .ms-ContextualMenu {
+ display: none;
+}
+
+.ms-CommandButton-button,
+.ms-CommandButton-splitIcon {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ cursor: pointer;
+ display: inline-block;
+ height: 40px;
+ line-height: 40px;
+ outline: 1px solid transparent;
+ padding: 0 8px;
+ position: relative;
+ vertical-align: top;
+ background: transparent;
+}
+
+.ms-CommandButton-button:hover,
+.ms-CommandButton-splitIcon:hover {
+ background-color: #eaeaea;
+}
+
+.ms-CommandButton-button:hover .ms-CommandButton-label,
+.ms-CommandButton-splitIcon:hover .ms-CommandButton-label {
+ color: #212121;
+}
+
+.ms-CommandButton-button:active,
+.ms-CommandButton-splitIcon:active {
+ background-color: #eaeaea;
+}
+
+.ms-CommandButton-button:focus::before,
+.ms-CommandButton-splitIcon:focus::before {
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid #333333;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+.ms-CommandButton-button:focus,
+.ms-CommandButton-splitIcon:focus {
+ outline: 0;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton-button,
+ .ms-CommandButton-splitIcon {
+ height: 44px;
+ }
+
+ .ms-CommandButton-button .ms-CommandButton-icon,
+ .ms-CommandButton-splitIcon .ms-CommandButton-icon {
+ font-size: 20px;
+ }
+
+ .ms-CommandButton-button .ms-CommandButton-label,
+ .ms-CommandButton-splitIcon .ms-CommandButton-label {
+ line-height: 44px;
+ }
+}
+
+.ms-CommandButton-button {
+ border: 0;
+ margin: 0;
+}
+
+.ms-CommandButton + .ms-CommandButton {
+ margin-left: 8px;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton + .ms-CommandButton {
+ margin-left: 4px;
+ }
+}
+
+.ms-CommandButton-icon {
+ display: inline-block;
+ margin-right: 8px;
+ position: relative;
+ font-size: 16px;
+ min-width: 16px;
+ height: 100%;
+}
+
+.ms-CommandButton-icon .ms-Icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+.ms-CommandButton-label {
+ font-size: 14px;
+ font-weight: 400;
+ color: #333333;
+ line-height: 40px;
+ height: 100%;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-CommandButton-label:hover {
+ color: #212121;
+}
+
+.ms-CommandButton-dropdownIcon,
+.ms-CommandButton-splitIcon {
+ display: inline-block;
+ position: relative;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 300;
+ min-width: 12px;
+ height: 100%;
+ vertical-align: top;
+ margin-left: 8px;
+}
+
+.ms-CommandButton-dropdownIcon .ms-Icon,
+.ms-CommandButton-splitIcon .ms-Icon {
+ line-height: normal;
+ padding-top: 16px;
+}
+
+.ms-CommandButton-dropdownIcon:focus::before,
+.ms-CommandButton-splitIcon:focus::before {
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid #333333;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton-dropdownIcon,
+ .ms-CommandButton-splitIcon {
+ display: none;
+ }
+}
+
+.ms-CommandButton-splitIcon {
+ margin-left: -2px;
+ width: 27px;
+ border: 0;
+}
+
+.ms-CommandButton-splitIcon .ms-Icon {
+ margin-left: -1px;
+ position: relative;
+ padding-top: 16px;
+}
+
+.ms-CommandButton-splitIcon .ms-Icon::after {
+ position: absolute;
+ content: ' ';
+ width: 1px;
+ height: 16px;
+ top: 12px;
+ left: -8px;
+ border-left: 1px solid #c8c8c8;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon {
+ margin-right: 0;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label {
+ display: none;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button {
+ padding: 0 12px;
+}
+
+.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button {
+ background: none;
+}
+
+.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button {
+ width: 50px;
+ height: 40px;
+}
+
+.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 16px;
+ height: 16px;
+ padding-right: 0;
+}
+
+.ms-CommandButton.ms-CommandButton--pivot.is-active::before {
+ content: '';
+ height: 2px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ background-color: #0078d7;
+ bottom: 0;
+ z-index: 5;
+}
+
+.ms-CommandButton.ms-CommandButton--pivot:hover::before {
+ content: '';
+ height: 2px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ background-color: #0078d7;
+ bottom: 0;
+ z-index: 5;
+}
+
+.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label,
+.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label {
+ display: inline-block;
+}
+
+@media only screen and (max-width: 479px) {
+ .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label,
+ .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label {
+ font-size: 16px;
+ }
+}
+
+.ms-ContextualMenu {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ display: block;
+ min-width: 180px;
+ max-width: 220px;
+ list-style-type: none;
+ position: relative;
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.is-hidden {
+ display: none;
+}
+
+.ms-ContextualMenu-item {
+ position: relative;
+}
+
+.ms-ContextualMenu-link {
+ box-sizing: border-box;
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ overflow: hidden;
+ line-height: 34px;
+ padding: 0 16px 0 25px;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #f4f4f4;
+ color: #212121;
+}
+
+.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon {
+ color: #212121;
+}
+
+.ms-ContextualMenu-link:focus {
+ outline: transparent;
+ border: 1px solid #666666;
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #dadada;
+ color: #000000;
+ font-weight: 600;
+}
+
+.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon {
+ color: #000000;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #d0d0d0;
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ background-color: #ffffff;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+.ms-ContextualMenu-link.is-disabled .ms-Icon {
+ color: #a6a6a6;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 36px;
+ line-height: 36px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #333333;
+ font-size: 8px;
+ font-weight: 600;
+ width: 24px;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 16px 0 26px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+ font-weight: 600;
+ color: #333333;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ color: #333333;
+ content: '\E73E';
+ font-size: 10px;
+ font-weight: 800;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ left: 7px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus {
+ color: #212121;
+ background-color: #f4f4f4;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover::after,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus::after {
+ color: #212121;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active {
+ color: #000000;
+ background-color: #d0d0d0;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active::after {
+ color: #000000;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link,
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link {
+ padding-left: 40px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon,
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon {
+ position: absolute;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ width: 40px;
+ text-align: center;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons {
+ width: 220px;
+}
+
+.ms-DatePicker {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 17px;
+ z-index: 300;
+}
+
+.ms-DatePicker .ms-TextField {
+ position: relative;
+}
+
+.ms-DatePicker-picker {
+ color: #000000;
+ font-size: 14px;
+ position: relative;
+ text-align: left;
+ z-index: 0;
+}
+
+.ms-DatePicker-event {
+ color: #666666;
+ font-size: 21px;
+ line-height: 20px;
+ pointer-events: none;
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ z-index: 5;
+}
+
+.ms-DatePicker-holder {
+ -webkit-overflow-scrolling: touch;
+ box-sizing: border-box;
+ background: #ffffff;
+ position: absolute;
+ min-width: 300px;
+ display: none;
+}
+
+.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+ box-sizing: border-box;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ border: 1px solid #eaeaea;
+ display: block;
+}
+
+.ms-DatePicker-picker--opened {
+ position: relative;
+ z-index: 10;
+}
+
+.ms-DatePicker-frame {
+ padding: 1px;
+}
+
+.ms-DatePicker-wrap {
+ margin: -1px;
+ padding: 9px;
+}
+
+.ms-DatePicker-dayPicker {
+ display: block;
+ margin-bottom: 30px;
+}
+
+.ms-DatePicker-header {
+ height: 40px;
+ line-height: 44px;
+}
+
+.ms-DatePicker-month,
+.ms-DatePicker-year {
+ display: inline-block;
+ font-weight: 100;
+ font-size: 21px;
+ color: #0078d7;
+ margin-top: -1px;
+}
+
+.ms-DatePicker-month:hover,
+.ms-DatePicker-year:hover {
+ color: #005a9e;
+ cursor: pointer;
+}
+
+.ms-DatePicker-month {
+ margin-left: 15px;
+}
+
+.ms-DatePicker-year {
+ margin-left: 5px;
+}
+
+.ms-DatePicker-table {
+ text-align: center;
+ border-collapse: collapse;
+ border-spacing: 0;
+ table-layout: fixed;
+ font-size: inherit;
+}
+
+.ms-DatePicker-table td {
+ margin: 0;
+ padding: 0;
+}
+
+.ms-DatePicker-table td:hover {
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-day,
+.ms-DatePicker-weekday {
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ line-height: 40px;
+ font-weight: 400;
+ font-size: 15px;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #b3d6f2;
+}
+
+.ms-DatePicker-day--disabled::before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-weight: 400;
+}
+
+.ms-DatePicker-day--infocus:hover,
+.ms-DatePicker-day--outfocus:hover {
+ cursor: pointer;
+ color: #000000;
+ background: #eaeaea;
+}
+
+.ms-DatePicker-day--highlighted:hover,
+.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
+ cursor: pointer;
+ color: #ffffff;
+ background: #0078d7;
+}
+
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
+ background: #a6a6a6;
+}
+
+.ms-DatePicker-monthPicker,
+.ms-DatePicker-yearPicker {
+ display: none;
+}
+
+.ms-DatePicker-monthComponents {
+ position: absolute;
+ top: 9px;
+ right: 9px;
+ left: 9px;
+}
+
+.ms-DatePicker-yearComponents,
+.ms-DatePicker-decadeComponents {
+ position: absolute;
+ right: 10px;
+}
+
+.ms-DatePicker-prevMonth,
+.ms-DatePicker-nextMonth,
+.ms-DatePicker-prevYear,
+.ms-DatePicker-nextYear,
+.ms-DatePicker-prevDecade,
+.ms-DatePicker-nextDecade {
+ width: 40px;
+ height: 40px;
+ display: block;
+ float: right;
+ margin-left: 10px;
+ text-align: center;
+ line-height: 40px;
+ font-size: 21px;
+ color: #666666;
+ position: relative;
+ top: 3px;
+}
+
+.ms-DatePicker-prevMonth:hover,
+.ms-DatePicker-nextMonth:hover,
+.ms-DatePicker-prevYear:hover,
+.ms-DatePicker-nextYear:hover,
+.ms-DatePicker-prevDecade:hover,
+.ms-DatePicker-nextDecade:hover {
+ color: #212121;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-headerToggleView {
+ height: 40px;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: 300;
+ font-size: 21px;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 15px;
+}
+
+.ms-DatePicker-currentYear {
+ color: #0078d7;
+}
+
+.ms-DatePicker-currentYear:hover {
+ color: #005a9e;
+ cursor: pointer;
+}
+
+.ms-DatePicker-optionGrid {
+ position: relative;
+ height: 210px;
+ width: 280px;
+ margin: 10px 0 30px 5px;
+}
+
+.ms-DatePicker-monthOption,
+.ms-DatePicker-yearOption {
+ background-color: #f4f4f4;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ cursor: pointer;
+ float: left;
+ margin: 0 10px 10px 0;
+ font-weight: 400;
+ font-size: 13px;
+ color: #333333;
+ text-align: center;
+}
+
+.ms-DatePicker-monthOption:hover,
+.ms-DatePicker-yearOption:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-monthOption.is-highlighted,
+.ms-DatePicker-yearOption.is-highlighted {
+ background-color: #333333;
+ color: #ffffff;
+}
+
+.ms-DatePicker-goToday {
+ bottom: 9px;
+ color: #0078d7;
+ cursor: pointer;
+ font-weight: 300;
+ font-size: 13px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ position: absolute;
+ right: 9px;
+}
+
+.ms-DatePicker-goToday:hover {
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: none;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+}
+
+@media (min-width: 460px) {
+ .ms-DatePicker-holder {
+ width: 440px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-weight: 300;
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-right: 1px solid #eaeaea;
+ width: 220px;
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-weight: 600;
+ font-size: 12px;
+ }
+
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-prevYear,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-nextDecade {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+ .ms-DatePicker-currentYear,
+ .ms-DatePicker-currentDecade {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 10px 10px 0;
+ }
+
+ .ms-DatePicker-monthOption:hover,
+ .ms-DatePicker-yearOption:hover {
+ outline: 1px solid transparent;
+ }
+
+ .ms-DatePicker-goToday {
+ box-sizing: border-box;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ right: 10px;
+ text-align: right;
+ top: 199px;
+ width: 210px;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+ }
+}
+
+@media (max-width: 459px) {
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
+ display: block;
+ }
+}
+
+.ms-DetailsList {
+ position: relative;
+}
+
+.ms-DetailsList.is-horizontalConstrained {
+ overflow-x: auto;
+ overflow-y: inherit;
+}
+
+.ms-DetailsList-cell {
+ word-break: break-word;
+}
+
+.ms-DetailsHeader {
+ display: inline-block;
+ min-width: 100%;
+ height: 36px;
+ line-height: 36px;
+ white-space: nowrap;
+ padding-bottom: 1px;
+ border-bottom: 1px solid #eaeaea;
+ margin-bottom: 1px;
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-DetailsHeader.is-singleSelect {
+ padding-left: 40px;
+}
+
+.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover {
+ background: transparent;
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ cursor: col-resize;
+}
+
+.ms-DetailsHeader-cell.is-check .ms-Check-circle {
+ visibility: hidden;
+}
+
+.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,
+.ms-DetailsHeader.is-allSelected .ms-Check-circle {
+ visibility: visible;
+}
+
+.ms-DetailsHeader-cellWrapper {
+ display: inline-block;
+ position: relative;
+}
+
+.ms-DetailsHeader-cellSizeWrapper {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 16px;
+}
+
+.ms-DetailsHeader-cellSizeWrapper:last-child {
+ margin-right: 0;
+}
+
+.ms-DetailsHeader-filterChevron.ms-Icon {
+ color: #a6a6a6;
+ padding-left: 4px;
+ vertical-align: middle;
+}
+
+.ms-DetailsHeader-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ color: #a6a6a6;
+ border: 0;
+ background: none;
+ line-height: inherit;
+ margin: 0;
+ font-size: inherit;
+ font-family: inherit;
+ text-align: left;
+ height: 36px;
+ vertical-align: top;
+}
+
+.ms-DetailsHeader-cell.is-check {
+ position: relative;
+ padding: 8px 10px;
+ margin: 0;
+}
+
+.ms-DetailsHeader-cell:focus {
+ outline: transparent;
+}
+
+.ms-DetailsHeader-cell.is-sortable {
+ color: #000000;
+ cursor: default;
+}
+
+.ms-DetailsHeader-cell.is-sortable:hover {
+ background-color: #eaeaea;
+}
+
+.ms-DetailsHeader-cell.is-filter {
+ position: absolute;
+ right: 0;
+ width: 20px;
+ top: 0;
+ bottom: 0;
+ padding: 0;
+ text-align: center;
+ color: #000000;
+}
+
+.ms-DetailsHeader-cell.is-filter:hover {
+ background-color: #eaeaea;
+}
+
+.ms-DetailsHeader-cell.is-filter::before {
+ content: '';
+ position: absolute;
+ border-left: 1px solid #a6a6a6;
+ top: 10px;
+ bottom: 10px;
+ left: 0;
+}
+
+.ms-DetailsHeader-cell.is-sizer {
+ position: absolute;
+ width: 16px;
+ cursor: col-resize;
+ bottom: 0;
+ top: 0;
+ height: inherit;
+ z-index: 99;
+}
+
+.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow {
+ display: inline;
+}
+
+.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow {
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-DetailsHeader-cell.is-resizing.is-sizer::after,
+.ms-DetailsHeader-cell.is-sizer:hover::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background: #eaeaea;
+ border: 1px solid #ffffff;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before,
+.ms-DetailsHeader-cell:focus::before {
+ content: '';
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #a6a6a6;
+}
+
+.ms-DetailsHeader-sortArrow.ms-Icon {
+ font-size: 12px;
+ margin-right: 4px;
+ display: none;
+ color: #a6a6a6;
+}
+
+.ms-DetailsRow {
+ position: relative;
+ display: inline-block;
+ min-width: 100%;
+ min-height: 36px;
+ vertical-align: top;
+ white-space: nowrap;
+ padding: 10px 0;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+ box-sizing: border-box;
+}
+
+.ms-DetailsRow:focus {
+ outline: transparent;
+}
+
+.ms-DetailsRow.ms-DetailsRow.is-selected {
+ background: #deecf9;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover,
+.ms-DetailsRow:hover {
+ background: #eff6fc;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover,
+.ms-DetailsRow.is-selected:hover {
+ background: #b3d6f2;
+}
+
+.ms-DetailsRow-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ vertical-align: top;
+ white-space: normal;
+ word-break: break-word;
+ margin-right: 16px;
+}
+
+.ms-DetailsRow-cell.is-clipped {
+ overflow: hidden;
+}
+
+.ms-DetailsRow-cell:last-child {
+ margin-right: 0;
+}
+
+.ms-DetailsRow-cellIcon {
+ display: inline-block;
+ margin-right: 6px;
+ position: relative;
+ bottom: -2px;
+}
+
+.ms-DetailsRow-check {
+ display: inline-block;
+ cursor: default;
+ padding: 10px;
+ margin: -10px 0;
+ box-sizing: border-box;
+ vertical-align: top;
+ background: none;
+ border: 0;
+ visibility: hidden;
+}
+
+.ms-DetailsRow-check:focus {
+ outline: transparent;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-DetailsRow.is-selected .ms-DetailsRow-check {
+ visibility: visible;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox,
+.ms-DetailsRow:focus .ms-DetailsRow-focusBox {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border: 1px solid #a6a6a6;
+}
+
+.ms-DetailsRow-cellMeasurer {
+ position: absolute;
+ visibility: hidden;
+ white-space: nowrap;
+ top: -1000000000;
+}
+
+.ms-Check {
+ display: inline-block;
+ cursor: default;
+ line-height: 0;
+ vertical-align: top;
+}
+
+.ms-Check.is-checked .ms-Check-circle {
+ fill: #0078d7;
+ stroke: #ffffff;
+ stroke-width: 1px;
+}
+
+.ms-Check.is-checked .ms-Check-check {
+ stroke: #ffffff;
+}
+
+.ms-Check-circle {
+ fill: #ffffff;
+ stroke: #c8c8c8;
+}
+
+.ms-Check-check {
+ stroke: #c8c8c8;
+}
+
+.ms-Dialog {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ height: auto;
+ min-width: 220px;
+ max-width: 340px;
+ padding: 28px 24px;
+ z-index: 10;
+ position: fixed;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ left: 50%;
+ top: 50%;
+}
+
+.ms-Dialog.is-open {
+ display: block;
+}
+
+.ms-Dialog-title {
+ font-size: 21px;
+ font-weight: 100;
+ margin-bottom: 24px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+}
+
+.ms-Dialog-subText {
+ color: #333333;
+ font-size: 12px;
+ font-weight: 300;
+ line-height: 1.5;
+}
+
+.ms-Dialog-actions {
+ margin-top: 24px;
+ text-align: right;
+}
+
+.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 28px;
+ font-weight: 100;
+ padding: 28px 24px;
+ margin-top: -28px;
+ margin-left: -24px;
+ margin-right: -24px;
+}
+
+.ms-Dialog-buttonClose {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ margin: 0;
+ padding: 4px;
+ position: absolute;
+ right: 12px;
+ top: 12px;
+ z-index: 10;
+}
+
+.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title {
+ margin-right: 20px;
+}
+
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose {
+ display: block;
+}
+
+@media (min-width: 480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
+
+.ms-Dropdown {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 10px;
+ position: relative;
+ outline: 0;
+}
+
+.ms-Dropdown:hover .ms-Dropdown-title,
+.ms-Dropdown:hover .ms-Dropdown-caretDown,
+.ms-Dropdown:focus .ms-Dropdown-title,
+.ms-Dropdown:focus .ms-Dropdown-caretDown,
+.ms-Dropdown:active .ms-Dropdown-title,
+.ms-Dropdown:active .ms-Dropdown-caretDown {
+ color: #000000;
+}
+
+.ms-Dropdown:hover .ms-Dropdown-title,
+.ms-Dropdown:active .ms-Dropdown-title {
+ border-color: #767676;
+}
+
+.ms-Dropdown:focus .ms-Dropdown-title {
+ border-color: #0078d7;
+}
+
+.ms-Dropdown .ms-Label {
+ display: inline-block;
+ margin-bottom: 8px;
+}
+
+.ms-Dropdown.is-disabled .ms-Dropdown-title {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ color: #a6a6a6;
+ cursor: default;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-title {
+ border-color: #00ff00;
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-title {
+ border-color: #600000;
+ color: #600000;
+ }
+}
+
+.ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #600000;
+ }
+}
+
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: absolute;
+}
+
+.ms-Panel .ms-Dropdown-items {
+ box-shadow: none;
+ overflow-y: auto;
+ padding-top: 4px;
+ max-height: 100%;
+}
+
+.ms-Panel .ms-Dropdown-items .ms-Dropdown-item {
+ padding: 7px 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Panel .ms-Dropdown-items::before {
+ content: none;
+ border: 0;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #212121;
+ font-size: 12px;
+ position: absolute;
+ right: 13px;
+ bottom: 9px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ padding: 5px 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-title.ms-Dropdown-truncator {
+ height: auto;
+ display: block;
+ position: absolute;
+ visibility: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ z-index: 400;
+ overflow-y: scroll;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+}
+
+.ms-Dropdown-items::before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ padding: 7px 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #b3d6f2;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #b3d6f2;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-FacePile {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-FacePile .ms-FacePile-personaCardHost {
+ display: none;
+}
+
+.ms-FacePile-addButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 32px;
+ width: 32px;
+ line-height: 32px;
+ text-align: center;
+ float: left;
+ padding: 0;
+ margin-right: 4px;
+ outline: transparent;
+ border-radius: 50%;
+ vertical-align: top;
+}
+
+.ms-FacePile-addButton .ms-Persona-presence,
+.ms-FacePile-addButton .ms-Persona-details {
+ display: none;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover,
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus {
+ background-color: #005a9e;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active {
+ display: block;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover {
+ color: #212121;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled {
+ color: #c8c8c8;
+}
+
+.ms-FacePile-addPersonIcon {
+ position: relative;
+ top: -1px;
+}
+
+.ms-FacePile-overflowText {
+ font-size: 14px;
+}
+
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction {
+ display: none;
+}
+
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Link {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+ outline: none;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+.ms-List {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ list-style-type: none;
+}
+
+.ms-ListItem {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ padding: 9px 28px 3px;
+ position: relative;
+ display: block;
+}
+
+.ms-ListItem::before,
+.ms-ListItem::after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-ListItem::after {
+ clear: both;
+}
+
+.ms-ListItem-primaryText,
+.ms-ListItem-secondaryText,
+.ms-ListItem-tertiaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+}
+
+.ms-ListItem-primaryText {
+ color: #212121;
+ font-weight: 300;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-weight: 300;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-weight: 300;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+ background-color: #333333;
+}
+
+.ms-ListItem-selectionTarget {
+ display: none;
+}
+
+.ms-ListItem-actions {
+ max-width: 80px;
+ position: absolute;
+ right: 30px;
+ text-align: right;
+ top: 10px;
+}
+
+.ms-ListItem-action {
+ color: #a6a6a6;
+ display: inline-block;
+ font-size: 15px;
+ position: relative;
+ text-align: center;
+ top: 3px;
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+}
+
+.ms-ListItem-action .ms-Icon {
+ vertical-align: top;
+}
+
+.ms-ListItem-action:hover {
+ color: #666666;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-unread {
+ border-left: 3px solid #0078d7;
+ padding-left: 27px;
+}
+
+.ms-ListItem.is-unread .ms-ListItem-secondaryText,
+.ms-ListItem.is-unread .ms-ListItem-metaText {
+ color: #0078d7;
+ font-weight: 600;
+}
+
+.ms-ListItem.is-unseen::after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover::before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ position: absolute;
+ top: 14px;
+ left: 7px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected::before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected::before,
+.ms-ListItem.is-selected:hover::before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\e73A';
+ font-size: 17px;
+ color: #767676;
+ position: absolute;
+ top: 23px;
+ left: 7px;
+ border: 0;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #b3d6f2;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-weight: 400;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-MessageBanner {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: 0;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-close {
+ position: absolute;
+ right: 0;
+ top: 0;
+ line-height: 52px;
+ color: #666666;
+}
+
+.ms-MessageBanner-text {
+ display: inline-block;
+ padding: 18px 0;
+ margin-left: 0;
+ max-width: 770px;
+ overflow: hidden;
+ text-align: left;
+}
+
+.ms-MessageBanner-expand {
+ display: none;
+ vertical-align: top;
+}
+
+.ms-MessageBanner-expand.is-visible {
+ display: inline-block;
+}
+
+.ms-MessageBanner-action {
+ display: inline-block;
+ vertical-align: top;
+ margin-top: 10px;
+ margin-left: 10px;
+ padding-right: 36px;
+}
+
+.ms-MessageBanner-action .ms-Button {
+ color: #ffffff;
+}
+
+.ms-MessageBanner-clipper {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-MessageBanner.is-expanded {
+ height: auto;
+}
+
+.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper {
+ white-space: normal;
+}
+
+@media screen and (max-width: 479px) {
+ .ms-MessageBanner-action {
+ margin: 0;
+ display: block;
+ text-align: right;
+ padding: 0 10px 10px 0;
+ }
+
+ .ms-MessageBanner-text {
+ margin-left: -25px;
+ padding: 18px 0 10px;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ display: inline-block;
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
+
+.ms-ContextualHost {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ z-index: 10;
+ margin: 16px auto;
+ position: relative;
+ min-width: 10px;
+ display: none;
+ background-color: #ffffff;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.ms-ContextualHost.is-positioned {
+ position: absolute;
+ margin: 0;
+}
+
+.ms-ContextualHost.is-open {
+ display: inline-block;
+}
+
+.ms-ContextualHost-beak {
+ box-shadow: 0 0 15px -5px #3c3c3c;
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ background: #ffffff;
+ border: 1px solid #eaeaea;
+ box-sizing: border-box;
+ top: -6px;
+ display: none;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ z-index: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,
+.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ top: 40px;
+ display: none;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak {
+ left: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ right: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak {
+ display: block;
+ top: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak {
+ display: block;
+ bottom: -10px;
+}
+
+.ms-ContextualHost-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ min-height: 10px;
+}
+
+.ms-ContextualHost-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: #666666;
+ z-index: 10;
+}
+
+.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title {
+ margin-right: 20px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak {
+ background-color: #0078d7;
+}
+
+@media (min-width: 480px) {
+ .ms-ContextualHost {
+ margin: 16px;
+ }
+
+ .ms-ContextualHost.is-positioned {
+ margin: 0;
+ }
+
+ .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak,
+ .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak {
+ display: block;
+ }
+}
+
+.ms-MessageBar {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ padding: 8px;
+ display: table;
+ background-color: #f4f4f4;
+}
+
+.ms-MessageBar .ms-Link {
+ font-size: 12px;
+}
+
+.ms-MessageBar-icon,
+.ms-MessageBar-text {
+ display: table-cell;
+ vertical-align: top;
+}
+
+.ms-MessageBar-icon {
+ padding-right: 8px;
+ font-size: 16px;
+ color: #767676;
+}
+
+.ms-MessageBar-text {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 12px;
+ font-weight: 400;
+}
+
+.ms-MessageBar.ms-MessageBar--warning {
+ background-color: #fff4ce;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning {
+ background-color: #fed9cc;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon {
+ color: #d83b01;
+}
+
+.ms-MessageBar.ms-MessageBar--error {
+ background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon {
+ color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--blocked {
+ background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon {
+ color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--success {
+ background-color: #dff6dd;
+}
+
+.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon {
+ color: #107c10;
+}
+
+.ms-OrgChart {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px;
+}
+
+.ms-OrgChart-listItem {
+ height: 50px;
+ width: 100%;
+ position: relative;
+ list-style: none;
+ margin-bottom: 8px;
+}
+
+.ms-OrgChart-listItemBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 50px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0;
+ padding: 0;
+}
+
+.ms-Overlay {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: rgba(255, 255, 255, 0.4);
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 0;
+ display: none;
+}
+
+.ms-Overlay.is-visible {
+ display: block;
+}
+
+.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-u-overflowHidden {
+ overflow: hidden;
+}
+
+.ms-Panel {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: #ffffff;
+ width: 100%;
+ max-width: 340px;
+ box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2);
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ display: none;
+ height: 100%;
+}
+
+.ms-Panel.animate-in {
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-Panel.animate-out {
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel .ms-CommandBar {
+ padding-right: 0;
+ padding-left: 8px;
+}
+
+.ms-Panel.ms-Panel--md {
+ max-width: 340px;
+}
+
+.ms-Panel.ms-Panel--lg {
+ max-width: 644px;
+}
+
+.ms-Panel.ms-Panel--xl {
+ max-width: 940px;
+}
+
+.ms-Panel.ms-Panel--xxl {
+ max-width: 1192px;
+}
+
+.ms-Panel--left {
+ box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2);
+ left: 0;
+ right: auto;
+}
+
+.ms-Panel--left.animate-in {
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-Panel--left.animate-out {
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 6px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-closeButton .ms-Icon--Cancel {
+ margin-top: 2px;
+}
+
+@media (max-width: 639px) {
+ .ms-Panel-closeButton {
+ font-size: 20px;
+ line-height: 20px;
+ height: 44px;
+ right: 4px;
+ }
+}
+
+.ms-Panel-contentInner {
+ margin-top: 40px;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+ height: 100%;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+.ms-PanelHost {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 10;
+}
+
+.ms-PanelHost .ms-Overlay {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ border-bottom: 1px solid #c8c8c8;
+ cursor: text;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker-searchBox.is-active,
+.ms-PeoplePicker-searchBox:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-PeoplePicker-searchBox:hover,
+ .ms-PeoplePicker-searchBox:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-PeoplePicker-searchBox:hover,
+ .ms-PeoplePicker-searchBox:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-PeoplePicker-searchBox::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox::-moz-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox:-moz-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined {
+ border: 0;
+ margin-bottom: 0;
+ display: inline-block;
+ width: 100%;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field {
+ min-height: 40px;
+ border: 0;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText {
+ color: #a80000;
+}
+
+.ms-PeoplePicker-personaRemove {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ background-color: #f4f4f4;
+ color: #666666;
+ display: inline-block;
+ text-align: center;
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-personaRemove:hover {
+ background-color: #eaeaea;
+ color: #333333;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-personaRemove:focus {
+ background-color: #eaeaea;
+ color: #333333;
+ border: 1px solid #0078d7;
+ outline: none;
+}
+
+.ms-PeoplePicker-results {
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ margin-bottom: -1px;
+ padding-top: 9px;
+ width: 100%;
+ padding-left: 0;
+ box-sizing: border-box;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-weight: 300;
+ font-size: 12px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ text-transform: uppercase;
+ padding-left: 16px;
+}
+
+.ms-PeoplePicker-resultList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: -1px;
+ list-style-type: none;
+}
+
+.ms-PeoplePicker-result {
+ position: relative;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ padding-left: 16px;
+ cursor: pointer;
+ outline: 0;
+}
+
+.ms-PeoplePicker-result:hover,
+.ms-PeoplePicker-result:focus {
+ background-color: #eaeaea;
+}
+
+.ms-PeoplePicker-result:focus {
+ box-shadow: 0 0 0 1px #0078d7 inset;
+}
+
+.ms-PeoplePicker-result.is-selected {
+ background-color: #b3d6f2;
+}
+
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover {
+ background-color: #69afe5;
+}
+
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active {
+ background-color: #69afe5;
+}
+
+.ms-PeoplePicker-resultBtn,
+.ms-PeoplePicker-peopleListBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ box-sizing: border-box;
+ height: 34px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0 0 10px;
+ padding: 0 0 0 9px;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-peopleListBtn {
+ height: 48px;
+ }
+}
+
+.ms-PeoplePicker-resultBtn:hover,
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultBtn:focus,
+.ms-PeoplePicker-peopleListBtn:focus {
+ outline: 1;
+}
+
+.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact,
+.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact {
+ height: 32px;
+}
+
+.ms-PeoplePicker-peopleListBtn {
+ margin-bottom: 0;
+ padding: 0;
+}
+
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: transparent;
+}
+
+.ms-PeoplePicker-resultAction {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ display: block;
+ height: 100%;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 40px;
+ text-align: center;
+}
+
+.ms-PeoplePicker-resultAction .ms-Icon {
+ color: #666666;
+ font-size: 15px;
+}
+
+.ms-PeoplePicker-resultAction:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultAction:active {
+ background-color: #a6a6a6;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ height: 40px;
+ position: relative;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMore:hover {
+ background-color: #f4f4f4;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ font-size: 21px;
+ height: 40px;
+ left: 16px;
+ line-height: 40px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ width: 40px;
+}
+
+.ms-PeoplePicker-searchMoreText {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ height: 40px;
+ left: 64px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn {
+ height: 40px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction {
+ height: 40px;
+ }
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-weight: 400;
+ height: 50px;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker-selectedPeople,
+.ms-PeoplePicker-peopleList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style: none;
+}
+
+.ms-PeoplePicker-selectedPerson {
+ margin-bottom: 8px;
+ position: relative;
+}
+
+.ms-PeoplePicker-peopleListItem {
+ margin-bottom: 6px;
+ position: relative;
+}
+
+.ms-Persona {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1;
+ position: relative;
+ width: 100%;
+ height: 48px;
+ display: table;
+ table-layout: fixed;
+ border-collapse: separate;
+}
+
+.ms-Persona .ms-ContextualHost {
+ display: none;
+}
+
+.ms-Persona-imageArea {
+ position: absolute;
+ overflow: hidden;
+ text-align: center;
+ max-width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 0;
+ width: 100%;
+ top: 0;
+ left: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona-imageArea {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona-imageArea {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona-placeholder {
+ color: #ffffff;
+ position: absolute;
+ right: 0;
+ left: 0;
+ font-size: 47px;
+ top: 9px;
+ z-index: 5;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-weight: 100;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blueLight {
+ background-color: #00bcf2;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #0078d7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blueDark {
+ background-color: #002050;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #008272;
+}
+
+.ms-Persona-initials.ms-Persona-initials--greenLight {
+ background-color: #bad80a;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #107c10;
+}
+
+.ms-Persona-initials.ms-Persona-initials--greenDark {
+ background-color: #004b1c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magentaLight {
+ background-color: #e3008c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #b4009e;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purpleLight {
+ background-color: #b4a0ff;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #5c2d91;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #000000;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #d83b01;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #e81123;
+}
+
+.ms-Persona-initials.ms-Persona-initials--redDark {
+ background-color: #a80000;
+}
+
+.ms-Persona-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 48px;
+ z-index: 10;
+ width: 100%;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #7fba00;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+ text-align: center;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona-presence {
+ border-color: #000000;
+ box-shadow: 0 0 0 1px #1aebff inset;
+ color: #000000;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona-presence {
+ border-color: #ffffff;
+ box-shadow: 0 0 0 1px #37006e inset;
+ color: #ffffff;
+ background-color: #000000;
+ }
+}
+
+.ms-Persona-presenceIcon {
+ color: #ffffff;
+ font-size: 8px;
+ line-height: 12px;
+ vertical-align: top;
+}
+
+.ms-Persona-details {
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+ text-align: left;
+ padding-left: 60px;
+ display: table-cell;
+ width: 100%;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-weight: 400;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-weight: 400;
+ font-size: 12px;
+ white-space: nowrap;
+ line-height: 1.3;
+}
+
+.ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ padding-top: 5px;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ right: auto;
+ top: 10px;
+ left: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ top: 9px;
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 9px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
+ padding: 0;
+ background-color: transparent;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText::after {
+ content: ';';
+}
+
+.ms-Persona.ms-Persona--xs,
+.ms-Persona.ms-Persona--facePile,
+.ms-Persona.ms-Persona--token {
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image,
+.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--facePile .ms-Persona-image,
+.ms-Persona.ms-Persona--token .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--token .ms-Persona-image {
+ max-width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder,
+.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,
+.ms-Persona.ms-Persona--token .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials,
+.ms-Persona.ms-Persona--facePile .ms-Persona-initials,
+.ms-Persona.ms-Persona--token .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence,
+.ms-Persona.ms-Persona--facePile .ms-Persona-presence,
+.ms-Persona.ms-Persona--token .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details,
+.ms-Persona.ms-Persona--facePile .ms-Persona-details,
+.ms-Persona.ms-Persona--token .ms-Persona-details {
+ padding-left: 40px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--token .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--token .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--sm {
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ max-width: 40px;
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-placeholder {
+ font-size: 38px;
+ top: 5px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-initials {
+ font-size: 14px;
+ line-height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-presence {
+ left: 27px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-details {
+ padding-left: 48px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText {
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText {
+ padding-top: 1px;
+}
+
+.ms-Persona.ms-Persona--lg {
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ max-width: 72px;
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-placeholder {
+ font-size: 67px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presence {
+ left: 49px;
+ height: 20px;
+ width: 20px;
+ border-width: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon {
+ line-height: 20px;
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-details {
+ padding-left: 84px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--xl {
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ max-width: 100px;
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-placeholder {
+ font-size: 95px;
+ top: 12px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-initials {
+ font-size: 42px;
+ line-height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presence {
+ height: 28px;
+ width: 28px;
+ left: 71px;
+ border-width: 4px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon {
+ line-height: 28px;
+ font-size: 21px;
+ position: relative;
+ top: 1px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 120px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-weight: 300;
+ margin-top: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText {
+ padding-top: 2px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--xl .ms-Persona-optionalText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText {
+ color: #333333;
+}
+
+.ms-Persona.ms-Persona--selectable {
+ cursor: pointer;
+ padding: 0 10px;
+}
+
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover,
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus {
+ background-color: #deecf9;
+ outline: 1px solid transparent;
+}
+
+.ms-Persona.ms-Persona--available .ms-Persona-presence {
+ background-color: #7fba00;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #fcd116;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon {
+ position: relative;
+ left: 1px;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #ffffff;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before {
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-shadow: 0 0 0 2px #d93b3b inset;
+ border-radius: 50%;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after {
+ content: '';
+ width: 100%;
+ height: 2px;
+ background-color: #d93b3b;
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ position: absolute;
+ top: 5px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after {
+ top: 9px;
+}
+
+.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after {
+ top: 13px;
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #37006e;
+ }
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #e81123;
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #93abbd;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #000000;
+ box-shadow: 0 0 0 1px #ffffff inset;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #ffffff;
+ box-shadow: 0 0 0 1px #000000 inset;
+ }
+}
+
+.ms-Persona.ms-Persona--facePile {
+ display: inline-block;
+ width: auto;
+}
+
+.ms-Persona.ms-Persona--facePile:hover {
+ cursor: pointer;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea {
+ position: relative;
+ width: 100%;
+ min-width: 32px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-initials {
+ position: relative;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-details {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-presence {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--token {
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ width: auto;
+ background-color: #f4f4f4;
+ border-radius: 20px;
+ margin: 4px;
+}
+
+.ms-Persona.ms-Persona--token:hover {
+ cursor: pointer;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-actionIcon {
+ border-radius: 20px;
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ padding: 0;
+ line-height: 30px;
+ transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ text-align: center;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover {
+ background-color: #eaeaea;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-imageArea {
+ width: 100%;
+ min-width: 32px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-details {
+ height: 30px;
+ display: inline-block;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-primaryText {
+ padding-top: 0;
+ line-height: 34px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-initials {
+ position: relative;
+}
+
+.ms-PersonaCard {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-left: 20px;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ position: relative;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-actions::before {
+ content: '';
+ position: absolute;
+ top: 47px;
+ left: 0;
+ width: 100%;
+ border-top: 1px solid #c8c8c8;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 16px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ outline: transparent;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-action:hover,
+.ms-PersonaCard-overflow:hover {
+ color: #212121;
+}
+
+.ms-PersonaCard-action:active,
+.ms-PersonaCard-overflow:active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action::before,
+.ms-PersonaCard-overflow::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ top: 0;
+ left: 0;
+ z-index: 100;
+}
+
+.ms-PersonaCard-action.is-active,
+.ms-PersonaCard-overflow.is-active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active::after,
+.ms-PersonaCard-overflow.is-active::after {
+ box-sizing: border-box;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 13px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: -95px;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-details {
+ display: none;
+ width: 100%;
+ margin: 0;
+ max-height: 300px;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-details.is-active {
+ display: block;
+}
+
+.ms-PersonaCard-details.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after {
+ content: '\E70D';
+}
+
+.ms-PersonaCard-details[data-detail-id='org'] {
+ max-height: 300px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 16px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 2px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\E70E';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart::after {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+
+ .ms-ContextualHost .ms-PersonaCard {
+ box-shadow: none;
+ }
+}
+
+.ms-Pivot {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-Pivot-links {
+ font-size: 0;
+ height: 40px;
+ list-style-type: none;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 40px;
+ margin-right: 8px;
+ padding: 0 8px;
+ text-align: center;
+ vertical-align: top;
+}
+
+.ms-Pivot-link:hover {
+ cursor: pointer;
+}
+
+.ms-Pivot-link::before {
+ background-color: transparent;
+ bottom: 0;
+ content: '';
+ height: 2px;
+ left: 8px;
+ position: absolute;
+ right: 8px;
+ transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-Pivot-link::after {
+ color: transparent;
+ content: attr(title);
+ display: block;
+ font-weight: bold;
+ height: 1px;
+ overflow: hidden;
+ visibility: hidden;
+}
+
+.ms-Pivot-link.is-selected {
+ font-weight: 600;
+ position: relative;
+}
+
+.ms-Pivot-link.is-selected::before {
+ background-color: #0078d7;
+}
+
+.ms-Pivot-link.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow {
+ color: #666666;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow.is-selected {
+ color: #0078d7;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
+.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
+ color: #212121;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow:active {
+ color: #0078d7;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot-content {
+ display: none;
+ margin-top: 20px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-weight: 300;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) {
+ color: #000000;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ color: #ffffff;
+ background-color: #0078d7;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-weight: 300;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
+ background-color: #ffffff;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active {
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-weight: 600;
+ }
+}
+
+.ms-ProgressIndicator {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+}
+
+.ms-ProgressIndicator-itemName {
+ color: #333333;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #767676;
+ font-size: 11px;
+ line-height: 18px;
+}
+
+.ms-ProgressIndicator-itemProgress {
+ position: relative;
+ width: 180px;
+ height: 2px;
+ padding: 8px 0;
+}
+
+.ms-ProgressIndicator-progressTrack {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-ProgressIndicator-progressBar {
+ background-color: #0078d7;
+ height: 2px;
+ position: absolute;
+ transition: width 0.3s ease;
+ width: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ProgressIndicator-progressBar {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ProgressIndicator-progressBar {
+ background-color: #000000;
+ }
+}
+
+.ms-SearchBox {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 36px;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+ overflow: hidden;
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.is-active {
+ z-index: 10;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-label {
+ display: none;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-clear {
+ display: block;
+}
+
+.ms-SearchBox:hover {
+ background-color: #deecf9;
+}
+
+.ms-SearchBox:hover .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox.is-disabled {
+ background-color: #f4f4f4;
+ pointer-events: none;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ color: #a6a6a6;
+ background-color: transparent;
+ border-color: #f4f4f4;
+ cursor: default;
+}
+
+.ms-SearchBox-clear {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 10;
+}
+
+.ms-SearchBox-clear .ms-CommandButton-button {
+ background-color: #0078d7;
+ color: #ffffff;
+ height: 36px;
+}
+
+.ms-SearchBox-clear .ms-CommandButton-icon {
+ color: #ffffff;
+}
+
+.ms-SearchBox-icon {
+ position: relative;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ display: inline-block;
+ font-size: 16px;
+ width: 16px;
+ margin-left: 12px;
+ margin-right: 6px;
+ color: #0078d7;
+ vertical-align: top;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #69afe5;
+ outline: transparent 1px solid;
+ font-weight: 300;
+ font-size: 14px;
+ color: #000000;
+ height: 36px;
+ padding: 6px 3px 7px 45px;
+ width: 208px;
+ background-color: transparent;
+ z-index: 5;
+ transition: padding-left 0.167s;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 36px;
+ line-height: 36px;
+ color: #666666;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar {
+ background-color: #ffffff;
+ width: 208px;
+ height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ height: 40px;
+ line-height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field {
+ transition: none;
+ border: 0;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus {
+ background-color: transparent;
+ padding: 6px 3px 7px 45px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit {
+ display: none;
+ position: absolute;
+ top: 0;
+ z-index: 10;
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button {
+ height: 40px;
+ background-color: transparent;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear {
+ right: 8px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter {
+ right: 8px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon {
+ color: #0078d7;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar::before {
+ position: absolute;
+ content: ' ';
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: 0 8px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover {
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label {
+ color: #212121;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon {
+ color: #0078d7;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:focus {
+ background-color: transparent;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter {
+ display: block;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ width: 50px;
+ min-height: 40px;
+ z-index: 0;
+ background-color: #f4f4f4;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text {
+ display: none;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field {
+ cursor: pointer;
+ width: calc(100% - 50px);
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed::before {
+ visibility: hidden;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field {
+ display: block;
+ cursor: text;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text {
+ display: inline-block;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear {
+ display: inline-block;
+ right: 58px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter {
+ display: inline-block;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated {
+ transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active::before {
+ visibility: visible;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear {
+ display: inline-block;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active {
+ color: #0078d7;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-SearchBox.ms-SearchBox--commandBar {
+ background-color: #ffffff;
+ border-right: 1px solid #eaeaea;
+ }
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar {
+ height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ height: 44px;
+ line-height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear {
+ font-size: 20px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button {
+ height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ font-size: 16px;
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active {
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label {
+ display: block;
+ line-height: 40px;
+ height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text {
+ display: none;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active::before {
+ visibility: visible;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field {
+ width: 100%;
+ padding-right: 100px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon {
+ display: none;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit {
+ display: inline-block;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon {
+ color: #a6a6a6;
+ }
+}
+
+.ms-Spinner {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ height: 20px;
+}
+
+.ms-Spinner.ms-Spinner--large {
+ height: 28px;
+}
+
+.ms-Spinner.ms-Spinner--large .ms-Spinner-label {
+ left: 34px;
+ top: 6px;
+}
+
+.ms-Spinner-circle {
+ position: absolute;
+ border-radius: 100px;
+ background-color: #0078d7;
+ opacity: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Spinner-circle {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Spinner-circle {
+ background-color: #000000;
+ }
+}
+
+.ms-Spinner-label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ font-size: 12px;
+ font-weight: 400;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-Table {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.ms-Table--fixed {
+ table-layout: fixed;
+}
+
+.ms-Table tr,
+.ms-Table-row {
+ display: table-row;
+ line-height: 30px;
+ font-weight: 300;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table tr.is-selected,
+.ms-Table-row.is-selected {
+ background-color: #b3d6f2;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck,
+.ms-Table-row.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck::before,
+.ms-Table-row.is-selected .ms-Table-rowCheck::before {
+ display: none;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck::after,
+.ms-Table-row.is-selected .ms-Table-rowCheck::after {
+ content: '\E73A';
+ color: #ffffff;
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table thead th,
+.ms-Table-head {
+ font-weight: 300;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\E739';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 1px;
+}
+
+.ms-Table--selectable tr:hover,
+.ms-Table--selectable .ms-Table-row:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Table-row.is-selected .ms-Table-rowCheck {
+ background: none;
+ }
+
+ .ms-Table-row.is-selected .ms-Table-rowCheck::before {
+ display: block;
+ }
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 8px;
+}
+
+.ms-TextField .ms-Label {
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled::-moz-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled:-moz-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-moz-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-moz-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-ms-input-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-weight: 300;
+ font-size: 14px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 12px 7px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+ text-overflow: ellipsis;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field[disabled] {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField-field::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field::-moz-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field:-moz-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+ background-color: #ffffff;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-TextField-field {
+ position: relative;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-weight: 300;
+ font-size: 14px;
+ color: #666666;
+ padding: 6px 12px 7px;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 14px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: top;
+ padding-left: 12px;
+ padding-top: 9px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 3px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field {
+ background-color: transparent;
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--multiline .ms-TextField-field {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #666666;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Toggle {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ top: -2px;
+ padding: 0 0 0 50px;
+}
+
+.ms-Toggle .ms-Toggle-field::before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ left: 4px;
+ background-color: #666666;
+ outline: 1px solid transparent;
+ transition-property: background, left;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field::before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field::before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle .ms-Toggle-field::before {
+ right: auto;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected::before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ right: 4px;
+ background-color: #666666;
+ outline: 1px solid transparent;
+ transition-property: background, left;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field.is-selected::before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field.is-selected::before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected::before {
+ background-color: #ffffff;
+ left: 28px;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle:focus + .ms-Toggle-field,
+.ms-Toggle:hover + .ms-Toggle-field {
+ border-color: #666666;
+}
+
+.ms-Toggle:focus + .ms-Toggle-field::before,
+.ms-Toggle:hover + .ms-Toggle-field::before {
+ background-color: #333333;
+}
+
+.ms-Toggle:focus:checked + .ms-Toggle-field,
+.ms-Toggle:hover:checked + .ms-Toggle-field {
+ background-color: #106ebe;
+ border-color: #106ebe;
+}
+
+.ms-Toggle:focus:checked + .ms-Toggle-field::before,
+.ms-Toggle:hover:checked + .ms-Toggle-field::before {
+ background-color: #ffffff;
+}
+
+.ms-Toggle:active:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Toggle .ms-Toggle-field:focus,
+.ms-Toggle .ms-Toggle-field:hover {
+ border-color: #333333;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected:focus,
+.ms-Toggle .ms-Toggle-field.is-selected:hover {
+ background-color: #106ebe;
+ border-color: #106ebe;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label {
+ color: #000000;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Toggle .ms-Toggle-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle .ms-Toggle-field:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff;
+ border-color: #c8c8c8;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field::before {
+ background-color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field::before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 14px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 45px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2px solid #a6a6a6;
+ border-radius: 20px;
+ cursor: pointer;
+ transition-property: background, left, border-color;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ outline: 0;
+}
+
+.ms-Toggle-field:hover,
+.ms-Toggle-field:focus {
+ border-color: #666666;
+}
+
+.ms-Toggle-input {
+ display: none;
+}
+
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
+ float: right;
+}
diff --git a/dist/css/fabric.components.min.css b/dist/css/fabric.components.min.css
new file mode 100644
index 00000000..27a4302c
--- /dev/null
+++ b/dist/css/fabric.components.min.css
@@ -0,0 +1,6 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:11px 7px}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute;margin-right:-2px}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:8px 5px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:5px 4px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-ms-flexbox;display:flex;padding:0}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-right:4px;position:relative;top:1px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:'\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:8px;left:8px;bottom:0;right:0;transition-property:top,left,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;left:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-right:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-right:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-right:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-left:4px}}.ms-CommandButton-icon{display:inline-block;margin-right:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-left:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-left:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-left:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:' ';width:1px;height:16px;top:12px;left:-8px;border-left:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-right:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:'';height:2px;position:absolute;left:0;right:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 16px 0 25px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;right:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 16px 0 26px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:'\E73E';font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;left:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-left:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-left:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-right:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-right:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-left:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:left;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;right:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:'';position:absolute;border-left:1px solid #a6a6a6;top:10px;bottom:10px;left:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:'';pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-right:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-right:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-right:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-right:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);left:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:right}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-left:-24px;margin-right:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;right:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;right:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;left:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\e73A';font-size:17px;color:#767676;position:absolute;top:23px;left:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-right:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-right:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;left:0;right:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;right:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-right:0;padding-left:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:-30px 0 30px 30px rgba(0,0,0,.2);left:0;right:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;right:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-left:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-left:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-left:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;left:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;left:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;left:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;left:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:left;padding-left:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-left:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;left:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;left:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:'';width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:'';width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;left:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-right:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-left:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:'';position:absolute;top:47px;left:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:'';position:absolute;width:100%;height:100%;background-color:transparent;top:0;left:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\E70D'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E70E'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-right:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;right:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-left:12px;margin-right:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 3px 7px 45px;width:208px;background-color:transparent;z-index:5;transition:padding-left .167s}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;left:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px;line-height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 3px 7px 45px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{right:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:' ';right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;right:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-right:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-right:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:'\E73A';color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E739';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-right:8px;display:table-cell;vertical-align:top;padding-left:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 0 0 50px}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{right:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;left:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,left,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}
\ No newline at end of file
diff --git a/dist/css/fabric.components.rtl.css b/dist/css/fabric.components.rtl.css
new file mode 100644
index 00000000..56a4e15f
--- /dev/null
+++ b/dist/css/fabric.components.rtl.css
@@ -0,0 +1,6051 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+
+.ms-Breadcrumb {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ margin: 23px 0 1px;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 12px;
+ color: #666666;
+ vertical-align: top;
+ margin: 11px 7px;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ display: inline-block;
+ color: #0078d7;
+ padding: 8px;
+ cursor: pointer;
+ vertical-align: top;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+ margin-left: -2px;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ right: 0;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu:before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ top: -6px;
+ right: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ transform: rotate(45deg);
+ background-color: #ffffff;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: 0;
+ box-shadow: none;
+ position: relative;
+ width: 190px;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open {
+ margin-bottom: 0;
+}
+
+.ms-Breadcrumb-itemLink,
+.ms-Breadcrumb-overflowButton {
+ text-decoration: none;
+ outline: transparent;
+}
+
+.ms-Breadcrumb-itemLink:hover,
+.ms-Breadcrumb-overflowButton:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-itemLink:focus,
+.ms-Breadcrumb-overflowButton:focus {
+ outline: 1px solid #767676;
+ color: #000000;
+}
+
+.ms-Breadcrumb-itemLink:active,
+.ms-Breadcrumb-overflowButton:active {
+ outline: transparent;
+ background-color: #c8c8c8;
+}
+
+.ms-Breadcrumb-itemLink {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ vertical-align: top;
+}
+
+@media screen and (max-width:639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 10px;
+ margin: 8px 5px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ padding: 5px 4px;
+ }
+}
+
+@media screen and (max-width:479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin: 5px 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding: 2px 4px;
+ }
+}
+
+.ms-Button {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button.is-hidden {
+ display: none;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Button:hover {
+ color: #1aebff;
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Button:hover {
+ color: #37006e;
+ border-color: #37006e;
+ }
+}
+
+.ms-Button:focus {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button:active .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.is-disabled,
+.ms-Button:disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ cursor: default;
+}
+
+.ms-Button.is-disabled .ms-Button-label,
+.ms-Button:disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.is-disabled:focus,
+.ms-Button.is-disabled:hover,
+.ms-Button:disabled:focus,
+.ms-Button:disabled:hover {
+ outline: 0;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-weight: 600;
+ font-size: 14px;
+}
+
+.ms-Button-description,
+.ms-Button-icon {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary.is-disabled,
+.ms-Button.ms-Button--primary:disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--primary:disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: transparent;
+ border: 0;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ margin-left: 4px;
+ position: relative;
+ top: 1px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ font-size: 12px;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-size: 21px;
+ font-weight: 100;
+ position: relative;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:focus .ms-Button-icon,
+.ms-Button.ms-Button--hero:hover .ms-Button-icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon {
+ border: 1px solid #005a9e;
+}
+
+.ms-Button.ms-Button--hero:focus .ms-Button-label,
+.ms-Button.ms-Button--hero:hover .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ border: 1px solid #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon {
+ border: 1px solid #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--hero:disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ display: block;
+ height: auto;
+ max-width: 280px;
+ min-height: 72px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-weight: 600;
+ position: relative;
+ text-align: right;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-weight: 400;
+ font-size: 12px;
+ position: relative;
+ text-align: right;
+ top: 3px;
+}
+
+.ms-Button.ms-Button--compound:hover .ms-Button-description {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--compound:focus {
+ border-color: #0078d7;
+ background-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--compound:focus .ms-Button-label {
+ color: #333333;
+}
+
+.ms-Button.ms-Button--compound:focus .ms-Button-description {
+ color: #666666;
+}
+
+.ms-Button.ms-Button--compound:active {
+ background-color: #0078d7;
+}
+
+.ms-Button.ms-Button--compound:active .ms-Button-description,
+.ms-Button.ms-Button--compound:active .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled .ms-Button-description,
+.ms-Button.ms-Button--compound:disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound.is-disabled:active,
+.ms-Button.ms-Button--compound.is-disabled:focus,
+.ms-Button.ms-Button--compound:disabled:active,
+.ms-Button.ms-Button--compound:disabled:focus {
+ border-color: #f4f4f4;
+ background-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,
+.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,
+.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Callout {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ width: 288px;
+}
+
+.ms-Callout.is-hidden {
+ display: none;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding: 24px 28px 12px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-weight: 300;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-weight: 300;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: #666666;
+ z-index: 110;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+}
+
+.ms-Callout-inner {
+ height: 100%;
+ padding: 0 28px 12px;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button {
+ height: 27px;
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label {
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button {
+ color: #0078d7;
+}
+
+.ms-Callout-actions .ms-Callout-button {
+ margin-left: 12px;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-weight: 100;
+ font-size: 28px;
+ color: #ffffff;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-inner {
+ padding-top: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-subText {
+ font-size: 14px;
+}
+
+.ms-Callout.ms-Callout--actionText .ms-Callout-actions {
+ border-top: 1px solid #eaeaea;
+ padding-top: 12px;
+}
+
+.ms-Callout.ms-Callout--actionText .ms-Callout-inner {
+ padding-bottom: 12px;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-header {
+ padding-bottom: 0;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-title {
+ font-size: 14px;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-actions {
+ margin-top: 12px;
+ margin-bottom: -4px;
+}
+
+.ms-CheckBox {
+ box-sizing: border-box;
+ color: #333333;
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-CheckBox .ms-Label {
+ font-size: 14px;
+ padding: 0 26px 0 0;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.ms-CheckBox-input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ms-CheckBox-field:before {
+ content: '';
+ display: inline-block;
+ border: 2px solid #a6a6a6;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ font-weight: 400;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: background, border, border-color;
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.4,0,0.23,1);
+}
+
+.ms-CheckBox-field:after {
+ content: '\E73E';
+ font-family: FabricMDL2Icons;
+ display: none;
+ position: absolute;
+ font-weight: 900;
+ background-color: transparent;
+ font-size: 13px;
+ top: 0;
+ color: #ffffff;
+ line-height: 20px;
+ width: 20px;
+ text-align: center;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CheckBox-field:after {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CheckBox-field:after {
+ color: #ffffff;
+ }
+}
+
+.ms-CheckBox-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+}
+
+.ms-CheckBox-field:focus:before,
+.ms-CheckBox-field:hover:before {
+ border-color: #767676;
+}
+
+.ms-CheckBox-field:focus .ms-Label,
+.ms-CheckBox-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-CheckBox-field.is-disabled {
+ cursor: default;
+}
+
+.ms-CheckBox-field.is-disabled:before {
+ background-color: #c8c8c8;
+ border-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CheckBox-field.is-disabled:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CheckBox-field.is-disabled:before {
+ border-color: #600000;
+ }
+}
+
+.ms-CheckBox-field.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CheckBox-field.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CheckBox-field.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-CheckBox-field.in-focus:before {
+ border-color: #767676;
+}
+
+.ms-CheckBox-field.in-focus.is-disabled:before {
+ border-color: #c8c8c8;
+}
+
+.ms-CheckBox-field.in-focus.is-checked:before {
+ border-color: #106ebe;
+}
+
+.ms-CheckBox-field.is-checked:before {
+ border: 10px solid #0078d7;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-CheckBox-field.is-checked:before {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-CheckBox-field.is-checked:before {
+ border-color: #37006e;
+ }
+}
+
+.ms-CheckBox-field.is-checked:after {
+ display: block;
+}
+
+.ms-CheckBox-field.is-checked:focus:before,
+.ms-CheckBox-field.is-checked:hover:before {
+ border-color: #106ebe;
+}
+
+.ms-RadioButton {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-RadioButton .ms-Label {
+ font-size: 14px;
+ padding: 0 26px 0 0;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.ms-RadioButton-input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ms-RadioButton-field:before {
+ content: '';
+ display: inline-block;
+ border: 2px solid #a6a6a6;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ font-weight: 400;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: border-color;
+ transition-duration: 0.2s;
+ transition-timing-function: cubic-bezier(0.4,0,0.23,1);
+ border-radius: 50%;
+}
+
+.ms-RadioButton-field:after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ bottom: 0;
+ left: 0;
+ transition-property: top, right, width, height;
+ transition-duration: 0.15s;
+ transition-timing-function: cubic-bezier(0.4,0,0.23,1);
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-RadioButton-field:after {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-RadioButton-field:after {
+ color: #600000;
+ }
+}
+
+.ms-RadioButton-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+}
+
+.ms-RadioButton-field:focus:before,
+.ms-RadioButton-field:hover:before {
+ border-color: #767676;
+}
+
+.ms-RadioButton-field:focus .ms-Label,
+.ms-RadioButton-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-RadioButton-field.is-disabled {
+ cursor: default;
+}
+
+.ms-RadioButton-field.is-disabled:before {
+ background-color: #c8c8c8;
+ border-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-RadioButton-field.is-disabled:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-RadioButton-field.is-disabled:before {
+ border-color: #600000;
+ }
+}
+
+.ms-RadioButton-field.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-RadioButton-field.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-RadioButton-field.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-RadioButton-field.is-disabled:focus:before,
+.ms-RadioButton-field.is-disabled:hover:before {
+ border-color: #c8c8c8;
+}
+
+.ms-RadioButton-field.in-focus:before {
+ border-color: #767676;
+}
+
+.ms-RadioButton-field.is-checked:before {
+ border: 2px solid #0078d7;
+ background-color: transparent;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-RadioButton-field.is-checked:before {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-RadioButton-field.is-checked:before {
+ border-color: #37006e;
+ }
+}
+
+.ms-RadioButton-field.is-checked:after {
+ background-color: #0078d7;
+ top: 5px;
+ right: 5px;
+ width: 10px;
+ height: 10px;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-RadioButton-field.is-checked:after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-RadioButton-field.is-checked:after {
+ background-color: #37006e;
+ }
+}
+
+.ms-RadioButton-field.is-checked.in-focus:before,
+.ms-RadioButton-field.is-checked:focus:before,
+.ms-RadioButton-field.is-checked:hover:before {
+ border-color: #0078d7;
+}
+
+.ms-ChoiceFieldGroup {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ margin-bottom: 4px;
+}
+
+.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list {
+ padding: 0;
+ margin: 0;
+}
+
+.ms-CommandBar {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: #f4f4f4;
+ height: 40px;
+ white-space: nowrap;
+ padding-right: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar .ms-CommandButton--actionButton {
+ border-left: 1px solid #eaeaea;
+}
+
+.ms-CommandBar .ms-Button {
+ height: 100%;
+}
+
+.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon {
+ padding-left: 0;
+}
+
+.ms-CommandBar .ms-Button.is-hidden {
+ display: none;
+}
+
+.ms-CommandBar .ms-SearchBox,
+.ms-CommandBar .ms-SearchBox-field,
+.ms-CommandBar .ms-SearchBox-label {
+ height: 100%;
+}
+
+.ms-CommandBar .ms-SearchBox {
+ display: inline-block;
+ vertical-align: top;
+ transition: margin-left 0.267s;
+}
+
+.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 220px;
+}
+
+@media only screen and (max-width:639px) {
+ .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+ position: absolute;
+ right: 0;
+ left: 0;
+ z-index: 10;
+ }
+}
+
+.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button {
+ font-size: 18px;
+ padding: 0 11px;
+}
+
+@media only screen and (min-width:1024px) {
+ .ms-CommandBar .ms-SearchBox {
+ margin-left: 24px;
+ }
+}
+
+@media only screen and (max-width:639px) {
+ .ms-CommandBar {
+ height: 44px;
+ }
+}
+
+@media only screen and (min-width:640px) {
+ .ms-CommandBar.search-expanded .ms-SearchBox {
+ margin-left: 8px;
+ }
+
+ .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ transition: none;
+ }
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ height: 100%;
+ overflow: hidden;
+}
+
+.ms-CommandBar-sideCommands {
+ float: left;
+ text-align: left;
+ width: auto;
+ padding-left: 4px;
+ height: 100%;
+}
+
+.ms-CommandBar-sideCommands .ms-Button:last-child {
+ margin-left: 0;
+}
+
+@media only screen and (min-width:640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width:1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-left: 20px;
+ }
+}
+
+.ms-CommandButton {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ position: relative;
+ vertical-align: top;
+}
+
+.ms-CommandButton.is-hidden {
+ display: none;
+}
+
+.ms-CommandButton.is-disabled .ms-CommandButton-button,
+.ms-CommandButton:disabled .ms-CommandButton-button {
+ cursor: default;
+}
+
+.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,
+.ms-CommandButton:disabled .ms-CommandButton-button:hover {
+ background-color: #eff6fc;
+}
+
+.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,
+.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,
+.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,
+.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label {
+ color: #a6a6a6;
+}
+
+.ms-CommandButton .ms-ContextualMenu {
+ display: none;
+}
+
+.ms-CommandButton-button,
+.ms-CommandButton-splitIcon {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ cursor: pointer;
+ display: inline-block;
+ height: 40px;
+ line-height: 40px;
+ outline: 1px solid transparent;
+ padding: 0 8px;
+ position: relative;
+ vertical-align: top;
+ background: transparent;
+}
+
+.ms-CommandButton-button:hover,
+.ms-CommandButton-splitIcon:hover {
+ background-color: #eaeaea;
+}
+
+.ms-CommandButton-button:hover .ms-CommandButton-label,
+.ms-CommandButton-splitIcon:hover .ms-CommandButton-label {
+ color: #212121;
+}
+
+.ms-CommandButton-button:active,
+.ms-CommandButton-splitIcon:active {
+ background-color: #eaeaea;
+}
+
+.ms-CommandButton-button:focus:before,
+.ms-CommandButton-splitIcon:focus:before {
+ top: 3px;
+ right: 3px;
+ left: 3px;
+ bottom: 3px;
+ border: 1px solid #333333;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+.ms-CommandButton-button:focus,
+.ms-CommandButton-splitIcon:focus {
+ outline: 0;
+}
+
+@media only screen and (max-width:639px) {
+ .ms-CommandButton-button,
+ .ms-CommandButton-splitIcon {
+ height: 44px;
+ }
+
+ .ms-CommandButton-button .ms-CommandButton-icon,
+ .ms-CommandButton-splitIcon .ms-CommandButton-icon {
+ font-size: 20px;
+ }
+
+ .ms-CommandButton-button .ms-CommandButton-label,
+ .ms-CommandButton-splitIcon .ms-CommandButton-label {
+ line-height: 44px;
+ }
+}
+
+.ms-CommandButton-button {
+ border: 0;
+ margin: 0;
+}
+
+.ms-CommandButton + .ms-CommandButton {
+ margin-right: 8px;
+}
+
+@media only screen and (max-width:639px) {
+ .ms-CommandButton + .ms-CommandButton {
+ margin-right: 4px;
+ }
+}
+
+.ms-CommandButton-icon {
+ display: inline-block;
+ margin-left: 8px;
+ position: relative;
+ font-size: 16px;
+ min-width: 16px;
+ height: 100%;
+}
+
+.ms-CommandButton-icon .ms-Icon {
+ position: absolute;
+ top: 50%;
+ right: 50%;
+ transform: translate(-50%,-50%);
+}
+
+.ms-CommandButton-label {
+ font-size: 14px;
+ font-weight: 400;
+ color: #333333;
+ line-height: 40px;
+ height: 100%;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-CommandButton-label:hover {
+ color: #212121;
+}
+
+.ms-CommandButton-dropdownIcon,
+.ms-CommandButton-splitIcon {
+ display: inline-block;
+ position: relative;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 300;
+ min-width: 12px;
+ height: 100%;
+ vertical-align: top;
+ margin-right: 8px;
+}
+
+.ms-CommandButton-dropdownIcon .ms-Icon,
+.ms-CommandButton-splitIcon .ms-Icon {
+ line-height: normal;
+ padding-top: 16px;
+}
+
+.ms-CommandButton-dropdownIcon:focus:before,
+.ms-CommandButton-splitIcon:focus:before {
+ top: 3px;
+ right: 3px;
+ left: 3px;
+ bottom: 3px;
+ border: 1px solid #333333;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+@media only screen and (max-width:639px) {
+ .ms-CommandButton-dropdownIcon,
+ .ms-CommandButton-splitIcon {
+ display: none;
+ }
+}
+
+.ms-CommandButton-splitIcon {
+ margin-right: -2px;
+ width: 27px;
+ border: 0;
+}
+
+.ms-CommandButton-splitIcon .ms-Icon {
+ margin-right: -1px;
+ position: relative;
+ padding-top: 16px;
+}
+
+.ms-CommandButton-splitIcon .ms-Icon:after {
+ position: absolute;
+ content: ' ';
+ width: 1px;
+ height: 16px;
+ top: 12px;
+ right: -8px;
+ border-right: 1px solid #c8c8c8;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon {
+ margin-left: 0;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label {
+ display: none;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button {
+ padding: 0 12px;
+}
+
+.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button {
+ background: none;
+}
+
+.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button {
+ width: 50px;
+ height: 40px;
+}
+
+.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon {
+ position: absolute;
+ top: 50%;
+ right: 50%;
+ transform: translate(-50%,-50%);
+ width: 16px;
+ height: 16px;
+ padding-left: 0;
+}
+
+.ms-CommandButton.ms-CommandButton--pivot.is-active:before,
+.ms-CommandButton.ms-CommandButton--pivot:hover:before {
+ content: '';
+ height: 2px;
+ position: absolute;
+ right: 0;
+ left: 0;
+ background-color: #0078d7;
+ bottom: 0;
+ z-index: 5;
+}
+
+.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,
+.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label {
+ display: inline-block;
+}
+
+@media only screen and (max-width:479px) {
+ .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,
+ .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label {
+ font-size: 16px;
+ }
+}
+
+.ms-ContextualMenu {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ display: block;
+ min-width: 180px;
+ max-width: 220px;
+ list-style-type: none;
+ position: relative;
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.is-hidden {
+ display: none;
+}
+
+.ms-ContextualMenu-item {
+ position: relative;
+}
+
+.ms-ContextualMenu-link {
+ box-sizing: border-box;
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ overflow: hidden;
+ line-height: 34px;
+ padding: 0 25px 0 16px;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus,
+.ms-ContextualMenu-link:hover {
+ background-color: #f4f4f4;
+ color: #212121;
+}
+
+.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon {
+ color: #212121;
+}
+
+.ms-ContextualMenu-link:focus {
+ outline: transparent;
+ border: 1px solid #666666;
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #dadada;
+ color: #000000;
+ font-weight: 600;
+}
+
+.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon {
+ color: #000000;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #d0d0d0;
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ background-color: #ffffff;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+.ms-ContextualMenu-link.is-disabled .ms-Icon {
+ color: #a6a6a6;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 36px;
+ line-height: 36px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ right: 178px;
+}
+
+.ms-ContextualMenu-caretRight,
+.ms-ContextualMenu-subMenuIcon {
+ color: #333333;
+ font-size: 8px;
+ font-weight: 600;
+ width: 24px;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 26px 0 16px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+ font-weight: 600;
+ color: #333333;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: FabricMDL2Icons;
+ font-style: normal;
+ font-weight: 400;
+ speak: none;
+ color: #333333;
+ content: '\E73E';
+ font-size: 10px;
+ font-weight: 800;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ right: 7px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover {
+ color: #212121;
+ background-color: #f4f4f4;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after {
+ color: #212121;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active {
+ color: #000000;
+ background-color: #d0d0d0;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after {
+ color: #000000;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link {
+ padding-right: 40px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 40px;
+ text-align: center;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons {
+ width: 220px;
+}
+
+.ms-DatePicker {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 17px;
+ z-index: 300;
+}
+
+.ms-DatePicker .ms-TextField {
+ position: relative;
+}
+
+.ms-DatePicker-picker {
+ color: #000000;
+ font-size: 14px;
+ position: relative;
+ text-align: right;
+ z-index: 0;
+}
+
+.ms-DatePicker-event {
+ color: #666666;
+ font-size: 21px;
+ line-height: 20px;
+ pointer-events: none;
+ position: absolute;
+ left: 5px;
+ bottom: 5px;
+ z-index: 5;
+}
+
+.ms-DatePicker-holder {
+ -webkit-overflow-scrolling: touch;
+ box-sizing: border-box;
+ background: #ffffff;
+ position: absolute;
+ min-width: 300px;
+ display: none;
+}
+
+.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
+ animation-name: fadeIn,slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-fill-mode: both;
+ box-sizing: border-box;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ border: 1px solid #eaeaea;
+ display: block;
+}
+
+.ms-DatePicker-picker--opened {
+ position: relative;
+ z-index: 10;
+}
+
+.ms-DatePicker-frame {
+ padding: 1px;
+}
+
+.ms-DatePicker-wrap {
+ margin: -1px;
+ padding: 9px;
+}
+
+.ms-DatePicker-dayPicker {
+ display: block;
+ margin-bottom: 30px;
+}
+
+.ms-DatePicker-header {
+ height: 40px;
+ line-height: 44px;
+}
+
+.ms-DatePicker-month,
+.ms-DatePicker-year {
+ display: inline-block;
+ font-weight: 100;
+ font-size: 21px;
+ color: #0078d7;
+ margin-top: -1px;
+}
+
+.ms-DatePicker-month:hover,
+.ms-DatePicker-year:hover {
+ color: #005a9e;
+ cursor: pointer;
+}
+
+.ms-DatePicker-month {
+ margin-right: 15px;
+}
+
+.ms-DatePicker-year {
+ margin-right: 5px;
+}
+
+.ms-DatePicker-table {
+ text-align: center;
+ border-collapse: collapse;
+ border-spacing: 0;
+ table-layout: fixed;
+ font-size: inherit;
+}
+
+.ms-DatePicker-table td {
+ margin: 0;
+ padding: 0;
+}
+
+.ms-DatePicker-table td:hover {
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-day,
+.ms-DatePicker-weekday {
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ line-height: 40px;
+ font-weight: 400;
+ font-size: 15px;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #b3d6f2;
+}
+
+.ms-DatePicker-day--disabled:before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-weight: 400;
+}
+
+.ms-DatePicker-day--infocus:hover,
+.ms-DatePicker-day--outfocus:hover {
+ cursor: pointer;
+ color: #000000;
+ background: #eaeaea;
+}
+
+.ms-DatePicker-day--highlighted:hover,
+.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
+ cursor: pointer;
+ color: #ffffff;
+ background: #0078d7;
+}
+
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
+ background: #a6a6a6;
+}
+
+.ms-DatePicker-monthPicker,
+.ms-DatePicker-yearPicker {
+ display: none;
+}
+
+.ms-DatePicker-monthComponents {
+ position: absolute;
+ top: 9px;
+ left: 9px;
+ right: 9px;
+}
+
+.ms-DatePicker-decadeComponents,
+.ms-DatePicker-yearComponents {
+ position: absolute;
+ left: 10px;
+}
+
+.ms-DatePicker-nextDecade,
+.ms-DatePicker-nextMonth,
+.ms-DatePicker-nextYear,
+.ms-DatePicker-prevDecade,
+.ms-DatePicker-prevMonth,
+.ms-DatePicker-prevYear {
+ width: 40px;
+ height: 40px;
+ display: block;
+ float: left;
+ margin-right: 10px;
+ text-align: center;
+ line-height: 40px;
+ font-size: 21px;
+ color: #666666;
+ position: relative;
+ top: 3px;
+}
+
+.ms-DatePicker-nextDecade:hover,
+.ms-DatePicker-nextMonth:hover,
+.ms-DatePicker-nextYear:hover,
+.ms-DatePicker-prevDecade:hover,
+.ms-DatePicker-prevMonth:hover,
+.ms-DatePicker-prevYear:hover {
+ color: #212121;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-headerToggleView {
+ height: 40px;
+ right: 0;
+ position: absolute;
+ top: 0;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentDecade,
+.ms-DatePicker-currentYear {
+ display: block;
+ font-weight: 300;
+ font-size: 21px;
+ height: 40px;
+ line-height: 42px;
+ margin-right: 15px;
+}
+
+.ms-DatePicker-currentYear {
+ color: #0078d7;
+}
+
+.ms-DatePicker-currentYear:hover {
+ color: #005a9e;
+ cursor: pointer;
+}
+
+.ms-DatePicker-optionGrid {
+ position: relative;
+ height: 210px;
+ width: 280px;
+ margin: 10px 5px 30px 0;
+}
+
+.ms-DatePicker-monthOption,
+.ms-DatePicker-yearOption {
+ background-color: #f4f4f4;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ cursor: pointer;
+ float: right;
+ margin: 0 0 10px 10px;
+ font-weight: 400;
+ font-size: 13px;
+ color: #333333;
+ text-align: center;
+}
+
+.ms-DatePicker-monthOption:hover,
+.ms-DatePicker-yearOption:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-monthOption.is-highlighted,
+.ms-DatePicker-yearOption.is-highlighted {
+ background-color: #333333;
+ color: #ffffff;
+}
+
+.ms-DatePicker-goToday {
+ bottom: 9px;
+ color: #0078d7;
+ cursor: pointer;
+ font-weight: 300;
+ font-size: 13px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ position: absolute;
+ left: 9px;
+}
+
+.ms-DatePicker-goToday:hover {
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,
+.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+}
+
+@media (min-width:460px) {
+ .ms-DatePicker-holder {
+ width: 440px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-weight: 300;
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-left: 1px solid #eaeaea;
+ width: 220px;
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ right: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-right: 12px;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-weight: 600;
+ font-size: 12px;
+ }
+
+ .ms-DatePicker-nextDecade,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-prevYear {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+ .ms-DatePicker-currentDecade,
+ .ms-DatePicker-currentYear {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 0 10px 10px;
+ }
+
+ .ms-DatePicker-monthOption:hover,
+ .ms-DatePicker-yearOption:hover {
+ outline: 1px solid transparent;
+ }
+
+ .ms-DatePicker-goToday {
+ box-sizing: border-box;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ left: 10px;
+ text-align: left;
+ top: 199px;
+ width: 210px;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+ }
+}
+
+@media (max-width:459px) {
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
+ display: block;
+ }
+}
+
+.ms-DetailsList {
+ position: relative;
+}
+
+.ms-DetailsList.is-horizontalConstrained {
+ overflow-x: auto;
+ overflow-y: inherit;
+}
+
+.ms-DetailsList-cell {
+ word-break: break-word;
+}
+
+.ms-DetailsHeader {
+ display: inline-block;
+ min-width: 100%;
+ height: 36px;
+ line-height: 36px;
+ white-space: nowrap;
+ padding-bottom: 1px;
+ border-bottom: 1px solid #eaeaea;
+ margin-bottom: 1px;
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-DetailsHeader.is-singleSelect {
+ padding-right: 40px;
+}
+
+.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover {
+ background: transparent;
+ position: fixed;
+ right: 0;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 99;
+ cursor: col-resize;
+}
+
+.ms-DetailsHeader-cell.is-check .ms-Check-circle {
+ visibility: hidden;
+}
+
+.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,
+.ms-DetailsHeader.is-allSelected .ms-Check-circle {
+ visibility: visible;
+}
+
+.ms-DetailsHeader-cellWrapper {
+ display: inline-block;
+ position: relative;
+}
+
+.ms-DetailsHeader-cellSizeWrapper {
+ display: inline-block;
+ vertical-align: top;
+ margin-left: 16px;
+}
+
+.ms-DetailsHeader-cellSizeWrapper:last-child {
+ margin-left: 0;
+}
+
+.ms-DetailsHeader-filterChevron.ms-Icon {
+ color: #a6a6a6;
+ padding-right: 4px;
+ vertical-align: middle;
+}
+
+.ms-DetailsHeader-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ color: #a6a6a6;
+ border: 0;
+ background: none;
+ line-height: inherit;
+ margin: 0;
+ font-size: inherit;
+ font-family: inherit;
+ text-align: right;
+ height: 36px;
+ vertical-align: top;
+}
+
+.ms-DetailsHeader-cell.is-check {
+ position: relative;
+ padding: 8px 10px;
+ margin: 0;
+}
+
+.ms-DetailsHeader-cell:focus {
+ outline: transparent;
+}
+
+.ms-DetailsHeader-cell.is-sortable {
+ color: #000000;
+ cursor: default;
+}
+
+.ms-DetailsHeader-cell.is-sortable:hover {
+ background-color: #eaeaea;
+}
+
+.ms-DetailsHeader-cell.is-filter {
+ position: absolute;
+ left: 0;
+ width: 20px;
+ top: 0;
+ bottom: 0;
+ padding: 0;
+ text-align: center;
+ color: #000000;
+}
+
+.ms-DetailsHeader-cell.is-filter:hover {
+ background-color: #eaeaea;
+}
+
+.ms-DetailsHeader-cell.is-filter:before {
+ content: '';
+ position: absolute;
+ border-right: 1px solid #a6a6a6;
+ top: 10px;
+ bottom: 10px;
+ right: 0;
+}
+
+.ms-DetailsHeader-cell.is-sizer {
+ position: absolute;
+ width: 16px;
+ cursor: col-resize;
+ bottom: 0;
+ top: 0;
+ height: inherit;
+ z-index: 99;
+}
+
+.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow {
+ display: inline;
+}
+
+.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow {
+ transform: rotate(180deg);
+}
+
+.ms-DetailsHeader-cell.is-resizing.is-sizer:after,
+.ms-DetailsHeader-cell.is-sizer:hover:after {
+ content: '';
+ position: absolute;
+ right: 50%;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background: #eaeaea;
+ border: 1px solid #ffffff;
+}
+
+.ms-DetailsHeader-cell:focus:before,
+.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before {
+ content: '';
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ border: 1px solid #a6a6a6;
+}
+
+.ms-DetailsHeader-sortArrow.ms-Icon {
+ font-size: 12px;
+ margin-left: 4px;
+ display: none;
+ color: #a6a6a6;
+}
+
+.ms-DetailsRow {
+ position: relative;
+ display: inline-block;
+ min-width: 100%;
+ min-height: 36px;
+ vertical-align: top;
+ white-space: nowrap;
+ padding: 10px 0;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+ box-sizing: border-box;
+}
+
+.ms-DetailsRow:focus {
+ outline: transparent;
+}
+
+.ms-DetailsRow.ms-DetailsRow.is-selected {
+ background: #deecf9;
+}
+
+.ms-DetailsRow:hover,
+.ms-Fabric.is-stationary .ms-DetailsRow:hover {
+ background: #eff6fc;
+}
+
+.ms-DetailsRow.is-selected:hover,
+.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover {
+ background: #b3d6f2;
+}
+
+.ms-DetailsRow-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ vertical-align: top;
+ white-space: normal;
+ word-break: break-word;
+ margin-left: 16px;
+}
+
+.ms-DetailsRow-cell.is-clipped {
+ overflow: hidden;
+}
+
+.ms-DetailsRow-cell:last-child {
+ margin-left: 0;
+}
+
+.ms-DetailsRow-cellIcon {
+ display: inline-block;
+ margin-left: 6px;
+ position: relative;
+ bottom: -2px;
+}
+
+.ms-DetailsRow-check {
+ display: inline-block;
+ cursor: default;
+ padding: 10px;
+ margin: -10px 0;
+ box-sizing: border-box;
+ vertical-align: top;
+ background: none;
+ border: 0;
+ visibility: hidden;
+}
+
+.ms-DetailsRow-check:focus {
+ outline: transparent;
+}
+
+.ms-DetailsRow.is-selected .ms-DetailsRow-check,
+.ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check {
+ visibility: visible;
+}
+
+.ms-DetailsRow:focus .ms-DetailsRow-focusBox,
+.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox {
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ border: 1px solid #a6a6a6;
+}
+
+.ms-DetailsRow-cellMeasurer {
+ position: absolute;
+ visibility: hidden;
+ white-space: nowrap;
+ top: -1000000000;
+}
+
+.ms-Check {
+ display: inline-block;
+ cursor: default;
+ line-height: 0;
+ vertical-align: top;
+}
+
+.ms-Check.is-checked .ms-Check-circle {
+ fill: #0078d7;
+ stroke: #ffffff;
+ stroke-width: 1px;
+}
+
+.ms-Check.is-checked .ms-Check-check {
+ stroke: #ffffff;
+}
+
+.ms-Check-circle {
+ fill: #ffffff;
+ stroke: #c8c8c8;
+}
+
+.ms-Check-check {
+ stroke: #c8c8c8;
+}
+
+.ms-Dialog {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ display: none;
+ height: auto;
+ min-width: 220px;
+ max-width: 340px;
+ padding: 28px 24px;
+ z-index: 10;
+ position: fixed;
+ transform: translate(-50%,-50%);
+ right: 50%;
+ top: 50%;
+}
+
+.ms-Dialog.is-open {
+ display: block;
+}
+
+.ms-Dialog-title {
+ font-size: 21px;
+ font-weight: 100;
+ margin-bottom: 24px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+}
+
+.ms-Dialog-subText {
+ color: #333333;
+ font-size: 12px;
+ font-weight: 300;
+ line-height: 1.5;
+}
+
+.ms-Dialog-actions {
+ margin-top: 24px;
+ text-align: left;
+}
+
+.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 28px;
+ font-weight: 100;
+ padding: 28px 24px;
+ margin-top: -28px;
+ margin-right: -24px;
+ margin-left: -24px;
+}
+
+.ms-Dialog-buttonClose {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ margin: 0;
+ padding: 4px;
+ position: absolute;
+ left: 12px;
+ top: 12px;
+ z-index: 10;
+}
+
+.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title {
+ margin-left: 20px;
+}
+
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose {
+ display: block;
+}
+
+@media (min-width:480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
+
+.ms-Dropdown {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 10px;
+ position: relative;
+ outline: 0;
+}
+
+.ms-Dropdown:active .ms-Dropdown-caretDown,
+.ms-Dropdown:active .ms-Dropdown-title,
+.ms-Dropdown:focus .ms-Dropdown-caretDown,
+.ms-Dropdown:focus .ms-Dropdown-title,
+.ms-Dropdown:hover .ms-Dropdown-caretDown,
+.ms-Dropdown:hover .ms-Dropdown-title {
+ color: #000000;
+}
+
+.ms-Dropdown:active .ms-Dropdown-title,
+.ms-Dropdown:hover .ms-Dropdown-title {
+ border-color: #767676;
+}
+
+.ms-Dropdown:focus .ms-Dropdown-title {
+ border-color: #0078d7;
+}
+
+.ms-Dropdown .ms-Label {
+ display: inline-block;
+ margin-bottom: 8px;
+}
+
+.ms-Dropdown.is-disabled .ms-Dropdown-title {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ color: #a6a6a6;
+ cursor: default;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-title {
+ border-color: #00ff00;
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-title {
+ border-color: #600000;
+ color: #600000;
+ }
+}
+
+.ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #600000;
+ }
+}
+
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: absolute;
+}
+
+.ms-Panel .ms-Dropdown-items {
+ box-shadow: none;
+ overflow-y: auto;
+ padding-top: 4px;
+ max-height: 100%;
+}
+
+.ms-Panel .ms-Dropdown-items .ms-Dropdown-item {
+ padding: 7px 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Panel .ms-Dropdown-items:before {
+ content: none;
+ border: 0;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #212121;
+ font-size: 12px;
+ position: absolute;
+ left: 13px;
+ bottom: 9px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ padding: 5px 10px 0 32px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-title.ms-Dropdown-truncator {
+ height: auto;
+ display: block;
+ position: absolute;
+ visibility: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ z-index: 400;
+ overflow-y: scroll;
+ top: auto;
+ left: auto;
+ bottom: auto;
+ right: auto;
+ max-width: 100%;
+}
+
+.ms-Dropdown-items:before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ padding: 7px 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #b3d6f2;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #b3d6f2;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-FacePile {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-FacePile .ms-FacePile-personaCardHost {
+ display: none;
+}
+
+.ms-FacePile-addButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 32px;
+ width: 32px;
+ line-height: 32px;
+ text-align: center;
+ float: right;
+ padding: 0;
+ margin-left: 4px;
+ outline: transparent;
+ border-radius: 50%;
+ vertical-align: top;
+}
+
+.ms-FacePile-addButton .ms-Persona-details,
+.ms-FacePile-addButton .ms-Persona-presence {
+ display: none;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover {
+ background-color: #005a9e;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active {
+ display: block;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover {
+ color: #212121;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled {
+ color: #c8c8c8;
+}
+
+.ms-FacePile-addPersonIcon {
+ position: relative;
+ top: -1px;
+}
+
+.ms-FacePile-overflowText {
+ font-size: 14px;
+}
+
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox {
+ display: none;
+}
+
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
+
+.ms-Link {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+ outline: none;
+}
+
+.ms-Link:focus,
+.ms-Link:hover {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+.ms-List {
+ padding: 0;
+ list-style-type: none;
+}
+
+.ms-List,
+.ms-ListItem {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-ListItem {
+ padding: 0;
+ *zoom: 1;
+ padding: 9px 28px 3px;
+ position: relative;
+ display: block;
+}
+
+.ms-ListItem:after,
+.ms-ListItem:before {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-ListItem:after {
+ clear: both;
+}
+
+.ms-ListItem-primaryText,
+.ms-ListItem-secondaryText,
+.ms-ListItem-tertiaryText {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+}
+
+.ms-ListItem-primaryText {
+ color: #212121;
+ font-weight: 300;
+ font-size: 21px;
+ padding-left: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-left: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-weight: 300;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-left: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-weight: 300;
+ font-size: 11px;
+ position: absolute;
+ left: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: right;
+ height: 70px;
+ margin-right: -8px;
+ margin-left: 10px;
+ width: 70px;
+ background-color: #333333;
+}
+
+.ms-ListItem-selectionTarget {
+ display: none;
+}
+
+.ms-ListItem-actions {
+ max-width: 80px;
+ position: absolute;
+ left: 30px;
+ text-align: left;
+ top: 10px;
+}
+
+.ms-ListItem-action {
+ color: #a6a6a6;
+ display: inline-block;
+ font-size: 15px;
+ position: relative;
+ text-align: center;
+ top: 3px;
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+}
+
+.ms-ListItem-action .ms-Icon {
+ vertical-align: top;
+}
+
+.ms-ListItem-action:hover {
+ color: #666666;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-unread {
+ border-right: 3px solid #0078d7;
+ padding-right: 27px;
+}
+
+.ms-ListItem.is-unread .ms-ListItem-metaText,
+.ms-ListItem.is-unread .ms-ListItem-secondaryText {
+ color: #0078d7;
+ font-weight: 600;
+}
+
+.ms-ListItem.is-unseen:after {
+ border-left: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ right: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ right: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-right: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: FabricMDL2Icons;
+ font-style: normal;
+ font-weight: 400;
+ speak: none;
+ position: absolute;
+ top: 14px;
+ right: 7px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected:before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected:before,
+.ms-ListItem.is-selected:hover:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: FabricMDL2Icons;
+ font-style: normal;
+ font-weight: 400;
+ speak: none;
+ content: '\e73A';
+ font-size: 17px;
+ color: #767676;
+ position: absolute;
+ top: 23px;
+ right: 7px;
+ border: 0;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #b3d6f2;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: right;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-left: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-weight: 400;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-MessageBanner {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ animation-name: fadeIn,slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ animation-name: fadeOut,slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-close,
+.ms-MessageBanner-expand {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: 0;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-close {
+ position: absolute;
+ left: 0;
+ top: 0;
+ line-height: 52px;
+ color: #666666;
+}
+
+.ms-MessageBanner-text {
+ display: inline-block;
+ padding: 18px 0;
+ margin-right: 0;
+ max-width: 770px;
+ overflow: hidden;
+ text-align: right;
+}
+
+.ms-MessageBanner-expand {
+ display: none;
+ vertical-align: top;
+}
+
+.ms-MessageBanner-expand.is-visible {
+ display: inline-block;
+}
+
+.ms-MessageBanner-action {
+ display: inline-block;
+ vertical-align: top;
+ margin-top: 10px;
+ margin-right: 10px;
+ padding-left: 36px;
+}
+
+.ms-MessageBanner-action .ms-Button {
+ color: #ffffff;
+}
+
+.ms-MessageBanner-clipper {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-MessageBanner.is-expanded {
+ height: auto;
+}
+
+.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper {
+ white-space: normal;
+}
+
+@media screen and (max-width:479px) {
+ .ms-MessageBanner-action {
+ margin: 0;
+ display: block;
+ text-align: left;
+ padding: 0 0 10px 10px;
+ }
+
+ .ms-MessageBanner-text {
+ margin-right: -25px;
+ padding: 18px 0 10px;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ display: inline-block;
+ padding: 0;
+ margin-right: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
+
+.ms-ContextualHost {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ z-index: 10;
+ margin: 16px auto;
+ position: relative;
+ min-width: 10px;
+ display: none;
+ background-color: #ffffff;
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+}
+
+.ms-ContextualHost.is-positioned {
+ position: absolute;
+ margin: 0;
+}
+
+.ms-ContextualHost.is-open {
+ display: inline-block;
+}
+
+.ms-ContextualHost-beak {
+ box-shadow: 0 0 15px -5px #3c3c3c;
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ background: #ffffff;
+ border: 1px solid #eaeaea;
+ box-sizing: border-box;
+ top: -6px;
+ display: none;
+ transform: rotate(45deg);
+ z-index: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,
+.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ top: 40px;
+ display: none;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak {
+ right: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ left: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak {
+ display: block;
+ top: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak {
+ display: block;
+ bottom: -10px;
+}
+
+.ms-ContextualHost-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ min-height: 10px;
+}
+
+.ms-ContextualHost-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: #666666;
+ z-index: 10;
+}
+
+.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title {
+ margin-left: 20px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak {
+ background-color: #0078d7;
+}
+
+@media (min-width:480px) {
+ .ms-ContextualHost {
+ margin: 16px;
+ }
+
+ .ms-ContextualHost.is-positioned {
+ margin: 0;
+ }
+
+ .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,
+ .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ display: block;
+ }
+}
+
+.ms-MessageBar {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ padding: 8px;
+ display: table;
+ background-color: #f4f4f4;
+}
+
+.ms-MessageBar .ms-Link {
+ font-size: 12px;
+}
+
+.ms-MessageBar-icon,
+.ms-MessageBar-text {
+ display: table-cell;
+ vertical-align: top;
+}
+
+.ms-MessageBar-icon {
+ padding-left: 8px;
+ font-size: 16px;
+ color: #767676;
+}
+
+.ms-MessageBar-text {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 12px;
+ font-weight: 400;
+}
+
+.ms-MessageBar.ms-MessageBar--warning {
+ background-color: #fff4ce;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning {
+ background-color: #fed9cc;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon {
+ color: #d83b01;
+}
+
+.ms-MessageBar.ms-MessageBar--error {
+ background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon {
+ color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--blocked {
+ background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon {
+ color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--success {
+ background-color: #dff6dd;
+}
+
+.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon {
+ color: #107c10;
+}
+
+.ms-OrgChart {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px;
+}
+
+.ms-OrgChart-listItem {
+ height: 50px;
+ width: 100%;
+ position: relative;
+ list-style: none;
+ margin-bottom: 8px;
+}
+
+.ms-OrgChart-listItemBtn {
+ cursor: pointer;
+ position: relative;
+ height: 50px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: right;
+ margin: 0;
+ padding: 0;
+}
+
+.ms-Overlay {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: hsla(0,0%,100%,0.4);
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ top: 0;
+ z-index: 0;
+ display: none;
+}
+
+.ms-Overlay.is-visible {
+ display: block;
+}
+
+.ms-Overlay--dark {
+ background-color: rgba(0,0,0,0.4);
+}
+
+.ms-u-overflowHidden {
+ overflow: hidden;
+}
+
+.ms-Panel {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: #ffffff;
+ width: 100%;
+ max-width: 340px;
+ box-shadow: 30px 0 30px -30px rgba(0,0,0,0.2);
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 10;
+ display: none;
+ height: 100%;
+}
+
+.ms-Panel.animate-in {
+ animation-name: fadeIn,slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-fill-mode: both;
+}
+
+.ms-Panel.animate-out {
+ animation-name: fadeOut,slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-fill-mode: both;
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel .ms-CommandBar {
+ padding-left: 0;
+ padding-right: 8px;
+}
+
+.ms-Panel.ms-Panel--md {
+ max-width: 340px;
+}
+
+.ms-Panel.ms-Panel--lg {
+ max-width: 644px;
+}
+
+.ms-Panel.ms-Panel--xl {
+ max-width: 940px;
+}
+
+.ms-Panel.ms-Panel--xxl {
+ max-width: 1192px;
+}
+
+.ms-Panel--left {
+ box-shadow: 30px 0 30px 30px rgba(0,0,0,0.2);
+ right: 0;
+ left: auto;
+}
+
+.ms-Panel--left.animate-in {
+ animation-name: fadeIn,slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
+ animation-fill-mode: both;
+}
+
+.ms-Panel--left.animate-out {
+ animation-name: fadeOut,slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-fill-mode: both;
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ left: 6px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-closeButton .ms-Icon--Cancel {
+ margin-top: 2px;
+}
+
+@media (max-width:639px) {
+ .ms-Panel-closeButton {
+ font-size: 20px;
+ line-height: 20px;
+ height: 44px;
+ left: 4px;
+ }
+}
+
+.ms-Panel-contentInner {
+ margin-top: 40px;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+ height: 100%;
+}
+
+@media (min-width:640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width:1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width:1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+.ms-PanelHost {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ bottom: 0;
+ right: 0;
+ position: fixed;
+ left: 0;
+ top: 0;
+ z-index: 10;
+}
+
+.ms-PanelHost .ms-Overlay {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ border-bottom: 1px solid #c8c8c8;
+ cursor: text;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker-searchBox.is-active,
+.ms-PeoplePicker-searchBox:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-PeoplePicker-searchBox:focus,
+ .ms-PeoplePicker-searchBox:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-PeoplePicker-searchBox:focus,
+ .ms-PeoplePicker-searchBox:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-PeoplePicker-searchBox::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox:-moz-placeholder,
+.ms-PeoplePicker-searchBox::-moz-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined {
+ border: 0;
+ margin-bottom: 0;
+ display: inline-block;
+ width: 100%;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field {
+ min-height: 40px;
+ border: 0;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText {
+ color: #a80000;
+}
+
+.ms-PeoplePicker-personaRemove {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ background-color: #f4f4f4;
+ color: #666666;
+ display: inline-block;
+ text-align: center;
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-personaRemove:hover {
+ background-color: #eaeaea;
+ color: #333333;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-personaRemove:focus {
+ background-color: #eaeaea;
+ color: #333333;
+ border: 1px solid #0078d7;
+ outline: none;
+}
+
+.ms-PeoplePicker-results {
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ margin-bottom: -1px;
+ padding-top: 9px;
+ width: 100%;
+ padding-right: 0;
+ box-sizing: border-box;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-weight: 300;
+ font-size: 12px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ text-transform: uppercase;
+ padding-right: 16px;
+}
+
+.ms-PeoplePicker-resultList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: -1px;
+ list-style-type: none;
+}
+
+.ms-PeoplePicker-result {
+ position: relative;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ padding-right: 16px;
+ cursor: pointer;
+ outline: 0;
+}
+
+.ms-PeoplePicker-result:focus,
+.ms-PeoplePicker-result:hover {
+ background-color: #eaeaea;
+}
+
+.ms-PeoplePicker-result:focus {
+ box-shadow: inset 0 0 0 1px #0078d7;
+}
+
+.ms-PeoplePicker-result.is-selected {
+ background-color: #b3d6f2;
+}
+
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover {
+ background-color: #69afe5;
+}
+
+.ms-PeoplePicker-peopleListBtn,
+.ms-PeoplePicker-resultBtn {
+ cursor: pointer;
+ position: relative;
+ box-sizing: border-box;
+ height: 34px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: right;
+ margin: 0 0 10px;
+ padding: 0 9px 0 0;
+}
+
+@media (min-width:480px) {
+ .ms-PeoplePicker-peopleListBtn,
+ .ms-PeoplePicker-resultBtn {
+ height: 48px;
+ }
+}
+
+.ms-PeoplePicker-peopleListBtn:hover,
+.ms-PeoplePicker-resultBtn:hover {
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-peopleListBtn:focus,
+.ms-PeoplePicker-resultBtn:focus {
+ outline: 1;
+}
+
+.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,
+.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact {
+ height: 32px;
+}
+
+.ms-PeoplePicker-peopleListBtn {
+ margin-bottom: 0;
+ padding: 0;
+}
+
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: transparent;
+}
+
+.ms-PeoplePicker-resultAction {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ display: block;
+ height: 100%;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 40px;
+ text-align: center;
+}
+
+.ms-PeoplePicker-resultAction .ms-Icon {
+ color: #666666;
+ font-size: 15px;
+}
+
+.ms-PeoplePicker-resultAction:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultAction:active {
+ background-color: #a6a6a6;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ height: 40px;
+ position: relative;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMore:hover {
+ background-color: #f4f4f4;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ font-size: 21px;
+ height: 40px;
+ right: 16px;
+ line-height: 40px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ width: 40px;
+}
+
+.ms-PeoplePicker-searchMoreText {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ height: 40px;
+ right: 64px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width:479px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ right: 19px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-right: 8px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width:480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width:480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn {
+ height: 40px;
+ }
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-peopleListHeader,
+.ms-PeoplePicker-selectedHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-weight: 400;
+ height: 50px;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker-peopleList,
+.ms-PeoplePicker-selectedPeople {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style: none;
+}
+
+.ms-PeoplePicker-selectedPerson {
+ margin-bottom: 8px;
+ position: relative;
+}
+
+.ms-PeoplePicker-peopleListItem {
+ margin-bottom: 6px;
+ position: relative;
+}
+
+.ms-Persona {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1;
+ position: relative;
+ width: 100%;
+ height: 48px;
+ display: table;
+ table-layout: fixed;
+ border-collapse: separate;
+}
+
+.ms-Persona .ms-ContextualHost {
+ display: none;
+}
+
+.ms-Persona-imageArea {
+ position: absolute;
+ overflow: hidden;
+ text-align: center;
+ max-width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 0;
+ width: 100%;
+ top: 0;
+ right: 0;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Persona-imageArea {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Persona-imageArea {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona-placeholder {
+ color: #ffffff;
+ position: absolute;
+ left: 0;
+ right: 0;
+ font-size: 47px;
+ top: 9px;
+ z-index: 5;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-weight: 100;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blueLight {
+ background-color: #00bcf2;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #0078d7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blueDark {
+ background-color: #002050;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #008272;
+}
+
+.ms-Persona-initials.ms-Persona-initials--greenLight {
+ background-color: #bad80a;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #107c10;
+}
+
+.ms-Persona-initials.ms-Persona-initials--greenDark {
+ background-color: #004b1c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magentaLight {
+ background-color: #e3008c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #b4009e;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purpleLight {
+ background-color: #b4a0ff;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #5c2d91;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #000000;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #d83b01;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #e81123;
+}
+
+.ms-Persona-initials.ms-Persona-initials--redDark {
+ background-color: #a80000;
+}
+
+.ms-Persona-image {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 48px;
+ z-index: 10;
+ width: 100%;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #7fba00;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ right: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+ text-align: center;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Persona-presence {
+ border-color: #000000;
+ box-shadow: inset 0 0 0 1px #1aebff;
+ color: #000000;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Persona-presence {
+ border-color: #ffffff;
+ box-shadow: inset 0 0 0 1px #37006e;
+ color: #ffffff;
+ background-color: #000000;
+ }
+}
+
+.ms-Persona-presenceIcon {
+ color: #ffffff;
+ font-size: 8px;
+ line-height: 12px;
+ vertical-align: top;
+}
+
+.ms-Persona-details {
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+ text-align: right;
+ padding-right: 60px;
+ display: table-cell;
+ width: 100%;
+}
+
+.ms-Persona-optionalText,
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText {
+ display: block;
+ white-space: nowrap;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-weight: 400;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-optionalText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText {
+ color: #666666;
+ font-weight: 400;
+ font-size: 12px;
+ white-space: nowrap;
+ line-height: 1.3;
+}
+
+.ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona-optionalText,
+.ms-Persona-tertiaryText {
+ padding-top: 5px;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ left: auto;
+ top: 10px;
+ right: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ top: 9px;
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-details {
+ padding-right: 20px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 9px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
+ padding: 0;
+ background-color: transparent;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after {
+ content: ';';
+}
+
+.ms-Persona.ms-Persona--facePile,
+.ms-Persona.ms-Persona--token,
+.ms-Persona.ms-Persona--xs {
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-image,
+.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--token .ms-Persona-image,
+.ms-Persona.ms-Persona--token .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image,
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea {
+ max-width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,
+.ms-Persona.ms-Persona--token .ms-Persona-placeholder,
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-initials,
+.ms-Persona.ms-Persona--token .ms-Persona-initials,
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-presence,
+.ms-Persona.ms-Persona--token .ms-Persona-presence,
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ right: 19px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-details,
+.ms-Persona.ms-Persona--token .ms-Persona-details,
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-right: 40px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--token .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--sm {
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-image,
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea {
+ max-width: 40px;
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-placeholder {
+ font-size: 38px;
+ top: 5px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-initials {
+ font-size: 14px;
+ line-height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-presence {
+ right: 27px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-details {
+ padding-right: 48px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText {
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText {
+ padding-top: 1px;
+}
+
+.ms-Persona.ms-Persona--lg {
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-image,
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea {
+ max-width: 72px;
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-placeholder {
+ font-size: 67px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presence {
+ right: 49px;
+ height: 20px;
+ width: 20px;
+ border-width: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon {
+ line-height: 20px;
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-details {
+ padding-right: 84px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--xl {
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-image,
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea {
+ max-width: 100px;
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-placeholder {
+ font-size: 95px;
+ top: 12px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-initials {
+ font-size: 42px;
+ line-height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presence {
+ height: 28px;
+ width: 28px;
+ right: 71px;
+ border-width: 4px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon {
+ line-height: 28px;
+ font-size: 21px;
+ position: relative;
+ top: 1px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-right: 120px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-weight: 300;
+ margin-top: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText {
+ padding-top: 2px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,
+.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText {
+ color: #333333;
+}
+
+.ms-Persona.ms-Persona--selectable {
+ cursor: pointer;
+ padding: 0 10px;
+}
+
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover {
+ background-color: #deecf9;
+ outline: 1px solid transparent;
+}
+
+.ms-Persona.ms-Persona--available .ms-Persona-presence {
+ background-color: #7fba00;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #fcd116;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon {
+ position: relative;
+ right: 1px;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #ffffff;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before {
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ right: 0;
+ box-shadow: inset 0 0 0 2px #d93b3b;
+ border-radius: 50%;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after {
+ content: '';
+ width: 100%;
+ height: 2px;
+ background-color: #d93b3b;
+ transform: rotate(-45deg);
+ position: absolute;
+ top: 5px;
+ right: 0;
+}
+
+.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after {
+ top: 9px;
+}
+
+.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after {
+ top: 13px;
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #37006e;
+ }
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #e81123;
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #93abbd;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #000000;
+ box-shadow: inset 0 0 0 1px #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #ffffff;
+ box-shadow: inset 0 0 0 1px #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--facePile {
+ display: inline-block;
+ width: auto;
+}
+
+.ms-Persona.ms-Persona--facePile:hover {
+ cursor: pointer;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea {
+ position: relative;
+ width: 100%;
+ min-width: 32px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-initials {
+ position: relative;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-details,
+.ms-Persona.ms-Persona--facePile .ms-Persona-presence {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--token {
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ width: auto;
+ background-color: #f4f4f4;
+ border-radius: 20px;
+ margin: 4px;
+}
+
+.ms-Persona.ms-Persona--token:hover {
+ cursor: pointer;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-actionIcon {
+ border-radius: 20px;
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ padding: 0;
+ line-height: 30px;
+ transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ text-align: center;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover {
+ background-color: #eaeaea;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-imageArea {
+ width: 100%;
+ min-width: 32px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-details {
+ height: 30px;
+ display: inline-block;
+ width: auto;
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-primaryText {
+ padding-top: 0;
+ line-height: 34px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-initials {
+ position: relative;
+}
+
+.ms-PersonaCard {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ animation-name: fadeIn,slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9);
+ animation-fill-mode: both;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ bottom: 0;
+ right: 0;
+ position: fixed;
+ left: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-right: 20px;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ position: relative;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-actions:before {
+ content: '';
+ position: absolute;
+ top: 47px;
+ right: 0;
+ width: 100%;
+ border-top: 1px solid #c8c8c8;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 16px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ outline: transparent;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-action:hover,
+.ms-PersonaCard-overflow:hover {
+ color: #212121;
+}
+
+.ms-PersonaCard-action:active,
+.ms-PersonaCard-overflow:active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action:before,
+.ms-PersonaCard-overflow:before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ top: 0;
+ right: 0;
+ z-index: 100;
+}
+
+.ms-PersonaCard-action.is-active,
+.ms-PersonaCard-overflow.is-active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.ms-PersonaCard-overflow.is-active:after {
+ box-sizing: border-box;
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-left: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ right: 13px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: left;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ left: 12px;
+ top: -95px;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-details {
+ display: none;
+ width: 100%;
+ margin: 0;
+ max-height: 300px;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-details.is-active {
+ display: block;
+}
+
+.ms-PersonaCard-details.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\E70D';
+}
+
+.ms-PersonaCard-details[data-detail-id=org] {
+ max-height: 300px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 16px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 2px;
+ position: absolute;
+ left: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: FabricMDL2Icons;
+ font-style: normal;
+ font-weight: 400;
+ speak: none;
+ content: '\E70E';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after {
+ display: none;
+}
+
+@media (min-width:480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
+ max-width: 360px;
+ position: relative;
+ }
+
+ .ms-ContextualHost .ms-PersonaCard {
+ box-shadow: none;
+ }
+}
+
+.ms-Pivot {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-Pivot-links {
+ font-size: 0;
+ height: 40px;
+ list-style-type: none;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 40px;
+ margin-left: 8px;
+ padding: 0 8px;
+ text-align: center;
+ vertical-align: top;
+}
+
+.ms-Pivot-link:hover {
+ cursor: pointer;
+}
+
+.ms-Pivot-link:before {
+ background-color: transparent;
+ bottom: 0;
+ content: '';
+ height: 2px;
+ right: 8px;
+ position: absolute;
+ left: 8px;
+ transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-Pivot-link:after {
+ color: transparent;
+ content: attr(title);
+ display: block;
+ font-weight: 700;
+ height: 1px;
+ overflow: hidden;
+ visibility: hidden;
+}
+
+.ms-Pivot-link.is-selected {
+ font-weight: 600;
+ position: relative;
+}
+
+.ms-Pivot-link.is-selected:before {
+ background-color: #0078d7;
+}
+
+.ms-Pivot-link.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow {
+ color: #666666;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow.is-selected {
+ color: #0078d7;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),
+.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected) {
+ color: #212121;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow:active {
+ color: #0078d7;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot-content {
+ display: none;
+ margin-top: 20px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-weight: 300;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-left: -2px;
+ padding: 0 10px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow) {
+ color: #000000;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ color: #ffffff;
+ background-color: #0078d7;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-weight: 300;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected) {
+ background-color: #ffffff;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active {
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-weight: 600;
+ }
+}
+
+.ms-ProgressIndicator {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+}
+
+.ms-ProgressIndicator-itemName {
+ color: #333333;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #767676;
+ font-size: 11px;
+ line-height: 18px;
+}
+
+.ms-ProgressIndicator-itemProgress {
+ position: relative;
+ width: 180px;
+ height: 2px;
+ padding: 8px 0;
+}
+
+.ms-ProgressIndicator-progressTrack {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-ProgressIndicator-progressBar {
+ background-color: #0078d7;
+ height: 2px;
+ position: absolute;
+ transition: width 0.3s ease;
+ width: 0;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-ProgressIndicator-progressBar {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-ProgressIndicator-progressBar {
+ background-color: #000000;
+ }
+}
+
+.ms-SearchBox {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 36px;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+ overflow: hidden;
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.is-active {
+ z-index: 10;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-label {
+ display: none;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-clear {
+ display: block;
+}
+
+.ms-SearchBox:hover {
+ background-color: #deecf9;
+}
+
+.ms-SearchBox:hover .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox.is-disabled {
+ background-color: #f4f4f4;
+ pointer-events: none;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon,
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ color: #a6a6a6;
+ background-color: transparent;
+ border-color: #f4f4f4;
+ cursor: default;
+}
+
+.ms-SearchBox-clear {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 10;
+}
+
+.ms-SearchBox-clear .ms-CommandButton-button {
+ background-color: #0078d7;
+ color: #ffffff;
+ height: 36px;
+}
+
+.ms-SearchBox-clear .ms-CommandButton-icon {
+ color: #ffffff;
+}
+
+.ms-SearchBox-icon {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ display: inline-block;
+ font-size: 16px;
+ width: 16px;
+ margin-right: 12px;
+ margin-left: 6px;
+ color: #0078d7;
+ vertical-align: top;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #69afe5;
+ outline: 1px solid transparent;
+ font-weight: 300;
+ font-size: 14px;
+ color: #000000;
+ height: 36px;
+ padding: 6px 45px 7px 3px;
+ width: 208px;
+ background-color: transparent;
+ z-index: 5;
+ transition: padding-right 0.167s;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 10px 7px 32px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 36px;
+ line-height: 36px;
+ color: #666666;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar {
+ background-color: #ffffff;
+ width: 208px;
+ height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ height: 40px;
+ line-height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field {
+ transition: none;
+ border: 0;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus {
+ background-color: transparent;
+ padding: 6px 45px 7px 3px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter {
+ display: none;
+ position: absolute;
+ top: 0;
+ z-index: 10;
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button {
+ height: 40px;
+ background-color: transparent;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter {
+ left: 8px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon {
+ color: #0078d7;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:before {
+ position: absolute;
+ content: ' ';
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: 0 8px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover {
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label {
+ color: #212121;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon {
+ color: #0078d7;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:focus {
+ background-color: transparent;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter {
+ display: block;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ width: 50px;
+ min-height: 40px;
+ z-index: 0;
+ background-color: #f4f4f4;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text {
+ display: none;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field {
+ cursor: pointer;
+ width: calc(100% - 50px);
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before {
+ visibility: hidden;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field {
+ display: block;
+ cursor: text;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text {
+ display: inline-block;
+}
+
+@media only screen and (max-width:639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear {
+ display: inline-block;
+ left: 58px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter {
+ display: inline-block;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated {
+ transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before {
+ visibility: visible;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear {
+ display: inline-block;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active {
+ color: #0078d7;
+}
+
+@media only screen and (min-width:1024px) {
+ .ms-SearchBox.ms-SearchBox--commandBar {
+ background-color: #ffffff;
+ border-left: 1px solid #eaeaea;
+ }
+}
+
+@media only screen and (max-width:639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar {
+ height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ height: 44px;
+ line-height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon {
+ font-size: 20px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button {
+ height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ font-size: 16px;
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active {
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label {
+ display: block;
+ line-height: 40px;
+ height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text {
+ display: none;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active:before {
+ visibility: visible;
+}
+
+@media only screen and (max-width:639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field {
+ width: 100%;
+ padding-left: 100px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon {
+ display: none;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit {
+ display: inline-block;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon {
+ color: #a6a6a6;
+ }
+}
+
+.ms-Spinner {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ height: 20px;
+}
+
+.ms-Spinner.ms-Spinner--large {
+ height: 28px;
+}
+
+.ms-Spinner.ms-Spinner--large .ms-Spinner-label {
+ right: 34px;
+ top: 6px;
+}
+
+.ms-Spinner-circle {
+ position: absolute;
+ border-radius: 100px;
+ background-color: #0078d7;
+ opacity: 0;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Spinner-circle {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Spinner-circle {
+ background-color: #000000;
+ }
+}
+
+.ms-Spinner-label {
+ position: relative;
+ font-size: 12px;
+ font-weight: 400;
+ color: #0078d7;
+ right: 28px;
+ top: 2px;
+}
+
+.ms-Spinner-label,
+.ms-Table {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+}
+
+.ms-Table {
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.ms-Table--fixed {
+ table-layout: fixed;
+}
+
+.ms-Table-row,
+.ms-Table tr {
+ display: table-row;
+ line-height: 30px;
+ font-weight: 300;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table-row.is-selected,
+.ms-Table tr.is-selected {
+ background-color: #b3d6f2;
+}
+
+.ms-Table-row.is-selected .ms-Table-rowCheck,
+.ms-Table tr.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table-row.is-selected .ms-Table-rowCheck:before,
+.ms-Table tr.is-selected .ms-Table-rowCheck:before {
+ display: none;
+}
+
+.ms-Table-row.is-selected .ms-Table-rowCheck:after,
+.ms-Table tr.is-selected .ms-Table-rowCheck:after {
+ content: '\E73A';
+ color: #ffffff;
+}
+
+.ms-Table-cell,
+.ms-Table td,
+.ms-Table th {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table-head,
+.ms-Table thead th {
+ font-weight: 300;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table thead td,
+.ms-Table thead th {
+ font-weight: 400;
+ text-align: right;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck:after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: FabricMDL2Icons;
+ font-style: normal;
+ font-weight: 400;
+ speak: none;
+ content: '\E739';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ right: 4px;
+ top: 1px;
+}
+
+.ms-Table--selectable .ms-Table-row:hover,
+.ms-Table--selectable tr:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Table-row.is-selected .ms-Table-rowCheck {
+ background: none;
+ }
+
+ .ms-Table-row.is-selected .ms-Table-rowCheck:before {
+ display: block;
+ }
+}
+
+.ms-TextField {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 8px;
+}
+
+.ms-TextField .ms-Label {
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled:-moz-placeholder,
+.ms-TextField.is-disabled::-moz-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-moz-placeholder:after,
+.ms-TextField.is-required::-moz-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-ms-input-placeholder:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-weight: 300;
+ font-size: 14px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 12px 7px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+ text-overflow: ellipsis;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-TextField-field:focus,
+ .ms-TextField-field:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-TextField-field:focus,
+ .ms-TextField-field:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field[disabled] {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField-field::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field:-moz-placeholder,
+.ms-TextField-field::-moz-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+ background-color: #ffffff;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-TextField-field {
+ position: relative;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-weight: 300;
+ font-size: 14px;
+ color: #666666;
+ padding: 6px 12px 7px;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled,
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 14px;
+ margin-left: 8px;
+ display: table-cell;
+ vertical-align: top;
+ padding-right: 12px;
+ padding-top: 9px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: right;
+ display: table-cell;
+ text-align: right;
+ padding-top: 8px;
+ padding-bottom: 3px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field {
+ background-color: transparent;
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--multiline .ms-TextField-field {
+ color: #666666;
+ font-size: 14px;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label,
+.ms-TextField.ms-TextField--multiline .ms-TextField-field {
+ -webkit-font-smoothing: antialiased;
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ font-weight: 400;
+}
+
+.ms-Label {
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Toggle {
+ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ top: -2px;
+ padding: 0 50px 0 0;
+}
+
+.ms-Toggle .ms-Toggle-field:before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ right: 4px;
+ background-color: #666666;
+ outline: 1px solid transparent;
+ transition-property: background, right;
+ transition-duration: 0.25s;
+ transition-timing-function: cubic-bezier(0.4,0,0.23,1);
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle .ms-Toggle-field:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle .ms-Toggle-field:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle .ms-Toggle-field:before {
+ left: auto;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected:before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ left: 4px;
+ background-color: #666666;
+ outline: 1px solid transparent;
+ transition-property: background, right;
+ transition-duration: 0.25s;
+ transition-timing-function: cubic-bezier(0.4,0,0.23,1);
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle .ms-Toggle-field.is-selected:before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle .ms-Toggle-field.is-selected:before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected:before {
+ background-color: #ffffff;
+ right: 28px;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle:focus + .ms-Toggle-field,
+.ms-Toggle:hover + .ms-Toggle-field {
+ border-color: #666666;
+}
+
+.ms-Toggle:focus + .ms-Toggle-field:before,
+.ms-Toggle:hover + .ms-Toggle-field:before {
+ background-color: #333333;
+}
+
+.ms-Toggle:focus:checked + .ms-Toggle-field,
+.ms-Toggle:hover:checked + .ms-Toggle-field {
+ background-color: #106ebe;
+ border-color: #106ebe;
+}
+
+.ms-Toggle:focus:checked + .ms-Toggle-field:before,
+.ms-Toggle:hover:checked + .ms-Toggle-field:before {
+ background-color: #ffffff;
+}
+
+.ms-Toggle:active:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Toggle .ms-Toggle-field:focus,
+.ms-Toggle .ms-Toggle-field:hover {
+ border-color: #333333;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected:focus,
+.ms-Toggle .ms-Toggle-field.is-selected:hover {
+ background-color: #106ebe;
+ border-color: #106ebe;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label {
+ color: #000000;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Toggle .ms-Toggle-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle .ms-Toggle-field:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff;
+ border-color: #c8c8c8;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field:before {
+ background-color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast:active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast:black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field:before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 14px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 45px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2px solid #a6a6a6;
+ border-radius: 20px;
+ cursor: pointer;
+ transition-property: background, right, border-color;
+ transition-duration: 0.25s;
+ transition-timing-function: cubic-bezier(0.4,0,0.23,1);
+ outline: 0;
+}
+
+.ms-Toggle-field:focus,
+.ms-Toggle-field:hover {
+ border-color: #666666;
+}
+
+.ms-Toggle-input {
+ display: none;
+}
+
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
+ float: left;
+}
diff --git a/dist/css/fabric.components.rtl.min.css b/dist/css/fabric.components.rtl.min.css
new file mode 100644
index 00000000..0c9ccc25
--- /dev/null
+++ b/dist/css/fabric.components.rtl.min.css
@@ -0,0 +1,6 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:11px 7px}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute;margin-left:-2px}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;right:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;right:6px;content:' ';width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:8px 5px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:5px 4px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-ms-flexbox;display:flex;padding:0}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-left:4px;position:relative;top:1px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:right;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:right;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;left:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-left:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 26px 0 0;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:'\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 26px 0 0;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:8px;right:8px;bottom:0;left:0;transition-property:top,right,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;right:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-right:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-left:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-left:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-left .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;right:0;left:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-left:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-left:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:left;text-align:left;width:auto;padding-left:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-left:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-left:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;right:3px;left:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-right:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-right:4px}}.ms-CommandButton-icon{display:inline-block;margin-left:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;right:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-right:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;right:3px;left:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-right:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-right:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:' ';width:1px;height:16px;top:12px;right:-8px;border-right:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-left:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;right:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-left:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:'';height:2px;position:absolute;right:0;left:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 25px 0 16px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;right:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;left:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 26px 0 16px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:'\E73E';font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;right:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-right:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:right;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;left:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-right:15px}.ms-DatePicker-year{margin-right:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;left:9px;right:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;left:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:left;margin-right:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;right:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-right:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 5px 30px 0}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:right;margin:0 0 10px 10px;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;left:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-left:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;right:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-right:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 0 10px 10px}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;left:10px;text-align:left;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-right:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;right:0;top:0;left:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-left:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-left:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-right:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:right;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;left:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:'';position:absolute;border-right:1px solid #a6a6a6;top:10px;bottom:10px;right:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:'';position:absolute;right:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:'';pointer-events:none;position:absolute;right:0;top:0;left:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-left:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-left:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-left:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-left:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;right:0;left:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);right:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:left}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-right:-24px;margin-left:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;left:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-left:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;left:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 10px 0 32px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;left:auto;bottom:auto;right:auto;max-width:100%}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;right:0;left:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:right;padding:0;margin-left:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-left:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-left:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-left:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;left:30px;top:39px}.ms-ListItem-image{float:right;height:70px;margin-right:-8px;margin-left:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;left:30px;text-align:left;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-right:3px solid #0078d7;padding-right:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-left:10px solid transparent;border-top:10px solid #0078d7;right:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;right:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-right:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;right:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\e73A';font-size:17px;color:#767676;position:absolute;top:23px;right:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:right;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-left:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;left:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-right:0;max-width:770px;overflow:hidden;text-align:right}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;padding-left:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:left;padding:0 0 10px 10px}.ms-MessageBanner-text{margin-right:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-right:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;left:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-left:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-left:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:right;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;right:0;left:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;left:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-left:0;padding-right:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:30px 0 30px 30px rgba(0,0,0,.2);right:0;left:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;left:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;left:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;right:0;position:fixed;left:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-right:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-right:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-right:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:right;margin:0 0 10px;padding:0 9px 0 0}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;left:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;right:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;right:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{right:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-right:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;right:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;left:0;right:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;right:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;right:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:right;padding-right:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{left:auto;top:10px;right:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-right:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{right:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-right:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{right:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-right:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{right:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-right:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;right:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-right:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;right:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:'';width:100%;height:100%;position:absolute;top:0;right:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:'';width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;right:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-left:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;right:0;position:fixed;left:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-right:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:'';position:absolute;top:47px;right:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:'';position:absolute;width:100%;height:100%;background-color:transparent;top:0;right:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-left:0;border-bottom:0;bottom:-4px;right:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:left;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;left:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\E70D'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;left:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E70E'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-left:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:'';height:2px;right:8px;position:absolute;left:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-left:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;left:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-right:12px;margin-left:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 45px 7px 3px;width:208px;background-color:transparent;z-index:5;transition:padding-right .167s}.ms-SearchBox-field:focus{padding:6px 10px 7px 32px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;right:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px;line-height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 45px 7px 3px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{left:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:' ';left:0;bottom:0;right:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;left:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-left:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-left:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{right:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;right:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:'\E73A';color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:right;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E739';color:#a6a6a6;font-size:12px;position:absolute;right:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-left:8px;display:table-cell;vertical-align:top;padding-right:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:right;display:table-cell;text-align:right;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 50px 0 0}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,right;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{left:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,right;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;right:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,right,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:left}
\ No newline at end of file
diff --git a/dist/css/fabric.min.css b/dist/css/fabric.min.css
new file mode 100644
index 00000000..29c996f2
--- /dev/null
+++ b/dist/css/fabric.min.css
@@ -0,0 +1,6 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric Core 5.1.0
+ * The front-end framework for building experiences for Office 365.
+ **/
+.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-borderBase{border:1px solid}.ms-u-clearfix{*zoom:1}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-u-clearfix:after{clear:both}.ms-u-normalize{box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-u-textAlignLeft{text-align:left}.ms-u-textAlignCenter{text-align:center}.ms-u-textAlignRight{text-align:right}.ms-u-screenReaderOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-u-textTruncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ms-u-noWrap{white-space:nowrap}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2488d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#69afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#b3d6f2}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-neutralPrimaryAlt,.ms-bgColor-neutralPrimaryAlt--hover:hover{background-color:#3c3c3c}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#666}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#767676}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a6a6a6}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c8c8}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#eaeaea}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f4f4f4}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#f8f8f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-yellow{background-color:#ffb900}.ms-bgColor-yellowLight{background-color:#fff100}.ms-bgColor-orange{background-color:#d83b01}.ms-bgColor-orangeLight{background-color:#ea4300}.ms-bgColor-orangeLighter{background-color:#ff8c00}.ms-bgColor-redDark{background-color:#a80000}.ms-bgColor-red{background-color:#e81123}.ms-bgColor-magentaDark{background-color:#5c005c}.ms-bgColor-magenta{background-color:#b4009e}.ms-bgColor-magentaLight{background-color:#e3008c}.ms-bgColor-purpleDark{background-color:#32145a}.ms-bgColor-purple{background-color:#5c2d91}.ms-bgColor-purpleLight{background-color:#b4a0ff}.ms-bgColor-blueDark{background-color:#002050}.ms-bgColor-blueMid{background-color:#00188f}.ms-bgColor-blue{background-color:#0078d7}.ms-bgColor-blueLight{background-color:#00bcf2}.ms-bgColor-tealDark{background-color:#004b50}.ms-bgColor-teal{background-color:#008272}.ms-bgColor-tealLight{background-color:#00b294}.ms-bgColor-greenDark{background-color:#004b1c}.ms-bgColor-green{background-color:#107c10}.ms-bgColor-greenLight{background-color:#bad80a}.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-severeWarning{background-color:#fed9cc}.ms-bgColor-warning{background-color:#fff4ce}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2488d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#69afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#b3d6f2}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-neutralPrimaryAlt,.ms-borderColor-neutralPrimaryAlt--hover:hover{border-color:#3c3c3c}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#666}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#767676}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a6a6a6}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c8c8}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#eaeaea}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f4f4f4}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#f8f8f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-yellow{border-color:#ffb900}.ms-borderColor-yellowLight{border-color:#fff100}.ms-borderColor-orange{border-color:#d83b01}.ms-borderColor-orangeLight{border-color:#ea4300}.ms-borderColor-orangeLighter{border-color:#ff8c00}.ms-borderColor-redDark{border-color:#a80000}.ms-borderColor-red{border-color:#e81123}.ms-borderColor-magentaDark{border-color:#5c005c}.ms-borderColor-magenta{border-color:#b4009e}.ms-borderColor-magentaLight{border-color:#e3008c}.ms-borderColor-purpleDark{border-color:#32145a}.ms-borderColor-purple{border-color:#5c2d91}.ms-borderColor-purpleLight{border-color:#b4a0ff}.ms-borderColor-blueDark{border-color:#002050}.ms-borderColor-blueMid{border-color:#00188f}.ms-borderColor-blue{border-color:#0078d7}.ms-borderColor-blueLight{border-color:#00bcf2}.ms-borderColor-tealDark{border-color:#004b50}.ms-borderColor-teal{border-color:#008272}.ms-borderColor-tealLight{border-color:#00b294}.ms-borderColor-greenDark{border-color:#004b1c}.ms-borderColor-green{border-color:#107c10}.ms-borderColor-greenLight{border-color:#bad80a}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l,.ms-font-xl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi,.ms-font-xs{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-mi{font-size:10px;font-weight:600}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-weight:100}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-weight:300}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-weight:400}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-weight:600}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2488d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#69afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#b3d6f2}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-neutralPrimaryAlt,.ms-fontColor-neutralPrimaryAlt--hover:hover{color:#3c3c3c}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#666}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#767676}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a6a6a6}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c8c8}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#eaeaea}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f4f4f4}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#f8f8f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d7}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-fontColor-info,.ms-fontColor-info--hover:hover{color:#767676}.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-warning,.ms-fontColor-warning--hover:hover{color:#767676}.ms-fontColor-severeWarning,.ms-fontColor-severeWarning--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Light'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.ttf) format('truetype');font-weight:100;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semibold'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.ttf) format('truetype');font-weight:600;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semilight'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.ttf) format('truetype');font-weight:200;font-style:normal}@font-face{font-family:FabricMDL2Icons;src:url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.ttf) format('truetype');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none}.ms-Icon,.ms-Icon--circle{-webkit-font-smoothing:antialiased;display:inline-block}.ms-Icon--circle{position:relative;font-size:1rem;width:1em;height:1em;margin:0 .5em 0 0;padding:0;text-align:left}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;left:0;transform:scale(2);transform-origin:50% 50%;z-index:0}.ms-Icon--xs{font-size:10px}.ms-Icon--s{font-size:12px}.ms-Icon--m{font-size:16px}.ms-Icon--l{font-size:20px}.ms-Icon--CarotRightSolid8:before{content:'\EDDA'}.ms-Icon--DynamicsCRMLogo:before{content:'\EDCC'}.ms-Icon--DecreaseIndentLegacy:before{content:'\E290'}.ms-Icon--IncreaseIndentLegacy:before{content:'\E291'}.ms-Icon--GlobalNavButton:before{content:'\E700'}.ms-Icon--InternetSharing:before{content:'\E704'}.ms-Icon--Brightness:before{content:'\E706'}.ms-Icon--MapPin:before{content:'\E707'}.ms-Icon--Airplane:before{content:'\E709'}.ms-Icon--Tablet:before{content:'\E70A'}.ms-Icon--QuickNote:before{content:'\E70B'}.ms-Icon--ChevronDown:before{content:'\E70D'}.ms-Icon--ChevronUp:before{content:'\E70E'}.ms-Icon--Edit:before{content:'\E70F'}.ms-Icon--Add:before{content:'\E710'}.ms-Icon--Cancel:before{content:'\E711'}.ms-Icon--More:before{content:'\E712'}.ms-Icon--Settings:before{content:'\E713'}.ms-Icon--Video:before{content:'\E714'}.ms-Icon--Mail:before{content:'\E715'}.ms-Icon--People:before{content:'\E716'}.ms-Icon--Phone:before{content:'\E717'}.ms-Icon--Pin:before{content:'\E718'}.ms-Icon--Shop:before{content:'\E719'}.ms-Icon--Link:before{content:'\E71B'}.ms-Icon--Filter:before{content:'\E71C'}.ms-Icon--Zoom:before{content:'\E71E'}.ms-Icon--ZoomOut:before{content:'\E71F'}.ms-Icon--Microphone:before{content:'\E720'}.ms-Icon--Search:before{content:'\E721'}.ms-Icon--Camera:before{content:'\E722'}.ms-Icon--Attach:before{content:'\E723'}.ms-Icon--Send:before{content:'\E724'}.ms-Icon--FavoriteList:before{content:'\E728'}.ms-Icon--PageSolid:before{content:'\E729'}.ms-Icon--Forward:before{content:'\E72A'}.ms-Icon--Back:before{content:'\E72B'}.ms-Icon--Refresh:before{content:'\E72C'}.ms-Icon--Share:before{content:'\E72D'}.ms-Icon--Lock:before{content:'\E72E'}.ms-Icon--EMI:before{content:'\E731'}.ms-Icon--MiniLink:before{content:'\E732'}.ms-Icon--Blocked:before{content:'\E733'}.ms-Icon--FavoriteStar:before{content:'\E734'}.ms-Icon--FavoriteStarFill:before{content:'\E735'}.ms-Icon--ReadingMode:before{content:'\E736'}.ms-Icon--Remove:before{content:'\E738'}.ms-Icon--Checkbox:before{content:'\E739'}.ms-Icon--CheckboxComposite:before{content:'\E73A'}.ms-Icon--CheckboxIndeterminate:before{content:'\E73C'}.ms-Icon--CheckMark:before{content:'\E73E'}.ms-Icon--BackToWindow:before{content:'\E73F'}.ms-Icon--FullScreen:before{content:'\E740'}.ms-Icon--Print:before{content:'\E749'}.ms-Icon--Up:before{content:'\E74A'}.ms-Icon--Down:before{content:'\E74B'}.ms-Icon--Delete:before{content:'\E74D'}.ms-Icon--Save:before{content:'\E74E'}.ms-Icon--Sad:before{content:'\E757'}.ms-Icon--SIPMove:before{content:'\E759'}.ms-Icon--EraseTool:before{content:'\E75C'}.ms-Icon--GripperTool:before{content:'\E75E'}.ms-Icon--Dialpad:before{content:'\E75F'}.ms-Icon--PageLeft:before{content:'\E760'}.ms-Icon--PageRight:before{content:'\E761'}.ms-Icon--MultiSelect:before{content:'\E762'}.ms-Icon--Play:before{content:'\E768'}.ms-Icon--Pause:before{content:'\E769'}.ms-Icon--ChevronLeft:before{content:'\E76B'}.ms-Icon--ChevronRight:before{content:'\E76C'}.ms-Icon--Emoji2:before{content:'\E76E'}.ms-Icon--System:before{content:'\E770'}.ms-Icon--Globe:before{content:'\E774'}.ms-Icon--ContactInfo:before{content:'\E779'}.ms-Icon--Unpin:before{content:'\E77A'}.ms-Icon--Contact:before{content:'\E77B'}.ms-Icon--Memo:before{content:'\E77C'}.ms-Icon--WindowsLogo:before{content:'\E782'}.ms-Icon--Error:before{content:'\E783'}.ms-Icon--Unlock:before{content:'\E785'}.ms-Icon--Calendar:before{content:'\E787'}.ms-Icon--Megaphone:before{content:'\E789'}.ms-Icon--AutoEnhanceOn:before{content:'\E78D'}.ms-Icon--AutoEnhanceOff:before{content:'\E78E'}.ms-Icon--Color:before{content:'\E790'}.ms-Icon--SaveAs:before{content:'\E792'}.ms-Icon--Light:before{content:'\E793'}.ms-Icon--Filters:before{content:'\E795'}.ms-Icon--Contrast:before{content:'\E7A1'}.ms-Icon--Redo:before{content:'\E7A6'}.ms-Icon--Undo:before{content:'\E7A7'}.ms-Icon--PhotoCollection:before{content:'\E7AA'}.ms-Icon--Album:before{content:'\E7AB'}.ms-Icon--Rotate:before{content:'\E7AD'}.ms-Icon--PanoIndicator:before{content:'\E7B0'}.ms-Icon--RedEye:before{content:'\E7B3'}.ms-Icon--ThumbnailView:before{content:'\E7B6'}.ms-Icon--Package:before{content:'\E7B8'}.ms-Icon--Warning:before{content:'\E7BA'}.ms-Icon--Financial:before{content:'\E7BB'}.ms-Icon--ShoppingCart:before{content:'\E7BF'}.ms-Icon--Train:before{content:'\E7C0'}.ms-Icon--Flag:before{content:'\E7C1'}.ms-Icon--Move:before{content:'\E7C2'}.ms-Icon--Page:before{content:'\E7C3'}.ms-Icon--TouchPointer:before{content:'\E7C9'}.ms-Icon--Merge:before{content:'\E7D5'}.ms-Icon--TurnRight:before{content:'\E7DB'}.ms-Icon--Ferry:before{content:'\E7E3'}.ms-Icon--Tab:before{content:'\E7E9'}.ms-Icon--Admin:before{content:'\E7EF'}.ms-Icon--TVMonitor:before{content:'\E7F4'}.ms-Icon--Speakers:before{content:'\E7F5'}.ms-Icon--Nav2DMapView:before{content:'\E800'}.ms-Icon--Car:before{content:'\E804'}.ms-Icon--EatDrink:before{content:'\E807'}.ms-Icon--LocationCircle:before{content:'\E80E'}.ms-Icon--Home:before{content:'\E80F'}.ms-Icon--SwitcherStartEnd:before{content:'\E810'}.ms-Icon--IncidentTriangle:before{content:'\E814'}.ms-Icon--Touch:before{content:'\E815'}.ms-Icon--MapDirections:before{content:'\E816'}.ms-Icon--History:before{content:'\E81C'}.ms-Icon--Location:before{content:'\E81D'}.ms-Icon--Work:before{content:'\E821'}.ms-Icon--Recent:before{content:'\E823'}.ms-Icon--Hotel:before{content:'\E824'}.ms-Icon--LocationDot:before{content:'\E827'}.ms-Icon--News:before{content:'\E900'}.ms-Icon--Chat:before{content:'\E901'}.ms-Icon--Group:before{content:'\E902'}.ms-Icon--View:before{content:'\E890'}.ms-Icon--Clear:before{content:'\E894'}.ms-Icon--Sync:before{content:'\E895'}.ms-Icon--Download:before{content:'\E896'}.ms-Icon--Help:before{content:'\E897'}.ms-Icon--Upload:before{content:'\E898'}.ms-Icon--Emoji:before{content:'\E899'}.ms-Icon--MailForward:before{content:'\E89C'}.ms-Icon--ClosePane:before{content:'\E89F'}.ms-Icon--OpenPane:before{content:'\E8A0'}.ms-Icon--PreviewLink:before{content:'\E8A1'}.ms-Icon--ZoomIn:before{content:'\E8A3'}.ms-Icon--Bookmarks:before{content:'\E8A4'}.ms-Icon--Document:before{content:'\E8A5'}.ms-Icon--ProtectedDocument:before{content:'\E8A6'}.ms-Icon--OpenInNewWindow:before{content:'\E8A7'}.ms-Icon--MailFill:before{content:'\E8A8'}.ms-Icon--ViewAll:before{content:'\E8A9'}.ms-Icon--Switch:before{content:'\E8AB'}.ms-Icon--Rename:before{content:'\E8AC'}.ms-Icon--Folder:before{content:'\E8B7'}.ms-Icon--Picture:before{content:'\E8B9'}.ms-Icon--ShowResults:before{content:'\E8BC'}.ms-Icon--Message:before{content:'\E8BD'}.ms-Icon--CalendarDay:before{content:'\E8BF'}.ms-Icon--CalendarWeek:before{content:'\E8C0'}.ms-Icon--MailReplyAll:before{content:'\E8C2'}.ms-Icon--Read:before{content:'\E8C3'}.ms-Icon--PaymentCard:before{content:'\E8C7'}.ms-Icon--Copy:before{content:'\E8C8'}.ms-Icon--Important:before{content:'\E8C9'}.ms-Icon--MailReply:before{content:'\E8CA'}.ms-Icon--Sort:before{content:'\E8CB'}.ms-Icon--GotoToday:before{content:'\E8D1'}.ms-Icon--Font:before{content:'\E8D2'}.ms-Icon--FontColor:before{content:'\E8D3'}.ms-Icon--FolderFill:before{content:'\E8D5'}.ms-Icon--Permissions:before{content:'\E8D7'}.ms-Icon--DisableUpdates:before{content:'\E8D8'}.ms-Icon--Unfavorite:before{content:'\E8D9'}.ms-Icon--Italic:before{content:'\E8DB'}.ms-Icon--Underline:before{content:'\E8DC'}.ms-Icon--Bold:before{content:'\E8DD'}.ms-Icon--MoveToFolder:before{content:'\E8DE'}.ms-Icon--Dislike:before{content:'\E8E0'}.ms-Icon--Like:before{content:'\E8E1'}.ms-Icon--AlignRight:before{content:'\E8E2'}.ms-Icon--AlignCenter:before{content:'\E8E3'}.ms-Icon--AlignLeft:before{content:'\E8E4'}.ms-Icon--OpenFile:before{content:'\E8E5'}.ms-Icon--FontDecrease:before{content:'\E8E7'}.ms-Icon--FontIncrease:before{content:'\E8E8'}.ms-Icon--FontSize:before{content:'\E8E9'}.ms-Icon--CellPhone:before{content:'\E8EA'}.ms-Icon--Tag:before{content:'\E8EC'}.ms-Icon--Library:before{content:'\E8F1'}.ms-Icon--PostUpdate:before{content:'\E8F3'}.ms-Icon--NewFolder:before{content:'\E8F4'}.ms-Icon--CalendarReply:before{content:'\E8F5'}.ms-Icon--UnsyncFolder:before{content:'\E8F6'}.ms-Icon--SyncFolder:before{content:'\E8F7'}.ms-Icon--BlockContact:before{content:'\E8F8'}.ms-Icon--AddFriend:before{content:'\E8FA'}.ms-Icon--BulletedList:before{content:'\E8FD'}.ms-Icon--Preview:before{content:'\E8FF'}.ms-Icon--DockLeft:before{content:'\E90C'}.ms-Icon--DockRight:before{content:'\E90D'}.ms-Icon--Repair:before{content:'\E90F'}.ms-Icon--Accounts:before{content:'\E910'}.ms-Icon--RadioBullet:before{content:'\E915'}.ms-Icon--Stopwatch:before{content:'\E916'}.ms-Icon--Clock:before{content:'\E917'}.ms-Icon--WorldClock:before{content:'\E918'}.ms-Icon--AlarmClock:before{content:'\E919'}.ms-Icon--Hospital:before{content:'\E91D'}.ms-Icon--Timer:before{content:'\E91E'}.ms-Icon--FullCircleMask:before{content:'\E91F'}.ms-Icon--LocationFill:before{content:'\E920'}.ms-Icon--ChromeMinimize:before{content:'\E921'}.ms-Icon--Annotation:before{content:'\E924'}.ms-Icon--ChromeClose:before{content:'\E8BB'}.ms-Icon--Accept:before{content:'\E8FB'}.ms-Icon--Fingerprint:before{content:'\E928'}.ms-Icon--Handwriting:before{content:'\E929'}.ms-Icon--StackIndicator:before{content:'\E7FF'}.ms-Icon--Completed:before{content:'\E930'}.ms-Icon--Label:before{content:'\E932'}.ms-Icon--FlickDown:before{content:'\E935'}.ms-Icon--FlickUp:before{content:'\E936'}.ms-Icon--FlickLeft:before{content:'\E937'}.ms-Icon--FlickRight:before{content:'\E938'}.ms-Icon--MusicInCollection:before{content:'\E940'}.ms-Icon--OneDrive:before{content:'\E941'}.ms-Icon--CompassNW:before{content:'\E942'}.ms-Icon--Code:before{content:'\E943'}.ms-Icon--LightningBolt:before{content:'\E945'}.ms-Icon--Info:before{content:'\E946'}.ms-Icon--CalculatorAddition:before{content:'\E948'}.ms-Icon--CalculatorSubtract:before{content:'\E949'}.ms-Icon--PrintfaxPrinterFile:before{content:'\E956'}.ms-Icon--Headset:before{content:'\E95B'}.ms-Icon--Health:before{content:'\E95E'}.ms-Icon--ChevronUpSmall:before{content:'\E96D'}.ms-Icon--ChevronDownSmall:before{content:'\E96E'}.ms-Icon--ChevronLeftSmall:before{content:'\E96F'}.ms-Icon--ChevronRightSmall:before{content:'\E970'}.ms-Icon--ChevronUpMed:before{content:'\E971'}.ms-Icon--ChevronDownMed:before{content:'\E972'}.ms-Icon--ChevronLeftMed:before{content:'\E973'}.ms-Icon--ChevronRightMed:before{content:'\E974'}.ms-Icon--Dictionary:before{content:'\E82D'}.ms-Icon--ChromeBack:before{content:'\E830'}.ms-Icon--PC1:before{content:'\E977'}.ms-Icon--PresenceChickletVideo:before{content:'\E979'}.ms-Icon--Reply:before{content:'\E97A'}.ms-Icon--DoubleChevronLeftMed:before{content:'\E991'}.ms-Icon--Volume0:before{content:'\E992'}.ms-Icon--Volume1:before{content:'\E993'}.ms-Icon--Volume2:before{content:'\E994'}.ms-Icon--Volume3:before{content:'\E995'}.ms-Icon--CaretHollow:before{content:'\E817'}.ms-Icon--CaretSolid:before{content:'\E818'}.ms-Icon--FolderOpen:before{content:'\E838'}.ms-Icon--Pinned:before{content:'\E840'}.ms-Icon--PinnedFill:before{content:'\E842'}.ms-Icon--Chart:before{content:'\E999'}.ms-Icon--BidiLtr:before{content:'\E9AA'}.ms-Icon--BidiRtl:before{content:'\E9AB'}.ms-Icon--RevToggleKey:before{content:'\E845'}.ms-Icon--RightDoubleQuote:before{content:'\E9B1'}.ms-Icon--Sunny:before{content:'\E9BD'}.ms-Icon--CloudWeather:before{content:'\E9BE'}.ms-Icon--Cloudy:before{content:'\E9BF'}.ms-Icon--PartlyCloudyDay:before{content:'\E9C0'}.ms-Icon--PartlyCloudyNight:before{content:'\E9C1'}.ms-Icon--ClearNight:before{content:'\E9C2'}.ms-Icon--RainShowersDay:before{content:'\E9C3'}.ms-Icon--Rain:before{content:'\E9C4'}.ms-Icon--Thunderstorms:before{content:'\E9C6'}.ms-Icon--RainSnow:before{content:'\E9C7'}.ms-Icon--BlowingSnow:before{content:'\E9C9'}.ms-Icon--Frigid:before{content:'\E9CA'}.ms-Icon--Fog:before{content:'\E9CB'}.ms-Icon--Squalls:before{content:'\E9CC'}.ms-Icon--Duststorm:before{content:'\E9CD'}.ms-Icon--Precipitation:before{content:'\E9CF'}.ms-Icon--Ringer:before{content:'\EA8F'}.ms-Icon--PDF:before{content:'\EA90'}.ms-Icon--SortLines:before{content:'\E9D0'}.ms-Icon--Ribbon:before{content:'\E9D1'}.ms-Icon--CheckList:before{content:'\E9D5'}.ms-Icon--Generate:before{content:'\E9DA'}.ms-Icon--Equalizer:before{content:'\E9E9'}.ms-Icon--BarChartHorizontal:before{content:'\E9EB'}.ms-Icon--Freezing:before{content:'\E9EF'}.ms-Icon--SnowShowerDay:before{content:'\E9FD'}.ms-Icon--HailDay:before{content:'\EA00'}.ms-Icon--WorkFlow:before{content:'\EA01'}.ms-Icon--StoreLogoMed:before{content:'\EA04'}.ms-Icon--RainShowersNight:before{content:'\EA0F'}.ms-Icon--SnowShowerNight:before{content:'\EA11'}.ms-Icon--HailNight:before{content:'\EA13'}.ms-Icon--Info2:before{content:'\EA1F'}.ms-Icon--StoreLogo:before{content:'\EA96'}.ms-Icon--MultiSelectMirrored:before{content:'\EA98'}.ms-Icon--Broom:before{content:'\EA99'}.ms-Icon--MusicInCollectionFill:before{content:'\EA36'}.ms-Icon--List:before{content:'\EA37'}.ms-Icon--Asterisk:before{content:'\EA38'}.ms-Icon--ErrorBadge:before{content:'\EA39'}.ms-Icon--CircleRing:before{content:'\EA3A'}.ms-Icon--CircleFill:before{content:'\EA3B'}.ms-Icon--BookmarksMirrored:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\EA42'}.ms-Icon--CaretHollowMirrored:before{content:'\EA45'}.ms-Icon--CaretSolidMirrored:before{content:'\EA46'}.ms-Icon--ChromeBackMirrored:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\EA49'}.ms-Icon--DockLeftMirrored:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\EA4D'}.ms-Icon--HelpMirrored:before{content:'\EA51'}.ms-Icon--ListMirrored:before{content:'\EA55'}.ms-Icon--MailForwardMirrored:before{content:'\EA56'}.ms-Icon--MailReplyMirrored:before{content:'\EA57'}.ms-Icon--MailReplyAllMirrored:before{content:'\EA58'}.ms-Icon--OpenPaneMirrored:before{content:'\EA5B'}.ms-Icon--SendMirrored:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\EA65'}.ms-Icon--ThumbnailViewMirrored:before{content:'\EA67'}.ms-Icon--Devices3:before{content:'\EA6C'}.ms-Icon--Lightbulb:before{content:'\EA80'}.ms-Icon--StatusTriangle:before{content:'\EA82'}.ms-Icon--VolumeDisabled:before{content:'\EA85'}.ms-Icon--Puzzle:before{content:'\EA86'}.ms-Icon--EmojiNeutral:before{content:'\EA87'}.ms-Icon--EmojiDisappointed:before{content:'\EA88'}.ms-Icon--HomeSolid:before{content:'\EA8A'}.ms-Icon--Cocktails:before{content:'\EA9D'}.ms-Icon--Articles:before{content:'\EAC1'}.ms-Icon--Cycling:before{content:'\EAC7'}.ms-Icon--DietPlanNotebook:before{content:'\EAC8'}.ms-Icon--Pill:before{content:'\EACB'}.ms-Icon--Running:before{content:'\EADA'}.ms-Icon--Weights:before{content:'\EADB'}.ms-Icon--BarChart4:before{content:'\EAE7'}.ms-Icon--CirclePlus:before{content:'\EAEE'}.ms-Icon--Coffee:before{content:'\EAEF'}.ms-Icon--Cotton:before{content:'\EAF3'}.ms-Icon--Market:before{content:'\EAFC'}.ms-Icon--Money:before{content:'\EAFD'}.ms-Icon--PieDouble:before{content:'\EB04'}.ms-Icon--RemoveFilter:before{content:'\EB08'}.ms-Icon--StockDown:before{content:'\EB0F'}.ms-Icon--StockUp:before{content:'\EB11'}.ms-Icon--Cricket:before{content:'\EB1E'}.ms-Icon--Golf:before{content:'\EB1F'}.ms-Icon--Baseball:before{content:'\EB20'}.ms-Icon--Soccer:before{content:'\EB21'}.ms-Icon--MoreSports:before{content:'\EB22'}.ms-Icon--AutoRacing:before{content:'\EB24'}.ms-Icon--CollegeHoops:before{content:'\EB25'}.ms-Icon--CollegeFootball:before{content:'\EB26'}.ms-Icon--ProFootball:before{content:'\EB27'}.ms-Icon--ProHockey:before{content:'\EB28'}.ms-Icon--Rugby:before{content:'\EB2D'}.ms-Icon--Tennis:before{content:'\EB33'}.ms-Icon--Arrivals:before{content:'\EB34'}.ms-Icon--Design:before{content:'\EB3C'}.ms-Icon--Website:before{content:'\EB41'}.ms-Icon--Drop:before{content:'\EB42'}.ms-Icon--Snow:before{content:'\EB46'}.ms-Icon--BusSolid:before{content:'\EB47'}.ms-Icon--FerrySolid:before{content:'\EB48'}.ms-Icon--TrainSolid:before{content:'\EB4D'}.ms-Icon--Heart:before{content:'\EB51'}.ms-Icon--HeartFill:before{content:'\EB52'}.ms-Icon--Ticket:before{content:'\EB54'}.ms-Icon--Devices4:before{content:'\EB66'}.ms-Icon--AzureLogo:before{content:'\EB6A'}.ms-Icon--BingLogo:before{content:'\EB6B'}.ms-Icon--MSNLogo:before{content:'\EB6C'}.ms-Icon--OutlookLogo:before{content:'\EB6D'}.ms-Icon--OfficeLogo:before{content:'\EB6E'}.ms-Icon--SkypeLogo:before{content:'\EB6F'}.ms-Icon--Door:before{content:'\EB75'}.ms-Icon--EditMirrored:before{content:'\EB7E'}.ms-Icon--GiftCard:before{content:'\EB8E'}.ms-Icon--DoubleBookmark:before{content:'\EB8F'}.ms-Icon--StatusErrorFull:before{content:'\EB90'}.ms-Icon--Certificate:before{content:'\EB95'}.ms-Icon--Photo2:before{content:'\EB9F'}.ms-Icon--CloudDownload:before{content:'\EBD3'}.ms-Icon--WindDirection:before{content:'\EBE6'}.ms-Icon--Family:before{content:'\EBDA'}.ms-Icon--CSS:before{content:'\EBEF'}.ms-Icon--JS:before{content:'\EBF0'}.ms-Icon--ReminderGroup:before{content:'\EBF8'}.ms-Icon--Section:before{content:'\EC0C'}.ms-Icon--OneNoteLogo:before{content:'\EC0D'}.ms-Icon--ToggleFilled:before{content:'\EC11'}.ms-Icon--ToggleBorder:before{content:'\EC12'}.ms-Icon--SliderThumb:before{content:'\EC13'}.ms-Icon--ToggleThumb:before{content:'\EC14'}.ms-Icon--Documentation:before{content:'\EC17'}.ms-Icon--Badge:before{content:'\EC1B'}.ms-Icon--Giftbox:before{content:'\EC1F'}.ms-Icon--ExcelLogo:before{content:'\EC28'}.ms-Icon--WordLogo:before{content:'\EC29'}.ms-Icon--PowerPointLogo:before{content:'\EC2A'}.ms-Icon--Cafe:before{content:'\EC32'}.ms-Icon--SpeedHigh:before{content:'\EC4A'}.ms-Icon--MusicNote:before{content:'\EC4F'}.ms-Icon--EdgeLogo:before{content:'\EC60'}.ms-Icon--CompletedSolid:before{content:'\EC61'}.ms-Icon--AlbumRemove:before{content:'\EC62'}.ms-Icon--MessageFill:before{content:'\EC70'}.ms-Icon--TabletSelected:before{content:'\EC74'}.ms-Icon--MobileSelected:before{content:'\EC75'}.ms-Icon--LaptopSelected:before{content:'\EC76'}.ms-Icon--TVMonitorSelected:before{content:'\EC77'}.ms-Icon--DeveloperTools:before{content:'\EC7A'}.ms-Icon--InsertTextBox:before{content:'\EC7D'}.ms-Icon--LowerBrightness:before{content:'\EC8A'}.ms-Icon--CloudUpload:before{content:'\EC8E'}.ms-Icon--DateTime:before{content:'\EC92'}.ms-Icon--Event:before{content:'\ECA3'}.ms-Icon--Cake:before{content:'\ECA4'}.ms-Icon--Tiles:before{content:'\ECA5'}.ms-Icon--Org:before{content:'\ECA6'}.ms-Icon--PartyLeader:before{content:'\ECA7'}.ms-Icon--DRM:before{content:'\ECA8'}.ms-Icon--CloudAdd:before{content:'\ECA9'}.ms-Icon--AppIconDefault:before{content:'\ECAA'}.ms-Icon--Photo2Add:before{content:'\ECAB'}.ms-Icon--Photo2Remove:before{content:'\ECAC'}.ms-Icon--POI:before{content:'\ECAF'}.ms-Icon--FacebookLogo:before{content:'\ECB3'}.ms-Icon--AddTo:before{content:'\ECC8'}.ms-Icon--RadioBtnOn:before{content:'\ECCB'}.ms-Icon--Embed:before{content:'\ECCE'}.ms-Icon--VideoSolid:before{content:'\EA0C'}.ms-Icon--Teamwork:before{content:'\EA12'}.ms-Icon--PeopleAdd:before{content:'\EA15'}.ms-Icon--Glasses:before{content:'\EA16'}.ms-Icon--DateTime2:before{content:'\EA17'}.ms-Icon--Shield:before{content:'\EA18'}.ms-Icon--Header1:before{content:'\EA19'}.ms-Icon--PageAdd:before{content:'\EA1A'}.ms-Icon--NumberedList:before{content:'\EA1C'}.ms-Icon--PowerBILogo:before{content:'\EA1E'}.ms-Icon--Product:before{content:'\ECDC'}.ms-Icon--Blocked2:before{content:'\ECE4'}.ms-Icon--FangBody:before{content:'\ECEB'}.ms-Icon--Glimmer:before{content:'\ECF4'}.ms-Icon--ChatInviteFriend:before{content:'\ECFE'}.ms-Icon--SharepointLogo:before{content:'\ED18'}.ms-Icon--YammerLogo:before{content:'\ED19'}.ms-Icon--Hide:before{content:'\ED1A'}.ms-Icon--ReturnToSession:before{content:'\ED24'}.ms-Icon--OpenFolderHorizontal:before{content:'\ED25'}.ms-Icon--CalendarMirrored:before{content:'\ED28'}.ms-Icon--SwayLogo:before{content:'\ED29'}.ms-Icon--OutOfOffice:before{content:'\ED34'}.ms-Icon--Trophy:before{content:'\ED3F'}.ms-Icon--ReopenPages:before{content:'\ED50'}.ms-Icon--AADLogo:before{content:'\ED68'}.ms-Icon--AccessLogo:before{content:'\ED69'}.ms-Icon--AdminALogo:before{content:'\ED6A'}.ms-Icon--AdminCLogo:before{content:'\ED6B'}.ms-Icon--AdminDLogo:before{content:'\ED6C'}.ms-Icon--AdminELogo:before{content:'\ED6D'}.ms-Icon--AdminLLogo:before{content:'\ED6E'}.ms-Icon--AdminMLogo:before{content:'\ED6F'}.ms-Icon--AdminOLogo:before{content:'\ED70'}.ms-Icon--AdminPLogo:before{content:'\ED71'}.ms-Icon--AdminSLogo:before{content:'\ED72'}.ms-Icon--AdminYLogo:before{content:'\ED73'}.ms-Icon--AlchemyLogo:before{content:'\ED74'}.ms-Icon--BoxLogo:before{content:'\ED75'}.ms-Icon--DelveLogo:before{content:'\ED76'}.ms-Icon--DropboxLogo:before{content:'\ED77'}.ms-Icon--ExchangeLogo:before{content:'\ED78'}.ms-Icon--LyncLogo:before{content:'\ED79'}.ms-Icon--OfficeVideoLogo:before{content:'\ED7A'}.ms-Icon--ParatureLogo:before{content:'\ED7B'}.ms-Icon--SocialListeningLogo:before{content:'\ED7C'}.ms-Icon--VisioLogo:before{content:'\ED7D'}.ms-Icon--Balloons:before{content:'\ED7E'}.ms-Icon--Cat:before{content:'\ED7F'}.ms-Icon--MailAlert:before{content:'\ED80'}.ms-Icon--MailCheck:before{content:'\ED81'}.ms-Icon--MailLowImportance:before{content:'\ED82'}.ms-Icon--MailPause:before{content:'\ED83'}.ms-Icon--MailRepeat:before{content:'\ED84'}.ms-Icon--SecurityGroup:before{content:'\ED85'}.ms-Icon--Table:before{content:'\ED86'}.ms-Icon--VoicemailForward:before{content:'\ED87'}.ms-Icon--VoicemailReply:before{content:'\ED88'}.ms-Icon--Waffle:before{content:'\ED89'}.ms-Icon--RemoveEvent:before{content:'\ED8A'}.ms-Icon--EventInfo:before{content:'\ED8B'}.ms-Icon--ForwardEvent:before{content:'\ED8C'}.ms-Icon--WipePhone:before{content:'\ED8D'}.ms-Icon--AddOnlineMeeting:before{content:'\ED8E'}.ms-Icon--JoinOnlineMeeting:before{content:'\ED8F'}.ms-Icon--RemoveLink:before{content:'\ED90'}.ms-Icon--PeopleBlock:before{content:'\ED91'}.ms-Icon--PeopleRepeat:before{content:'\ED92'}.ms-Icon--PeopleAlert:before{content:'\ED93'}.ms-Icon--PeoplePause:before{content:'\ED94'}.ms-Icon--TransferCall:before{content:'\ED95'}.ms-Icon--AddPhone:before{content:'\ED96'}.ms-Icon--UnknownCall:before{content:'\ED97'}.ms-Icon--NoteReply:before{content:'\ED98'}.ms-Icon--NoteForward:before{content:'\ED99'}.ms-Icon--NotePinned:before{content:'\ED9A'}.ms-Icon--RemoveOccurrence:before{content:'\ED9B'}.ms-Icon--Timeline:before{content:'\ED9C'}.ms-Icon--EditNote:before{content:'\ED9D'}.ms-Icon--CircleHalfFull:before{content:'\ED9E'}.ms-Icon--Room:before{content:'\ED9F'}.ms-Icon--Unsubscribe:before{content:'\EDA0'}.ms-Icon--Subscribe:before{content:'\EDA1'}.ms-Icon--RecurringTask:before{content:'\EDB2'}.ms-Icon--TaskManager:before{content:'\EDB7'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB8'}.ms-Icon--Combine:before{content:'\EDBB'}.ms-Icon--Split:before{content:'\EDBC'}.ms-Icon--DoubleChevronUp:before{content:'\EDBD'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBE'}.ms-Icon--DoubleChevronRight:before{content:'\EDBF'}.ms-Icon--Ascending:before{content:'\EDC0'}.ms-Icon--Descending:before{content:'\EDC1'}.ms-Icon--TextBox:before{content:'\EDC2'}.ms-Icon--TextField:before{content:'\EDC3'}.ms-Icon--NumberField:before{content:'\EDC4'}.ms-Icon--Dropdown:before{content:'\EDC5'}.ms-Icon--BookingsLogo:before{content:'\EDC7'}.ms-Icon--ClassNotebookLogo:before{content:'\EDC8'}.ms-Icon--CollabsDBLogo:before{content:'\EDC9'}.ms-Icon--DelveAnalyticsLogo:before{content:'\EDCA'}.ms-Icon--DocsLogo:before{content:'\EDCB'}.ms-Icon--Dynamics365Logo:before{content:'\EDCC'}.ms-Icon--DynamicSMBLogo:before{content:'\EDCD'}.ms-Icon--OfficeAssistantLogo:before{content:'\EDCE'}.ms-Icon--OfficeStoreLogo:before{content:'\EDCF'}.ms-Icon--OneNoteEduLogo:before{content:'\EDD0'}.ms-Icon--Planner:before{content:'\EDD1'}.ms-Icon--PowerApps:before{content:'\EDD2'}.ms-Icon--Suitcase:before{content:'\EDD3'}.ms-Icon--ProjectLogo:before{content:'\EDD4'}.ms-Icon--CaretLeft8:before{content:'\EDD5'}.ms-Icon--CaretRight8:before{content:'\EDD6'}.ms-Icon--CaretUp8:before{content:'\EDD7'}.ms-Icon--CaretDown8:before{content:'\EDD8'}.ms-Icon--CaretLeftSolid8:before{content:'\EDD9'}.ms-Icon--CaretRightSolid8:before{content:'\EDDA'}.ms-Icon--CaretUpSolid8:before{content:'\EDDB'}.ms-Icon--CaretDownSolid8:before{content:'\EDDC'}.ms-Icon--ClearFormatting:before{content:'\EDDD'}.ms-Icon--Superscript:before{content:'\EDDE'}.ms-Icon--Subscript:before{content:'\EDDF'}.ms-Icon--Strikethrough:before{content:'\EDE0'}.ms-Icon--SingleBookmark:before{content:'\EDFF'}.ms-Icon--DoubleChevronDown:before{content:'\EE04'}.ms-Icon--ReplyAll:before{content:'\EE0A'}.ms-Icon--GoogleDriveLogo:before{content:'\EE0B'}.ms-Icon--Questionnaire:before{content:'\EE19'}.ms-Icon--ReplyMirrored:before{content:'\EE35'}.ms-Icon--ReplyAllMirrored:before{content:'\EE36'}.ms-Icon--AddGroup:before{content:'\EE3D'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE4B'}.ms-Icon--TemporaryUser:before{content:'\EE58'}.ms-Icon--GroupedDescending:before{content:'\EE66'}.ms-Icon--GroupedAscending:before{content:'\EE67'}.ms-Icon--SortUp:before{content:'\EE68'}.ms-Icon--SortDown:before{content:'\EE69'}.ms-Icon--AwayStatus:before{content:'\EE6A'}.ms-Icon--SyncToPC:before{content:'\EE6E'}.ms-Icon--AustralianRules:before{content:'\EE70'}.ms-Icon--DateTimeMirrored:before{content:'\EE93'}.ms-Icon--DoubleChevronUp12:before{content:'\EE96'}.ms-Icon--DoubleChevronDown12:before{content:'\EE97'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE98'}.ms-Icon--DoubleChevronRight12:before{content:'\EE99'}.ms-Icon--CalendarAgenda:before{content:'\EE9A'}.ms-Icon--AddEvent:before{content:'\EEB5'}.ms-Icon--AssetLibrary:before{content:'\EEB6'}.ms-Icon--DataConnectionLibrary:before{content:'\EEB7'}.ms-Icon--DocLibrary:before{content:'\EEB8'}.ms-Icon--FormLibrary:before{content:'\EEB9'}.ms-Icon--FormLibraryMirrored:before{content:'\EEBA'}.ms-Icon--ReportLibrary:before{content:'\EEBB'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBC'}.ms-Icon--ContactCard:before{content:'\EEBD'}.ms-Icon--CustomList:before{content:'\EEBE'}.ms-Icon--CustomListMirrored:before{content:'\EEBF'}.ms-Icon--IssueTracking:before{content:'\EEC0'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC1'}.ms-Icon--PictureLibrary:before{content:'\EEC2'}.ms-Icon--AppForOfficeLogo:before{content:'\EEC7'}.ms-Icon--OfflineOneDriveParachute:before{content:'\EEC8'}.ms-Icon--OfflineOneDriveParachuteDisabled:before{content:'\EEC9'}.ms-Icon--LargeGrid:before{content:'\EECB'}.ms-Icon--TriangleSolidUp12:before{content:'\EECC'}.ms-Icon--TriangleSolidDown12:before{content:'\EECD'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECE'}.ms-Icon--TriangleSolidRight12:before{content:'\EECF'}.ms-Icon--TriangleUp12:before{content:'\EED0'}.ms-Icon--TriangleDown12:before{content:'\EED1'}.ms-Icon--TriangleLeft12:before{content:'\EED2'}.ms-Icon--TriangleRight12:before{content:'\EED3'}.ms-Icon--ArrowUpRight8:before{content:'\EED4'}.ms-Icon--ArrowDownRight8:before{content:'\EED5'}.ms-Icon--DocumentSet:before{content:'\EED6'}.ms-Icon--DelveAnalytics:before{content:'\EEEE'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EEEF'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EEF0'}.ms-Icon--OneDriveAdd:before{content:'\EF32'}.ms-Icon--Header2:before{content:'\EF36'}.ms-Icon--Header3:before{content:'\EF37'}.ms-Icon--Header4:before{content:'\EF38'}.ms-Icon--MarketDown:before{content:'\EF42'}.ms-Icon--CalendarWorkWeek:before{content:'\EF51'}.ms-Icon--SidePanel:before{content:'\EF52'}.ms-Icon--GlobeFavorite:before{content:'\EF53'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF54'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF55'}.ms-Icon--ViewAll2:before{content:'\EF56'}.ms-Icon--DocumentReply:before{content:'\EF57'}.ms-Icon--PlayerSettings:before{content:'\EF58'}.ms-Icon--ReceiptForward:before{content:'\EF59'}.ms-Icon--ReceiptReply:before{content:'\EF5A'}.ms-Icon--ReceiptCheck:before{content:'\EF5B'}.ms-Icon--Fax:before{content:'\EF5C'}.ms-Icon--RecurringEvent:before{content:'\EF5D'}.ms-Icon--ReplyAlt:before{content:'\EF5E'}.ms-Icon--ReplyAllAlt:before{content:'\EF5F'}.ms-Icon--EditStyle:before{content:'\EF60'}.ms-Icon--EditMail:before{content:'\EF61'}.ms-Icon--Lifesaver:before{content:'\EF62'}.ms-Icon--LifesaverLock:before{content:'\EF63'}.ms-Icon--InboxCheck:before{content:'\EF64'}.ms-Icon--FolderSearch:before{content:'\EF65'}.ms-Icon--CollapseMenu:before{content:'\EF66'}.ms-Icon--ExpandMenu:before{content:'\EF67'}.ms-Icon--Boards:before{content:'\EF68'}.ms-Icon--SunAdd:before{content:'\EF69'}.ms-Icon--SunQuestionMark:before{content:'\EF6A'}.ms-Icon--LandscapeOrientation:before{content:'\EF6B'}.ms-Icon--DocumentSearch:before{content:'\EF6C'}.ms-Icon--PublicCalendar:before{content:'\EF6D'}.ms-Icon--PublicContactCard:before{content:'\EF6E'}.ms-Icon--PublicEmail:before{content:'\EF6F'}.ms-Icon--PublicFolder:before{content:'\EF70'}.ms-Icon--WordDocument:before{content:'\EF71'}.ms-Icon--PowerPointDocument:before{content:'\EF72'}.ms-Icon--ExcelDocument:before{content:'\EF73'}.ms-Icon--GroupedList:before{content:'\EF74'}.ms-Icon--ClassroomLogo:before{content:'\EF75'}.ms-Icon--Sections:before{content:'\EF76'}.ms-Icon--EditPhoto:before{content:'\EF77'}.ms-Icon--Starburst:before{content:'\EF78'}.ms-Icon--ShareiOS:before{content:'\EF79'}.ms-Icon--AirTickets:before{content:'\EF7A'}.ms-Icon--PencilReply:before{content:'\EF7B'}.ms-Icon--Tiles2:before{content:'\EF7C'}.ms-Icon--SkypeCircleCheck:before{content:'\EF7D'}.ms-Icon--SkypeCircleClock:before{content:'\EF7E'}.ms-Icon--SkypeCircleMinus:before{content:'\EF7F'}.ms-Icon--SkypeCheck:before{content:'\EF80'}.ms-Icon--SkypeClock:before{content:'\EF81'}.ms-Icon--SkypeMinus:before{content:'\EF82'}.ms-Icon--SkypeMessage:before{content:'\EF83'}.ms-Icon--ClosedCaption:before{content:'\EF84'}.ms-Icon--ATPLogo:before{content:'\EF85'}.ms-Icon--OfficeFormLogo:before{content:'\EF86'}.ms-Icon--RecycleBin:before{content:'\EF87'}.ms-Icon--EmptyRecycleBin:before{content:'\EF88'}.ms-Icon--Hide2:before{content:'\EF89'}.ms-Icon--iOSAppStoreLogo:before{content:'\EF8A'}.ms-Icon--AndroidLogo:before{content:'\EF8B'}.ms-Icon--Breadcrumb:before{content:'\EF8C'}.ms-Icon--ClearFilter:before{content:'\EF8F'}.ms-Icon--Flow:before{content:'\EF90'}.ms-Icon--PageCheckedOut:before{content:'\F02C'}.ms-Icon--SetAction:before{content:'\F071'}.ms-Icon--PowerAppsLogo:before{content:'\F091'}.ms-Icon--PowerApps2Logo:before{content:'\F092'}.ms-Icon--FabricAssetLibrary:before{content:'\F09C'}.ms-Icon--FabricDataConnectionLibrary:before{content:'\F09D'}.ms-Icon--FabricDocLibrary:before{content:'\F09E'}.ms-Icon--FabricFormLibrary:before{content:'\F09F'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F0A0'}.ms-Icon--FabricReportLibrary:before{content:'\F0A1'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A2'}.ms-Icon--FabricPublicFolder:before{content:'\F0A3'}.ms-Icon--FabricFolderSearch:before{content:'\F0A4'}.ms-Icon--FabricMovetoFolder:before{content:'\F0A5'}.ms-Icon--FabricUnsyncFolder:before{content:'\F0A6'}.ms-Icon--FabricSyncFolder:before{content:'\F0A7'}.ms-Icon--FabricOpenFolderHorizontal:before{content:'\F0A8'}.ms-Icon--FabricFolder:before{content:'\F0A9'}.ms-Icon--FabricFolderFill:before{content:'\F0AA'}.ms-Icon--FabricNewFolder:before{content:'\F0AB'}.ms-Icon--FabricPictureLibrary:before{content:'\F0AC'}.ms-Icon--AddFavorite:before{content:'\F0C8'}.ms-Icon--AddFavoriteFill:before{content:'\F0C9'}.ms-Icon--BufferTimeBefore:before{content:'\F0CF'}.ms-Icon--BufferTimeAfter:before{content:'\F0D0'}.ms-Icon--BufferTimeBoth:before{content:'\F0D1'}.ms-Icon--PageCheckedin:before{content:'\F104'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F121'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F122'}.ms-Icon--FolderHorizontal:before{content:'\F12B'}.ms-Icon--MicrosoftStaffhubLogo:before{content:'\F130'}.ms-Icon--CaloriesAdd:before{content:'\F172'}.ms-Icon--BranchFork:before{content:'\F173'}.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_16x1.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_48x1.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_96x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_48x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_96x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_16x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_48x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_96x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_16x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_48x1.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_96x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_16x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_48x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_96x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_16x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_48x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_96x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_16x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_48x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_96x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_16x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_48x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_96x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_16x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_48x1.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_96x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_16x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_48x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_96x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_16x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_48x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_96x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_16x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_48x1.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_96x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_16x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_48x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_96x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_16x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_48x1.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_96x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_16x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_48x1.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_16x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_48x1.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_96x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_16x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_48x1.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_96x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_16x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_48x1.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_96x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_16x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_48x1.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_96x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_16x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_48x1.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_96x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_16x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_48x1.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_96x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_16x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_48x1.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_96x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_16x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_48x1.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_96x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_16x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_48x1.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_96x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_16x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_48x1.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_96x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_16x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_48x1.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_96x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_16x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_48x1.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_96x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_16x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_48x1.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_96x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_16x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_48x1.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_96x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_16x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_48x1.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_96x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_16x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_48x1.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_96x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_16x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_48x1.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_96x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_16x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_48x1.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_96x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_16x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_48x1.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_96x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_16x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_48x1.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_96x1.png)}.ms-BrandIcon--Icon16{background-size:100% 100%;width:16px;height:16px}.ms-BrandIcon--Icon48{background-size:100% 100%;width:48px;height:48px}.ms-BrandIcon--Icon96{background-size:100% 100%;width:96px;height:96px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_16x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_48x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_96x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_48x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_96x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_16x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_48x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_96x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_16x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_48x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_96x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_16x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_48x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_96x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_16x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_48x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_96x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_16x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_48x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_96x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_16x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_48x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_96x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_16x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_48x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_96x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_16x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_48x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_96x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_16x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_48x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_96x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_16x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_48x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_96x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_16x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_48x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_96x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_16x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_48x1_5.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_96x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_16x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_48x1_5.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_16x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_48x1_5.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_96x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_16x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_48x1_5.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_96x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_16x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_48x1_5.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_96x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_16x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_48x1_5.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_96x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_16x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_48x1_5.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_96x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_16x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_48x1_5.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_96x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_16x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_48x1_5.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_96x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_16x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_48x1_5.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_96x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_16x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_48x1_5.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_96x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_16x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_48x1_5.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_96x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_16x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_48x1_5.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_96x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_16x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_48x1_5.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_96x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_16x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_48x1_5.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_96x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_16x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_48x1_5.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_96x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_16x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_48x1_5.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_96x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_16x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_48x1_5.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_96x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_16x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_48x1_5.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_96x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_16x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_48x1_5.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_96x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_16x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_48x1_5.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_96x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_16x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_48x1_5.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_96x1_5.png)}}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_16x2.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_48x2.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_96x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_48x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_96x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_16x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_48x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_96x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_16x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_48x2.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_96x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_16x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_48x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_96x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_16x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_48x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_96x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_16x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_48x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_96x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_16x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_48x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_96x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_16x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_48x2.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_96x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_16x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_48x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_96x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_16x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_48x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_96x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_16x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_48x2.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_96x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_16x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_48x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_96x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_16x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_48x2.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_96x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_16x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_48x2.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_16x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_48x2.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_96x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_16x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_48x2.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_96x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_16x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_48x2.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_96x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_16x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_48x2.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_96x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_16x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_48x2.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_96x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_16x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_48x2.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_96x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_16x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_48x2.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_96x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_16x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_48x2.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_96x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_16x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_48x2.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_96x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_16x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_48x2.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_96x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_16x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_48x2.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_96x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_16x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_48x2.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_96x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_16x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_48x2.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_96x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_16x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_48x2.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_96x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_16x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_48x2.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_96x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_16x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_48x2.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_96x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_16x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_48x2.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_96x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_16x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_48x2.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_96x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_16x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_48x2.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_96x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_16x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_48x2.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_96x2.png)}}@media only screen and (-webkit-min-device-pixel-ratio:3),only screen and (min-resolution:288dpi){.ms-BrandIcon--access.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_16x3.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_48x3.png)}.ms-BrandIcon--access.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/access_96x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_48x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_96x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_16x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_48x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/infopath_96x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_16x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_48x3.png)}.ms-BrandIcon--office.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/office_96x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_16x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_48x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onedrive_96x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_16x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_48x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/onenote_96x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_16x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_48x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/outlook_96x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_16x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_48x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/powerpoint_96x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_16x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_48x3.png)}.ms-BrandIcon--project.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/project_96x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_16x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_48x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/sharepoint_96x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_16x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_48x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/visio_96x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_16x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_48x3.png)}.ms-BrandIcon--word.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/word_96x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_16x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_48x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/accdb_96x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_16x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_48x3.png)}.ms-BrandIcon--csv.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/csv_96x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_16x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_48x3.png)}.ms-BrandIcon--docx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_96x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_16x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_48x3.png)}.ms-BrandIcon--dotx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/dotx_96x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_16x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_48x3.png)}.ms-BrandIcon--mpp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpp_96x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_16x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_48x3.png)}.ms-BrandIcon--mpt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/mpt_96x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_16x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_48x3.png)}.ms-BrandIcon--odp.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odp_96x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_16x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_48x3.png)}.ms-BrandIcon--ods.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ods_96x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_16x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_48x3.png)}.ms-BrandIcon--odt.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/odt_96x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_16x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_48x3.png)}.ms-BrandIcon--one.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_96x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_16x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_48x3.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onepkg_96x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_16x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_48x3.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/onetoc_96x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_16x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_48x3.png)}.ms-BrandIcon--potx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/potx_96x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_16x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_48x3.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/ppsx_96x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_16x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_48x3.png)}.ms-BrandIcon--pptx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_96x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_16x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_48x3.png)}.ms-BrandIcon--pub.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pub_96x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_16x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_48x3.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vsdx_96x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_16x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_48x3.png)}.ms-BrandIcon--vssx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vssx_96x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_16x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_48x3.png)}.ms-BrandIcon--vstx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/vstx_96x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_16x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_48x3.png)}.ms-BrandIcon--xls.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xls_96x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_16x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_48x3.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_96x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_16x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_48x3.png)}.ms-BrandIcon--xltx.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xltx_96x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_16x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_48x3.png)}.ms-BrandIcon--xsn.ms-BrandIcon--Icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xsn_96x3.png)}}.ms-u-slideRightIn10{animation-name:fadeIn,slideRightIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn20{animation-name:fadeIn,slideRightIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn40{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn10{animation-name:fadeIn,slideLeftIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn20{animation-name:fadeIn,slideLeftIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn40{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn400{animation-name:fadeIn,slideRightIn400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn400{animation-name:fadeIn,slideLeft400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeft400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn20{animation-name:fadeIn,slideUpIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn10{animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn20{animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn10{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}.ms-u-slideRightOut40{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{animation-name:fadeOut,slideRightOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{animation-name:fadeOut,slideLeftOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{animation-name:fadeOut,slideUpOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{animation-name:fadeOut,slideDownOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{animation-name:fadeOut,slideDownOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{animation-name:fadeIn,scaleUp100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleX(1)}}.ms-u-scaleDownIn100{animation-name:fadeIn,scaleDown100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleX(1)}}.ms-u-scaleUpOut103{animation-name:fadeOut,scaleUp103;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleUp103{0%{transform:scaleX(1)}to{transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{animation-name:fadeOut,scaleDown98;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleDown98{0%{transform:scaleX(1)}to{transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both}.ms-u-fadeIn100{animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeIn{0%{opacity:0;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both}.ms-u-fadeOut100{animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeOut{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{animation-name:rotate90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotate90{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}.ms-u-rotateN90deg{animation-name:rotateN90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}.ms-u-expandCollapse400{transition:height .367s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height .167s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{animation-delay:.167s}.ms-u-delay200{animation-delay:.267s}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{right:100%}.ms-u-smPull11{right:91.66666666666666%}.ms-u-smPull10{right:83.33333333333334%}.ms-u-smPull9{right:75%}.ms-u-smPull8{right:66.66666666666666%}.ms-u-smPull7{right:58.333333333333336%}.ms-u-smPull6{right:50%}.ms-u-smPull5{right:41.66666666666667%}.ms-u-smPull4{right:33.33333333333333%}.ms-u-smPull3{right:25%}.ms-u-smPull2{right:16.666666666666664%}.ms-u-smPull1{right:8.333333333333332%}.ms-u-smPull0{right:auto}.ms-u-smPush12{left:100%}.ms-u-smPush11{left:91.66666666666666%}.ms-u-smPush10{left:83.33333333333334%}.ms-u-smPush9{left:75%}.ms-u-smPush8{left:66.66666666666666%}.ms-u-smPush7{left:58.333333333333336%}.ms-u-smPush6{left:50%}.ms-u-smPush5{left:41.66666666666667%}.ms-u-smPush4{left:33.33333333333333%}.ms-u-smPush3{left:25%}.ms-u-smPush2{left:16.666666666666664%}.ms-u-smPush1{left:8.333333333333332%}.ms-u-smPush0{left:auto}.ms-u-smOffset11{margin-left:91.66666666666666%}.ms-u-smOffset10{margin-left:83.33333333333334%}.ms-u-smOffset9{margin-left:75%}.ms-u-smOffset8{margin-left:66.66666666666666%}.ms-u-smOffset7{margin-left:58.333333333333336%}.ms-u-smOffset6{margin-left:50%}.ms-u-smOffset5{margin-left:41.66666666666667%}.ms-u-smOffset4{margin-left:33.33333333333333%}.ms-u-smOffset3{margin-left:25%}.ms-u-smOffset2{margin-left:16.666666666666664%}.ms-u-smOffset1{margin-left:8.333333333333332%}.ms-u-smOffset0{margin-left:0}@media (min-width:480px){.ms-u-md12{width:100%}}@media (min-width:480px){.ms-u-md11{width:91.66666666666666%}}@media (min-width:480px){.ms-u-md10{width:83.33333333333334%}}@media (min-width:480px){.ms-u-md9{width:75%}}@media (min-width:480px){.ms-u-md8{width:66.66666666666666%}}@media (min-width:480px){.ms-u-md7{width:58.333333333333336%}}@media (min-width:480px){.ms-u-md6{width:50%}}@media (min-width:480px){.ms-u-md5{width:41.66666666666667%}}@media (min-width:480px){.ms-u-md4{width:33.33333333333333%}}@media (min-width:480px){.ms-u-md3{width:25%}}@media (min-width:480px){.ms-u-md2{width:16.666666666666664%}}@media (min-width:480px){.ms-u-md1{width:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull12{right:100%}}@media (min-width:480px){.ms-u-mdPull11{right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPull10{right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPull9{right:75%}}@media (min-width:480px){.ms-u-mdPull8{right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPull7{right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPull6{right:50%}}@media (min-width:480px){.ms-u-mdPull5{right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPull4{right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPull3{right:25%}}@media (min-width:480px){.ms-u-mdPull2{right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPull1{right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull0{right:auto}}@media (min-width:480px){.ms-u-mdPush12{left:100%}}@media (min-width:480px){.ms-u-mdPush11{left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPush10{left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPush9{left:75%}}@media (min-width:480px){.ms-u-mdPush8{left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPush7{left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPush6{left:50%}}@media (min-width:480px){.ms-u-mdPush5{left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPush4{left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPush3{left:25%}}@media (min-width:480px){.ms-u-mdPush2{left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPush1{left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPush0{left:auto}}@media (min-width:480px){.ms-u-mdOffset11{margin-left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset10{margin-left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdOffset9{margin-left:75%}}@media (min-width:480px){.ms-u-mdOffset8{margin-left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset7{margin-left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdOffset6{margin-left:50%}}@media (min-width:480px){.ms-u-mdOffset5{margin-left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdOffset4{margin-left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdOffset3{margin-left:25%}}@media (min-width:480px){.ms-u-mdOffset2{margin-left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdOffset1{margin-left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdOffset0{margin-left:0}}@media (min-width:640px){.ms-u-lg12{width:100%}}@media (min-width:640px){.ms-u-lg11{width:91.66666666666666%}}@media (min-width:640px){.ms-u-lg10{width:83.33333333333334%}}@media (min-width:640px){.ms-u-lg9{width:75%}}@media (min-width:640px){.ms-u-lg8{width:66.66666666666666%}}@media (min-width:640px){.ms-u-lg7{width:58.333333333333336%}}@media (min-width:640px){.ms-u-lg6{width:50%}}@media (min-width:640px){.ms-u-lg5{width:41.66666666666667%}}@media (min-width:640px){.ms-u-lg4{width:33.33333333333333%}}@media (min-width:640px){.ms-u-lg3{width:25%}}@media (min-width:640px){.ms-u-lg2{width:16.666666666666664%}}@media (min-width:640px){.ms-u-lg1{width:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull12{right:100%}}@media (min-width:640px){.ms-u-lgPull11{right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPull10{right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPull9{right:75%}}@media (min-width:640px){.ms-u-lgPull8{right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPull7{right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPull6{right:50%}}@media (min-width:640px){.ms-u-lgPull5{right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPull4{right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPull3{right:25%}}@media (min-width:640px){.ms-u-lgPull2{right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPull1{right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull0{right:auto}}@media (min-width:640px){.ms-u-lgPush12{left:100%}}@media (min-width:640px){.ms-u-lgPush11{left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPush10{left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPush9{left:75%}}@media (min-width:640px){.ms-u-lgPush8{left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPush7{left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPush6{left:50%}}@media (min-width:640px){.ms-u-lgPush5{left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPush4{left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPush3{left:25%}}@media (min-width:640px){.ms-u-lgPush2{left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPush1{left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPush0{left:auto}}@media (min-width:640px){.ms-u-lgOffset11{margin-left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset10{margin-left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgOffset9{margin-left:75%}}@media (min-width:640px){.ms-u-lgOffset8{margin-left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset7{margin-left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgOffset6{margin-left:50%}}@media (min-width:640px){.ms-u-lgOffset5{margin-left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgOffset4{margin-left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgOffset3{margin-left:25%}}@media (min-width:640px){.ms-u-lgOffset2{margin-left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgOffset1{margin-left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgOffset0{margin-left:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}}@media (min-width:1024px){.ms-u-xl11{width:91.66666666666666%}}@media (min-width:1024px){.ms-u-xl10{width:83.33333333333334%}}@media (min-width:1024px){.ms-u-xl9{width:75%}}@media (min-width:1024px){.ms-u-xl8{width:66.66666666666666%}}@media (min-width:1024px){.ms-u-xl7{width:58.333333333333336%}}@media (min-width:1024px){.ms-u-xl6{width:50%}}@media (min-width:1024px){.ms-u-xl5{width:41.66666666666667%}}@media (min-width:1024px){.ms-u-xl4{width:33.33333333333333%}}@media (min-width:1024px){.ms-u-xl3{width:25%}}@media (min-width:1024px){.ms-u-xl2{width:16.666666666666664%}}@media (min-width:1024px){.ms-u-xl1{width:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull12{right:100%}}@media (min-width:1024px){.ms-u-xlPull11{right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull10{right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPull9{right:75%}}@media (min-width:1024px){.ms-u-xlPull8{right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull7{right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPull6{right:50%}}@media (min-width:1024px){.ms-u-xlPull5{right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPull4{right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPull3{right:25%}}@media (min-width:1024px){.ms-u-xlPull2{right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPull1{right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull0{right:auto}}@media (min-width:1024px){.ms-u-xlPush12{left:100%}}@media (min-width:1024px){.ms-u-xlPush11{left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush10{left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPush9{left:75%}}@media (min-width:1024px){.ms-u-xlPush8{left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush7{left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPush6{left:50%}}@media (min-width:1024px){.ms-u-xlPush5{left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPush4{left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPush3{left:25%}}@media (min-width:1024px){.ms-u-xlPush2{left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPush1{left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPush0{left:auto}}@media (min-width:1024px){.ms-u-xlOffset11{margin-left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset10{margin-left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlOffset9{margin-left:75%}}@media (min-width:1024px){.ms-u-xlOffset8{margin-left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset7{margin-left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlOffset6{margin-left:50%}}@media (min-width:1024px){.ms-u-xlOffset5{margin-left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlOffset4{margin-left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlOffset3{margin-left:25%}}@media (min-width:1024px){.ms-u-xlOffset2{margin-left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlOffset1{margin-left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlOffset0{margin-left:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}}@media (min-width:1366px){.ms-u-xxl11{width:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxl10{width:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxl9{width:75%}}@media (min-width:1366px){.ms-u-xxl8{width:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxl7{width:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxl6{width:50%}}@media (min-width:1366px){.ms-u-xxl5{width:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxl4{width:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxl3{width:25%}}@media (min-width:1366px){.ms-u-xxl2{width:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxl1{width:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull12{right:100%}}@media (min-width:1366px){.ms-u-xxlPull11{right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull10{right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPull9{right:75%}}@media (min-width:1366px){.ms-u-xxlPull8{right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull7{right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPull6{right:50%}}@media (min-width:1366px){.ms-u-xxlPull5{right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPull4{right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPull3{right:25%}}@media (min-width:1366px){.ms-u-xxlPull2{right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPull1{right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull0{right:auto}}@media (min-width:1366px){.ms-u-xxlPush12{left:100%}}@media (min-width:1366px){.ms-u-xxlPush11{left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush10{left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPush9{left:75%}}@media (min-width:1366px){.ms-u-xxlPush8{left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush7{left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPush6{left:50%}}@media (min-width:1366px){.ms-u-xxlPush5{left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPush4{left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPush3{left:25%}}@media (min-width:1366px){.ms-u-xxlPush2{left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPush1{left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPush0{left:auto}}@media (min-width:1366px){.ms-u-xxlOffset11{margin-left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset10{margin-left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlOffset9{margin-left:75%}}@media (min-width:1366px){.ms-u-xxlOffset8{margin-left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset7{margin-left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlOffset6{margin-left:50%}}@media (min-width:1366px){.ms-u-xxlOffset5{margin-left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlOffset4{margin-left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlOffset3{margin-left:25%}}@media (min-width:1366px){.ms-u-xxlOffset2{margin-left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlOffset1{margin-left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlOffset0{margin-left:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}}@media (min-width:1920px){.ms-u-xxxl11{width:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl10{width:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxl9{width:75%}}@media (min-width:1920px){.ms-u-xxxl8{width:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl7{width:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxl6{width:50%}}@media (min-width:1920px){.ms-u-xxxl5{width:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxl4{width:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxl3{width:25%}}@media (min-width:1920px){.ms-u-xxxl2{width:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxl1{width:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull12{right:100%}}@media (min-width:1920px){.ms-u-xxxlPull11{right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull10{right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPull9{right:75%}}@media (min-width:1920px){.ms-u-xxxlPull8{right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull7{right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPull6{right:50%}}@media (min-width:1920px){.ms-u-xxxlPull5{right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPull4{right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPull3{right:25%}}@media (min-width:1920px){.ms-u-xxxlPull2{right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPull1{right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull0{right:auto}}@media (min-width:1920px){.ms-u-xxxlPush12{left:100%}}@media (min-width:1920px){.ms-u-xxxlPush11{left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush10{left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPush9{left:75%}}@media (min-width:1920px){.ms-u-xxxlPush8{left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush7{left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPush6{left:50%}}@media (min-width:1920px){.ms-u-xxxlPush5{left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPush4{left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPush3{left:25%}}@media (min-width:1920px){.ms-u-xxxlPush2{left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPush1{left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPush0{left:auto}}@media (min-width:1920px){.ms-u-xxxlOffset11{margin-left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset10{margin-left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlOffset9{margin-left:75%}}@media (min-width:1920px){.ms-u-xxxlOffset8{margin-left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset7{margin-left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlOffset6{margin-left:50%}}@media (min-width:1920px){.ms-u-xxxlOffset5{margin-left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlOffset4{margin-left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlOffset3{margin-left:25%}}@media (min-width:1920px){.ms-u-xxxlOffset2{margin-left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlOffset1{margin-left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlOffset0{margin-left:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-left:8px;padding-right:8px;box-sizing:border-box;float:left}.ms-Grid-col .ms-Grid{padding:0}.ms-Fabric{color:#333}
\ No newline at end of file
diff --git a/dist/css/fabric.rtl.min.css b/dist/css/fabric.rtl.min.css
new file mode 100644
index 00000000..78c4eff1
--- /dev/null
+++ b/dist/css/fabric.rtl.min.css
@@ -0,0 +1,6 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric Core 5.1.0
+ * The front-end framework for building experiences for Office 365.
+ **/
+.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-borderBase{border:1px solid}.ms-u-clearfix{*zoom:1}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-u-clearfix:after{clear:both}.ms-u-normalize{box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-u-textAlignLeft{text-align:right}.ms-u-textAlignCenter{text-align:center}.ms-u-textAlignRight{text-align:left}.ms-u-screenReaderOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-u-textTruncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ms-u-noWrap{white-space:nowrap}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2488d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#69afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#b3d6f2}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-neutralPrimaryAlt,.ms-bgColor-neutralPrimaryAlt--hover:hover{background-color:#3c3c3c}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#666}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#767676}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a6a6a6}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c8c8}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#eaeaea}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f4f4f4}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#f8f8f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-yellow{background-color:#ffb900}.ms-bgColor-yellowLight{background-color:#fff100}.ms-bgColor-orange{background-color:#d83b01}.ms-bgColor-orangeLight{background-color:#ea4300}.ms-bgColor-orangeLighter{background-color:#ff8c00}.ms-bgColor-redDark{background-color:#a80000}.ms-bgColor-red{background-color:#e81123}.ms-bgColor-magentaDark{background-color:#5c005c}.ms-bgColor-magenta{background-color:#b4009e}.ms-bgColor-magentaLight{background-color:#e3008c}.ms-bgColor-purpleDark{background-color:#32145a}.ms-bgColor-purple{background-color:#5c2d91}.ms-bgColor-purpleLight{background-color:#b4a0ff}.ms-bgColor-blueDark{background-color:#002050}.ms-bgColor-blueMid{background-color:#00188f}.ms-bgColor-blue{background-color:#0078d7}.ms-bgColor-blueLight{background-color:#00bcf2}.ms-bgColor-tealDark{background-color:#004b50}.ms-bgColor-teal{background-color:#008272}.ms-bgColor-tealLight{background-color:#00b294}.ms-bgColor-greenDark{background-color:#004b1c}.ms-bgColor-green{background-color:#107c10}.ms-bgColor-greenLight{background-color:#bad80a}.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-severeWarning{background-color:#fed9cc}.ms-bgColor-warning{background-color:#fff4ce}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2488d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#69afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#b3d6f2}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-neutralPrimaryAlt,.ms-borderColor-neutralPrimaryAlt--hover:hover{border-color:#3c3c3c}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#666}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#767676}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a6a6a6}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c8c8}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#eaeaea}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f4f4f4}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#f8f8f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-yellow{border-color:#ffb900}.ms-borderColor-yellowLight{border-color:#fff100}.ms-borderColor-orange{border-color:#d83b01}.ms-borderColor-orangeLight{border-color:#ea4300}.ms-borderColor-orangeLighter{border-color:#ff8c00}.ms-borderColor-redDark{border-color:#a80000}.ms-borderColor-red{border-color:#e81123}.ms-borderColor-magentaDark{border-color:#5c005c}.ms-borderColor-magenta{border-color:#b4009e}.ms-borderColor-magentaLight{border-color:#e3008c}.ms-borderColor-purpleDark{border-color:#32145a}.ms-borderColor-purple{border-color:#5c2d91}.ms-borderColor-purpleLight{border-color:#b4a0ff}.ms-borderColor-blueDark{border-color:#002050}.ms-borderColor-blueMid{border-color:#00188f}.ms-borderColor-blue{border-color:#0078d7}.ms-borderColor-blueLight{border-color:#00bcf2}.ms-borderColor-tealDark{border-color:#004b50}.ms-borderColor-teal{border-color:#008272}.ms-borderColor-tealLight{border-color:#00b294}.ms-borderColor-greenDark{border-color:#004b1c}.ms-borderColor-green{border-color:#107c10}.ms-borderColor-greenLight{border-color:#bad80a}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Light'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.ttf) format('truetype');font-weight:100;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semibold'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.ttf) format('truetype');font-weight:600;font-style:normal}@font-face{font-family:Segoe UI WestEuropean;src:local('Segoe UI Semilight'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.ttf) format('truetype');font-weight:200;font-style:normal}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l,.ms-font-xl{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi,.ms-font-xs{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-font-mi{font-size:10px;font-weight:600}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-weight:100}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-weight:300}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-weight:400}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-weight:600}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2488d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#69afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#b3d6f2}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-neutralPrimaryAlt,.ms-fontColor-neutralPrimaryAlt--hover:hover{color:#3c3c3c}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#666}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#767676}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a6a6a6}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c8c8}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#eaeaea}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f4f4f4}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#f8f8f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d7}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-fontColor-info,.ms-fontColor-info--hover:hover{color:#767676}.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-warning,.ms-fontColor-warning--hover:hover{color:#767676}.ms-fontColor-severeWarning,.ms-fontColor-severeWarning--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}[lang=jpn] .ms-font-l,[lang=jpn] .ms-font-m,[lang=jpn] .ms-font-m-plus,[lang=jpn] .ms-font-mi,[lang=jpn] .ms-font-s,[lang=jpn] .ms-font-s-plus,[lang=jpn] .ms-font-su,[lang=jpn] .ms-font-xl,[lang=jpn] .ms-font-xs,[lang=jpn] .ms-font-xxl,[lang=jpn] .ms-fontWeight-light,[lang=jpn] .ms-fontWeight-light-hover:hover,[lang=jpn] .ms-fontWeight-regular,[lang=jpn] .ms-fontWeight-regular-hover:hover,[lang=jpn] .ms-fontWeight-semibold,[lang=jpn] .ms-fontWeight-semibold-hover:hover,[lang=jpn] .ms-fontWeight-semilight,[lang=jpn] .ms-fontWeight-semilight-hover:hover{font-family:Yu Gothic,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=kor] .ms-font-l,[lang=kor] .ms-font-m,[lang=kor] .ms-font-m-plus,[lang=kor] .ms-font-mi,[lang=kor] .ms-font-s,[lang=kor] .ms-font-s-plus,[lang=kor] .ms-font-su,[lang=kor] .ms-font-xl,[lang=kor] .ms-font-xs,[lang=kor] .ms-font-xxl,[lang=kor] .ms-fontWeight-light,[lang=kor] .ms-fontWeight-light-hover:hover,[lang=kor] .ms-fontWeight-regular,[lang=kor] .ms-fontWeight-regular-hover:hover,[lang=kor] .ms-fontWeight-semibold,[lang=kor] .ms-fontWeight-semibold-hover:hover,[lang=kor] .ms-fontWeight-semilight,[lang=kor] .ms-fontWeight-semilight-hover:hover{font-family:Malgun Gothic,Gulim,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=cmn] .ms-font-l,[lang=cmn] .ms-font-m,[lang=cmn] .ms-font-m-plus,[lang=cmn] .ms-font-mi,[lang=cmn] .ms-font-s,[lang=cmn] .ms-font-s-plus,[lang=cmn] .ms-font-su,[lang=cmn] .ms-font-xl,[lang=cmn] .ms-font-xs,[lang=cmn] .ms-font-xxl,[lang=cmn] .ms-fontWeight-light,[lang=cmn] .ms-fontWeight-light-hover:hover,[lang=cmn] .ms-fontWeight-regular,[lang=cmn] .ms-fontWeight-regular-hover:hover,[lang=cmn] .ms-fontWeight-semibold,[lang=cmn] .ms-fontWeight-semibold-hover:hover,[lang=cmn] .ms-fontWeight-semilight,[lang=cmn] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Yahei,Verdana,Simsun,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=yue] .ms-font-l,[lang=yue] .ms-font-m,[lang=yue] .ms-font-m-plus,[lang=yue] .ms-font-mi,[lang=yue] .ms-font-s,[lang=yue] .ms-font-s-plus,[lang=yue] .ms-font-su,[lang=yue] .ms-font-xl,[lang=yue] .ms-font-xs,[lang=yue] .ms-font-xxl,[lang=yue] .ms-fontWeight-light,[lang=yue] .ms-fontWeight-light-hover:hover,[lang=yue] .ms-fontWeight-regular,[lang=yue] .ms-fontWeight-regular-hover:hover,[lang=yue] .ms-fontWeight-semibold,[lang=yue] .ms-fontWeight-semibold-hover:hover,[lang=yue] .ms-fontWeight-semilight,[lang=yue] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Jhenghei,Pmingliu,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=hin] .ms-font-l,[lang=hin] .ms-font-m,[lang=hin] .ms-font-m-plus,[lang=hin] .ms-font-mi,[lang=hin] .ms-font-s,[lang=hin] .ms-font-s-plus,[lang=hin] .ms-font-su,[lang=hin] .ms-font-xl,[lang=hin] .ms-font-xs,[lang=hin] .ms-font-xxl,[lang=hin] .ms-fontWeight-light,[lang=hin] .ms-fontWeight-light-hover:hover,[lang=hin] .ms-fontWeight-regular,[lang=hin] .ms-fontWeight-regular-hover:hover,[lang=hin] .ms-fontWeight-semibold,[lang=hin] .ms-fontWeight-semibold-hover:hover,[lang=hin] .ms-fontWeight-semilight,[lang=hin] .ms-fontWeight-semilight-hover:hover{font-family:Nirmala UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=tha] .ms-font-l,[lang=tha] .ms-font-m,[lang=tha] .ms-font-m-plus,[lang=tha] .ms-font-mi,[lang=tha] .ms-font-s,[lang=tha] .ms-font-s-plus,[lang=tha] .ms-font-su,[lang=tha] .ms-font-xl,[lang=tha] .ms-font-xs,[lang=tha] .ms-font-xxl,[lang=tha] .ms-fontWeight-light,[lang=tha] .ms-fontWeight-light-hover:hover,[lang=tha] .ms-fontWeight-regular,[lang=tha] .ms-fontWeight-regular-hover:hover,[lang=tha] .ms-fontWeight-semibold,[lang=tha] .ms-fontWeight-semibold-hover:hover,[lang=tha] .ms-fontWeight-semilight,[lang=tha] .ms-fontWeight-semilight-hover:hover{font-family:Leelawadee UI,Kmer UI,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ara] .ms-font-l,[lang=ara] .ms-font-m,[lang=ara] .ms-font-m-plus,[lang=ara] .ms-font-mi,[lang=ara] .ms-font-s,[lang=ara] .ms-font-s-plus,[lang=ara] .ms-font-su,[lang=ara] .ms-font-xl,[lang=ara] .ms-font-xs,[lang=ara] .ms-font-xxl,[lang=ara] .ms-fontWeight-light,[lang=ara] .ms-fontWeight-light-hover:hover,[lang=ara] .ms-fontWeight-regular,[lang=ara] .ms-fontWeight-regular-hover:hover,[lang=ara] .ms-fontWeight-semibold,[lang=ara] .ms-fontWeight-semibold-hover:hover,[lang=ara] .ms-fontWeight-semilight,[lang=ara] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Arabic,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ces] .ms-font-l,[lang=ces] .ms-font-m,[lang=ces] .ms-font-m-plus,[lang=ces] .ms-font-mi,[lang=ces] .ms-font-s,[lang=ces] .ms-font-s-plus,[lang=ces] .ms-font-su,[lang=ces] .ms-font-xl,[lang=ces] .ms-font-xs,[lang=ces] .ms-font-xxl,[lang=ces] .ms-fontWeight-light,[lang=ces] .ms-fontWeight-light-hover:hover,[lang=ces] .ms-fontWeight-regular,[lang=ces] .ms-fontWeight-regular-hover:hover,[lang=ces] .ms-fontWeight-semibold,[lang=ces] .ms-fontWeight-semibold-hover:hover,[lang=ces] .ms-fontWeight-semilight,[lang=ces] .ms-fontWeight-semilight-hover:hover,[lang=est] .ms-font-l,[lang=est] .ms-font-m,[lang=est] .ms-font-m-plus,[lang=est] .ms-font-mi,[lang=est] .ms-font-s,[lang=est] .ms-font-s-plus,[lang=est] .ms-font-su,[lang=est] .ms-font-xl,[lang=est] .ms-font-xs,[lang=est] .ms-font-xxl,[lang=est] .ms-fontWeight-light,[lang=est] .ms-fontWeight-light-hover:hover,[lang=est] .ms-fontWeight-regular,[lang=est] .ms-fontWeight-regular-hover:hover,[lang=est] .ms-fontWeight-semibold,[lang=est] .ms-fontWeight-semibold-hover:hover,[lang=est] .ms-fontWeight-semilight,[lang=est] .ms-fontWeight-semilight-hover:hover,[lang=hrv] .ms-font-l,[lang=hrv] .ms-font-m,[lang=hrv] .ms-font-m-plus,[lang=hrv] .ms-font-mi,[lang=hrv] .ms-font-s,[lang=hrv] .ms-font-s-plus,[lang=hrv] .ms-font-su,[lang=hrv] .ms-font-xl,[lang=hrv] .ms-font-xs,[lang=hrv] .ms-font-xxl,[lang=hrv] .ms-fontWeight-light,[lang=hrv] .ms-fontWeight-light-hover:hover,[lang=hrv] .ms-fontWeight-regular,[lang=hrv] .ms-fontWeight-regular-hover:hover,[lang=hrv] .ms-fontWeight-semibold,[lang=hrv] .ms-fontWeight-semibold-hover:hover,[lang=hrv] .ms-fontWeight-semilight,[lang=hrv] .ms-fontWeight-semilight-hover:hover,[lang=hun] .ms-font-l,[lang=hun] .ms-font-m,[lang=hun] .ms-font-m-plus,[lang=hun] .ms-font-mi,[lang=hun] .ms-font-s,[lang=hun] .ms-font-s-plus,[lang=hun] .ms-font-su,[lang=hun] .ms-font-xl,[lang=hun] .ms-font-xs,[lang=hun] .ms-font-xxl,[lang=hun] .ms-fontWeight-light,[lang=hun] .ms-fontWeight-light-hover:hover,[lang=hun] .ms-fontWeight-regular,[lang=hun] .ms-fontWeight-regular-hover:hover,[lang=hun] .ms-fontWeight-semibold,[lang=hun] .ms-fontWeight-semibold-hover:hover,[lang=hun] .ms-fontWeight-semilight,[lang=hun] .ms-fontWeight-semilight-hover:hover,[lang=kaz] .ms-font-l,[lang=kaz] .ms-font-m,[lang=kaz] .ms-font-m-plus,[lang=kaz] .ms-font-mi,[lang=kaz] .ms-font-s,[lang=kaz] .ms-font-s-plus,[lang=kaz] .ms-font-su,[lang=kaz] .ms-font-xl,[lang=kaz] .ms-font-xs,[lang=kaz] .ms-font-xxl,[lang=kaz] .ms-fontWeight-light,[lang=kaz] .ms-fontWeight-light-hover:hover,[lang=kaz] .ms-fontWeight-regular,[lang=kaz] .ms-fontWeight-regular-hover:hover,[lang=kaz] .ms-fontWeight-semibold,[lang=kaz] .ms-fontWeight-semibold-hover:hover,[lang=kaz] .ms-fontWeight-semilight,[lang=kaz] .ms-fontWeight-semilight-hover:hover,[lang=lav] .ms-font-l,[lang=lav] .ms-font-m,[lang=lav] .ms-font-m-plus,[lang=lav] .ms-font-mi,[lang=lav] .ms-font-s,[lang=lav] .ms-font-s-plus,[lang=lav] .ms-font-su,[lang=lav] .ms-font-xl,[lang=lav] .ms-font-xs,[lang=lav] .ms-font-xxl,[lang=lav] .ms-fontWeight-light,[lang=lav] .ms-fontWeight-light-hover:hover,[lang=lav] .ms-fontWeight-regular,[lang=lav] .ms-fontWeight-regular-hover:hover,[lang=lav] .ms-fontWeight-semibold,[lang=lav] .ms-fontWeight-semibold-hover:hover,[lang=lav] .ms-fontWeight-semilight,[lang=lav] .ms-fontWeight-semilight-hover:hover,[lang=lit] .ms-font-l,[lang=lit] .ms-font-m,[lang=lit] .ms-font-m-plus,[lang=lit] .ms-font-mi,[lang=lit] .ms-font-s,[lang=lit] .ms-font-s-plus,[lang=lit] .ms-font-su,[lang=lit] .ms-font-xl,[lang=lit] .ms-font-xs,[lang=lit] .ms-font-xxl,[lang=lit] .ms-fontWeight-light,[lang=lit] .ms-fontWeight-light-hover:hover,[lang=lit] .ms-fontWeight-regular,[lang=lit] .ms-fontWeight-regular-hover:hover,[lang=lit] .ms-fontWeight-semibold,[lang=lit] .ms-fontWeight-semibold-hover:hover,[lang=lit] .ms-fontWeight-semilight,[lang=lit] .ms-fontWeight-semilight-hover:hover,[lang=pol] .ms-font-l,[lang=pol] .ms-font-m,[lang=pol] .ms-font-m-plus,[lang=pol] .ms-font-mi,[lang=pol] .ms-font-s,[lang=pol] .ms-font-s-plus,[lang=pol] .ms-font-su,[lang=pol] .ms-font-xl,[lang=pol] .ms-font-xs,[lang=pol] .ms-font-xxl,[lang=pol] .ms-fontWeight-light,[lang=pol] .ms-fontWeight-light-hover:hover,[lang=pol] .ms-fontWeight-regular,[lang=pol] .ms-fontWeight-regular-hover:hover,[lang=pol] .ms-fontWeight-semibold,[lang=pol] .ms-fontWeight-semibold-hover:hover,[lang=pol] .ms-fontWeight-semilight,[lang=pol] .ms-fontWeight-semilight-hover:hover,[lang=slk] .ms-font-l,[lang=slk] .ms-font-m,[lang=slk] .ms-font-m-plus,[lang=slk] .ms-font-mi,[lang=slk] .ms-font-s,[lang=slk] .ms-font-s-plus,[lang=slk] .ms-font-su,[lang=slk] .ms-font-xl,[lang=slk] .ms-font-xs,[lang=slk] .ms-font-xxl,[lang=slk] .ms-fontWeight-light,[lang=slk] .ms-fontWeight-light-hover:hover,[lang=slk] .ms-fontWeight-regular,[lang=slk] .ms-fontWeight-regular-hover:hover,[lang=slk] .ms-fontWeight-semibold,[lang=slk] .ms-fontWeight-semibold-hover:hover,[lang=slk] .ms-fontWeight-semilight,[lang=slk] .ms-fontWeight-semilight-hover:hover,[lang=tur] .ms-font-l,[lang=tur] .ms-font-m,[lang=tur] .ms-font-m-plus,[lang=tur] .ms-font-mi,[lang=tur] .ms-font-s,[lang=tur] .ms-font-s-plus,[lang=tur] .ms-font-su,[lang=tur] .ms-font-xl,[lang=tur] .ms-font-xs,[lang=tur] .ms-font-xxl,[lang=tur] .ms-fontWeight-light,[lang=tur] .ms-fontWeight-light-hover:hover,[lang=tur] .ms-fontWeight-regular,[lang=tur] .ms-fontWeight-regular-hover:hover,[lang=tur] .ms-fontWeight-semibold,[lang=tur] .ms-fontWeight-semibold-hover:hover,[lang=tur] .ms-fontWeight-semilight,[lang=tur] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI EastEuropean,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=rus] .ms-font-l,[lang=rus] .ms-font-m,[lang=rus] .ms-font-m-plus,[lang=rus] .ms-font-mi,[lang=rus] .ms-font-s,[lang=rus] .ms-font-s-plus,[lang=rus] .ms-font-su,[lang=rus] .ms-font-xl,[lang=rus] .ms-font-xs,[lang=rus] .ms-font-xxl,[lang=rus] .ms-fontWeight-light,[lang=rus] .ms-fontWeight-light-hover:hover,[lang=rus] .ms-fontWeight-regular,[lang=rus] .ms-fontWeight-regular-hover:hover,[lang=rus] .ms-fontWeight-semibold,[lang=rus] .ms-fontWeight-semibold-hover:hover,[lang=rus] .ms-fontWeight-semilight,[lang=rus] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Cyrillic,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=ell] .ms-font-l,[lang=ell] .ms-font-m,[lang=ell] .ms-font-m-plus,[lang=ell] .ms-font-mi,[lang=ell] .ms-font-s,[lang=ell] .ms-font-s-plus,[lang=ell] .ms-font-su,[lang=ell] .ms-font-xl,[lang=ell] .ms-font-xs,[lang=ell] .ms-font-xxl,[lang=ell] .ms-fontWeight-light,[lang=ell] .ms-fontWeight-light-hover:hover,[lang=ell] .ms-fontWeight-regular,[lang=ell] .ms-fontWeight-regular-hover:hover,[lang=ell] .ms-fontWeight-semibold,[lang=ell] .ms-fontWeight-semibold-hover:hover,[lang=ell] .ms-fontWeight-semilight,[lang=ell] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Greek,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=heb] .ms-font-l,[lang=heb] .ms-font-m,[lang=heb] .ms-font-m-plus,[lang=heb] .ms-font-mi,[lang=heb] .ms-font-s,[lang=heb] .ms-font-s-plus,[lang=heb] .ms-font-su,[lang=heb] .ms-font-xl,[lang=heb] .ms-font-xs,[lang=heb] .ms-font-xxl,[lang=heb] .ms-fontWeight-light,[lang=heb] .ms-fontWeight-light-hover:hover,[lang=heb] .ms-fontWeight-regular,[lang=heb] .ms-fontWeight-regular-hover:hover,[lang=heb] .ms-fontWeight-semibold,[lang=heb] .ms-fontWeight-semibold-hover:hover,[lang=heb] .ms-fontWeight-semilight,[lang=heb] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Hebrew,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}[lang=vie] .ms-font-l,[lang=vie] .ms-font-m,[lang=vie] .ms-font-m-plus,[lang=vie] .ms-font-mi,[lang=vie] .ms-font-s,[lang=vie] .ms-font-s-plus,[lang=vie] .ms-font-su,[lang=vie] .ms-font-xl,[lang=vie] .ms-font-xs,[lang=vie] .ms-font-xxl,[lang=vie] .ms-fontWeight-light,[lang=vie] .ms-fontWeight-light-hover:hover,[lang=vie] .ms-fontWeight-regular,[lang=vie] .ms-fontWeight-regular-hover:hover,[lang=vie] .ms-fontWeight-semibold,[lang=vie] .ms-fontWeight-semibold-hover:hover,[lang=vie] .ms-fontWeight-semilight,[lang=vie] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Vietnamese,Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}@font-face{font-family:FabricMDL2Icons;src:url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff2) format('woff2'),url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff) format('woff'),url(https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.ttf) format('truetype');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none}.ms-Icon,.ms-Icon--circle{-webkit-font-smoothing:antialiased;display:inline-block}.ms-Icon--circle{position:relative;font-size:1rem;width:1em;height:1em;margin:0 0 0 .5em;padding:0;text-align:right}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;right:0;transform:scale(2);transform-origin:50% 50%;z-index:0}.ms-Icon--xs{font-size:10px}.ms-Icon--s{font-size:12px}.ms-Icon--m{font-size:16px}.ms-Icon--l{font-size:20px}.ms-Icon--CarotRightSolid8:before{content:'\EDDA'}.ms-Icon--DynamicsCRMLogo:before{content:'\EDCC'}.ms-Icon--DecreaseIndentLegacy:before{content:'\E290'}.ms-Icon--IncreaseIndentLegacy:before{content:'\E291'}.ms-Icon--GlobalNavButton:before{content:'\E700'}.ms-Icon--InternetSharing:before{content:'\E704'}.ms-Icon--Brightness:before{content:'\E706'}.ms-Icon--MapPin:before{content:'\E707'}.ms-Icon--Airplane:before{content:'\E709'}.ms-Icon--Tablet:before{content:'\E70A'}.ms-Icon--QuickNote:before{content:'\E70B'}.ms-Icon--ChevronDown:before{content:'\E70D'}.ms-Icon--ChevronUp:before{content:'\E70E'}.ms-Icon--Edit:before{content:'\E70F'}.ms-Icon--Add:before{content:'\E710'}.ms-Icon--Cancel:before{content:'\E711'}.ms-Icon--More:before{content:'\E712'}.ms-Icon--Settings:before{content:'\E713'}.ms-Icon--Video:before{content:'\E714'}.ms-Icon--Mail:before{content:'\E715'}.ms-Icon--People:before{content:'\E716'}.ms-Icon--Phone:before{content:'\E717'}.ms-Icon--Pin:before{content:'\E718'}.ms-Icon--Shop:before{content:'\E719'}.ms-Icon--Link:before{content:'\E71B'}.ms-Icon--Filter:before{content:'\E71C'}.ms-Icon--Zoom:before{content:'\E71E'}.ms-Icon--ZoomOut:before{content:'\E71F'}.ms-Icon--Microphone:before{content:'\E720'}.ms-Icon--Search:before{content:'\E721'}.ms-Icon--Camera:before{content:'\E722'}.ms-Icon--Attach:before{content:'\E723'}.ms-Icon--Send:before{content:'\E724'}.ms-Icon--FavoriteList:before{content:'\E728'}.ms-Icon--PageSolid:before{content:'\E729'}.ms-Icon--Forward:before{content:'\E72A'}.ms-Icon--Back:before{content:'\E72B'}.ms-Icon--Refresh:before{content:'\E72C'}.ms-Icon--Share:before{content:'\E72D'}.ms-Icon--Lock:before{content:'\E72E'}.ms-Icon--EMI:before{content:'\E731'}.ms-Icon--MiniLink:before{content:'\E732'}.ms-Icon--Blocked:before{content:'\E733'}.ms-Icon--FavoriteStar:before{content:'\E734'}.ms-Icon--FavoriteStarFill:before{content:'\E735'}.ms-Icon--ReadingMode:before{content:'\E736'}.ms-Icon--Remove:before{content:'\E738'}.ms-Icon--Checkbox:before{content:'\E739'}.ms-Icon--CheckboxComposite:before{content:'\E73A'}.ms-Icon--CheckboxIndeterminate:before{content:'\E73C'}.ms-Icon--CheckMark:before{content:'\E73E'}.ms-Icon--BackToWindow:before{content:'\E73F'}.ms-Icon--FullScreen:before{content:'\E740'}.ms-Icon--Print:before{content:'\E749'}.ms-Icon--Up:before{content:'\E74A'}.ms-Icon--Down:before{content:'\E74B'}.ms-Icon--Delete:before{content:'\E74D'}.ms-Icon--Save:before{content:'\E74E'}.ms-Icon--Sad:before{content:'\E757'}.ms-Icon--SIPMove:before{content:'\E759'}.ms-Icon--EraseTool:before{content:'\E75C'}.ms-Icon--GripperTool:before{content:'\E75E'}.ms-Icon--Dialpad:before{content:'\E75F'}.ms-Icon--PageLeft:before{content:'\E760'}.ms-Icon--PageRight:before{content:'\E761'}.ms-Icon--MultiSelect:before{content:'\E762'}.ms-Icon--Play:before{content:'\E768'}.ms-Icon--Pause:before{content:'\E769'}.ms-Icon--ChevronLeft:before{content:'\E76B'}.ms-Icon--ChevronRight:before{content:'\E76C'}.ms-Icon--Emoji2:before{content:'\E76E'}.ms-Icon--System:before{content:'\E770'}.ms-Icon--Globe:before{content:'\E774'}.ms-Icon--ContactInfo:before{content:'\E779'}.ms-Icon--Unpin:before{content:'\E77A'}.ms-Icon--Contact:before{content:'\E77B'}.ms-Icon--Memo:before{content:'\E77C'}.ms-Icon--WindowsLogo:before{content:'\E782'}.ms-Icon--Error:before{content:'\E783'}.ms-Icon--Unlock:before{content:'\E785'}.ms-Icon--Calendar:before{content:'\E787'}.ms-Icon--Megaphone:before{content:'\E789'}.ms-Icon--AutoEnhanceOn:before{content:'\E78D'}.ms-Icon--AutoEnhanceOff:before{content:'\E78E'}.ms-Icon--Color:before{content:'\E790'}.ms-Icon--SaveAs:before{content:'\E792'}.ms-Icon--Light:before{content:'\E793'}.ms-Icon--Filters:before{content:'\E795'}.ms-Icon--Contrast:before{content:'\E7A1'}.ms-Icon--Redo:before{content:'\E7A6'}.ms-Icon--Undo:before{content:'\E7A7'}.ms-Icon--PhotoCollection:before{content:'\E7AA'}.ms-Icon--Album:before{content:'\E7AB'}.ms-Icon--Rotate:before{content:'\E7AD'}.ms-Icon--PanoIndicator:before{content:'\E7B0'}.ms-Icon--RedEye:before{content:'\E7B3'}.ms-Icon--ThumbnailView:before{content:'\E7B6'}.ms-Icon--Package:before{content:'\E7B8'}.ms-Icon--Warning:before{content:'\E7BA'}.ms-Icon--Financial:before{content:'\E7BB'}.ms-Icon--ShoppingCart:before{content:'\E7BF'}.ms-Icon--Train:before{content:'\E7C0'}.ms-Icon--Flag:before{content:'\E7C1'}.ms-Icon--Move:before{content:'\E7C2'}.ms-Icon--Page:before{content:'\E7C3'}.ms-Icon--TouchPointer:before{content:'\E7C9'}.ms-Icon--Merge:before{content:'\E7D5'}.ms-Icon--TurnRight:before{content:'\E7DB'}.ms-Icon--Ferry:before{content:'\E7E3'}.ms-Icon--Tab:before{content:'\E7E9'}.ms-Icon--Admin:before{content:'\E7EF'}.ms-Icon--TVMonitor:before{content:'\E7F4'}.ms-Icon--Speakers:before{content:'\E7F5'}.ms-Icon--Nav2DMapView:before{content:'\E800'}.ms-Icon--Car:before{content:'\E804'}.ms-Icon--EatDrink:before{content:'\E807'}.ms-Icon--LocationCircle:before{content:'\E80E'}.ms-Icon--Home:before{content:'\E80F'}.ms-Icon--SwitcherStartEnd:before{content:'\E810'}.ms-Icon--IncidentTriangle:before{content:'\E814'}.ms-Icon--Touch:before{content:'\E815'}.ms-Icon--MapDirections:before{content:'\E816'}.ms-Icon--History:before{content:'\E81C'}.ms-Icon--Location:before{content:'\E81D'}.ms-Icon--Work:before{content:'\E821'}.ms-Icon--Recent:before{content:'\E823'}.ms-Icon--Hotel:before{content:'\E824'}.ms-Icon--LocationDot:before{content:'\E827'}.ms-Icon--News:before{content:'\E900'}.ms-Icon--Chat:before{content:'\E901'}.ms-Icon--Group:before{content:'\E902'}.ms-Icon--View:before{content:'\E890'}.ms-Icon--Clear:before{content:'\E894'}.ms-Icon--Sync:before{content:'\E895'}.ms-Icon--Download:before{content:'\E896'}.ms-Icon--Help:before{content:'\E897'}.ms-Icon--Upload:before{content:'\E898'}.ms-Icon--Emoji:before{content:'\E899'}.ms-Icon--MailForward:before{content:'\E89C'}.ms-Icon--ClosePane:before{content:'\E89F'}.ms-Icon--OpenPane:before{content:'\E8A0'}.ms-Icon--PreviewLink:before{content:'\E8A1'}.ms-Icon--ZoomIn:before{content:'\E8A3'}.ms-Icon--Bookmarks:before{content:'\E8A4'}.ms-Icon--Document:before{content:'\E8A5'}.ms-Icon--ProtectedDocument:before{content:'\E8A6'}.ms-Icon--OpenInNewWindow:before{content:'\E8A7'}.ms-Icon--MailFill:before{content:'\E8A8'}.ms-Icon--ViewAll:before{content:'\E8A9'}.ms-Icon--Switch:before{content:'\E8AB'}.ms-Icon--Rename:before{content:'\E8AC'}.ms-Icon--Folder:before{content:'\E8B7'}.ms-Icon--Picture:before{content:'\E8B9'}.ms-Icon--ShowResults:before{content:'\E8BC'}.ms-Icon--Message:before{content:'\E8BD'}.ms-Icon--CalendarDay:before{content:'\E8BF'}.ms-Icon--CalendarWeek:before{content:'\E8C0'}.ms-Icon--MailReplyAll:before{content:'\E8C2'}.ms-Icon--Read:before{content:'\E8C3'}.ms-Icon--PaymentCard:before{content:'\E8C7'}.ms-Icon--Copy:before{content:'\E8C8'}.ms-Icon--Important:before{content:'\E8C9'}.ms-Icon--MailReply:before{content:'\E8CA'}.ms-Icon--Sort:before{content:'\E8CB'}.ms-Icon--GotoToday:before{content:'\E8D1'}.ms-Icon--Font:before{content:'\E8D2'}.ms-Icon--FontColor:before{content:'\E8D3'}.ms-Icon--FolderFill:before{content:'\E8D5'}.ms-Icon--Permissions:before{content:'\E8D7'}.ms-Icon--DisableUpdates:before{content:'\E8D8'}.ms-Icon--Unfavorite:before{content:'\E8D9'}.ms-Icon--Italic:before{content:'\E8DB'}.ms-Icon--Underline:before{content:'\E8DC'}.ms-Icon--Bold:before{content:'\E8DD'}.ms-Icon--MoveToFolder:before{content:'\E8DE'}.ms-Icon--Dislike:before{content:'\E8E0'}.ms-Icon--Like:before{content:'\E8E1'}.ms-Icon--AlignRight:before{content:'\E8E2'}.ms-Icon--AlignCenter:before{content:'\E8E3'}.ms-Icon--AlignLeft:before{content:'\E8E4'}.ms-Icon--OpenFile:before{content:'\E8E5'}.ms-Icon--FontDecrease:before{content:'\E8E7'}.ms-Icon--FontIncrease:before{content:'\E8E8'}.ms-Icon--FontSize:before{content:'\E8E9'}.ms-Icon--CellPhone:before{content:'\E8EA'}.ms-Icon--Tag:before{content:'\E8EC'}.ms-Icon--Library:before{content:'\E8F1'}.ms-Icon--PostUpdate:before{content:'\E8F3'}.ms-Icon--NewFolder:before{content:'\E8F4'}.ms-Icon--CalendarReply:before{content:'\E8F5'}.ms-Icon--UnsyncFolder:before{content:'\E8F6'}.ms-Icon--SyncFolder:before{content:'\E8F7'}.ms-Icon--BlockContact:before{content:'\E8F8'}.ms-Icon--AddFriend:before{content:'\E8FA'}.ms-Icon--BulletedList:before{content:'\E8FD'}.ms-Icon--Preview:before{content:'\E8FF'}.ms-Icon--DockLeft:before{content:'\E90C'}.ms-Icon--DockRight:before{content:'\E90D'}.ms-Icon--Repair:before{content:'\E90F'}.ms-Icon--Accounts:before{content:'\E910'}.ms-Icon--RadioBullet:before{content:'\E915'}.ms-Icon--Stopwatch:before{content:'\E916'}.ms-Icon--Clock:before{content:'\E917'}.ms-Icon--WorldClock:before{content:'\E918'}.ms-Icon--AlarmClock:before{content:'\E919'}.ms-Icon--Hospital:before{content:'\E91D'}.ms-Icon--Timer:before{content:'\E91E'}.ms-Icon--FullCircleMask:before{content:'\E91F'}.ms-Icon--LocationFill:before{content:'\E920'}.ms-Icon--ChromeMinimize:before{content:'\E921'}.ms-Icon--Annotation:before{content:'\E924'}.ms-Icon--ChromeClose:before{content:'\E8BB'}.ms-Icon--Accept:before{content:'\E8FB'}.ms-Icon--Fingerprint:before{content:'\E928'}.ms-Icon--Handwriting:before{content:'\E929'}.ms-Icon--StackIndicator:before{content:'\E7FF'}.ms-Icon--Completed:before{content:'\E930'}.ms-Icon--Label:before{content:'\E932'}.ms-Icon--FlickDown:before{content:'\E935'}.ms-Icon--FlickUp:before{content:'\E936'}.ms-Icon--FlickLeft:before{content:'\E937'}.ms-Icon--FlickRight:before{content:'\E938'}.ms-Icon--MusicInCollection:before{content:'\E940'}.ms-Icon--OneDrive:before{content:'\E941'}.ms-Icon--CompassNW:before{content:'\E942'}.ms-Icon--Code:before{content:'\E943'}.ms-Icon--LightningBolt:before{content:'\E945'}.ms-Icon--Info:before{content:'\E946'}.ms-Icon--CalculatorAddition:before{content:'\E948'}.ms-Icon--CalculatorSubtract:before{content:'\E949'}.ms-Icon--PrintfaxPrinterFile:before{content:'\E956'}.ms-Icon--Headset:before{content:'\E95B'}.ms-Icon--Health:before{content:'\E95E'}.ms-Icon--ChevronUpSmall:before{content:'\E96D'}.ms-Icon--ChevronDownSmall:before{content:'\E96E'}.ms-Icon--ChevronLeftSmall:before{content:'\E96F'}.ms-Icon--ChevronRightSmall:before{content:'\E970'}.ms-Icon--ChevronUpMed:before{content:'\E971'}.ms-Icon--ChevronDownMed:before{content:'\E972'}.ms-Icon--ChevronLeftMed:before{content:'\E973'}.ms-Icon--ChevronRightMed:before{content:'\E974'}.ms-Icon--Dictionary:before{content:'\E82D'}.ms-Icon--ChromeBack:before{content:'\E830'}.ms-Icon--PC1:before{content:'\E977'}.ms-Icon--PresenceChickletVideo:before{content:'\E979'}.ms-Icon--Reply:before{content:'\E97A'}.ms-Icon--DoubleChevronLeftMed:before{content:'\E991'}.ms-Icon--Volume0:before{content:'\E992'}.ms-Icon--Volume1:before{content:'\E993'}.ms-Icon--Volume2:before{content:'\E994'}.ms-Icon--Volume3:before{content:'\E995'}.ms-Icon--CaretHollow:before{content:'\E817'}.ms-Icon--CaretSolid:before{content:'\E818'}.ms-Icon--FolderOpen:before{content:'\E838'}.ms-Icon--Pinned:before{content:'\E840'}.ms-Icon--PinnedFill:before{content:'\E842'}.ms-Icon--Chart:before{content:'\E999'}.ms-Icon--BidiLtr:before{content:'\E9AA'}.ms-Icon--BidiRtl:before{content:'\E9AB'}.ms-Icon--RevToggleKey:before{content:'\E845'}.ms-Icon--RightDoubleQuote:before{content:'\E9B1'}.ms-Icon--Sunny:before{content:'\E9BD'}.ms-Icon--CloudWeather:before{content:'\E9BE'}.ms-Icon--Cloudy:before{content:'\E9BF'}.ms-Icon--PartlyCloudyDay:before{content:'\E9C0'}.ms-Icon--PartlyCloudyNight:before{content:'\E9C1'}.ms-Icon--ClearNight:before{content:'\E9C2'}.ms-Icon--RainShowersDay:before{content:'\E9C3'}.ms-Icon--Rain:before{content:'\E9C4'}.ms-Icon--Thunderstorms:before{content:'\E9C6'}.ms-Icon--RainSnow:before{content:'\E9C7'}.ms-Icon--BlowingSnow:before{content:'\E9C9'}.ms-Icon--Frigid:before{content:'\E9CA'}.ms-Icon--Fog:before{content:'\E9CB'}.ms-Icon--Squalls:before{content:'\E9CC'}.ms-Icon--Duststorm:before{content:'\E9CD'}.ms-Icon--Precipitation:before{content:'\E9CF'}.ms-Icon--Ringer:before{content:'\EA8F'}.ms-Icon--PDF:before{content:'\EA90'}.ms-Icon--SortLines:before{content:'\E9D0'}.ms-Icon--Ribbon:before{content:'\E9D1'}.ms-Icon--CheckList:before{content:'\E9D5'}.ms-Icon--Generate:before{content:'\E9DA'}.ms-Icon--Equalizer:before{content:'\E9E9'}.ms-Icon--BarChartHorizontal:before{content:'\E9EB'}.ms-Icon--Freezing:before{content:'\E9EF'}.ms-Icon--SnowShowerDay:before{content:'\E9FD'}.ms-Icon--HailDay:before{content:'\EA00'}.ms-Icon--WorkFlow:before{content:'\EA01'}.ms-Icon--StoreLogoMed:before{content:'\EA04'}.ms-Icon--RainShowersNight:before{content:'\EA0F'}.ms-Icon--SnowShowerNight:before{content:'\EA11'}.ms-Icon--HailNight:before{content:'\EA13'}.ms-Icon--Info2:before{content:'\EA1F'}.ms-Icon--StoreLogo:before{content:'\EA96'}.ms-Icon--MultiSelectMirrored:before{content:'\EA98'}.ms-Icon--Broom:before{content:'\EA99'}.ms-Icon--MusicInCollectionFill:before{content:'\EA36'}.ms-Icon--List:before{content:'\EA37'}.ms-Icon--Asterisk:before{content:'\EA38'}.ms-Icon--ErrorBadge:before{content:'\EA39'}.ms-Icon--CircleRing:before{content:'\EA3A'}.ms-Icon--CircleFill:before{content:'\EA3B'}.ms-Icon--BookmarksMirrored:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\EA42'}.ms-Icon--CaretHollowMirrored:before{content:'\EA45'}.ms-Icon--CaretSolidMirrored:before{content:'\EA46'}.ms-Icon--ChromeBackMirrored:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\EA49'}.ms-Icon--DockLeftMirrored:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\EA4D'}.ms-Icon--HelpMirrored:before{content:'\EA51'}.ms-Icon--ListMirrored:before{content:'\EA55'}.ms-Icon--MailForwardMirrored:before{content:'\EA56'}.ms-Icon--MailReplyMirrored:before{content:'\EA57'}.ms-Icon--MailReplyAllMirrored:before{content:'\EA58'}.ms-Icon--OpenPaneMirrored:before{content:'\EA5B'}.ms-Icon--SendMirrored:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\EA65'}.ms-Icon--ThumbnailViewMirrored:before{content:'\EA67'}.ms-Icon--Devices3:before{content:'\EA6C'}.ms-Icon--Lightbulb:before{content:'\EA80'}.ms-Icon--StatusTriangle:before{content:'\EA82'}.ms-Icon--VolumeDisabled:before{content:'\EA85'}.ms-Icon--Puzzle:before{content:'\EA86'}.ms-Icon--EmojiNeutral:before{content:'\EA87'}.ms-Icon--EmojiDisappointed:before{content:'\EA88'}.ms-Icon--HomeSolid:before{content:'\EA8A'}.ms-Icon--Cocktails:before{content:'\EA9D'}.ms-Icon--Articles:before{content:'\EAC1'}.ms-Icon--Cycling:before{content:'\EAC7'}.ms-Icon--DietPlanNotebook:before{content:'\EAC8'}.ms-Icon--Pill:before{content:'\EACB'}.ms-Icon--Running:before{content:'\EADA'}.ms-Icon--Weights:before{content:'\EADB'}.ms-Icon--BarChart4:before{content:'\EAE7'}.ms-Icon--CirclePlus:before{content:'\EAEE'}.ms-Icon--Coffee:before{content:'\EAEF'}.ms-Icon--Cotton:before{content:'\EAF3'}.ms-Icon--Market:before{content:'\EAFC'}.ms-Icon--Money:before{content:'\EAFD'}.ms-Icon--PieDouble:before{content:'\EB04'}.ms-Icon--RemoveFilter:before{content:'\EB08'}.ms-Icon--StockDown:before{content:'\EB0F'}.ms-Icon--StockUp:before{content:'\EB11'}.ms-Icon--Cricket:before{content:'\EB1E'}.ms-Icon--Golf:before{content:'\EB1F'}.ms-Icon--Baseball:before{content:'\EB20'}.ms-Icon--Soccer:before{content:'\EB21'}.ms-Icon--MoreSports:before{content:'\EB22'}.ms-Icon--AutoRacing:before{content:'\EB24'}.ms-Icon--CollegeHoops:before{content:'\EB25'}.ms-Icon--CollegeFootball:before{content:'\EB26'}.ms-Icon--ProFootball:before{content:'\EB27'}.ms-Icon--ProHockey:before{content:'\EB28'}.ms-Icon--Rugby:before{content:'\EB2D'}.ms-Icon--Tennis:before{content:'\EB33'}.ms-Icon--Arrivals:before{content:'\EB34'}.ms-Icon--Design:before{content:'\EB3C'}.ms-Icon--Website:before{content:'\EB41'}.ms-Icon--Drop:before{content:'\EB42'}.ms-Icon--Snow:before{content:'\EB46'}.ms-Icon--BusSolid:before{content:'\EB47'}.ms-Icon--FerrySolid:before{content:'\EB48'}.ms-Icon--TrainSolid:before{content:'\EB4D'}.ms-Icon--Heart:before{content:'\EB51'}.ms-Icon--HeartFill:before{content:'\EB52'}.ms-Icon--Ticket:before{content:'\EB54'}.ms-Icon--Devices4:before{content:'\EB66'}.ms-Icon--AzureLogo:before{content:'\EB6A'}.ms-Icon--BingLogo:before{content:'\EB6B'}.ms-Icon--MSNLogo:before{content:'\EB6C'}.ms-Icon--OutlookLogo:before{content:'\EB6D'}.ms-Icon--OfficeLogo:before{content:'\EB6E'}.ms-Icon--SkypeLogo:before{content:'\EB6F'}.ms-Icon--Door:before{content:'\EB75'}.ms-Icon--EditMirrored:before{content:'\EB7E'}.ms-Icon--GiftCard:before{content:'\EB8E'}.ms-Icon--DoubleBookmark:before{content:'\EB8F'}.ms-Icon--StatusErrorFull:before{content:'\EB90'}.ms-Icon--Certificate:before{content:'\EB95'}.ms-Icon--Photo2:before{content:'\EB9F'}.ms-Icon--CloudDownload:before{content:'\EBD3'}.ms-Icon--WindDirection:before{content:'\EBE6'}.ms-Icon--Family:before{content:'\EBDA'}.ms-Icon--CSS:before{content:'\EBEF'}.ms-Icon--JS:before{content:'\EBF0'}.ms-Icon--ReminderGroup:before{content:'\EBF8'}.ms-Icon--Section:before{content:'\EC0C'}.ms-Icon--OneNoteLogo:before{content:'\EC0D'}.ms-Icon--ToggleFilled:before{content:'\EC11'}.ms-Icon--ToggleBorder:before{content:'\EC12'}.ms-Icon--SliderThumb:before{content:'\EC13'}.ms-Icon--ToggleThumb:before{content:'\EC14'}.ms-Icon--Documentation:before{content:'\EC17'}.ms-Icon--Badge:before{content:'\EC1B'}.ms-Icon--Giftbox:before{content:'\EC1F'}.ms-Icon--ExcelLogo:before{content:'\EC28'}.ms-Icon--WordLogo:before{content:'\EC29'}.ms-Icon--PowerPointLogo:before{content:'\EC2A'}.ms-Icon--Cafe:before{content:'\EC32'}.ms-Icon--SpeedHigh:before{content:'\EC4A'}.ms-Icon--MusicNote:before{content:'\EC4F'}.ms-Icon--EdgeLogo:before{content:'\EC60'}.ms-Icon--CompletedSolid:before{content:'\EC61'}.ms-Icon--AlbumRemove:before{content:'\EC62'}.ms-Icon--MessageFill:before{content:'\EC70'}.ms-Icon--TabletSelected:before{content:'\EC74'}.ms-Icon--MobileSelected:before{content:'\EC75'}.ms-Icon--LaptopSelected:before{content:'\EC76'}.ms-Icon--TVMonitorSelected:before{content:'\EC77'}.ms-Icon--DeveloperTools:before{content:'\EC7A'}.ms-Icon--InsertTextBox:before{content:'\EC7D'}.ms-Icon--LowerBrightness:before{content:'\EC8A'}.ms-Icon--CloudUpload:before{content:'\EC8E'}.ms-Icon--DateTime:before{content:'\EC92'}.ms-Icon--Event:before{content:'\ECA3'}.ms-Icon--Cake:before{content:'\ECA4'}.ms-Icon--Tiles:before{content:'\ECA5'}.ms-Icon--Org:before{content:'\ECA6'}.ms-Icon--PartyLeader:before{content:'\ECA7'}.ms-Icon--DRM:before{content:'\ECA8'}.ms-Icon--CloudAdd:before{content:'\ECA9'}.ms-Icon--AppIconDefault:before{content:'\ECAA'}.ms-Icon--Photo2Add:before{content:'\ECAB'}.ms-Icon--Photo2Remove:before{content:'\ECAC'}.ms-Icon--POI:before{content:'\ECAF'}.ms-Icon--FacebookLogo:before{content:'\ECB3'}.ms-Icon--AddTo:before{content:'\ECC8'}.ms-Icon--RadioBtnOn:before{content:'\ECCB'}.ms-Icon--Embed:before{content:'\ECCE'}.ms-Icon--VideoSolid:before{content:'\EA0C'}.ms-Icon--Teamwork:before{content:'\EA12'}.ms-Icon--PeopleAdd:before{content:'\EA15'}.ms-Icon--Glasses:before{content:'\EA16'}.ms-Icon--DateTime2:before{content:'\EA17'}.ms-Icon--Shield:before{content:'\EA18'}.ms-Icon--Header1:before{content:'\EA19'}.ms-Icon--PageAdd:before{content:'\EA1A'}.ms-Icon--NumberedList:before{content:'\EA1C'}.ms-Icon--PowerBILogo:before{content:'\EA1E'}.ms-Icon--Product:before{content:'\ECDC'}.ms-Icon--Blocked2:before{content:'\ECE4'}.ms-Icon--FangBody:before{content:'\ECEB'}.ms-Icon--Glimmer:before{content:'\ECF4'}.ms-Icon--ChatInviteFriend:before{content:'\ECFE'}.ms-Icon--SharepointLogo:before{content:'\ED18'}.ms-Icon--YammerLogo:before{content:'\ED19'}.ms-Icon--Hide:before{content:'\ED1A'}.ms-Icon--ReturnToSession:before{content:'\ED24'}.ms-Icon--OpenFolderHorizontal:before{content:'\ED25'}.ms-Icon--CalendarMirrored:before{content:'\ED28'}.ms-Icon--SwayLogo:before{content:'\ED29'}.ms-Icon--OutOfOffice:before{content:'\ED34'}.ms-Icon--Trophy:before{content:'\ED3F'}.ms-Icon--ReopenPages:before{content:'\ED50'}.ms-Icon--AADLogo:before{content:'\ED68'}.ms-Icon--AccessLogo:before{content:'\ED69'}.ms-Icon--AdminALogo:before{content:'\ED6A'}.ms-Icon--AdminCLogo:before{content:'\ED6B'}.ms-Icon--AdminDLogo:before{content:'\ED6C'}.ms-Icon--AdminELogo:before{content:'\ED6D'}.ms-Icon--AdminLLogo:before{content:'\ED6E'}.ms-Icon--AdminMLogo:before{content:'\ED6F'}.ms-Icon--AdminOLogo:before{content:'\ED70'}.ms-Icon--AdminPLogo:before{content:'\ED71'}.ms-Icon--AdminSLogo:before{content:'\ED72'}.ms-Icon--AdminYLogo:before{content:'\ED73'}.ms-Icon--AlchemyLogo:before{content:'\ED74'}.ms-Icon--BoxLogo:before{content:'\ED75'}.ms-Icon--DelveLogo:before{content:'\ED76'}.ms-Icon--DropboxLogo:before{content:'\ED77'}.ms-Icon--ExchangeLogo:before{content:'\ED78'}.ms-Icon--LyncLogo:before{content:'\ED79'}.ms-Icon--OfficeVideoLogo:before{content:'\ED7A'}.ms-Icon--ParatureLogo:before{content:'\ED7B'}.ms-Icon--SocialListeningLogo:before{content:'\ED7C'}.ms-Icon--VisioLogo:before{content:'\ED7D'}.ms-Icon--Balloons:before{content:'\ED7E'}.ms-Icon--Cat:before{content:'\ED7F'}.ms-Icon--MailAlert:before{content:'\ED80'}.ms-Icon--MailCheck:before{content:'\ED81'}.ms-Icon--MailLowImportance:before{content:'\ED82'}.ms-Icon--MailPause:before{content:'\ED83'}.ms-Icon--MailRepeat:before{content:'\ED84'}.ms-Icon--SecurityGroup:before{content:'\ED85'}.ms-Icon--Table:before{content:'\ED86'}.ms-Icon--VoicemailForward:before{content:'\ED87'}.ms-Icon--VoicemailReply:before{content:'\ED88'}.ms-Icon--Waffle:before{content:'\ED89'}.ms-Icon--RemoveEvent:before{content:'\ED8A'}.ms-Icon--EventInfo:before{content:'\ED8B'}.ms-Icon--ForwardEvent:before{content:'\ED8C'}.ms-Icon--WipePhone:before{content:'\ED8D'}.ms-Icon--AddOnlineMeeting:before{content:'\ED8E'}.ms-Icon--JoinOnlineMeeting:before{content:'\ED8F'}.ms-Icon--RemoveLink:before{content:'\ED90'}.ms-Icon--PeopleBlock:before{content:'\ED91'}.ms-Icon--PeopleRepeat:before{content:'\ED92'}.ms-Icon--PeopleAlert:before{content:'\ED93'}.ms-Icon--PeoplePause:before{content:'\ED94'}.ms-Icon--TransferCall:before{content:'\ED95'}.ms-Icon--AddPhone:before{content:'\ED96'}.ms-Icon--UnknownCall:before{content:'\ED97'}.ms-Icon--NoteReply:before{content:'\ED98'}.ms-Icon--NoteForward:before{content:'\ED99'}.ms-Icon--NotePinned:before{content:'\ED9A'}.ms-Icon--RemoveOccurrence:before{content:'\ED9B'}.ms-Icon--Timeline:before{content:'\ED9C'}.ms-Icon--EditNote:before{content:'\ED9D'}.ms-Icon--CircleHalfFull:before{content:'\ED9E'}.ms-Icon--Room:before{content:'\ED9F'}.ms-Icon--Unsubscribe:before{content:'\EDA0'}.ms-Icon--Subscribe:before{content:'\EDA1'}.ms-Icon--RecurringTask:before{content:'\EDB2'}.ms-Icon--TaskManager:before{content:'\EDB7'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB8'}.ms-Icon--Combine:before{content:'\EDBB'}.ms-Icon--Split:before{content:'\EDBC'}.ms-Icon--DoubleChevronUp:before{content:'\EDBD'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBE'}.ms-Icon--DoubleChevronRight:before{content:'\EDBF'}.ms-Icon--Ascending:before{content:'\EDC0'}.ms-Icon--Descending:before{content:'\EDC1'}.ms-Icon--TextBox:before{content:'\EDC2'}.ms-Icon--TextField:before{content:'\EDC3'}.ms-Icon--NumberField:before{content:'\EDC4'}.ms-Icon--Dropdown:before{content:'\EDC5'}.ms-Icon--BookingsLogo:before{content:'\EDC7'}.ms-Icon--ClassNotebookLogo:before{content:'\EDC8'}.ms-Icon--CollabsDBLogo:before{content:'\EDC9'}.ms-Icon--DelveAnalyticsLogo:before{content:'\EDCA'}.ms-Icon--DocsLogo:before{content:'\EDCB'}.ms-Icon--Dynamics365Logo:before{content:'\EDCC'}.ms-Icon--DynamicSMBLogo:before{content:'\EDCD'}.ms-Icon--OfficeAssistantLogo:before{content:'\EDCE'}.ms-Icon--OfficeStoreLogo:before{content:'\EDCF'}.ms-Icon--OneNoteEduLogo:before{content:'\EDD0'}.ms-Icon--Planner:before{content:'\EDD1'}.ms-Icon--PowerApps:before{content:'\EDD2'}.ms-Icon--Suitcase:before{content:'\EDD3'}.ms-Icon--ProjectLogo:before{content:'\EDD4'}.ms-Icon--CaretLeft8:before{content:'\EDD5'}.ms-Icon--CaretRight8:before{content:'\EDD6'}.ms-Icon--CaretUp8:before{content:'\EDD7'}.ms-Icon--CaretDown8:before{content:'\EDD8'}.ms-Icon--CaretLeftSolid8:before{content:'\EDD9'}.ms-Icon--CaretRightSolid8:before{content:'\EDDA'}.ms-Icon--CaretUpSolid8:before{content:'\EDDB'}.ms-Icon--CaretDownSolid8:before{content:'\EDDC'}.ms-Icon--ClearFormatting:before{content:'\EDDD'}.ms-Icon--Superscript:before{content:'\EDDE'}.ms-Icon--Subscript:before{content:'\EDDF'}.ms-Icon--Strikethrough:before{content:'\EDE0'}.ms-Icon--SingleBookmark:before{content:'\EDFF'}.ms-Icon--DoubleChevronDown:before{content:'\EE04'}.ms-Icon--ReplyAll:before{content:'\EE0A'}.ms-Icon--GoogleDriveLogo:before{content:'\EE0B'}.ms-Icon--Questionnaire:before{content:'\EE19'}.ms-Icon--ReplyMirrored:before{content:'\EE35'}.ms-Icon--ReplyAllMirrored:before{content:'\EE36'}.ms-Icon--AddGroup:before{content:'\EE3D'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE4B'}.ms-Icon--TemporaryUser:before{content:'\EE58'}.ms-Icon--GroupedDescending:before{content:'\EE66'}.ms-Icon--GroupedAscending:before{content:'\EE67'}.ms-Icon--SortUp:before{content:'\EE68'}.ms-Icon--SortDown:before{content:'\EE69'}.ms-Icon--AwayStatus:before{content:'\EE6A'}.ms-Icon--SyncToPC:before{content:'\EE6E'}.ms-Icon--AustralianRules:before{content:'\EE70'}.ms-Icon--DateTimeMirrored:before{content:'\EE93'}.ms-Icon--DoubleChevronUp12:before{content:'\EE96'}.ms-Icon--DoubleChevronDown12:before{content:'\EE97'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE98'}.ms-Icon--DoubleChevronRight12:before{content:'\EE99'}.ms-Icon--CalendarAgenda:before{content:'\EE9A'}.ms-Icon--AddEvent:before{content:'\EEB5'}.ms-Icon--AssetLibrary:before{content:'\EEB6'}.ms-Icon--DataConnectionLibrary:before{content:'\EEB7'}.ms-Icon--DocLibrary:before{content:'\EEB8'}.ms-Icon--FormLibrary:before{content:'\EEB9'}.ms-Icon--FormLibraryMirrored:before{content:'\EEBA'}.ms-Icon--ReportLibrary:before{content:'\EEBB'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBC'}.ms-Icon--ContactCard:before{content:'\EEBD'}.ms-Icon--CustomList:before{content:'\EEBE'}.ms-Icon--CustomListMirrored:before{content:'\EEBF'}.ms-Icon--IssueTracking:before{content:'\EEC0'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC1'}.ms-Icon--PictureLibrary:before{content:'\EEC2'}.ms-Icon--AppForOfficeLogo:before{content:'\EEC7'}.ms-Icon--OfflineOneDriveParachute:before{content:'\EEC8'}.ms-Icon--OfflineOneDriveParachuteDisabled:before{content:'\EEC9'}.ms-Icon--LargeGrid:before{content:'\EECB'}.ms-Icon--TriangleSolidUp12:before{content:'\EECC'}.ms-Icon--TriangleSolidDown12:before{content:'\EECD'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECE'}.ms-Icon--TriangleSolidRight12:before{content:'\EECF'}.ms-Icon--TriangleUp12:before{content:'\EED0'}.ms-Icon--TriangleDown12:before{content:'\EED1'}.ms-Icon--TriangleLeft12:before{content:'\EED2'}.ms-Icon--TriangleRight12:before{content:'\EED3'}.ms-Icon--ArrowUpRight8:before{content:'\EED4'}.ms-Icon--ArrowDownRight8:before{content:'\EED5'}.ms-Icon--DocumentSet:before{content:'\EED6'}.ms-Icon--DelveAnalytics:before{content:'\EEEE'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EEEF'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EEF0'}.ms-Icon--OneDriveAdd:before{content:'\EF32'}.ms-Icon--Header2:before{content:'\EF36'}.ms-Icon--Header3:before{content:'\EF37'}.ms-Icon--Header4:before{content:'\EF38'}.ms-Icon--MarketDown:before{content:'\EF42'}.ms-Icon--CalendarWorkWeek:before{content:'\EF51'}.ms-Icon--SidePanel:before{content:'\EF52'}.ms-Icon--GlobeFavorite:before{content:'\EF53'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF54'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF55'}.ms-Icon--ViewAll2:before{content:'\EF56'}.ms-Icon--DocumentReply:before{content:'\EF57'}.ms-Icon--PlayerSettings:before{content:'\EF58'}.ms-Icon--ReceiptForward:before{content:'\EF59'}.ms-Icon--ReceiptReply:before{content:'\EF5A'}.ms-Icon--ReceiptCheck:before{content:'\EF5B'}.ms-Icon--Fax:before{content:'\EF5C'}.ms-Icon--RecurringEvent:before{content:'\EF5D'}.ms-Icon--ReplyAlt:before{content:'\EF5E'}.ms-Icon--ReplyAllAlt:before{content:'\EF5F'}.ms-Icon--EditStyle:before{content:'\EF60'}.ms-Icon--EditMail:before{content:'\EF61'}.ms-Icon--Lifesaver:before{content:'\EF62'}.ms-Icon--LifesaverLock:before{content:'\EF63'}.ms-Icon--InboxCheck:before{content:'\EF64'}.ms-Icon--FolderSearch:before{content:'\EF65'}.ms-Icon--CollapseMenu:before{content:'\EF66'}.ms-Icon--ExpandMenu:before{content:'\EF67'}.ms-Icon--Boards:before{content:'\EF68'}.ms-Icon--SunAdd:before{content:'\EF69'}.ms-Icon--SunQuestionMark:before{content:'\EF6A'}.ms-Icon--LandscapeOrientation:before{content:'\EF6B'}.ms-Icon--DocumentSearch:before{content:'\EF6C'}.ms-Icon--PublicCalendar:before{content:'\EF6D'}.ms-Icon--PublicContactCard:before{content:'\EF6E'}.ms-Icon--PublicEmail:before{content:'\EF6F'}.ms-Icon--PublicFolder:before{content:'\EF70'}.ms-Icon--WordDocument:before{content:'\EF71'}.ms-Icon--PowerPointDocument:before{content:'\EF72'}.ms-Icon--ExcelDocument:before{content:'\EF73'}.ms-Icon--GroupedList:before{content:'\EF74'}.ms-Icon--ClassroomLogo:before{content:'\EF75'}.ms-Icon--Sections:before{content:'\EF76'}.ms-Icon--EditPhoto:before{content:'\EF77'}.ms-Icon--Starburst:before{content:'\EF78'}.ms-Icon--ShareiOS:before{content:'\EF79'}.ms-Icon--AirTickets:before{content:'\EF7A'}.ms-Icon--PencilReply:before{content:'\EF7B'}.ms-Icon--Tiles2:before{content:'\EF7C'}.ms-Icon--SkypeCircleCheck:before{content:'\EF7D'}.ms-Icon--SkypeCircleClock:before{content:'\EF7E'}.ms-Icon--SkypeCircleMinus:before{content:'\EF7F'}.ms-Icon--SkypeCheck:before{content:'\EF80'}.ms-Icon--SkypeClock:before{content:'\EF81'}.ms-Icon--SkypeMinus:before{content:'\EF82'}.ms-Icon--SkypeMessage:before{content:'\EF83'}.ms-Icon--ClosedCaption:before{content:'\EF84'}.ms-Icon--ATPLogo:before{content:'\EF85'}.ms-Icon--OfficeFormLogo:before{content:'\EF86'}.ms-Icon--RecycleBin:before{content:'\EF87'}.ms-Icon--EmptyRecycleBin:before{content:'\EF88'}.ms-Icon--Hide2:before{content:'\EF89'}.ms-Icon--iOSAppStoreLogo:before{content:'\EF8A'}.ms-Icon--AndroidLogo:before{content:'\EF8B'}.ms-Icon--Breadcrumb:before{content:'\EF8C'}.ms-Icon--ClearFilter:before{content:'\EF8F'}.ms-Icon--Flow:before{content:'\EF90'}.ms-Icon--PageCheckedOut:before{content:'\F02C'}.ms-Icon--SetAction:before{content:'\F071'}.ms-Icon--PowerAppsLogo:before{content:'\F091'}.ms-Icon--PowerApps2Logo:before{content:'\F092'}.ms-Icon--FabricAssetLibrary:before{content:'\F09C'}.ms-Icon--FabricDataConnectionLibrary:before{content:'\F09D'}.ms-Icon--FabricDocLibrary:before{content:'\F09E'}.ms-Icon--FabricFormLibrary:before{content:'\F09F'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F0A0'}.ms-Icon--FabricReportLibrary:before{content:'\F0A1'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A2'}.ms-Icon--FabricPublicFolder:before{content:'\F0A3'}.ms-Icon--FabricFolderSearch:before{content:'\F0A4'}.ms-Icon--FabricMovetoFolder:before{content:'\F0A5'}.ms-Icon--FabricUnsyncFolder:before{content:'\F0A6'}.ms-Icon--FabricSyncFolder:before{content:'\F0A7'}.ms-Icon--FabricOpenFolderHorizontal:before{content:'\F0A8'}.ms-Icon--FabricFolder:before{content:'\F0A9'}.ms-Icon--FabricFolderFill:before{content:'\F0AA'}.ms-Icon--FabricNewFolder:before{content:'\F0AB'}.ms-Icon--FabricPictureLibrary:before{content:'\F0AC'}.ms-Icon--AddFavorite:before{content:'\F0C8'}.ms-Icon--AddFavoriteFill:before{content:'\F0C9'}.ms-Icon--BufferTimeBefore:before{content:'\F0CF'}.ms-Icon--BufferTimeAfter:before{content:'\F0D0'}.ms-Icon--BufferTimeBoth:before{content:'\F0D1'}.ms-Icon--PageCheckedin:before{content:'\F104'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F121'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F122'}.ms-Icon--FolderHorizontal:before{content:'\F12B'}.ms-Icon--MicrosoftStaffhubLogo:before{content:'\F130'}.ms-Icon--CaloriesAdd:before{content:'\F172'}.ms-Icon--BranchFork:before{content:'\F173'}.ms-Icon--ArrowDownRightMirrored8:before{content:'\EED5'}.ms-Icon--ArrowDownRight8:before{content:'\EEF0'}.ms-Icon--ArrowUpRightMirrored8:before{content:'\EED4'}.ms-Icon--ArrowUpRight8:before{content:'\EEEF'}.ms-Icon--BidiLtr:before{content:'\E9AB'}.ms-Icon--BidiRtl:before{content:'\E9AA'}.ms-Icon--BookmarksMirrored:before{content:'\E8A4'}.ms-Icon--Bookmarks:before{content:'\EA41'}.ms-Icon--BulletedListMirrored:before{content:'\E8FD'}.ms-Icon--BulletedList:before{content:'\EA42'}.ms-Icon--CalendarMirrored:before{content:'\E787'}.ms-Icon--Calendar:before{content:'\ED28'}.ms-Icon--CaretBottomLeftSolid8:before{content:'\F122'}.ms-Icon--CaretBottomRightSolid8:before{content:'\F121'}.ms-Icon--CaretHollowMirrored:before{content:'\E817'}.ms-Icon--CaretHollow:before{content:'\EA45'}.ms-Icon--CaretLeft8:before{content:'\EDD6'}.ms-Icon--CaretRight8:before{content:'\EDD5'}.ms-Icon--CaretLeftSolid8:before{content:'\EDDA'}.ms-Icon--CaretRightSolid8:before{content:'\EDD9'}.ms-Icon--CaretSolidMirrored:before{content:'\E818'}.ms-Icon--CaretSolid:before{content:'\EA46'}.ms-Icon--CaretTopLeftSolid8:before{content:'\EF55'}.ms-Icon--CaretTopRightSolid8:before{content:'\EF54'}.ms-Icon--ChevronLeft:before{content:'\E76C'}.ms-Icon--ChevronRight:before{content:'\E76B'}.ms-Icon--ChevronLeftMed:before{content:'\E974'}.ms-Icon--ChevronRightMed:before{content:'\E973'}.ms-Icon--ChevronLeftSmall:before{content:'\E970'}.ms-Icon--ChevronRightSmall:before{content:'\E96F'}.ms-Icon--ChromeBackMirrored:before{content:'\E830'}.ms-Icon--ChromeBack:before{content:'\EA47'}.ms-Icon--ClosePaneMirrored:before{content:'\E89F'}.ms-Icon--ClosePane:before{content:'\EA49'}.ms-Icon--CustomListMirrored:before{content:'\EEBE'}.ms-Icon--CustomList:before{content:'\EEBF'}.ms-Icon--DateTimeMirrored:before{content:'\EC92'}.ms-Icon--DateTime:before{content:'\EE93'}.ms-Icon--DockLeftMirrored:before{content:'\E90C'}.ms-Icon--DockLeft:before{content:'\EA4C'}.ms-Icon--DoubleChevronLeft:before{content:'\EDBF'}.ms-Icon--DoubleChevronRight:before{content:'\EDBE'}.ms-Icon--DoubleChevronLeft12:before{content:'\EE99'}.ms-Icon--DoubleChevronRight12:before{content:'\EE98'}.ms-Icon--DoubleChevronLeftMedMirrored:before{content:'\E991'}.ms-Icon--DoubleChevronLeftMed:before{content:'\EA4D'}.ms-Icon--EditMirrored:before{content:'\E70F'}.ms-Icon--Edit:before{content:'\EB7E'}.ms-Icon--FabricFormLibraryMirrored:before{content:'\F09F'}.ms-Icon--FabricFormLibrary:before{content:'\F0A0'}.ms-Icon--FabricReportLibraryMirrored:before{content:'\F0A1'}.ms-Icon--FabricReportLibrary:before{content:'\F0A2'}.ms-Icon--FlickLeft:before{content:'\E938'}.ms-Icon--FlickRight:before{content:'\E937'}.ms-Icon--FormLibraryMirrored:before{content:'\EEB9'}.ms-Icon--FormLibrary:before{content:'\EEBA'}.ms-Icon--Forward:before{content:'\E72B'}.ms-Icon--Back:before{content:'\E72A'}.ms-Icon--HelpMirrored:before{content:'\E897'}.ms-Icon--Help:before{content:'\EA51'}.ms-Icon--IssueTrackingMirrored:before{content:'\EEC0'}.ms-Icon--IssueTracking:before{content:'\EEC1'}.ms-Icon--ListMirrored:before{content:'\EA37'}.ms-Icon--List:before{content:'\EA55'}.ms-Icon--MailReplyAllMirrored:before{content:'\E8C2'}.ms-Icon--MailReplyAll:before{content:'\EA58'}.ms-Icon--MailReplyMirrored:before{content:'\E8CA'}.ms-Icon--MailReply:before{content:'\EA57'}.ms-Icon--MultiSelectMirrored:before{content:'\E762'}.ms-Icon--MultiSelect:before{content:'\EA98'}.ms-Icon--OpenPaneMirrored:before{content:'\E8A0'}.ms-Icon--OpenPane:before{content:'\EA5B'}.ms-Icon--PageLeft:before{content:'\E761'}.ms-Icon--PageRight:before{content:'\E760'}.ms-Icon--QuestionnaireMirrored:before{content:'\EE19'}.ms-Icon--Questionnaire:before{content:'\EE4B'}.ms-Icon--Redo:before{content:'\E7A7'}.ms-Icon--Undo:before{content:'\E7A6'}.ms-Icon--ReplyAllMirrored:before{content:'\EE0A'}.ms-Icon--ReplyAll:before{content:'\EE36'}.ms-Icon--ReplyMirrored:before{content:'\E97A'}.ms-Icon--Reply:before{content:'\EE35'}.ms-Icon--ReportLibraryMirrored:before{content:'\EEBB'}.ms-Icon--ReportLibrary:before{content:'\EEBC'}.ms-Icon--SendMirrored:before{content:'\E724'}.ms-Icon--Send:before{content:'\EA63'}.ms-Icon--ShowResultsMirrored:before{content:'\E8BC'}.ms-Icon--ShowResults:before{content:'\EA65'}.ms-Icon--TaskManagerMirrored:before{content:'\EDB7'}.ms-Icon--TaskManager:before{content:'\EDB8'}.ms-Icon--ThumbnailViewMirrored:before{content:'\E7B6'}.ms-Icon--ThumbnailView:before{content:'\EA67'}.ms-Icon--TriangleLeft12:before{content:'\EED3'}.ms-Icon--TriangleRight12:before{content:'\EED2'}.ms-Icon--TriangleSolidLeft12:before{content:'\EECF'}.ms-Icon--TriangleSolidRight12:before{content:'\EECE'}.ms-u-slideRightIn10{animation-name:fadeIn,slideRightIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn20{animation-name:fadeIn,slideRightIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn40{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn10{animation-name:fadeIn,slideLeftIn10;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn20{animation-name:fadeIn,slideLeftIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn40{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn400{animation-name:fadeIn,slideRightIn400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn400{animation-name:fadeIn,slideLeft400;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideLeft400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn20{animation-name:fadeIn,slideUpIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn10{animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn20{animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn10{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}.ms-u-slideRightOut40{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{animation-name:fadeOut,slideRightOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{animation-name:fadeOut,slideLeftOut400;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{animation-name:fadeOut,slideUpOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{animation-name:fadeOut,slideDownOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{animation-name:fadeOut,slideDownOut10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{animation-name:fadeIn,scaleUp100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleX(1)}}.ms-u-scaleDownIn100{animation-name:fadeIn,scaleDown100;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@keyframes scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleX(1)}}.ms-u-scaleUpOut103{animation-name:fadeOut,scaleUp103;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleUp103{0%{transform:scaleX(1)}to{transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{animation-name:fadeOut,scaleDown98;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes scaleDown98{0%{transform:scaleX(1)}to{transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both}.ms-u-fadeIn100{animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeIn;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeIn{0%{opacity:0;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both}.ms-u-fadeOut100{animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;-webkit-animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:fadeOut;animation-fill-mode:both;animation-duration:.467s}@keyframes fadeOut{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{animation-name:rotate90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotate90{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}.ms-u-rotateN90deg{animation-name:rotateN90;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@keyframes rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}.ms-u-expandCollapse400{transition:height .367s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height .167s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{animation-delay:.167s}.ms-u-delay200{animation-delay:.267s}.ms-u-slideRightIn10{animation-name:fadeIn,slideLeft10;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn10,.ms-u-slideRightIn20{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideRightIn20{animation-name:fadeIn,slideLeft20;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn40{animation-name:fadeIn,slideLeft40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn10,.ms-u-slideRightIn40{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn10{animation-name:fadeIn,slideRight10;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn20{animation-name:fadeIn,slideRight20;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn20,.ms-u-slideLeftIn40{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn40{animation-name:fadeIn,slideRight40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn400{animation-name:fadeIn,slideLeft400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn400,.ms-u-slideRightIn400{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn400{animation-name:fadeIn,slideRight400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightOut40{animation-name:fadeOut,slideLeftOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideLeftOut40,.ms-u-slideRightOut40{-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s}.ms-u-slideLeftOut40{animation-name:fadeOut,slideRightOut40;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideRightOut400{animation-name:fadeOut,slideLeftOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideLeftOut400,.ms-u-slideRightOut400{-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s}.ms-u-slideLeftOut400{animation-name:fadeOut,slideRightOut400;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg{animation-name:rotateN90;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg,.ms-u-rotateN90deg{-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s}.ms-u-rotateN90deg{animation-name:rotate90;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{left:100%}.ms-u-smPull11{left:91.66666666666666%}.ms-u-smPull10{left:83.33333333333334%}.ms-u-smPull9{left:75%}.ms-u-smPull8{left:66.66666666666666%}.ms-u-smPull7{left:58.333333333333336%}.ms-u-smPull6{left:50%}.ms-u-smPull5{left:41.66666666666667%}.ms-u-smPull4{left:33.33333333333333%}.ms-u-smPull3{left:25%}.ms-u-smPull2{left:16.666666666666664%}.ms-u-smPull1{left:8.333333333333332%}.ms-u-smPull0{left:auto}.ms-u-smPush12{right:100%}.ms-u-smPush11{right:91.66666666666666%}.ms-u-smPush10{right:83.33333333333334%}.ms-u-smPush9{right:75%}.ms-u-smPush8{right:66.66666666666666%}.ms-u-smPush7{right:58.333333333333336%}.ms-u-smPush6{right:50%}.ms-u-smPush5{right:41.66666666666667%}.ms-u-smPush4{right:33.33333333333333%}.ms-u-smPush3{right:25%}.ms-u-smPush2{right:16.666666666666664%}.ms-u-smPush1{right:8.333333333333332%}.ms-u-smPush0{right:auto}.ms-u-smOffset11{margin-right:91.66666666666666%}.ms-u-smOffset10{margin-right:83.33333333333334%}.ms-u-smOffset9{margin-right:75%}.ms-u-smOffset8{margin-right:66.66666666666666%}.ms-u-smOffset7{margin-right:58.333333333333336%}.ms-u-smOffset6{margin-right:50%}.ms-u-smOffset5{margin-right:41.66666666666667%}.ms-u-smOffset4{margin-right:33.33333333333333%}.ms-u-smOffset3{margin-right:25%}.ms-u-smOffset2{margin-right:16.666666666666664%}.ms-u-smOffset1{margin-right:8.333333333333332%}.ms-u-smOffset0{margin-right:0}@media (min-width:480px){.ms-u-md12{width:100%}}@media (min-width:480px){.ms-u-md11{width:91.66666666666666%}}@media (min-width:480px){.ms-u-md10{width:83.33333333333334%}}@media (min-width:480px){.ms-u-md9{width:75%}}@media (min-width:480px){.ms-u-md8{width:66.66666666666666%}}@media (min-width:480px){.ms-u-md7{width:58.333333333333336%}}@media (min-width:480px){.ms-u-md6{width:50%}}@media (min-width:480px){.ms-u-md5{width:41.66666666666667%}}@media (min-width:480px){.ms-u-md4{width:33.33333333333333%}}@media (min-width:480px){.ms-u-md3{width:25%}}@media (min-width:480px){.ms-u-md2{width:16.666666666666664%}}@media (min-width:480px){.ms-u-md1{width:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull12{left:100%}}@media (min-width:480px){.ms-u-mdPull11{left:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPull10{left:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPull9{left:75%}}@media (min-width:480px){.ms-u-mdPull8{left:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPull7{left:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPull6{left:50%}}@media (min-width:480px){.ms-u-mdPull5{left:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPull4{left:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPull3{left:25%}}@media (min-width:480px){.ms-u-mdPull2{left:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPull1{left:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPull0{left:auto}}@media (min-width:480px){.ms-u-mdPush12{right:100%}}@media (min-width:480px){.ms-u-mdPush11{right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdPush10{right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdPush9{right:75%}}@media (min-width:480px){.ms-u-mdPush8{right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdPush7{right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdPush6{right:50%}}@media (min-width:480px){.ms-u-mdPush5{right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdPush4{right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdPush3{right:25%}}@media (min-width:480px){.ms-u-mdPush2{right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdPush1{right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdPush0{right:auto}}@media (min-width:480px){.ms-u-mdOffset11{margin-right:91.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset10{margin-right:83.33333333333334%}}@media (min-width:480px){.ms-u-mdOffset9{margin-right:75%}}@media (min-width:480px){.ms-u-mdOffset8{margin-right:66.66666666666666%}}@media (min-width:480px){.ms-u-mdOffset7{margin-right:58.333333333333336%}}@media (min-width:480px){.ms-u-mdOffset6{margin-right:50%}}@media (min-width:480px){.ms-u-mdOffset5{margin-right:41.66666666666667%}}@media (min-width:480px){.ms-u-mdOffset4{margin-right:33.33333333333333%}}@media (min-width:480px){.ms-u-mdOffset3{margin-right:25%}}@media (min-width:480px){.ms-u-mdOffset2{margin-right:16.666666666666664%}}@media (min-width:480px){.ms-u-mdOffset1{margin-right:8.333333333333332%}}@media (min-width:480px){.ms-u-mdOffset0{margin-right:0}}@media (min-width:640px){.ms-u-lg12{width:100%}}@media (min-width:640px){.ms-u-lg11{width:91.66666666666666%}}@media (min-width:640px){.ms-u-lg10{width:83.33333333333334%}}@media (min-width:640px){.ms-u-lg9{width:75%}}@media (min-width:640px){.ms-u-lg8{width:66.66666666666666%}}@media (min-width:640px){.ms-u-lg7{width:58.333333333333336%}}@media (min-width:640px){.ms-u-lg6{width:50%}}@media (min-width:640px){.ms-u-lg5{width:41.66666666666667%}}@media (min-width:640px){.ms-u-lg4{width:33.33333333333333%}}@media (min-width:640px){.ms-u-lg3{width:25%}}@media (min-width:640px){.ms-u-lg2{width:16.666666666666664%}}@media (min-width:640px){.ms-u-lg1{width:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull12{left:100%}}@media (min-width:640px){.ms-u-lgPull11{left:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPull10{left:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPull9{left:75%}}@media (min-width:640px){.ms-u-lgPull8{left:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPull7{left:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPull6{left:50%}}@media (min-width:640px){.ms-u-lgPull5{left:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPull4{left:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPull3{left:25%}}@media (min-width:640px){.ms-u-lgPull2{left:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPull1{left:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPull0{left:auto}}@media (min-width:640px){.ms-u-lgPush12{right:100%}}@media (min-width:640px){.ms-u-lgPush11{right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgPush10{right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgPush9{right:75%}}@media (min-width:640px){.ms-u-lgPush8{right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgPush7{right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgPush6{right:50%}}@media (min-width:640px){.ms-u-lgPush5{right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgPush4{right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgPush3{right:25%}}@media (min-width:640px){.ms-u-lgPush2{right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgPush1{right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgPush0{right:auto}}@media (min-width:640px){.ms-u-lgOffset11{margin-right:91.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset10{margin-right:83.33333333333334%}}@media (min-width:640px){.ms-u-lgOffset9{margin-right:75%}}@media (min-width:640px){.ms-u-lgOffset8{margin-right:66.66666666666666%}}@media (min-width:640px){.ms-u-lgOffset7{margin-right:58.333333333333336%}}@media (min-width:640px){.ms-u-lgOffset6{margin-right:50%}}@media (min-width:640px){.ms-u-lgOffset5{margin-right:41.66666666666667%}}@media (min-width:640px){.ms-u-lgOffset4{margin-right:33.33333333333333%}}@media (min-width:640px){.ms-u-lgOffset3{margin-right:25%}}@media (min-width:640px){.ms-u-lgOffset2{margin-right:16.666666666666664%}}@media (min-width:640px){.ms-u-lgOffset1{margin-right:8.333333333333332%}}@media (min-width:640px){.ms-u-lgOffset0{margin-right:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}}@media (min-width:1024px){.ms-u-xl11{width:91.66666666666666%}}@media (min-width:1024px){.ms-u-xl10{width:83.33333333333334%}}@media (min-width:1024px){.ms-u-xl9{width:75%}}@media (min-width:1024px){.ms-u-xl8{width:66.66666666666666%}}@media (min-width:1024px){.ms-u-xl7{width:58.333333333333336%}}@media (min-width:1024px){.ms-u-xl6{width:50%}}@media (min-width:1024px){.ms-u-xl5{width:41.66666666666667%}}@media (min-width:1024px){.ms-u-xl4{width:33.33333333333333%}}@media (min-width:1024px){.ms-u-xl3{width:25%}}@media (min-width:1024px){.ms-u-xl2{width:16.666666666666664%}}@media (min-width:1024px){.ms-u-xl1{width:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull12{left:100%}}@media (min-width:1024px){.ms-u-xlPull11{left:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull10{left:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPull9{left:75%}}@media (min-width:1024px){.ms-u-xlPull8{left:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPull7{left:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPull6{left:50%}}@media (min-width:1024px){.ms-u-xlPull5{left:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPull4{left:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPull3{left:25%}}@media (min-width:1024px){.ms-u-xlPull2{left:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPull1{left:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPull0{left:auto}}@media (min-width:1024px){.ms-u-xlPush12{right:100%}}@media (min-width:1024px){.ms-u-xlPush11{right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush10{right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlPush9{right:75%}}@media (min-width:1024px){.ms-u-xlPush8{right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlPush7{right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlPush6{right:50%}}@media (min-width:1024px){.ms-u-xlPush5{right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlPush4{right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlPush3{right:25%}}@media (min-width:1024px){.ms-u-xlPush2{right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlPush1{right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlPush0{right:auto}}@media (min-width:1024px){.ms-u-xlOffset11{margin-right:91.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset10{margin-right:83.33333333333334%}}@media (min-width:1024px){.ms-u-xlOffset9{margin-right:75%}}@media (min-width:1024px){.ms-u-xlOffset8{margin-right:66.66666666666666%}}@media (min-width:1024px){.ms-u-xlOffset7{margin-right:58.333333333333336%}}@media (min-width:1024px){.ms-u-xlOffset6{margin-right:50%}}@media (min-width:1024px){.ms-u-xlOffset5{margin-right:41.66666666666667%}}@media (min-width:1024px){.ms-u-xlOffset4{margin-right:33.33333333333333%}}@media (min-width:1024px){.ms-u-xlOffset3{margin-right:25%}}@media (min-width:1024px){.ms-u-xlOffset2{margin-right:16.666666666666664%}}@media (min-width:1024px){.ms-u-xlOffset1{margin-right:8.333333333333332%}}@media (min-width:1024px){.ms-u-xlOffset0{margin-right:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}}@media (min-width:1366px){.ms-u-xxl11{width:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxl10{width:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxl9{width:75%}}@media (min-width:1366px){.ms-u-xxl8{width:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxl7{width:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxl6{width:50%}}@media (min-width:1366px){.ms-u-xxl5{width:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxl4{width:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxl3{width:25%}}@media (min-width:1366px){.ms-u-xxl2{width:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxl1{width:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull12{left:100%}}@media (min-width:1366px){.ms-u-xxlPull11{left:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull10{left:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPull9{left:75%}}@media (min-width:1366px){.ms-u-xxlPull8{left:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPull7{left:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPull6{left:50%}}@media (min-width:1366px){.ms-u-xxlPull5{left:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPull4{left:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPull3{left:25%}}@media (min-width:1366px){.ms-u-xxlPull2{left:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPull1{left:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPull0{left:auto}}@media (min-width:1366px){.ms-u-xxlPush12{right:100%}}@media (min-width:1366px){.ms-u-xxlPush11{right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush10{right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlPush9{right:75%}}@media (min-width:1366px){.ms-u-xxlPush8{right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlPush7{right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlPush6{right:50%}}@media (min-width:1366px){.ms-u-xxlPush5{right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlPush4{right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlPush3{right:25%}}@media (min-width:1366px){.ms-u-xxlPush2{right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlPush1{right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlPush0{right:auto}}@media (min-width:1366px){.ms-u-xxlOffset11{margin-right:91.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset10{margin-right:83.33333333333334%}}@media (min-width:1366px){.ms-u-xxlOffset9{margin-right:75%}}@media (min-width:1366px){.ms-u-xxlOffset8{margin-right:66.66666666666666%}}@media (min-width:1366px){.ms-u-xxlOffset7{margin-right:58.333333333333336%}}@media (min-width:1366px){.ms-u-xxlOffset6{margin-right:50%}}@media (min-width:1366px){.ms-u-xxlOffset5{margin-right:41.66666666666667%}}@media (min-width:1366px){.ms-u-xxlOffset4{margin-right:33.33333333333333%}}@media (min-width:1366px){.ms-u-xxlOffset3{margin-right:25%}}@media (min-width:1366px){.ms-u-xxlOffset2{margin-right:16.666666666666664%}}@media (min-width:1366px){.ms-u-xxlOffset1{margin-right:8.333333333333332%}}@media (min-width:1366px){.ms-u-xxlOffset0{margin-right:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}}@media (min-width:1920px){.ms-u-xxxl11{width:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl10{width:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxl9{width:75%}}@media (min-width:1920px){.ms-u-xxxl8{width:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxl7{width:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxl6{width:50%}}@media (min-width:1920px){.ms-u-xxxl5{width:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxl4{width:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxl3{width:25%}}@media (min-width:1920px){.ms-u-xxxl2{width:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxl1{width:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull12{left:100%}}@media (min-width:1920px){.ms-u-xxxlPull11{left:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull10{left:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPull9{left:75%}}@media (min-width:1920px){.ms-u-xxxlPull8{left:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPull7{left:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPull6{left:50%}}@media (min-width:1920px){.ms-u-xxxlPull5{left:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPull4{left:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPull3{left:25%}}@media (min-width:1920px){.ms-u-xxxlPull2{left:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPull1{left:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPull0{left:auto}}@media (min-width:1920px){.ms-u-xxxlPush12{right:100%}}@media (min-width:1920px){.ms-u-xxxlPush11{right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush10{right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlPush9{right:75%}}@media (min-width:1920px){.ms-u-xxxlPush8{right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlPush7{right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlPush6{right:50%}}@media (min-width:1920px){.ms-u-xxxlPush5{right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlPush4{right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlPush3{right:25%}}@media (min-width:1920px){.ms-u-xxxlPush2{right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlPush1{right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlPush0{right:auto}}@media (min-width:1920px){.ms-u-xxxlOffset11{margin-right:91.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset10{margin-right:83.33333333333334%}}@media (min-width:1920px){.ms-u-xxxlOffset9{margin-right:75%}}@media (min-width:1920px){.ms-u-xxxlOffset8{margin-right:66.66666666666666%}}@media (min-width:1920px){.ms-u-xxxlOffset7{margin-right:58.333333333333336%}}@media (min-width:1920px){.ms-u-xxxlOffset6{margin-right:50%}}@media (min-width:1920px){.ms-u-xxxlOffset5{margin-right:41.66666666666667%}}@media (min-width:1920px){.ms-u-xxxlOffset4{margin-right:33.33333333333333%}}@media (min-width:1920px){.ms-u-xxxlOffset3{margin-right:25%}}@media (min-width:1920px){.ms-u-xxxlOffset2{margin-right:16.666666666666664%}}@media (min-width:1920px){.ms-u-xxxlOffset1{margin-right:8.333333333333332%}}@media (min-width:1920px){.ms-u-xxxlOffset0{margin-right:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-right:8px;padding-left:8px;box-sizing:border-box;float:right}.ms-Grid-col .ms-Grid{padding:0}.ms-Fabric{color:#333}
\ No newline at end of file
diff --git a/dist/documentation/Components/Breadcrumb/index.html b/dist/documentation/Components/Breadcrumb/index.html
new file mode 100644
index 00000000..7dd06979
--- /dev/null
+++ b/dist/documentation/Components/Breadcrumb/index.html
@@ -0,0 +1,184 @@
+
+
+
+
+
+
+
+ Breadcrumb
+
+
+
+
+
+
+
+
+
+
+Breadcrumb
+Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access
+ to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.
+Best Practices
+
+
+
+ Do
+ Don't
+
+
+
+
+ Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page.
+ Don't use Breadcrumbs as a primary way to navigate an app or site.
+
+
+
+Variants
+Default
+
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-overflow
+ .ms-Breadcrumb
+ Use this class to show an ellipsis, which opens a Contextual Menu of additional breadcrumbs. Without this class items that do not fit will be unavailable.
+
+
+ .is-open
+ .ms-Breadcrumb-overflowMenu
+ Displays the overflow menu.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+<div class="ms-Breadcrumb ">
+ <div class="ms-Breadcrumb-overflow">
+ <div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More" tabindex="1"></div>
+ <div class="ms-Breadcrumb-overflowMenu">
+ <ul class="ms-ContextualMenu is-open"></ul>
+ </div>
+ </div>
+ <ul class="ms-Breadcrumb-list">
+ <li class="ms-Breadcrumb-listItem">
+ <a class="ms-Breadcrumb-itemLink" tabindex="0">Files</a>
+ <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+ </li>
+ <li class="ms-Breadcrumb-listItem">
+ <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 1</a>
+ <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+ </li>
+ <li class="ms-Breadcrumb-listItem">
+ <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 2</a>
+ <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+ </li>
+ <li class="ms-Breadcrumb-listItem">
+ <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 3</a>
+ <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+ </li>
+ <li class="ms-Breadcrumb-listItem">
+ <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 4</a>
+ <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+ </li>
+ <li class="ms-Breadcrumb-listItem">
+ <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 5</a>
+ <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+ </li>
+ <li class="ms-Breadcrumb-listItem">
+ <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 6</a>
+ <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+ </li>
+ <li class="ms-Breadcrumb-listItem">
+ <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 7</a>
+ <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
+ </li>
+ </ul>
+</div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Breadcrumb components on the page:
+
+
+ <script type="text/javascript">
+ var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb');
+ var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML);
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the .ms-Breadcrumb-listItem
elements) with your content.
+
+Dependencies
+ContextualMenu
+Accessibility
+The component's JavaScript will apply the correct tabindex
values to ensure keyboard accessibility.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Button/index.html b/dist/documentation/Components/Button/index.html
new file mode 100644
index 00000000..9f5d12f5
--- /dev/null
+++ b/dist/documentation/Components/Button/index.html
@@ -0,0 +1,184 @@
+
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog. When considering
+ their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button
+ should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements. While buttons can technically be used to navigate a user to another part of the experience, this is not recommended - unless that navigation
+ is part of an action or their flow.
+Best Practices
+
+
+
+ Do
+ Don't
+
+
+
+
+ Make sure the label conveys a clear purpose of the button to the user.
+ Don't use generic labels like "Ok," especially in the case of an error; errors are never "Ok."
+
+
+ Button labels must describe the action the button will perform and should include a verb. Use concise, specific, self-explanatory labels, usually a single word.
+ Don’t place the default focus on a button that destroys data. Instead, place the default focus on the button that performs the "safe act" and retains the content (i.e. "Save") or cancels the action (i.e. "Cancel").
+
+
+ Buttons should always include a noun if there is any room for interpretation about what the verb operates on.
+ Don’t use a button to navigate to another place, use a link instead. The exception is in a wizard where "Back" and "Next" buttons may be used.
+
+
+ Consider the affect localization will have on the button and what will happen to components around it.
+ Don’t put too much text in a button - try to keep the length of your text to a minimum.
+
+
+ If the button’s label content is dynamic, consider how the button will resize and what will happen to components around it.
+ Don't put anything other than text in a button.
+
+
+ Use only a single line of text in the label of the button.
+
+
+
+ Expose only one or two buttons to the user at a time, for example, "Accept" and "Cancel". If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions,
+ with a single command button to trigger those actions.
+
+
+
+ Show only one primary button that inherits theme color at rest state. In the event there are more than two buttons with equal priority, all buttons should have neutral backgrounds.
+
+
+
+ "Submit", "OK", and "Apply" buttons should always be styled as primary buttons. When "Reset" or "Cancel" buttons appear alongside one of the above, they should be styled as secondary buttons.
+
+
+
+ Default buttons should always perform safe operations. For example, a default button should never delete.
+
+
+
+ Use task buttons to cause actions that complete a task or cause a transitional task. Do not use buttons to toggle other UX in the same context. For example, a button may be used to open an interface area but should not be used to open an additional
+ set of components in the same interface.
+
+
+
+
+Variants
+Default
+
+
+ Create Account
+
+Primary
+Where multiple buttons are presented together, this is the default action when submitting the form.
+
+
+ Create Account
+
+Compound
+Provides a second line of text to explain the action the button takes.
+
+
+
+ Create Account
+ Description of this action this button takes
+
+Hero
+Similar to the Command variant, but with a larger size to draw attention to important actions.
+
+
+
+ Create Account
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-disabled
+ .ms-Button
+ When using an <a>
element, apply this class to disable the button. When using a <button>
, the disabled
attribute can be used instead.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+<button class="ms-Button
+
+ ">
+ <span class="ms-Button-label">Create Account</span>
+</button>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Button components on the page:
+
+
+ <script type="text/javascript">
+ var ButtonElements = document.querySelectorAll(".ms-Button");
+ for(var i = 0; i < ButtonElements.length; i++) {
+ new fabric['Button'](ButtonElements[i], function() {
+ // Insert Event Here
+ });
+ }
+</script>
+
+
+
+
+ Replace the sample HTML content (such as the content of .ms-Button-label
) with your content.
+
+Dependencies
+This component has no dependencies.
+Accessibility
+Focus styles are included for keyboard navigation.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Callout/index.html b/dist/documentation/Components/Callout/index.html
new file mode 100644
index 00000000..59c23ad7
--- /dev/null
+++ b/dist/documentation/Components/Callout/index.html
@@ -0,0 +1,334 @@
+
+
+
+
+
+
+
+ Callout
+
+
+
+
+
+
+
+
+
+
+Callout
+Callouts are a powerful way to simplify a user interface. They host tips and other information users need when they need it, with minimal effort on their part. Callouts can help you use screen space more effectively and reduce screen clutter. However,
+ poorly designed Callouts can be annoying, distracting, unhelpful, overwhelming, or in the way.
+Use a Callout for displaying additional contextual information about an item on the screen. Unlike Tooltips, Callouts also have a tail that identifies their source. A common use for Callout is the introduction of a new feature or capability of an app
+ or site. Alternate usages include pairing the Callout with a button or clickable element for on-demand presentation of additional or supporting content.
+Real-world examples of this implementation can be seen in administrative interfaces where a particularly difficult-to-understand concept is paired with the ms-Icon--info "i" icon. In this example, Callout - with its tip text - is opened when
+ the user clicks on or hovers over the icon.
+Best Practices
+
+
+
+ Do
+ Don't
+
+
+
+
+ Use Callouts to introduce new concepts in an experience where highlighting specific pieces of the UI is necessary.
+ Don’t overuse Callout without putting the user in control. Too many Callouts which open automatically can be perceived as interrupting workflow and are a bad user experience.
+
+
+ Do be concise with the information you provide inside of a Callout. Short sentences or sentence fragments are best.
+ Don't use large, unformatted blocks of text in your Callout, they are difficult to read and overwhelming.
+
+
+ Do be helpful with the tip text inside of your Callout.
+ Don't put obvious tip text, or text that simply repeats what is already on the screen in your Callout.
+
+
+ Do limit the information inside of a Callout to supplemental information that users don't have to read.
+ Because the content inside of a Callout isn't always visible, don't put important or required information in a Callout.
+
+
+ Callouts should be placed near the object being described, usually at the pointer's tail or head if possible.
+ Don’t block important UI with the placement of your Callout, it is a poor user experience that will lead to frustration.
+
+
+ When additional context - or more advanced description - is necessary, consider placing a link to "Learn more" at the bottom of the Callout and opening the additional content in a new window or Panel when clicked.
+ Don’t open Callout from within another Callout.
+
+
+
+ Don’t use Callout to ask the user to confirm an action, use a Dialog instead.
+
+
+
+ Don’t show Callouts on hidden elements.
+
+
+
+Variants
+Default
+
+
+
+
+
+
+
+
+
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
+
+
+
+
+
+
+
+ Open Callout
+
+
+Close
+Includes an icon to dismiss the callout.
+
+
+
+
+
+
+
+
+
+
+
+
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
+
+
+
+
+
+
+
+ Create Account
+
+
+Action text
+Includes buttons to take action.
+
+
+
+
+
+
+
+
+
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
+
+
+
+
+ Command
+
+
+
+ Command
+
+
+
+
+
+
+
+ Open Callout Action Text
+
+
+OOBE (Out Of the Box Experience)
+Draws attention to one aspect of the application during a product tour.
+
+
+
+
+
+
+
+
+
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
+
+
+
+ More
+
+
+ Got it
+
+
+
+
+
+
+
+ Open Callout OOBE
+
+
+Peek
+A smaller callout with an action.
+
+
+
+
+
+
+ Open Callout Peek
+
+
+States
+This component has only the default state.
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+ <div class="ms-CalloutExample">
+
+
+ <div class="ms-Callout
+
+ is-hidden">
+ <div class="ms-Callout-main">
+ <div class="ms-Callout-header">
+ <p class="ms-Callout-title">All of your favorite people</p>
+ </div>
+ <div class="ms-Callout-inner">
+ <div class="ms-Callout-content">
+ <p class="ms-Callout-subText ms-Callout-subText-- ">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
+ </div>
+ <div class="ms-Callout-actions">
+
+
+ <a class="ms-Link "
+
+
+ >Learn more</a>
+
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ms-CalloutExample-button">
+
+ <button class="ms-Button
+
+ ">
+ <span class="ms-Button-label">Open Callout</span>
+ </button> </div>
+</div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate a Callout component on the page:
+
+
+ <script type="text/javascript">
+ var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
+ for(var i = 0; i < CalloutExamples.length; i++) {
+ var Example = CalloutExamples[i];
+ var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
+ var CalloutElement = Example.querySelector(".ms-Callout");
+ new fabric['Callout'](
+ CalloutElement,
+ ExampleButtonElement,
+ "right"
+ );
+ }
+</script>
+
+
+
+ Replace the sample HTML content (such as the content of .ms-Callout-title
) with your content.
+
+Dependencies
+Button, Label, Link, ContextualHost, CommandButton
+Accessibility
+Focus styles are included for all of the actions (links and buttons) included within a Callout.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/CheckBox/index.html b/dist/documentation/Components/CheckBox/index.html
new file mode 100644
index 00000000..a9615f4d
--- /dev/null
+++ b/dist/documentation/Components/CheckBox/index.html
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+ CheckBox
+
+
+
+
+
+
+
+
+
+
+Check Box
+Allows selection from one or more options.
+Variants
+Checkbox
+Used to indicate a simple yes or no choice, typically as part of a form.
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+ Checkbox Disabled
+
+
+
+
+
+
+ Checkbox selected
+
+
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ disabled
attribute
+ .ms-CheckBox-input
+ Disables the input.
+
+
+ checked
attribute
+ .ms-CheckBox-input
+ Fills in the checkbox or radio button.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<div class="ms-CheckBox">
+ <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+ <label role="checkbox"
+ class="ms-CheckBox-field "
+ tabindex="0"
+ aria-checked="false"
+ name="checkboxa"
+>
+ <span class="ms-Label">Checkbox</span>
+ </label>
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all CheckBox components on the page:
+
+
+ <script type="text/javascript">
+ var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
+ for(var i = 0; i < CheckBoxElements.length; i++) {
+ new fabric['CheckBox'](CheckBoxElements[i]);
+ }
+</script>
+
+
+
+ Replace the sample HTML content (such as the content of .ms-Label
) with your content.
+
+Dependencies
+Label
+Accessibility
+Focus styles are included for these fields. Ensure that you use descriptive labels.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/ChoiceFieldGroup/index.html b/dist/documentation/Components/ChoiceFieldGroup/index.html
new file mode 100644
index 00000000..e8f037e4
--- /dev/null
+++ b/dist/documentation/Components/ChoiceFieldGroup/index.html
@@ -0,0 +1,159 @@
+
+
+
+
+
+
+
+ ChoiceFieldGroup
+
+
+
+
+
+
+
+
+
+
+Choice Field Group
+Allows selection from one or more options.
+Variants
+Default
+Used to indicate a single choice from multiple options.
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
+ <div class="ms-ChoiceFieldGroup-title">
+ <label class="ms-Label is-required ">Unselected</label>
+ </div>
+ <ul class="ms-ChoiceFieldGroup-list">
+
+
+<div class="ms-RadioButton">
+ <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+ <label role="radio"
+ class="ms-RadioButton-field "
+ tabindex="0"
+ aria-checked="false"
+ name="choicefieldgroup"
+>
+ <span class="ms-Label">Option 1</span>
+ </label>
+</div>
+
+
+<div class="ms-RadioButton">
+ <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+ <label role="radio"
+ class="ms-RadioButton-field "
+ tabindex="0"
+ aria-checked="false"
+ name="choicefieldgroup"
+>
+ <span class="ms-Label">Option 2</span>
+ </label>
+</div>
+
+
+<div class="ms-RadioButton">
+ <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+ <label role="radio"
+ class="ms-RadioButton-field is-disabled "
+ tabindex="0"
+ aria-checked="false"
+ name="choicefieldgroup"
+ aria-disabled="true"
+ >
+ <span class="ms-Label">Option 3</span>
+ </label>
+</div>
+
+
+<div class="ms-RadioButton">
+ <input tabindex="-1" type="radio" class="ms-RadioButton-input">
+ <label role="radio"
+ class="ms-RadioButton-field "
+ tabindex="0"
+ aria-checked="false"
+ name="choicefieldgroup"
+>
+ <span class="ms-Label">Option 4</span>
+ </label>
+</div>
+ </ul>
+</div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all ChoiceFieldGroup components on the page:
+
+
+ <script type="text/javascript">
+ var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
+ for(var i = 0; i < ChoiceFieldGroupElements.length; i++) {
+ new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
+ }
+</script>
+
+
+
+ Replace the sample HTML content (such as the .ms-Label
elements) with your content.
+
+Dependencies
+Label, CheckBox
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/CommandBar/index.html b/dist/documentation/Components/CommandBar/index.html
new file mode 100644
index 00000000..6041055f
--- /dev/null
+++ b/dist/documentation/Components/CommandBar/index.html
@@ -0,0 +1,527 @@
+
+
+
+
+
+
+
+ CommandBar
+
+
+
+
+
+
+
+
+
+
+Command Bar
+Commanding surface for panels, pages, and applications. When planning to use the surface for navigation only, consider the NavBar variant.
+Variants
+Default
+
+
+
+
+
+
+
+
+
+ Search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Command
+
+
+
+ New
+
+
+
+
+
+ Command
+
+
+
+ Command
+
+
+
+ Command
+
+
+
+
+
+
+
+
+
+
+Dropdowns
+
+
+
+
+
+
+
+
+
+ Command
+
+
+
+ Command
+
+
+
+ Reply
+
+
+
+
+
+
+
+ Command
+
+
+
+ Command
+
+
+
+
+
+
+
+
+
+
+NavBar
+Provides a means of navigating to different areas within an application. On small screens, the navigation items are placed inside a hamburger menu.
+
+
+
+
+
+ Show photos from
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Search photos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+All Photos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-hidden
+ .ms-CommandBarItem
+ Hides a Command Bar item from view.
+
+
+ .is-active
+ .ms-CommandBarSearch
+ Expands the search field for use.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+<div class="ms-CommandBar ">
+ <div class="ms-CommandBar-sideCommands">
+
+<div class="ms-CommandButton ms-CommandButton--noLabel ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label"></span> </button>
+</div>
+ </div>
+ <div class="ms-CommandBar-mainArea">
+
+
+<div class="ms-SearchBox ms-SearchBox--commandBar ">
+ <input class="ms-SearchBox-field" type="text" value="">
+ <label class="ms-SearchBox-label">
+ <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+ <span class="ms-SearchBox-text">Search</span>
+ </label>
+
+<div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Cancel"></i></span><span class="ms-CommandButton-label"></span> </button>
+</div>
+
+<div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--ChromeBack"></i></span><span class="ms-CommandButton-label"></span> </button>
+</div>
+
+<div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Filter"></i></span><span class="ms-CommandButton-label"></span> </button>
+</div>
+</div>
+
+<div class="ms-CommandButton ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span> </button>
+</div>
+
+<div class="ms-CommandButton ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">New</span><span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span>
+ </button>
+
+<ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Folder</a>
+ <i class="ms-Icon ms-Icon--Folder "></i>
+ </li>
+ <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Plain Text Document</a>
+ <i class="ms-Icon ms-Icon--Page "></i>
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >A Coffee</a>
+ <i class="ms-Icon ms-Icon--Coffee "></i>
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Picture</a>
+ <i class="ms-Icon ms-Icon--Picture "></i>
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Money</a>
+ <i class="ms-Icon ms-Icon--Money "></i>
+ </li>
+</ul>
+</div>
+
+<div class="ms-CommandButton ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span> </button>
+</div>
+
+<div class="ms-CommandButton ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span> </button>
+</div>
+
+<div class="ms-CommandButton ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span> </button>
+</div>
+
+
+<div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--More"></i></span><span class="ms-CommandButton-label"></span> </button>
+
+<ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Folder</a>
+ <i class="ms-Icon ms-Icon--Folder "></i>
+ </li>
+ <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Plain Text Document</a>
+ <i class="ms-Icon ms-Icon--Page "></i>
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >A Coffee</a>
+ <i class="ms-Icon ms-Icon--Coffee "></i>
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Picture</a>
+ <i class="ms-Icon ms-Icon--Picture "></i>
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Money</a>
+ <i class="ms-Icon ms-Icon--Money "></i>
+ </li>
+</ul>
+</div>
+
+ </div>
+</div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all CommandBar components on the page:
+
+
+ <script type="text/javascript">
+ var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
+ for(var i = 0; i < CommandBarElements.length; i++) {
+ new fabric['CommandBar'](CommandBarElements[i]);
+ }
+</script>
+
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as .ms-CommandBarItem
elements) with your content.
+
+Dependencies
+This component has no dependencies.
+Accessibility
+Refer to the sample code to see how tabindex
attributes should be set to support keyboard navigation.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/CommandButton/index.html b/dist/documentation/Components/CommandButton/index.html
new file mode 100644
index 00000000..d1ed7866
--- /dev/null
+++ b/dist/documentation/Components/CommandButton/index.html
@@ -0,0 +1,221 @@
+
+
+
+
+
+
+
+ CommandButton
+
+
+
+
+
+
+
+
+
+
+
+Allows users to take action, such as submitting a form or dismissing a message. Primary use is in command bar or in Callout.
+Variants
+Default
+
+
+
+ Command
+
+
+
+
+
+
+
+Disabled
+
+
+
+ Command
+
+Dropdown
+
+
+
+ New
+
+
+
+Inline
+
+
+
+ Command
+
+No Label
+
+
+
+
+
+No Label Split
+
+
+
+
+
+
+
+
+
+Pivot
+
+
+
+ New
+
+
+Split
+
+
+
+ Reply
+
+
+
+
+
+Text Only
+
+
+
+Command
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-disabled
+ .ms-Button
+ When using an <a>
element, apply this class to disable the button. When using a <button>
, the disabled
attribute can be used instead.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+<div class="ms-CommandButton ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span> </button>
+</div>
+
+
+
+ Replace the sample HTML content (such as the content of .ms-CommandButton-label
) with your content.
+ If you are using any of CommandButton's variants that use a dropdown, the below JavaScript is required.
+
+
+ <script type="text/javascript">
+ var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
+ for(var i = 0; i < CommandButtonElements.length; i++) {
+ new fabric['CommandButton'](CommandButtonElements[i]);
+ }
+</script>
+
+
+
+
+
+
+Dependencies
+ContextualMenu, ContextualHost
+Accessibility
+Focus styles are included for keyboard navigation.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/ContextualMenu/index.html b/dist/documentation/Components/ContextualMenu/index.html
new file mode 100644
index 00000000..fccb013b
--- /dev/null
+++ b/dist/documentation/Components/ContextualMenu/index.html
@@ -0,0 +1,330 @@
+
+
+
+
+
+
+
+ ContextualMenu
+
+
+
+
+
+
+
+
+
+
+
+Presents options associated with an object. Often opened via a right-click or overflow button.
+Variants
+Default
+A standard menu of commands. Should close when a command is invoked.
+
+
+Multiselect
+Allows for multiple options to be set. Remains opened until the user clicks or taps outside of the menu.
+
+
+
+
+Optional functionality
+
+You can nest a ContextualMenu inside another ContextualMenu, resulting in a submenu.
+
+
+
+
+Dividers
+Dividers can be added to create distinct sections of options or commands.
+
+
+
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-open
+ .ms-ContextualMenu
+ The ContextualMenu is hidden by default. Toggle this class to show or hide it.
+
+
+ .is-selected
+ .ms-ContextualMenu-link
+ Marks that item as selected. Only available for the multiselect variant.
+
+
+ .is-disabled
+ .ms-ContextualMenu-link
+ Disables that item in the menu.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+ <div class="ms-ContextualMenu-basic">
+
+ <button class="ms-Button
+ ms-Button--primary
+ ">
+ <span class="ms-Button-label">Open Example</span>
+ </button>
+ <ul class="ms-ContextualMenu is-hidden ">
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Animals</a>
+
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Books</a>
+
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link is-selected " tabindex="1" >Education</a>
+
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link " tabindex="1" >Music</a>
+
+ </li>
+ <li class="ms-ContextualMenu-item ">
+ <a class="ms-ContextualMenu-link is-disabled " tabindex="1" >Sports</a>
+
+ </li>
+ </ul></div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all ContextualMenu components on the page:
+
+
+ <script type="text/javascript">
+ var ButtonElement = document.querySelector(".ms-ContextualMenu-basic .ms-Button");
+ var ContextualMenuElement = document.querySelector(".ms-ContextualMenu-basic .ms-ContextualMenu");
+ var contextualMenu = new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the .ms-ContextualMenu-link
elements) with your content.
+
+Dependencies
+This component has no dependencies.
+Accessibility
+More details will be added here.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/DatePicker/index.html b/dist/documentation/Components/DatePicker/index.html
new file mode 100644
index 00000000..2a84dae4
--- /dev/null
+++ b/dist/documentation/Components/DatePicker/index.html
@@ -0,0 +1,186 @@
+
+
+
+
+
+
+
+ DatePicker
+
+
+
+
+
+
+
+
+
+
+Date Picker
+Allows for the selection of a date into a text field.
+Variants
+Default
+
+
+
+
+
+
+ Start date
+
+
+
+
+
+
+
+
+
Go to today
+
+
+
+ Jan
+ Feb
+ Mar
+ Apr
+ May
+ Jun
+ Jul
+ Aug
+ Sep
+ Oct
+ Nov
+ Dec
+
+
+
+
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-highlighted
+ .ms-DatePicker-monthOption
, .ms-DatePicker-yearOption
+ Marks a month or year as selected.
+
+
+ .is-pickingYears
+ .ms-DatePicker
+ Displays a set of years to choose from.
+
+
+ .is-pickingMonths
+ .ms-DatePicker
+ Displays a set of months to choose from.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery and PickaDate.js library: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="fabric.min.js"></script>
+ <script src="PickaDate.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+
+<div class="ms-DatePicker">
+ <div class="ms-TextField">
+ <label class="ms-Label">Start date</label>
+ <i class="ms-DatePicker-event ms-Icon ms-Icon--Event"></i>
+ <input class="ms-TextField-field" type="text" placeholder="Select a date…">
+ </div>
+ <div class="ms-DatePicker-monthComponents">
+ <span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
+ <span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
+ <div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>
+ </div>
+ <span class="ms-DatePicker-goToday js-goToday">Go to today</span>
+ <div class="ms-DatePicker-monthPicker">
+ <div class="ms-DatePicker-header">
+ <div class="ms-DatePicker-yearComponents">
+ <span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
+ <span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
+ </div>
+ <div class="ms-DatePicker-currentYear js-showYearPicker"></div>
+ </div>
+ <div class="ms-DatePicker-optionGrid">
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="0">Jan</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="1">Feb</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="2">Mar</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="3">Apr</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="4">May</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="5">Jun</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="6">Jul</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="7">Aug</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="8">Sep</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="9">Oct</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="10">Nov</span>
+ <span class="ms-DatePicker-monthOption js-changeDate" data-month="11">Dec</span>
+ </div>
+ </div>
+ <div class="ms-DatePicker-yearPicker">
+ <div class="ms-DatePicker-decadeComponents">
+ <span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
+ <span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
+ </div>
+ </div>
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to PickaDate and Fabric's JS, to instantiate all DatePicker components on the page:
+
+
+ <script type="text/javascript">
+ var DatePickerElements = document.querySelectorAll(".ms-DatePicker");
+ for(var i = 0; i < DatePickerElements.length; i++) {
+ new fabric['DatePicker'](DatePickerElements[i]);
+ }
+</script>
+
+
+
+
+ Verify that the component is working the same as in the sample above.
+
+Dependencies
+This component has no dependencies on other components. It does, however, require pickadate.js 3.5.3 . Once you have downloaded the ZIP, you'll find picker.js
and picker.date.js
in the lib
folder.
+Accessibility
+More details will be added here.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Dialog/index.html b/dist/documentation/Components/Dialog/index.html
new file mode 100644
index 00000000..8270fd00
--- /dev/null
+++ b/dist/documentation/Components/Dialog/index.html
@@ -0,0 +1,521 @@
+
+
+
+
+
+
+
+ Dialog
+
+
+
+
+
+
+
+
+
+
+Dialog
+Displays content that temporarily blocks interactions with the application. It is primarily used for confirmation tasks, light-weight creation or edit tasks, and simple management tasks.
+Variants
+Default
+Includes a content area and two buttons.
+
+
+
+
All emails together
+
+
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
+
+
+
+
+ Option1
+
+
+
+
+
+
+
+ Option2
+
+
+
+
+
+
+ Save
+
+
+ Cancel
+
+
+
+
Open Dialog
+
+
+
+
+Multiline
+Includes multiple large buttons, each with a title and description.
+
+
+
+
All emails together
+
+
+
+ Create Account
+ Description of this action this button takes
+
+
+
+ Sign in
+ Description of this action this button takes
+
+
+
+ Settings
+ Description of this action this button takes
+
+
+
+
Open Dialog
+
+
+
+
+
+Provides a large, styled header followed by a content area and two buttons.
+
+
+
+Blocking
+The overlay for this variant does not dismiss the Dialog.
+
+
+
+
Unsaved changes
+
+
Are you sure you want to discard these changes?.
+
+
+
+
+ Option1
+
+
+
+
+
+
+
+ Option2
+
+
+
+
+
+
+ Save
+
+
+ Delete
+
+
+
+
Open Dialog
+
+
+
+
+Close
+Includes a close button at the top right, as an additional way to dismiss the dialog.
+
+
+
+
+
+
+
All emails together
+
+
+
+ Save
+
+
+ Cancel
+
+
+
+
Open Dialog
+
+
+
+
+States
+This component has only the default state.
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+<div class="ms-Dialog ">
+ <div class="ms-Dialog-title">All emails together</div>
+ <div class="ms-Dialog-content">
+ <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
+
+
+<div class="ms-CheckBox">
+ <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+ <label role="checkbox"
+ class="ms-CheckBox-field "
+ tabindex="0"
+ aria-checked="false"
+ name="checkboxa"
+>
+ <span class="ms-Label">Option1</span>
+ </label>
+</div>
+
+
+
+<div class="ms-CheckBox">
+ <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
+ <label role="checkbox"
+ class="ms-CheckBox-field "
+ tabindex="0"
+ aria-checked="false"
+ name="checkboxa"
+>
+ <span class="ms-Label">Option2</span>
+ </label>
+</div>
+
+ </div>
+ <div class="ms-Dialog-actions">
+
+<button class="ms-Button ms-Dialog-action
+ ms-Button--primary
+ ">
+ <span class="ms-Button-label">Save</span>
+</button>
+
+<button class="ms-Button ms-Dialog-action
+
+ ">
+ <span class="ms-Button-label">Cancel</span>
+</button>
+ </div>
+</div>
+
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Dialog components on the page:
+
+
+
+ <script type="text/javascript">
+ var DialogElements = document.querySelectorAll(".ms-Dialog");
+ var DialogComponents = [];
+ for (var i = 0; i < DialogElements.length; i++) {
+ (function(){
+ DialogComponents[i] = new fabric['Dialog'](DialogElements[i]);
+ }());
+ }
+</script>
+
+
+
+ or add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate a single Dialog component on the page:
+
+
+
+ <script type="text/javascript">
+ var DialogElement = document.querySelector(".ms-Dialog");
+ var dialogComponent = new fabric['Dialog'](DialogElement);
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the content of .ms-Dialog-content
) with your content.
+
+Dependencies
+This component has no dependencies on other components.
+Accessibility
+More details will be added here.
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Dropdown/index.html b/dist/documentation/Components/Dropdown/index.html
new file mode 100644
index 00000000..69ad2057
--- /dev/null
+++ b/dist/documentation/Components/Dropdown/index.html
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+
+ Dropdown
+
+
+
+
+
+
+
+
+
+
+Dropdown
+Allows for the selection of one option from a list.
+Variants
+Default
+
+
+
+
+ Dropdown label
+
+
+ Choose a sound…
+ Dog barking
+ Wind blowing
+ Duck quacking
+ Cow mooing
+
+
+Disabled
+
+
+
+
+ Dropdown label
+
+
+ Choose a sound…
+ Dog barking
+ Wind blowing
+ Duck quacking
+ Cow mooing
+
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-disabled
+ .ms-Dropdown
+ Disables the dropdown.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+
+
+<div class="ms-Dropdown " tabindex="0">
+ <label class="ms-Label">Dropdown label</label>
+ <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
+ <select class="ms-Dropdown-select">
+ <option>Choose a sound&hellip;</option>
+ <option>Dog barking</option>
+ <option>Wind blowing</option>
+ <option>Duck quacking</option>
+ <option>Cow mooing</option>
+ </select>
+</div>
+
+
+
+ Add the following <script>
tag to your page to instantiate all Dropdown components on the page:
+
+
+ <script type="text/javascript">
+ var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
+ for (var i = 0; i < DropdownHTMLElements.length; ++i) {
+ var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
+ }
+</script>
+
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the options within .ms-Dropdown-select
) with your content.
+
+Dependencies
+This component depends on Panel for when it is rendered on mobile.
+Accessibility
+More details will be added here.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/FacePile/index.html b/dist/documentation/Components/FacePile/index.html
new file mode 100644
index 00000000..b8f76f84
--- /dev/null
+++ b/dist/documentation/Components/FacePile/index.html
@@ -0,0 +1,1429 @@
+
+
+
+
+
+
+
+ FacePile
+
+
+
+
+
+
+
+
+
+
+FacePile
+Displays several people with the option to add additional people or view the details of a person. Although not baked into the component, adding new people to a FacePile (the listing of faces horizontally) should occur through a panel using the FacePile
+ PeoplePicker variant.
+Variants
+Default
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
Details
+
Personal: 555.206.2443
+
Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Accountant
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
Details
+
Personal: 555.206.2443
+
Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Accountant
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
Details
+
Personal: 555.206.2443
+
Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +3
+
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-active
+ .ms-PersonaCard
+ Makes the PersonaCard for a person visible.
+
+
+ .is-active
+ .ms-FacePile-itemBtn--overflow
+ Makes the overflow item for additional people visible.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+
+<div class="ms-FacePile">
+ <button class="ms-FacePile-addButton ms-FacePile-addButton--addPerson">
+ <i class="ms-FacePile-addPersonIcon ms-Icon ms-Icon--AddFriend"></i>
+ </button>
+
+
+
+ <div class="ms-Persona
+ ms-Persona--facePile
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Alton Lafferty</div>
+ <div class="ms-Persona-secondaryText">Accountant</div>
+ </div>
+
+ <div class="ms-PersonaCard ">
+ <div class="ms-PersonaCard-persona">
+
+
+ <div class="ms-Persona
+ ms-Persona--lg
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Alton Lafferty</div>
+ <div class="ms-Persona-secondaryText">Accountant</div>
+ <div class="ms-Persona-tertiaryText">In a meeting</div>
+ <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+ </div>
+ </div>
+ </div>
+ <ul class="ms-PersonaCard-actions">
+ <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
+ <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
+ <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
+ <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
+ <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
+ <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
+ </ul>
+ <div class="ms-PersonaCard-actionDetailBox">
+ <div data-detail-id="mail" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
+ </div>
+ <div data-detail-id="chat" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
+ </div>
+ <div data-detail-id="phone" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailExpander"></div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
+ </div>
+ <div data-detail-id="video" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
+ </div>
+
+ <div data-detail-id="org" class="ms-PersonaCard-details">
+
+
+ <div class="ms-OrgChart ">
+ <div class="ms-OrgChart-group">
+
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Russel Miller</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Douglas Fielder</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Manager</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Grant Steel</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Staff</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Harvey Wallin</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcus Lauer</div>
+ <div class="ms-Persona-secondaryText">Technical Support</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcel Groce</div>
+ <div class="ms-Persona-secondaryText">Delivery</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Jessica Fischer</div>
+ <div class="ms-Persona-secondaryText">Marketing</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div> </div>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="ms-Persona
+ ms-Persona--facePile
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcus Lauer</div>
+ <div class="ms-Persona-secondaryText">Accountant</div>
+ </div>
+
+ <div class="ms-PersonaCard ">
+ <div class="ms-PersonaCard-persona">
+
+
+ <div class="ms-Persona
+ ms-Persona--lg
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcus Lauer</div>
+ <div class="ms-Persona-secondaryText">Accountant</div>
+ <div class="ms-Persona-tertiaryText">In a meeting</div>
+ <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+ </div>
+ </div>
+ </div>
+ <ul class="ms-PersonaCard-actions">
+ <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
+ <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
+ <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
+ <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
+ <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
+ <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
+ </ul>
+ <div class="ms-PersonaCard-actionDetailBox">
+ <div data-detail-id="mail" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
+ </div>
+ <div data-detail-id="chat" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
+ </div>
+ <div data-detail-id="phone" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailExpander"></div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
+ </div>
+ <div data-detail-id="video" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
+ </div>
+
+ <div data-detail-id="org" class="ms-PersonaCard-details">
+
+
+ <div class="ms-OrgChart ">
+ <div class="ms-OrgChart-group">
+
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Russel Miller</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Douglas Fielder</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Manager</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Grant Steel</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Staff</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Harvey Wallin</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcus Lauer</div>
+ <div class="ms-Persona-secondaryText">Technical Support</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcel Groce</div>
+ <div class="ms-Persona-secondaryText">Delivery</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Jessica Fischer</div>
+ <div class="ms-Persona-secondaryText">Marketing</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div> </div>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="ms-Persona
+ ms-Persona--facePile
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Douglas Fielder</div>
+ <div class="ms-Persona-secondaryText">Accountant</div>
+ </div>
+
+ <div class="ms-PersonaCard ">
+ <div class="ms-PersonaCard-persona">
+
+
+ <div class="ms-Persona
+ ms-Persona--lg
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Douglas Fielder</div>
+ <div class="ms-Persona-secondaryText">Accountant</div>
+ <div class="ms-Persona-tertiaryText">In a meeting</div>
+ <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+ </div>
+ </div>
+ </div>
+ <ul class="ms-PersonaCard-actions">
+ <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
+ <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
+ <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
+ <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
+ <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
+ <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
+ </ul>
+ <div class="ms-PersonaCard-actionDetailBox">
+ <div data-detail-id="mail" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
+ </div>
+ <div data-detail-id="chat" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
+ </div>
+ <div data-detail-id="phone" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailExpander"></div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
+ </div>
+ <div data-detail-id="video" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
+ </div>
+
+ <div data-detail-id="org" class="ms-PersonaCard-details">
+
+
+ <div class="ms-OrgChart ">
+ <div class="ms-OrgChart-group">
+
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Russel Miller</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Douglas Fielder</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Manager</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Grant Steel</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Staff</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Harvey Wallin</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcus Lauer</div>
+ <div class="ms-Persona-secondaryText">Technical Support</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcel Groce</div>
+ <div class="ms-Persona-secondaryText">Delivery</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Jessica Fischer</div>
+ <div class="ms-Persona-secondaryText">Marketing</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div> </div>
+ </div>
+ </div>
+ </div>
+
+ <button class="ms-FacePile-addButton ms-FacePile-addButton--overflow">
+ <span class="ms-FacePile-overflowText">+3</span>
+ </button>
+</div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all FacePile components on the page:
+
+
+ <script type="text/javascript">
+ var FacePileElements = document.querySelectorAll(".ms-FacePile");
+ for(var i = 0; i < FacePileElements.length; i++) {
+ new fabric['FacePile'](FacePileElements[i]);
+ }
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content with your content.
+
+Dependencies
+This component has dependencies on Overlay, Link, Panel, PeoplePicker, Persona, PersonaCard, and Spinner.
+Accessibility
+More details will be added here.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Label/index.html b/dist/documentation/Components/Label/index.html
new file mode 100644
index 00000000..0b894218
--- /dev/null
+++ b/dist/documentation/Components/Label/index.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+Label
+Used to label form elements such as TextField and Dropdown.
+Variants
+Default
+
+Name
+
+Required
+
+Name
+
+Disabled
+
+Name
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-required
+ .ms-Label
+ Marks the form element as required.
+
+
+ .is-disabled
+ .ms-Label
+ Marks the form element as disabled.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+<label class="ms-Label ">Name</label>
+
+
+
+
+ Replace the sample HTML content (such as the content of .ms-Label
) with your content.
+
+Dependencies
+This component has no dependencies on other components.
+Accessibility
+When used with a form element, add a for
attribute that matches the id
attribute of the field.
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Link/index.html b/dist/documentation/Components/Link/index.html
new file mode 100644
index 00000000..11f492db
--- /dev/null
+++ b/dist/documentation/Components/Link/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+ Link
+
+
+
+
+
+
+
+
+
+
+Link
+Used to create a hyperlink to another location.
+Variants
+Default
+
+
+Example Link
+
+
+States
+This component has only the default state.
+Using this component
+
+ Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+ <div class="ms-font-m">
+
+
+ <a class="ms-Link "
+ href="#"
+ title="More info about Example Link"
+ >Example Link</a>
+
+</div>
+
+
+
+ Replace the sample text with the text of your link.
+
+Dependencies
+This component has no dependencies on other components.
+Accessibility
+Use the title
attribute to provide additional text describing the link, if the link text itself is not descriptive enough.
+Notes
+The Link inherits the font family, size, and weight of its parent element. This is why we have placed it within .ms-font-m
wrapper in the sample above.
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/List/index.html b/dist/documentation/Components/List/index.html
new file mode 100644
index 00000000..b1d447d6
--- /dev/null
+++ b/dist/documentation/Components/List/index.html
@@ -0,0 +1,372 @@
+
+
+
+
+
+
+
+ List
+
+
+
+
+
+
+
+
+
+
+List
+Presents a number of related items, either as a vertical list or in a grid.
+Variants
+Default
+A standard vertical list of items.
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
+States
+This component has only the default state.
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+
+<ul class="ms-List ">
+
+
+ <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+ </li>
+
+
+
+ <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+ </li>
+
+
+
+ <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+ </li>
+
+
+
+ <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+ </li>
+
+
+
+ <li class="ms-ListItem is-unread is-selectable" tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+ </li>
+
+
+
+ <li class="ms-ListItem is-selectable" tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+ </li>
+
+
+
+ <li class="ms-ListItem is-selectable" tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+ </li>
+
+
+
+ <li class="ms-ListItem is-selectable" tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+ </li>
+
+</ul>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all ListItem components on the page:
+
+
+ <script type="text/javascript">
+ var ListElements = document.querySelectorAll(".ms-List");
+ for(var i = 0; i < ListElements.length; i++) {
+ new fabric['List'](ListElements[i]);
+ }
+</script>
+
+
+
+ Replace the content with whatever you'd like to display as a list. The samples use .ms-ListItem
components, but you can place any content within .ms-List
.
+
+Dependencies
+This component has no dependencies on other components, although it does often contain ListItem components.
+Accessibility
+You can use a ul
element if your content is unordered, or ol
if the order of the content is important.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/ListItem/index.html b/dist/documentation/Components/ListItem/index.html
new file mode 100644
index 00000000..9b07356c
--- /dev/null
+++ b/dist/documentation/Components/ListItem/index.html
@@ -0,0 +1,237 @@
+
+
+
+
+
+
+
+ ListItem
+
+
+
+
+
+
+
+
+
+
+List Item
+Suitable for presenting a summary of an item with associated actions. Most often used within a List component. It was designed to represent an email message on desktop computers and is not currently touch friendly.
+Variants
+Default
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+Image
+The same as the default variant, with a thumbnail image added.
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+Document
+Showcases a document by providing a thumbnail, title, and some metadata.
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+
+ 2:42p
+
+
+
+
+
+
+States
+Selectable
+Apply the is-selectable
class to make it possible to select the item.
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+Selected
+When applied alongside the is-selectable
class, is-selected
will mark it as selected.
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+Unseen
+Use is-unseen
to indicate that the item has not been seen.
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+Unread
+Use is-unread
to indicate that the item has not been read.
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<li class="ms-ListItem " tabindex="0">
+
+ <span class="ms-ListItem-primaryText">Alton Lafferty</span>
+ <span class="ms-ListItem-secondaryText">Meeting notes</span>
+ <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
+ <span class="ms-ListItem-metaText">2:42p</span>
+
+ <div class="ms-ListItem-selectionTarget"></div>
+ <div class="ms-ListItem-actions">
+
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
+ <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
+ </div>
+</li>
+
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all ListItem components on the page:
+
+
+ <script type="text/javascript">
+ var ListItemElements = document.querySelectorAll(".ms-ListItem");
+ for(var i = 0; i < ListItemElements.length; i++) {
+ new fabric['ListItem'](ListItemElements[i]);
+ }
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the content of .ms-ListItem-primaryText
) with your content.
+
+Dependencies
+This component has no dependencies on other components, although it is most often used within a List component.
+Accessibility
+More details will be added here.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/MessageBanner/index.html b/dist/documentation/Components/MessageBanner/index.html
new file mode 100644
index 00000000..607391f4
--- /dev/null
+++ b/dist/documentation/Components/MessageBanner/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+
+ MessageBanner
+
+
+
+
+
+
+
+
+
+
+Message Banner
+Presents a message to the user, with an optional call to action. The message is typically an error, update, or alert.
+Variants
+Default
+
+
+
+
+
+
+
+ You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
+
+
+
+
+
+
+
+ Get More Storage
+
+
+
+
+
+
+
+
Show the banner
+
+States
+This component has only the default state.
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+ <div class="docs-MessageBannerExample">
+
+
+ <div class="ms-MessageBanner">
+ <div class="ms-MessageBanner-content">
+ <div class="ms-MessageBanner-text">
+ <div class="ms-MessageBanner-clipper">
+ You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
+ </div>
+ </div>
+ <button class="ms-MessageBanner-expand">
+ <i class="ms-Icon ms-Icon--ChevronDown"></i>
+ </button>
+ <div class="ms-MessageBanner-action">
+
+ <button class="ms-Button
+ ms-Button--primary
+ ">
+ <span class="ms-Button-label">Get More Storage</span>
+ </button>
+ </div>
+ </div>
+ <button class="ms-MessageBanner-close">
+ <i class="ms-Icon ms-Icon--Clear"></i>
+ </button>
+ </div>
+ <button class="ms-Button docs-MessageBannerExample-button is-hidden">Show the banner</button>
+</div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate a MessageBanner component on the page:
+
+
+ <script type="text/javascript">
+ var MessageBannerExample = document.querySelector('.docs-MessageBannerExample');
+ var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner'));
+ var MessageBannerButton = MessageBannerExample.querySelector('.docs-MessageBannerExample-button');
+ var MessageBannerCloseButton = MessageBannerExample.querySelector('.ms-MessageBanner-close');
+
+ // When clicking the button, open the MessageBanner
+ MessageBannerButton.onclick = function() {
+ MessageBanner.showBanner();
+ this.classList.add("is-hidden");
+ };
+
+ // Hide "Show the Banner Button" when banner is active
+ MessageBannerCloseButton.addEventListener("click", function(){
+ setTimeout(function() {
+ MessageBannerButton.classList.remove("is-hidden");
+ }, 500);
+ });
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the text in .ms-MessageBanner-action
) with your content.
+
+Dependencies
+This component has a dependency on Button.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/MessageBar/index.html b/dist/documentation/Components/MessageBar/index.html
new file mode 100644
index 00000000..dcde3106
--- /dev/null
+++ b/dist/documentation/Components/MessageBar/index.html
@@ -0,0 +1,151 @@
+
+
+
+
+
+
+
+ MessageBar
+
+
+
+
+
+
+
+
+
+
+Message Bar
+Variants
+Default
+Lowest level of caution. Use when you want to present timely, concise information that accelerates a workflow, or to provide key information or actions that avoid a dead end in the experience.
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+
Hyperlink string
+
+
+
+
+Warning
+Use in exceptional situations where the use should be mindful of some sort of temporary condition. Notably, yellow is the most visible color to the human eye.
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+
Hyperlink string
+
+
+
+
+Severe Warning
+Use for a situation that is not harmful or destructive yet but could easily turn into one. (e.g. You're about to run out of storage space).
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+
Hyperlink string
+
+
+
+
+Error
+Use when a serious failure or error has occured and information may have been lost or some actions are impossible.
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+
Hyperlink string
+
+
+
+
+Blocked
+Use when the user is explicitly forbidden from a particular action not because of an error, but because of security restrictions or policy enforcements.
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+
Hyperlink string
+
+
+
+
+Success
+Use sparingly when there's an exceptional need to tell the use that something went right. The preferred way to show success is to show, not tell (e.g. by navigating to show the result of the user action and letting users continue working on it or
+ elsewhere).
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
+
Hyperlink string
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<div class="ms-MessageBar ">
+ <div class="ms-MessageBar-content">
+ <div class="ms-MessageBar-icon">
+ <i class="ms-Icon ms-Icon--Info"></i>
+ </div>
+ <div class="ms-MessageBar-text">
+ Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.<br>
+ <a href="" class="ms-Link">Hyperlink string</a>
+ </div>
+ </div>
+</div>
+
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the content of .ms-MessageBar-text
) with your content.
+
+Dependencies
+Link
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/OrgChart/index.html b/dist/documentation/Components/OrgChart/index.html
new file mode 100644
index 00000000..a61c7f30
--- /dev/null
+++ b/dist/documentation/Components/OrgChart/index.html
@@ -0,0 +1,352 @@
+
+
+
+
+
+
+
+ OrgChart
+
+
+
+
+
+
+
+
+
+
+Org Chart
+Displays multiple Persona components in groups with headers in order to show the hierarchy of an organization or team.
+Variants
+Default
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+ Copy the HTML from the samples above into your page. For example:
+
+
+
+
+<div class="ms-OrgChart ">
+ <div class="ms-OrgChart-group">
+
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+<div class="ms-Persona
+">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Russel Miller</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+</div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+<div class="ms-Persona
+">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Douglas Fielder</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+</div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Manager</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+<div class="ms-Persona
+">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Grant Steel</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+</div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Staff</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+<div class="ms-Persona
+">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Harvey Wallin</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+</div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+<div class="ms-Persona
+">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcus Lauer</div>
+ <div class="ms-Persona-secondaryText">Technical Support</div>
+ </div>
+</div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+<div class="ms-Persona
+">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcel Groce</div>
+ <div class="ms-Persona-secondaryText">Delivery</div>
+ </div>
+</div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+<div class="ms-Persona
+">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Jessica Fischer</div>
+ <div class="ms-Persona-secondaryText">Marketing</div>
+ </div>
+</div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+</div>
+
+
+
+ Replace the Persona components with your own.
+
+Dependencies
+This component has a dependency on the Persona component.
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Overlay/index.html b/dist/documentation/Components/Overlay/index.html
new file mode 100644
index 00000000..cf65bb5b
--- /dev/null
+++ b/dist/documentation/Components/Overlay/index.html
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+ Overlay
+
+
+
+
+
+
+
+
+
+
+Overlay
+Partially obscures the page to create a modal experience and focus the user's attention. Typically used with a Dialog or Panel.
+Variants
+Default
+
+
+
+
+
+Dark
+
+
+
+
+
Show the dark overlay
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example: <div class="ms-Overlay"></div>
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate an Overlay component on the page:
+
+
+ <script type="text/javascript">
+ var OverlayElement = document.querySelector('.ms-Overlay');
+ var Overlay = new fabric['Overlay'](OverlayElement);
+</script>
+
+
+
+ Replace the sample HTML content (such as the content of .ms-Button-label
) with your content.
+
+Dependencies
+This component has no dependencies.
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Panel/index.html b/dist/documentation/Components/Panel/index.html
new file mode 100644
index 00000000..37a3361a
--- /dev/null
+++ b/dist/documentation/Components/Panel/index.html
@@ -0,0 +1,249 @@
+
+
+
+
+
+
+
+ Panel
+
+
+
+
+
+
+
+
+
+
+Panel
+Presents content by sliding over the rest of the application, which is covered by a partially-transparent overlay. Best used for experiences that do not require explicit context for heavy-weight creation/edit/management tasks such as settings, multi-field
+ forms, and permissions. For containers used for complex tasks that requires context, use a separate Pane alongside the existing experience such as a List/Details layout.
+Variants
+Default
+
+
+
+ Open Panel
+
+
+
+
+
+
+
+
+ Content goes here
+
+
+
+
+Medium
+
+
+
+ Open Panel
+
+
+
+
+
+
+
+
+ Content goes here
+
+
+
+
+Large
+
+
+
+ Open Panel
+
+
+
+
+
+
+
+
+ Content goes here
+
+
+
+
+Large, fixed
+
+
+
+ Open Panel
+
+
+
+
+
+
+
+
+ Content goes here
+
+
+
+
+
+
+
+
+
+
+Left aligned
+You can add the ms-Panel--left
modifier to any panel to attach it to the left side of the screen.
+
+
+
+ Open Panel
+
+
+
+
+
+
+
+
+ Content goes here
+
+
+
+
+
+States
+
+
+
+ State
+ Applied to
+ Result
+
+
+
+
+ .is-open
+ .ms-Panel
+ The panel is closed by default. Apply this class to open it.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+ <div class="ms-PanelDefaultExample ms-PanelExample">
+
+ <button class="ms-Button
+
+ ">
+ <span class="ms-Button-label">Open Panel</span>
+ </button>
+ <div class="ms-Panel ">
+ <button class="ms-Panel-closeButton ms-PanelAction-close">
+ <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
+ </button>
+ <div class="ms-Panel-contentInner">
+ <p class="ms-Panel-headerText">Panel</p>
+ <div class="ms-Panel-content">
+ <span class="ms-font-m">Content goes here</span>
+ </div>
+ </div>
+ </div></div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Panel components on the page:
+
+
+ <script type="text/javascript">
+var PanelExamples = document.getElementsByClassName("ms-PanelExample");
+for (var i = 0; i < PanelExamples.length; i++) {
+ (function(){
+ var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
+ var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
+ PanelExampleButton.addEventListener("click", function(i) {
+ new fabric['Panel'](PanelExamplePanel);
+ });
+ }());
+}
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the content of .ms-Panel-content
) with your content.
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/PeoplePicker/PeoplePicker.Searching.png b/dist/documentation/Components/PeoplePicker/PeoplePicker.Searching.png
new file mode 100644
index 00000000..147416f7
Binary files /dev/null and b/dist/documentation/Components/PeoplePicker/PeoplePicker.Searching.png differ
diff --git a/dist/documentation/Components/PeoplePicker/index.html b/dist/documentation/Components/PeoplePicker/index.html
new file mode 100644
index 00000000..3baa44ea
--- /dev/null
+++ b/dist/documentation/Components/PeoplePicker/index.html
@@ -0,0 +1,513 @@
+
+
+
+
+
+
+
+ PeoplePicker
+
+
+
+
+
+
+
+
+
+
+People Picker
+A form input that allows for the choice of one or more people.
+Variants
+Default
+Uses the standard sized Persona component.
+
+
+
+
+
+
+
+ Contacts
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+ Search my groups
+
+
+
+
+
+Compact
+Use the extra small Persona component to fit more results.
+
+
+
+
+
+
+
+ Contacts
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+ Search my groups
+
+
+
+
+
+Face pile
+Presents the selected people in a list below the search field, rather than inline.
+
+
+
+
+
+
+
+ Contacts
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+ Search my groups
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<div class="ms-PeoplePicker
+">
+ <div class="ms-PeoplePicker-searchBox">
+
+
+ <div class="ms-TextField ms-TextField--textFieldUnderlined ">
+
+ <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option" >
+
+
+ </div>
+ </div>
+ <div class="ms-PeoplePicker-results
+ ">
+ <div class="ms-PeoplePicker-resultGroup">
+ <div class="ms-PeoplePicker-resultGroupTitle">
+ Contacts
+ </div>
+ <div class="ms-PeoplePicker-result " tabindex="1">
+
+
+ <div class="ms-Persona
+ ms-Persona--sm
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Russel Miller</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+ <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
+ </div>
+ <div class="ms-PeoplePicker-result " tabindex="1">
+
+
+ <div class="ms-Persona
+ ms-Persona--sm
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Douglas Fielder</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+ <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
+ </div>
+ <div class="ms-PeoplePicker-result " tabindex="1">
+
+
+ <div class="ms-Persona
+ ms-Persona--sm
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Grant Steel</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+ <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
+ </div>
+ <div class="ms-PeoplePicker-result " tabindex="1">
+
+
+ <div class="ms-Persona
+ ms-Persona--sm
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
+ </div>
+ <div class="ms-Persona-presence">
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Harvey Wallin</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+ <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
+ </div>
+ </div>
+ <button class="ms-PeoplePicker-searchMore">
+ <div class="ms-PeoplePicker-searchMoreIcon">
+ <i class="ms-Icon ms-Icon--Search"></i>
+ </div>
+ <div class="ms-PeoplePicker-searchMoreText">
+ Search my groups
+ </div>
+ </button>
+ </div>
+</div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all PeoplePicker components on the page:
+
+
+ <script type="text/javascript">
+ var PeoplePickerElements = document.querySelectorAll(".ms-PeoplePicker");
+ for(var i = 0; i < PeoplePickerElements.length; i++) {
+ new fabric['PeoplePicker'](PeoplePickerElements[i]);
+ }
+</script>
+
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content with your content.
+
+Dependencies
+This component uses Persona and PersonaCard to display people and Label for the Members List variant. It also uses a Spinner when searching for results.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Persona/Persona.Person.jpg b/dist/documentation/Components/Persona/Persona.Person.jpg
new file mode 100644
index 00000000..4d06e964
Binary files /dev/null and b/dist/documentation/Components/Persona/Persona.Person.jpg differ
diff --git a/dist/documentation/Components/Persona/Persona.Person2.png b/dist/documentation/Components/Persona/Persona.Person2.png
new file mode 100644
index 00000000..4ba5f7b0
Binary files /dev/null and b/dist/documentation/Components/Persona/Persona.Person2.png differ
diff --git a/dist/documentation/Components/Persona/index.html b/dist/documentation/Components/Persona/index.html
new file mode 100644
index 00000000..a733919a
--- /dev/null
+++ b/dist/documentation/Components/Persona/index.html
@@ -0,0 +1,976 @@
+
+
+
+
+
+
+
+ Persona
+
+
+
+
+
+
+
+
+
+
+Persona
+Represents a person, complete with a profile image and additional details. Where a profile image is not available, the user's initials can be shown instead.
+Variants
+Circle (default)
+Six sizes are available: tiny, extraSmall, small, default, large, and extraLarge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+Initials
+Don't have a profile image for the user? Provide the person's initials as an alternative.
+
+
+
+
+Presence indicators
+A persona can have one of seven presences: available, away, blocked, busy, do not disturb, and offline.
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+Token
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+FacePile
+
+
+
+
+
AL
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
Details
+
Personal: 555.206.2443
+
Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
Details
+
Personal: 555.206.2443
+
Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
Details
+
Personal: 555.206.2443
+
Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<div class="ms-Persona
+">
+ <div class="ms-Persona-imageArea">
+ <img class="ms-Persona-image" src="Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Alton Lafferty</div>
+ <div class="ms-Persona-secondaryText">Accountant</div>
+ </div>
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Persona components on the page:
+
+
+ <script type="text/javascript">
+ var PersonaElements = document.querySelectorAll(".ms-Persona");
+ for(var i = 0; i < PersonaElements.length; i++) {
+ new fabric['Persona'](PersonaElements[i]);
+ }
+</script>
+
+
+
+
+ Replace the sample HTML content (such as the name within .ms-Persona-primaryText
) with your content.
+
+Dependencies
+This component has no dependencies.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/PersonaCard/index.html b/dist/documentation/Components/PersonaCard/index.html
new file mode 100644
index 00000000..b0e3826f
--- /dev/null
+++ b/dist/documentation/Components/PersonaCard/index.html
@@ -0,0 +1,492 @@
+
+
+
+
+
+
+
+ PersonaCard
+
+
+
+
+
+
+
+
+
+
+Persona Card
+The visualization of details of an individual including Skype contact details, email, location information, and location within the hierarchy of an organization. Within Office 365, PersonaCards often appear when a user hovers, taps, or clicks on a Persona.
+Variants
+Default
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+
Details
+
Personal: 555.206.2443
+
Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+<div class="ms-PersonaCard ">
+ <div class="ms-PersonaCard-persona">
+
+
+ <div class="ms-Persona
+ ms-Persona--lg
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Alton Lafferty</div>
+ <div class="ms-Persona-secondaryText">Accountant</div>
+ <div class="ms-Persona-tertiaryText">In a meeting</div>
+ <div class="ms-Persona-optionalText">Available at 4:00pm</div>
+ </div>
+ </div>
+ </div>
+ <ul class="ms-PersonaCard-actions">
+ <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
+ <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
+ <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
+ <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
+ <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
+ <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
+ </ul>
+ <div class="ms-PersonaCard-actionDetailBox">
+ <div data-detail-id="mail" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
+ </div>
+ <div data-detail-id="chat" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
+ </div>
+ <div data-detail-id="phone" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailExpander"></div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
+ </div>
+ <div data-detail-id="video" class="ms-PersonaCard-details">
+ <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
+ </div>
+
+ <div data-detail-id="org" class="ms-PersonaCard-details">
+
+
+ <div class="ms-OrgChart ">
+ <div class="ms-OrgChart-group">
+
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Russel Miller</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Douglas Fielder</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Manager</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Grant Steel</div>
+ <div class="ms-Persona-secondaryText">Sales</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="ms-OrgChart-group">
+ <div class="ms-OrgChart-groupTitle">Staff</div>
+ <ul class="ms-OrgChart-list">
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Harvey Wallin</div>
+ <div class="ms-Persona-secondaryText">Public Relations</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcus Lauer</div>
+ <div class="ms-Persona-secondaryText">Technical Support</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Marcel Groce</div>
+ <div class="ms-Persona-secondaryText">Delivery</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ <li class="ms-OrgChart-listItem">
+ <button class="ms-OrgChart-listItemBtn" tabindex="1">
+
+
+ <div class="ms-Persona
+ ">
+ <div class="ms-Persona-imageArea">
+ <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
+ <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
+ </div>
+ <div class="ms-Persona-presence">
+ <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
+ </div>
+ <div class="ms-Persona-details">
+ <div class="ms-Persona-primaryText">Jessica Fischer</div>
+ <div class="ms-Persona-secondaryText">Marketing</div>
+ </div>
+ </div>
+
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div> </div>
+ </div>
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all PersonaCard components on the page:
+
+
+ <script type="text/javascript">
+ var PersonaCardElement = document.querySelectorAll(".ms-PersonaCard");
+ for(var i = 0; i < PersonaCardElement.length; i++) {
+ new fabric.PersonaCard(PersonaCardElement[i]);
+ }
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content with your content.
+
+Dependencies
+This component uses a Persona component to present the person, an OrgChart to present the persona's position within the organization, and a Link for navigation.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Pivot/index.html b/dist/documentation/Components/Pivot/index.html
new file mode 100644
index 00000000..b6ce707f
--- /dev/null
+++ b/dist/documentation/Components/Pivot/index.html
@@ -0,0 +1,207 @@
+
+
+
+
+
+
+
+ Pivot
+
+
+
+
+
+
+
+
+
+
+Pivot
+A layout component that allows a user to switch between different sets of content or filters on the content currently visible. This is in contrast to a purely navigational UI element such as NavBar or a commanding element such as CommandBar. An example
+ would be Read vs. Unread items in the Outlook Web App.
+Variants
+Default
+
+
+
+
+
+ My files
+
+
+ Recent
+
+
+ Shared with me
+
+
+
+
+
+
+ This is the my files tab.
+
+
+ This is the recent tab.
+
+
+ This is the shared with me tab.
+
+
+
+Large
+
+
+
+
+
+ My files
+
+
+ Recent
+
+
+ Shared with me
+
+
+
+
+
+
+ This is the my files tab.
+
+
+ This is the recent tab.
+
+
+ This is the shared with me tab.
+
+
+
+Tabs
+
+
+
+
+
+ My files
+
+
+ Recent
+
+
+ Shared with me
+
+
+
+
+
+
+ This is the my files tab.
+
+
+ This is the recent tab.
+
+
+ This is the shared with me tab.
+
+
+
+Large tabs
+
+
+
+
+
+ My files
+
+
+ Recent
+
+
+ Shared with me
+
+
+
+
+
+
+ This is the my files tab.
+
+
+ This is the recent tab.
+
+
+ This is the shared with me tab.
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<div class="ms-Pivot ">
+ <ul class="ms-Pivot-links">
+ <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
+ My files
+ </li>
+ <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
+ Recent
+ </li>
+ <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
+ Shared with me
+ </li>
+ <li class="ms-Pivot-link" tabindex="1">
+ <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
+ </li>
+ </ul>
+ <div class="ms-Pivot-content" data-content="files">
+ This is the my files tab.
+ </div>
+ <div class="ms-Pivot-content" data-content="recent">
+ This is the recent tab.
+ </div>
+ <div class="ms-Pivot-content" data-content="shared">
+ This is the shared with me tab.
+ </div>
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Pivot components on the page:
+
+
+ <script type="text/javascript">
+ var PivotElements = document.querySelectorAll(".ms-Pivot");
+ for(var i = 0; i < PivotElements.length; i++) {
+ new fabric['Pivot'](PivotElements[i]);
+ }
+</script>
+
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the name within .ms-Pivot-link
) with your content.
+
+Dependencies
+This component has no dependency on other components.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/ProgressIndicator/index.html b/dist/documentation/Components/ProgressIndicator/index.html
new file mode 100644
index 00000000..4baa9b94
--- /dev/null
+++ b/dist/documentation/Components/ProgressIndicator/index.html
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
+ ProgressIndicator
+
+
+
+
+
+
+
+
+
+
+Progress Indicator
+Progress Indicators are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, use a Spinner instead. Progress Indicators can appear in a new panel, a flyout, under the UI initiating
+ the operation, or even replacing the initiating UI, as long as the UI can return if the operation is canceled or is stopped.
+Progress Indicators feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears below. The description should tell someone exactly what the operation
+ is doing. Examples of formatting include:
+[Object] is being [operation name] , or
+ [Object] is being [operation name] to [destination name] or
+ [Object] is being [operation name] from [source name] to [destination name]
+Status text is generally in units elapsed and total units. If the operation can be canceled, an “X” glyph is used and should be placed in the upper right, aligned with the baseline of the operation name. When an error occurs, replace the status text with
+ the error description using ms-fontColor-redDark.
+Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are
+ rarely accurate enough to be trustworthy. Also combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the operation description to reflect the change if necessary. Bars moving backwards reduce confidence
+ in the service.
+Best Practices
+
+
+
+ Do
+ Don't
+
+
+
+
+ Use a Progress indicator when the total units to completion is known
+ Use a Progress indicator when the total units to completion is indeterminate
+
+
+ Display operation description
+ Use only a single word description
+
+
+ Show text above and/or below the bar
+ Show text to the right or left of the bar
+
+
+ Combine steps of a single operation into one bar
+ Cause progress to “rewind” to show new steps
+
+
+
+Variants
+Default
+
+
+
+
Example.jpg
+
+
Example.jpg
+
+
+States
+Active Error
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+
+<div class="ms-ProgressIndicator">
+ <div class="ms-ProgressIndicator-itemName"></div>
+ <div class="ms-ProgressIndicator-itemProgress">
+ <div class="ms-ProgressIndicator-progressTrack"></div>
+ <div class="ms-ProgressIndicator-progressBar"></div>
+ </div>
+ <div class="ms-ProgressIndicator-itemDescription"></div>
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all ProgressIndicators on the page:
+
+
+ <script type="text/javascript">
+ var ProgressIndicatorElements = document.querySelectorAll(".ms-ProgressIndicator");
+ for(var i = 0; i < ProgressIndicatorElements.length; i++) {
+ let ProgressIndicator = new fabric['ProgressIndicator'](ProgressIndicatorElements[i]);
+
+ setTimeout(
+ function() {
+ ProgressIndicator.setProgressPercent(1);
+ },
+ 2000);
+ }
+</script>
+
+
+
+
+ Verify that the component is working the same as in the sample above.
+
+Dependencies
+This component has no dependency on other components.
+Accessibility
+Focus styles are included for all of the actions included within a Progress Indicator.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/SearchBox/index.html b/dist/documentation/Components/SearchBox/index.html
new file mode 100644
index 00000000..d49449cc
--- /dev/null
+++ b/dist/documentation/Components/SearchBox/index.html
@@ -0,0 +1,140 @@
+
+
+
+
+
+
+
+ SearchBox
+
+
+
+
+
+
+
+
+
+
+Search Box
+A special form field that allows for the input of search text.
+Variants
+Default
+
+
+
+
+
+
+ Search
+
+
+
+
+
+
+
+
+---->
+Collapsed
+
+
+
+
+
+
+ Search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+---->
+Command bar
+
+
+
+
+
+
+ Search
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<div class="ms-SearchBox ">
+ <input class="ms-SearchBox-field" type="text" value="">
+ <label class="ms-SearchBox-label">
+ <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
+ <span class="ms-SearchBox-text">Search</span>
+ </label>
+
+<div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel ">
+ <button class="ms-CommandButton-button" >
+ <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Clear"></i></span><span class="ms-CommandButton-label"></span> </button>
+</div>
+
+
+</div>
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all SearchBox components on the page:
+
+
+ <script type="text/javascript">
+ var SearchBoxElements = document.querySelectorAll(".ms-SearchBox");
+ for(var i = 0; i < SearchBoxElements.length; i++) {
+ new fabric['SearchBox'](SearchBoxElements[i]);
+ }
+</script>
+
+
+
+
+ Verify that the component is working the same as in the sample above.
+ Replace the sample HTML content (such as the name within .ms-SearchBox-text
) with your content.
+
+Dependencies
+This component has a dependency on the Label component.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Spinner/index.html b/dist/documentation/Components/Spinner/index.html
new file mode 100644
index 00000000..11548ff4
--- /dev/null
+++ b/dist/documentation/Components/Spinner/index.html
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+Spinner
+Displays the progress of an operation when the percentage complete can not be determined. Do you know how much of the operation is complete? Use a ProgressIndicator instead.
+Variants
+Default
+
+
+
+
+
+Large
+
+
+Default with label
+
+
+Large with label
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+
+<div class="ms-Spinner ">
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Spinner components on the page:
+
+
+ <script>
+ if (typeof fabric !== "undefined") {
+ if ('Spinner' in fabric) {
+ var elements = document.querySelectorAll('.ms-Spinner');
+ var i = elements.length;
+ var component;
+ while(i--) {
+ component = new fabric['Spinner'](elements[i]);
+ }
+ }
+ }
+</script>
+
+
+
+ Verify that the component is working the same as in the sample above.
+
+Dependencies
+This component has no dependency on other components.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Table/index.html b/dist/documentation/Components/Table/index.html
new file mode 100644
index 00000000..44c25501
--- /dev/null
+++ b/dist/documentation/Components/Table/index.html
@@ -0,0 +1,303 @@
+
+
+
+
+
+
+
+ Table
+
+
+
+
+
+
+
+
+
+
+Table
+Presents tabular data with multiple rows and columns. The table's width is flexible, but it does not have any advanced responsive behaviors.
+Variants
+Default
+The column widths are determined by the content.
+
+
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+
+Fixed
+The columns are split evenly, regardless of their content.
+
+
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+
+Selectable
+Rows can be selected.
+
+
+
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+ Location
+ Modified
+ Type
+ File Name
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from the sample above into your page. For example:
+
+
+
+
+<table class="ms-Table ">
+ <thead>
+ <tr>
+ <th>Location</th>
+ <th>Modified</th>
+ <th>Type</th>
+ <th>File Name</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Location</td>
+ <td>Modified</td>
+ <td>Type</td>
+ <td>File Name</td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>Modified</td>
+ <td>Type</td>
+ <td>File Name</td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>Modified</td>
+ <td>Type</td>
+ <td>File Name</td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>Modified</td>
+ <td>Type</td>
+ <td>File Name</td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>Modified</td>
+ <td>Type</td>
+ <td>File Name</td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>Modified</td>
+ <td>Type</td>
+ <td>File Name</td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>Modified</td>
+ <td>Type</td>
+ <td>File Name</td>
+ </tr>
+ </tbody>
+</table>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Table components on the page:
+
+
+ <script type="text/javascript">
+ var TableElements = document.querySelectorAll(".ms-Table");
+ for(var i = 0; i < TableElements.length; i++) {
+ new fabric['Table'](TableElements[i]);
+ }
+</script>
+
+
+
+
+ Replace the content with your own data. You can add more rows or columns.
+
+Dependencies
+This component has no dependency on other components.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/TextField/index.html b/dist/documentation/Components/TextField/index.html
new file mode 100644
index 00000000..16f1fb23
--- /dev/null
+++ b/dist/documentation/Components/TextField/index.html
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+
+ TextField
+
+
+
+
+
+
+
+
+
+
+Text Field
+Allows for the input of text. Can be a single line or multiple lines. Typically used to accept user input within a form.
+Variants
+Default
+
+
+
+ Name
+
+
+
+
+
+Multiline
+
+
+
+ Name
+
+
+
+
+
+Placeholder text
+
+
+
+
+ Given name
+
+
+
+
+
+
+
+Underlined
+
+
+
+ Name
+
+
+
+
+
+States
+Disabled
+
+
+
+ Name
+
+
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<div class="ms-TextField ">
+ <label class="ms-Label">Name</label>
+ <input class="ms-TextField-field" type="text" value="" placeholder="" >
+
+
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all TextField components on the page:
+
+
+ <script type="text/javascript">
+ var TextFieldElements = document.querySelectorAll(".ms-TextField");
+ for(var i = 0; i < TextFieldElements.length; i++) {
+ new fabric['TextField'](TextFieldElements[i]);
+ }
+</script>
+
+
+
+ Update the .ms-Label
to contain your label text.
+
+Dependencies
+This component has a dependency on the Label component.
+
+
\ No newline at end of file
diff --git a/dist/documentation/Components/Toggle/index.html b/dist/documentation/Components/Toggle/index.html
new file mode 100644
index 00000000..ae7b6e42
--- /dev/null
+++ b/dist/documentation/Components/Toggle/index.html
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+Toggle
+Allows for turning on or off a setting. This is best suited for simple, singular configuration (e.g. application level settings) whereas the ChoiceField is better suited when there is a longer list of individual choices or in a form (e.g. signing up for
+ different newsletters during registration for an event).
+Variants
+Label above (default)
+
+
+
+ Let apps use my location
+
+
+ Off
+ On
+
+
+
+Label on left
+
+
+
+ Let apps use my location
+
+
+ Off
+ On
+
+
+
+Disabled
+
+
+
+ Let apps use my location
+
+
+ Off
+ On
+
+
+
+Using this component
+
+ Confirm that you have references to Fabric's CSS and JavaScript on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="fabric.min.js"></script>
+ </head>
+
+ Copy the HTML from one of the samples above into your page. For example:
+
+
+
+
+<div class="ms-Toggle ">
+ <span class="ms-Toggle-description">Let apps use my location</span>
+ <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
+ <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0" >
+ <span class="ms-Label ms-Label--off">Off</span>
+ <span class="ms-Label ms-Label--on">On</span>
+ </label>
+</div>
+
+
+
+
+ Add the following <script>
tag to your page, below the references to Fabric's JS, to instantiate all Toggle components on the page:
+
+
+ <script type="text/javascript">
+ var ToggleElements = document.querySelectorAll(".ms-Toggle");
+ for(var i = 0; i < ToggleElements.length; i++) {
+ new fabric['Toggle'](ToggleElements[i]);
+ }
+</script>
+
+
+
+ Update the .ms-Label
to contain your label text.
+
+Dependencies
+This component has a dependency on the Label component.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Getting Started/BUILDING.html b/dist/documentation/Getting Started/BUILDING.html
new file mode 100644
index 00000000..326c7ba6
--- /dev/null
+++ b/dist/documentation/Getting Started/BUILDING.html
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+ Getting Started Page
+
+
+
+
+
+
+
+
+Building Fabric, gulp tasks, bundling, and the starter template
+Office UI Fabric JS uses gulp to compile its styling, build and serve demos, and generate or watch other parts of the framework for changes. Use it to customize Fabric JS for your project, or to test changes you make to specific aspects of the components.
+It's also valuable for seeing the locally hosted docs site .
+Contents
+
+Building Fabric
+Before you get started, make sure you have node.js , gulp , and git installed. To build Fabric:
+
+Clone the repo.
+Navigate to the folder that contains the gulpfile.js file (Fabric JS's root).
+npm install
+gulp
+
+The built files will be in the /dist/
folder.
+Gulp tasks
+You can test and work with Fabric JS locally using the tasks below.
+gulp
+Builds everything incrementally. This will run slowly the first time and very quickly on subsequent runs. This task will build all parts of Fabric JS and move all changed files into /dist/
. Every time you make changes, re-run this task.
+gulp watch and the local docs site
+Builds and watches everything. After running this once, your builds will be a lot faster. Now if you make a change anything anywhere in Fabric JS, only that area/section/file will get built/changed/moved.
+Once Fabric JS is built, you can view the localhost docs site by pointing your favorite browser at http://localhost:2020 . This docs site allows you to view a list of the components, customize them (while watch
runs), and see their responsive behavior.
+gulp watch-debug
+This task is similar to gulp watch
except you can now get a readout of what files are in the pipe. This will be helpful to make sure that the build is working properly.
+gulp watch-sass
+Builds and watches everything but builds only Sass versions of our library files.
+gulp watch-sass-debug
+Builds and watches everything but uses the Sass versions of the files and gives a readout of files in the pipe.
+gulp Bundles
+Builds all bundles specified in gulp/modules/Config.js
. View more details in the Bundling
+Starter template
+The following starter template represents the minimum recommended HTML structure for an app or add-in that uses Fabric. Copy the code into your project to start working with a basic Fabric document.
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>Application Name</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <!-- Optionally include jQuery to use Fabric's Component jQuery plugins -->
+ <script type="text/javascript" src="js/jquery.js"></script>
+
+ <!-- Fabric core -->
+ <link rel="stylesheet" href="css/fabric.min.css">
+ <link rel="stylesheet" href="css/fabric.components.min.css">
+
+ <!-- Application-specific CSS -->
+ <link rel="stylesheet" href="/css/app.css">
+ </head>
+ <body>
+ <!-- Application content goes here -->
+ <h1 class="ms-font-su">Why, hello, world.</h1>
+
+ <!-- Optionally include Fabric's Component jQuery plugins -->
+ <script type="text/javascript" src="js/jquery.fabric.min.js"></script>
+ </body>
+</html>
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Getting Started/BUNDLING.html b/dist/documentation/Getting Started/BUNDLING.html
new file mode 100644
index 00000000..0934baf4
--- /dev/null
+++ b/dist/documentation/Getting Started/BUNDLING.html
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+ Getting Started Page
+
+
+
+
+
+
+
+
+Custom Bundling
+What are bundles and why are they useful?
+"Bundles" are simply preconfigured CSS files that are made up of only the pieces of Fabric you specify. This allows you to tailor Fabric to the needs of your app and reduce the impact of including all of Fabric or Fabric's components. The end result is similar to the output of something like src/sass/Fabric.Components.scss
+For example, if your web app or add-in uses only the Button and Dropdown components, you can configure a bundle that includes only the styles for those elements, and nothing more. However, if a component depends on other components to render properly, those would also be included in the bundle. For example, the HTML for PersonaCard depends on the Persona, OrgChart, and Link components, so a bundle including the PersonaCard would also include the styles for those components.
+Usage
+Bundling is a build process that depends on Fabric's gulp build tools to work, so first, make sure you've followed the instructions for Building Fabric to set up a local clone of Fabric that is ready for compiling.
+Then, configure your bundle in gulp/modules/Config.js
in the bundlesConfig
property. A bundle is simply a JavaScript object with a name, description, and list of file names to include or exclude from the final output.
+Exclude vs include
+excludes
+If you list your files in "excludes", the bundle will be comprised of each .scss file in src/sass
and src/components
except for the files specified. For now, component dependencies are not included when in "exclude" mode. Partial .scss files, whose filenames begin with '_' (minus the quotes), are always excluded from bundles, since they produce no output.
+Here's an example "excludes" bundle that excludes the Language Overrides styles:
+"bundles": [
+ {
+ "name": "excludes-bundle", // Becomes excludes-bundle.css/.min.css
+ "description": "A custom bundle including a handful of modules.",
+ "excludes": [
+ "Button"
+ ]
+ }
+]
+
+This will produce the following:
+//
+// Office UI Fabric
+// --------------------------------------------------
+// SCSS template for building a bundle of Fabric and Fabric Components CSS.
+
+@import '../../../node_modules/dist/sass/_Fabric.Common.scss';
+
+@import '../../../src/components/Breadcrumb/Breadcrumb.scss';
+@import '../../../src/components/Callout/Callout.scss';
+@import '../../../src/components/CheckBox/CheckBox.scss';
+@import '../../../src/components/CommandBar/CommandBar.scss';
+@import '../../../src/components/ContextualMenu/ContextualMenu.scss';
+@import '../../../src/components/DatePicker/DatePicker.scss';
+@import '../../../src/components/Dialog/Dialog.scss';
+@import '../../../src/components/Dropdown/Dropdown.scss';
+@import '../../../src/components/Facepile/Facepile.scss';
+@import '../../../src/components/Label/Label.scss';
+@import '../../../src/components/Link/Link.scss';
+@import '../../../src/components/List/List.scss';
+@import '../../../src/components/ListItem/ListItem.scss';
+@import '../../../src/components/MessageBanner/MessageBanner.scss';
+@import '../../../src/components/NavBar/NavBar.scss';
+@import '../../../src/components/OrgChart/OrgChart.scss';
+@import '../../../src/components/Overlay/Overlay.scss';
+@import '../../../src/components/Panel/Panel.scss';
+@import '../../../src/components/PeoplePicker/PeoplePicker.scss';
+@import '../../../src/components/Persona/Persona.scss';
+@import '../../../src/components/PersonaCard/PersonaCard.scss';
+@import '../../../src/components/Pivot/Pivot.scss';
+@import '../../../src/components/ProgressIndicator/ProgressIndicator.scss';
+@import '../../../src/components/SearchBox/SearchBox.scss';
+@import '../../../src/components/Spinner/Spinner.scss';
+@import '../../../src/components/Table/Table.scss';
+@import '../../../src/components/TextField/TextField.scss';
+@import '../../../src/components/Toggle/Toggle.scss';
+
+includes
+If instead you use "includes", the bundle will include only the files specified. If the file is a component that has dependencies, like mentioned above, those will also be included. If you aren't sure what a component's dependencies are, look for the "dependencies" property in that component's JSON file in src/{ComponentName}/{ComponentName}.json
. Note that the build looks for dependencies two children deep, or in other words, dependencies of dependencies. Also, as noted in exludes
above, partial .scss files beginning with '_' will not be included in bundles, even if they are explicitly listed.
+Here's an example "include" bundle that includes only the Button and PersonaCard components:
+"bundles": [
+ {
+ "name": "includes-bundle", // Becomes includes-bundle.css/.min.css
+ "description": "A custom bundle including a handful of modules.",
+ "includes": [
+ "Button",
+ "PersonaCard" // Will also include Link, OrgChart, and Persona components as dependencies
+ ]
+ }
+]
+
+This will produce the following:
+//
+// Office UI Fabric
+// --------------------------------------------------
+// SCSS template for building a bundle of Fabric and Fabric Components CSS.
+
+@import '../../../node_modules/dist/sass/_Fabric.Common.scss';
+
+@import '../../../src/components/Button/Button.scss';
+@import '../../../src/components/Link/Link.scss';
+@import '../../../src/components/OrgChart/OrgChart.scss';
+@import '../../../src/components/Persona/Persona.scss';
+@import '../../../src/components/PersonaCard/PersonaCard.scss';
+
+Neither excludes nor includes
+If neither "excludes" nor "includes" are specified, the bundle will include all of Fabric's Components CSS.
+gulp Bundles
+Then, open a Command Prompt or Terminal window and navigate to the root of your cloned Fabric folder, then run gulp Bundles
. Each bundle object will build into a full and minified CSS file in dist/bundles/{name}
. To see the .scss file that makes up the bundle, check dist/bundles/{name}.scss
.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Getting Started/COMPONENTSLIST.html b/dist/documentation/Getting Started/COMPONENTSLIST.html
new file mode 100644
index 00000000..c0117e2f
--- /dev/null
+++ b/dist/documentation/Getting Started/COMPONENTSLIST.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+ Getting Started Page
+
+
+
+
+
+
+
+
+Components included in Fabric JS
+Fabric JS contains a variety of components that are a part of the Office / Office 365 design language. These components are highly focused on the styling (CSS) rather than the functionality (JavaScript), so you can feel free to reimplemnet the component in the framework of your choice. If you're not seeing a component here that you'd like, first check out the Fabric JS Requests Trello board and upvote it there (if it exists), or file an issue on Fabric JS's issue tracker to kick off a new request.
+The Office UI Fabric React project contains more components with greater functionality, so we often recommend checking out this project as well.
+Components
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Getting Started/CONTRIBUTING.html b/dist/documentation/Getting Started/CONTRIBUTING.html
new file mode 100644
index 00000000..6703f966
--- /dev/null
+++ b/dist/documentation/Getting Started/CONTRIBUTING.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+ Getting Started Page
+
+
+
+
+
+
+
+
+Contributing
+Office UI Fabric JS is an evolving snapshot of the Office 365 Design Language's components, provided by the OneDrive and SharePoint Design Studio.
+Currently, the Fabric team is focusing on other control sets, but we are still open to contributions that help improve the stability or usability of the components.
+This project has a few key tenets that are worth noting:
+
+No use of jQuery, please! (only the DatePicker uses jQuery)
+TypeScript is used for the components' included functionality
+
+Pull requests
+We gladly welcome PRs regarding…
+
+Bug fixes (of course!)
+Variants on components
+Documentation updates
+Things we haven't thought of yet :-)
+
+When creating a pull request, please describe in detail the problem you are solving and reference an open issue if possible. Screenshots or a demonstration on CodePen are also appreciated.
+Feature requests
+Please be sure to open an issue before starting a hefty PR so we can let you know if we're likely to consider your request--and to make sure we aren't already planning on doing the work.
+Contribution license agreement
+For pull requests affecting fewer than 15 lines of code, you will need to sign a Contribution License Agreement (CLA) before your contribution can be incorporated. To complete the CLA, you will need to submit the request via the form and then electronically sign the CLA when you receive the email containing the link to the document.
+This needs to only be done once for any Microsoft open source project.
+Issue tracker labels
+We track community issues via GitHub's issue tracker . To help us keep track of the different areas, please use the following labels:
+
+accessibility
- Issues or PRs that pertain to keyboard support, high contrast mode, screen reader support, etc.
+bug
- Issues or PRs that address unexpected behavior or broken components.
+build-system
- Issues and PRs related to the build process.
+documentation
- Issues and PRs that pertain to the documentation included with the repository.
+enhancement
- Issues or PRs that address potential improvements to components.
+needs-design
- Issues or PRs that need Design guidance.
+needs-discussion
- Issues or PRs that need discussion among the Fabric team.
+question
- Issues that don't necessarily require code and usually consist of clarifications.
+waiting-for-author
- Issues or PRs that are awaiting a repsonse from the original author.
+waiting-for-details
- Issues or PRs that need more details before they can be acted upon.
+waiting-to-merge
- PRs that are close to being merged in but are stalled.
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Getting Started/PACKAGES.html b/dist/documentation/Getting Started/PACKAGES.html
new file mode 100644
index 00000000..3e44bbd1
--- /dev/null
+++ b/dist/documentation/Getting Started/PACKAGES.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+ Getting Started Page
+
+
+
+
+
+
+
+
+Package managers
+Fabric JS is also available from a variety of package managers, including Bower , npm , and the NuGet Package Manager . You can quickly add Fabric JS as a package and stay up to date with the latest version.
+For information on accessing the previous versions of Fabric that included the components via package managers, check out the 2.6.1 get started docs .
+Install with Bower
+To install Fabric using Bower, run the following command:
+$ bower install office-ui-fabric-js
+
Install with NPM
+To install Fabric Core's NPM package , run the following command:
+$ npm install office-ui-fabric-js
+
Install with NuGet Package Manager
+To install Fabric Core's NuGet package , run the following command in the package manager console :
+PM> Install-Package OfficeUIFabricJS
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Getting Started/RESOURCES.html b/dist/documentation/Getting Started/RESOURCES.html
new file mode 100644
index 00000000..fbf0d94f
--- /dev/null
+++ b/dist/documentation/Getting Started/RESOURCES.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+ Getting Started Page
+
+
+
+
+
+
+
+
+Resources
+Samples using Fabric
+Office 365 API - Groups Explorer
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Getting Started/ROADMAP.html b/dist/documentation/Getting Started/ROADMAP.html
new file mode 100644
index 00000000..47b6eabf
--- /dev/null
+++ b/dist/documentation/Getting Started/ROADMAP.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+ Getting Started Page
+
+
+
+
+
+
+
+
+Fabric Roadmap
+Our roadmap used to be contained in a single markdown file, but has since been transferred to a nifty Trello board where you can view requests, add comments, or even vote so we know what folks need.
+To view the Trello board (that includes old requests that used to be in this file) please see the Office UI Fabric JS Requests board . If you'd like to make a new request, please file an issue in the Fabric JS's issue tracker so we can add it to the Trello board.
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Samples/Form/css/Form.css b/dist/documentation/Samples/Form/css/Form.css
new file mode 100644
index 00000000..cb0af37e
--- /dev/null
+++ b/dist/documentation/Samples/Form/css/Form.css
@@ -0,0 +1,6314 @@
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+.ms-Breadcrumb {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ margin: 23px 0 1px;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 12px;
+ color: #666666;
+ vertical-align: top;
+ margin: 11px 7px;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ display: inline-block;
+ color: #0078d7;
+ padding: 8px;
+ cursor: pointer;
+ vertical-align: top;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+ margin-right: -2px;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu::before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: #ffffff;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: 0;
+ box-shadow: none;
+ position: relative;
+ width: 190px;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open {
+ margin-bottom: 0;
+}
+
+.ms-Breadcrumb-itemLink,
+.ms-Breadcrumb-overflowButton {
+ text-decoration: none;
+ outline: transparent;
+}
+
+.ms-Breadcrumb-itemLink:hover,
+.ms-Breadcrumb-overflowButton:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-itemLink:focus,
+.ms-Breadcrumb-overflowButton:focus {
+ outline: #767676 solid 1px;
+ color: #000000;
+}
+
+.ms-Breadcrumb-itemLink:active,
+.ms-Breadcrumb-overflowButton:active {
+ outline: transparent;
+ background-color: #c8c8c8;
+}
+
+.ms-Breadcrumb-itemLink {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ vertical-align: top;
+}
+
+@media screen and (max-width: 639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 10px;
+ margin: 8px 5px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ padding: 5px 4px;
+ }
+}
+
+@media screen and (max-width: 479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin: 5px 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding: 2px 4px;
+ }
+}
+
+.ms-Button {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button.is-hidden {
+ display: none;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Button:hover {
+ color: #1aebff;
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Button:hover {
+ color: #37006e;
+ border-color: #37006e;
+ }
+}
+
+.ms-Button:focus {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button:active .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button:disabled,
+.ms-Button.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ cursor: default;
+}
+
+.ms-Button:disabled .ms-Button-label,
+.ms-Button.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button:disabled:hover,
+.ms-Button:disabled:focus,
+.ms-Button.is-disabled:hover,
+.ms-Button.is-disabled:focus {
+ outline: 0;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-weight: 600;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: transparent;
+ border: 0;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ margin-right: 4px;
+ position: relative;
+ top: 1px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ font-size: 12px;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-size: 21px;
+ font-weight: 100;
+ position: relative;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ border: 1px solid #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ border: 1px solid #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ border: 1px solid #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ display: block;
+ height: auto;
+ max-width: 280px;
+ min-height: 72px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-weight: 600;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-weight: 400;
+ font-size: 12px;
+ position: relative;
+ text-align: left;
+ top: 3px;
+}
+
+.ms-Button.ms-Button--compound:hover .ms-Button-description {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--compound:focus {
+ border-color: #0078d7;
+ background-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--compound:focus .ms-Button-label {
+ color: #333333;
+}
+
+.ms-Button.ms-Button--compound:focus .ms-Button-description {
+ color: #666666;
+}
+
+.ms-Button.ms-Button--compound:active {
+ background-color: #0078d7;
+}
+
+.ms-Button.ms-Button--compound:active .ms-Button-description,
+.ms-Button.ms-Button--compound:active .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--compound:disabled .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled .ms-Button-description {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound:disabled:focus,
+.ms-Button.ms-Button--compound:disabled:active,
+.ms-Button.ms-Button--compound.is-disabled:focus,
+.ms-Button.ms-Button--compound.is-disabled:active {
+ border-color: #f4f4f4;
+ background-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,
+.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description {
+ color: #a6a6a6;
+}
+
+.ms-Callout {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ width: 288px;
+}
+
+.ms-Callout.is-hidden {
+ display: none;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding-top: 24px;
+ padding-bottom: 12px;
+ padding-left: 28px;
+ padding-right: 28px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-weight: 300;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-weight: 300;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: #666666;
+ z-index: 110;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+}
+
+.ms-Callout-inner {
+ height: 100%;
+ padding-top: 0;
+ padding-bottom: 12px;
+ padding-left: 28px;
+ padding-right: 28px;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline {
+ height: 27px;
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button {
+ height: 27px;
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label {
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon {
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button,
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button {
+ color: #0078d7;
+}
+
+.ms-Callout-actions .ms-Callout-button {
+ margin-right: 12px;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-weight: 100;
+ font-size: 28px;
+ color: #ffffff;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-inner {
+ padding-top: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-subText {
+ font-size: 14px;
+}
+
+.ms-Callout.ms-Callout--actionText .ms-Callout-actions {
+ border-top: 1px solid #eaeaea;
+ padding-top: 12px;
+}
+
+.ms-Callout.ms-Callout--actionText .ms-Callout-inner {
+ padding-bottom: 12px;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-header {
+ padding-bottom: 0;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-title {
+ font-size: 14px;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-actions {
+ margin-top: 12px;
+ margin-bottom: -4px;
+}
+
+.ms-CheckBox {
+ box-sizing: border-box;
+ color: #333333;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-CheckBox .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.ms-CheckBox-input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ms-CheckBox-field::before {
+ content: '';
+ display: inline-block;
+ border: 2px solid #a6a6a6;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ font-weight: normal;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: background, border, border-color;
+ transition-duration: 200ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+.ms-CheckBox-field::after {
+ content: '\E73E';
+ font-family: 'FabricMDL2Icons';
+ display: none;
+ position: absolute;
+ font-weight: 900;
+ background-color: transparent;
+ font-size: 13px;
+ top: 0;
+ color: #ffffff;
+ line-height: 20px;
+ width: 20px;
+ text-align: center;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field::after {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field::after {
+ color: #ffffff;
+ }
+}
+
+.ms-CheckBox-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+}
+
+.ms-CheckBox-field:hover::before,
+.ms-CheckBox-field:focus::before {
+ border-color: #767676;
+}
+
+.ms-CheckBox-field:hover .ms-Label,
+.ms-CheckBox-field:focus .ms-Label {
+ color: #000000;
+}
+
+.ms-CheckBox-field.is-disabled {
+ cursor: default;
+}
+
+.ms-CheckBox-field.is-disabled::before {
+ background-color: #c8c8c8;
+ border-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-disabled::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-disabled::before {
+ border-color: #600000;
+ }
+}
+
+.ms-CheckBox-field.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-CheckBox-field.in-focus::before {
+ border-color: #767676;
+}
+
+.ms-CheckBox-field.in-focus.is-disabled::before {
+ border-color: #c8c8c8;
+}
+
+.ms-CheckBox-field.in-focus.is-checked::before {
+ border-color: #106ebe;
+}
+
+.ms-CheckBox-field.is-checked::before {
+ border: 10px solid #0078d7;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-checked::before {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-checked::before {
+ border-color: #37006e;
+ }
+}
+
+.ms-CheckBox-field.is-checked::after {
+ display: block;
+}
+
+.ms-CheckBox-field.is-checked:hover::before,
+.ms-CheckBox-field.is-checked:focus::before {
+ border-color: #106ebe;
+}
+
+.ms-RadioButton {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-RadioButton .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.ms-RadioButton-input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ms-RadioButton-field::before {
+ content: '';
+ display: inline-block;
+ border: 2px solid #a6a6a6;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ font-weight: normal;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: border-color;
+ transition-duration: 200ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ border-radius: 50%;
+}
+
+.ms-RadioButton-field::after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ bottom: 0;
+ right: 0;
+ transition-property: top, left, width, height;
+ transition-duration: 150ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field::after {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field::after {
+ color: #600000;
+ }
+}
+
+.ms-RadioButton-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+}
+
+.ms-RadioButton-field:hover::before,
+.ms-RadioButton-field:focus::before {
+ border-color: #767676;
+}
+
+.ms-RadioButton-field:hover .ms-Label,
+.ms-RadioButton-field:focus .ms-Label {
+ color: #000000;
+}
+
+.ms-RadioButton-field.is-disabled {
+ cursor: default;
+}
+
+.ms-RadioButton-field.is-disabled::before {
+ background-color: #c8c8c8;
+ border-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-disabled::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-disabled::before {
+ border-color: #600000;
+ }
+}
+
+.ms-RadioButton-field.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-RadioButton-field.is-disabled:hover::before,
+.ms-RadioButton-field.is-disabled:focus::before {
+ border-color: #c8c8c8;
+}
+
+.ms-RadioButton-field.in-focus::before {
+ border-color: #767676;
+}
+
+.ms-RadioButton-field.is-checked::before {
+ border: 2px solid #0078d7;
+ background-color: transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-checked::before {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-checked::before {
+ border-color: #37006e;
+ }
+}
+
+.ms-RadioButton-field.is-checked::after {
+ background-color: #0078d7;
+ top: 5px;
+ left: 5px;
+ width: 10px;
+ height: 10px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-checked::after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-checked::after {
+ background-color: #37006e;
+ }
+}
+
+.ms-RadioButton-field.is-checked:hover::before,
+.ms-RadioButton-field.is-checked:focus::before {
+ border-color: #0078d7;
+}
+
+.ms-RadioButton-field.is-checked.in-focus::before {
+ border-color: #0078d7;
+}
+
+.ms-ChoiceFieldGroup {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ margin-bottom: 4px;
+}
+
+.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list {
+ padding: 0;
+ margin: 0;
+}
+
+.ms-CommandBar {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: #f4f4f4;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar .ms-CommandButton--actionButton {
+ border-right: 1px solid #eaeaea;
+}
+
+.ms-CommandBar .ms-Button {
+ height: 100%;
+}
+
+.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon {
+ padding-right: 0;
+}
+
+.ms-CommandBar .ms-Button.is-hidden {
+ display: none;
+}
+
+.ms-CommandBar .ms-SearchBox,
+.ms-CommandBar .ms-SearchBox-field,
+.ms-CommandBar .ms-SearchBox-label {
+ height: 100%;
+}
+
+.ms-CommandBar .ms-SearchBox {
+ display: inline-block;
+ vertical-align: top;
+ transition: margin-right 0.267s;
+}
+
+.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 220px;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ z-index: 10;
+ }
+}
+
+.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button {
+ font-size: 18px;
+ padding: 0 11px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar .ms-SearchBox {
+ margin-right: 24px;
+ }
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandBar {
+ height: 44px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar.search-expanded .ms-SearchBox {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ transition: none;
+ }
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ height: 100%;
+ overflow: hidden;
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 4px;
+ height: 100%;
+}
+
+.ms-CommandBar-sideCommands .ms-Button:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 20px;
+ }
+}
+
+.ms-CommandButton {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ position: relative;
+ vertical-align: top;
+}
+
+.ms-CommandButton.is-hidden {
+ display: none;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button,
+.ms-CommandButton.is-disabled .ms-CommandButton-button {
+ cursor: default;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button:hover,
+.ms-CommandButton.is-disabled .ms-CommandButton-button:hover {
+ background-color: #eff6fc;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label,
+.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label {
+ color: #a6a6a6;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,
+.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon {
+ color: #a6a6a6;
+}
+
+.ms-CommandButton .ms-ContextualMenu {
+ display: none;
+}
+
+.ms-CommandButton-button,
+.ms-CommandButton-splitIcon {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ cursor: pointer;
+ display: inline-block;
+ height: 40px;
+ line-height: 40px;
+ outline: 1px solid transparent;
+ padding: 0 8px;
+ position: relative;
+ vertical-align: top;
+ background: transparent;
+}
+
+.ms-CommandButton-button:hover,
+.ms-CommandButton-splitIcon:hover {
+ background-color: #eaeaea;
+}
+
+.ms-CommandButton-button:hover .ms-CommandButton-label,
+.ms-CommandButton-splitIcon:hover .ms-CommandButton-label {
+ color: #212121;
+}
+
+.ms-CommandButton-button:active,
+.ms-CommandButton-splitIcon:active {
+ background-color: #eaeaea;
+}
+
+.ms-CommandButton-button:focus::before,
+.ms-CommandButton-splitIcon:focus::before {
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid #333333;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+.ms-CommandButton-button:focus,
+.ms-CommandButton-splitIcon:focus {
+ outline: 0;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton-button,
+ .ms-CommandButton-splitIcon {
+ height: 44px;
+ }
+
+ .ms-CommandButton-button .ms-CommandButton-icon,
+ .ms-CommandButton-splitIcon .ms-CommandButton-icon {
+ font-size: 20px;
+ }
+
+ .ms-CommandButton-button .ms-CommandButton-label,
+ .ms-CommandButton-splitIcon .ms-CommandButton-label {
+ line-height: 44px;
+ }
+}
+
+.ms-CommandButton-button {
+ border: 0;
+ margin: 0;
+}
+
+.ms-CommandButton + .ms-CommandButton {
+ margin-left: 8px;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton + .ms-CommandButton {
+ margin-left: 4px;
+ }
+}
+
+.ms-CommandButton-icon {
+ display: inline-block;
+ margin-right: 8px;
+ position: relative;
+ font-size: 16px;
+ min-width: 16px;
+ height: 100%;
+}
+
+.ms-CommandButton-icon .ms-Icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+.ms-CommandButton-label {
+ font-size: 14px;
+ font-weight: 400;
+ color: #333333;
+ line-height: 40px;
+ height: 100%;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-CommandButton-label:hover {
+ color: #212121;
+}
+
+.ms-CommandButton-dropdownIcon,
+.ms-CommandButton-splitIcon {
+ display: inline-block;
+ position: relative;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 300;
+ min-width: 12px;
+ height: 100%;
+ vertical-align: top;
+ margin-left: 8px;
+}
+
+.ms-CommandButton-dropdownIcon .ms-Icon,
+.ms-CommandButton-splitIcon .ms-Icon {
+ line-height: normal;
+ padding-top: 16px;
+}
+
+.ms-CommandButton-dropdownIcon:focus::before,
+.ms-CommandButton-splitIcon:focus::before {
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid #333333;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton-dropdownIcon,
+ .ms-CommandButton-splitIcon {
+ display: none;
+ }
+}
+
+.ms-CommandButton-splitIcon {
+ margin-left: -2px;
+ width: 27px;
+ border: 0;
+}
+
+.ms-CommandButton-splitIcon .ms-Icon {
+ margin-left: -1px;
+ position: relative;
+ padding-top: 16px;
+}
+
+.ms-CommandButton-splitIcon .ms-Icon::after {
+ position: absolute;
+ content: ' ';
+ width: 1px;
+ height: 16px;
+ top: 12px;
+ left: -8px;
+ border-left: 1px solid #c8c8c8;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon {
+ margin-right: 0;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label {
+ display: none;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button {
+ padding: 0 12px;
+}
+
+.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button {
+ background: none;
+}
+
+.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button {
+ width: 50px;
+ height: 40px;
+}
+
+.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 16px;
+ height: 16px;
+ padding-right: 0;
+}
+
+.ms-CommandButton.ms-CommandButton--pivot.is-active::before {
+ content: '';
+ height: 2px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ background-color: #0078d7;
+ bottom: 0;
+ z-index: 5;
+}
+
+.ms-CommandButton.ms-CommandButton--pivot:hover::before {
+ content: '';
+ height: 2px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ background-color: #0078d7;
+ bottom: 0;
+ z-index: 5;
+}
+
+.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label,
+.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label {
+ display: inline-block;
+}
+
+@media only screen and (max-width: 479px) {
+ .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label,
+ .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label {
+ font-size: 16px;
+ }
+}
+
+.ms-ContextualMenu {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ display: block;
+ min-width: 180px;
+ max-width: 220px;
+ list-style-type: none;
+ position: relative;
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.is-hidden {
+ display: none;
+}
+
+.ms-ContextualMenu-item {
+ position: relative;
+}
+
+.ms-ContextualMenu-link {
+ box-sizing: border-box;
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ overflow: hidden;
+ line-height: 34px;
+ padding: 0 16px 0 25px;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #f4f4f4;
+ color: #212121;
+}
+
+.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon {
+ color: #212121;
+}
+
+.ms-ContextualMenu-link:focus {
+ outline: transparent;
+ border: 1px solid #666666;
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #dadada;
+ color: #000000;
+ font-weight: 600;
+}
+
+.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon {
+ color: #000000;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #d0d0d0;
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ background-color: #ffffff;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+.ms-ContextualMenu-link.is-disabled .ms-Icon {
+ color: #a6a6a6;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 36px;
+ line-height: 36px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #333333;
+ font-size: 8px;
+ font-weight: 600;
+ width: 24px;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 16px 0 26px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+ font-weight: 600;
+ color: #333333;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ color: #333333;
+ content: '\E73E';
+ font-size: 10px;
+ font-weight: 800;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ left: 7px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus {
+ color: #212121;
+ background-color: #f4f4f4;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover::after,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus::after {
+ color: #212121;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active {
+ color: #000000;
+ background-color: #d0d0d0;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active::after {
+ color: #000000;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link,
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link {
+ padding-left: 40px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon,
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon {
+ position: absolute;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ width: 40px;
+ text-align: center;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons {
+ width: 220px;
+}
+
+.ms-DatePicker {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 17px;
+ z-index: 300;
+}
+
+.ms-DatePicker .ms-TextField {
+ position: relative;
+}
+
+.ms-DatePicker-picker {
+ color: #000000;
+ font-size: 14px;
+ position: relative;
+ text-align: left;
+ z-index: 0;
+}
+
+.ms-DatePicker-event {
+ color: #666666;
+ font-size: 21px;
+ line-height: 20px;
+ pointer-events: none;
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ z-index: 5;
+}
+
+.ms-DatePicker-holder {
+ -webkit-overflow-scrolling: touch;
+ box-sizing: border-box;
+ background: #ffffff;
+ position: absolute;
+ min-width: 300px;
+ display: none;
+}
+
+.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+ box-sizing: border-box;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ border: 1px solid #eaeaea;
+ display: block;
+}
+
+.ms-DatePicker-picker--opened {
+ position: relative;
+ z-index: 10;
+}
+
+.ms-DatePicker-frame {
+ padding: 1px;
+}
+
+.ms-DatePicker-wrap {
+ margin: -1px;
+ padding: 9px;
+}
+
+.ms-DatePicker-dayPicker {
+ display: block;
+ margin-bottom: 30px;
+}
+
+.ms-DatePicker-header {
+ height: 40px;
+ line-height: 44px;
+}
+
+.ms-DatePicker-month,
+.ms-DatePicker-year {
+ display: inline-block;
+ font-weight: 100;
+ font-size: 21px;
+ color: #0078d7;
+ margin-top: -1px;
+}
+
+.ms-DatePicker-month:hover,
+.ms-DatePicker-year:hover {
+ color: #005a9e;
+ cursor: pointer;
+}
+
+.ms-DatePicker-month {
+ margin-left: 15px;
+}
+
+.ms-DatePicker-year {
+ margin-left: 5px;
+}
+
+.ms-DatePicker-table {
+ text-align: center;
+ border-collapse: collapse;
+ border-spacing: 0;
+ table-layout: fixed;
+ font-size: inherit;
+}
+
+.ms-DatePicker-table td {
+ margin: 0;
+ padding: 0;
+}
+
+.ms-DatePicker-table td:hover {
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-day,
+.ms-DatePicker-weekday {
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ line-height: 40px;
+ font-weight: 400;
+ font-size: 15px;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #b3d6f2;
+}
+
+.ms-DatePicker-day--disabled::before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-weight: 400;
+}
+
+.ms-DatePicker-day--infocus:hover,
+.ms-DatePicker-day--outfocus:hover {
+ cursor: pointer;
+ color: #000000;
+ background: #eaeaea;
+}
+
+.ms-DatePicker-day--highlighted:hover,
+.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
+ cursor: pointer;
+ color: #ffffff;
+ background: #0078d7;
+}
+
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
+ background: #a6a6a6;
+}
+
+.ms-DatePicker-monthPicker,
+.ms-DatePicker-yearPicker {
+ display: none;
+}
+
+.ms-DatePicker-monthComponents {
+ position: absolute;
+ top: 9px;
+ right: 9px;
+ left: 9px;
+}
+
+.ms-DatePicker-yearComponents,
+.ms-DatePicker-decadeComponents {
+ position: absolute;
+ right: 10px;
+}
+
+.ms-DatePicker-prevMonth,
+.ms-DatePicker-nextMonth,
+.ms-DatePicker-prevYear,
+.ms-DatePicker-nextYear,
+.ms-DatePicker-prevDecade,
+.ms-DatePicker-nextDecade {
+ width: 40px;
+ height: 40px;
+ display: block;
+ float: right;
+ margin-left: 10px;
+ text-align: center;
+ line-height: 40px;
+ font-size: 21px;
+ color: #666666;
+ position: relative;
+ top: 3px;
+}
+
+.ms-DatePicker-prevMonth:hover,
+.ms-DatePicker-nextMonth:hover,
+.ms-DatePicker-prevYear:hover,
+.ms-DatePicker-nextYear:hover,
+.ms-DatePicker-prevDecade:hover,
+.ms-DatePicker-nextDecade:hover {
+ color: #212121;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-headerToggleView {
+ height: 40px;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: 300;
+ font-size: 21px;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 15px;
+}
+
+.ms-DatePicker-currentYear {
+ color: #0078d7;
+}
+
+.ms-DatePicker-currentYear:hover {
+ color: #005a9e;
+ cursor: pointer;
+}
+
+.ms-DatePicker-optionGrid {
+ position: relative;
+ height: 210px;
+ width: 280px;
+ margin: 10px 0 30px 5px;
+}
+
+.ms-DatePicker-monthOption,
+.ms-DatePicker-yearOption {
+ background-color: #f4f4f4;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ cursor: pointer;
+ float: left;
+ margin: 0 10px 10px 0;
+ font-weight: 400;
+ font-size: 13px;
+ color: #333333;
+ text-align: center;
+}
+
+.ms-DatePicker-monthOption:hover,
+.ms-DatePicker-yearOption:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-monthOption.is-highlighted,
+.ms-DatePicker-yearOption.is-highlighted {
+ background-color: #333333;
+ color: #ffffff;
+}
+
+.ms-DatePicker-goToday {
+ bottom: 9px;
+ color: #0078d7;
+ cursor: pointer;
+ font-weight: 300;
+ font-size: 13px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ position: absolute;
+ right: 9px;
+}
+
+.ms-DatePicker-goToday:hover {
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: none;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+}
+
+@media (min-width: 460px) {
+ .ms-DatePicker-holder {
+ width: 440px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-weight: 300;
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-right: 1px solid #eaeaea;
+ width: 220px;
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-weight: 600;
+ font-size: 12px;
+ }
+
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-prevYear,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-nextDecade {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+ .ms-DatePicker-currentYear,
+ .ms-DatePicker-currentDecade {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 10px 10px 0;
+ }
+
+ .ms-DatePicker-monthOption:hover,
+ .ms-DatePicker-yearOption:hover {
+ outline: 1px solid transparent;
+ }
+
+ .ms-DatePicker-goToday {
+ box-sizing: border-box;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ right: 10px;
+ text-align: right;
+ top: 199px;
+ width: 210px;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+ }
+}
+
+@media (max-width: 459px) {
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
+ display: block;
+ }
+}
+
+.ms-DetailsList {
+ position: relative;
+}
+
+.ms-DetailsList.is-horizontalConstrained {
+ overflow-x: auto;
+ overflow-y: inherit;
+}
+
+.ms-DetailsList-cell {
+ word-break: break-word;
+}
+
+.ms-DetailsHeader {
+ display: inline-block;
+ min-width: 100%;
+ height: 36px;
+ line-height: 36px;
+ white-space: nowrap;
+ padding-bottom: 1px;
+ border-bottom: 1px solid #eaeaea;
+ margin-bottom: 1px;
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-DetailsHeader.is-singleSelect {
+ padding-left: 40px;
+}
+
+.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover {
+ background: transparent;
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ cursor: col-resize;
+}
+
+.ms-DetailsHeader-cell.is-check .ms-Check-circle {
+ visibility: hidden;
+}
+
+.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,
+.ms-DetailsHeader.is-allSelected .ms-Check-circle {
+ visibility: visible;
+}
+
+.ms-DetailsHeader-cellWrapper {
+ display: inline-block;
+ position: relative;
+}
+
+.ms-DetailsHeader-cellSizeWrapper {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 16px;
+}
+
+.ms-DetailsHeader-cellSizeWrapper:last-child {
+ margin-right: 0;
+}
+
+.ms-DetailsHeader-filterChevron.ms-Icon {
+ color: #a6a6a6;
+ padding-left: 4px;
+ vertical-align: middle;
+}
+
+.ms-DetailsHeader-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ color: #a6a6a6;
+ border: 0;
+ background: none;
+ line-height: inherit;
+ margin: 0;
+ font-size: inherit;
+ font-family: inherit;
+ text-align: left;
+ height: 36px;
+ vertical-align: top;
+}
+
+.ms-DetailsHeader-cell.is-check {
+ position: relative;
+ padding: 8px 10px;
+ margin: 0;
+}
+
+.ms-DetailsHeader-cell:focus {
+ outline: transparent;
+}
+
+.ms-DetailsHeader-cell.is-sortable {
+ color: #000000;
+ cursor: default;
+}
+
+.ms-DetailsHeader-cell.is-sortable:hover {
+ background-color: #eaeaea;
+}
+
+.ms-DetailsHeader-cell.is-filter {
+ position: absolute;
+ right: 0;
+ width: 20px;
+ top: 0;
+ bottom: 0;
+ padding: 0;
+ text-align: center;
+ color: #000000;
+}
+
+.ms-DetailsHeader-cell.is-filter:hover {
+ background-color: #eaeaea;
+}
+
+.ms-DetailsHeader-cell.is-filter::before {
+ content: '';
+ position: absolute;
+ border-left: 1px solid #a6a6a6;
+ top: 10px;
+ bottom: 10px;
+ left: 0;
+}
+
+.ms-DetailsHeader-cell.is-sizer {
+ position: absolute;
+ width: 16px;
+ cursor: col-resize;
+ bottom: 0;
+ top: 0;
+ height: inherit;
+ z-index: 99;
+}
+
+.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow {
+ display: inline;
+}
+
+.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow {
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-DetailsHeader-cell.is-resizing.is-sizer::after,
+.ms-DetailsHeader-cell.is-sizer:hover::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background: #eaeaea;
+ border: 1px solid #ffffff;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before,
+.ms-DetailsHeader-cell:focus::before {
+ content: '';
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #a6a6a6;
+}
+
+.ms-DetailsHeader-sortArrow.ms-Icon {
+ font-size: 12px;
+ margin-right: 4px;
+ display: none;
+ color: #a6a6a6;
+}
+
+.ms-DetailsRow {
+ position: relative;
+ display: inline-block;
+ min-width: 100%;
+ min-height: 36px;
+ vertical-align: top;
+ white-space: nowrap;
+ padding: 10px 0;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+ box-sizing: border-box;
+}
+
+.ms-DetailsRow:focus {
+ outline: transparent;
+}
+
+.ms-DetailsRow.ms-DetailsRow.is-selected {
+ background: #deecf9;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover,
+.ms-DetailsRow:hover {
+ background: #eff6fc;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover,
+.ms-DetailsRow.is-selected:hover {
+ background: #b3d6f2;
+}
+
+.ms-DetailsRow-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ vertical-align: top;
+ white-space: normal;
+ word-break: break-word;
+ margin-right: 16px;
+}
+
+.ms-DetailsRow-cell.is-clipped {
+ overflow: hidden;
+}
+
+.ms-DetailsRow-cell:last-child {
+ margin-right: 0;
+}
+
+.ms-DetailsRow-cellIcon {
+ display: inline-block;
+ margin-right: 6px;
+ position: relative;
+ bottom: -2px;
+}
+
+.ms-DetailsRow-check {
+ display: inline-block;
+ cursor: default;
+ padding: 10px;
+ margin: -10px 0;
+ box-sizing: border-box;
+ vertical-align: top;
+ background: none;
+ border: 0;
+ visibility: hidden;
+}
+
+.ms-DetailsRow-check:focus {
+ outline: transparent;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-DetailsRow.is-selected .ms-DetailsRow-check {
+ visibility: visible;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox,
+.ms-DetailsRow:focus .ms-DetailsRow-focusBox {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border: 1px solid #a6a6a6;
+}
+
+.ms-DetailsRow-cellMeasurer {
+ position: absolute;
+ visibility: hidden;
+ white-space: nowrap;
+ top: -1000000000;
+}
+
+.ms-Check {
+ display: inline-block;
+ cursor: default;
+ line-height: 0;
+ vertical-align: top;
+}
+
+.ms-Check.is-checked .ms-Check-circle {
+ fill: #0078d7;
+ stroke: #ffffff;
+ stroke-width: 1px;
+}
+
+.ms-Check.is-checked .ms-Check-check {
+ stroke: #ffffff;
+}
+
+.ms-Check-circle {
+ fill: #ffffff;
+ stroke: #c8c8c8;
+}
+
+.ms-Check-check {
+ stroke: #c8c8c8;
+}
+
+.ms-Dialog {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ height: auto;
+ min-width: 220px;
+ max-width: 340px;
+ padding: 28px 24px;
+ z-index: 10;
+ position: fixed;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ left: 50%;
+ top: 50%;
+}
+
+.ms-Dialog.is-open {
+ display: block;
+}
+
+.ms-Dialog-title {
+ font-size: 21px;
+ font-weight: 100;
+ margin-bottom: 24px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+}
+
+.ms-Dialog-subText {
+ color: #333333;
+ font-size: 12px;
+ font-weight: 300;
+ line-height: 1.5;
+}
+
+.ms-Dialog-actions {
+ margin-top: 24px;
+ text-align: right;
+}
+
+.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 28px;
+ font-weight: 100;
+ padding: 28px 24px;
+ margin-top: -28px;
+ margin-left: -24px;
+ margin-right: -24px;
+}
+
+.ms-Dialog-buttonClose {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ margin: 0;
+ padding: 4px;
+ position: absolute;
+ right: 12px;
+ top: 12px;
+ z-index: 10;
+}
+
+.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title {
+ margin-right: 20px;
+}
+
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose {
+ display: block;
+}
+
+@media (min-width: 480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
+
+.ms-Dropdown {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 10px;
+ position: relative;
+ outline: 0;
+}
+
+.ms-Dropdown:hover .ms-Dropdown-title,
+.ms-Dropdown:hover .ms-Dropdown-caretDown,
+.ms-Dropdown:focus .ms-Dropdown-title,
+.ms-Dropdown:focus .ms-Dropdown-caretDown,
+.ms-Dropdown:active .ms-Dropdown-title,
+.ms-Dropdown:active .ms-Dropdown-caretDown {
+ color: #000000;
+}
+
+.ms-Dropdown:hover .ms-Dropdown-title,
+.ms-Dropdown:active .ms-Dropdown-title {
+ border-color: #767676;
+}
+
+.ms-Dropdown:focus .ms-Dropdown-title {
+ border-color: #0078d7;
+}
+
+.ms-Dropdown .ms-Label {
+ display: inline-block;
+ margin-bottom: 8px;
+}
+
+.ms-Dropdown.is-disabled .ms-Dropdown-title {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ color: #a6a6a6;
+ cursor: default;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-title {
+ border-color: #00ff00;
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-title {
+ border-color: #600000;
+ color: #600000;
+ }
+}
+
+.ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #600000;
+ }
+}
+
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: absolute;
+}
+
+.ms-Panel .ms-Dropdown-items {
+ box-shadow: none;
+ overflow-y: auto;
+ padding-top: 4px;
+ max-height: 100%;
+}
+
+.ms-Panel .ms-Dropdown-items .ms-Dropdown-item {
+ padding: 7px 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Panel .ms-Dropdown-items::before {
+ content: none;
+ border: 0;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #212121;
+ font-size: 12px;
+ position: absolute;
+ right: 13px;
+ bottom: 9px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ padding: 5px 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-title.ms-Dropdown-truncator {
+ height: auto;
+ display: block;
+ position: absolute;
+ visibility: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ z-index: 400;
+ overflow-y: scroll;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+}
+
+.ms-Dropdown-items::before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ padding: 7px 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #b3d6f2;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #b3d6f2;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-FacePile {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-FacePile .ms-FacePile-personaCardHost {
+ display: none;
+}
+
+.ms-FacePile-addButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 32px;
+ width: 32px;
+ line-height: 32px;
+ text-align: center;
+ float: left;
+ padding: 0;
+ margin-right: 4px;
+ outline: transparent;
+ border-radius: 50%;
+ vertical-align: top;
+}
+
+.ms-FacePile-addButton .ms-Persona-presence,
+.ms-FacePile-addButton .ms-Persona-details {
+ display: none;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover,
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus {
+ background-color: #005a9e;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active {
+ display: block;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover {
+ color: #212121;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled {
+ color: #c8c8c8;
+}
+
+.ms-FacePile-addPersonIcon {
+ position: relative;
+ top: -1px;
+}
+
+.ms-FacePile-overflowText {
+ font-size: 14px;
+}
+
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction {
+ display: none;
+}
+
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Link {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+ outline: none;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+.ms-List {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ list-style-type: none;
+}
+
+.ms-ListItem {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ padding: 9px 28px 3px;
+ position: relative;
+ display: block;
+}
+
+.ms-ListItem::before,
+.ms-ListItem::after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-ListItem::after {
+ clear: both;
+}
+
+.ms-ListItem-primaryText,
+.ms-ListItem-secondaryText,
+.ms-ListItem-tertiaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+}
+
+.ms-ListItem-primaryText {
+ color: #212121;
+ font-weight: 300;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-weight: 300;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-weight: 300;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+ background-color: #333333;
+}
+
+.ms-ListItem-selectionTarget {
+ display: none;
+}
+
+.ms-ListItem-actions {
+ max-width: 80px;
+ position: absolute;
+ right: 30px;
+ text-align: right;
+ top: 10px;
+}
+
+.ms-ListItem-action {
+ color: #a6a6a6;
+ display: inline-block;
+ font-size: 15px;
+ position: relative;
+ text-align: center;
+ top: 3px;
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+}
+
+.ms-ListItem-action .ms-Icon {
+ vertical-align: top;
+}
+
+.ms-ListItem-action:hover {
+ color: #666666;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-unread {
+ border-left: 3px solid #0078d7;
+ padding-left: 27px;
+}
+
+.ms-ListItem.is-unread .ms-ListItem-secondaryText,
+.ms-ListItem.is-unread .ms-ListItem-metaText {
+ color: #0078d7;
+ font-weight: 600;
+}
+
+.ms-ListItem.is-unseen::after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover::before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ position: absolute;
+ top: 14px;
+ left: 7px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected::before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected::before,
+.ms-ListItem.is-selected:hover::before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\e73A';
+ font-size: 17px;
+ color: #767676;
+ position: absolute;
+ top: 23px;
+ left: 7px;
+ border: 0;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #b3d6f2;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-weight: 400;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-MessageBanner {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: 0;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-close {
+ position: absolute;
+ right: 0;
+ top: 0;
+ line-height: 52px;
+ color: #666666;
+}
+
+.ms-MessageBanner-text {
+ display: inline-block;
+ padding: 18px 0;
+ margin-left: 0;
+ max-width: 770px;
+ overflow: hidden;
+ text-align: left;
+}
+
+.ms-MessageBanner-expand {
+ display: none;
+ vertical-align: top;
+}
+
+.ms-MessageBanner-expand.is-visible {
+ display: inline-block;
+}
+
+.ms-MessageBanner-action {
+ display: inline-block;
+ vertical-align: top;
+ margin-top: 10px;
+ margin-left: 10px;
+ padding-right: 36px;
+}
+
+.ms-MessageBanner-action .ms-Button {
+ color: #ffffff;
+}
+
+.ms-MessageBanner-clipper {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-MessageBanner.is-expanded {
+ height: auto;
+}
+
+.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper {
+ white-space: normal;
+}
+
+@media screen and (max-width: 479px) {
+ .ms-MessageBanner-action {
+ margin: 0;
+ display: block;
+ text-align: right;
+ padding: 0 10px 10px 0;
+ }
+
+ .ms-MessageBanner-text {
+ margin-left: -25px;
+ padding: 18px 0 10px;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ display: inline-block;
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
+
+.ms-ContextualHost {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ z-index: 10;
+ margin: 16px auto;
+ position: relative;
+ min-width: 10px;
+ display: none;
+ background-color: #ffffff;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.ms-ContextualHost.is-positioned {
+ position: absolute;
+ margin: 0;
+}
+
+.ms-ContextualHost.is-open {
+ display: inline-block;
+}
+
+.ms-ContextualHost-beak {
+ box-shadow: 0 0 15px -5px #3c3c3c;
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ background: #ffffff;
+ border: 1px solid #eaeaea;
+ box-sizing: border-box;
+ top: -6px;
+ display: none;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ z-index: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,
+.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ top: 40px;
+ display: none;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak {
+ left: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ right: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak {
+ display: block;
+ top: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak {
+ display: block;
+ bottom: -10px;
+}
+
+.ms-ContextualHost-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ min-height: 10px;
+}
+
+.ms-ContextualHost-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: #666666;
+ z-index: 10;
+}
+
+.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title {
+ margin-right: 20px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak {
+ background-color: #0078d7;
+}
+
+@media (min-width: 480px) {
+ .ms-ContextualHost {
+ margin: 16px;
+ }
+
+ .ms-ContextualHost.is-positioned {
+ margin: 0;
+ }
+
+ .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak,
+ .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak {
+ display: block;
+ }
+}
+
+.ms-MessageBar {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ padding: 8px;
+ display: table;
+ background-color: #f4f4f4;
+}
+
+.ms-MessageBar .ms-Link {
+ font-size: 12px;
+}
+
+.ms-MessageBar-icon,
+.ms-MessageBar-text {
+ display: table-cell;
+ vertical-align: top;
+}
+
+.ms-MessageBar-icon {
+ padding-right: 8px;
+ font-size: 16px;
+ color: #767676;
+}
+
+.ms-MessageBar-text {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 12px;
+ font-weight: 400;
+}
+
+.ms-MessageBar.ms-MessageBar--warning {
+ background-color: #fff4ce;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning {
+ background-color: #fed9cc;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon {
+ color: #d83b01;
+}
+
+.ms-MessageBar.ms-MessageBar--error {
+ background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon {
+ color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--blocked {
+ background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon {
+ color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--success {
+ background-color: #dff6dd;
+}
+
+.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon {
+ color: #107c10;
+}
+
+.ms-OrgChart {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px;
+}
+
+.ms-OrgChart-listItem {
+ height: 50px;
+ width: 100%;
+ position: relative;
+ list-style: none;
+ margin-bottom: 8px;
+}
+
+.ms-OrgChart-listItemBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 50px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0;
+ padding: 0;
+}
+
+.ms-Overlay {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: rgba(255, 255, 255, 0.4);
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 0;
+ display: none;
+}
+
+.ms-Overlay.is-visible {
+ display: block;
+}
+
+.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-u-overflowHidden {
+ overflow: hidden;
+}
+
+.ms-Panel {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: #ffffff;
+ width: 100%;
+ max-width: 340px;
+ box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2);
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ display: none;
+ height: 100%;
+}
+
+.ms-Panel.animate-in {
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-Panel.animate-out {
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel .ms-CommandBar {
+ padding-right: 0;
+ padding-left: 8px;
+}
+
+.ms-Panel.ms-Panel--md {
+ max-width: 340px;
+}
+
+.ms-Panel.ms-Panel--lg {
+ max-width: 644px;
+}
+
+.ms-Panel.ms-Panel--xl {
+ max-width: 940px;
+}
+
+.ms-Panel.ms-Panel--xxl {
+ max-width: 1192px;
+}
+
+.ms-Panel--left {
+ box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2);
+ left: 0;
+ right: auto;
+}
+
+.ms-Panel--left.animate-in {
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-Panel--left.animate-out {
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 6px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-closeButton .ms-Icon--Cancel {
+ margin-top: 2px;
+}
+
+@media (max-width: 639px) {
+ .ms-Panel-closeButton {
+ font-size: 20px;
+ line-height: 20px;
+ height: 44px;
+ right: 4px;
+ }
+}
+
+.ms-Panel-contentInner {
+ margin-top: 40px;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+ height: 100%;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+.ms-PanelHost {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 10;
+}
+
+.ms-PanelHost .ms-Overlay {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ border-bottom: 1px solid #c8c8c8;
+ cursor: text;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker-searchBox.is-active,
+.ms-PeoplePicker-searchBox:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-PeoplePicker-searchBox:hover,
+ .ms-PeoplePicker-searchBox:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-PeoplePicker-searchBox:hover,
+ .ms-PeoplePicker-searchBox:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-PeoplePicker-searchBox::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox::-moz-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox:-moz-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined {
+ border: 0;
+ margin-bottom: 0;
+ display: inline-block;
+ width: 100%;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field {
+ min-height: 40px;
+ border: 0;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText {
+ color: #a80000;
+}
+
+.ms-PeoplePicker-personaRemove {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ background-color: #f4f4f4;
+ color: #666666;
+ display: inline-block;
+ text-align: center;
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-personaRemove:hover {
+ background-color: #eaeaea;
+ color: #333333;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-personaRemove:focus {
+ background-color: #eaeaea;
+ color: #333333;
+ border: 1px solid #0078d7;
+ outline: none;
+}
+
+.ms-PeoplePicker-results {
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ margin-bottom: -1px;
+ padding-top: 9px;
+ width: 100%;
+ padding-left: 0;
+ box-sizing: border-box;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-weight: 300;
+ font-size: 12px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ text-transform: uppercase;
+ padding-left: 16px;
+}
+
+.ms-PeoplePicker-resultList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: -1px;
+ list-style-type: none;
+}
+
+.ms-PeoplePicker-result {
+ position: relative;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ padding-left: 16px;
+ cursor: pointer;
+ outline: 0;
+}
+
+.ms-PeoplePicker-result:hover,
+.ms-PeoplePicker-result:focus {
+ background-color: #eaeaea;
+}
+
+.ms-PeoplePicker-result:focus {
+ box-shadow: 0 0 0 1px #0078d7 inset;
+}
+
+.ms-PeoplePicker-result.is-selected {
+ background-color: #b3d6f2;
+}
+
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover {
+ background-color: #69afe5;
+}
+
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active {
+ background-color: #69afe5;
+}
+
+.ms-PeoplePicker-resultBtn,
+.ms-PeoplePicker-peopleListBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ box-sizing: border-box;
+ height: 34px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0 0 10px;
+ padding: 0 0 0 9px;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-peopleListBtn {
+ height: 48px;
+ }
+}
+
+.ms-PeoplePicker-resultBtn:hover,
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultBtn:focus,
+.ms-PeoplePicker-peopleListBtn:focus {
+ outline: 1;
+}
+
+.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact,
+.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact {
+ height: 32px;
+}
+
+.ms-PeoplePicker-peopleListBtn {
+ margin-bottom: 0;
+ padding: 0;
+}
+
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: transparent;
+}
+
+.ms-PeoplePicker-resultAction {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ display: block;
+ height: 100%;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 40px;
+ text-align: center;
+}
+
+.ms-PeoplePicker-resultAction .ms-Icon {
+ color: #666666;
+ font-size: 15px;
+}
+
+.ms-PeoplePicker-resultAction:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultAction:active {
+ background-color: #a6a6a6;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ height: 40px;
+ position: relative;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMore:hover {
+ background-color: #f4f4f4;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ font-size: 21px;
+ height: 40px;
+ left: 16px;
+ line-height: 40px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ width: 40px;
+}
+
+.ms-PeoplePicker-searchMoreText {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ height: 40px;
+ left: 64px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn {
+ height: 40px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction {
+ height: 40px;
+ }
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-weight: 400;
+ height: 50px;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker-selectedPeople,
+.ms-PeoplePicker-peopleList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style: none;
+}
+
+.ms-PeoplePicker-selectedPerson {
+ margin-bottom: 8px;
+ position: relative;
+}
+
+.ms-PeoplePicker-peopleListItem {
+ margin-bottom: 6px;
+ position: relative;
+}
+
+.ms-Persona {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1;
+ position: relative;
+ width: 100%;
+ height: 48px;
+ display: table;
+ table-layout: fixed;
+ border-collapse: separate;
+}
+
+.ms-Persona .ms-ContextualHost {
+ display: none;
+}
+
+.ms-Persona-imageArea {
+ position: absolute;
+ overflow: hidden;
+ text-align: center;
+ max-width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 0;
+ width: 100%;
+ top: 0;
+ left: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona-imageArea {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona-imageArea {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona-placeholder {
+ color: #ffffff;
+ position: absolute;
+ right: 0;
+ left: 0;
+ font-size: 47px;
+ top: 9px;
+ z-index: 5;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-weight: 100;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blueLight {
+ background-color: #00bcf2;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #0078d7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blueDark {
+ background-color: #002050;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #008272;
+}
+
+.ms-Persona-initials.ms-Persona-initials--greenLight {
+ background-color: #bad80a;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #107c10;
+}
+
+.ms-Persona-initials.ms-Persona-initials--greenDark {
+ background-color: #004b1c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magentaLight {
+ background-color: #e3008c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #b4009e;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purpleLight {
+ background-color: #b4a0ff;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #5c2d91;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #000000;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #d83b01;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #e81123;
+}
+
+.ms-Persona-initials.ms-Persona-initials--redDark {
+ background-color: #a80000;
+}
+
+.ms-Persona-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 48px;
+ z-index: 10;
+ width: 100%;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #7fba00;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+ text-align: center;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona-presence {
+ border-color: #000000;
+ box-shadow: 0 0 0 1px #1aebff inset;
+ color: #000000;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona-presence {
+ border-color: #ffffff;
+ box-shadow: 0 0 0 1px #37006e inset;
+ color: #ffffff;
+ background-color: #000000;
+ }
+}
+
+.ms-Persona-presenceIcon {
+ color: #ffffff;
+ font-size: 8px;
+ line-height: 12px;
+ vertical-align: top;
+}
+
+.ms-Persona-details {
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+ text-align: left;
+ padding-left: 60px;
+ display: table-cell;
+ width: 100%;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-weight: 400;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-weight: 400;
+ font-size: 12px;
+ white-space: nowrap;
+ line-height: 1.3;
+}
+
+.ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ padding-top: 5px;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ right: auto;
+ top: 10px;
+ left: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ top: 9px;
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 9px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
+ padding: 0;
+ background-color: transparent;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText::after {
+ content: ';';
+}
+
+.ms-Persona.ms-Persona--xs,
+.ms-Persona.ms-Persona--facePile,
+.ms-Persona.ms-Persona--token {
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image,
+.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--facePile .ms-Persona-image,
+.ms-Persona.ms-Persona--token .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--token .ms-Persona-image {
+ max-width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder,
+.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,
+.ms-Persona.ms-Persona--token .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials,
+.ms-Persona.ms-Persona--facePile .ms-Persona-initials,
+.ms-Persona.ms-Persona--token .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence,
+.ms-Persona.ms-Persona--facePile .ms-Persona-presence,
+.ms-Persona.ms-Persona--token .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details,
+.ms-Persona.ms-Persona--facePile .ms-Persona-details,
+.ms-Persona.ms-Persona--token .ms-Persona-details {
+ padding-left: 40px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--token .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--token .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--sm {
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ max-width: 40px;
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-placeholder {
+ font-size: 38px;
+ top: 5px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-initials {
+ font-size: 14px;
+ line-height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-presence {
+ left: 27px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-details {
+ padding-left: 48px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText {
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText {
+ padding-top: 1px;
+}
+
+.ms-Persona.ms-Persona--lg {
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ max-width: 72px;
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-placeholder {
+ font-size: 67px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presence {
+ left: 49px;
+ height: 20px;
+ width: 20px;
+ border-width: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon {
+ line-height: 20px;
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-details {
+ padding-left: 84px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--xl {
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ max-width: 100px;
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-placeholder {
+ font-size: 95px;
+ top: 12px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-initials {
+ font-size: 42px;
+ line-height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presence {
+ height: 28px;
+ width: 28px;
+ left: 71px;
+ border-width: 4px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon {
+ line-height: 28px;
+ font-size: 21px;
+ position: relative;
+ top: 1px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 120px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-weight: 300;
+ margin-top: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText {
+ padding-top: 2px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--xl .ms-Persona-optionalText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText {
+ color: #333333;
+}
+
+.ms-Persona.ms-Persona--selectable {
+ cursor: pointer;
+ padding: 0 10px;
+}
+
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover,
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus {
+ background-color: #deecf9;
+ outline: 1px solid transparent;
+}
+
+.ms-Persona.ms-Persona--available .ms-Persona-presence {
+ background-color: #7fba00;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #fcd116;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon {
+ position: relative;
+ left: 1px;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #ffffff;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before {
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-shadow: 0 0 0 2px #d93b3b inset;
+ border-radius: 50%;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after {
+ content: '';
+ width: 100%;
+ height: 2px;
+ background-color: #d93b3b;
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ position: absolute;
+ top: 5px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after {
+ top: 9px;
+}
+
+.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after {
+ top: 13px;
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #37006e;
+ }
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #e81123;
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #93abbd;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #000000;
+ box-shadow: 0 0 0 1px #ffffff inset;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #ffffff;
+ box-shadow: 0 0 0 1px #000000 inset;
+ }
+}
+
+.ms-Persona.ms-Persona--facePile {
+ display: inline-block;
+ width: auto;
+}
+
+.ms-Persona.ms-Persona--facePile:hover {
+ cursor: pointer;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea {
+ position: relative;
+ width: 100%;
+ min-width: 32px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-initials {
+ position: relative;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-details {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-presence {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--token {
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ width: auto;
+ background-color: #f4f4f4;
+ border-radius: 20px;
+ margin: 4px;
+}
+
+.ms-Persona.ms-Persona--token:hover {
+ cursor: pointer;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-actionIcon {
+ border-radius: 20px;
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ padding: 0;
+ line-height: 30px;
+ transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ text-align: center;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover {
+ background-color: #eaeaea;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-imageArea {
+ width: 100%;
+ min-width: 32px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-details {
+ height: 30px;
+ display: inline-block;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-primaryText {
+ padding-top: 0;
+ line-height: 34px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-initials {
+ position: relative;
+}
+
+.ms-PersonaCard {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-left: 20px;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ position: relative;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-actions::before {
+ content: '';
+ position: absolute;
+ top: 47px;
+ left: 0;
+ width: 100%;
+ border-top: 1px solid #c8c8c8;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 16px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ outline: transparent;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-action:hover,
+.ms-PersonaCard-overflow:hover {
+ color: #212121;
+}
+
+.ms-PersonaCard-action:active,
+.ms-PersonaCard-overflow:active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action::before,
+.ms-PersonaCard-overflow::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ top: 0;
+ left: 0;
+ z-index: 100;
+}
+
+.ms-PersonaCard-action.is-active,
+.ms-PersonaCard-overflow.is-active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active::after,
+.ms-PersonaCard-overflow.is-active::after {
+ box-sizing: border-box;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 13px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: -95px;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-details {
+ display: none;
+ width: 100%;
+ margin: 0;
+ max-height: 300px;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-details.is-active {
+ display: block;
+}
+
+.ms-PersonaCard-details.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after {
+ content: '\E70D';
+}
+
+.ms-PersonaCard-details[data-detail-id='org'] {
+ max-height: 300px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 16px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 2px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\E70E';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart::after {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+
+ .ms-ContextualHost .ms-PersonaCard {
+ box-shadow: none;
+ }
+}
+
+.ms-Pivot {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-Pivot-links {
+ font-size: 0;
+ height: 40px;
+ list-style-type: none;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 40px;
+ margin-right: 8px;
+ padding: 0 8px;
+ text-align: center;
+ vertical-align: top;
+}
+
+.ms-Pivot-link:hover {
+ cursor: pointer;
+}
+
+.ms-Pivot-link::before {
+ background-color: transparent;
+ bottom: 0;
+ content: '';
+ height: 2px;
+ left: 8px;
+ position: absolute;
+ right: 8px;
+ transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-Pivot-link::after {
+ color: transparent;
+ content: attr(title);
+ display: block;
+ font-weight: bold;
+ height: 1px;
+ overflow: hidden;
+ visibility: hidden;
+}
+
+.ms-Pivot-link.is-selected {
+ font-weight: 600;
+ position: relative;
+}
+
+.ms-Pivot-link.is-selected::before {
+ background-color: #0078d7;
+}
+
+.ms-Pivot-link.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow {
+ color: #666666;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow.is-selected {
+ color: #0078d7;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
+.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
+ color: #212121;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow:active {
+ color: #0078d7;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot-content {
+ display: none;
+ margin-top: 20px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-weight: 300;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) {
+ color: #000000;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ color: #ffffff;
+ background-color: #0078d7;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-weight: 300;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
+ background-color: #ffffff;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active {
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-weight: 600;
+ }
+}
+
+.ms-ProgressIndicator {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+}
+
+.ms-ProgressIndicator-itemName {
+ color: #333333;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #767676;
+ font-size: 11px;
+ line-height: 18px;
+}
+
+.ms-ProgressIndicator-itemProgress {
+ position: relative;
+ width: 180px;
+ height: 2px;
+ padding: 8px 0;
+}
+
+.ms-ProgressIndicator-progressTrack {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-ProgressIndicator-progressBar {
+ background-color: #0078d7;
+ height: 2px;
+ position: absolute;
+ transition: width 0.3s ease;
+ width: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ProgressIndicator-progressBar {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ProgressIndicator-progressBar {
+ background-color: #000000;
+ }
+}
+
+.ms-SearchBox {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 36px;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+ overflow: hidden;
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.is-active {
+ z-index: 10;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-label {
+ display: none;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-clear {
+ display: block;
+}
+
+.ms-SearchBox:hover {
+ background-color: #deecf9;
+}
+
+.ms-SearchBox:hover .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox.is-disabled {
+ background-color: #f4f4f4;
+ pointer-events: none;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ color: #a6a6a6;
+ background-color: transparent;
+ border-color: #f4f4f4;
+ cursor: default;
+}
+
+.ms-SearchBox-clear {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 10;
+}
+
+.ms-SearchBox-clear .ms-CommandButton-button {
+ background-color: #0078d7;
+ color: #ffffff;
+ height: 36px;
+}
+
+.ms-SearchBox-clear .ms-CommandButton-icon {
+ color: #ffffff;
+}
+
+.ms-SearchBox-icon {
+ position: relative;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ display: inline-block;
+ font-size: 16px;
+ width: 16px;
+ margin-left: 12px;
+ margin-right: 6px;
+ color: #0078d7;
+ vertical-align: top;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #69afe5;
+ outline: transparent 1px solid;
+ font-weight: 300;
+ font-size: 14px;
+ color: #000000;
+ height: 36px;
+ padding: 6px 3px 7px 45px;
+ width: 208px;
+ background-color: transparent;
+ z-index: 5;
+ transition: padding-left 0.167s;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 36px;
+ line-height: 36px;
+ color: #666666;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar {
+ background-color: #ffffff;
+ width: 208px;
+ height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ height: 40px;
+ line-height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field {
+ transition: none;
+ border: 0;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus {
+ background-color: transparent;
+ padding: 6px 3px 7px 45px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit {
+ display: none;
+ position: absolute;
+ top: 0;
+ z-index: 10;
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button {
+ height: 40px;
+ background-color: transparent;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear {
+ right: 8px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter {
+ right: 8px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon {
+ color: #0078d7;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar::before {
+ position: absolute;
+ content: ' ';
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: 0 8px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover {
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label {
+ color: #212121;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon {
+ color: #0078d7;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:focus {
+ background-color: transparent;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter {
+ display: block;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ width: 50px;
+ min-height: 40px;
+ z-index: 0;
+ background-color: #f4f4f4;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text {
+ display: none;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field {
+ cursor: pointer;
+ width: calc(100% - 50px);
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed::before {
+ visibility: hidden;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field {
+ display: block;
+ cursor: text;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text {
+ display: inline-block;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear {
+ display: inline-block;
+ right: 58px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter {
+ display: inline-block;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated {
+ transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active::before {
+ visibility: visible;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear {
+ display: inline-block;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active {
+ color: #0078d7;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-SearchBox.ms-SearchBox--commandBar {
+ background-color: #ffffff;
+ border-right: 1px solid #eaeaea;
+ }
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar {
+ height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ height: 44px;
+ line-height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear {
+ font-size: 20px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button {
+ height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ font-size: 16px;
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active {
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label {
+ display: block;
+ line-height: 40px;
+ height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text {
+ display: none;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active::before {
+ visibility: visible;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field {
+ width: 100%;
+ padding-right: 100px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon {
+ display: none;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit {
+ display: inline-block;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon {
+ color: #a6a6a6;
+ }
+}
+
+.ms-Spinner {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ height: 20px;
+}
+
+.ms-Spinner.ms-Spinner--large {
+ height: 28px;
+}
+
+.ms-Spinner.ms-Spinner--large .ms-Spinner-label {
+ left: 34px;
+ top: 6px;
+}
+
+.ms-Spinner-circle {
+ position: absolute;
+ border-radius: 100px;
+ background-color: #0078d7;
+ opacity: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Spinner-circle {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Spinner-circle {
+ background-color: #000000;
+ }
+}
+
+.ms-Spinner-label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ font-size: 12px;
+ font-weight: 400;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-Table {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.ms-Table--fixed {
+ table-layout: fixed;
+}
+
+.ms-Table tr,
+.ms-Table-row {
+ display: table-row;
+ line-height: 30px;
+ font-weight: 300;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table tr.is-selected,
+.ms-Table-row.is-selected {
+ background-color: #b3d6f2;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck,
+.ms-Table-row.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck::before,
+.ms-Table-row.is-selected .ms-Table-rowCheck::before {
+ display: none;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck::after,
+.ms-Table-row.is-selected .ms-Table-rowCheck::after {
+ content: '\E73A';
+ color: #ffffff;
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table thead th,
+.ms-Table-head {
+ font-weight: 300;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\E739';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 1px;
+}
+
+.ms-Table--selectable tr:hover,
+.ms-Table--selectable .ms-Table-row:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Table-row.is-selected .ms-Table-rowCheck {
+ background: none;
+ }
+
+ .ms-Table-row.is-selected .ms-Table-rowCheck::before {
+ display: block;
+ }
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 8px;
+}
+
+.ms-TextField .ms-Label {
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled::-moz-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled:-moz-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-moz-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-moz-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-ms-input-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-weight: 300;
+ font-size: 14px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 12px 7px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+ text-overflow: ellipsis;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field[disabled] {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField-field::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field::-moz-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field:-moz-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+ background-color: #ffffff;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-TextField-field {
+ position: relative;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-weight: 300;
+ font-size: 14px;
+ color: #666666;
+ padding: 6px 12px 7px;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 14px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: top;
+ padding-left: 12px;
+ padding-top: 9px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 3px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field {
+ background-color: transparent;
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--multiline .ms-TextField-field {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #666666;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Toggle {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ top: -2px;
+ padding: 0 0 0 50px;
+}
+
+.ms-Toggle .ms-Toggle-field::before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ left: 4px;
+ background-color: #666666;
+ outline: 1px solid transparent;
+ transition-property: background, left;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field::before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field::before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle .ms-Toggle-field::before {
+ right: auto;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected::before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ right: 4px;
+ background-color: #666666;
+ outline: 1px solid transparent;
+ transition-property: background, left;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field.is-selected::before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field.is-selected::before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected::before {
+ background-color: #ffffff;
+ left: 28px;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle:focus + .ms-Toggle-field,
+.ms-Toggle:hover + .ms-Toggle-field {
+ border-color: #666666;
+}
+
+.ms-Toggle:focus + .ms-Toggle-field::before,
+.ms-Toggle:hover + .ms-Toggle-field::before {
+ background-color: #333333;
+}
+
+.ms-Toggle:focus:checked + .ms-Toggle-field,
+.ms-Toggle:hover:checked + .ms-Toggle-field {
+ background-color: #106ebe;
+ border-color: #106ebe;
+}
+
+.ms-Toggle:focus:checked + .ms-Toggle-field::before,
+.ms-Toggle:hover:checked + .ms-Toggle-field::before {
+ background-color: #ffffff;
+}
+
+.ms-Toggle:active:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Toggle .ms-Toggle-field:focus,
+.ms-Toggle .ms-Toggle-field:hover {
+ border-color: #333333;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected:focus,
+.ms-Toggle .ms-Toggle-field.is-selected:hover {
+ background-color: #106ebe;
+ border-color: #106ebe;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label {
+ color: #000000;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Toggle .ms-Toggle-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle .ms-Toggle-field:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff;
+ border-color: #c8c8c8;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field::before {
+ background-color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field::before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 14px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 45px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2px solid #a6a6a6;
+ border-radius: 20px;
+ cursor: pointer;
+ transition-property: background, left, border-color;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ outline: 0;
+}
+
+.ms-Toggle-field:hover,
+.ms-Toggle-field:focus {
+ border-color: #666666;
+}
+
+.ms-Toggle-input {
+ display: none;
+}
+
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
+ float: right;
+}
+
+html,
+body {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ font-size: inherit;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+ outline: none;
+ font-size: inherit;
+ text-decoration: none;
+}
+
+a:hover,
+a:focus {
+ color: #004578;
+}
+
+a:active {
+ color: #0078d7;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
+}
+
+h1 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 28px;
+ font-weight: 100;
+ color: inherit;
+ letter-spacing: -1px;
+}
+
+h2 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 21px;
+ font-weight: 100;
+ color: inherit;
+}
+
+h3 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 17px;
+ font-weight: 300;
+ color: inherit;
+}
+
+h4 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ color: inherit;
+}
+
+h5 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 12px;
+ font-weight: 400;
+ color: inherit;
+}
+
+h6 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 11px;
+ font-weight: 400;
+ color: inherit;
+}
+
+.u-contentCenter {
+ max-width: 400px;
+ padding: 0 20px 0;
+ margin: 0 auto;
+ box-sizing: border-box;
+}
+
+.Container {
+ margin: 0;
+ padding: 0;
+}
+
+.Header {
+ border-bottom-style: solid;
+ border-bottom-width: 20px;
+}
+
+.Header-text {
+ padding: 40px 0 35px;
+}
+
+.Content {
+ padding: 20px 0;
+}
+
+.Intro {
+ margin-bottom: 16px;
+}
+
+.SubmitButton {
+ margin-top: 20px;
+}
diff --git a/dist/documentation/Samples/Form/css/Form.min.css b/dist/documentation/Samples/Form/css/Form.min.css
new file mode 100644
index 00000000..69eb2d74
--- /dev/null
+++ b/dist/documentation/Samples/Form/css/Form.min.css
@@ -0,0 +1 @@
+.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:11px 7px}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute;margin-right:-2px}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:8px 5px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:5px 4px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-ms-flexbox;display:flex;padding:0}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-right:4px;position:relative;top:1px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:'\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:8px;left:8px;bottom:0;right:0;transition-property:top,left,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;left:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-right:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-right:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-right:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-left:4px}}.ms-CommandButton-icon{display:inline-block;margin-right:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-left:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-left:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-left:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:' ';width:1px;height:16px;top:12px;left:-8px;border-left:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-right:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:'';height:2px;position:absolute;left:0;right:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 16px 0 25px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;right:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 16px 0 26px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:'\E73E';font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;left:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-left:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-left:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-right:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-right:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-left:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:left;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;right:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:'';position:absolute;border-left:1px solid #a6a6a6;top:10px;bottom:10px;left:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:'';pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-right:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-right:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-right:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-right:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);left:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:right}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-left:-24px;margin-right:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;right:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;right:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;left:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\e73A';font-size:17px;color:#767676;position:absolute;top:23px;left:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-right:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-right:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;left:0;right:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;right:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-right:0;padding-left:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:-30px 0 30px 30px rgba(0,0,0,.2);left:0;right:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;right:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-left:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-left:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-left:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;left:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;left:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;left:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;left:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:left;padding-left:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-left:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;left:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;left:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:'';width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:'';width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;left:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-right:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-left:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:'';position:absolute;top:47px;left:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:'';position:absolute;width:100%;height:100%;background-color:transparent;top:0;left:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\E70D'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E70E'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-right:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;right:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-left:12px;margin-right:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 3px 7px 45px;width:208px;background-color:transparent;z-index:5;transition:padding-left .167s}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;left:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px;line-height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 3px 7px 45px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{right:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:' ';right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;right:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-right:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-right:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:'\E73A';color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E739';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-right:8px;display:table-cell;vertical-align:top;padding-left:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 0 0 50px}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{right:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;left:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,left,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}body,html{padding:0;margin:0}a,body,html{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;font-size:inherit}a{color:#0078d7;cursor:pointer;outline:none;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:400}h1{font-size:28px;letter-spacing:-1px}h1,h2{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100;color:inherit}h2{font-size:21px}h3{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300;color:inherit}h4{font-size:14px}h4,h5{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400;color:inherit}h5{font-size:12px}h6{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:11px;font-weight:400;color:inherit}.u-contentCenter{max-width:400px;padding:0 20px;margin:0 auto;box-sizing:border-box}.Container{margin:0;padding:0}.Header{border-bottom-style:solid;border-bottom-width:20px}.Header-text{padding:40px 0 35px}.Content{padding:20px 0}.Intro{margin-bottom:16px}.SubmitButton{margin-top:20px}
\ No newline at end of file
diff --git a/dist/documentation/Samples/Form/index.html b/dist/documentation/Samples/Form/index.html
new file mode 100644
index 00000000..23f564e0
--- /dev/null
+++ b/dist/documentation/Samples/Form/index.html
@@ -0,0 +1,250 @@
+
+
+
+
+
+
+
+ Example Form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Create an account to start using Nod.
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Samples/Form/sass/Form.scss b/dist/documentation/Samples/Form/sass/Form.scss
new file mode 100644
index 00000000..10ab3e2d
--- /dev/null
+++ b/dist/documentation/Samples/Form/sass/Form.scss
@@ -0,0 +1,94 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Import Fabric and Fabric Components to use its variables and mixins
+@import '../../../../node_modules/office-ui-fabric-core/src/sass/_Fabric.Common.scss';
+@import '../../../sass/Fabric.Components.scss';
+
+html,
+body {
+ @include ms-font-m;
+ font-size: inherit;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ @include ms-Link;
+ font-size: inherit;
+ text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
+}
+
+h1 {
+ @include ms-font-xxl;
+ color: inherit;
+ letter-spacing: -1px;
+}
+
+h2 {
+ @include ms-font-xl;
+ color: inherit;
+}
+
+h3 {
+ @include ms-font-l;
+ color: inherit;
+}
+
+h4 {
+ @include ms-font-m;
+ color: inherit;
+}
+
+h5 {
+ @include ms-font-s;
+ color: inherit;
+}
+
+h6 {
+ @include ms-font-xs;
+ color: inherit;
+}
+
+.u-contentCenter {
+ max-width: 400px;
+ padding: 0 20px 0;
+ margin: 0 auto;
+ box-sizing: border-box;
+}
+
+.Container {
+ margin: 0;
+ padding: 0;
+}
+
+.Header {
+ border-bottom-style: solid;
+ border-bottom-width: 20px;
+}
+
+.Header-text {
+ padding: 40px 0 35px;
+}
+
+.Content {
+ padding: 20px 0;
+}
+
+.Intro {
+ margin-bottom: 16px;
+}
+
+.SubmitButton {
+ margin-top: 20px;
+}
diff --git a/dist/documentation/Samples/Languages/index.html b/dist/documentation/Samples/Languages/index.html
new file mode 100644
index 00000000..f25cbf31
--- /dev/null
+++ b/dist/documentation/Samples/Languages/index.html
@@ -0,0 +1,283 @@
+
+
+
+
+
+
+
+
+ Fabric's Language Override Test Page
+
+
+
+
+
+
+
+
+
+
+ Language Overrides Sample
+
+
+
+
+
+
Chinese Simplified, Chinese Traditional, Korean, and Japanese use local desktop fonts instead of web fonts due to
+ file size, so we only provide font stacks for these character sets.
+
+
+
+
+ Add a lang
attribute matching one of the language codes from our overrides
+
+
+ Example:
+
+
+ <div lang="pl-pl">
+ <p class="ms-font-m">This would render using Segoe UI East European</p>
+ </div>
+
+
+ The examples below show Fabric's font stack in the supported language sets.
+
+
+
+
+
+
+
Chinese Simplified
+
+
使用 Office 365 管理中心从任意位置管理用户帐户、存储和设置。 此外,OneDrive for Business 提供混合选项,通过云利用你的本地解决方案。
+
+
作为业界的云安全先锋,我们密切关注你的文件。 我们使用当前最先进的加密方法来确保你的文件在传输过程中和存储时都经过加密。 我们还确保我们的服务满足严格的合规性标准。
+
+
我们严守安全、合规性和隐私的相关指导原则。 经过检验,我们符合 ISO 27001、数据处理协议、欧盟示范条款、HIPAA、FISMA、FERPA、SSAE 16 等全球合规性标准。
+
+
+
+
+
Chinese Traditional
+
+
使用 Office 365 系統管理中心,可以隨時隨地管理使用者帳戶、儲存空間及設定。此外,商務用 OneDrive 提供混合式選項,能夠搭配雲端充分運用您的內部部署解決方案。 安全
+
+
+
作為雲端安全性的業界領導者,保護您的檔案就是我們的責任。 我們會確保您的檔案透過加密傳輸,並使用最先進的加密方式儲存。 我們會確保服務符合最嚴格的規範標準。 受信任
+
+
+
我們依循安全性、法規遵循及隱私權的指導原則。 我們通過國際規範標準認證,包含 ISO 27001、Data Processing Agreements、EU Model Clauses、HIPAA、FISMA、FERPA、SSAE
+ 16 等等。
+
+
+
+
+
Greek
+
+
Χρησιμοποιήστε το κέντρο διαχείρισης Office 365 για τη διαχείριση των λογαριασμών χρηστών, του χώρου αποθήκευσης
+ και των ρυθμίσεων από οποιοδήποτε σημείο. Επίσης, το OneDrive για επιχειρήσεις παρέχει επιλογές υβριδικής ανάπτυξης,
+ για να χρησιμοποιήσετε τις λύσεις εσωτερικής εγκατάστασής σας με το cloud. Ασφαλές
+
+
+
Ως ηγέτιδα δύναμη στον κλάδο όσον αφορά την ασφάλεια στο cloud, ενδιαφερόμαστε ιδιαίτερα για την προστασία των
+ αρχείων σας. Εξασφαλίζουμε ότι τα αρχεία σας κρυπτογραφούνται κατά τη μεταφορά και την αποθήκευση, με χρήση των
+ πιο εξελιγμένων μεθόδων κρυπτογράφησης που υπάρχουν. Εξασφαλίζουμε επίσης ότι η υπηρεσία μας πληροί πολύ αυστηρά
+ πρότυπα συμμόρφωσης. Αξιόπιστο
+
+
+
Βασιζόμαστε στις κατευθυντήριες αρχές της ασφάλειας, της συμμόρφωσης και της προστασίας των προσωπικών δεδομένων.
+ Διαθέτουμε πιστοποιήσεις ότι πληρούμε παγκόσμια πρότυπα συμμόρφωσης όπως ISO 27001, Συμβάσεις επεξεργασίας δεδομένων,
+ πρότυπες ρήτρες της ΕΕ, HIPAA, FISMA, FERPA, SSAE 16 και άλλα.
+
+
+
+
+
Vietnamese
+
+
Sử dụng trung tâm quản trị Office 365 để quản lý tài khoản người dùng, dung lượng lưu trữ và thiết đặt từ mọi nơi.
+ Đồng thời, OneDrive for Business còn cung cấp các tùy chọn kết hợp giúp sử dụng các giải pháp tại chỗ của bạn
+ với đám mây.
+
+
Dẫn đầu trong lĩnh vực bảo mật đám mây, chúng tôi quan tâm sâu sắc đến tệp của bạn. Chúng tôi đảm bảo rằng tệp
+ của bạn được mã hóa trong khi truyền và lưu bằng cách sử dụng các phương pháp mã hóa tiên tiến nhất hiện có.
+ Chúng tôi cũng đảm bảo rằng dịch vụ của chúng tôi đáp ứng các tiêu chuẩn tuân thủ nghiêm ngặt.
+
+
Chúng tôi dựa trên các nguyên tắc hướng dẫn về bảo mật, tuân thủ và quyền riêng tư. Chúng tôi được xác nhận đáp
+ ứng các tiêu chuẩn tuân thủ toàn cầu như ISO 27001, Thỏa thuận Xử lý Dữ liệu, Điều khoản Mô hình EU, HIPAA, FISMA,
+ FERPA, SSAE 16 và các tiêu chuẩn khác.
+
+
+
+
+
Thai
+
+
เรียบง่าย
+
+
ใช้ศูนย์การจัดการ Office 365 เพื่อจัดการกับบัญชีผู้ใช้ ที่เก็บข้อมูล และการตั้งค่าจากที่ใดก็ได้ นอกจากนี้ OneDrive
+ for Business มีข้อเสนอตัวเลือกแบบไฮบริดเพื่อใช้ประโยชน์จากโซลูชันภายในองค์กรร่วมกับระบบคลาวด์
+
+
ปลอดภัย
+
+
ในฐานะผู้นำด้านความปลอดภัยใน Cloud ของอุตสาหกรรมนี้ เราใส่ใจในไฟล์ของคุณเป็นอย่างยิ่ง เราทำให้คุณแน่ใจได้ว่าไฟล์ของคุณมีการเข้ารหัสลับในการส่งและพักไว้โดยใช้วิธีการเข้ารหัสลับในระดับขั้นสูงที่สุดที่มีอยู่
+ นอกจากนี้ เรายังทำให้คุณแน่ใจได้ว่าบริการของเราตรงตามมาตรฐานการปฏิบัติตามกฎระเบียบที่เข้มงวด
+
+
เชื่อถือได้
+
+
เราสร้างจากข้อแนะนำหลักการของความปลอดภัย การปฏิบัติตามกฎระเบียบ และความเป็นส่วนตัว เราได้รับการรับรองว่าได้มาตรฐานการปฏิบัติตามกฎระเบียบสากล อาทิเช่น ISO 27001, Data Processing Agreements, EU Model Clauses, HIPAA, FISMA, FERPA, SSAE 16 และอื่นๆ
+
+
+
+
+
Korean
+
+
단순성
+
+
Office 365 관리 센터를 사용하여 어디에서나 사용자 계정, 저장소 및 설정을 관리할 수 있습니다. 또한 비즈니스용 OneDrive를 사용하면 클라우드와 온-프레미스 솔루션을 함께 활용할 수 있는
+ 하이브리드 옵션이 제공됩니다.
+
+
안전성
+
+
클라우드 보안의 업계 선도자로서, 주의 깊게 파일을 관리합니다. 파일은 암호화 상태로 전송되며, 전송 후에는 최고 수준의 암호화 방식을 통해 보관됩니다. 또한 까다로운 규정 준수 기준을 충족시키고 있습니다.
+
+
신뢰성
+
+
보안, 규정 준수, 개인 정보 보호의 가이드 라인을 원칙으로 하여 설계되었습니다. ISO 27001, 데이터 처리 계약, EU 모범 조항, HIPAA, FISMA, FERPA, SSAE 16 등의 세계적인규정 준수 기준 충족을 인증받았습니다.
+
+
+
+
+
Russian
+
+
Простота
+
+
С помощью Центра администрирования Office 365 вы можете управлять учетными записями пользователей, ресурсами хранения
+ и настройками из любого места. Кроме того, в OneDrive для бизнеса имеются возможности для создания гибридной
+ среды и, соответственно, использования локальных решений в облаке.
+
+
Надежность
+
+
Занимая лидирующие в отрасли позиции по обеспечению безопасности в облачной среде, мы заботимся о сохранности ваших
+ файлов. Мы обеспечиваем их шифрование во время пересылки и при хранении, используя самые передовые методы криптографической
+ защиты. Также мы гарантируем, что наши услуги удовлетворяют жестким стандартам нормативного соответствия.
+
+
Безопасность
+
+
Основополагающие принципы нашей работы — это обеспечение безопасности, неразглашения и нормативного соответствия.
+ Мы прошли проверку нормативного соответствия по глобальным стандартам, в частности ISO 27001, соглашениям об
+ обработке данных, типовым нормам ЕС, HIPAA, FISMA, FERPA, SSAE 16 и другим.
+
+
+
+
+
Slovak (rendering the East European variant of Segoe)
+
+
Prehľadné riešenie
+
+
Pomocou Centra spravovania služieb Office 365 môžete z ľubovoľného miesta spravovať používateľské kontá, ukladací
+ priestor a nastavenia. OneDrive for Business poskytuje tiež hybridné možnosti na súčasné použitie lokálnych riešení
+ aj cloudu.
+
+
Bezpečnosť
+
+
Sme lídrom v oblasti zabezpečenia cloudu a na vašich súboroch nám skutočne záleží. Prenášané súbory aj súbory v
+ ukladacom priestore vždy šifrujeme pomocou najpokročilejších dostupných šifrovacích metód. Zároveň neustále dbáme
+ o to, aby naša služba spĺňala prísne štandardy v oblasti dodržiavania súladu s normami.
+
+
Dôveryhodnosť
+
+
Naše riešenie staviame na základných princípoch, ktorými sú zabezpečenie, súlad s normami a ochrana osobných údajov.
+ Spĺňame globálne normy, ako sú napríklad ISO 27001, Zmluvy o spracovaní údajov, Vzorové doložky EÚ, zákony HIPAA,
+ FISMA, FERPA, SSAE 16 a ďalšie.
+
+
+
+
+
+
Japanese
+
+
シンプル
+
+
Office 365 の管理センターを使用すると、場所を問わずにユーザー アカウント、ストレージ、設定を管理できます。また OneDrive for Business には、オンプレミス ソリューションとクラウドを連携させるためのハイブリッド
+ オプションも用意されています。
+
+
+
セキュア
+
+
クラウド セキュリティの業界リーダーとして、ファイルに十分に注意を払います。転送中および保存中のファイルは、利用可能な最先端の暗号化方式により暗号化されていることを保証します。また、サービスが厳しいコンプライアンス基準を満たしていることも保証します。
+
+
信頼性
+
+
セキュリティ、コンプライアンス、プライバシーの指針に基づいて構築されています。ISO 27001、データ処理契約、EU モデル契約条項、HIPAA、FISMA、FERPA、SSAE 16 などのようなグローバルなコンプライアンス基準を満たすことが確認されています。
+
+
+
+
+
Arabic
+
+
+ بسيط
+
+
+ استخدم مركز إدارة Office 365 لإدارة حسابات المستخدمين ومساحات التخزين والإعدادات من أي مكان. يوفر لك OneDrive for Business
+ أيضاً خيارات مختلطة لاستخدام الحلول المحلية مع السحابة.
+
+
+ كشركة رائدة في مجال أمان السحابة، فإننا نهتم كل الاهتمام بملفاتك. فنحن نضمن تشفير ملفاتك عند نقلها باستخدام طرق التشفير المتاحة
+ الأكثر تقدماً. كما نضمن لك أن تلبي خدماتنا الامتثال للمعايير الصارمة.
+
+
+ موثنحن نستند بشكل أساسي إلى المبادئ التوجيهية للأمان والامتثال والخصوصية. وقد تم التحقق من تلبيتنا لمعايير الامتثال العالمية
+ مثل ISO 27001 واتفاقيات معالجة البيانات وشروط نموذج الاتحاد الأوروبي وHIPAA وFISMA وFERPA وSSAE 16 وغيرها.
+
+
+
+
+
+
Hebrew
+
+
+ פשוט
+
+
+ השתמש במרכז הניהול של Office 365 כדי לנהל חשבונות משתמשים, אחסון והגדרות מכל מקום. כמו כן, OneDrive for Business מציע אפשרויות
+ היברידיות לשימוש בפתרונות המקומיים שלך עם הענן.
+
+
+ כחברה מובילה בתחום האבטחה בענן, הקבצים שלך חשובים לנו ביותר. אנו מוודאים שהקבצים שלך מוצפנים בתנועה ובמנוחה באמצעות שיטות
+ ההצפנה הזמינות המתקדמות ביותר. אנו גם מוודאים שהשירות שלנו עומד בתקני התאימות המחמירים ביותר.
+
+
+ אנו מתבססים על העקרונות המנחים של אבטחה, תאימות ופרטיות. כפי שהוכח, אנו עומדים בתקני תאימות גלובליים כגון ISO 27001, הסכמי
+ עיבוד נתונים, סעיפי מודל האיחוד האירופי, HIPAA, FISMA, FERPA, SSAE 16 ואחרים.
+
+
+
+
+
+
+
+
+
diff --git a/dist/documentation/Samples/VideoPortal/channel.html b/dist/documentation/Samples/VideoPortal/channel.html
new file mode 100644
index 00000000..27490299
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/channel.html
@@ -0,0 +1,256 @@
+
+
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Popular
+ All Videos
+ My Videos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Samples/VideoPortal/channels.html b/dist/documentation/Samples/VideoPortal/channels.html
new file mode 100644
index 00000000..8e59505c
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/channels.html
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Samples/VideoPortal/css/VideoPortal.css b/dist/documentation/Samples/VideoPortal/css/VideoPortal.css
new file mode 100644
index 00000000..9845f1a5
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/css/VideoPortal.css
@@ -0,0 +1,6648 @@
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+.ms-Breadcrumb {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ margin: 23px 0 1px;
+}
+
+.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow {
+ display: inline;
+}
+
+.ms-Breadcrumb-chevron {
+ font-size: 12px;
+ color: #666666;
+ vertical-align: top;
+ margin: 11px 7px;
+}
+
+.ms-Breadcrumb-list {
+ display: inline;
+ white-space: nowrap;
+ padding: 0;
+ margin: 0;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem {
+ list-style-type: none;
+ vertical-align: top;
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+}
+
+.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron {
+ display: none;
+}
+
+.ms-Breadcrumb-overflow {
+ display: none;
+ position: relative;
+}
+
+.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ display: inline-block;
+ color: #0078d7;
+ padding: 8px;
+ cursor: pointer;
+ vertical-align: top;
+}
+
+.ms-Breadcrumb-overflowMenu {
+ display: none;
+ position: absolute;
+ margin-right: -2px;
+}
+
+.ms-Breadcrumb-overflowMenu.is-open {
+ display: block;
+ top: 36px;
+ left: 0;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ z-index: 105;
+}
+
+.ms-Breadcrumb-overflowMenu::before {
+ position: absolute;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ top: -6px;
+ left: 6px;
+ content: ' ';
+ width: 16px;
+ height: 16px;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ background-color: #ffffff;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu {
+ border: 0;
+ box-shadow: none;
+ position: relative;
+ width: 190px;
+}
+
+.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open {
+ margin-bottom: 0;
+}
+
+.ms-Breadcrumb-itemLink,
+.ms-Breadcrumb-overflowButton {
+ text-decoration: none;
+ outline: transparent;
+}
+
+.ms-Breadcrumb-itemLink:hover,
+.ms-Breadcrumb-overflowButton:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+}
+
+.ms-Breadcrumb-itemLink:focus,
+.ms-Breadcrumb-overflowButton:focus {
+ outline: #767676 solid 1px;
+ color: #000000;
+}
+
+.ms-Breadcrumb-itemLink:active,
+.ms-Breadcrumb-overflowButton:active {
+ outline: transparent;
+ background-color: #c8c8c8;
+}
+
+.ms-Breadcrumb-itemLink {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ display: inline-block;
+ padding: 0 4px;
+ max-width: 160px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ vertical-align: top;
+}
+
+@media screen and (max-width: 639px) {
+ .ms-Breadcrumb {
+ margin: 10px 0;
+ }
+
+ .ms-Breadcrumb-itemLink {
+ font-size: 17px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ font-size: 10px;
+ margin: 8px 5px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ font-size: 16px;
+ padding: 5px 4px;
+ }
+}
+
+@media screen and (max-width: 479px) {
+ .ms-Breadcrumb-itemLink {
+ font-size: 14px;
+ max-width: 116px;
+ }
+
+ .ms-Breadcrumb-chevron {
+ margin: 5px 4px;
+ }
+
+ .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton {
+ padding: 2px 4px;
+ }
+}
+
+.ms-Button {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ background-color: #f4f4f4;
+ border: 1px solid #f4f4f4;
+ cursor: pointer;
+ display: inline-block;
+ height: 32px;
+ min-width: 80px;
+ padding: 4px 20px 6px;
+}
+
+.ms-Button.is-hidden {
+ display: none;
+}
+
+.ms-Button:hover {
+ background-color: #eaeaea;
+ border-color: #eaeaea;
+}
+
+.ms-Button:hover .ms-Button-label {
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Button:hover {
+ color: #1aebff;
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Button:hover {
+ color: #37006e;
+ border-color: #37006e;
+ }
+}
+
+.ms-Button:focus {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ outline: 1px solid transparent;
+}
+
+.ms-Button:focus .ms-Button-label {
+ color: #000000;
+}
+
+.ms-Button:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button:active .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button:disabled,
+.ms-Button.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ cursor: default;
+}
+
+.ms-Button:disabled .ms-Button-label,
+.ms-Button.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button:disabled:hover,
+.ms-Button:disabled:focus,
+.ms-Button.is-disabled:hover,
+.ms-Button.is-disabled:focus {
+ outline: 0;
+}
+
+.ms-Button-label {
+ color: #333333;
+ font-weight: 600;
+ font-size: 14px;
+}
+
+.ms-Button-icon,
+.ms-Button-description {
+ display: none;
+}
+
+.ms-Button.ms-Button--primary {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--primary:hover {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Button.ms-Button--primary:focus {
+ background-color: #005a9e;
+ border-color: #004578;
+}
+
+.ms-Button.ms-Button--primary:active {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Button.ms-Button--primary:disabled,
+.ms-Button.ms-Button--primary.is-disabled {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--primary:disabled .ms-Button-label,
+.ms-Button.ms-Button--primary.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--hero {
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: transparent;
+ border: 0;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon {
+ color: #0078d7;
+ display: inline-block;
+ font-size: 12px;
+ margin-right: 4px;
+ position: relative;
+ top: 1px;
+ text-align: center;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon {
+ border-radius: 18px;
+ border: 1px solid #0078d7;
+ font-size: 12px;
+ height: 18px;
+ line-height: 18px;
+ width: 18px;
+}
+
+.ms-Button.ms-Button--hero .ms-Button-label {
+ color: #0078d7;
+ font-size: 21px;
+ font-weight: 100;
+ position: relative;
+ text-decoration: none;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon {
+ color: #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon {
+ border: 1px solid #005a9e;
+}
+
+.ms-Button.ms-Button--hero:hover .ms-Button-label,
+.ms-Button.ms-Button--hero:focus .ms-Button-label {
+ color: #004578;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon {
+ border: 1px solid #0078d7;
+}
+
+.ms-Button.ms-Button--hero:active .ms-Button-label {
+ color: #0078d7;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon {
+ color: #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon {
+ border: 1px solid #c8c8c8;
+}
+
+.ms-Button.ms-Button--hero:disabled .ms-Button-label,
+.ms-Button.ms-Button--hero.is-disabled .ms-Button-label {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound {
+ display: block;
+ height: auto;
+ max-width: 280px;
+ min-height: 72px;
+ padding: 20px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-label {
+ display: block;
+ font-weight: 600;
+ position: relative;
+ text-align: left;
+ margin-top: -5px;
+}
+
+.ms-Button.ms-Button--compound .ms-Button-description {
+ color: #666666;
+ display: block;
+ font-weight: 400;
+ font-size: 12px;
+ position: relative;
+ text-align: left;
+ top: 3px;
+}
+
+.ms-Button.ms-Button--compound:hover .ms-Button-description {
+ color: #212121;
+}
+
+.ms-Button.ms-Button--compound:focus {
+ border-color: #0078d7;
+ background-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--compound:focus .ms-Button-label {
+ color: #333333;
+}
+
+.ms-Button.ms-Button--compound:focus .ms-Button-description {
+ color: #666666;
+}
+
+.ms-Button.ms-Button--compound:active {
+ background-color: #0078d7;
+}
+
+.ms-Button.ms-Button--compound:active .ms-Button-description,
+.ms-Button.ms-Button--compound:active .ms-Button-label {
+ color: #ffffff;
+}
+
+.ms-Button.ms-Button--compound:disabled .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled .ms-Button-description {
+ color: #a6a6a6;
+}
+
+.ms-Button.ms-Button--compound:disabled:focus,
+.ms-Button.ms-Button--compound:disabled:active,
+.ms-Button.ms-Button--compound.is-disabled:focus,
+.ms-Button.ms-Button--compound.is-disabled:active {
+ border-color: #f4f4f4;
+ background-color: #f4f4f4;
+}
+
+.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,
+.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,
+.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,
+.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,
+.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description {
+ color: #a6a6a6;
+}
+
+.ms-Callout {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ width: 288px;
+}
+
+.ms-Callout.is-hidden {
+ display: none;
+}
+
+.ms-Callout-header {
+ z-index: 105;
+ padding-top: 24px;
+ padding-bottom: 12px;
+ padding-left: 28px;
+ padding-right: 28px;
+}
+
+.ms-Callout-title {
+ margin: 0;
+ font-weight: 300;
+ font-size: 21px;
+}
+
+.ms-Callout-subText {
+ margin: 0;
+ font-weight: 300;
+ color: #333333;
+ font-size: 12px;
+}
+
+.ms-Callout-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: #666666;
+ z-index: 110;
+}
+
+.ms-Callout-link {
+ font-size: 14px;
+}
+
+.ms-Callout-inner {
+ height: 100%;
+ padding-top: 0;
+ padding-bottom: 12px;
+ padding-left: 28px;
+ padding-right: 28px;
+}
+
+.ms-Callout-actions {
+ position: relative;
+ margin-top: 20px;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline {
+ height: 27px;
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button {
+ height: 27px;
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label {
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon {
+ line-height: 27px;
+}
+
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button,
+.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button {
+ color: #0078d7;
+}
+
+.ms-Callout-actions .ms-Callout-button {
+ margin-right: 12px;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-header {
+ padding: 28px 24px;
+ background-color: #0078d7;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-title {
+ font-weight: 100;
+ font-size: 28px;
+ color: #ffffff;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-inner {
+ padding-top: 20px;
+}
+
+.ms-Callout.ms-Callout--OOBE .ms-Callout-subText {
+ font-size: 14px;
+}
+
+.ms-Callout.ms-Callout--actionText .ms-Callout-actions {
+ border-top: 1px solid #eaeaea;
+ padding-top: 12px;
+}
+
+.ms-Callout.ms-Callout--actionText .ms-Callout-inner {
+ padding-bottom: 12px;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-header {
+ padding-bottom: 0;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-title {
+ font-size: 14px;
+}
+
+.ms-Callout.ms-Callout--peek .ms-Callout-actions {
+ margin-top: 12px;
+ margin-bottom: -4px;
+}
+
+.ms-CheckBox {
+ box-sizing: border-box;
+ color: #333333;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-CheckBox .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.ms-CheckBox-input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ms-CheckBox-field::before {
+ content: '';
+ display: inline-block;
+ border: 2px solid #a6a6a6;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ font-weight: normal;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: background, border, border-color;
+ transition-duration: 200ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+.ms-CheckBox-field::after {
+ content: '\E73E';
+ font-family: 'FabricMDL2Icons';
+ display: none;
+ position: absolute;
+ font-weight: 900;
+ background-color: transparent;
+ font-size: 13px;
+ top: 0;
+ color: #ffffff;
+ line-height: 20px;
+ width: 20px;
+ text-align: center;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field::after {
+ color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field::after {
+ color: #ffffff;
+ }
+}
+
+.ms-CheckBox-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+}
+
+.ms-CheckBox-field:hover::before,
+.ms-CheckBox-field:focus::before {
+ border-color: #767676;
+}
+
+.ms-CheckBox-field:hover .ms-Label,
+.ms-CheckBox-field:focus .ms-Label {
+ color: #000000;
+}
+
+.ms-CheckBox-field.is-disabled {
+ cursor: default;
+}
+
+.ms-CheckBox-field.is-disabled::before {
+ background-color: #c8c8c8;
+ border-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-disabled::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-disabled::before {
+ border-color: #600000;
+ }
+}
+
+.ms-CheckBox-field.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-CheckBox-field.in-focus::before {
+ border-color: #767676;
+}
+
+.ms-CheckBox-field.in-focus.is-disabled::before {
+ border-color: #c8c8c8;
+}
+
+.ms-CheckBox-field.in-focus.is-checked::before {
+ border-color: #106ebe;
+}
+
+.ms-CheckBox-field.is-checked::before {
+ border: 10px solid #0078d7;
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-CheckBox-field.is-checked::before {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-CheckBox-field.is-checked::before {
+ border-color: #37006e;
+ }
+}
+
+.ms-CheckBox-field.is-checked::after {
+ display: block;
+}
+
+.ms-CheckBox-field.is-checked:hover::before,
+.ms-CheckBox-field.is-checked:focus::before {
+ border-color: #106ebe;
+}
+
+.ms-RadioButton {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ min-height: 36px;
+ position: relative;
+}
+
+.ms-RadioButton .ms-Label {
+ font-size: 14px;
+ padding: 0 0 0 26px;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.ms-RadioButton-input {
+ position: absolute;
+ opacity: 0;
+}
+
+.ms-RadioButton-field::before {
+ content: '';
+ display: inline-block;
+ border: 2px solid #a6a6a6;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ font-weight: normal;
+ position: absolute;
+ box-sizing: border-box;
+ transition-property: border-color;
+ transition-duration: 200ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ border-radius: 50%;
+}
+
+.ms-RadioButton-field::after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ bottom: 0;
+ right: 0;
+ transition-property: top, left, width, height;
+ transition-duration: 150ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ box-sizing: border-box;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field::after {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field::after {
+ color: #600000;
+ }
+}
+
+.ms-RadioButton-field {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+ outline: 0;
+ vertical-align: top;
+}
+
+.ms-RadioButton-field:hover::before,
+.ms-RadioButton-field:focus::before {
+ border-color: #767676;
+}
+
+.ms-RadioButton-field:hover .ms-Label,
+.ms-RadioButton-field:focus .ms-Label {
+ color: #000000;
+}
+
+.ms-RadioButton-field.is-disabled {
+ cursor: default;
+}
+
+.ms-RadioButton-field.is-disabled::before {
+ background-color: #c8c8c8;
+ border-color: #c8c8c8;
+ color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-disabled::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-disabled::before {
+ border-color: #600000;
+ }
+}
+
+.ms-RadioButton-field.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-RadioButton-field.is-disabled:hover::before,
+.ms-RadioButton-field.is-disabled:focus::before {
+ border-color: #c8c8c8;
+}
+
+.ms-RadioButton-field.in-focus::before {
+ border-color: #767676;
+}
+
+.ms-RadioButton-field.is-checked::before {
+ border: 2px solid #0078d7;
+ background-color: transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-checked::before {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-checked::before {
+ border-color: #37006e;
+ }
+}
+
+.ms-RadioButton-field.is-checked::after {
+ background-color: #0078d7;
+ top: 5px;
+ left: 5px;
+ width: 10px;
+ height: 10px;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-RadioButton-field.is-checked::after {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-RadioButton-field.is-checked::after {
+ background-color: #37006e;
+ }
+}
+
+.ms-RadioButton-field.is-checked:hover::before,
+.ms-RadioButton-field.is-checked:focus::before {
+ border-color: #0078d7;
+}
+
+.ms-RadioButton-field.is-checked.in-focus::before {
+ border-color: #0078d7;
+}
+
+.ms-ChoiceFieldGroup {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ margin-bottom: 4px;
+}
+
+.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list {
+ padding: 0;
+ margin: 0;
+}
+
+.ms-CommandBar {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: #f4f4f4;
+ height: 40px;
+ white-space: nowrap;
+ padding-left: 0;
+ border: 0;
+ position: relative;
+}
+
+.ms-CommandBar:focus {
+ outline: none;
+}
+
+.ms-CommandBar .ms-CommandButton--actionButton {
+ border-right: 1px solid #eaeaea;
+}
+
+.ms-CommandBar .ms-Button {
+ height: 100%;
+}
+
+.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon {
+ padding-right: 0;
+}
+
+.ms-CommandBar .ms-Button.is-hidden {
+ display: none;
+}
+
+.ms-CommandBar .ms-SearchBox,
+.ms-CommandBar .ms-SearchBox-field,
+.ms-CommandBar .ms-SearchBox-label {
+ height: 100%;
+}
+
+.ms-CommandBar .ms-SearchBox {
+ display: inline-block;
+ vertical-align: top;
+ transition: margin-right 0.267s;
+}
+
+.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 220px;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ z-index: 10;
+ }
+}
+
+.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button {
+ font-size: 18px;
+ padding: 0 11px;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar .ms-SearchBox {
+ margin-right: 24px;
+ }
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandBar {
+ height: 44px;
+ }
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar.search-expanded .ms-SearchBox {
+ margin-right: 8px;
+ }
+
+ .ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ transition: none;
+ }
+}
+
+.ms-CommandBar-mainArea {
+ overflow-x: hidden;
+ display: block;
+ height: 100%;
+ overflow: hidden;
+}
+
+.ms-CommandBar-sideCommands {
+ float: right;
+ text-align: right;
+ width: auto;
+ padding-right: 4px;
+ height: 100%;
+}
+
+.ms-CommandBar-sideCommands .ms-Button:last-child {
+ margin-right: 0;
+}
+
+@media only screen and (min-width: 640px) {
+ .ms-CommandBar-sideCommands {
+ min-width: 128px;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-CommandBar-sideCommands {
+ padding-right: 20px;
+ }
+}
+
+.ms-CommandButton {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ position: relative;
+ vertical-align: top;
+}
+
+.ms-CommandButton.is-hidden {
+ display: none;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button,
+.ms-CommandButton.is-disabled .ms-CommandButton-button {
+ cursor: default;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button:hover,
+.ms-CommandButton.is-disabled .ms-CommandButton-button:hover {
+ background-color: #eff6fc;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label,
+.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label {
+ color: #a6a6a6;
+}
+
+.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,
+.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon {
+ color: #a6a6a6;
+}
+
+.ms-CommandButton .ms-ContextualMenu {
+ display: none;
+}
+
+.ms-CommandButton-button,
+.ms-CommandButton-splitIcon {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ cursor: pointer;
+ display: inline-block;
+ height: 40px;
+ line-height: 40px;
+ outline: 1px solid transparent;
+ padding: 0 8px;
+ position: relative;
+ vertical-align: top;
+ background: transparent;
+}
+
+.ms-CommandButton-button:hover,
+.ms-CommandButton-splitIcon:hover {
+ background-color: #eaeaea;
+}
+
+.ms-CommandButton-button:hover .ms-CommandButton-label,
+.ms-CommandButton-splitIcon:hover .ms-CommandButton-label {
+ color: #212121;
+}
+
+.ms-CommandButton-button:active,
+.ms-CommandButton-splitIcon:active {
+ background-color: #eaeaea;
+}
+
+.ms-CommandButton-button:focus::before,
+.ms-CommandButton-splitIcon:focus::before {
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid #333333;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+.ms-CommandButton-button:focus,
+.ms-CommandButton-splitIcon:focus {
+ outline: 0;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton-button,
+ .ms-CommandButton-splitIcon {
+ height: 44px;
+ }
+
+ .ms-CommandButton-button .ms-CommandButton-icon,
+ .ms-CommandButton-splitIcon .ms-CommandButton-icon {
+ font-size: 20px;
+ }
+
+ .ms-CommandButton-button .ms-CommandButton-label,
+ .ms-CommandButton-splitIcon .ms-CommandButton-label {
+ line-height: 44px;
+ }
+}
+
+.ms-CommandButton-button {
+ border: 0;
+ margin: 0;
+}
+
+.ms-CommandButton + .ms-CommandButton {
+ margin-left: 8px;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton + .ms-CommandButton {
+ margin-left: 4px;
+ }
+}
+
+.ms-CommandButton-icon {
+ display: inline-block;
+ margin-right: 8px;
+ position: relative;
+ font-size: 16px;
+ min-width: 16px;
+ height: 100%;
+}
+
+.ms-CommandButton-icon .ms-Icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+.ms-CommandButton-label {
+ font-size: 14px;
+ font-weight: 400;
+ color: #333333;
+ line-height: 40px;
+ height: 100%;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-CommandButton-label:hover {
+ color: #212121;
+}
+
+.ms-CommandButton-dropdownIcon,
+.ms-CommandButton-splitIcon {
+ display: inline-block;
+ position: relative;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 300;
+ min-width: 12px;
+ height: 100%;
+ vertical-align: top;
+ margin-left: 8px;
+}
+
+.ms-CommandButton-dropdownIcon .ms-Icon,
+.ms-CommandButton-splitIcon .ms-Icon {
+ line-height: normal;
+ padding-top: 16px;
+}
+
+.ms-CommandButton-dropdownIcon:focus::before,
+.ms-CommandButton-splitIcon:focus::before {
+ top: 3px;
+ left: 3px;
+ right: 3px;
+ bottom: 3px;
+ border: 1px solid #333333;
+ position: absolute;
+ z-index: 10;
+ content: '';
+ outline: none;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-CommandButton-dropdownIcon,
+ .ms-CommandButton-splitIcon {
+ display: none;
+ }
+}
+
+.ms-CommandButton-splitIcon {
+ margin-left: -2px;
+ width: 27px;
+ border: 0;
+}
+
+.ms-CommandButton-splitIcon .ms-Icon {
+ margin-left: -1px;
+ position: relative;
+ padding-top: 16px;
+}
+
+.ms-CommandButton-splitIcon .ms-Icon::after {
+ position: absolute;
+ content: ' ';
+ width: 1px;
+ height: 16px;
+ top: 12px;
+ left: -8px;
+ border-left: 1px solid #c8c8c8;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon {
+ margin-right: 0;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label {
+ display: none;
+}
+
+.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button {
+ padding: 0 12px;
+}
+
+.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button {
+ background: none;
+}
+
+.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button {
+ width: 50px;
+ height: 40px;
+}
+
+.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: 16px;
+ height: 16px;
+ padding-right: 0;
+}
+
+.ms-CommandButton.ms-CommandButton--pivot.is-active::before {
+ content: '';
+ height: 2px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ background-color: #0078d7;
+ bottom: 0;
+ z-index: 5;
+}
+
+.ms-CommandButton.ms-CommandButton--pivot:hover::before {
+ content: '';
+ height: 2px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ background-color: #0078d7;
+ bottom: 0;
+ z-index: 5;
+}
+
+.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label,
+.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label {
+ display: inline-block;
+}
+
+@media only screen and (max-width: 479px) {
+ .ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label,
+ .ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label {
+ font-size: 16px;
+ }
+}
+
+.ms-ContextualMenu {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ display: block;
+ min-width: 180px;
+ max-width: 220px;
+ list-style-type: none;
+ position: relative;
+ background-color: #ffffff;
+}
+
+.ms-ContextualMenu.is-hidden {
+ display: none;
+}
+
+.ms-ContextualMenu-item {
+ position: relative;
+}
+
+.ms-ContextualMenu-link {
+ box-sizing: border-box;
+ text-decoration: none;
+ color: #333333;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ overflow: hidden;
+ line-height: 34px;
+ padding: 0 16px 0 25px;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ms-ContextualMenu-link:hover,
+.ms-ContextualMenu-link:active,
+.ms-ContextualMenu-link:focus {
+ background-color: #f4f4f4;
+ color: #212121;
+}
+
+.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon {
+ color: #212121;
+}
+
+.ms-ContextualMenu-link:focus {
+ outline: transparent;
+ border: 1px solid #666666;
+}
+
+.ms-ContextualMenu-link.is-selected {
+ background-color: #dadada;
+ color: #000000;
+ font-weight: 600;
+}
+
+.ms-ContextualMenu-link.is-selected ~ .ms-ContextualMenu-subMenuIcon {
+ color: #000000;
+}
+
+.ms-ContextualMenu-link.is-selected:hover {
+ background-color: #d0d0d0;
+}
+
+.ms-ContextualMenu-link.is-disabled {
+ color: #a6a6a6;
+ background-color: #ffffff;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu-link.is-disabled:active,
+.ms-ContextualMenu-link.is-disabled:focus {
+ border-color: #ffffff;
+}
+
+.ms-ContextualMenu-link.is-disabled .ms-Icon {
+ color: #a6a6a6;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
+ cursor: default;
+ display: block;
+ height: 1px;
+ background-color: #eaeaea;
+ position: relative;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ color: #0078d7;
+ font-size: 12px;
+ text-transform: uppercase;
+ height: 36px;
+ line-height: 36px;
+ padding: 0 18px;
+}
+
+.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu {
+ position: absolute;
+ top: -1px;
+ left: 178px;
+}
+
+.ms-ContextualMenu-subMenuIcon,
+.ms-ContextualMenu-caretRight {
+ color: #333333;
+ font-size: 8px;
+ font-weight: 600;
+ width: 24px;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header {
+ padding: 0 16px 0 26px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected {
+ background-color: #ffffff;
+ font-weight: 600;
+ color: #333333;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ color: #333333;
+ content: '\E73E';
+ font-size: 10px;
+ font-weight: 800;
+ height: 36px;
+ line-height: 36px;
+ position: absolute;
+ left: 7px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus {
+ color: #212121;
+ background-color: #f4f4f4;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover::after,
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus::after {
+ color: #212121;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active {
+ color: #000000;
+ background-color: #d0d0d0;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active::after {
+ color: #000000;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link,
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link {
+ padding-left: 40px;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon,
+.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon {
+ position: absolute;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ width: 40px;
+ text-align: center;
+}
+
+.ms-ContextualMenu.ms-ContextualMenu--hasIcons {
+ width: 220px;
+}
+
+.ms-DatePicker {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: 17px;
+ z-index: 300;
+}
+
+.ms-DatePicker .ms-TextField {
+ position: relative;
+}
+
+.ms-DatePicker-picker {
+ color: #000000;
+ font-size: 14px;
+ position: relative;
+ text-align: left;
+ z-index: 0;
+}
+
+.ms-DatePicker-event {
+ color: #666666;
+ font-size: 21px;
+ line-height: 20px;
+ pointer-events: none;
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ z-index: 5;
+}
+
+.ms-DatePicker-holder {
+ -webkit-overflow-scrolling: touch;
+ box-sizing: border-box;
+ background: #ffffff;
+ position: absolute;
+ min-width: 300px;
+ display: none;
+}
+
+.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder {
+ animation-name: fadeIn, slideDownIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+ box-sizing: border-box;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ border: 1px solid #eaeaea;
+ display: block;
+}
+
+.ms-DatePicker-picker--opened {
+ position: relative;
+ z-index: 10;
+}
+
+.ms-DatePicker-frame {
+ padding: 1px;
+}
+
+.ms-DatePicker-wrap {
+ margin: -1px;
+ padding: 9px;
+}
+
+.ms-DatePicker-dayPicker {
+ display: block;
+ margin-bottom: 30px;
+}
+
+.ms-DatePicker-header {
+ height: 40px;
+ line-height: 44px;
+}
+
+.ms-DatePicker-month,
+.ms-DatePicker-year {
+ display: inline-block;
+ font-weight: 100;
+ font-size: 21px;
+ color: #0078d7;
+ margin-top: -1px;
+}
+
+.ms-DatePicker-month:hover,
+.ms-DatePicker-year:hover {
+ color: #005a9e;
+ cursor: pointer;
+}
+
+.ms-DatePicker-month {
+ margin-left: 15px;
+}
+
+.ms-DatePicker-year {
+ margin-left: 5px;
+}
+
+.ms-DatePicker-table {
+ text-align: center;
+ border-collapse: collapse;
+ border-spacing: 0;
+ table-layout: fixed;
+ font-size: inherit;
+}
+
+.ms-DatePicker-table td {
+ margin: 0;
+ padding: 0;
+}
+
+.ms-DatePicker-table td:hover {
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-day,
+.ms-DatePicker-weekday {
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ line-height: 40px;
+ font-weight: 400;
+ font-size: 15px;
+ color: #333333;
+}
+
+.ms-DatePicker-day--today {
+ position: relative;
+ background-color: #b3d6f2;
+}
+
+.ms-DatePicker-day--disabled::before {
+ border-top-color: #a6a6a6;
+}
+
+.ms-DatePicker-day--outfocus {
+ color: #a6a6a6;
+ font-weight: 400;
+}
+
+.ms-DatePicker-day--infocus:hover,
+.ms-DatePicker-day--outfocus:hover {
+ cursor: pointer;
+ color: #000000;
+ background: #eaeaea;
+}
+
+.ms-DatePicker-day--highlighted:hover,
+.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted {
+ cursor: pointer;
+ color: #ffffff;
+ background: #0078d7;
+}
+
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,
+.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover {
+ background: #a6a6a6;
+}
+
+.ms-DatePicker-monthPicker,
+.ms-DatePicker-yearPicker {
+ display: none;
+}
+
+.ms-DatePicker-monthComponents {
+ position: absolute;
+ top: 9px;
+ right: 9px;
+ left: 9px;
+}
+
+.ms-DatePicker-yearComponents,
+.ms-DatePicker-decadeComponents {
+ position: absolute;
+ right: 10px;
+}
+
+.ms-DatePicker-prevMonth,
+.ms-DatePicker-nextMonth,
+.ms-DatePicker-prevYear,
+.ms-DatePicker-nextYear,
+.ms-DatePicker-prevDecade,
+.ms-DatePicker-nextDecade {
+ width: 40px;
+ height: 40px;
+ display: block;
+ float: right;
+ margin-left: 10px;
+ text-align: center;
+ line-height: 40px;
+ font-size: 21px;
+ color: #666666;
+ position: relative;
+ top: 3px;
+}
+
+.ms-DatePicker-prevMonth:hover,
+.ms-DatePicker-nextMonth:hover,
+.ms-DatePicker-prevYear:hover,
+.ms-DatePicker-nextYear:hover,
+.ms-DatePicker-prevDecade:hover,
+.ms-DatePicker-nextDecade:hover {
+ color: #212121;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-headerToggleView {
+ height: 40px;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 140px;
+ z-index: 5;
+ cursor: pointer;
+}
+
+.ms-DatePicker-currentYear,
+.ms-DatePicker-currentDecade {
+ display: block;
+ font-weight: 300;
+ font-size: 21px;
+ height: 40px;
+ line-height: 42px;
+ margin-left: 15px;
+}
+
+.ms-DatePicker-currentYear {
+ color: #0078d7;
+}
+
+.ms-DatePicker-currentYear:hover {
+ color: #005a9e;
+ cursor: pointer;
+}
+
+.ms-DatePicker-optionGrid {
+ position: relative;
+ height: 210px;
+ width: 280px;
+ margin: 10px 0 30px 5px;
+}
+
+.ms-DatePicker-monthOption,
+.ms-DatePicker-yearOption {
+ background-color: #f4f4f4;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ cursor: pointer;
+ float: left;
+ margin: 0 10px 10px 0;
+ font-weight: 400;
+ font-size: 13px;
+ color: #333333;
+ text-align: center;
+}
+
+.ms-DatePicker-monthOption:hover,
+.ms-DatePicker-yearOption:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker-monthOption.is-highlighted,
+.ms-DatePicker-yearOption.is-highlighted {
+ background-color: #333333;
+ color: #ffffff;
+}
+
+.ms-DatePicker-goToday {
+ bottom: 9px;
+ color: #0078d7;
+ cursor: pointer;
+ font-weight: 300;
+ font-size: 13px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ position: absolute;
+ right: 9px;
+}
+
+.ms-DatePicker-goToday:hover {
+ outline: 1px solid transparent;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: none;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+}
+
+.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+}
+
+@media (min-width: 460px) {
+ .ms-DatePicker-holder {
+ width: 440px;
+ }
+
+ .ms-DatePicker-month,
+ .ms-DatePicker-year {
+ font-weight: 300;
+ font-size: 17px;
+ color: #333333;
+ }
+
+ .ms-DatePicker-month:hover,
+ .ms-DatePicker-year:hover {
+ color: #333333;
+ cursor: default;
+ }
+
+ .ms-DatePicker-header {
+ height: 30px;
+ line-height: 28px;
+ }
+
+ .ms-DatePicker-dayPicker {
+ box-sizing: border-box;
+ border-right: 1px solid #eaeaea;
+ width: 220px;
+ margin: -10px 0;
+ padding: 10px 0;
+ }
+
+ .ms-DatePicker-monthPicker {
+ display: block;
+ }
+
+ .ms-DatePicker-monthPicker,
+ .ms-DatePicker-yearPicker {
+ top: 9px;
+ left: 238px;
+ position: absolute;
+ }
+
+ .ms-DatePicker-optionGrid {
+ width: 200px;
+ height: auto;
+ margin: 10px 0 0;
+ }
+
+ .ms-DatePicker-monthComponents {
+ width: 210px;
+ }
+
+ .ms-DatePicker-month {
+ margin-left: 12px;
+ }
+
+ .ms-DatePicker-day,
+ .ms-DatePicker-weekday {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ font-weight: 600;
+ font-size: 12px;
+ }
+
+ .ms-DatePicker-prevMonth,
+ .ms-DatePicker-nextMonth,
+ .ms-DatePicker-prevYear,
+ .ms-DatePicker-nextYear,
+ .ms-DatePicker-prevDecade,
+ .ms-DatePicker-nextDecade {
+ font-size: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 29px;
+ }
+
+ .ms-DatePicker-toggleMonthView {
+ display: none;
+ }
+
+ .ms-DatePicker-currentYear,
+ .ms-DatePicker-currentDecade {
+ font-size: 17px;
+ margin: 0;
+ height: 30px;
+ line-height: 26px;
+ padding: 0 10px;
+ display: inline-block;
+ }
+
+ .ms-DatePicker-monthOption,
+ .ms-DatePicker-yearOption {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ font-size: 12px;
+ margin: 0 10px 10px 0;
+ }
+
+ .ms-DatePicker-monthOption:hover,
+ .ms-DatePicker-yearOption:hover {
+ outline: 1px solid transparent;
+ }
+
+ .ms-DatePicker-goToday {
+ box-sizing: border-box;
+ font-size: 12px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ right: 10px;
+ text-align: right;
+ top: 199px;
+ width: 210px;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents {
+ display: block;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker {
+ display: block;
+ }
+}
+
+@media (max-width: 459px) {
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents {
+ display: none;
+ }
+
+ .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker {
+ display: block;
+ }
+}
+
+.ms-DetailsList {
+ position: relative;
+}
+
+.ms-DetailsList.is-horizontalConstrained {
+ overflow-x: auto;
+ overflow-y: inherit;
+}
+
+.ms-DetailsList-cell {
+ word-break: break-word;
+}
+
+.ms-DetailsHeader {
+ display: inline-block;
+ min-width: 100%;
+ height: 36px;
+ line-height: 36px;
+ white-space: nowrap;
+ padding-bottom: 1px;
+ border-bottom: 1px solid #eaeaea;
+ margin-bottom: 1px;
+ cursor: default;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-DetailsHeader.is-singleSelect {
+ padding-left: 40px;
+}
+
+.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover {
+ background: transparent;
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ cursor: col-resize;
+}
+
+.ms-DetailsHeader-cell.is-check .ms-Check-circle {
+ visibility: hidden;
+}
+
+.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,
+.ms-DetailsHeader.is-allSelected .ms-Check-circle {
+ visibility: visible;
+}
+
+.ms-DetailsHeader-cellWrapper {
+ display: inline-block;
+ position: relative;
+}
+
+.ms-DetailsHeader-cellSizeWrapper {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 16px;
+}
+
+.ms-DetailsHeader-cellSizeWrapper:last-child {
+ margin-right: 0;
+}
+
+.ms-DetailsHeader-filterChevron.ms-Icon {
+ color: #a6a6a6;
+ padding-left: 4px;
+ vertical-align: middle;
+}
+
+.ms-DetailsHeader-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ color: #a6a6a6;
+ border: 0;
+ background: none;
+ line-height: inherit;
+ margin: 0;
+ font-size: inherit;
+ font-family: inherit;
+ text-align: left;
+ height: 36px;
+ vertical-align: top;
+}
+
+.ms-DetailsHeader-cell.is-check {
+ position: relative;
+ padding: 8px 10px;
+ margin: 0;
+}
+
+.ms-DetailsHeader-cell:focus {
+ outline: transparent;
+}
+
+.ms-DetailsHeader-cell.is-sortable {
+ color: #000000;
+ cursor: default;
+}
+
+.ms-DetailsHeader-cell.is-sortable:hover {
+ background-color: #eaeaea;
+}
+
+.ms-DetailsHeader-cell.is-filter {
+ position: absolute;
+ right: 0;
+ width: 20px;
+ top: 0;
+ bottom: 0;
+ padding: 0;
+ text-align: center;
+ color: #000000;
+}
+
+.ms-DetailsHeader-cell.is-filter:hover {
+ background-color: #eaeaea;
+}
+
+.ms-DetailsHeader-cell.is-filter::before {
+ content: '';
+ position: absolute;
+ border-left: 1px solid #a6a6a6;
+ top: 10px;
+ bottom: 10px;
+ left: 0;
+}
+
+.ms-DetailsHeader-cell.is-sizer {
+ position: absolute;
+ width: 16px;
+ cursor: col-resize;
+ bottom: 0;
+ top: 0;
+ height: inherit;
+ z-index: 99;
+}
+
+.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow {
+ display: inline;
+}
+
+.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow {
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-DetailsHeader-cell.is-resizing.is-sizer::after,
+.ms-DetailsHeader-cell.is-sizer:hover::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background: #eaeaea;
+ border: 1px solid #ffffff;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before,
+.ms-DetailsHeader-cell:focus::before {
+ content: '';
+ pointer-events: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #a6a6a6;
+}
+
+.ms-DetailsHeader-sortArrow.ms-Icon {
+ font-size: 12px;
+ margin-right: 4px;
+ display: none;
+ color: #a6a6a6;
+}
+
+.ms-DetailsRow {
+ position: relative;
+ display: inline-block;
+ min-width: 100%;
+ min-height: 36px;
+ vertical-align: top;
+ white-space: nowrap;
+ padding: 10px 0;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+ box-sizing: border-box;
+}
+
+.ms-DetailsRow:focus {
+ outline: transparent;
+}
+
+.ms-DetailsRow.ms-DetailsRow.is-selected {
+ background: #deecf9;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover,
+.ms-DetailsRow:hover {
+ background: #eff6fc;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover,
+.ms-DetailsRow.is-selected:hover {
+ background: #b3d6f2;
+}
+
+.ms-DetailsRow-cell {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 8px;
+ vertical-align: top;
+ white-space: normal;
+ word-break: break-word;
+ margin-right: 16px;
+}
+
+.ms-DetailsRow-cell.is-clipped {
+ overflow: hidden;
+}
+
+.ms-DetailsRow-cell:last-child {
+ margin-right: 0;
+}
+
+.ms-DetailsRow-cellIcon {
+ display: inline-block;
+ margin-right: 6px;
+ position: relative;
+ bottom: -2px;
+}
+
+.ms-DetailsRow-check {
+ display: inline-block;
+ cursor: default;
+ padding: 10px;
+ margin: -10px 0;
+ box-sizing: border-box;
+ vertical-align: top;
+ background: none;
+ border: 0;
+ visibility: hidden;
+}
+
+.ms-DetailsRow-check:focus {
+ outline: transparent;
+}
+
+.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-DetailsRow:hover .ms-DetailsRow-check,
+.ms-DetailsRow.is-selected .ms-DetailsRow-check {
+ visibility: visible;
+}
+
+.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox,
+.ms-DetailsRow:focus .ms-DetailsRow-focusBox {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border: 1px solid #a6a6a6;
+}
+
+.ms-DetailsRow-cellMeasurer {
+ position: absolute;
+ visibility: hidden;
+ white-space: nowrap;
+ top: -1000000000;
+}
+
+.ms-Check {
+ display: inline-block;
+ cursor: default;
+ line-height: 0;
+ vertical-align: top;
+}
+
+.ms-Check.is-checked .ms-Check-circle {
+ fill: #0078d7;
+ stroke: #ffffff;
+ stroke-width: 1px;
+}
+
+.ms-Check.is-checked .ms-Check-check {
+ stroke: #ffffff;
+}
+
+.ms-Check-circle {
+ fill: #ffffff;
+ stroke: #c8c8c8;
+}
+
+.ms-Check-check {
+ stroke: #c8c8c8;
+}
+
+.ms-Dialog {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ height: auto;
+ min-width: 220px;
+ max-width: 340px;
+ padding: 28px 24px;
+ z-index: 10;
+ position: fixed;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ left: 50%;
+ top: 50%;
+}
+
+.ms-Dialog.is-open {
+ display: block;
+}
+
+.ms-Dialog-title {
+ font-size: 21px;
+ font-weight: 100;
+ margin-bottom: 24px;
+}
+
+.ms-Dialog-content {
+ position: relative;
+}
+
+.ms-Dialog-subText {
+ color: #333333;
+ font-size: 12px;
+ font-weight: 300;
+ line-height: 1.5;
+}
+
+.ms-Dialog-actions {
+ margin-top: 24px;
+ text-align: right;
+}
+
+.ms-Dialog--multiline .ms-Dialog-title {
+ font-size: 28px;
+}
+
+.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 28px;
+ font-weight: 100;
+ padding: 28px 24px;
+ margin-top: -28px;
+ margin-left: -24px;
+ margin-right: -24px;
+}
+
+.ms-Dialog-buttonClose {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ margin: 0;
+ padding: 4px;
+ position: absolute;
+ right: 12px;
+ top: 12px;
+ z-index: 10;
+}
+
+.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel {
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Button.ms-Button--compound:not(:last-child) {
+ margin-bottom: 20px;
+}
+
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title {
+ margin-right: 20px;
+}
+
+.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose {
+ display: block;
+}
+
+@media (min-width: 480px) {
+ .ms-Dialog-main {
+ width: auto;
+ min-width: 288px;
+ max-width: 340px;
+ }
+}
+
+.ms-Dropdown {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 10px;
+ position: relative;
+ outline: 0;
+}
+
+.ms-Dropdown:hover .ms-Dropdown-title,
+.ms-Dropdown:hover .ms-Dropdown-caretDown,
+.ms-Dropdown:focus .ms-Dropdown-title,
+.ms-Dropdown:focus .ms-Dropdown-caretDown,
+.ms-Dropdown:active .ms-Dropdown-title,
+.ms-Dropdown:active .ms-Dropdown-caretDown {
+ color: #000000;
+}
+
+.ms-Dropdown:hover .ms-Dropdown-title,
+.ms-Dropdown:active .ms-Dropdown-title {
+ border-color: #767676;
+}
+
+.ms-Dropdown:focus .ms-Dropdown-title {
+ border-color: #0078d7;
+}
+
+.ms-Dropdown .ms-Label {
+ display: inline-block;
+ margin-bottom: 8px;
+}
+
+.ms-Dropdown.is-disabled .ms-Dropdown-title {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ color: #a6a6a6;
+ cursor: default;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-title {
+ border-color: #00ff00;
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-title {
+ border-color: #600000;
+ color: #600000;
+ }
+}
+
+.ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown.is-disabled .ms-Dropdown-caretDown {
+ color: #600000;
+ }
+}
+
+.ms-Dropdown.is-open .ms-Dropdown-items {
+ display: block;
+ position: absolute;
+}
+
+.ms-Panel .ms-Dropdown-items {
+ box-shadow: none;
+ overflow-y: auto;
+ padding-top: 4px;
+ max-height: 100%;
+}
+
+.ms-Panel .ms-Dropdown-items .ms-Dropdown-item {
+ padding: 7px 16px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Panel .ms-Dropdown-items::before {
+ content: none;
+ border: 0;
+}
+
+.ms-Dropdown-select {
+ display: none;
+}
+
+.ms-Dropdown-caretDown {
+ color: #212121;
+ font-size: 12px;
+ position: absolute;
+ right: 13px;
+ bottom: 9px;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.ms-Dropdown-title {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background: #ffffff;
+ border: 1px solid #c8c8c8;
+ cursor: pointer;
+ display: block;
+ height: 32px;
+ padding: 5px 32px 0 10px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-Dropdown-title.ms-Dropdown-truncator {
+ height: auto;
+ display: block;
+ position: absolute;
+ visibility: hidden;
+}
+
+.ms-Dropdown-items {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ display: none;
+ list-style-type: none;
+ position: absolute;
+ width: 100%;
+ max-height: 200px;
+ z-index: 400;
+ overflow-y: scroll;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ max-width: 100%;
+}
+
+.ms-Dropdown-items::before {
+ content: '';
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 1px solid #eaeaea;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-items {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-items {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Dropdown-item {
+ box-sizing: border-box;
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ padding: 7px 10px;
+ position: relative;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item {
+ border-color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:hover {
+ background-color: #eaeaea;
+ color: #000000;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item:hover {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item:hover:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item:hover {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-Dropdown-item:active {
+ background-color: #eaeaea;
+ border-color: #0078d7;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-disabled {
+ background: #ffffff;
+ color: #a6a6a6;
+ cursor: default;
+}
+
+.ms-Dropdown-item.is-selected,
+.ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #b3d6f2;
+ color: #000000;
+}
+
+.ms-Dropdown-item.is-selected:hover,
+.ms-Dropdown-item.ms-Dropdown-item--selected:hover {
+ background-color: #b3d6f2;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #1aebff;
+ border-color: #1aebff;
+ color: #000000;
+ }
+
+ .ms-Dropdown-item.is-selected:focus,
+ .ms-Dropdown-item.ms-Dropdown-item--selected:focus {
+ border-color: #000000;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Dropdown-item.is-selected,
+ .ms-Dropdown-item.ms-Dropdown-item--selected {
+ background-color: #37006e;
+ border-color: #37006e;
+ color: #ffffff;
+ }
+}
+
+.ms-FacePile {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ height: 32px;
+ width: auto;
+}
+
+.ms-FacePile .ms-FacePile-personaCardHost {
+ display: none;
+}
+
+.ms-FacePile-addButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 32px;
+ width: 32px;
+ line-height: 32px;
+ text-align: center;
+ float: left;
+ padding: 0;
+ margin-right: 4px;
+ outline: transparent;
+ border-radius: 50%;
+ vertical-align: top;
+}
+
+.ms-FacePile-addButton .ms-Persona-presence,
+.ms-FacePile-addButton .ms-Persona-details {
+ display: none;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-size: 16px;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover,
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus {
+ background-color: #005a9e;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active {
+ background-color: #004578;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled {
+ background-color: #c8c8c8;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow {
+ background-color: #eaeaea;
+ color: #666666;
+ display: none;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active {
+ display: block;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover {
+ color: #212121;
+}
+
+.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled {
+ color: #c8c8c8;
+}
+
+.ms-FacePile-addPersonIcon {
+ position: relative;
+ top: -1px;
+}
+
+.ms-FacePile-overflowText {
+ font-size: 14px;
+}
+
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction {
+ display: none;
+}
+
+.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ line-height: 82px;
+ height: 74px;
+ text-transform: none;
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Link {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+ outline: none;
+}
+
+.ms-Link:hover,
+.ms-Link:focus {
+ color: #004578;
+}
+
+.ms-Link:active {
+ color: #0078d7;
+}
+
+.ms-List {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ list-style-type: none;
+}
+
+.ms-ListItem {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ *zoom: 1;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ padding: 9px 28px 3px;
+ position: relative;
+ display: block;
+}
+
+.ms-ListItem::before,
+.ms-ListItem::after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-ListItem::after {
+ clear: both;
+}
+
+.ms-ListItem-primaryText,
+.ms-ListItem-secondaryText,
+.ms-ListItem-tertiaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+}
+
+.ms-ListItem-primaryText {
+ color: #212121;
+ font-weight: 300;
+ font-size: 21px;
+ padding-right: 80px;
+ position: relative;
+ top: -4px;
+}
+
+.ms-ListItem-secondaryText {
+ color: #333333;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 25px;
+ position: relative;
+ top: -7px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-tertiaryText {
+ color: #767676;
+ font-weight: 300;
+ font-size: 14px;
+ position: relative;
+ top: -9px;
+ margin-bottom: -4px;
+ padding-right: 30px;
+}
+
+.ms-ListItem-metaText {
+ color: #333333;
+ font-weight: 300;
+ font-size: 11px;
+ position: absolute;
+ right: 30px;
+ top: 39px;
+}
+
+.ms-ListItem-image {
+ float: left;
+ height: 70px;
+ margin-left: -8px;
+ margin-right: 10px;
+ width: 70px;
+ background-color: #333333;
+}
+
+.ms-ListItem-selectionTarget {
+ display: none;
+}
+
+.ms-ListItem-actions {
+ max-width: 80px;
+ position: absolute;
+ right: 30px;
+ text-align: right;
+ top: 10px;
+}
+
+.ms-ListItem-action {
+ color: #a6a6a6;
+ display: inline-block;
+ font-size: 15px;
+ position: relative;
+ text-align: center;
+ top: 3px;
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+}
+
+.ms-ListItem-action .ms-Icon {
+ vertical-align: top;
+}
+
+.ms-ListItem-action:hover {
+ color: #666666;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-unread {
+ border-left: 3px solid #0078d7;
+ padding-left: 27px;
+}
+
+.ms-ListItem.is-unread .ms-ListItem-secondaryText,
+.ms-ListItem.is-unread .ms-ListItem-metaText {
+ color: #0078d7;
+ font-weight: 600;
+}
+
+.ms-ListItem.is-unseen::after {
+ border-right: 10px solid transparent;
+ border-top: 10px solid #0078d7;
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-selectionTarget {
+ display: block;
+ height: 20px;
+ left: 6px;
+ position: absolute;
+ top: 13px;
+ width: 20px;
+}
+
+.ms-ListItem.is-selectable .ms-ListItem-image {
+ margin-left: 0;
+}
+
+.ms-ListItem.is-selectable:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.is-selectable:hover::before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ position: absolute;
+ top: 14px;
+ left: 7px;
+ height: 15px;
+ width: 15px;
+ border: 1px solid #767676;
+}
+
+.ms-ListItem.is-selected::before {
+ border: 1px solid transparent;
+}
+
+.ms-ListItem.is-selected::before,
+.ms-ListItem.is-selected:hover::before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\e73A';
+ font-size: 17px;
+ color: #767676;
+ position: absolute;
+ top: 23px;
+ left: 7px;
+ border: 0;
+}
+
+.ms-ListItem.is-selected:hover {
+ background-color: #b3d6f2;
+ outline: 1px solid transparent;
+}
+
+.ms-ListItem.ms-ListItem--document {
+ padding: 0;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon {
+ width: 70px;
+ height: 70px;
+ float: left;
+ text-align: center;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon {
+ font-size: 38px;
+ line-height: 70px;
+ color: #666666;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 14px;
+ padding-top: 15px;
+ padding-right: 0;
+ position: static;
+}
+
+.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #666666;
+ font-weight: 400;
+ font-size: 11px;
+ padding-top: 6px;
+}
+
+.ms-MessageBanner {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ position: relative;
+ border-bottom: 1px solid #767676;
+ background-color: #eff6fc;
+ min-width: 320px;
+ width: 100%;
+ height: 52px;
+ text-align: center;
+ overflow: hidden;
+ animation-name: fadeIn, slideDownIn20;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner .ms-Icon {
+ font-size: 16px;
+}
+
+.ms-MessageBanner.hide {
+ animation-name: fadeOut, slideUpOut20;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-MessageBanner.is-hidden {
+ display: none;
+}
+
+.ms-MessageBanner-expand,
+.ms-MessageBanner-close {
+ height: 52px;
+ width: 40px;
+ cursor: pointer;
+ border: 0;
+ background-color: transparent;
+}
+
+.ms-MessageBanner-close {
+ position: absolute;
+ right: 0;
+ top: 0;
+ line-height: 52px;
+ color: #666666;
+}
+
+.ms-MessageBanner-text {
+ display: inline-block;
+ padding: 18px 0;
+ margin-left: 0;
+ max-width: 770px;
+ overflow: hidden;
+ text-align: left;
+}
+
+.ms-MessageBanner-expand {
+ display: none;
+ vertical-align: top;
+}
+
+.ms-MessageBanner-expand.is-visible {
+ display: inline-block;
+}
+
+.ms-MessageBanner-action {
+ display: inline-block;
+ vertical-align: top;
+ margin-top: 10px;
+ margin-left: 10px;
+ padding-right: 36px;
+}
+
+.ms-MessageBanner-action .ms-Button {
+ color: #ffffff;
+}
+
+.ms-MessageBanner-clipper {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ms-MessageBanner.is-expanded {
+ height: auto;
+}
+
+.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper {
+ white-space: normal;
+}
+
+@media screen and (max-width: 479px) {
+ .ms-MessageBanner-action {
+ margin: 0;
+ display: block;
+ text-align: right;
+ padding: 0 10px 10px 0;
+ }
+
+ .ms-MessageBanner-text {
+ margin-left: -25px;
+ padding: 18px 0 10px;
+ min-width: 240px;
+ }
+
+ .ms-MessageBanner-expand {
+ display: inline-block;
+ padding: 0;
+ margin-left: -5px;
+ width: 20px;
+ }
+
+ .ms-MessageBanner-expand .ms-Icon {
+ color: #0078d7;
+ }
+}
+
+.ms-ContextualHost {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ z-index: 10;
+ margin: 16px auto;
+ position: relative;
+ min-width: 10px;
+ display: none;
+ background-color: #ffffff;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+}
+
+.ms-ContextualHost.is-positioned {
+ position: absolute;
+ margin: 0;
+}
+
+.ms-ContextualHost.is-open {
+ display: inline-block;
+}
+
+.ms-ContextualHost-beak {
+ box-shadow: 0 0 15px -5px #3c3c3c;
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ background: #ffffff;
+ border: 1px solid #eaeaea;
+ box-sizing: border-box;
+ top: -6px;
+ display: none;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ z-index: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,
+.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ top: 40px;
+ display: none;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak {
+ left: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak {
+ right: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak {
+ display: block;
+ top: -10px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak {
+ display: block;
+ bottom: -10px;
+}
+
+.ms-ContextualHost-main {
+ position: relative;
+ background-color: #ffffff;
+ box-sizing: border-box;
+ outline: 1px solid transparent;
+ z-index: 5;
+ min-height: 10px;
+}
+
+.ms-ContextualHost-close {
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 8px;
+ width: 32px;
+ height: 32px;
+ font-size: 14px;
+ color: #666666;
+ z-index: 10;
+}
+
+.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title {
+ margin-right: 20px;
+}
+
+.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak {
+ background-color: #0078d7;
+}
+
+@media (min-width: 480px) {
+ .ms-ContextualHost {
+ margin: 16px;
+ }
+
+ .ms-ContextualHost.is-positioned {
+ margin: 0;
+ }
+
+ .ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak,
+ .ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak {
+ display: block;
+ }
+}
+
+.ms-MessageBar {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ padding: 8px;
+ display: table;
+ background-color: #f4f4f4;
+}
+
+.ms-MessageBar .ms-Link {
+ font-size: 12px;
+}
+
+.ms-MessageBar-icon,
+.ms-MessageBar-text {
+ display: table-cell;
+ vertical-align: top;
+}
+
+.ms-MessageBar-icon {
+ padding-right: 8px;
+ font-size: 16px;
+ color: #767676;
+}
+
+.ms-MessageBar-text {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 12px;
+ font-weight: 400;
+}
+
+.ms-MessageBar.ms-MessageBar--warning {
+ background-color: #fff4ce;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning {
+ background-color: #fed9cc;
+}
+
+.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon {
+ color: #d83b01;
+}
+
+.ms-MessageBar.ms-MessageBar--error {
+ background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon {
+ color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--blocked {
+ background-color: #fde7e9;
+}
+
+.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon {
+ color: #a80000;
+}
+
+.ms-MessageBar.ms-MessageBar--success {
+ background-color: #dff6dd;
+}
+
+.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon {
+ color: #107c10;
+}
+
+.ms-OrgChart {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-OrgChart-groupTitle {
+ color: #666666;
+ line-height: 1;
+}
+
+.ms-OrgChart-list {
+ padding: 0;
+ margin: 12px 0 16px;
+}
+
+.ms-OrgChart-listItem {
+ height: 50px;
+ width: 100%;
+ position: relative;
+ list-style: none;
+ margin-bottom: 8px;
+}
+
+.ms-OrgChart-listItemBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 50px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0;
+ padding: 0;
+}
+
+.ms-Overlay {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: rgba(255, 255, 255, 0.4);
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ z-index: 0;
+ display: none;
+}
+
+.ms-Overlay.is-visible {
+ display: block;
+}
+
+.ms-Overlay--dark {
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.ms-u-overflowHidden {
+ overflow: hidden;
+}
+
+.ms-Panel {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ background-color: #ffffff;
+ width: 100%;
+ max-width: 340px;
+ box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2);
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ display: none;
+ height: 100%;
+}
+
+.ms-Panel.animate-in {
+ animation-name: fadeIn, slideLeftIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-Panel.animate-out {
+ animation-name: fadeOut, slideRightOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-Panel.is-open {
+ display: block;
+}
+
+.ms-Panel .ms-CommandBar {
+ padding-right: 0;
+ padding-left: 8px;
+}
+
+.ms-Panel.ms-Panel--md {
+ max-width: 340px;
+}
+
+.ms-Panel.ms-Panel--lg {
+ max-width: 644px;
+}
+
+.ms-Panel.ms-Panel--xl {
+ max-width: 940px;
+}
+
+.ms-Panel.ms-Panel--xxl {
+ max-width: 1192px;
+}
+
+.ms-Panel--left {
+ box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2);
+ left: 0;
+ right: auto;
+}
+
+.ms-Panel--left.animate-in {
+ animation-name: fadeIn, slideRightIn40;
+ -webkit-animation-duration: 0.367s;
+ -moz-animation-duration: 0.367s;
+ -ms-animation-duration: 0.367s;
+ -o-animation-duration: 0.367s;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+.ms-Panel--left.animate-out {
+ animation-name: fadeOut, slideLeftOut40;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+}
+
+.ms-Panel-closeButton {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 6px;
+ top: 0;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ outline: 0;
+ padding: 0;
+ color: #666666;
+ font-size: 16px;
+}
+
+.ms-Panel-closeButton:hover {
+ color: #333333;
+}
+
+.ms-Panel-closeButton .ms-Icon--Cancel {
+ margin-top: 2px;
+}
+
+@media (max-width: 639px) {
+ .ms-Panel-closeButton {
+ font-size: 20px;
+ line-height: 20px;
+ height: 44px;
+ right: 4px;
+ }
+}
+
+.ms-Panel-contentInner {
+ margin-top: 40px;
+ padding: 0 16px 20px;
+ overflow-y: auto;
+ height: 100%;
+}
+
+@media (min-width: 640px) {
+ .ms-Panel-contentInner {
+ padding: 0 32px 20px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .ms-Panel-contentInner {
+ padding: 0 40px 20px;
+ }
+}
+
+.ms-Panel-headerText {
+ font-weight: 100;
+ font-size: 21px;
+ color: #333333;
+ margin: 10px 0;
+ padding: 4px 0;
+ line-height: 1;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+ .ms-Panel-headerText {
+ margin-top: 30px;
+ }
+}
+
+.ms-PanelHost {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 10;
+}
+
+.ms-PanelHost .ms-Overlay {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ border-bottom: 1px solid #c8c8c8;
+ cursor: text;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker-searchBox.is-active,
+.ms-PeoplePicker-searchBox:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-PeoplePicker-searchBox:hover,
+ .ms-PeoplePicker-searchBox:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-PeoplePicker-searchBox:hover,
+ .ms-PeoplePicker-searchBox:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-PeoplePicker-searchBox::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox::-moz-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox:-moz-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined {
+ border: 0;
+ margin-bottom: 0;
+ display: inline-block;
+ width: 100%;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field {
+ min-height: 40px;
+ border: 0;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText {
+ color: #a80000;
+}
+
+.ms-PeoplePicker-personaRemove {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ background-color: #f4f4f4;
+ color: #666666;
+ display: inline-block;
+ text-align: center;
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-personaRemove:hover {
+ background-color: #eaeaea;
+ color: #333333;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-personaRemove:focus {
+ background-color: #eaeaea;
+ color: #333333;
+ border: 1px solid #0078d7;
+ outline: none;
+}
+
+.ms-PeoplePicker-results {
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ margin-bottom: -1px;
+ padding-top: 9px;
+ width: 100%;
+ padding-left: 0;
+ box-sizing: border-box;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-weight: 300;
+ font-size: 12px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ text-transform: uppercase;
+ padding-left: 16px;
+}
+
+.ms-PeoplePicker-resultList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: -1px;
+ list-style-type: none;
+}
+
+.ms-PeoplePicker-result {
+ position: relative;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ padding-left: 16px;
+ cursor: pointer;
+ outline: 0;
+}
+
+.ms-PeoplePicker-result:hover,
+.ms-PeoplePicker-result:focus {
+ background-color: #eaeaea;
+}
+
+.ms-PeoplePicker-result:focus {
+ box-shadow: 0 0 0 1px #0078d7 inset;
+}
+
+.ms-PeoplePicker-result.is-selected {
+ background-color: #b3d6f2;
+}
+
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover {
+ background-color: #69afe5;
+}
+
+.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active {
+ background-color: #69afe5;
+}
+
+.ms-PeoplePicker-resultBtn,
+.ms-PeoplePicker-peopleListBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ box-sizing: border-box;
+ height: 34px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0 0 10px;
+ padding: 0 0 0 9px;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-peopleListBtn {
+ height: 48px;
+ }
+}
+
+.ms-PeoplePicker-resultBtn:hover,
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultBtn:focus,
+.ms-PeoplePicker-peopleListBtn:focus {
+ outline: 1;
+}
+
+.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact,
+.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact {
+ height: 32px;
+}
+
+.ms-PeoplePicker-peopleListBtn {
+ margin-bottom: 0;
+ padding: 0;
+}
+
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: transparent;
+}
+
+.ms-PeoplePicker-resultAction {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ display: block;
+ height: 100%;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 40px;
+ text-align: center;
+}
+
+.ms-PeoplePicker-resultAction .ms-Icon {
+ color: #666666;
+ font-size: 15px;
+}
+
+.ms-PeoplePicker-resultAction:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultAction:active {
+ background-color: #a6a6a6;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ height: 40px;
+ position: relative;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMore:hover {
+ background-color: #f4f4f4;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ font-size: 21px;
+ height: 40px;
+ left: 16px;
+ line-height: 40px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ width: 40px;
+}
+
+.ms-PeoplePicker-searchMoreText {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ height: 40px;
+ left: 64px;
+ line-height: 40px;
+ position: absolute;
+ top: 0;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn {
+ height: 40px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,
+ .ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction {
+ height: 40px;
+ }
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,
+.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-weight: 400;
+ height: 50px;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker-selectedPeople,
+.ms-PeoplePicker-peopleList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style: none;
+}
+
+.ms-PeoplePicker-selectedPerson {
+ margin-bottom: 8px;
+ position: relative;
+}
+
+.ms-PeoplePicker-peopleListItem {
+ margin-bottom: 6px;
+ position: relative;
+}
+
+.ms-Persona {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1;
+ position: relative;
+ width: 100%;
+ height: 48px;
+ display: table;
+ table-layout: fixed;
+ border-collapse: separate;
+}
+
+.ms-Persona .ms-ContextualHost {
+ display: none;
+}
+
+.ms-Persona-imageArea {
+ position: absolute;
+ overflow: hidden;
+ text-align: center;
+ max-width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 0;
+ width: 100%;
+ top: 0;
+ left: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona-imageArea {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona-imageArea {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona-placeholder {
+ color: #ffffff;
+ position: absolute;
+ right: 0;
+ left: 0;
+ font-size: 47px;
+ top: 9px;
+ z-index: 5;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-weight: 100;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blueLight {
+ background-color: #00bcf2;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #0078d7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blueDark {
+ background-color: #002050;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #008272;
+}
+
+.ms-Persona-initials.ms-Persona-initials--greenLight {
+ background-color: #bad80a;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #107c10;
+}
+
+.ms-Persona-initials.ms-Persona-initials--greenDark {
+ background-color: #004b1c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magentaLight {
+ background-color: #e3008c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #b4009e;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purpleLight {
+ background-color: #b4a0ff;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #5c2d91;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #000000;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #d83b01;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #e81123;
+}
+
+.ms-Persona-initials.ms-Persona-initials--redDark {
+ background-color: #a80000;
+}
+
+.ms-Persona-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 48px;
+ z-index: 10;
+ width: 100%;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #7fba00;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+ text-align: center;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona-presence {
+ border-color: #000000;
+ box-shadow: 0 0 0 1px #1aebff inset;
+ color: #000000;
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona-presence {
+ border-color: #ffffff;
+ box-shadow: 0 0 0 1px #37006e inset;
+ color: #ffffff;
+ background-color: #000000;
+ }
+}
+
+.ms-Persona-presenceIcon {
+ color: #ffffff;
+ font-size: 8px;
+ line-height: 12px;
+ vertical-align: top;
+}
+
+.ms-Persona-details {
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+ text-align: left;
+ padding-left: 60px;
+ display: table-cell;
+ width: 100%;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-weight: 400;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-weight: 400;
+ font-size: 12px;
+ white-space: nowrap;
+ line-height: 1.3;
+}
+
+.ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ padding-top: 5px;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ right: auto;
+ top: 10px;
+ left: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ top: 9px;
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 9px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
+ padding: 0;
+ background-color: transparent;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText::after {
+ content: ';';
+}
+
+.ms-Persona.ms-Persona--xs,
+.ms-Persona.ms-Persona--facePile,
+.ms-Persona.ms-Persona--token {
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image,
+.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--facePile .ms-Persona-image,
+.ms-Persona.ms-Persona--token .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--token .ms-Persona-image {
+ max-width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder,
+.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,
+.ms-Persona.ms-Persona--token .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials,
+.ms-Persona.ms-Persona--facePile .ms-Persona-initials,
+.ms-Persona.ms-Persona--token .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence,
+.ms-Persona.ms-Persona--facePile .ms-Persona-presence,
+.ms-Persona.ms-Persona--token .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details,
+.ms-Persona.ms-Persona--facePile .ms-Persona-details,
+.ms-Persona.ms-Persona--token .ms-Persona-details {
+ padding-left: 40px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--token .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--token .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--sm {
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ max-width: 40px;
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-placeholder {
+ font-size: 38px;
+ top: 5px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-initials {
+ font-size: 14px;
+ line-height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-presence {
+ left: 27px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-details {
+ padding-left: 48px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText {
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText {
+ padding-top: 1px;
+}
+
+.ms-Persona.ms-Persona--lg {
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ max-width: 72px;
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-placeholder {
+ font-size: 67px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presence {
+ left: 49px;
+ height: 20px;
+ width: 20px;
+ border-width: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon {
+ line-height: 20px;
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-details {
+ padding-left: 84px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--xl {
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ max-width: 100px;
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-placeholder {
+ font-size: 95px;
+ top: 12px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-initials {
+ font-size: 42px;
+ line-height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presence {
+ height: 28px;
+ width: 28px;
+ left: 71px;
+ border-width: 4px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon {
+ line-height: 28px;
+ font-size: 21px;
+ position: relative;
+ top: 1px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 120px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-weight: 300;
+ margin-top: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText {
+ padding-top: 2px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--xl .ms-Persona-optionalText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText {
+ color: #333333;
+}
+
+.ms-Persona.ms-Persona--selectable {
+ cursor: pointer;
+ padding: 0 10px;
+}
+
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover,
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus {
+ background-color: #deecf9;
+ outline: 1px solid transparent;
+}
+
+.ms-Persona.ms-Persona--available .ms-Persona-presence {
+ background-color: #7fba00;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #fcd116;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon {
+ position: relative;
+ left: 1px;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #ffffff;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence::before {
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-shadow: 0 0 0 2px #d93b3b inset;
+ border-radius: 50%;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence::after {
+ content: '';
+ width: 100%;
+ height: 2px;
+ background-color: #d93b3b;
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ position: absolute;
+ top: 5px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence::after {
+ top: 9px;
+}
+
+.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence::after {
+ top: 13px;
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #37006e;
+ }
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #e81123;
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #93abbd;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #000000;
+ box-shadow: 0 0 0 1px #ffffff inset;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #ffffff;
+ box-shadow: 0 0 0 1px #000000 inset;
+ }
+}
+
+.ms-Persona.ms-Persona--facePile {
+ display: inline-block;
+ width: auto;
+}
+
+.ms-Persona.ms-Persona--facePile:hover {
+ cursor: pointer;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea {
+ position: relative;
+ width: 100%;
+ min-width: 32px;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-initials {
+ position: relative;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-details {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--facePile .ms-Persona-presence {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--token {
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ width: auto;
+ background-color: #f4f4f4;
+ border-radius: 20px;
+ margin: 4px;
+}
+
+.ms-Persona.ms-Persona--token:hover {
+ cursor: pointer;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-actionIcon {
+ border-radius: 20px;
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ padding: 0;
+ line-height: 30px;
+ transition: background-color 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ text-align: center;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover {
+ background-color: #eaeaea;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-imageArea {
+ width: 100%;
+ min-width: 32px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-details {
+ height: 30px;
+ display: inline-block;
+ width: auto;
+ padding-right: 8px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-primaryText {
+ padding-top: 0;
+ line-height: 34px;
+}
+
+.ms-Persona.ms-Persona--token .ms-Persona-initials {
+ position: relative;
+}
+
+.ms-PersonaCard {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-fill-mode: both;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-left: 20px;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ position: relative;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-actions::before {
+ content: '';
+ position: absolute;
+ top: 47px;
+ left: 0;
+ width: 100%;
+ border-top: 1px solid #c8c8c8;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 16px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ outline: transparent;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-action:hover,
+.ms-PersonaCard-overflow:hover {
+ color: #212121;
+}
+
+.ms-PersonaCard-action:active,
+.ms-PersonaCard-overflow:active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action::before,
+.ms-PersonaCard-overflow::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ top: 0;
+ left: 0;
+ z-index: 100;
+}
+
+.ms-PersonaCard-action.is-active,
+.ms-PersonaCard-overflow.is-active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active::after,
+.ms-PersonaCard-overflow.is-active::after {
+ box-sizing: border-box;
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 13px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: -95px;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-details {
+ display: none;
+ width: 100%;
+ margin: 0;
+ max-height: 300px;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-details.is-active {
+ display: block;
+}
+
+.ms-PersonaCard-details.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander::after {
+ content: '\E70D';
+}
+
+.ms-PersonaCard-details[data-detail-id='org'] {
+ max-height: 300px;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 16px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 2px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\E70E';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart::after {
+ display: none;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+
+ .ms-ContextualHost .ms-PersonaCard {
+ box-shadow: none;
+ }
+}
+
+.ms-Pivot {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.ms-Pivot-links {
+ font-size: 0;
+ height: 40px;
+ list-style-type: none;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.ms-Pivot-link {
+ color: #333333;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 40px;
+ margin-right: 8px;
+ padding: 0 8px;
+ text-align: center;
+ vertical-align: top;
+}
+
+.ms-Pivot-link:hover {
+ cursor: pointer;
+}
+
+.ms-Pivot-link::before {
+ background-color: transparent;
+ bottom: 0;
+ content: '';
+ height: 2px;
+ left: 8px;
+ position: absolute;
+ right: 8px;
+ transition: background-color 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.ms-Pivot-link::after {
+ color: transparent;
+ content: attr(title);
+ display: block;
+ font-weight: bold;
+ height: 1px;
+ overflow: hidden;
+ visibility: hidden;
+}
+
+.ms-Pivot-link.is-selected {
+ font-weight: 600;
+ position: relative;
+}
+
+.ms-Pivot-link.is-selected::before {
+ background-color: #0078d7;
+}
+
+.ms-Pivot-link.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow {
+ color: #666666;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow.is-selected {
+ color: #0078d7;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
+.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
+ color: #212121;
+}
+
+.ms-Pivot-link.ms-Pivot-link--overflow:active {
+ color: #0078d7;
+}
+
+.ms-Pivot-ellipsis {
+ font-size: 15px;
+ position: relative;
+ top: 0;
+}
+
+.ms-Pivot-content {
+ display: none;
+ margin-top: 20px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected {
+ font-weight: 300;
+}
+
+.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow::after {
+ font-size: 17px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link {
+ height: 40px;
+ background-color: #f4f4f4;
+ line-height: 40px;
+ margin-right: -2px;
+ padding: 0 10px;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) {
+ color: #000000;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active {
+ color: #ffffff;
+ background-color: #0078d7;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ background-color: #0078d7;
+ color: #ffffff;
+ font-weight: 300;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected),
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) {
+ background-color: #ffffff;
+}
+
+.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active {
+ background-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected {
+ font-weight: 600;
+ }
+}
+
+.ms-ProgressIndicator {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-weight: 400;
+}
+
+.ms-ProgressIndicator-itemName {
+ color: #333333;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-top: 4px;
+ line-height: 20px;
+}
+
+.ms-ProgressIndicator-itemDescription {
+ color: #767676;
+ font-size: 11px;
+ line-height: 18px;
+}
+
+.ms-ProgressIndicator-itemProgress {
+ position: relative;
+ width: 180px;
+ height: 2px;
+ padding: 8px 0;
+}
+
+.ms-ProgressIndicator-progressTrack {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-ProgressIndicator-progressBar {
+ background-color: #0078d7;
+ height: 2px;
+ position: absolute;
+ transition: width 0.3s ease;
+ width: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-ProgressIndicator-progressBar {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-ProgressIndicator-progressBar {
+ background-color: #000000;
+ }
+}
+
+.ms-SearchBox {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ height: 36px;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ position: relative;
+ margin-bottom: 10px;
+ display: inline-block;
+ overflow: hidden;
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.is-active {
+ z-index: 10;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-label {
+ display: none;
+}
+
+.ms-SearchBox.is-active .ms-SearchBox-clear {
+ display: block;
+}
+
+.ms-SearchBox:hover {
+ background-color: #deecf9;
+}
+
+.ms-SearchBox:hover .ms-SearchBox-label {
+ color: #000000;
+}
+
+.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon {
+ color: #333333;
+}
+
+.ms-SearchBox.is-disabled {
+ background-color: #f4f4f4;
+ pointer-events: none;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-label {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-icon {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.is-disabled .ms-SearchBox-field {
+ color: #a6a6a6;
+ background-color: transparent;
+ border-color: #f4f4f4;
+ cursor: default;
+}
+
+.ms-SearchBox-clear {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 10;
+}
+
+.ms-SearchBox-clear .ms-CommandButton-button {
+ background-color: #0078d7;
+ color: #ffffff;
+ height: 36px;
+}
+
+.ms-SearchBox-clear .ms-CommandButton-icon {
+ color: #ffffff;
+}
+
+.ms-SearchBox-icon {
+ position: relative;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ display: inline-block;
+ font-size: 16px;
+ width: 16px;
+ margin-left: 12px;
+ margin-right: 6px;
+ color: #0078d7;
+ vertical-align: top;
+}
+
+.ms-SearchBox-field {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #69afe5;
+ outline: transparent 1px solid;
+ font-weight: 300;
+ font-size: 14px;
+ color: #000000;
+ height: 36px;
+ padding: 6px 3px 7px 45px;
+ width: 208px;
+ background-color: transparent;
+ z-index: 5;
+ transition: padding-left 0.167s;
+}
+
+.ms-SearchBox-field:focus {
+ padding: 6px 32px 7px 10px;
+ border-color: #0078d7;
+ background-color: #deecf9;
+}
+
+.ms-SearchBox-field::-ms-clear {
+ display: none;
+}
+
+.ms-SearchBox-label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 36px;
+ line-height: 36px;
+ color: #666666;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar {
+ background-color: #ffffff;
+ width: 208px;
+ height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ height: 40px;
+ line-height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field {
+ transition: none;
+ border: 0;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus {
+ background-color: transparent;
+ padding: 6px 3px 7px 45px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit {
+ display: none;
+ position: absolute;
+ top: 0;
+ z-index: 10;
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button {
+ height: 40px;
+ background-color: transparent;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear {
+ right: 8px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter {
+ right: 8px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon {
+ color: #0078d7;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar::before {
+ position: absolute;
+ content: ' ';
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: 0 8px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover {
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label {
+ color: #212121;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon {
+ color: #0078d7;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar:focus {
+ background-color: transparent;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter {
+ display: block;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
+ width: 50px;
+ min-height: 40px;
+ z-index: 0;
+ background-color: #f4f4f4;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text {
+ display: none;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field {
+ cursor: pointer;
+ width: calc(100% - 50px);
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed::before {
+ visibility: hidden;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field {
+ display: block;
+ cursor: text;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text {
+ display: inline-block;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
+ width: 100%;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear {
+ display: inline-block;
+ right: 58px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter {
+ display: inline-block;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated {
+ transition: width 0.167s cubic-bezier(0.1, 0.9, 0.2, 1);
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active::before {
+ visibility: visible;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear {
+ display: inline-block;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon {
+ color: #a6a6a6;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active {
+ color: #0078d7;
+}
+
+@media only screen and (min-width: 1024px) {
+ .ms-SearchBox.ms-SearchBox--commandBar {
+ background-color: #ffffff;
+ border-right: 1px solid #eaeaea;
+ }
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar {
+ height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ height: 44px;
+ line-height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear {
+ font-size: 20px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button {
+ height: 44px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,
+ .ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label {
+ font-size: 16px;
+ }
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active {
+ background-color: #ffffff;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label {
+ display: block;
+ line-height: 40px;
+ height: 40px;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text {
+ display: none;
+}
+
+.ms-SearchBox.ms-SearchBox--commandBar.is-active::before {
+ visibility: visible;
+}
+
+@media only screen and (max-width: 639px) {
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field {
+ width: 100%;
+ padding-right: 100px;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon {
+ display: none;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit {
+ display: inline-block;
+ }
+
+ .ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon {
+ color: #a6a6a6;
+ }
+}
+
+.ms-Spinner {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ height: 20px;
+}
+
+.ms-Spinner.ms-Spinner--large {
+ height: 28px;
+}
+
+.ms-Spinner.ms-Spinner--large .ms-Spinner-label {
+ left: 34px;
+ top: 6px;
+}
+
+.ms-Spinner-circle {
+ position: absolute;
+ border-radius: 100px;
+ background-color: #0078d7;
+ opacity: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Spinner-circle {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Spinner-circle {
+ background-color: #000000;
+ }
+}
+
+.ms-Spinner-label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ position: relative;
+ font-size: 12px;
+ font-weight: 400;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-Table {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.ms-Table--fixed {
+ table-layout: fixed;
+}
+
+.ms-Table tr,
+.ms-Table-row {
+ display: table-row;
+ line-height: 30px;
+ font-weight: 300;
+ font-size: 12px;
+ color: #333333;
+}
+
+.ms-Table tr.is-selected,
+.ms-Table-row.is-selected {
+ background-color: #b3d6f2;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck,
+.ms-Table-row.is-selected .ms-Table-rowCheck {
+ background-color: #0078d7;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck::before,
+.ms-Table-row.is-selected .ms-Table-rowCheck::before {
+ display: none;
+}
+
+.ms-Table tr.is-selected .ms-Table-rowCheck::after,
+.ms-Table-row.is-selected .ms-Table-rowCheck::after {
+ content: '\E73A';
+ color: #ffffff;
+}
+
+.ms-Table th,
+.ms-Table td,
+.ms-Table-cell {
+ display: table-cell;
+ padding: 0 10px;
+}
+
+.ms-Table thead th,
+.ms-Table-head {
+ font-weight: 300;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-Table thead td,
+.ms-Table thead th,
+.ms-Table thead .ms-Table-cell,
+.ms-Table thead .ms-Table-rowCheck,
+.ms-Table-head td,
+.ms-Table-head th,
+.ms-Table-head .ms-Table-cell,
+.ms-Table-head .ms-Table-rowCheck {
+ font-weight: normal;
+ text-align: left;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ms-Table-rowCheck {
+ display: table-cell;
+ width: 20px;
+ position: relative;
+ padding: 0;
+}
+
+.ms-Table-rowCheck::after {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-family: 'FabricMDL2Icons';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ content: '\E739';
+ color: #a6a6a6;
+ font-size: 12px;
+ position: absolute;
+ left: 4px;
+ top: 1px;
+}
+
+.ms-Table--selectable tr:hover,
+.ms-Table--selectable .ms-Table-row:hover {
+ background-color: #f4f4f4;
+ cursor: pointer;
+ outline: 1px solid transparent;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Table-row.is-selected .ms-Table-rowCheck {
+ background: none;
+ }
+
+ .ms-Table-row.is-selected .ms-Table-rowCheck::before {
+ display: block;
+ }
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 8px;
+}
+
+.ms-TextField .ms-Label {
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.ms-TextField.is-disabled .ms-TextField-field {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField.is-disabled::-webkit-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled::-moz-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled:-moz-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-disabled:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+
+.ms-TextField.is-required .ms-Label::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-webkit-input-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required::-moz-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-moz-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-required:-ms-input-placeholder::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-TextField.is-active {
+ border-color: #0078d7;
+}
+
+.ms-TextField-field {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #c8c8c8;
+ border-radius: 0;
+ font-weight: 300;
+ font-size: 14px;
+ color: #333333;
+ height: 32px;
+ padding: 6px 12px 7px;
+ width: 100%;
+ min-width: 180px;
+ outline: 0;
+ text-overflow: ellipsis;
+}
+
+.ms-TextField-field:hover {
+ border-color: #767676;
+}
+
+.ms-TextField-field:focus {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField-field:hover,
+ .ms-TextField-field:focus {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField-field[disabled] {
+ background-color: #f4f4f4;
+ border-color: #f4f4f4;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-TextField-field::-webkit-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field::-moz-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field:-moz-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-field:-ms-input-placeholder {
+ color: #666666;
+}
+
+.ms-TextField-description {
+ color: #767676;
+ font-size: 11px;
+}
+
+.ms-TextField.ms-TextField--placeholder {
+ position: relative;
+ background-color: #ffffff;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-TextField-field {
+ position: relative;
+ background-color: transparent;
+ z-index: 5;
+}
+
+.ms-TextField.ms-TextField--placeholder .ms-Label {
+ position: absolute;
+ font-weight: 300;
+ font-size: 14px;
+ color: #666666;
+ padding: 6px 12px 7px;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined {
+ border-bottom: 1px solid #c8c8c8;
+ display: table;
+ width: 100%;
+ min-width: 180px;
+}
+
+.ms-TextField.ms-TextField--underlined:hover {
+ border-color: #767676;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined:hover {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--underlined:active,
+.ms-TextField.ms-TextField--underlined:focus {
+ border-color: #0078d7;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-Label {
+ font-size: 14px;
+ margin-right: 8px;
+ display: table-cell;
+ vertical-align: top;
+ padding-left: 12px;
+ padding-top: 9px;
+ height: 32px;
+ width: 1%;
+ white-space: nowrap;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field {
+ border: 0;
+ float: left;
+ display: table-cell;
+ text-align: left;
+ padding-top: 8px;
+ padding-bottom: 3px;
+}
+
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,
+.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover {
+ outline: 0;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled {
+ border-bottom-color: #eaeaea;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field {
+ background-color: transparent;
+ color: #a6a6a6;
+}
+
+.ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #0078d7;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #1aebff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-TextField.ms-TextField--underlined.is-active {
+ border-color: #37006e;
+ }
+}
+
+.ms-TextField.ms-TextField--multiline .ms-TextField-field {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ color: #666666;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 17px;
+ min-height: 60px;
+ min-width: 260px;
+ padding-top: 6px;
+ overflow: auto;
+}
+
+.ms-Label {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ color: #333333;
+ font-size: 12px;
+ font-weight: 400;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required::after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+.ms-Toggle {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ position: relative;
+ display: block;
+ margin-bottom: 26px;
+}
+
+.ms-Toggle .ms-Label {
+ position: relative;
+ top: -2px;
+ padding: 0 0 0 50px;
+}
+
+.ms-Toggle .ms-Toggle-field::before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ left: 4px;
+ background-color: #666666;
+ outline: 1px solid transparent;
+ transition-property: background, left;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field::before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field::before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle .ms-Toggle-field::before {
+ right: auto;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label--off {
+ display: block;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label--on {
+ display: none;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #0078d7;
+ border-color: #0078d7;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected::before {
+ position: absolute;
+ top: 3px;
+ width: 10px;
+ height: 10px;
+ border-radius: 10px;
+ content: '';
+ right: 4px;
+ background-color: #666666;
+ outline: 1px solid transparent;
+ transition-property: background, left;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field.is-selected::before {
+ border: 2.5px solid #ffffff;
+ height: 15px;
+ outline: 0;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field.is-selected::before {
+ border-color: #000000;
+ }
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected::before {
+ background-color: #ffffff;
+ left: 28px;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off {
+ display: none;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on {
+ display: block;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle .ms-Toggle-field.is-selected {
+ background-color: #000000;
+ }
+}
+
+.ms-Toggle:focus + .ms-Toggle-field,
+.ms-Toggle:hover + .ms-Toggle-field {
+ border-color: #666666;
+}
+
+.ms-Toggle:focus + .ms-Toggle-field::before,
+.ms-Toggle:hover + .ms-Toggle-field::before {
+ background-color: #333333;
+}
+
+.ms-Toggle:focus:checked + .ms-Toggle-field,
+.ms-Toggle:hover:checked + .ms-Toggle-field {
+ background-color: #106ebe;
+ border-color: #106ebe;
+}
+
+.ms-Toggle:focus:checked + .ms-Toggle-field::before,
+.ms-Toggle:hover:checked + .ms-Toggle-field::before {
+ background-color: #ffffff;
+}
+
+.ms-Toggle:active:checked + .ms-Toggle-field {
+ background-color: #005a9e;
+ border-color: #005a9e;
+}
+
+.ms-Toggle .ms-Toggle-field:focus,
+.ms-Toggle .ms-Toggle-field:hover {
+ border-color: #333333;
+}
+
+.ms-Toggle .ms-Toggle-field.is-selected:focus,
+.ms-Toggle .ms-Toggle-field.is-selected:hover {
+ background-color: #106ebe;
+ border-color: #106ebe;
+}
+
+.ms-Toggle .ms-Toggle-field .ms-Label {
+ color: #000000;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ms-Toggle .ms-Toggle-field:hover .ms-Label {
+ color: #000000;
+}
+
+.ms-Toggle .ms-Toggle-field:active .ms-Label {
+ color: #333333;
+}
+
+.ms-Toggle.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field {
+ background-color: #ffffff;
+ border-color: #c8c8c8;
+ pointer-events: none;
+ cursor: default;
+}
+
+.ms-Toggle.is-disabled .ms-Toggle-field::before {
+ background-color: #c8c8c8;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field::before {
+ border-color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Toggle.is-disabled .ms-Toggle-field,
+ .ms-Toggle.is-disabled .ms-Toggle-field::before {
+ border-color: #600000;
+ }
+}
+
+.ms-Toggle-description {
+ position: relative;
+ font-size: 14px;
+ vertical-align: top;
+ display: block;
+ margin-bottom: 8px;
+}
+
+.ms-Toggle-field {
+ position: relative;
+ display: inline-block;
+ width: 45px;
+ height: 20px;
+ box-sizing: border-box;
+ border: 2px solid #a6a6a6;
+ border-radius: 20px;
+ cursor: pointer;
+ transition-property: background, left, border-color;
+ transition-duration: 250ms;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
+ outline: 0;
+}
+
+.ms-Toggle-field:hover,
+.ms-Toggle-field:focus {
+ border-color: #666666;
+}
+
+.ms-Toggle-input {
+ display: none;
+}
+
+.ms-Toggle.ms-Toggle--textLeft {
+ width: 225px;
+ margin-bottom: 40px;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description {
+ display: inline-block;
+ max-width: 150px;
+ top: -3px;
+ margin-bottom: 0;
+}
+
+.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field {
+ float: right;
+}
+
+.u-contentCenter {
+ position: relative;
+ margin: 0 auto;
+ max-width: 100%;
+ transition: 0.167s all cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+ .u-contentCenter {
+ max-width: 960px;
+ }
+}
+
+@media (min-width: 1366px) {
+ .HomePage .u-contentCenter,
+ .ChannelPage .u-contentCenter {
+ max-width: 1200px;
+ }
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+ color: #0078d7;
+ text-decoration: none;
+ cursor: pointer;
+ outline: none;
+ font-size: inherit;
+ text-decoration: none;
+}
+
+a:hover,
+a:focus {
+ color: #004578;
+}
+
+a:active {
+ color: #0078d7;
+}
+
+.VideoPortal-content {
+ position: relative;
+}
+
+.VideoPortal-navBar {
+ display: block;
+ top: 0;
+ width: 100%;
+ z-index: 101;
+ height: 40px;
+}
+
+.VideoPortal-page {
+ overflow: visible;
+ position: relative;
+ padding-bottom: 50px;
+}
+
+.ms-CommandBar--navBar {
+ background-color: #f4f4f4;
+}
+
+.VideoList-item.ms-Grid-col {
+ margin-bottom: 16px;
+ float: none;
+ display: inline-block;
+ vertical-align: top;
+ padding-left: 8px;
+ padding-right: 12px;
+}
+
+.VideoList-thumbLink {
+ display: block;
+ position: relative;
+ width: 100%;
+ padding-bottom: 56.25%;
+}
+
+.VideoList-thumbImg {
+ max-width: 100%;
+ min-width: 100%;
+ position: absolute;
+}
+
+.VideoList-thumbCaption {
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ padding: 3px;
+ color: #ffffff;
+ font-size: 12px;
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.VideoList-text {
+ padding-top: 5px;
+ margin: 0;
+}
+
+.VideoList-title,
+.VideoList-channel,
+.VideoList-viewCount {
+ display: block;
+}
+
+.VideoList-title {
+ display: block;
+ top: 0;
+ left: 10px;
+ bottom: 50%;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.VideoList-channel {
+ bottom: 1.2em;
+}
+
+.VideoList-viewCount {
+ bottom: 0;
+}
+
+@media (min-width: 480px) {
+ .VideoList-item {
+ margin-right: -4px;
+ }
+}
+
+.SpotLight-container {
+ background-color: #212121;
+}
+
+.SpotLightList {
+ white-space: nowrap;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ position: relative;
+}
+
+.SpotLight-title {
+ text-indent: 16px;
+}
+
+.SpotLight-item {
+ position: relative;
+ display: inline-block;
+ float: none;
+ margin: 0;
+}
+
+.SpotLight-thumb {
+ padding: 10px;
+}
+
+.SpotLight-thumbImg {
+ max-width: 100%;
+ min-width: 100%;
+}
+
+.SpotLight-text {
+ position: absolute;
+ right: 10px;
+ bottom: 13px;
+ left: 10px;
+ overflow: hidden;
+ color: #ffffff;
+ background: rgba(0, 0, 0, 0.4);
+ padding: 5px;
+}
+
+.SpotLight-videoTitle,
+.SpotLight-videoLength {
+ color: #ffffff;
+ display: block;
+}
+
+@media (min-width: 640px) {
+ .SpotLightList {
+ overflow: hidden;
+ }
+
+ .SpotLight-container {
+ padding: 10px 0;
+ }
+}
+
+@media (min-width: 1024px) {
+ .SpotLight-title {
+ text-indent: 8px;
+ }
+}
+
+.HomePage-content {
+ padding: 10px;
+ padding-top: 20px;
+}
+
+.ChannelList-title {
+ padding-left: 10px;
+ border-width: 4px;
+ border-left-style: solid;
+}
+
+.ChannelList-titleText {
+ margin-right: 7px;
+}
+
+.PlayerPage-theater {
+ background-color: #212121;
+}
+
+.VideoPlayer-player {
+ max-width: 100%;
+ position: relative;
+ padding-bottom: 56.25%;
+ height: 0;
+ overflow: hidden;
+}
+
+.VideoPlayer-player iframe,
+.VideoPlayer-player video,
+.VideoPlayer-player .VideoPlayer-iframe {
+ background-color: #666666;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1px;
+ min-width: 100%;
+ *width: 100%;
+ height: 100%;
+ min-height: 100%;
+ cursor: pointer;
+}
+
+.VideoPlayer-player iframe::after,
+.VideoPlayer-player video::after,
+.VideoPlayer-player .VideoPlayer-iframe::after {
+ position: absolute;
+ content: '';
+ display: block;
+ width: 0;
+ height: 0;
+ border-top: 60px solid transparent;
+ border-bottom: 60px solid transparent;
+ border-left: 90px solid rgba(0, 0, 0, 0.4);
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ transition: 0.167s border-color cubic-bezier(0.1, 0.25, 0.75, 0.9);
+}
+
+.VideoPlayer-player iframe:hover::after,
+.VideoPlayer-player video:hover::after,
+.VideoPlayer-player .VideoPlayer-iframe:hover::after {
+ border-left-color: rgba(0, 0, 0, 0.75);
+}
+
+.PlayerPage-content {
+ padding: 0 10px;
+}
+
+.PlayerPage-info {
+ margin-bottom: 20px;
+ padding-right: 32px;
+}
+
+.PlayerPage-header {
+ margin-bottom: 20px;
+}
+
+.PlayerPage-titleArea {
+ margin-top: 17px;
+ margin-bottom: 8px;
+}
+
+.PlayerPage-title {
+ margin-bottom: 5px;
+ margin-top: 0;
+ display: inline-block;
+}
+
+.PlayerPage-titleSeparator {
+ display: inline-block;
+ margin: 0 10px;
+ position: relative;
+ bottom: 2px;
+}
+
+.PlayerPage-channelLink {
+ font-size: 17px;
+ padding-left: 10px;
+ border-width: 4px;
+ border-left-style: solid;
+}
+
+.PlayerPage-channelLink:hover {
+ color: #000000;
+}
+
+.PlayerPage-channelText {
+ position: relative;
+ bottom: 2px;
+}
+
+.PlayerPage-metaData {
+ margin-bottom: 10px;
+}
+
+.PlayerPage-descriptionArea {
+ margin-bottom: 10px;
+}
+
+.PlayerPage-description {
+ display: inline;
+ word-wrap: break-word;
+}
+
+.PlayerPage-descriptionField {
+ position: relative;
+ margin-top: 17px;
+}
+
+.PlayerPage-viewCountText {
+ margin-right: 5px;
+}
+
+.SampleVideo-content {
+ background-color: #333333;
+ height: 120px;
+}
+
+@media (min-width: 320px) {
+ .PlayerPage-content {
+ padding: 0 10px 0 16px;
+ }
+
+ .PlayerPage-grid {
+ padding: 0;
+ }
+}
+
+@media (min-width: 480px) {
+ .PlayerPage-relatedList .VideoList-title {
+ font-size: 15px;
+ margin-bottom: 5px;
+ }
+
+ .PlayerPage-relatedList .VideoList-channel,
+ .PlayerPage-relatedList .VideoList-viewCount {
+ font-size: 14px;
+ }
+}
+
+@media (min-width: 640px) {
+ .PlayerPage-header {
+ margin-bottom: 25px;
+ }
+
+ .PlayerPage-titleArea {
+ margin-top: 35px;
+ }
+
+ .PlayerPage-description {
+ font-size: 14px;
+ }
+
+ .PlayerPage-title {
+ font-size: 28px;
+ }
+
+ .PlayerPage-metaData {
+ font-size: 17px;
+ }
+
+ .PlayerPage-channelLink {
+ font-size: 21px;
+ }
+}
+
+@media (min-width: 1024px) {
+ .PlayerPage-content {
+ padding: 0;
+ }
+
+ .PlayerPage-relatedTitle {
+ margin-top: 42px;
+ }
+
+ .PlayerPage-relatedList .VideoList-text {
+ padding-top: 0;
+ }
+
+ .PlayerPage-relatedList .VideoList-title {
+ margin-bottom: 5px;
+ line-height: 1.2em;
+ max-height: 3.6em;
+ overflow: hidden;
+ white-space: normal;
+ }
+}
+
+.ChannelPage-content {
+ padding: 10px;
+ padding-top: 20px;
+}
+
+.ChannelPage-pivots {
+ margin-bottom: 20px;
+}
+
+.ChannelPage-pivots .ms-Pivot-link {
+ font-size: 21px;
+}
+
+.ChannelsPage {
+ padding: 10px;
+}
+
+.ChannelGroup-title {
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.ChannelGroup-channel {
+ padding: 10px 0 10px 10px;
+ border-width: 4px;
+ border-left-style: solid;
+ margin-bottom: 10px;
+ display: block;
+}
+
+.ChannelGroup-channel:hover {
+ color: #000000;
+}
+
+@media (min-width: 480px) {
+ .ChannelsPage {
+ padding: 20px;
+ }
+}
diff --git a/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css b/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css
new file mode 100644
index 00000000..939eb65e
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/css/VideoPortal.min.css
@@ -0,0 +1 @@
+.ms-Breadcrumb{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:12px;color:#666;vertical-align:top;margin:11px 7px}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;display:inline-block;color:#0078d7;padding:8px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute;margin-right:-2px}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:0;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{font-weight:100;font-size:21px;color:#333;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:10px;margin:8px 5px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:16px;padding:5px 4px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin:5px 4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding:2px 4px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:14px;font-weight:400;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button.is-hidden{display:none}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea}.ms-Button:hover .ms-Button-label{color:#000}@media screen and (-ms-high-contrast:active){.ms-Button:hover{color:#1aebff;border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Button:hover{color:#37006e;border-color:#37006e}}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button-label{color:#333;font-weight:600;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-ms-flexbox;display:flex;padding:0}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;margin-right:4px;position:relative;top:1px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;font-size:12px;height:18px;line-height:18px;width:18px}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-size:21px;font-weight:100;position:relative;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{border:1px solid #005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon{color:#0078d7}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon{border:1px solid #0078d7}.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{border:1px solid #c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{display:block;height:auto;max-width:280px;min-height:72px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-weight:600;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-weight:400;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Callout{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;width:288px}.ms-Callout.is-hidden{display:none}.ms-Callout-header{z-index:105;padding:24px 28px 12px}.ms-Callout-title{margin:0;font-weight:300;font-size:21px}.ms-Callout-subText{margin:0;font-weight:300;color:#333;font-size:12px}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-link{font-size:14px}.ms-Callout-inner{height:100%;padding:0 28px 12px}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{height:27px;line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-icon,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-label{line-height:27px}.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:focus .ms-Button,.ms-Callout-actions .ms-CommandButton.ms-CommandButton--inline:hover .ms-Button{color:#0078d7}.ms-Callout-actions .ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-weight:100;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;padding-top:12px}.ms-Callout.ms-Callout--actionText .ms-Callout-inner{padding-bottom:12px}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}.ms-CheckBox{box-sizing:border-box;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-CheckBox .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-CheckBox-input{position:absolute;opacity:0}.ms-CheckBox-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.ms-CheckBox-field:after{content:'\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:#fff;line-height:20px;width:20px;text-align:center}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field:after{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field:after{color:#fff}}.ms-CheckBox-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-CheckBox-field:focus:before,.ms-CheckBox-field:hover:before{border-color:#767676}.ms-CheckBox-field:focus .ms-Label,.ms-CheckBox-field:hover .ms-Label{color:#000}.ms-CheckBox-field.is-disabled{cursor:default}.ms-CheckBox-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled:before{border-color:#600000}}.ms-CheckBox-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-disabled .ms-Label{color:#600000}}.ms-CheckBox-field.in-focus:before{border-color:#767676}.ms-CheckBox-field.in-focus.is-disabled:before{border-color:#c8c8c8}.ms-CheckBox-field.in-focus.is-checked:before{border-color:#106ebe}.ms-CheckBox-field.is-checked:before{border:10px solid #0078d7;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CheckBox-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CheckBox-field.is-checked:before{border-color:#37006e}}.ms-CheckBox-field.is-checked:after{display:block}.ms-CheckBox-field.is-checked:focus:before,.ms-CheckBox-field.is-checked:hover:before{border-color:#106ebe}.ms-RadioButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;color:#333;font-size:14px;font-weight:400;min-height:36px;position:relative}.ms-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px;cursor:pointer;display:inline-block}.ms-RadioButton-input{position:absolute;opacity:0}.ms-RadioButton-field:before{content:'';display:inline-block;border:2px solid #a6a6a6;width:20px;height:20px;cursor:pointer;font-weight:400;position:absolute;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.ms-RadioButton-field:after{content:'';width:0;height:0;border-radius:50%;position:absolute;top:8px;left:8px;bottom:0;right:0;transition-property:top,left,width,height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field:after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field:after{color:#600000}}.ms-RadioButton-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative;outline:0;vertical-align:top}.ms-RadioButton-field:focus:before,.ms-RadioButton-field:hover:before{border-color:#767676}.ms-RadioButton-field:focus .ms-Label,.ms-RadioButton-field:hover .ms-Label{color:#000}.ms-RadioButton-field.is-disabled{cursor:default}.ms-RadioButton-field.is-disabled:before{background-color:#c8c8c8;border-color:#c8c8c8;color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled:before{border-color:#600000}}.ms-RadioButton-field.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-disabled .ms-Label{color:#600000}}.ms-RadioButton-field.is-disabled:focus:before,.ms-RadioButton-field.is-disabled:hover:before{border-color:#c8c8c8}.ms-RadioButton-field.in-focus:before{border-color:#767676}.ms-RadioButton-field.is-checked:before{border:2px solid #0078d7;background-color:transparent}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:before{border-color:#37006e}}.ms-RadioButton-field.is-checked:after{background-color:#0078d7;top:5px;left:5px;width:10px;height:10px}@media screen and (-ms-high-contrast:active){.ms-RadioButton-field.is-checked:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-RadioButton-field.is-checked:after{background-color:#37006e}}.ms-RadioButton-field.is-checked.in-focus:before,.ms-RadioButton-field.is-checked:focus:before,.ms-RadioButton-field.is-checked:hover:before{border-color:#0078d7}.ms-ChoiceFieldGroup{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;margin-bottom:4px}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#f4f4f4;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar .ms-CommandButton--actionButton{border-right:1px solid #eaeaea}.ms-CommandBar .ms-Button{height:100%}.ms-CommandBar .ms-Button.ms-Button--noLabel .ms-Button-icon{padding-right:0}.ms-CommandBar .ms-Button.is-hidden{display:none}.ms-CommandBar .ms-SearchBox,.ms-CommandBar .ms-SearchBox-field,.ms-CommandBar .ms-SearchBox-label{height:100%}.ms-CommandBar .ms-SearchBox{display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:220px}@media only screen and (max-width:639px){.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}}.ms-CommandBar .ms-CommandBar-overflowButton .ms-CommandButton-button{font-size:18px;padding:0 11px}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}@media only screen and (max-width:639px){.ms-CommandBar{height:44px}}@media only screen and (min-width:640px){.ms-CommandBar.search-expanded .ms-SearchBox{margin-right:8px}.ms-CommandBar .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{transition:none}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:4px;height:100%}.ms-CommandBar-sideCommands .ms-Button:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:20px}}.ms-CommandButton{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;display:inline-block;position:relative;vertical-align:top}.ms-CommandButton.is-hidden{display:none}.ms-CommandButton.is-disabled .ms-CommandButton-button,.ms-CommandButton:disabled .ms-CommandButton-button{cursor:default}.ms-CommandButton.is-disabled .ms-CommandButton-button:hover,.ms-CommandButton:disabled .ms-CommandButton-button:hover{background-color:#eff6fc}.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton.is-disabled .ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton:disabled .ms-CommandButton-button .ms-CommandButton-label{color:#a6a6a6}.ms-CommandButton .ms-ContextualMenu{display:none}.ms-CommandButton-button,.ms-CommandButton-splitIcon{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;cursor:pointer;display:inline-block;height:40px;line-height:40px;outline:1px solid transparent;padding:0 8px;position:relative;vertical-align:top;background:transparent}.ms-CommandButton-button:hover,.ms-CommandButton-splitIcon:hover{background-color:#eaeaea}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.ms-CommandButton-button:active,.ms-CommandButton-splitIcon:active{background-color:#eaeaea}.ms-CommandButton-button:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-button:focus,.ms-CommandButton-splitIcon:focus{outline:0}@media only screen and (max-width:639px){.ms-CommandButton-button,.ms-CommandButton-splitIcon{height:44px}.ms-CommandButton-button .ms-CommandButton-icon,.ms-CommandButton-splitIcon .ms-CommandButton-icon{font-size:20px}.ms-CommandButton-button .ms-CommandButton-label,.ms-CommandButton-splitIcon .ms-CommandButton-label{line-height:44px}}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}@media only screen and (max-width:639px){.ms-CommandButton+.ms-CommandButton{margin-left:4px}}.ms-CommandButton-icon{display:inline-block;margin-right:8px;position:relative;font-size:16px;min-width:16px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-CommandButton-label{font-size:14px;font-weight:400;color:#333;line-height:40px;height:100%;display:inline-block;vertical-align:top}.ms-CommandButton-label:hover{color:#212121}.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:inline-block;position:relative;color:#333;font-size:12px;font-weight:300;min-width:12px;height:100%;vertical-align:top;margin-left:8px}.ms-CommandButton-dropdownIcon .ms-Icon,.ms-CommandButton-splitIcon .ms-Icon{line-height:normal;padding-top:16px}.ms-CommandButton-dropdownIcon:focus:before,.ms-CommandButton-splitIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}@media only screen and (max-width:639px){.ms-CommandButton-dropdownIcon,.ms-CommandButton-splitIcon{display:none}}.ms-CommandButton-splitIcon{margin-left:-2px;width:27px;border:0}.ms-CommandButton-splitIcon .ms-Icon{margin-left:-1px;position:relative;padding-top:16px}.ms-CommandButton-splitIcon .ms-Icon:after{position:absolute;content:' ';width:1px;height:16px;top:12px;left:-8px;border-left:1px solid #c8c8c8}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{margin-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-button{padding:0 12px}.ms-CommandButton.ms-CommandButton--inline .ms-CommandButton-button{background:none}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-button{width:50px;height:40px}.ms-CommandButton.ms-CommandButton--actionButton .ms-CommandButton-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding-right:0}.ms-CommandButton.ms-CommandButton--pivot.is-active:before,.ms-CommandButton.ms-CommandButton--pivot:hover:before{content:'';height:2px;position:absolute;left:0;right:0;background-color:#0078d7;bottom:0;z-index:5}.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{display:inline-block}@media only screen and (max-width:479px){.ms-CommandButton.ms-CommandButton--pivot .ms-CommandButton-label,.ms-CommandButton.ms-CommandButton--textOnly .ms-CommandButton-label{font-size:16px}}.ms-ContextualMenu{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;display:block;min-width:180px;max-width:220px;list-style-type:none;position:relative;background-color:#fff}.ms-ContextualMenu.is-hidden{display:none}.ms-ContextualMenu-item{position:relative}.ms-ContextualMenu-link{box-sizing:border-box;text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:36px;overflow:hidden;line-height:34px;padding:0 16px 0 25px;position:relative;text-overflow:ellipsis;white-space:nowrap}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#f4f4f4;color:#212121}.ms-ContextualMenu-link:active .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:focus .ms-ContextualMenu-subMenuIcon,.ms-ContextualMenu-link:hover .ms-ContextualMenu-subMenuIcon{color:#212121}.ms-ContextualMenu-link:focus{outline:transparent;border:1px solid #666}.ms-ContextualMenu-link.is-selected{background-color:#dadada;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected~.ms-ContextualMenu-subMenuIcon{color:#000}.ms-ContextualMenu-link.is-selected:hover{background-color:#d0d0d0}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}.ms-ContextualMenu-link.is-disabled .ms-Icon{color:#a6a6a6;pointer-events:none;cursor:default}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:36px;line-height:36px;padding:0 18px}.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#333;font-size:8px;font-weight:600;width:24px;height:36px;line-height:36px;position:absolute;text-align:center;top:0;right:0;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header{padding:0 16px 0 26px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff;font-weight:600;color:#333}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;color:#333;content:'\E73E';font-size:10px;font-weight:800;height:36px;line-height:36px;position:absolute;left:7px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover{color:#212121;background-color:#f4f4f4}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:focus:after,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:hover:after{color:#212121}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active{color:#000;background-color:#d0d0d0}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:active:after{color:#000}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-ContextualMenu-link,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-ContextualMenu-link{padding-left:40px}.ms-ContextualMenu.ms-ContextualMenu--hasChecks .ms-Icon,.ms-ContextualMenu.ms-ContextualMenu--hasIcons .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);width:40px;text-align:center}.ms-ContextualMenu.ms-ContextualMenu--hasIcons{width:220px}.ms-DatePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-weight:100;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-weight:400;font-size:15px;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#b3d6f2}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-weight:400}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;text-align:center;line-height:40px;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:300;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-weight:300;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-weight:300;font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px;margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-weight:600;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-DetailsList{position:relative}.ms-DetailsList.is-horizontalConstrained{overflow-x:auto;overflow-y:inherit}.ms-DetailsList-cell{word-break:break-word}.ms-DetailsHeader{display:inline-block;min-width:100%;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid #eaeaea;margin-bottom:1px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-DetailsHeader.is-singleSelect{padding-left:40px}.ms-DetailsHeader.is-resizingColumn .ms-DetailsHeader-sizerCover{background:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:99;cursor:col-resize}.ms-DetailsHeader-cell.is-check .ms-Check-circle{visibility:hidden}.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,.ms-DetailsHeader.is-allSelected .ms-Check-circle{visibility:visible}.ms-DetailsHeader-cellWrapper{display:inline-block;position:relative}.ms-DetailsHeader-cellSizeWrapper{display:inline-block;vertical-align:top;margin-right:16px}.ms-DetailsHeader-cellSizeWrapper:last-child{margin-right:0}.ms-DetailsHeader-filterChevron.ms-Icon{color:#a6a6a6;padding-left:4px;vertical-align:middle}.ms-DetailsHeader-cell{display:inline-block;box-sizing:border-box;padding:0 8px;color:#a6a6a6;border:0;background:none;line-height:inherit;margin:0;font-size:inherit;font-family:inherit;text-align:left;height:36px;vertical-align:top}.ms-DetailsHeader-cell.is-check{position:relative;padding:8px 10px;margin:0}.ms-DetailsHeader-cell:focus{outline:transparent}.ms-DetailsHeader-cell.is-sortable{color:#000;cursor:default}.ms-DetailsHeader-cell.is-sortable:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter{position:absolute;right:0;width:20px;top:0;bottom:0;padding:0;text-align:center;color:#000}.ms-DetailsHeader-cell.is-filter:hover{background-color:#eaeaea}.ms-DetailsHeader-cell.is-filter:before{content:'';position:absolute;border-left:1px solid #a6a6a6;top:10px;bottom:10px;left:0}.ms-DetailsHeader-cell.is-sizer{position:absolute;width:16px;cursor:col-resize;bottom:0;top:0;height:inherit;z-index:99}.ms-DetailsHeader-cell.is-sorted.is-sortable .ms-DetailsHeader-sortArrow{display:inline}.ms-DetailsHeader-cellis-sortedDescending .ms-DetailsHeader-sortArrow{transform:rotate(180deg)}.ms-DetailsHeader-cell.is-resizing.is-sizer:after,.ms-DetailsHeader-cell.is-sizer:hover:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#eaeaea;border:1px solid #fff}.ms-DetailsHeader-cell:focus:before,.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus:before{content:'';pointer-events:none;position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsHeader-sortArrow.ms-Icon{font-size:12px;margin-right:4px;display:none;color:#a6a6a6}.ms-DetailsRow{position:relative;display:inline-block;min-width:100%;min-height:36px;vertical-align:top;white-space:nowrap;padding:10px 0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;box-sizing:border-box}.ms-DetailsRow:focus{outline:transparent}.ms-DetailsRow.ms-DetailsRow.is-selected{background:#deecf9}.ms-DetailsRow:hover,.ms-Fabric.is-stationary .ms-DetailsRow:hover{background:#eff6fc}.ms-DetailsRow.is-selected:hover,.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover{background:#b3d6f2}.ms-DetailsRow-cell{display:inline-block;box-sizing:border-box;padding:0 8px;vertical-align:top;white-space:normal;word-break:break-word;margin-right:16px}.ms-DetailsRow-cell.is-clipped{overflow:hidden}.ms-DetailsRow-cell:last-child{margin-right:0}.ms-DetailsRow-cellIcon{display:inline-block;margin-right:6px;position:relative;bottom:-2px}.ms-DetailsRow-check{display:inline-block;cursor:default;padding:10px;margin:-10px 0;box-sizing:border-box;vertical-align:top;background:none;border:0;visibility:hidden}.ms-DetailsRow-check:focus{outline:transparent}.ms-DetailsRow.is-selected .ms-DetailsRow-check,.ms-DetailsRow:hover .ms-DetailsRow-check,.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check{visibility:visible}.ms-DetailsRow:focus .ms-DetailsRow-focusBox,.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox{position:absolute;left:0;right:0;top:0;bottom:0;border:1px solid #a6a6a6}.ms-DetailsRow-cellMeasurer{position:absolute;visibility:hidden;white-space:nowrap;top:-1000000000}.ms-Check{display:inline-block;cursor:default;line-height:0;vertical-align:top}.ms-Check.is-checked .ms-Check-circle{fill:#0078d7;stroke:#fff;stroke-width:1px}.ms-Check.is-checked .ms-Check-check{stroke:#fff}.ms-Check-circle{fill:#fff;stroke:#c8c8c8}.ms-Check-check{stroke:#c8c8c8}.ms-Dialog{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:fixed;transform:translate(-50%,-50%);left:50%;top:50%}.ms-Dialog.is-open{display:block}.ms-Dialog-title{font-size:21px;font-weight:100;margin-bottom:24px}.ms-Dialog-content{position:relative}.ms-Dialog-subText{color:#333;font-size:12px;font-weight:300;line-height:1.5}.ms-Dialog-actions{margin-top:24px;text-align:right}.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{background-color:#0078d7;color:#fff;font-size:28px;font-weight:100;padding:28px 24px;margin-top:-28px;margin-left:-24px;margin-right:-24px}.ms-Dialog-buttonClose{background:none;border:0;cursor:pointer;margin:0;padding:4px;position:absolute;right:12px;top:12px;z-index:10}.ms-Dialog-buttonClose .ms-Icon.ms-Icon--Cancel{color:#666;font-size:16px}.ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-buttonClose{display:block}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items{display:block;position:absolute}.ms-Panel .ms-Dropdown-items{box-shadow:none;overflow-y:auto;padding-top:4px;max-height:100%}.ms-Panel .ms-Dropdown-items .ms-Dropdown-item{padding:7px 16px;overflow:hidden;text-overflow:ellipsis}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#212121;font-size:12px;position:absolute;right:13px;bottom:9px;z-index:1;pointer-events:none}.ms-Dropdown-title{box-sizing:border-box;margin:0;padding:0;box-shadow:none;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;padding:5px 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-title.ms-Dropdown-truncator{height:auto;display:block;position:absolute;visibility:hidden}.ms-Dropdown-items{box-sizing:border-box;margin:0;padding:0;box-shadow:none;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;z-index:400;overflow-y:scroll;top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:36px;padding:7px 10px;position:relative;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#b3d6f2;color:#000}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#b3d6f2}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-FacePile{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:32px;width:auto}.ms-FacePile .ms-FacePile-personaCardHost{display:none}.ms-FacePile-addButton{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-FacePile-addButton .ms-Persona-details,.ms-FacePile-addButton .ms-Persona-presence{display:none}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:focus,.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:hover{background-color:#005a9e}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:active{background-color:#004578}.ms-FacePile-addButton.ms-FacePile-addButton--addPerson:disabled{background-color:#c8c8c8}.ms-FacePile-addButton.ms-FacePile-addButton--overflow{background-color:#eaeaea;color:#666;display:none}.ms-FacePile-addButton.ms-FacePile-addButton--overflow.is-active{display:block}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:hover{color:#212121}.ms-FacePile-addButton.ms-FacePile-addButton--overflow:disabled{color:#c8c8c8}.ms-FacePile-addPersonIcon{position:relative;top:-1px}.ms-FacePile-overflowText{font-size:14px}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-Panel-headerText,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-resultAction,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-results,.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-FacePile-panel.ms-FacePile-panel--overflow .ms-PeoplePicker-selectedHeader{font-weight:100;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;color:#0078d7;text-decoration:none;cursor:pointer;outline:none}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-ListItem{padding:0;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-weight:300;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-weight:400;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-weight:300;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText{color:#333;font-weight:300;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px;background-color:#333}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-weight:600}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;position:absolute;top:14px;left:7px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\e73A';font-size:17px;color:#767676;position:absolute;top:23px;left:7px;border:0}.ms-ListItem.is-selected:hover{background-color:#b3d6f2;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:400;font-size:11px;padding-top:6px}.ms-MessageBanner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:0;background-color:transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{display:inline-block;padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-ContextualHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-ContextualHost.is-positioned{position:absolute;margin:0}.ms-ContextualHost.is-open{display:inline-block}.ms-ContextualHost-beak{box-shadow:0 0 15px -5px #3c3c3c;position:absolute;width:28px;height:28px;background:#fff;border:1px solid #eaeaea;box-sizing:border-box;top:-6px;display:none;transform:rotate(45deg);z-index:0;outline:1px solid transparent}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{top:40px;display:none}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak{left:-10px}.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{right:-10px}.ms-ContextualHost.ms-ContextualHost--arrowTop .ms-ContextualHost-beak{display:block;top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{display:block;bottom:-10px}.ms-ContextualHost-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;min-height:10px}.ms-ContextualHost-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:10}.ms-ContextualHost.ms-ContextualHost--close .ms-ContextualHost-title{margin-right:20px}.ms-ContextualHost.ms-ContextualHost--primaryArrow .ms-ContextualHost-beak{background-color:#0078d7}@media (min-width:480px){.ms-ContextualHost{margin:16px}.ms-ContextualHost.is-positioned{margin:0}.ms-ContextualHost.ms-ContextualHost--arrowLeft .ms-ContextualHost-beak,.ms-ContextualHost.ms-ContextualHost--arrowRight .ms-ContextualHost-beak{display:block}}.ms-MessageBar{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;padding:8px;display:table;background-color:#f4f4f4}.ms-MessageBar .ms-Link{font-size:12px}.ms-MessageBar-icon,.ms-MessageBar-text{display:table-cell;vertical-align:top}.ms-MessageBar-icon{padding-right:8px;font-size:16px;color:#767676}.ms-MessageBar-text{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:12px;font-weight:400}.ms-MessageBar.ms-MessageBar--warning{background-color:#fff4ce}.ms-MessageBar.ms-MessageBar--severeWarning{background-color:#fed9cc}.ms-MessageBar.ms-MessageBar--severeWarning .ms-MessageBar-icon{color:#d83b01}.ms-MessageBar.ms-MessageBar--error{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--error .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--blocked{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--blocked .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-OrgChart{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0}.ms-Overlay{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:hsla(0,0%,100%,.4);position:fixed;bottom:0;left:0;right:0;top:0;z-index:0;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-u-overflowHidden{overflow:hidden}.ms-Panel{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;background-color:#fff;width:100%;max-width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;right:0;bottom:0;z-index:10;display:none;height:100%}.ms-Panel.animate-in{animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel.animate-out{animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel.is-open{display:block}.ms-Panel .ms-CommandBar{padding-right:0;padding-left:8px}.ms-Panel.ms-Panel--md{max-width:340px}.ms-Panel.ms-Panel--lg{max-width:644px}.ms-Panel.ms-Panel--xl{max-width:940px}.ms-Panel.ms-Panel--xxl{max-width:1192px}.ms-Panel--left{box-shadow:-30px 0 30px 30px rgba(0,0,0,.2);left:0;right:auto}.ms-Panel--left.animate-in{animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-Panel--left.animate-out{animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:6px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:16px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-closeButton .ms-Icon--Cancel{margin-top:2px}@media (max-width:639px){.ms-Panel-closeButton{font-size:20px;line-height:20px;height:44px;right:4px}}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto;height:100%}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-weight:100;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}.ms-PanelHost{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10}.ms-PanelHost .ms-Overlay{cursor:pointer}.ms-PeoplePicker{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:1px solid #c8c8c8;cursor:text;-ms-flex-flow:row wrap;flex-flow:row wrap;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker-searchBox.is-active,.ms-PeoplePicker-searchBox:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-PeoplePicker-searchBox:focus,.ms-PeoplePicker-searchBox:hover{border-color:#37006e}}.ms-PeoplePicker-searchBox::-webkit-input-placeholder{color:#666}.ms-PeoplePicker-searchBox:-moz-placeholder,.ms-PeoplePicker-searchBox::-moz-placeholder{color:#666}.ms-PeoplePicker-searchBox:-ms-input-placeholder{color:#666}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined{border:0;margin-bottom:0;display:inline-block;width:100%;-ms-flex:1;flex:1}.ms-PeoplePicker-searchBox .ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.ms-PeoplePicker-persona{cursor:pointer}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{background-color:#fff;border:1px solid #c8c8c8;margin-bottom:-1px;padding-top:9px;width:100%;padding-left:0;box-sizing:border-box}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-weight:300;font-size:12px;padding-top:8px;padding-bottom:8px;text-transform:uppercase;padding-left:16px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative;margin-top:8px;margin-bottom:8px;padding-left:16px;cursor:pointer;outline:0}.ms-PeoplePicker-result:focus,.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result:focus{box-shadow:inset 0 0 0 1px #0078d7}.ms-PeoplePicker-result.is-selected{background-color:#b3d6f2}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:active,.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#69afe5}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:100%;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:40px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#a6a6a6}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{background:none;border:0;cursor:pointer;height:40px;position:relative;width:100%}.ms-PeoplePicker-searchMore:hover{background-color:#f4f4f4}.ms-PeoplePicker-searchMoreIcon{font-size:21px;height:40px;left:16px;line-height:40px;position:absolute;text-align:center;top:0;width:40px}.ms-PeoplePicker-searchMoreText{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;height:40px;left:64px;line-height:40px;position:absolute;top:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultAction{height:32px;width:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--facePile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--facePile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-placeholder,.ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-initials,.ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-presence,.ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-details,.ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-primaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-resultBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultAction,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-resultBtn{height:40px}}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-results.ms-PeoplePicker-results--facePile .ms-PeoplePicker-selected.is-active,.ms-PeoplePicker-selectedPeople .ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-weight:400;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;line-height:1;position:relative;width:100%;height:48px;display:table;table-layout:fixed;border-collapse:separate}.ms-Persona .ms-ContextualHost{display:none}.ms-Persona-imageArea{position:absolute;overflow:hidden;text-align:center;max-width:48px;height:48px;border-radius:50%;z-index:0;width:100%;top:0;left:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.ms-Persona-initials{color:#fff;font-size:17px;font-weight:100;line-height:48px}.ms-Persona-initials.ms-Persona-initials--blueLight{background-color:#00bcf2}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#0078d7}.ms-Persona-initials.ms-Persona-initials--blueDark{background-color:#002050}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#008272}.ms-Persona-initials.ms-Persona-initials--greenLight{background-color:#bad80a}.ms-Persona-initials.ms-Persona-initials--green{background-color:#107c10}.ms-Persona-initials.ms-Persona-initials--greenDark{background-color:#004b1c}.ms-Persona-initials.ms-Persona-initials--magentaLight{background-color:#e3008c}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#b4009e}.ms-Persona-initials.ms-Persona-initials--purpleLight{background-color:#b4a0ff}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#5c2d91}.ms-Persona-initials.ms-Persona-initials--black{background-color:#000}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#d83b01}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e81123}.ms-Persona-initials.ms-Persona-initials--redDark{background-color:#a80000}.ms-Persona-image{position:absolute;top:0;left:0;height:48px;z-index:10;width:100%}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff;text-align:center}@media screen and (-ms-high-contrast:active){.ms-Persona-presence{border-color:#000;box-shadow:inset 0 0 0 1px #1aebff;color:#000;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-presence{border-color:#fff;box-shadow:inset 0 0 0 1px #37006e;color:#fff;background-color:#000}}.ms-Persona-presenceIcon{color:#fff;font-size:8px;line-height:12px;vertical-align:top}.ms-Persona-details{padding:0 12px;vertical-align:middle;overflow:hidden;text-align:left;padding-left:60px;display:table-cell;width:100%}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-weight:400;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-weight:400;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;display:none}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--facePile,.ms-Persona.ms-Persona--token,.ms-Persona.ms-Persona--xs{height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-image,.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea,.ms-Persona.ms-Persona--token .ms-Persona-image,.ms-Persona.ms-Persona--token .ms-Persona-imageArea,.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{max-width:32px;height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-placeholder,.ms-Persona.ms-Persona--token .ms-Persona-placeholder,.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials,.ms-Persona.ms-Persona--token .ms-Persona-initials,.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-presence,.ms-Persona.ms-Persona--token .ms-Persona-presence,.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--token .ms-Persona-details,.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:40px}.ms-Persona.ms-Persona--facePile .ms-Persona-primaryText,.ms-Persona.ms-Persona--token .ms-Persona-primaryText,.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--facePile .ms-Persona-secondaryText,.ms-Persona.ms-Persona--token .ms-Persona-secondaryText,.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--sm{height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{max-width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:48px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--lg{height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{max-width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px;height:20px;width:20px;border-width:3px}.ms-Persona.ms-Persona--lg .ms-Persona-presenceIcon{line-height:20px;font-size:14px}.ms-Persona.ms-Persona--lg .ms-Persona-details{padding-left:84px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--xl{height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{max-width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:28px;width:28px;left:71px;border-width:4px}.ms-Persona.ms-Persona--xl .ms-Persona-presenceIcon{line-height:28px;font-size:21px;position:relative;top:1px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:120px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-weight:300;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#7fba00}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#fcd116}.ms-Persona.ms-Persona--away .ms-Persona-presenceIcon{position:relative;left:1px}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#fff}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:before{content:'';width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 2px #d93b3b;border-radius:50%}.ms-Persona.ms-Persona--blocked .ms-Persona-presence:after{content:'';width:100%;height:2px;background-color:#d93b3b;transform:rotate(-45deg);position:absolute;top:5px;left:0}.ms-Persona.ms-Persona--blocked.ms-Persona--lg .ms-Persona-presence:after{top:9px}.ms-Persona.ms-Persona--blocked.ms-Persona--xl .ms-Persona-presence:after{top:13px}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#37006e}}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#000;box-shadow:inset 0 0 0 1px #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#fff;box-shadow:inset 0 0 0 1px #000}}.ms-Persona.ms-Persona--facePile{display:inline-block;width:auto}.ms-Persona.ms-Persona--facePile:hover{cursor:pointer}.ms-Persona.ms-Persona--facePile .ms-Persona-imageArea{position:relative;width:100%;min-width:32px}.ms-Persona.ms-Persona--facePile .ms-Persona-initials{position:relative}.ms-Persona.ms-Persona--facePile .ms-Persona-details,.ms-Persona.ms-Persona--facePile .ms-Persona-presence{display:none}.ms-Persona.ms-Persona--token{display:-ms-inline-flexbox;display:inline-flex;width:auto;background-color:#f4f4f4;border-radius:20px;margin:4px}.ms-Persona.ms-Persona--token:hover{cursor:pointer}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon{border-radius:20px;display:inline-block;width:32px;height:32px;padding:0;line-height:30px;transition:background-color .167s cubic-bezier(.1,.9,.2,1);text-align:center}.ms-Persona.ms-Persona--token .ms-Persona-actionIcon:hover{background-color:#eaeaea}.ms-Persona.ms-Persona--token .ms-Persona-imageArea{width:100%;min-width:32px}.ms-Persona.ms-Persona--token .ms-Persona-details{height:30px;display:inline-block;width:auto;padding-right:8px}.ms-Persona.ms-Persona--token .ms-Persona-primaryText{padding-top:0;line-height:34px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both;color:#333;font-size:14px;font-weight:400;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4;padding-top:12px;padding-bottom:12px;padding-left:20px}.ms-PersonaCard-actions{box-sizing:border-box;position:relative;list-style:none;margin:0;padding:0 10px;background-color:#fff;height:48px}.ms-PersonaCard-actions:before{content:'';position:absolute;top:47px;left:0;width:100%;border-top:1px solid #c8c8c8}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:16px;height:48px;line-height:48px;padding:0 10px;color:#666;outline:transparent;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.ms-PersonaCard-action:before,.ms-PersonaCard-overflow:before{content:'';position:absolute;width:100%;height:100%;background-color:transparent;top:0;left:0;z-index:100}.ms-PersonaCard-action.is-active,.ms-PersonaCard-overflow.is-active{color:#0078d7}.ms-PersonaCard-action.is-active:after,.ms-PersonaCard-overflow.is-active:after{box-sizing:border-box;transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:13px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:-95px}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-details{display:none;width:100%;margin:0;max-height:300px;min-height:48px;color:#666;padding:9px 20px;box-sizing:border-box}.ms-PersonaCard-details.is-active{display:block}.ms-PersonaCard-details.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-details.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\E70D'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:16px;height:30px;line-height:30px;margin-top:2px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E70E'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after{display:none}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}.ms-ContextualHost .ms-PersonaCard{box-shadow:none}}.ms-Pivot{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;font-size:14px;font-weight:400}.ms-Pivot-links{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.ms-Pivot-link{color:#333;display:inline-block;font-size:14px;font-weight:400;line-height:40px;margin-right:8px;padding:0 8px;text-align:center;vertical-align:top}.ms-Pivot-link:hover{cursor:pointer}.ms-Pivot-link:before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color .267s cubic-bezier(.1,.25,.75,.9)}.ms-Pivot-link:after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.ms-Pivot-link.is-selected{font-weight:600;position:relative}.ms-Pivot-link.is-selected:before{background-color:#0078d7}.ms-Pivot-link.is-disabled{color:#a6a6a6}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active{color:#0078d7}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot-content{display:none;margin-top:20px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected{font-weight:300}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff;background-color:#0078d7}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-weight:300}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-weight:600}}.ms-ProgressIndicator{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400}.ms-ProgressIndicator-itemName{color:#333;font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription{color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{background-color:#0078d7;height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:36px;color:#333;font-size:14px;font-weight:400;position:relative;margin-bottom:10px;display:inline-block;overflow:hidden;background-color:#fff}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-SearchBox-clear{display:block}.ms-SearchBox:hover{background-color:#deecf9}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled{background-color:#f4f4f4;pointer-events:none}.ms-SearchBox.is-disabled .ms-SearchBox-icon,.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-field{color:#a6a6a6;background-color:transparent;border-color:#f4f4f4;cursor:default}.ms-SearchBox-clear{display:none;position:absolute;top:0;right:0;z-index:10}.ms-SearchBox-clear .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:36px}.ms-SearchBox-clear .ms-CommandButton-icon{color:#fff}.ms-SearchBox-icon{position:relative;top:50%;transform:translateY(-50%);display:inline-block;font-size:16px;width:16px;margin-left:12px;margin-right:6px;color:#0078d7;vertical-align:top}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #69afe5;outline:1px solid transparent;font-weight:300;font-size:14px;color:#000;height:36px;padding:6px 3px 7px 45px;width:208px;background-color:transparent;z-index:5;transition:padding-left .167s}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-label{position:absolute;top:0;left:0;height:36px;line-height:36px;color:#666}.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;width:208px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:40px;line-height:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{transition:none;border:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field:focus{background-color:transparent;padding:6px 3px 7px 45px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{display:none;position:absolute;top:0;z-index:10;color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button{height:40px;background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter{right:8px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:before{position:absolute;content:' ';right:0;bottom:0;left:0;margin:0 8px;border-bottom:1px solid #eaeaea}.ms-SearchBox.ms-SearchBox--commandBar:hover{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-label{color:#212121}.ms-SearchBox.ms-SearchBox--commandBar:hover .ms-SearchBox-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:focus{background-color:transparent}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-CommandButton .ms-SearchBox-filter{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed{width:50px;min-height:40px;z-index:0;background-color:#f4f4f4}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer;width:calc(100% - 50px)}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed:before{visibility:hidden}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-field{display:block;cursor:text}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-text{display:inline-block}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active{width:100%}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-clear{display:inline-block;right:58px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-filter{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active.is-animated{transition:width .167s cubic-bezier(.1,.9,.2,1)}}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active:before{visibility:visible}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon{color:#a6a6a6}.ms-SearchBox.ms-SearchBox--commandBar.has-text .ms-SearchBox-clear .ms-CommandButton-icon:active{color:#0078d7}@media only screen and (min-width:1024px){.ms-SearchBox.ms-SearchBox--commandBar{background-color:#fff;border-right:1px solid #eaeaea}}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{height:44px;line-height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{font-size:20px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-clear .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-exit .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-filter .ms-CommandButton-button,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon .ms-CommandButton-button{height:44px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field,.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{font-size:16px}}.ms-SearchBox.ms-SearchBox--commandBar.is-active{background-color:#fff}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label{display:block;line-height:40px;height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-label .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active:before{visibility:visible}@media only screen and (max-width:639px){.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-field{width:100%;padding-right:100px}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-icon{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-exit{display:inline-block}.ms-SearchBox.ms-SearchBox--commandBar.is-active.has-text .ms-SearchBox-filter .ms-CommandButton-icon{color:#a6a6a6}}.ms-Spinner{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Spinner-label,.ms-Table{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-weight:300;font-size:12px;color:#333}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#b3d6f2}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{content:'\E73A';color:#fff}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-weight:300;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;speak:none;content:'\E739';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:1px}.ms-Table--selectable .ms-Table-row:hover,.ms-Table--selectable tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField .ms-Label{font-size:14px;font-weight:600}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled::-moz-placeholder{color:#a6a6a6}.ms-TextField.is-disabled:-ms-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-required:-ms-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-weight:300;font-size:14px;color:#333;height:32px;padding:6px 12px 7px;width:100%;min-width:180px;outline:0;text-overflow:ellipsis}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field[disabled]{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-field:-moz-placeholder,.ms-TextField-field::-moz-placeholder{color:#666}.ms-TextField-field:-ms-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative;background-color:#fff}.ms-TextField.ms-TextField--placeholder .ms-TextField-field{position:relative;background-color:transparent;z-index:5}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:14px;color:#666;padding:6px 12px 7px;pointer-events:none;z-index:0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:14px;margin-right:8px;display:table-cell;vertical-align:top;padding-left:12px;padding-top:9px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:3px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#666;font-size:14px;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{-webkit-font-smoothing:antialiased;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-size:12px;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}.ms-Toggle{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;top:-2px;padding:0 0 0 50px}.ms-Toggle .ms-Toggle-field:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';left:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field:before{border-color:#000}}.ms-Toggle .ms-Toggle-field:before{right:auto}.ms-Toggle .ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle .ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle .ms-Toggle-field.is-selected{background-color:#0078d7;border-color:#0078d7}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;top:3px;width:10px;height:10px;border-radius:10px;content:'';right:4px;background-color:#666;outline:1px solid transparent;transition-property:background,left;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1)}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected:before{border-color:#000}}.ms-Toggle .ms-Toggle-field.is-selected:before{background-color:#fff;left:28px}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--off{display:none}.ms-Toggle .ms-Toggle-field.is-selected .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle .ms-Toggle-field.is-selected{background-color:#000}}.ms-Toggle:focus+.ms-Toggle-field,.ms-Toggle:hover+.ms-Toggle-field{border-color:#666}.ms-Toggle:focus+.ms-Toggle-field:before,.ms-Toggle:hover+.ms-Toggle-field:before{background-color:#333}.ms-Toggle:focus:checked+.ms-Toggle-field,.ms-Toggle:hover:checked+.ms-Toggle-field{background-color:#106ebe;border-color:#106ebe}.ms-Toggle:focus:checked+.ms-Toggle-field:before,.ms-Toggle:hover:checked+.ms-Toggle-field:before{background-color:#fff}.ms-Toggle:active:checked+.ms-Toggle-field{background-color:#005a9e;border-color:#005a9e}.ms-Toggle .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{border-color:#333}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#106ebe;border-color:#106ebe}.ms-Toggle .ms-Toggle-field .ms-Label{color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Toggle .ms-Toggle-field:hover .ms-Label{color:#000}.ms-Toggle .ms-Toggle-field:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff;border-color:#c8c8c8;pointer-events:none;cursor:default}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:14px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:45px;height:20px;box-sizing:border-box;border:2px solid #a6a6a6;border-radius:20px;cursor:pointer;transition-property:background,left,border-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.23,1);outline:0}.ms-Toggle-field:focus,.ms-Toggle-field:hover{border-color:#666}.ms-Toggle-input{display:none}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}.u-contentCenter{position:relative;margin:0 auto;max-width:100%;transition:all .167s cubic-bezier(.1,.9,.2,1)}@media (min-width:640px){.u-contentCenter{max-width:960px}}@media (min-width:1366px){.ChannelPage .u-contentCenter,.HomePage .u-contentCenter{max-width:1200px}}*{box-sizing:border-box}body,html{padding:0;margin:0}a,body,html{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400}a{color:#0078d7;cursor:pointer;outline:none;font-size:inherit;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}.VideoPortal-content{position:relative}.VideoPortal-navBar{display:block;top:0;width:100%;z-index:101;height:40px}.VideoPortal-page{overflow:visible;position:relative;padding-bottom:50px}.ms-CommandBar--navBar{background-color:#f4f4f4}.VideoList-item.ms-Grid-col{margin-bottom:16px;float:none;display:inline-block;vertical-align:top;padding-left:8px;padding-right:12px}.VideoList-thumbLink{display:block;position:relative;width:100%;padding-bottom:56.25%}.VideoList-thumbImg{max-width:100%;min-width:100%;position:absolute}.VideoList-thumbCaption{position:absolute;right:5px;bottom:5px;padding:3px;color:#fff;font-size:12px;background-color:rgba(0,0,0,.4)}.VideoList-text{padding-top:5px;margin:0}.VideoList-channel,.VideoList-title,.VideoList-viewCount{display:block}.VideoList-title{display:block;top:0;left:10px;bottom:50%;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.VideoList-channel{bottom:1.2em}.VideoList-viewCount{bottom:0}@media (min-width:480px){.VideoList-item{margin-right:-4px}}.SpotLight-container{background-color:#212121}.SpotLightList{white-space:nowrap;overflow-x:scroll;overflow-y:hidden;position:relative}.SpotLight-title{text-indent:16px}.SpotLight-item{position:relative;display:inline-block;float:none;margin:0}.SpotLight-thumb{padding:10px}.SpotLight-thumbImg{max-width:100%;min-width:100%}.SpotLight-text{position:absolute;right:10px;bottom:13px;left:10px;overflow:hidden;color:#fff;background:rgba(0,0,0,.4);padding:5px}.SpotLight-videoLength,.SpotLight-videoTitle{color:#fff;display:block}@media (min-width:640px){.SpotLightList{overflow:hidden}.SpotLight-container{padding:10px 0}}@media (min-width:1024px){.SpotLight-title{text-indent:8px}}.HomePage-content{padding:10px;padding-top:20px}.ChannelList-title{padding-left:10px;border-width:4px;border-left-style:solid}.ChannelList-titleText{margin-right:7px}.PlayerPage-theater{background-color:#212121}.VideoPlayer-player{max-width:100%;position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.VideoPlayer-player .VideoPlayer-iframe,.VideoPlayer-player iframe,.VideoPlayer-player video{background-color:#666;position:absolute;top:0;left:0;width:1px;min-width:100%;*width:100%;height:100%;min-height:100%;cursor:pointer}.VideoPlayer-player .VideoPlayer-iframe:after,.VideoPlayer-player iframe:after,.VideoPlayer-player video:after{position:absolute;content:'';display:block;width:0;height:0;border-top:60px solid transparent;border-bottom:60px solid transparent;border-left:90px solid rgba(0,0,0,.4);top:50%;left:50%;transform:translate(-50%,-50%);transition:border-color .167s cubic-bezier(.1,.25,.75,.9)}.VideoPlayer-player .VideoPlayer-iframe:hover:after,.VideoPlayer-player iframe:hover:after,.VideoPlayer-player video:hover:after{border-left-color:rgba(0,0,0,.75)}.PlayerPage-content{padding:0 10px}.PlayerPage-info{padding-right:32px}.PlayerPage-header,.PlayerPage-info{margin-bottom:20px}.PlayerPage-titleArea{margin-top:17px;margin-bottom:8px}.PlayerPage-title{margin-bottom:5px;margin-top:0;display:inline-block}.PlayerPage-titleSeparator{display:inline-block;margin:0 10px;position:relative;bottom:2px}.PlayerPage-channelLink{font-size:17px;padding-left:10px;border-width:4px;border-left-style:solid}.PlayerPage-channelLink:hover{color:#000}.PlayerPage-channelText{position:relative;bottom:2px}.PlayerPage-descriptionArea,.PlayerPage-metaData{margin-bottom:10px}.PlayerPage-description{display:inline;word-wrap:break-word}.PlayerPage-descriptionField{position:relative;margin-top:17px}.PlayerPage-viewCountText{margin-right:5px}.SampleVideo-content{background-color:#333;height:120px}@media (min-width:320px){.PlayerPage-content{padding:0 10px 0 16px}.PlayerPage-grid{padding:0}}@media (min-width:480px){.PlayerPage-relatedList .VideoList-title{font-size:15px;margin-bottom:5px}.PlayerPage-relatedList .VideoList-channel,.PlayerPage-relatedList .VideoList-viewCount{font-size:14px}}@media (min-width:640px){.PlayerPage-header{margin-bottom:25px}.PlayerPage-titleArea{margin-top:35px}.PlayerPage-description{font-size:14px}.PlayerPage-title{font-size:28px}.PlayerPage-metaData{font-size:17px}.PlayerPage-channelLink{font-size:21px}}@media (min-width:1024px){.PlayerPage-content{padding:0}.PlayerPage-relatedTitle{margin-top:42px}.PlayerPage-relatedList .VideoList-text{padding-top:0}.PlayerPage-relatedList .VideoList-title{margin-bottom:5px;line-height:1.2em;max-height:3.6em;overflow:hidden;white-space:normal}}.ChannelPage-content{padding:10px;padding-top:20px}.ChannelPage-pivots{margin-bottom:20px}.ChannelPage-pivots .ms-Pivot-link{font-size:21px}.ChannelsPage{padding:10px}.ChannelGroup-title{padding-bottom:10px;border-bottom:1px solid #eaeaea}.ChannelGroup-channel{padding:10px 0 10px 10px;border-width:4px;border-left-style:solid;margin-bottom:10px;display:block}.ChannelGroup-channel:hover{color:#000}@media (min-width:480px){.ChannelsPage{padding:20px}}
\ No newline at end of file
diff --git a/dist/documentation/Samples/VideoPortal/index.html b/dist/documentation/Samples/VideoPortal/index.html
new file mode 100644
index 00000000..2e30a6c3
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/index.html
@@ -0,0 +1,302 @@
+
+
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Samples/VideoPortal/player.html b/dist/documentation/Samples/VideoPortal/player.html
new file mode 100644
index 00000000..b8bdb3a7
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/player.html
@@ -0,0 +1,216 @@
+
+
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Uploaded on
+ July 27, 2014
+ |
+ 345 views
+
+
+
+ Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
+
+
+
+
+
+
You might also like
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/documentation/Samples/VideoPortal/sass/Base.scss b/dist/documentation/Samples/VideoPortal/sass/Base.scss
new file mode 100644
index 00000000..13e67dd0
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/Base.scss
@@ -0,0 +1,42 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Base styles
+
+
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ @include ms-font-m;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ @include ms-Link;
+ font-size: inherit;
+ text-decoration: none;
+}
+
+.VideoPortal-content {
+ position: relative;
+}
+
+.VideoPortal-navBar {
+ display: block;
+ top: 0;
+ width: 100%;
+ z-index: 101;
+ height: 40px;
+}
+
+.VideoPortal-page {
+ overflow: visible;
+ position: relative;
+ padding-bottom: 50px;
+}
diff --git a/dist/documentation/Samples/VideoPortal/sass/ChannelPage.scss b/dist/documentation/Samples/VideoPortal/sass/ChannelPage.scss
new file mode 100644
index 00000000..23e9446c
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/ChannelPage.scss
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Individual Channel Page styles
+
+
+.ChannelPage-content {
+ padding: 10px;
+ padding-top: 20px;
+}
+
+.ChannelPage-pivots {
+ margin-bottom: 20px;
+
+ // Small override for Fabric Pivot component
+ .ms-Pivot-link {
+ font-size: $ms-font-size-xl;
+ }
+}
diff --git a/dist/documentation/Samples/VideoPortal/sass/ChannelsPage.scss b/dist/documentation/Samples/VideoPortal/sass/ChannelsPage.scss
new file mode 100644
index 00000000..4d49d1b4
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/ChannelsPage.scss
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Channels List page styles
+
+
+.ChannelsPage {
+ padding: 10px;
+}
+
+.ChannelGroup-title {
+ padding-bottom: 10px;
+ border-bottom: 1px solid $ms-color-neutralLight;
+}
+
+.ChannelGroup-channel {
+ padding: 10px 0 10px 10px;
+ border-width: 4px;
+ border-left-style: solid;
+ margin-bottom: 10px;
+ display: block;
+
+ &:hover {
+ color: $ms-color-black;
+ }
+}
+
+@media (min-width: $ms-screen-md-min) {
+ .ChannelsPage {
+ padding: 20px;
+ }
+}
diff --git a/dist/documentation/Samples/VideoPortal/sass/HomePage.scss b/dist/documentation/Samples/VideoPortal/sass/HomePage.scss
new file mode 100644
index 00000000..a936a063
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/HomePage.scss
@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Home page styles
+
+
+.HomePage-content {
+ padding: 10px;
+ padding-top: 20px;
+}
+
+.ChannelList-title {
+ padding-left: 10px;
+ border-width: 4px;
+ border-left-style: solid;
+}
+
+.ChannelList-titleText {
+ margin-right: 7px;
+}
diff --git a/dist/documentation/Samples/VideoPortal/sass/NavBar.scss b/dist/documentation/Samples/VideoPortal/sass/NavBar.scss
new file mode 100644
index 00000000..ef99eb2a
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/NavBar.scss
@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Fabric NavBar override styles
+
+.ms-CommandBar--navBar {
+ background-color: $ms-color-neutralLighter;
+}
\ No newline at end of file
diff --git a/dist/documentation/Samples/VideoPortal/sass/PlayerPage.scss b/dist/documentation/Samples/VideoPortal/sass/PlayerPage.scss
new file mode 100644
index 00000000..e9baf3b8
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/PlayerPage.scss
@@ -0,0 +1,203 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Video Player page styles
+
+
+.PlayerPage-theater {
+ background-color: $ms-color-neutralDark;
+}
+
+.VideoPlayer-player {
+ max-width: 100%;
+ position: relative;
+ padding-bottom: 56.25%; // Necessary to maintain 16:9 aspect ratio
+ height: 0;
+ overflow: hidden;
+
+ iframe,
+ video,
+ .VideoPlayer-iframe {
+ background-color: $ms-color-neutralSecondary;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1px;
+ min-width: 100%;
+ *width: 100%;
+ height: 100%;
+ min-height: 100%;
+ cursor: pointer;
+
+ // "Play" arrow button
+ &::after {
+ position: absolute;
+ content: '';
+ display: block;
+ width: 0;
+ height: 0;
+ border-top: 60px solid transparent;
+ border-bottom: 60px solid transparent;
+ border-left: 90px solid rgba(0,0,0,.4);
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ transition: $ms-duration1 border-color $ms-ease2;
+ }
+
+ &:hover::after {
+ border-left-color: rgba(0,0,0,.75);
+ }
+ }
+}
+
+.PlayerPage-content {
+ padding: 0 10px;
+}
+
+.PlayerPage-info {
+ margin-bottom: 20px;
+ padding-right: 32px;
+}
+
+.PlayerPage-header {
+ margin-bottom: 20px;
+}
+
+.PlayerPage-titleArea {
+ margin-top: 17px;
+ margin-bottom: 8px;
+}
+
+.PlayerPage-title {
+ margin-bottom: 5px;
+ margin-top: 0;
+ display: inline-block;
+}
+
+.PlayerPage-titleSeparator {
+ display: inline-block;
+ margin: 0 10px;
+ position: relative;
+ bottom: 2px;
+}
+
+.PlayerPage-channelLink {
+ font-size: $ms-font-size-l;
+ padding-left: 10px;
+ border-width: 4px;
+ border-left-style: solid;
+
+ &:hover {
+ color: $ms-color-black;
+ }
+}
+
+.PlayerPage-channelText {
+ position: relative;
+ bottom: 2px;
+}
+
+.PlayerPage-metaData {
+ margin-bottom: 10px;
+}
+
+.PlayerPage-descriptionArea {
+ margin-bottom: 10px;
+}
+
+.PlayerPage-description {
+ display: inline;
+ word-wrap: break-word;
+}
+
+.PlayerPage-descriptionField {
+ position: relative;
+ margin-top: 17px;
+}
+
+.PlayerPage-viewCountText {
+ margin-right: 5px;
+}
+
+.SampleVideo-content {
+ background-color: $ms-color-neutralPrimary;
+ height: 120px;
+}
+
+
+@media (min-width: $ms-screen-sm-min) {
+ .PlayerPage-content {
+ padding: 0 10px 0 16px;
+ }
+
+ .PlayerPage-grid {
+ padding: 0;
+ }
+}
+
+@media (min-width: $ms-screen-md-min) {
+ .PlayerPage-relatedList {
+ .VideoList-title {
+ font-size: $ms-font-size-m-plus;
+ margin-bottom: 5px;
+ }
+
+ .VideoList-channel,
+ .VideoList-viewCount {
+ font-size: $ms-font-size-m;
+ }
+ }
+}
+
+@media (min-width: $ms-screen-lg-min) {
+ .PlayerPage-header {
+ margin-bottom: 25px;
+ }
+
+ .PlayerPage-titleArea {
+ margin-top: 35px;
+ }
+
+ .PlayerPage-description {
+ font-size: $ms-font-size-m;
+ }
+
+ .PlayerPage-title {
+ font-size: $ms-font-size-xxl;
+ }
+
+ .PlayerPage-metaData {
+ font-size: $ms-font-size-l;
+ }
+
+ .PlayerPage-channelLink {
+ font-size: $ms-font-size-xl;
+ }
+}
+
+@media (min-width: $ms-screen-xl-min) {
+ .PlayerPage-content {
+ padding: 0;
+ }
+
+ .PlayerPage-relatedTitle {
+ margin-top: 42px;
+ }
+
+ .PlayerPage-relatedList {
+ .VideoList-text {
+ padding-top: 0;
+ }
+
+ .VideoList-title {
+ margin-bottom: 5px;
+ line-height: 1.2em;
+ max-height: 3.6em;
+ overflow: hidden;
+ white-space: normal;
+ }
+ }
+}
diff --git a/dist/documentation/Samples/VideoPortal/sass/SpotLight.scss b/dist/documentation/Samples/VideoPortal/sass/SpotLight.scss
new file mode 100644
index 00000000..031dffaa
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/SpotLight.scss
@@ -0,0 +1,72 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// "Spotlight" container styles that celebrate a selection of videos
+
+
+.SpotLight-container {
+ background-color: $ms-color-neutralDark;
+}
+
+.SpotLightList {
+ white-space: nowrap;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ position: relative;
+}
+
+.SpotLight-title {
+ text-indent: 16px;
+}
+
+.SpotLight-item {
+ position: relative;
+ display: inline-block;
+ float: none;
+ margin: 0;
+}
+
+.SpotLight-thumb {
+ padding: 10px;
+}
+
+.SpotLight-thumbImg {
+ max-width: 100%;
+ min-width: 100%;
+}
+
+.SpotLight-text {
+ position: absolute;
+ right: 10px;
+ bottom: 13px;
+ left: 10px;
+ overflow: hidden;
+ color: #fff;
+ background: rgba(0,0,0,.4);
+ padding: 5px;
+}
+
+.SpotLight-videoTitle,
+.SpotLight-videoLength {
+ color: $ms-color-white;
+ display: block;
+}
+
+
+@media (min-width: $ms-screen-lg-min) {
+ .SpotLightList {
+ overflow: hidden;
+ }
+
+ .SpotLight-container {
+ padding: 10px 0;
+ }
+}
+
+@media (min-width: $ms-screen-xl-min) {
+ .SpotLight-title {
+ text-indent: 8px;
+ }
+}
diff --git a/dist/documentation/Samples/VideoPortal/sass/Utilities.scss b/dist/documentation/Samples/VideoPortal/sass/Utilities.scss
new file mode 100644
index 00000000..d5afe890
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/Utilities.scss
@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Utility classes
+
+
+.u-contentCenter { // Utility for centering page areas regardless of parent container
+ position: relative;
+ margin: 0 auto;
+ max-width: 100%;
+ transition: $ms-duration1 all $ms-ease1;
+}
+
+@media (min-width: $ms-screen-lg-min) {
+ .u-contentCenter {
+ max-width: 960px;
+ }
+}
+
+@media (min-width: $ms-screen-xxl-min) { // 1366
+ // Use a larger container size for non-player pages
+ .HomePage,
+ .ChannelPage {
+ .u-contentCenter {
+ max-width: 1200px;
+ }
+ }
+}
diff --git a/dist/documentation/Samples/VideoPortal/sass/VideoListItem.scss b/dist/documentation/Samples/VideoPortal/sass/VideoListItem.scss
new file mode 100644
index 00000000..fa9bfae9
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/VideoListItem.scss
@@ -0,0 +1,75 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Video Item tile styles
+
+
+.VideoList-item.ms-Grid-col {
+ margin-bottom: 16px;
+ float: none;
+ display: inline-block;
+ vertical-align: top;
+ padding-left: 8px;
+ padding-right: 12px;
+}
+
+.VideoList-thumbLink {
+ display: block;
+ position: relative;
+ width: 100%;
+ padding-bottom: 56.25%;
+}
+
+.VideoList-thumbImg {
+ max-width: 100%;
+ min-width: 100%;
+ position: absolute;
+}
+
+.VideoList-thumbCaption {
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ padding: 3px;
+ color: $ms-color-white;
+ font-size: $ms-font-size-s;
+ background-color: rgba(0,0,0,.4);
+}
+
+.VideoList-text {
+ padding-top: 5px;
+ margin: 0;
+}
+
+.VideoList-title,
+.VideoList-channel,
+.VideoList-viewCount {
+ display: block;
+}
+
+.VideoList-title {
+ display: block;
+ top: 0;
+ left: 10px;
+ bottom: 50%;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.VideoList-channel {
+ bottom: 1.2em;
+}
+
+.VideoList-viewCount {
+ bottom: 0;
+}
+
+@media (min-width: $ms-screen-md-min) {
+ .VideoList-item {
+ margin-right: -4px; // Need to offset margins from inline-block elements
+ }
+}
diff --git a/dist/documentation/Samples/VideoPortal/sass/VideoPortal.scss b/dist/documentation/Samples/VideoPortal/sass/VideoPortal.scss
new file mode 100644
index 00000000..5e9b1cf3
--- /dev/null
+++ b/dist/documentation/Samples/VideoPortal/sass/VideoPortal.scss
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Video Portal Example App
+// --------------------------------------------------
+// Load all page and component styles
+
+
+// Import both Fabric and Fabric Components by reference to access variables
+// and mixins from each without compiling their contents.
+@import '../../../../node_modules/office-ui-fabric-core/src/sass/Fabric.Common.scss';
+@import '../../../sass/Fabric.Components.scss';
+
+// Import all LESS
+@import 'Utilities';
+@import 'Base.scss';
+@import 'NavBar';
+@import 'VideoListItem';
+@import 'SpotLight';
+@import 'HomePage';
+@import 'PlayerPage';
+@import 'ChannelPage';
+@import 'ChannelsPage';
diff --git a/dist/documentation/demo.css b/dist/documentation/demo.css
new file mode 100644
index 00000000..9466e81b
--- /dev/null
+++ b/dist/documentation/demo.css
@@ -0,0 +1,291 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+/*Variables*/
+/* DOCUMENTATION SPECIFIC STYLING */
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+}
+
+body {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+h1 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 28px;
+ font-weight: 100;
+}
+
+h2 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 21px;
+ font-weight: 100;
+}
+
+h3 {
+ font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: 17px;
+ font-weight: 300;
+}
+
+.componentDemo {
+ padding: 0 20px;
+}
+
+#componentWrapper {
+ width: calc(100% - 56px);
+ height: 100%;
+ padding: 0 28px;
+}
+
+.sample-wrapper {
+ margin: 28px 0;
+}
+
+.sample-wrapper > .ms-Overlay {
+ display: block;
+ position: relative;
+ height: 300px;
+ box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
+}
+
+.ms-NavBar-item .ms-ContextualMenu {
+ position: absolute;
+}
+
+.ms-CommandBar .ms-ContextualMenu {
+ position: absolute;
+}
+
+pre {
+ white-space: pre-wrap;
+}
+
+#Header {
+ position: absolute;
+ top: 0;
+ height: 47px;
+ left: 0;
+ right: 0;
+ line-height: 47px;
+ padding: 0 20px;
+ overflow: hidden;
+ white-space: no-wrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+#Header .Header-Title {
+ display: inline-block;
+}
+
+#Header .Header-Title:hover {
+ cursor: default;
+}
+
+#Header .Header-buttons {
+ -webkit-font-smoothing: auto;
+}
+
+#Header .Header-button {
+ position: relative;
+ text-decoration: none;
+ background: 0 0;
+ color: #ffffff;
+ border: none;
+ padding: 0;
+ padding: 0 10px;
+ min-width: 50px;
+ height: 50px;
+ line-height: 50px;
+ margin: 0 5px;
+ text-transform: uppercase;
+ display: inline-block;
+ vertical-align: top;
+ box-sizing: border-box;
+}
+
+#Header .Header-button:hover {
+ background-color: #0078d7;
+}
+
+html[dir=ltr] #ContentContainer {
+ left: 300px;
+ right: 0;
+}
+
+html[dir=ltr] .ms-Nav-groupButton {
+ text-align: left;
+}
+
+html[dir=ltr] .ms-Nav-groupChevron.ms-Icon {
+ left: 15px;
+}
+
+html[dir=ltr] #Header .HeaderTitle {
+ padding: 5px 0px 5px 20px;
+}
+
+html[dir=ltr] #Header .Header-buttons {
+ float: right;
+}
+
+html[dir=ltr] #SidebarContainer {
+ border-right: 1px solid #eeeeee;
+ left: 0;
+}
+
+html[dir=rtl] #ContentContainer {
+ left: 0;
+ right: 300px;
+}
+
+html[dir=rtl] .ms-Nav-groupChevron.ms-Icon {
+ right: 15px;
+}
+
+html[dir=rtl] .ms-Nav-groupButton {
+ text-align: right;
+}
+
+html[dir=rtl] #Header .HeaderTitle {
+ padding: 5px 20px 5px 0px;
+}
+
+html[dir=rtl] #Header .Header-buttons {
+ float: left;
+}
+
+html[dir=rtl] #SidebarContainer {
+ border-left: 1px solid #eeeeee;
+ right: 0;
+}
+
+html[dir=rtl] .LinkContainer a.is-selected:after {
+ border-right: 2px solid black;
+ border-left: 0px;
+}
+
+#SidebarContainer {
+ position: absolute;
+ width: 300px;
+ top: 47px;
+ bottom: 0;
+ background: #ffffff;
+ box-sizing: border-box;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+#SidebarContainer h1 {
+ padding-left: 25px;
+}
+
+.ms-Nav-groupChevron.ms-Icon {
+ position: absolute;
+ height: 40px;
+ line-height: 40px;
+ font-size: 13px;
+ transition: transform 0.1s linear;
+ transition: transform 0.1s linear,-webkit-transform 0.1s linear;
+}
+
+.ms-Nav-group.is-expanded .ms-Nav-groupChevron {
+ -ms-transform: rotate(-180deg);
+ transform: rotate(-180deg);
+}
+
+.ms-Nav-groupButton {
+ display: block;
+ width: 100%;
+ height: 40px;
+ font-family: 'Segoe UI Regular WestEuropean','Segoe UI',Tahoma,Arial,sans-serif;
+ font-size: 12px;
+ line-height: 40px;
+ margin: 5px 0;
+ padding: 0 40px;
+ background: 0 0;
+ border: none;
+ border-bottom: 1px solid #eaeaea;
+ text-transform: uppercase;
+ cursor: pointer;
+ color: #333333;
+ background: #ffffff;
+ outline: transparent;
+}
+
+.ms-Nav-groupButton:hover {
+ background: #f8f8f8;
+}
+
+.ms-Nav-groupContent {
+ display: none;
+ margin-bottom: 20px;
+}
+
+.ms-Nav-group.is-expanded .ms-Nav-groupContent {
+ display: block;
+}
+
+.ms-u-slideDownIn20 {
+ animation-name: fade,slideDownIn20;
+ -webkit-animation-duration: 367ms;
+ -moz-animation-duration: 367ms;
+ -ms-animation-duration: 367ms;
+ -o-animation-duration: 367ms;
+ animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+ animation-fill-mode: both;
+}
+
+#ContentContainer {
+ position: absolute;
+ top: 47px;
+ bottom: 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+ transform: translateZ(0);
+ -webkit-overflow-scrolling: touch;
+}
+
+.LinkContainer {
+ margin-bottom: 20px;
+}
+
+.LinkContainer a {
+ display: block;
+ padding: 10px 40px;
+}
+
+.LinkContainer a.is-selected {
+ background-color: #f4f4f4;
+ position: relative;
+ color: #333333;
+}
+
+.LinkContainer a.is-selected:after {
+ content: '';
+ position: absolute;
+ border-left: 2px solid black;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
diff --git a/dist/documentation/demo.min.css b/dist/documentation/demo.min.css
new file mode 100644
index 00000000..00c84157
--- /dev/null
+++ b/dist/documentation/demo.min.css
@@ -0,0 +1,6 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+body,html{margin:0;padding:0;height:100%}body{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;font-weight:400}h1{font-size:28px}h1,h2{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-weight:100}h2{font-size:21px}h3{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:300}.componentDemo{padding:0 20px}#componentWrapper{width:calc(100% - 56px);height:100%;padding:0 28px}.sample-wrapper{margin:28px 0}.sample-wrapper>.ms-Overlay{display:block;position:relative;height:300px;box-shadow:0 0 8px 0 rgba(0,0,0,.3)}.ms-CommandBar .ms-ContextualMenu,.ms-NavBar-item .ms-ContextualMenu{position:absolute}pre{white-space:pre-wrap}#Header{position:absolute;top:0;height:47px;left:0;right:0;line-height:47px;padding:0 20px;overflow:hidden;white-space:no-wrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#Header .Header-Title{display:inline-block}#Header .Header-Title:hover{cursor:default}#Header .Header-buttons{-webkit-font-smoothing:auto}#Header .Header-button{position:relative;text-decoration:none;background:0 0;color:#fff;border:none;padding:0;padding:0 10px;min-width:50px;height:50px;line-height:50px;margin:0 5px;text-transform:uppercase;display:inline-block;vertical-align:top;box-sizing:border-box}#Header .Header-button:hover{background-color:#0078d7}html[dir=ltr] #ContentContainer{left:300px;right:0}html[dir=ltr] .ms-Nav-groupButton{text-align:left}html[dir=ltr] .ms-Nav-groupChevron.ms-Icon{left:15px}html[dir=ltr] #Header .HeaderTitle{padding:5px 0 5px 20px}html[dir=ltr] #Header .Header-buttons{float:right}html[dir=ltr] #SidebarContainer{border-right:1px solid #eee;left:0}html[dir=rtl] #ContentContainer{left:0;right:300px}html[dir=rtl] .ms-Nav-groupChevron.ms-Icon{right:15px}html[dir=rtl] .ms-Nav-groupButton{text-align:right}html[dir=rtl] #Header .HeaderTitle{padding:5px 20px 5px 0}html[dir=rtl] #Header .Header-buttons{float:left}html[dir=rtl] #SidebarContainer{border-left:1px solid #eee;right:0}html[dir=rtl] .LinkContainer a.is-selected:after{border-right:2px solid #000;border-left:0}#SidebarContainer{position:absolute;width:300px;top:47px;bottom:0;background:#fff;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}#SidebarContainer h1{padding-left:25px}.ms-Nav-groupChevron.ms-Icon{position:absolute;height:40px;line-height:40px;font-size:13px;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}.ms-Nav-group.is-expanded .ms-Nav-groupChevron{transform:rotate(-180deg)}.ms-Nav-groupButton{display:block;width:100%;height:40px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;line-height:40px;margin:5px 0;padding:0 40px;background:0 0;border:none;border-bottom:1px solid #eaeaea;text-transform:uppercase;cursor:pointer;color:#333;background:#fff;outline:transparent}.ms-Nav-groupButton:hover{background:#f8f8f8}.ms-Nav-groupContent{display:none;margin-bottom:20px}.ms-Nav-group.is-expanded .ms-Nav-groupContent{display:block}.ms-u-slideDownIn20{animation-name:fade,slideDownIn20;-webkit-animation-duration:367ms;-moz-animation-duration:367ms;-ms-animation-duration:367ms;-o-animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}#ContentContainer{position:absolute;top:47px;bottom:0;overflow-x:auto;overflow-y:hidden;transform:translateZ(0);-webkit-overflow-scrolling:touch}.LinkContainer{margin-bottom:20px}.LinkContainer a{display:block;padding:10px 40px}.LinkContainer a.is-selected{background-color:#f4f4f4;position:relative;color:#333}.LinkContainer a.is-selected:after{content:'';position:absolute;border-left:2px solid #000;top:0;left:0;right:0;bottom:0}
\ No newline at end of file
diff --git a/dist/documentation/index.html b/dist/documentation/index.html
new file mode 100644
index 00000000..23e011ae
--- /dev/null
+++ b/dist/documentation/index.html
@@ -0,0 +1,276 @@
+
+
+
+
+
+ Fabric Samples Index
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/js/fabric.js b/dist/js/fabric.js
new file mode 100644
index 00000000..16169e91
--- /dev/null
+++ b/dist/js/fabric.js
@@ -0,0 +1,3615 @@
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// "use strict";
+var fabric;
+(function (fabric) {
+ var SCROLL_FRAME_RATE = 33;
+ var Animate = (function () {
+ function Animate() {
+ }
+ /**
+ * @param {HTMLElement} element
+ * @param {object} props Transition properties
+ * @param {number} props.duration The duration of the transition in seconds
+ * @param {number} props.delay A delay in seconds that occurs before the transition starts
+ * @param {string} props.ease An easing equation applied to the transition
+ * @param {function} props.onEnd A function that is called when the transition ends
+ * @param {array} props.onEndArgs An array of parameters applied to the onEnd function
+ * @param {number} props.x props.y props.left, props.opacity etc... CSS values to transition to
+ */
+ Animate.transition = function (element, props) {
+ var obj = { element: element, props: props, transformations: {} };
+ Animate._animationObjects.push(obj);
+ Animate._parseProperties(obj);
+ Animate._createTransition(obj);
+ setTimeout(Animate._setProperties, 0, obj);
+ Animate._setCallback(obj);
+ };
+ /**
+ * @param {HTMLElement} element
+ * @param {string} keyframes A name of a keyframe animation
+ * @param {object} props Animation properties
+ * @param {number} props.duration The duration of the animation in seconds
+ * @param {number} props.delay A delay in seconds that occurs before the animation starts
+ * @param {string} props.ease An easing equation applied to the animation
+ * @param {function} props.onEnd A function that is called when the animation ends
+ * @param {array} props.onEndArgs An array of parameters applied to the onEnd function
+ */
+ Animate.animation = function (element, keyframes, props) {
+ var obj = { element: element, keyframes: keyframes, props: props };
+ Animate._animationObjects.push(obj);
+ Animate._parseProperties(obj);
+ Animate._createAnimation(obj);
+ Animate._setCallback(obj);
+ };
+ /**
+ * @param {HTMLElement} element
+ * @param {object} props Scroll animation properties
+ * @param {number} props.duration The duration of the transition in seconds
+ * @param {number} props.top The end scroll position of the element
+ * @param {number} props.delay A delay in seconds that occurs before the scroll starts
+ * @param {function} props.onEnd A function that is called when the scrolling animation ends
+ * @param {array} props.onEndArgs An array of parameters applied to the onEnd function
+ */
+ Animate.scrollTo = function (element, props) {
+ var obj = { element: element, props: props, step: 0 };
+ Animate._setScrollProperties(obj);
+ if (obj.props.delay) {
+ setTimeout(Animate._animationObjects, obj.props.delay * 1000, obj);
+ }
+ else {
+ Animate._animateScroll(obj);
+ }
+ Animate._animationObjects.push(obj);
+ };
+ Animate._setScrollProperties = function (obj) {
+ obj.beginTop = obj.element.scrollTop;
+ obj.change = obj.props.top - obj.beginTop;
+ obj.props.duration = obj.props.duration * 1000;
+ };
+ Animate._parseProperties = function (obj) {
+ var nonTweenProps = Animate._timeProps.concat(Animate._callbackProps);
+ obj.tweenObj = {};
+ for (var key in obj.props) {
+ if (Animate._contains(nonTweenProps, key)) {
+ obj[key] = obj.props[key];
+ }
+ else {
+ obj.tweenObj[key] = obj.props[key];
+ }
+ }
+ };
+ Animate._animateScroll = function (obj) {
+ var totalSteps = obj.props.duration / SCROLL_FRAME_RATE;
+ var top = Animate._easeOutExpo(obj.step++, obj.beginTop, obj.change, totalSteps);
+ obj.element.scrollTop = top;
+ if (obj.step >= totalSteps) {
+ obj.element.scrollTop = obj.props.top;
+ Animate._executeCallback(obj.props);
+ Animate._removeAnimationObject(obj);
+ }
+ else {
+ setTimeout(function () {
+ requestAnimationFrame(function () {
+ Animate._animateScroll(obj);
+ });
+ }, SCROLL_FRAME_RATE);
+ }
+ };
+ Animate._createTransition = function (obj) {
+ var duration = obj.duration || 0;
+ var delay = obj.delay || 0;
+ obj.element.style.transitionProperty = Animate._getTransitionProperties(obj.tweenObj);
+ obj.element.style.transitionDuration = duration.toString() + "s";
+ obj.element.style.transitionTimingFunction = obj.ease || "linear";
+ obj.element.style.transitionDelay = delay.toString() + "s";
+ };
+ Animate._createAnimation = function (obj) {
+ var duration = obj.duration || 0;
+ var delay = obj.delay || 0;
+ obj.element.style.animationName = obj.keyframes;
+ obj.element.style.animationDuration = duration.toString() + "s";
+ obj.element.style.animationTimingFunction = obj.ease || "linear";
+ obj.element.style.animationDelay = delay.toString() + "s";
+ obj.element.style.animationFillMode = "both";
+ };
+ Animate._getTransitionProperties = function (obj) {
+ var hasTransform = false;
+ var hasFilter = false;
+ var properties = [];
+ for (var key in obj) {
+ if (Animate._contains(Animate._transformProps, key)) {
+ hasTransform = true;
+ }
+ else if (Animate._contains(Animate._filters, key)) {
+ hasFilter = true;
+ }
+ else {
+ properties.push(Animate._camelCaseToDash(key));
+ }
+ }
+ if (hasTransform) {
+ properties.push("transform");
+ }
+ if (hasFilter) {
+ properties.push("-webkit-filter");
+ properties.push("filter");
+ }
+ return properties.join(", ");
+ };
+ Animate._setProperties = function (obj) {
+ for (var key in obj.tweenObj) {
+ if (Animate._contains(Animate._transformProps, key)) {
+ Animate._setTransformValues(obj, key);
+ }
+ else if (Animate._contains(Animate._filters, key)) {
+ Animate._setFilterValues(obj, key);
+ }
+ else {
+ Animate._setRegularValues(obj, key);
+ }
+ }
+ if (obj.transformations) {
+ Animate._setTransformations(obj);
+ }
+ };
+ Animate._setRegularValues = function (obj, key) {
+ var value = obj.tweenObj[key];
+ if (value.toString().indexOf("%") === -1) {
+ value += (key !== "opacity") && (key !== "backgroundColor") && (key !== "boxShadow") ? "px" : "";
+ }
+ obj.element.style[key] = value;
+ };
+ Animate._setFilterValues = function (obj, key) {
+ var value = obj.tweenObj[key];
+ if (key === "hueRotate") {
+ value = "(" + value + "deg)";
+ }
+ else {
+ value = key === "blur" ? "(" + value + "px)" : "(" + value + "%)";
+ }
+ key = Animate._camelCaseToDash(key);
+ obj.element.style.webkitFilter = key + value;
+ obj.element.style.filter = key + value;
+ };
+ Animate._setTransformValues = function (obj, key) {
+ if (/x|y|z|scaleX|scaleY|scaleZ|rotate|rotateX|rotateY|rotateZ|skewX|skewY/.test(key)) {
+ obj.transformations[key] = obj.tweenObj[key];
+ }
+ };
+ Animate._setTransformations = function (obj) {
+ var rotate = "", scale = "", skew = "", translate = "";
+ var trans = obj.transformations;
+ translate += trans.x !== undefined && trans.x ? "translateX(" + trans.x + "px) " : "";
+ translate += trans.y !== undefined && trans.y ? "translateY(" + trans.y + "px) " : "";
+ translate += trans.z !== undefined && trans.z ? "translateZ(" + trans.z + "px) " : "";
+ rotate += trans.rotate !== undefined && trans.rotate ? "rotate(" + trans.rotate + "deg) " : "";
+ rotate += trans.rotateX !== undefined && trans.rotateX ? "rotateX(" + trans.rotateX + "deg) " : "";
+ rotate += trans.rotateY !== undefined && trans.rotateY ? "rotate(" + trans.rotateY + "deg) " : "";
+ rotate += trans.rotateZ !== undefined && trans.rotateZ ? "rotate(" + trans.rotateZ + "deg) " : "";
+ scale += trans.scaleX !== undefined && trans.scaleX ? "scaleX(" + trans.scaleX + ") " : "";
+ scale += trans.scaleY !== undefined && trans.scaleY ? "scaleY(" + trans.scaleY + ") " : "";
+ scale += trans.scaleZ !== undefined && trans.scaleZ ? "scaleZ(" + trans.scaleZ + ") " : "";
+ skew += trans.skewX !== undefined && trans.skewX ? "skewX(" + trans.skewX + "deg) " : "";
+ skew += trans.skewY !== undefined && trans.skewY ? "skewY(" + trans.skewY + "deg) " : "";
+ obj.element.style.transform = translate + rotate + scale + skew;
+ };
+ Animate._setCallback = function (obj) {
+ obj.element.addEventListener("webkitTransitionEnd", Animate._complete, false);
+ obj.element.addEventListener("transitionend", Animate._complete, false);
+ obj.element.addEventListener("webkitAnimationEnd", Animate._complete, false);
+ obj.element.addEventListener("animationend", Animate._complete, false);
+ };
+ Animate._complete = function (event) {
+ event.target.removeEventListener("webkitTransitionEnd", Animate._complete);
+ event.target.removeEventListener("transitionend", Animate._complete);
+ event.target.removeEventListener("webkitAnimationEnd", Animate._complete);
+ event.target.removeEventListener("animationend", Animate._complete);
+ var obj = Animate._getAnimationObjByElement(event.target);
+ Animate._executeCallback(obj);
+ Animate._removeAnimationObject(obj);
+ };
+ Animate._getAnimationObjByElement = function (element) {
+ var i = Animate._animationObjects.length;
+ while (i--) {
+ if (Animate._animationObjects[i].element === element) {
+ return Animate._animationObjects[i];
+ }
+ }
+ return null;
+ };
+ Animate._removeAnimationObject = function (obj) {
+ var i = Animate._animationObjects.length;
+ while (i--) {
+ if (Animate._animationObjects[i] === obj) {
+ Animate._animationObjects.splice(i, 1);
+ }
+ }
+ };
+ Animate._executeCallback = function (obj) {
+ if (obj.onEnd) {
+ var endArgs = obj.onEndArgs || [];
+ obj.onEnd.apply(null, endArgs);
+ }
+ };
+ Animate._contains = function (array, value) {
+ var i = array.length;
+ while (i--) {
+ if (value === array[i]) {
+ return true;
+ }
+ }
+ return false;
+ };
+ Animate._camelCaseToDash = function (value) {
+ return value.replace(/\W+/g, "-").replace(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase();
+ };
+ Animate._easeOutExpo = function (time, begin, change, duration) {
+ return (time === duration) ? begin + change : change * (-Math.pow(2, -10 * time / duration) + 1) + begin;
+ };
+ Animate._transformProps = [
+ "x",
+ "y",
+ "z",
+ "scaleX",
+ "scaleY",
+ "scaleZ",
+ "rotate",
+ "rotateX",
+ "rotateY",
+ "rotateZ",
+ "skewX",
+ "skewY"
+ ];
+ Animate._filters = [
+ "blur",
+ "brightness",
+ "contrast",
+ "dropShadow",
+ "grayscale",
+ "hueRotate",
+ "invert",
+ "saturate",
+ "sepia"
+ ];
+ Animate._timeProps = ["duration", "ease", "delay"];
+ Animate._callbackProps = ["onEnd", "onEndArgs"];
+ Animate._animationObjects = [];
+ return Animate;
+ }());
+ fabric.Animate = Animate;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// "use strict";
+var fabric;
+(function (fabric) {
+ var Ease = (function () {
+ function Ease() {
+ }
+ Ease.QUAD_EASE_IN = Ease.CB + "(0.550, 0.085, 0.680, 0.530)";
+ Ease.CUBIC_EASE_IN = Ease.CB + "(0.550, 0.055, 0.675, 0.190)";
+ Ease.QUART_EASE_IN = Ease.CB + "(0.895, 0.030, 0.685, 0.220)";
+ Ease.QUINT_EASE_IN = Ease.CB + "(0.755, 0.050, 0.855, 0.060)";
+ Ease.SINE_EASE_IN = Ease.CB + "(0.470, 0, 0.745, 0.715)";
+ Ease.EXPO_EASE_IN = Ease.CB + "(0.950, 0.050, 0.795, 0.035)";
+ Ease.CIRC_EASE_IN = Ease.CB + "(0.600, 0.040, 0.980, 0.335)";
+ Ease.BACK_EASE_IN = Ease.CB + "(0.600, 0.040, 0.980, 0.335)";
+ Ease.QUAD_EASE_OUT = Ease.CB + "(0.250, 0.460, 0.450, 0.940)";
+ Ease.CUBIC_EASE_OUT = Ease.CB + "(0.215, 0.610, 0.355, 1)";
+ Ease.QUART_EASE_OUT = Ease.CB + "(0.165, 0.840, 0.440, 1)";
+ Ease.QUINT_EASE_OUT = Ease.CB + "(0.230, 1, 0.320, 1)";
+ Ease.SINE_EASE_OUT = Ease.CB + "(0.390, 0.575, 0.565, 1)";
+ Ease.EXPO_EASE_OUT = Ease.CB + "(0.190, 1, 0.220, 1)";
+ Ease.CIRC_EASE_OUT = Ease.CB + "(0.075, 0.820, 0.165, 1)";
+ Ease.BACK_EASE_OUT = Ease.CB + "(0.175, 0.885, 0.320, 1.275)";
+ Ease.QUAD_EASE_IN_OUT = Ease.CB + "(0.455, 0.030, 0.515, 0.955)";
+ Ease.CUBIC_EASE_IN_OUT = Ease.CB + "(0.645, 0.045, 0.355, 1)";
+ Ease.QUART_EASE_IN_OUT = Ease.CB + "(0.770, 0, 0.175, 1)";
+ Ease.QUINT_EASE_IN_OUT = Ease.CB + "(0.860, 0, 0.070, 1)";
+ Ease.SINE_EASE_IN_OUT = Ease.CB + "(0.445, 0.050, 0.550, 0.950)";
+ Ease.EXPO_EASE_IN_OUT = Ease.CB + "(1, 0, 0, 1)";
+ Ease.CIRC_EASE_IN_OUT = Ease.CB + "(0.785, 0.135, 0.150, 0.860)";
+ Ease.BACK_EASE_IN_OUT = Ease.CB + "(0.680, -0.550, 0.265, 1.550)";
+ Ease.CB = "cubic-bezier";
+ return Ease;
+ }());
+ fabric.Ease = Ease;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// "use strict";
+// CustomEvent Polyfill to support IE
+(function () {
+ function CustomEvent(event, params) {
+ params = params || { bubbles: false, cancelable: false, detail: undefined };
+ var evt = document.createEvent("CustomEvent");
+ evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+ return evt;
+ }
+ ;
+ CustomEvent.prototype = Event.prototype;
+ window.CustomEvent = CustomEvent;
+})();
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * @namespace fabric
+ */
+var fabric;
+(function (fabric) {
+ "use strict";
+ /**
+ * Breadcrumb component
+ *
+ * Shows the user"s current location in a hierarchy and provides a means of navigating upward.
+ *
+ */
+ var Breadcrumb = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of Breadcrumb
+ * @constructor
+ *
+ * If dynamically populating a list run the constructor after the list has been populated
+ * in the DOM.
+ */
+ function Breadcrumb(container) {
+ this._currentMaxItems = 0;
+ this._itemCollection = [];
+ this._tabIndex = 2;
+ this.container = container;
+ this._onResize = this._onResize.bind(this);
+ this._openOverflow = this._openOverflow.bind(this);
+ this._overflowKeyPress = this._overflowKeyPress.bind(this);
+ this._closeOverflow = this._closeOverflow.bind(this);
+ this.removeOutlinesOnClick = this.removeOutlinesOnClick.bind(this);
+ this.init();
+ }
+ /**
+ * removes focus outlines so they don"t linger after click
+ */
+ Breadcrumb.prototype.removeOutlinesOnClick = function () {
+ this._breadcrumbList.blur();
+ };
+ /**
+ * Adds a breadcrumb item to a breadcrumb
+ * @param itemLabel {String} the item's text label
+ * @param itemLink {String} the item's href link
+ */
+ Breadcrumb.prototype.addItem = function (itemLabel, itemLink) {
+ this._itemCollection.push({ text: itemLabel, link: itemLink });
+ this._updateBreadcrumbs();
+ };
+ /**
+ * Removes a breadcrumb item by item label in the breadcrumbs list
+ * @param itemLabel {String} the item's text label
+ */
+ Breadcrumb.prototype.removeItemByLabel = function (itemLabel) {
+ var i = this._itemCollection.length;
+ while (i--) {
+ if (this._itemCollection[i].text === itemLabel) {
+ this._itemCollection.splice(i, 1);
+ }
+ }
+ this._updateBreadcrumbs();
+ };
+ ;
+ /**
+ * removes a breadcrumb item by position in the breadcrumb's list
+ * index starts at 0
+ * @param value {number} the item's index
+ */
+ Breadcrumb.prototype.removeItemByPosition = function (value) {
+ this._itemCollection.splice(value, 1);
+ this._updateBreadcrumbs();
+ };
+ /**
+ * initializes component
+ */
+ Breadcrumb.prototype.init = function () {
+ this._cacheDOM();
+ this._setListeners();
+ this._createItemCollection();
+ this._onResize();
+ };
+ /**
+ * create internal model of list items from DOM
+ */
+ Breadcrumb.prototype._createItemCollection = function () {
+ var length = this._listItems.length;
+ var i = 0;
+ var item;
+ var text;
+ var link;
+ var tabIndex;
+ for (i; i < length; i++) {
+ item = this._listItems[i].querySelector(".ms-Breadcrumb-itemLink");
+ text = item.textContent;
+ link = item.getAttribute("href");
+ tabIndex = parseInt(item.getAttribute("tabindex"), 10);
+ this._itemCollection.push({ link: link, tabIndex: tabIndex, text: text });
+ }
+ };
+ /**
+ * Re-render lists on resize
+ *
+ */
+ Breadcrumb.prototype._onResize = function () {
+ this._closeOverflow(null);
+ this._renderList();
+ };
+ /**
+ * render breadcrumbs and overflow menus
+ */
+ Breadcrumb.prototype._renderList = function () {
+ var maxItems = window.innerWidth > Breadcrumb.MEDIUM ? 4 : 2;
+ if (maxItems !== this._currentMaxItems) {
+ this._updateBreadcrumbs();
+ }
+ this._currentMaxItems = maxItems;
+ };
+ /**
+ * updates the breadcrumbs and overflow menu
+ */
+ Breadcrumb.prototype._updateBreadcrumbs = function () {
+ this._tabIndex = 2;
+ var maxItems = window.innerWidth > Breadcrumb.MEDIUM ? 4 : 2;
+ if (this._itemCollection.length > maxItems) {
+ this._breadcrumb.classList.add("is-overflow");
+ }
+ else {
+ this._breadcrumb.classList.remove("is-overflow");
+ }
+ this._addItemsToOverflow(maxItems);
+ this._addBreadcrumbItems(maxItems);
+ };
+ ;
+ /**
+ * creates the overflow menu
+ */
+ Breadcrumb.prototype._addItemsToOverflow = function (maxItems) {
+ var _this = this;
+ this._resetList(this._contextMenu);
+ var end = this._itemCollection.length - maxItems;
+ var overflowItems = this._itemCollection.slice(0, end);
+ overflowItems.forEach(function (item) {
+ var li = document.createElement("li");
+ li.className = "ms-ContextualMenu-item";
+ var a = document.createElement("a");
+ a.className = "ms-ContextualMenu-link";
+ if (item.link !== null) {
+ a.setAttribute("href", item.link);
+ }
+ a.setAttribute("tabindex", (_this._tabIndex++).toString());
+ a.textContent = item.text;
+ li.appendChild(a);
+ _this._contextMenu.appendChild(li);
+ });
+ };
+ /**
+ * creates the breadcrumbs
+ */
+ Breadcrumb.prototype._addBreadcrumbItems = function (maxItems) {
+ this._resetList(this._breadcrumbList);
+ var i = this._itemCollection.length - maxItems;
+ i = i < 0 ? 0 : i;
+ if (i >= 0) {
+ for (i; i < this._itemCollection.length; i++) {
+ var listItem = document.createElement("li");
+ var item = this._itemCollection[i];
+ var a = document.createElement("a");
+ var chevron = document.createElement("i");
+ listItem.className = "ms-Breadcrumb-listItem";
+ a.className = "ms-Breadcrumb-itemLink";
+ if (item.link !== null) {
+ a.setAttribute("href", item.link);
+ }
+ a.setAttribute("tabindex", (this._tabIndex++).toString());
+ a.textContent = item.text;
+ chevron.className = "ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight";
+ listItem.appendChild(a);
+ listItem.appendChild(chevron);
+ this._breadcrumbList.appendChild(listItem);
+ }
+ }
+ };
+ /**
+ * resets a list by removing its children
+ */
+ Breadcrumb.prototype._resetList = function (list) {
+ while (list.firstChild) {
+ list.removeChild(list.firstChild);
+ }
+ };
+ /**
+ * opens the overflow menu
+ */
+ Breadcrumb.prototype._openOverflow = function (event) {
+ if (this._overflowMenu.className.indexOf(" is-open") === -1) {
+ this._overflowMenu.classList.add("is-open");
+ this.removeOutlinesOnClick();
+ // force focus rect onto overflow button
+ this._overflowButton.focus();
+ }
+ };
+ Breadcrumb.prototype._overflowKeyPress = function (event) {
+ if (event.keyCode === 13) {
+ this._openOverflow(event);
+ }
+ };
+ /**
+ * closes the overflow menu
+ */
+ Breadcrumb.prototype._closeOverflow = function (event) {
+ if (!event || event.target !== this._overflowButton) {
+ this._overflowMenu.classList.remove("is-open");
+ }
+ };
+ /**
+ * caches elements and values of the component
+ */
+ Breadcrumb.prototype._cacheDOM = function () {
+ this._breadcrumb = this.container;
+ this._breadcrumbList = this._breadcrumb.querySelector(".ms-Breadcrumb-list");
+ this._listItems = this._breadcrumb.querySelectorAll(".ms-Breadcrumb-listItem");
+ this._contextMenu = this._breadcrumb.querySelector(".ms-ContextualMenu");
+ this._overflowButton = this._breadcrumb.querySelector(".ms-Breadcrumb-overflowButton");
+ this._overflowMenu = this._breadcrumb.querySelector(".ms-Breadcrumb-overflowMenu");
+ };
+ /**
+ * sets handlers for resize and button click events
+ */
+ Breadcrumb.prototype._setListeners = function () {
+ window.addEventListener("resize", this._onResize, false);
+ this._overflowButton.addEventListener("click", this._openOverflow, false);
+ this._overflowButton.addEventListener("keypress", this._overflowKeyPress, false);
+ document.addEventListener("click", this._closeOverflow, false);
+ this._breadcrumbList.addEventListener("click", this.removeOutlinesOnClick, false);
+ };
+ // medium breakpoint
+ Breadcrumb.MEDIUM = 639;
+ return Breadcrumb;
+ }());
+ fabric.Breadcrumb = Breadcrumb;
+})(fabric || (fabric = {})); // end fabric namespace
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * Button
+ *
+ * Mostly just a click handler
+ *
+ */
+var fabric;
+(function (fabric) {
+ "use strict";
+ var Button = (function () {
+ function Button(container, clickHandler) {
+ this._container = container;
+ if (clickHandler) {
+ this._clickHandler = clickHandler;
+ this._setClick();
+ }
+ }
+ Button.prototype.disposeEvents = function () {
+ this._container.removeEventListener("click", this._clickHandler, false);
+ };
+ Button.prototype._setClick = function () {
+ this._container.addEventListener("click", this._clickHandler, false);
+ };
+ return Button;
+ }());
+ fabric.Button = Button;
+})(fabric || (fabric = {}));
+
+
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * ContextualHost
+ *
+ * Hosts contextual menus and callouts
+ * NOTE: Position bottom only works if html is set to max-height 100%, overflow hidden
+ * and body is set to overflow scroll, body is set to height 100%
+ *
+ */
+/**
+ * @namespace fabric
+ */
+var fabric;
+(function (fabric) {
+ /**
+ *
+ * @constructor
+ */
+ var CONTEXT_STATE_CLASS = "is-open";
+ var MODAL_STATE_POSITIONED = "is-positioned";
+ var CONTEXT_HOST_MAIN_CLASS = "ms-ContextualHost-main";
+ var CONTEXT_HOST_BEAK_CLASS = "ms-ContextualHost-beak";
+ var ARROW_LEFT_CLASS = "ms-ContextualHost--arrowLeft";
+ var ARROW_TOP_CLASS = "ms-ContextualHost--arrowTop";
+ var ARROW_BOTTOM_CLASS = "ms-ContextualHost--arrowBottom";
+ var ARROW_RIGHT_CLASS = "ms-ContextualHost--arrowRight";
+ var MODIFIER_BASE = "ms-ContextualHost--";
+ var ARROW_SIZE = 28;
+ var ARROW_OFFSET = 8;
+ var ContextualHost = (function () {
+ function ContextualHost(content, direction, targetElement, hasArrow, modifiers, matchTargetWidth, disposalCallback) {
+ if (hasArrow === void 0) { hasArrow = true; }
+ this._resizeAction = this._resizeAction.bind(this);
+ this._dismissAction = this._dismissAction.bind(this);
+ this._handleKeyUpDismiss = this._handleKeyUpDismiss.bind(this);
+ this._matchTargetWidth = matchTargetWidth || false;
+ this._direction = direction;
+ this._container = this.createContainer();
+ this._contextualHost = this._container;
+ this._contextualHostMain = this._contextualHost.getElementsByClassName(CONTEXT_HOST_MAIN_CLASS)[0];
+ this._contextualHostMain.appendChild(content);
+ this._hasArrow = hasArrow;
+ this._arrow = this._container.getElementsByClassName(CONTEXT_HOST_BEAK_CLASS)[0];
+ this._targetElement = targetElement;
+ this._openModal();
+ this._setResizeDisposal();
+ if (disposalCallback) {
+ this._disposalCallback = disposalCallback;
+ }
+ if (modifiers) {
+ for (var i = 0; i < modifiers.length; i++) {
+ this._container.classList.add(MODIFIER_BASE + modifiers[i]);
+ }
+ }
+ if (!ContextualHost.hosts) {
+ ContextualHost.hosts = [];
+ }
+ ContextualHost.hosts.push(this);
+ }
+ ContextualHost.prototype.disposeModal = function () {
+ if (ContextualHost.hosts.length > 0) {
+ window.removeEventListener("resize", this._resizeAction, false);
+ document.removeEventListener("click", this._dismissAction, true);
+ document.removeEventListener("keyup", this._handleKeyUpDismiss, true);
+ this._container.parentNode.removeChild(this._container);
+ if (this._disposalCallback) {
+ this._disposalCallback();
+ }
+ // Dispose of all ContextualHosts
+ var index = ContextualHost.hosts.indexOf(this);
+ ContextualHost.hosts.splice(index, 1);
+ var i = ContextualHost.hosts.length;
+ while (i--) {
+ ContextualHost.hosts[i].disposeModal();
+ ContextualHost.hosts.splice(i, 1);
+ }
+ }
+ };
+ ContextualHost.prototype.setChildren = function (value) {
+ if (!this._children) {
+ this._children = [];
+ }
+ this._children.push(value);
+ };
+ ContextualHost.prototype.contains = function (value) {
+ return this._container.contains(value);
+ };
+ ContextualHost.prototype.createContainer = function () {
+ var ContextualHost0 = document.createElement("div");
+ ContextualHost0.setAttribute("class", "ms-ContextualHost");
+ ContextualHost0.innerHTML += " ";
+ var ContextualHost0c1 = document.createElement("div");
+ ContextualHost0c1.setAttribute("class", CONTEXT_HOST_MAIN_CLASS);
+ ContextualHost0c1.innerHTML += " ";
+ ContextualHost0.appendChild(ContextualHost0c1);
+ ContextualHost0.innerHTML += " ";
+ var ContextualHost0c3 = document.createElement("div");
+ ContextualHost0c3.setAttribute("class", CONTEXT_HOST_BEAK_CLASS);
+ ContextualHost0.appendChild(ContextualHost0c3);
+ ContextualHost0.innerHTML += "";
+ return ContextualHost0;
+ };
+ ContextualHost.prototype._openModal = function () {
+ var _this = this;
+ this._copyModalToBody();
+ this._saveModalSize();
+ this._findAvailablePosition();
+ this._showModal();
+ // Delay the click setting
+ setTimeout(function () { _this._setDismissClick(); }, 100);
+ };
+ ContextualHost.prototype._findAvailablePosition = function () {
+ var _posOk;
+ switch (this._direction) {
+ case "left":
+ // Try the right side
+ _posOk = this._positionOk(this._tryPosModalLeft.bind(this), this._tryPosModalRight.bind(this), this._tryPosModalBottom.bind(this), this._tryPosModalTop.bind(this));
+ this._setPosition(_posOk);
+ break;
+ case "right":
+ _posOk = this._positionOk(this._tryPosModalRight.bind(this), this._tryPosModalLeft.bind(this), this._tryPosModalBottom.bind(this), this._tryPosModalTop.bind(this));
+ this._setPosition(_posOk);
+ break;
+ case "top":
+ _posOk = this._positionOk(this._tryPosModalTop.bind(this), this._tryPosModalBottom.bind(this));
+ this._setPosition(_posOk);
+ break;
+ case "bottom":
+ _posOk = this._positionOk(this._tryPosModalBottom.bind(this), this._tryPosModalTop.bind(this));
+ this._setPosition(_posOk);
+ break;
+ default:
+ this._setPosition();
+ }
+ };
+ ContextualHost.prototype._showModal = function () {
+ this._container.classList.add(CONTEXT_STATE_CLASS);
+ };
+ ContextualHost.prototype._positionOk = function (pos1, pos2, pos3, pos4) {
+ var _posOk;
+ _posOk = pos1();
+ if (!_posOk) {
+ _posOk = pos2();
+ if (!_posOk && pos3) {
+ _posOk = pos3();
+ if (!_posOk && pos4) {
+ _posOk = pos4();
+ }
+ }
+ }
+ return _posOk;
+ };
+ ContextualHost.prototype._calcLeft = function (mWidth, teWidth, teLeft) {
+ var mHalfWidth = mWidth / 2;
+ var teHalf = teWidth / 2;
+ var mHLeft = (teLeft + teHalf) - mHalfWidth;
+ mHLeft = (mHLeft < mHalfWidth) ? teLeft : mHLeft;
+ return mHLeft;
+ };
+ ContextualHost.prototype._calcTop = function (mHeight, teHeight, teTop) {
+ var mHalfWidth = mHeight / 2;
+ var teHalf = teHeight / 2;
+ var mHLeft = (teTop + teHalf) - mHalfWidth;
+ mHLeft = (mHLeft < mHalfWidth) ? teTop : mHLeft;
+ return mHLeft;
+ };
+ ContextualHost.prototype._setPosition = function (curDirection) {
+ var teBR = this._targetElement.getBoundingClientRect();
+ var teLeft = teBR.left;
+ var teRight = teBR.right;
+ var teTop = teBR.top;
+ var teWidth = teBR.width;
+ var teHeight = teBR.height;
+ var mHLeft;
+ var mHTop;
+ var mWidth = "";
+ var arrowTop;
+ var arrowLeft;
+ var windowX = window.scrollX ? window.scrollX : 0;
+ var windowY = window.scrollY ? window.scrollY : 0;
+ var arrowSpace = (this._hasArrow) ? ARROW_SIZE : 0;
+ if (this._matchTargetWidth) {
+ mWidth = "width: " + this._modalWidth + "px;";
+ }
+ switch (curDirection) {
+ case "left":
+ mHLeft = teLeft - this._modalWidth - arrowSpace;
+ mHTop = this._calcTop(this._modalHeight, teHeight, teTop);
+ mHTop += window.scrollY ? window.scrollY : 0;
+ this._container.setAttribute("style", "top: " + mHTop + "px; left: " + mHLeft + "px;" + mWidth);
+ this._container.classList.add(MODAL_STATE_POSITIONED);
+ if (this._hasArrow) {
+ this._container.classList.add(ARROW_RIGHT_CLASS);
+ arrowTop = ((teTop + windowY) - mHTop) + ARROW_OFFSET;
+ this._arrow.setAttribute("style", "top: " + arrowTop + "px;");
+ }
+ break;
+ case "right":
+ mHTop = this._calcTop(this._modalHeight, teHeight, teTop);
+ mHTop += windowY;
+ mHLeft = teRight + arrowSpace;
+ this._container.setAttribute("style", "top: " + mHTop + "px; left: " + mHLeft + "px;" + mWidth);
+ this._container.classList.add(MODAL_STATE_POSITIONED);
+ if (this._hasArrow) {
+ arrowTop = ((windowY + teTop) - mHTop) + ARROW_OFFSET;
+ this._arrow.setAttribute("style", "top: " + arrowTop + "px;");
+ this._container.classList.add(ARROW_LEFT_CLASS);
+ }
+ break;
+ case "top":
+ mHLeft = this._calcLeft(this._modalWidth, this._teWidth, teLeft);
+ mHTop = teTop - this._modalHeight - arrowSpace;
+ mHTop += windowY;
+ this._container.setAttribute("style", "top: " + mHTop + "px; left: " + mHLeft + "px;" + mWidth);
+ this._container.classList.add(MODAL_STATE_POSITIONED);
+ if (this._hasArrow) {
+ arrowTop = this._modalHeight - (arrowSpace / 2);
+ arrowLeft = Math.max(windowX + teLeft - mHLeft + ((teWidth - arrowSpace) / 2), ARROW_OFFSET);
+ this._arrow.setAttribute("style", "top: " + arrowTop + "px; left: " + arrowLeft + "px;");
+ this._container.classList.add(ARROW_BOTTOM_CLASS);
+ }
+ break;
+ case "bottom":
+ mHLeft = mHLeft = this._calcLeft(this._modalWidth, this._teWidth, teLeft);
+ mHTop = teTop + teHeight + arrowSpace;
+ mHTop += window.scrollY ? window.scrollY : 0;
+ this._container.setAttribute("style", "top: " + mHTop + "px; left: " + mHLeft + "px;" + mWidth);
+ this._container.classList.add(MODAL_STATE_POSITIONED);
+ if (this._hasArrow) {
+ arrowLeft = Math.max(windowX + teLeft - mHLeft + ((teWidth - arrowSpace) / 2), ARROW_OFFSET);
+ this._arrow.setAttribute("style", "left: " + arrowLeft + "px;");
+ this._container.classList.add(ARROW_TOP_CLASS);
+ }
+ break;
+ default:
+ this._container.setAttribute("style", "top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);");
+ }
+ };
+ ContextualHost.prototype._tryPosModalLeft = function () {
+ var teLeft = this._targetElement.getBoundingClientRect().left;
+ if (teLeft < this._modalWidth) {
+ return false;
+ }
+ else {
+ return "left";
+ }
+ };
+ ContextualHost.prototype._tryPosModalRight = function () {
+ var teRight = this._targetElement.getBoundingClientRect().right;
+ var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+ if ((w - teRight) < this._modalWidth) {
+ return false;
+ }
+ else {
+ return "right";
+ }
+ };
+ ContextualHost.prototype._tryPosModalBottom = function () {
+ var teBottom = window.innerHeight - this._targetElement.getBoundingClientRect().bottom;
+ if (teBottom < this._modalHeight) {
+ return false;
+ }
+ else {
+ return "bottom";
+ }
+ };
+ ContextualHost.prototype._tryPosModalTop = function () {
+ var teTop = this._targetElement.getBoundingClientRect().top;
+ if (teTop < this._modalHeight) {
+ return false;
+ }
+ else {
+ return "top";
+ }
+ };
+ ContextualHost.prototype._copyModalToBody = function () {
+ document.body.appendChild(this._container);
+ };
+ ContextualHost.prototype._saveModalSize = function () {
+ var _modalStyles = window.getComputedStyle(this._container);
+ this._container.setAttribute("style", "opacity: 0; z-index: -1");
+ this._container.classList.add(MODAL_STATE_POSITIONED);
+ this._container.classList.add(CONTEXT_STATE_CLASS);
+ if (this._matchTargetWidth) {
+ var teStyles = window.getComputedStyle(this._targetElement);
+ this._modalWidth = this._targetElement.getBoundingClientRect().width
+ + (parseInt(teStyles.marginLeft, 10)
+ + parseInt(teStyles.marginLeft, 10));
+ }
+ else {
+ this._modalWidth = this._container.getBoundingClientRect().width
+ + (parseInt(_modalStyles.marginLeft, 10)
+ + parseInt(_modalStyles.marginRight, 10));
+ this._container.setAttribute("style", "");
+ }
+ this._modalHeight = this._container.getBoundingClientRect().height
+ + (parseInt(_modalStyles.marginTop, 10)
+ + parseInt(_modalStyles.marginBottom, 10));
+ this._container.classList.remove(MODAL_STATE_POSITIONED);
+ this._container.classList.remove(CONTEXT_STATE_CLASS);
+ this._teWidth = this._targetElement.getBoundingClientRect().width;
+ this._teHeight = this._targetElement.getBoundingClientRect().height;
+ };
+ ContextualHost.prototype._dismissAction = function (e) {
+ // If the element clicked is not INSIDE of contextualHost then close contextualHost
+ if (!this._container.contains(e.target) && e.target !== this._container) {
+ if (this._children !== undefined) {
+ var isChild_1 = false;
+ this._children.map(function (child) {
+ if (child !== undefined) {
+ isChild_1 = child.contains(e.target);
+ }
+ });
+ if (!isChild_1) {
+ this.disposeModal();
+ }
+ }
+ else {
+ this.disposeModal();
+ }
+ }
+ };
+ ContextualHost.prototype._setDismissClick = function () {
+ document.addEventListener("click", this._dismissAction, true);
+ document.addEventListener("keyup", this._handleKeyUpDismiss, true);
+ };
+ ContextualHost.prototype._handleKeyUpDismiss = function (e) {
+ if (e.keyCode === 32 || e.keyCode === 27) {
+ this._dismissAction(e);
+ }
+ };
+ ContextualHost.prototype._resizeAction = function () {
+ this.disposeModal();
+ };
+ ContextualHost.prototype._setResizeDisposal = function () {
+ window.addEventListener("resize", this._resizeAction, false);
+ };
+ return ContextualHost;
+ }());
+ fabric.ContextualHost = ContextualHost;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+///
+/**
+ * Callout
+ *
+ * Add callouts to things and stuff
+ *
+ */
+///
+var STATE_HIDDEN = "is-hidden";
+var CLOSE_BUTTON_CLASS = ".ms-Callout-close";
+var MODIFIER_OOBE_CLASS = "ms-Callout--OOBE";
+var fabric;
+(function (fabric) {
+ "use strict";
+ var Callout = (function () {
+ function Callout(container, addTarget, position) {
+ this._container = container;
+ this._addTarget = addTarget;
+ this._position = position;
+ this._closeButton = document.querySelector(CLOSE_BUTTON_CLASS);
+ this._setOpener();
+ }
+ Callout.prototype._setOpener = function () {
+ this._addTarget.addEventListener("click", this._clickHandler.bind(this), true);
+ };
+ Callout.prototype._openContextMenu = function () {
+ var modifiers = [];
+ if (this._hasModifier(MODIFIER_OOBE_CLASS)) {
+ modifiers.push("primaryArrow");
+ }
+ this._container.classList.remove(STATE_HIDDEN);
+ this._contextualHost = new fabric.ContextualHost(this._container, this._position, this._addTarget, true, modifiers);
+ if (this._closeButton) {
+ this._closeButton.addEventListener("click", this._closeHandler.bind(this), false);
+ }
+ };
+ Callout.prototype._hasModifier = function (modifierClass) {
+ return this._container.classList.contains(modifierClass);
+ };
+ Callout.prototype._closeHandler = function (e) {
+ this._contextualHost.disposeModal();
+ this._closeButton.removeEventListener("click", this._closeHandler.bind(this), false);
+ this._addTarget.removeEventListener("click", this._clickHandler.bind(this), true);
+ };
+ Callout.prototype._clickHandler = function (e) {
+ this._openContextMenu();
+ };
+ return Callout;
+ }());
+ fabric.Callout = Callout;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+"use strict";
+var fabric;
+(function (fabric) {
+ /**
+ * CheckBox Plugin
+ *
+ * Adds basic demonstration functionality to .ms-CheckBox components.
+ *
+ */
+ var CheckBox = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of CheckBox
+ * @constructor
+ */
+ function CheckBox(container) {
+ this._container = container;
+ this._choiceField = this._container.querySelector(".ms-CheckBox-field");
+ this._choiceInput = this._container.querySelector(".ms-CheckBox-input");
+ if (this._choiceInput.checked) {
+ this._choiceField.setAttribute("aria-checked", "true");
+ }
+ if (this._choiceField.getAttribute("aria-checked") === "true") {
+ this._choiceField.classList.add("is-checked");
+ }
+ this._addListeners();
+ }
+ CheckBox.prototype.getValue = function () {
+ return this._choiceField.getAttribute("aria-checked") === "true" ? true : false;
+ };
+ CheckBox.prototype.toggle = function () {
+ if (this.getValue()) {
+ this.unCheck();
+ }
+ else {
+ this.check();
+ }
+ this._choiceInput.click();
+ };
+ CheckBox.prototype.check = function () {
+ this._choiceField.setAttribute("aria-checked", "true");
+ this._choiceField.classList.add("is-checked");
+ };
+ CheckBox.prototype.unCheck = function () {
+ this._choiceField.setAttribute("aria-checked", "false");
+ this._choiceField.classList.remove("is-checked");
+ };
+ CheckBox.prototype.removeListeners = function () {
+ this._choiceField.removeEventListener("focus", this._FocusHandler.bind(this));
+ this._choiceField.removeEventListener("blur", this._BlurHandler.bind(this));
+ this._choiceField.removeEventListener("click", this._ClickHandler.bind(this));
+ this._choiceField.removeEventListener("keydown", this._KeydownHandler.bind(this));
+ };
+ CheckBox.prototype._addListeners = function (events) {
+ var ignore = events && events.ignore;
+ if (!ignore || !(ignore.indexOf("focus") > -1)) {
+ this._choiceField.addEventListener("focus", this._FocusHandler.bind(this), false);
+ }
+ if (!ignore || !(ignore.indexOf("blur") > -1)) {
+ this._choiceField.addEventListener("blur", this._BlurHandler.bind(this), false);
+ }
+ if (!ignore || !(ignore.indexOf("click") > -1)) {
+ this._choiceField.addEventListener("click", this._ClickHandler.bind(this), false);
+ }
+ if (!ignore || !(ignore.indexOf("keydown") > -1)) {
+ this._choiceField.addEventListener("keydown", this._KeydownHandler.bind(this), false);
+ }
+ };
+ CheckBox.prototype._FocusHandler = function () {
+ this._choiceField.classList.add("in-focus");
+ };
+ CheckBox.prototype._BlurHandler = function () {
+ this._choiceField.classList.remove("in-focus");
+ };
+ CheckBox.prototype._ClickHandler = function (event) {
+ event.stopPropagation();
+ event.preventDefault();
+ if (!this._choiceField.classList.contains("is-disabled")) {
+ this.toggle();
+ }
+ };
+ CheckBox.prototype._KeydownHandler = function (event) {
+ if (event.keyCode === 32) {
+ event.stopPropagation();
+ event.preventDefault();
+ if (!this._choiceField.classList.contains("is-disabled")) {
+ this.toggle();
+ }
+ }
+ };
+ return CheckBox;
+ }());
+ fabric.CheckBox = CheckBox;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * SearchBox component
+ *
+ * Allows you to search the world.
+ *
+ */
+/**
+ * @namespace fabric
+ */
+var fabric;
+(function (fabric) {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of SearchBox
+ * @constructor
+ *
+ */
+ var SB_FIELD = ".ms-SearchBox-field";
+ var SB_CLEAR_BUTTON = ".ms-SearchBox-clear";
+ var SB_EXIT_BUTTON = ".ms-SearchBox-exit";
+ var SB_HAS_TEXT = "has-text";
+ var SB_IS_ACTIVE = "is-active";
+ var SB_IS_ANIMATED = "is-animated";
+ var SearchBox = (function () {
+ function SearchBox(container) {
+ var _this = this;
+ this._container = container;
+ this._saveDOMRefs(this._container);
+ this._boundExpandSearchHandler = this._expandSearchHandler.bind(this);
+ this._boundEnableClose = this._enableClose.bind(this);
+ this._boundCollapseSearchBox = this._collapseSearchBox.bind(this);
+ this._boundClearSearchBox = this._clearSearchBox.bind(this);
+ this._boundHandleBlur = this._handleBlur.bind(this);
+ this._boundExitSearchBox = this._exitSearchBox.bind(this);
+ this._setHasText();
+ this._setFocusAction(this._container);
+ this._setClearButtonAction();
+ this._setBlurAction();
+ this._clearOnly = false;
+ setTimeout(function () {
+ _this._checkState();
+ _this._addAnimation();
+ }, 10);
+ }
+ SearchBox.prototype.setCollapsedListeners = function () {
+ this._disposeListeners();
+ this._searchBox.addEventListener("click", this._boundExpandSearchHandler, false);
+ this._searchBoxField.addEventListener("focus", this._boundExpandSearchHandler, true);
+ };
+ SearchBox.prototype.getInputField = function () {
+ return this._searchBoxField;
+ };
+ SearchBox.prototype._saveDOMRefs = function (context) {
+ this._searchBox = context;
+ this._searchBoxField = this._searchBox.querySelector(SB_FIELD);
+ this._searchBoxClearButton = this._searchBox.querySelector(SB_CLEAR_BUTTON);
+ this._searchBoxExitButton = this._searchBox.querySelector(SB_EXIT_BUTTON);
+ };
+ SearchBox.prototype._disposeListeners = function () {
+ this._searchBox.removeEventListener("click", this._boundExpandSearchHandler);
+ this._searchBoxField.removeEventListener("focus", this._boundExpandSearchHandler);
+ };
+ SearchBox.prototype._exitSearchBox = function (event) {
+ event.stopPropagation();
+ event.target.blur();
+ this._clearSearchBox();
+ this._collapseSearchBox();
+ this._searchBox.removeEventListener("keyup", this._boundEnableClose);
+ this.setCollapsedListeners();
+ };
+ SearchBox.prototype._collapseSearchBox = function () {
+ this._searchBox.classList.remove("is-active");
+ var event = document.createEvent("Event");
+ event.initEvent("searchCollapse", true, true);
+ this._searchBoxField.dispatchEvent(event);
+ };
+ SearchBox.prototype._expandSearchHandler = function () {
+ this._disposeListeners();
+ this._searchBox.classList.add("is-active");
+ this._searchBoxField.focus();
+ };
+ SearchBox.prototype._enableClose = function () {
+ this._setHasText();
+ };
+ SearchBox.prototype._setHasText = function () {
+ if (this._searchBoxField.value.length > 0) {
+ this._searchBox.classList.add(SB_HAS_TEXT);
+ }
+ else {
+ this._searchBox.classList.remove(SB_HAS_TEXT);
+ }
+ };
+ SearchBox.prototype._setFocusAction = function (context) {
+ var _this = this;
+ this._searchBoxField.addEventListener("focus", function () {
+ _this._setHasText();
+ _this._searchBox.addEventListener("keyup", _this._boundEnableClose, false);
+ _this._searchBox.classList.add(SB_IS_ACTIVE);
+ _this._searchBox.classList.add(SB_IS_ACTIVE);
+ }, true);
+ };
+ SearchBox.prototype._clearSearchBox = function (event) {
+ var _this = this;
+ this._clearOnly = true;
+ this._searchBoxField.value = "";
+ this._setHasText();
+ setTimeout(function () {
+ _this._clearOnly = false;
+ }, 10);
+ };
+ SearchBox.prototype._setClearButtonAction = function () {
+ var _this = this;
+ if (this._searchBoxExitButton) {
+ this._searchBoxExitButton.addEventListener("click", this._boundExitSearchBox, false);
+ }
+ this._searchBoxClearButton.addEventListener("mousedown", this._boundClearSearchBox, false);
+ this._searchBoxClearButton.addEventListener("keydown", function (e) {
+ var keyCode = e.keyCode;
+ if (keyCode === 13) {
+ _this._clearSearchBox(e);
+ }
+ }, false);
+ };
+ SearchBox.prototype._handleBlur = function (event) {
+ var _this = this;
+ if (!this._clearOnly) {
+ this._searchBox.removeEventListener("keyup", this._boundEnableClose);
+ setTimeout(function () {
+ if (!_this._searchBox.contains(document.activeElement)) {
+ _this._clearSearchBox();
+ _this._collapseSearchBox();
+ _this.setCollapsedListeners();
+ }
+ }, 10);
+ }
+ else {
+ this._searchBoxField.focus();
+ }
+ this._clearOnly = false;
+ };
+ SearchBox.prototype._setBlurAction = function () {
+ this._searchBoxField.addEventListener("blur", this._boundHandleBlur, true);
+ this._searchBoxClearButton.addEventListener("blur", this._boundHandleBlur, true);
+ };
+ SearchBox.prototype._checkState = function () {
+ if (this._searchBox.classList.contains("is-collapsed")) {
+ this.setCollapsedListeners();
+ }
+ };
+ SearchBox.prototype._addAnimation = function () {
+ this._container.classList.add(SB_IS_ANIMATED);
+ };
+ return SearchBox;
+ }());
+ fabric.SearchBox = SearchBox;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+/**
+ * CommandButton
+ *
+ * Buttons used primarily in the command bar
+ *
+ */
+/**
+ * @namespace fabric
+ */
+var fabric;
+(function (fabric) {
+ /**
+ *
+ * @constructor
+ */
+ var CONTEXT_CLASS = ".ms-ContextualMenu";
+ var CB_SPLIT_CLASS = ".ms-CommandButton-splitIcon";
+ var CB_BUTTON_CLASS = ".ms-CommandButton-button";
+ var MODAL_POSITION = "bottom";
+ var CommandButton = (function () {
+ function CommandButton(container, contextMenu) {
+ this._container = container;
+ this._command = this._container;
+ this._commandButton = this._command.querySelector(CB_BUTTON_CLASS);
+ this._splitButton = this._command.querySelector(CB_SPLIT_CLASS);
+ if (contextMenu) {
+ this._contextualMenu = contextMenu;
+ }
+ else {
+ this._contextualMenu = this._container.querySelector(CONTEXT_CLASS);
+ }
+ this._checkForMenu();
+ }
+ CommandButton.prototype._createModalHostView = function () {
+ this._modalHostView = new fabric.ContextualHost(this._contextualMenu, MODAL_POSITION, this._command, false);
+ };
+ CommandButton.prototype._setClick = function () {
+ if (this._splitButton) {
+ this._splitButton.addEventListener("click", this._createModalHostView.bind(this), false);
+ }
+ else {
+ this._commandButton.addEventListener("click", this._createModalHostView.bind(this), false);
+ }
+ };
+ CommandButton.prototype._checkForMenu = function () {
+ if (this._contextualMenu) {
+ this._setClick();
+ }
+ };
+ return CommandButton;
+ }());
+ fabric.CommandButton = CommandButton;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+///
+///
+/**
+ * CommandBar
+ *
+ * Commanding and navigational surface
+ *
+ */
+var fabric;
+(function (fabric) {
+ "use strict";
+ var CONTEXTUAL_MENU = ".ms-ContextualMenu";
+ var CONTEXTUAL_MENU_ITEM = ".ms-ContextualMenu-item";
+ var CONTEXTUAL_MENU_LINK = ".ms-ContextualMenu-link";
+ var CB_SEARCH_BOX = ".ms-SearchBox";
+ var CB_MAIN_AREA = ".ms-CommandBar-mainArea";
+ var CB_SIDE_COMMAND_AREA = ".ms-CommandBar-sideCommands";
+ var CB_ITEM_OVERFLOW = ".ms-CommandBar-overflowButton";
+ var CB_NO_LABEL_CLASS = "ms-CommandButton--noLabel";
+ var SEARCH_BOX_CLOSE = ".ms-SearchBox-closeField";
+ var COMMAND_BUTTON = ".ms-CommandButton";
+ var COMMAND_BUTTON_LABEL = ".ms-CommandButton-label";
+ var ICON = ".ms-Icon";
+ var OVERFLOW_WIDTH = 40;
+ var OVERFLOW_LEFT_RIGHT_PADDING = 30;
+ var CommandBar = (function () {
+ function CommandBar(container) {
+ this.responsiveSizes = {
+ "sm-min": 320,
+ "md-min": 480,
+ "lg-min": 640,
+ "xl-min": 1024,
+ "xxl-min": 1366,
+ "xxxl-min": 1920
+ };
+ this.visibleCommands = [];
+ this.commandWidths = [];
+ this.overflowCommands = [];
+ this.itemCollection = [];
+ this._sideAreaCollection = [];
+ this.breakpoint = "sm";
+ this._container = container;
+ this.responsiveSizes["sm-max"] = this.responsiveSizes["md-min"] - 1;
+ this.responsiveSizes["md-max"] = this.responsiveSizes["lg-min"] - 1;
+ this.responsiveSizes["lg-max"] = this.responsiveSizes["xl-min"] - 1;
+ this.responsiveSizes["xl-max"] = this.responsiveSizes["xxl-min"] - 1;
+ this.responsiveSizes["xxl-max"] = this.responsiveSizes["xxxl-min"] - 1;
+ this._setElements();
+ this._setBreakpoint();
+ // If the overflow exists then run the overflow resizing
+ if (this._elements.overflowCommand) {
+ this._initOverflow();
+ }
+ this._setUIState();
+ }
+ CommandBar.prototype._runsSearchBox = function (state) {
+ if (state === void 0) { state = "add"; }
+ this._changeSearchState("is-collapsed", state);
+ };
+ CommandBar.prototype._runOverflow = function () {
+ if (this._elements.overflowCommand) {
+ this._saveCommandWidths();
+ this._redrawMenu();
+ this._updateCommands();
+ this._drawCommands();
+ this._checkOverflow();
+ }
+ };
+ CommandBar.prototype._initOverflow = function () {
+ this._createContextualRef();
+ this._createItemCollection(this.itemCollection, CB_MAIN_AREA);
+ this._createItemCollection(this._sideAreaCollection, CB_SIDE_COMMAND_AREA);
+ this._saveCommandWidths();
+ this._updateCommands();
+ this._drawCommands();
+ this._setWindowEvent();
+ this._checkOverflow();
+ };
+ CommandBar.prototype._hasClass = function (element, cls) {
+ return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
+ };
+ CommandBar.prototype._onSearchExpand = function () {
+ if (this.breakpoint === "lg") {
+ this._container.classList.add("search-expanded");
+ this._doResize();
+ }
+ };
+ CommandBar.prototype._onSearchCollapse = function () {
+ if (this.breakpoint === "lg") {
+ this._container.classList.remove("search-expanded");
+ this._doResize();
+ }
+ };
+ CommandBar.prototype._getScreenSize = function () {
+ // First we need to set what the screen is doing, check screen size
+ var w = window;
+ var wSize = {
+ x: 0,
+ y: 0
+ };
+ var d = document, e = d.documentElement, g = d.getElementsByTagName("body")[0];
+ wSize.x = w.innerWidth || e.clientWidth || g.clientWidth;
+ wSize.y = w.innerHeight || e.clientHeight || g.clientHeight;
+ return wSize;
+ };
+ CommandBar.prototype._setBreakpoint = function () {
+ var screenSize = this._getScreenSize().x;
+ switch (true) {
+ case (screenSize <= this.responsiveSizes["sm-max"]):
+ this.breakpoint = "sm";
+ break;
+ case (screenSize >= this.responsiveSizes["md-min"] && screenSize <= this.responsiveSizes["md-max"]):
+ this.breakpoint = "md";
+ break;
+ case (screenSize >= this.responsiveSizes["lg-min"] && screenSize <= this.responsiveSizes["lg-max"]):
+ this.breakpoint = "lg";
+ break;
+ case (screenSize >= this.responsiveSizes["xl-min"] && screenSize <= this.responsiveSizes["xl-max"]):
+ this.breakpoint = "xl";
+ break;
+ case (screenSize >= this.responsiveSizes["xxl-min"] && screenSize <= this.responsiveSizes["xxl-max"]):
+ this.breakpoint = "xxl";
+ break;
+ case (screenSize >= this.responsiveSizes["xxxl-min"]):
+ this.breakpoint = "xxxl";
+ break;
+ }
+ };
+ CommandBar.prototype._createSearchInstance = function () {
+ if (this._elements.searchBox) {
+ return new fabric.SearchBox(this._elements.searchBox);
+ }
+ else {
+ return false;
+ }
+ };
+ CommandBar.prototype._changeSearchState = function (state, action) {
+ if (this._elements.searchBox) {
+ switch (action) {
+ case "remove":
+ this._elements.searchBox.classList.remove(state);
+ break;
+ case "add":
+ this._elements.searchBox.classList.add(state);
+ break;
+ default:
+ break;
+ }
+ }
+ };
+ CommandBar.prototype._setElements = function () {
+ var _this = this;
+ this._elements = {
+ mainArea: this._container.querySelector(CB_MAIN_AREA)
+ };
+ if (this._container.querySelector(CB_SIDE_COMMAND_AREA)) {
+ this._elements.sideCommandArea = this._container.querySelector(CB_SIDE_COMMAND_AREA);
+ }
+ if (this._container.querySelector(CB_ITEM_OVERFLOW)) {
+ this._elements.overflowCommand = this._container.querySelector(CB_ITEM_OVERFLOW);
+ this._elements.contextMenu = this._container.querySelector(CB_ITEM_OVERFLOW).querySelector(CONTEXTUAL_MENU);
+ }
+ if (this._container.querySelector(CB_MAIN_AREA + " " + CB_SEARCH_BOX)) {
+ this._elements.searchBox = this._container.querySelector(CB_MAIN_AREA + " " + CB_SEARCH_BOX);
+ this._elements.searchBoxClose = this._container.querySelector(SEARCH_BOX_CLOSE);
+ this.searchBoxInstance = this._createSearchInstance();
+ this.searchBoxInstance.getInputField().addEventListener("focus", function () { _this._onSearchExpand(); }, false);
+ this.searchBoxInstance.getInputField().addEventListener("searchCollapse", function () { _this._onSearchCollapse(); }, false);
+ }
+ };
+ CommandBar.prototype._createItemCollection = function (iCollection, areaClass) {
+ var item, label, iconClasses, splitClasses, items = this._container.querySelectorAll(areaClass + " > " + COMMAND_BUTTON + ":not(" + CB_ITEM_OVERFLOW + ")");
+ // Initiate the overflow command
+ this._commandButtonInstance = new fabric.CommandButton(this._elements.overflowCommand);
+ for (var i = 0; i < items.length; i++) {
+ item = items[i];
+ label = item.querySelector(COMMAND_BUTTON_LABEL).textContent;
+ var icon = item.querySelector(ICON);
+ if (icon) {
+ iconClasses = icon.className;
+ splitClasses = iconClasses.split(" ");
+ for (var o = 0; o < splitClasses.length; o++) {
+ if (splitClasses[o].indexOf(ICON.replace(".", "") + "--") > -1) {
+ icon = splitClasses[o];
+ break;
+ }
+ }
+ }
+ iCollection.push({
+ item: item,
+ label: label,
+ icon: icon,
+ isCollapsed: (item.classList.contains(CB_NO_LABEL_CLASS)) ? true : false,
+ commandButtonRef: new fabric.CommandButton(item)
+ });
+ }
+ return;
+ };
+ CommandBar.prototype._createContextualRef = function () {
+ this.contextualItemContainerRef = this._elements.contextMenu.querySelector(CONTEXTUAL_MENU_ITEM).cloneNode(true);
+ this.contextualItemLink = this._elements.contextMenu.querySelector(CONTEXTUAL_MENU_LINK).cloneNode(false);
+ this.contextualItemIcon = this._elements.contextMenu.querySelector(".ms-Icon").cloneNode(false);
+ this._elements.contextMenu.innerHTML = "";
+ };
+ CommandBar.prototype._getElementWidth = function (element) {
+ var width, styles;
+ if (element.offsetParent === null) {
+ element.setAttribute("style", "position: absolute; opacity: 0; display: block;");
+ }
+ width = element.getBoundingClientRect().width;
+ styles = window.getComputedStyle(element);
+ width += parseInt(styles.marginLeft, 10) + parseInt(styles.marginRight, 10);
+ element.setAttribute("style", "");
+ return width;
+ };
+ CommandBar.prototype._saveCommandWidths = function () {
+ for (var i = 0; i < this.itemCollection.length; i++) {
+ var item = this.itemCollection[i].item;
+ var width = this._getElementWidth(item);
+ this.commandWidths[i] = width;
+ }
+ };
+ CommandBar.prototype._updateCommands = function () {
+ var searchCommandWidth = 0;
+ var mainAreaWidth = this._elements.mainArea.getBoundingClientRect().width;
+ if (this._elements.searchBox) {
+ searchCommandWidth = this._getElementWidth(this._elements.searchBox);
+ }
+ var offset = searchCommandWidth + OVERFLOW_WIDTH + OVERFLOW_LEFT_RIGHT_PADDING;
+ var totalAreaWidth = mainAreaWidth - offset; // Start with searchbox width
+ // Reset overflow and visible
+ this.visibleCommands = [];
+ this.overflowCommands = [];
+ var totalWidths = 0;
+ for (var i = 0; i < this.itemCollection.length; i++) {
+ totalWidths += this.commandWidths[i];
+ if (totalWidths < totalAreaWidth) {
+ this.visibleCommands.push(this.itemCollection[i]);
+ }
+ else {
+ this.overflowCommands.push(this.itemCollection[i]);
+ }
+ }
+ };
+ CommandBar.prototype._drawCommands = function () {
+ // Remove existing commands
+ this._elements.contextMenu.innerHTML = "";
+ for (var i = 0; i < this.overflowCommands.length; i++) {
+ this.overflowCommands[i].item.classList.add("is-hidden");
+ // Add all items to contextual menu.
+ var newCItem = this.contextualItemContainerRef.cloneNode(false);
+ var newClink = this.contextualItemLink.cloneNode(false);
+ var iconClass = this.overflowCommands[i].icon;
+ newClink.innerText = this.overflowCommands[i].label;
+ newCItem.appendChild(newClink);
+ if (iconClass) {
+ var newIcon = this.contextualItemIcon.cloneNode(false);
+ newIcon.className = ICON.replace(".", "") + " " + iconClass;
+ newCItem.appendChild(newIcon);
+ }
+ this._elements.contextMenu.appendChild(newCItem);
+ }
+ // Show visible commands
+ for (var x = 0; x < this.visibleCommands.length; x++) {
+ this.visibleCommands[x].item.classList.remove("is-hidden");
+ }
+ };
+ CommandBar.prototype._setWindowEvent = function () {
+ var _this = this;
+ window.addEventListener("resize", function () {
+ _this._doResize();
+ }, false);
+ };
+ CommandBar.prototype._processCollapsedClasses = function (type) {
+ for (var i = 0; i < this.itemCollection.length; i++) {
+ var thisItem = this.itemCollection[i];
+ if (!thisItem.isCollapsed) {
+ if (type === "add") {
+ thisItem.item.classList.add(CB_NO_LABEL_CLASS);
+ }
+ else {
+ thisItem.item.classList.remove(CB_NO_LABEL_CLASS);
+ }
+ }
+ }
+ for (var i = 0; i < this._sideAreaCollection.length; i++) {
+ var thisItem = this._sideAreaCollection[i];
+ if (!thisItem.isCollapsed) {
+ if (type === "add") {
+ thisItem.item.classList.add(CB_NO_LABEL_CLASS);
+ }
+ else {
+ thisItem.item.classList.remove(CB_NO_LABEL_CLASS);
+ }
+ }
+ }
+ };
+ CommandBar.prototype._setUIState = function () {
+ switch (this.breakpoint) {
+ case "sm":
+ this._runsSearchBox();
+ this._processCollapsedClasses("add");
+ this._runOverflow();
+ break;
+ case "md":
+ this._runsSearchBox();
+ // Add collapsed classes to commands
+ this._processCollapsedClasses("add");
+ this._runOverflow();
+ break;
+ case "lg":
+ this._runsSearchBox();
+ this._processCollapsedClasses("remove");
+ this._runOverflow();
+ break;
+ case "xl":
+ this._runsSearchBox("remove");
+ this._processCollapsedClasses("remove");
+ this._runOverflow();
+ break;
+ default:
+ this._runsSearchBox("remove");
+ this._processCollapsedClasses("remove");
+ this._runOverflow();
+ break;
+ }
+ };
+ CommandBar.prototype._checkOverflow = function () {
+ if (this.overflowCommands.length > 0) {
+ this._elements.overflowCommand.classList.remove("is-hidden");
+ }
+ else {
+ this._elements.overflowCommand.classList.add("is-hidden");
+ if (this.activeCommand === this._elements.overflowCommand) {
+ this._elements.contextMenu.classList.remove("is-open");
+ }
+ }
+ };
+ CommandBar.prototype._redrawMenu = function () {
+ var left;
+ if (this._hasClass(this._elements.contextMenu, "is-open")) {
+ left = this.activeCommand.getBoundingClientRect().left;
+ this._drawOverflowMenu(left);
+ }
+ };
+ CommandBar.prototype._drawOverflowMenu = function (left) {
+ this._elements.contextMenu.setAttribute("style", "left: " + left + "px; transform: translateX(-50%)");
+ };
+ CommandBar.prototype._doResize = function () {
+ this._setBreakpoint();
+ this._setUIState();
+ };
+ return CommandBar;
+ }());
+ fabric.CommandBar = CommandBar;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+"use strict";
+var fabric;
+(function (fabric) {
+ /**
+ * RadioButton Plugin
+ *
+ * Adds basic demonstration functionality to .ms-RadioButton components.
+ *
+ */
+ var RadioButton = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of RadioButton
+ * @constructor
+ */
+ function RadioButton(container) {
+ this._container = container;
+ this._choiceField = this._container.querySelector(".ms-RadioButton-field");
+ this._choiceInput = this._container.querySelector(".ms-RadioButton-input");
+ if (this._choiceField.getAttribute("aria-checked") === "true") {
+ this._choiceField.classList.add("is-checked");
+ }
+ this._addListeners();
+ }
+ RadioButton.prototype.getValue = function () {
+ return this._choiceField.getAttribute("aria-checked") === "true" ? true : false;
+ };
+ RadioButton.prototype.toggle = function () {
+ if (this.getValue()) {
+ this.unCheck();
+ }
+ else {
+ this.check();
+ }
+ };
+ RadioButton.prototype.check = function () {
+ this._choiceField.setAttribute("aria-checked", "true");
+ this._choiceField.classList.add("is-checked");
+ this._choiceInput.checked = true;
+ };
+ RadioButton.prototype.unCheck = function () {
+ this._choiceField.setAttribute("aria-checked", "false");
+ this._choiceField.classList.remove("is-checked");
+ this._choiceInput.checked = false;
+ };
+ RadioButton.prototype.removeListeners = function () {
+ this._choiceField.removeEventListener("focus", this._FocusHandler.bind(this));
+ this._choiceField.removeEventListener("blur", this._BlurHandler.bind(this));
+ this._choiceField.removeEventListener("click", this._RadioClickHandler.bind(this));
+ this._choiceField.addEventListener("keydown", this._RadioKeydownHandler.bind(this));
+ };
+ RadioButton.prototype._addListeners = function () {
+ this._choiceField.addEventListener("focus", this._FocusHandler.bind(this), false);
+ this._choiceField.addEventListener("blur", this._BlurHandler.bind(this), false);
+ this._choiceField.addEventListener("click", this._RadioClickHandler.bind(this), false);
+ this._choiceField.addEventListener("keydown", this._RadioKeydownHandler.bind(this), false);
+ };
+ RadioButton.prototype._RadioClickHandler = function (event) {
+ event.stopPropagation();
+ event.preventDefault();
+ if (!this._choiceField.classList.contains("is-disabled")) {
+ this._dispatchSelectEvent();
+ }
+ };
+ RadioButton.prototype._dispatchSelectEvent = function () {
+ var objDict = {
+ bubbles: true,
+ cancelable: true,
+ detail: {
+ name: this._choiceField.getAttribute("name"),
+ item: this
+ }
+ };
+ this._choiceField.dispatchEvent(new CustomEvent("msChoicefield", objDict));
+ };
+ RadioButton.prototype._RadioKeydownHandler = function (event) {
+ if (event.keyCode === 32) {
+ event.stopPropagation();
+ event.preventDefault();
+ if (!this._choiceField.classList.contains("is-disabled")) {
+ this._dispatchSelectEvent();
+ }
+ }
+ };
+ RadioButton.prototype._FocusHandler = function () {
+ this._choiceField.classList.add("in-focus");
+ };
+ RadioButton.prototype._BlurHandler = function () {
+ this._choiceField.classList.remove("in-focus");
+ };
+ return RadioButton;
+ }());
+ fabric.RadioButton = RadioButton;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+"use strict";
+var fabric;
+(function (fabric) {
+ /**
+ * ChoiceFieldGroup Plugin
+ *
+ * Adds basic demonstration functionality to .ms-ChoiceFieldGroup components.
+ *
+ */
+ var ChoiceFieldGroup = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of ChoiceFieldGroup
+ * @constructor
+ */
+ function ChoiceFieldGroup(container) {
+ this._choiceFieldGroup = container;
+ this._choiceFieldComponents = [];
+ this._initalSetup();
+ this._addListeners();
+ }
+ ChoiceFieldGroup.prototype.removeListeners = function () {
+ this._choiceFieldGroup.removeEventListener("msChoicefield", this._ChoiceFieldHandler.bind(this));
+ };
+ ChoiceFieldGroup.prototype._initalSetup = function () {
+ var choiceFieldElements = this._choiceFieldGroup.querySelectorAll(".ms-RadioButton");
+ for (var i = 0; i < choiceFieldElements.length; i++) {
+ this._choiceFieldComponents[i] = new fabric.RadioButton(choiceFieldElements[i]);
+ }
+ };
+ ChoiceFieldGroup.prototype._addListeners = function () {
+ document.addEventListener("msChoicefield", this._ChoiceFieldHandler.bind(this), false);
+ };
+ ChoiceFieldGroup.prototype._ChoiceFieldHandler = function (event) {
+ var name = event.detail.name;
+ var selectedChoice = event.detail.item;
+ if (this._choiceFieldGroup.id === name) {
+ for (var i = 0; i < this._choiceFieldComponents.length; i++) {
+ this._choiceFieldComponents[i].unCheck();
+ }
+ selectedChoice.check();
+ }
+ };
+ return ChoiceFieldGroup;
+ }());
+ fabric.ChoiceFieldGroup = ChoiceFieldGroup;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+///
+var fabric;
+(function (fabric) {
+ var MODAL_POSITION = "bottom";
+ var SUBMENU_POSITION = "right";
+ var ContextualMenu = (function () {
+ function ContextualMenu(container, hostTarget, position) {
+ this._container = container;
+ this._hostTarget = hostTarget;
+ this._position = position ? position : MODAL_POSITION;
+ this._isOpen = false;
+ this._setOpener(hostTarget);
+ this._init();
+ }
+ ContextualMenu.prototype.getHost = function () {
+ return this._host;
+ };
+ ContextualMenu.prototype._init = function () {
+ this._container.addEventListener("click", this._onContextualMenuClick.bind(this), true);
+ document.addEventListener("click", this._onDocumentClick.bind(this), false);
+ };
+ ContextualMenu.prototype._onDocumentClick = function (event) {
+ var target = event.target;
+ var classList = target.classList;
+ if (!this._hostTarget.contains(target) && !classList.contains("ms-ContextualMenu-link")) {
+ this._isOpen = false;
+ }
+ };
+ ContextualMenu.prototype._onContextualMenuClick = function (event) {
+ var target = event.target;
+ var classList = target.classList;
+ if (classList.contains("ms-ContextualMenu-link") && !classList.contains("is-disabled")) {
+ if (this._container.classList.contains("ms-ContextualMenu--multiselect")) {
+ this._multiSelect(target);
+ }
+ else {
+ this._singleSelect(target);
+ if (!target.parentElement.classList.contains("ms-ContextualMenu-item--hasMenu")) {
+ this._host.disposeModal();
+ this._isOpen = false;
+ }
+ }
+ }
+ };
+ ContextualMenu.prototype._multiSelect = function (target) {
+ if (target.classList.contains("is-selected")) {
+ target.classList.remove("is-selected");
+ }
+ else {
+ target.classList.add("is-selected");
+ }
+ };
+ ContextualMenu.prototype._singleSelect = function (target) {
+ var selecteds = this._container.querySelectorAll(".is-selected");
+ var i = selecteds.length;
+ while (i--) {
+ selecteds[i].classList.remove("is-selected");
+ }
+ target.classList.add("is-selected");
+ };
+ ContextualMenu.prototype._toggleMenu = function (event) {
+ (!this._isOpen) ? this._openContextMenu(event) : this._host.disposeModal();
+ this._isOpen = !this._isOpen;
+ };
+ ContextualMenu.prototype._setOpener = function (hostTarget) {
+ var _this = this;
+ hostTarget.addEventListener("click", function (event) {
+ event.preventDefault();
+ _this._toggleMenu(event);
+ });
+ };
+ ContextualMenu.prototype._openContextMenu = function (event) {
+ this._createModalHostView(this._container, this._position, this._hostTarget);
+ this._checkForSubmenus(this._container);
+ };
+ ContextualMenu.prototype._checkForSubmenus = function (container) {
+ var _this = this;
+ var submenus = container.querySelectorAll(".ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu");
+ var i = submenus.length;
+ if (submenus.length) {
+ var _loop_1 = function() {
+ var button = submenus[i].querySelector(".ms-ContextualMenu-link");
+ var menu = submenus[i].querySelector(".ms-ContextualMenu");
+ if (menu) {
+ var contextualMenu_1 = new fabric.ContextualMenu(menu, button, SUBMENU_POSITION);
+ menu.addEventListener("hostAdded", function () {
+ _this._host.setChildren(contextualMenu_1.getHost());
+ });
+ }
+ };
+ while (i--) {
+ _loop_1();
+ }
+ }
+ };
+ ContextualMenu.prototype._createModalHostView = function (container, position, hostTarget) {
+ container.classList.remove("is-hidden");
+ this._host = new fabric.ContextualHost(container, position, hostTarget, false);
+ var event = document.createEvent("Event");
+ event.initEvent("hostAdded", true, true);
+ container.dispatchEvent(event);
+ };
+ return ContextualMenu;
+ }());
+ fabric.ContextualMenu = ContextualMenu;
+})(fabric || (fabric = {}));
+
+"use strict";
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// @TODO - we can add this once jquery is removed
+// "use strict";
+///
+///
+var fabric;
+(function (fabric) {
+ /**
+ * DatePicker Plugin
+ */
+ var DatePicker = (function () {
+ function DatePicker(container, options) {
+ var _this = this;
+ /** Set up letiables and run the Pickadate plugin. */
+ var $datePicker = $(container);
+ var $dateField = $datePicker.find(".ms-TextField-field").pickadate($.extend({
+ // Strings and translations.
+ weekdaysShort: ["S", "M", "T", "W", "T", "F", "S"],
+ // Don't render the buttons
+ clear: "",
+ close: "",
+ today: "",
+ // Events
+ onStart: function () {
+ _this.initCustomView($datePicker);
+ },
+ // Classes
+ klass: {
+ // The element states
+ input: "ms-DatePicker-input",
+ active: "ms-DatePicker-input--active",
+ // The root picker and states
+ picker: "ms-DatePicker-picker",
+ opened: "ms-DatePicker-picker--opened",
+ focused: "ms-DatePicker-picker--focused",
+ // The picker holder
+ holder: "ms-DatePicker-holder",
+ // The picker frame, wrapper, and box
+ frame: "ms-DatePicker-frame",
+ wrap: "ms-DatePicker-wrap",
+ box: "ms-DatePicker-dayPicker",
+ // The picker header
+ header: "ms-DatePicker-header",
+ // Month & year labels
+ month: "ms-DatePicker-month",
+ year: "ms-DatePicker-year",
+ // Table of dates
+ table: "ms-DatePicker-table",
+ // Weekday labels
+ weekdays: "ms-DatePicker-weekday",
+ // Day states
+ day: "ms-DatePicker-day",
+ disabled: "ms-DatePicker-day--disabled",
+ selected: "ms-DatePicker-day--selected",
+ highlighted: "ms-DatePicker-day--highlighted",
+ now: "ms-DatePicker-day--today",
+ infocus: "ms-DatePicker-day--infocus",
+ outfocus: "ms-DatePicker-day--outfocus"
+ }
+ }, options || {}));
+ var $picker = $dateField.pickadate("picker");
+ this.picker = $picker;
+ /** Respond to built-in picker events. */
+ $picker.on({
+ render: function () {
+ _this.updateCustomView($datePicker);
+ },
+ open: function () {
+ _this.scrollUp($datePicker);
+ }
+ });
+ }
+ /**
+ * After the Pickadate plugin starts, this function
+ * adds additional controls to the picker view.
+ */
+ DatePicker.prototype.initCustomView = function ($datePicker) {
+ var _this = this;
+ /** Get some letiables ready. */
+ var $monthControls = $datePicker.find(".ms-DatePicker-monthComponents");
+ var $goToday = $datePicker.find(".ms-DatePicker-goToday");
+ var $monthPicker = $datePicker.find(".ms-DatePicker-monthPicker");
+ var $yearPicker = $datePicker.find(".ms-DatePicker-yearPicker");
+ var $pickerWrapper = $datePicker.find(".ms-DatePicker-wrap");
+ var $picker = $datePicker.find(".ms-TextField-field").pickadate("picker");
+ /** Move the month picker into position. */
+ $monthControls.appendTo($pickerWrapper);
+ $goToday.appendTo($pickerWrapper);
+ $monthPicker.appendTo($pickerWrapper);
+ $yearPicker.appendTo($pickerWrapper);
+ /** Update the custom view. */
+ this.updateCustomView($datePicker);
+ /** dispatch click on document so anything listening can be notified */
+ $picker.on("open", function (e) {
+ var evt = document.createEvent("MouseEvents");
+ evt.initEvent("click", true, true);
+ document.dispatchEvent(evt);
+ });
+ /** Move back one month. */
+ $monthControls.on("click", ".js-prevMonth", function (event) {
+ event.preventDefault();
+ var newMonth = $picker.get("highlight").month - 1;
+ _this.changeHighlightedDate([null, newMonth, null]);
+ });
+ /** Move ahead one month. */
+ $monthControls.on("click", ".js-nextMonth", function (event) {
+ event.preventDefault();
+ var newMonth = $picker.get("highlight").month + 1;
+ _this.changeHighlightedDate([null, newMonth, null]);
+ });
+ /** Move back one year. */
+ $monthPicker.on("click", ".js-prevYear", function (event) {
+ event.preventDefault();
+ var newYear = $picker.get("highlight").year - 1;
+ _this.changeHighlightedDate([newYear, null, null]);
+ });
+ /** Move ahead one year. */
+ $monthPicker.on("click", ".js-nextYear", function (event) {
+ event.preventDefault();
+ var newYear = $picker.get("highlight").year + 1;
+ _this.changeHighlightedDate([newYear, null, null]);
+ });
+ /** Move back one decade. */
+ $yearPicker.on("click", ".js-prevDecade", function (event) {
+ event.preventDefault();
+ var newYear = $picker.get("highlight").year - 10;
+ _this.changeHighlightedDate([newYear, null, null]);
+ });
+ /** Move ahead one decade. */
+ $yearPicker.on("click", ".js-nextDecade", function (event) {
+ event.preventDefault();
+ var newYear = $picker.get("highlight").year + 10;
+ _this.changeHighlightedDate([newYear, null, null]);
+ });
+ /** Go to the current date, shown in the day picking view. */
+ $goToday.click(function (event) {
+ event.preventDefault();
+ /** Select the current date, while keeping the picker open. */
+ var now = new Date();
+ $picker.set("select", [now.getFullYear(), now.getMonth(), now.getDate()]);
+ /** Switch to the default (calendar) view. */
+ $datePicker.removeClass("is-pickingMonths").removeClass("is-pickingYears");
+ });
+ /** Change the highlighted month. */
+ $monthPicker.on("click", ".js-changeDate", function (event) {
+ event.preventDefault();
+ var $changeDate = $(event.target);
+ /** Get the requested date from the data attributes. */
+ var newYear = $changeDate.attr("data-year");
+ var newMonth = $changeDate.attr("data-month");
+ var newDay = $changeDate.attr("data-day");
+ /** Update the date. */
+ _this.changeHighlightedDate([newYear, newMonth, newDay]);
+ /** If we"ve been in the "picking months" state on mobile, remove that state so we show the calendar again. */
+ if ($datePicker.hasClass("is-pickingMonths")) {
+ $datePicker.removeClass("is-pickingMonths");
+ }
+ });
+ /** Change the highlighted year. */
+ $yearPicker.on("click", ".js-changeDate", function (event) {
+ event.preventDefault();
+ var $changeDate = $(event.target);
+ /** Get the requested date from the data attributes. */
+ var newYear = $changeDate.attr("data-year");
+ var newMonth = $changeDate.attr("data-month");
+ var newDay = $changeDate.attr("data-day");
+ /** Update the date. */
+ _this.changeHighlightedDate([newYear, newMonth, newDay]);
+ /** If we"ve been in the "picking years" state on mobile, remove that state so we show the calendar again. */
+ if ($datePicker.hasClass("is-pickingYears")) {
+ $datePicker.removeClass("is-pickingYears");
+ }
+ });
+ /** Switch to the default state. */
+ $monthPicker.on("click", ".js-showDayPicker", function () {
+ $datePicker.removeClass("is-pickingMonths");
+ $datePicker.removeClass("is-pickingYears");
+ });
+ /** Switch to the is-pickingMonths state. */
+ $monthControls.on("click", ".js-showMonthPicker", function () {
+ $datePicker.toggleClass("is-pickingMonths");
+ });
+ /** Switch to the is-pickingYears state. */
+ $monthPicker.on("click", ".js-showYearPicker", function () {
+ $datePicker.toggleClass("is-pickingYears");
+ });
+ };
+ /** Change the highlighted date. */
+ DatePicker.prototype.changeHighlightedDate = function (dateArr) {
+ var newDateArr = this.setDateAttributes(dateArr);
+ /** Update it. */
+ this.picker.set("highlight", newDateArr);
+ };
+ /** Whenever the picker renders, do our own rendering on the custom controls. */
+ DatePicker.prototype.updateCustomView = function ($datePicker) {
+ /** Get some letiables ready. */
+ var $monthPicker = $datePicker.find(".ms-DatePicker-monthPicker");
+ var $yearPicker = $datePicker.find(".ms-DatePicker-yearPicker");
+ var $picker = $datePicker.find(".ms-TextField-field").pickadate("picker");
+ /** Set the correct year. */
+ $monthPicker.find(".ms-DatePicker-currentYear").text($picker.get("view").year);
+ /** Highlight the current month. */
+ $monthPicker.find(".ms-DatePicker-monthOption").removeClass("is-highlighted");
+ $monthPicker.find(".ms-DatePicker-monthOption[data-month='" + $picker.get("highlight").month + "']").addClass("is-highlighted");
+ /** Generate the grid of years for the year picker view. */
+ // Start by removing any existing generated output. */
+ $yearPicker.find(".ms-DatePicker-currentDecade").remove();
+ $yearPicker.find(".ms-DatePicker-optionGrid").remove();
+ // Generate the output by going through the years.
+ var startingYear = $picker.get("highlight").year - 11;
+ var decadeText = startingYear + " - " + (startingYear + 11);
+ var output = "" + decadeText + "
";
+ output += "";
+ for (var year = startingYear; year < (startingYear + 12); year++) {
+ output += "" + year + " ";
+ }
+ output += "
";
+ // Output the title and grid of years generated above.
+ $yearPicker.append(output);
+ /** Highlight the current year. */
+ $yearPicker.find(".ms-DatePicker-yearOption").removeClass("is-highlighted");
+ $yearPicker.find(".ms-DatePicker-yearOption[data-year='" + $picker.get("highlight").year + "']").addClass("is-highlighted");
+ };
+ /** Scroll the page up so that the field the date picker is attached to is at the top. */
+ DatePicker.prototype.scrollUp = function ($datePicker) {
+ $("html, body").animate({
+ scrollTop: $datePicker.offset().top
+ }, 367);
+ };
+ DatePicker.prototype.setDateAttributes = function (dateArr) {
+ var newYear = dateArr[0], newMonth = dateArr[1], newDay = dateArr[2];
+ /** All letiables are optional. If not provided, default to the current value. */
+ if (typeof newYear === "undefined" || newYear === null) {
+ newYear = this.picker.get("highlight").year;
+ }
+ if (typeof newMonth === "undefined" || newMonth === null) {
+ newMonth = this.picker.get("highlight").month;
+ }
+ if (typeof newDay === "undefined" || newDay === null) {
+ newDay = this.picker.get("highlight").date;
+ }
+ return [newYear, newMonth, newDay];
+ };
+ return DatePicker;
+ }());
+ fabric.DatePicker = DatePicker;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+var fabric;
+(function (fabric) {
+ var Overlay = (function () {
+ function Overlay(overlayElement) {
+ if (overlayElement) {
+ this.overlayElement = overlayElement;
+ }
+ else {
+ var overlayContainer = document.createElement("div");
+ overlayContainer.setAttribute("class", "ms-Overlay");
+ this.overlayElement = overlayContainer;
+ }
+ this.overlayElement.addEventListener("click", this.hide.bind(this), false);
+ }
+ Overlay.prototype.remove = function () {
+ this.overlayElement.parentElement.removeChild(this.overlayElement);
+ };
+ Overlay.prototype.show = function () {
+ this.overlayElement.classList.add("is-visible");
+ document.body.classList.add("ms-u-overflowHidden");
+ };
+ Overlay.prototype.hide = function () {
+ this.overlayElement.classList.remove("is-visible");
+ document.body.classList.remove("ms-u-overflowHidden");
+ };
+ return Overlay;
+ }());
+ fabric.Overlay = Overlay;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// @TODO - we can add this once jquery is removed
+///
+var fabric;
+(function (fabric) {
+ var Dialog = (function () {
+ function Dialog(dialog) {
+ this._dialog = dialog;
+ this._closeButtonElement = this._dialog.querySelector(".ms-Dialog-buttonClose");
+ this._actionButtonElements = this._dialog.querySelectorAll(".ms-Dialog-action");
+ if (this._closeButtonElement) {
+ this._closeButtonElement.addEventListener("click", this.close.bind(this), false);
+ }
+ for (var i = 0; i < this._actionButtonElements.length; i++) {
+ this._actionButtonElements[i].addEventListener("click", this.close.bind(this), false);
+ }
+ }
+ Dialog.prototype.close = function () {
+ this._overlay.remove();
+ this._dialog.classList.remove("is-open");
+ document.body.classList.remove("ms-u-overflowHidden");
+ this._overlay.overlayElement.removeEventListener("click", this.close.bind(this));
+ };
+ Dialog.prototype.open = function () {
+ this._dialog.classList.add("is-open");
+ this._overlay = new fabric.Overlay();
+ if (!this._dialog.classList.contains("ms-Dialog--blocking")) {
+ this._overlay.overlayElement.addEventListener("click", this.close.bind(this), false);
+ this._overlay.show();
+ document.body.classList.add("ms-u-overflowHidden");
+ }
+ this._dialog.parentElement.appendChild(this._overlay.overlayElement);
+ };
+ return Dialog;
+ }());
+ fabric.Dialog = Dialog;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// "use strict";
+var fabric;
+(function (fabric) {
+ /**
+ * DialogHost class
+ */
+ var DialogHost = (function () {
+ function DialogHost() {
+ }
+ return DialogHost;
+ }());
+ fabric.DialogHost = DialogHost;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+var fabric;
+(function (fabric) {
+ /**
+ * Panel Host
+ *
+ * A host for the panel control
+ *
+ */
+ var PANEL_HOST_CLASS = "ms-PanelHost";
+ var PanelHost = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of Panel
+ * @constructor
+ */
+ function PanelHost(layer, callBack) {
+ this._layer = layer;
+ this._callBack = callBack;
+ this._createElements();
+ this._renderElements();
+ }
+ PanelHost.prototype.dismiss = function () {
+ this.overlay.hide();
+ document.body.removeChild(this.panelHost);
+ };
+ PanelHost.prototype.update = function (layer, callBack) {
+ this.panelHost.replaceChild(layer, this._layer);
+ if (callBack) {
+ callBack();
+ }
+ };
+ PanelHost.prototype._renderElements = function () {
+ document.body.appendChild(this.panelHost);
+ if (this._callBack) {
+ this._callBack(this._layer);
+ }
+ };
+ PanelHost.prototype._createElements = function () {
+ this.panelHost = document.createElement("div");
+ this.panelHost.classList.add(PANEL_HOST_CLASS);
+ this.panelHost.appendChild(this._layer);
+ this.overlay = new fabric.Overlay(this._overlayContainer);
+ this.overlay.show();
+ // Append Elements
+ this.panelHost.appendChild(this.overlay.overlayElement);
+ };
+ return PanelHost;
+ }());
+ fabric.PanelHost = PanelHost;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+var fabric;
+(function (fabric) {
+ /**
+ * Panel Host
+ *
+ * A host for the panel control
+ *
+ */
+ var ANIMATE_IN_STATE = "animate-in";
+ var ANIMATE_OUT_STATE = "animate-out";
+ var ANIMATION_END = 400;
+ var Panel = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of Panel
+ * @constructor
+ */
+ function Panel(panel, direction, animateOverlay) {
+ this._panel = panel;
+ this._direction = direction || "right";
+ this._animateOverlay = animateOverlay || true;
+ this.panelHost = new fabric.PanelHost(this._panel, this._animateInPanel);
+ this._closeButton = this._panel.querySelector(".ms-PanelAction-close");
+ this._clickHandler = this.dismiss.bind(this, null);
+ this._setEvents();
+ // Set body height to 100% and overflow hidden while panel is open
+ document.body.setAttribute("style", "height: 100%; overflow: hidden;");
+ }
+ Panel.prototype.dismiss = function (callBack) {
+ var _this = this;
+ this._panel.classList.add(ANIMATE_OUT_STATE);
+ setTimeout(function () {
+ _this._panel.classList.remove(ANIMATE_OUT_STATE);
+ _this._panel.classList.remove("is-open");
+ _this.panelHost.dismiss();
+ if (callBack) {
+ callBack();
+ }
+ // Remove temporary body styles
+ document.body.setAttribute("style", "");
+ }, ANIMATION_END);
+ if (this._closeButton !== null) {
+ this._closeButton.removeEventListener("click", this._clickHandler);
+ }
+ };
+ Panel.prototype._setEvents = function () {
+ this.panelHost.overlay.overlayElement.addEventListener("click", this._clickHandler);
+ if (this._closeButton !== null) {
+ this._closeButton.addEventListener("click", this._clickHandler);
+ }
+ };
+ Panel.prototype._animateInPanel = function (layer) {
+ layer.classList.add(ANIMATE_IN_STATE);
+ layer.classList.add("is-open");
+ setTimeout(function () {
+ layer.classList.remove(ANIMATE_IN_STATE);
+ }, ANIMATION_END);
+ };
+ return Panel;
+ }());
+ fabric.Panel = Panel;
+})(fabric || (fabric = {}));
+
+///
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+"use strict";
+var fabric;
+(function (fabric) {
+ var DROPDOWN_CLASS = "ms-Dropdown";
+ var DROPDOWN_TITLE_CLASS = "ms-Dropdown-title";
+ var DROPDOWN_LABEL_HELPER = "ms-Dropdown-truncator";
+ var DROPDOWN_ITEMS_CLASS = "ms-Dropdown-items";
+ var DROPDOWN_ITEM_CLASS = "ms-Dropdown-item";
+ var DROPDOWN_SELECT_CLASS_SELECTOR = ".ms-Dropdown-select";
+ var PANEL_CLASS = "ms-Panel";
+ var IS_OPEN_CLASS = "is-open";
+ var IS_DISABLED_CLASS = "is-disabled";
+ var IS_SELECTED_CLASS = "is-selected";
+ var ANIMATE_IN_CLASS = "animate-in";
+ var SMALL_MAX_WIDTH = 479;
+ /**
+ * Dropdown Plugin
+ *
+ * Given .ms-Dropdown containers with generic elements inside, this plugin hides the original
+ * dropdown and creates a new "fake" dropdown that can more easily be styled across browsers.
+ *
+ */
+ var Dropdown = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of Dropdown
+ * @constructor
+ */
+ function Dropdown(container) {
+ this._container = container;
+ this._dropdownLabelHelper = document.createElement("span");
+ this._dropdownLabelHelper.classList.add(DROPDOWN_LABEL_HELPER);
+ this._dropdownLabelHelper.classList.add(DROPDOWN_TITLE_CLASS);
+ this._newDropdownLabel = document.createElement("span");
+ this._newDropdownLabel.classList.add(DROPDOWN_TITLE_CLASS);
+ this._newDropdown = document.createElement("ul");
+ this._newDropdown.classList.add(DROPDOWN_ITEMS_CLASS);
+ this._dropdownItems = [];
+ this._originalDropdown = container.querySelector(DROPDOWN_SELECT_CLASS_SELECTOR);
+ var _originalOptions = this._originalDropdown.querySelectorAll("option");
+ /** Bind the callbacks to retain their context */
+ this._onCloseDropdown = this._onCloseDropdown.bind(this);
+ this._onItemSelection = this._onItemSelection.bind(this);
+ this._onOpenDropdown = this._onOpenDropdown.bind(this);
+ /** Create a new option as a list item, and add it to the replacement dropdown */
+ for (var i = 0; i < _originalOptions.length; ++i) {
+ var option = _originalOptions[i];
+ if (option.selected) {
+ this._newDropdownLabel.innerHTML = option.text;
+ }
+ var newItem = document.createElement("li");
+ newItem.classList.add(DROPDOWN_ITEM_CLASS);
+ if (option.disabled) {
+ newItem.classList.add(IS_DISABLED_CLASS);
+ }
+ newItem.innerHTML = option.text;
+ newItem.addEventListener("click", this._onItemSelection);
+ this._newDropdown.appendChild(newItem);
+ this._dropdownItems.push({
+ oldOption: option,
+ newItem: newItem
+ });
+ }
+ /** Add the new replacement dropdown */
+ container.appendChild(this._newDropdownLabel);
+ container.appendChild(this._newDropdown);
+ /** Add dropdown label helper for truncation */
+ container.appendChild(this._dropdownLabelHelper);
+ /** Toggle open/closed state of the dropdown when clicking its title. */
+ this._newDropdownLabel.addEventListener("click", this._onOpenDropdown);
+ this._checkTruncation();
+ this._setWindowEvent();
+ }
+ Dropdown.prototype._setWindowEvent = function () {
+ var _this = this;
+ window.addEventListener("resize", function () {
+ _this._doResize();
+ _this._checkTruncation();
+ }, false);
+ };
+ Dropdown.prototype._checkTruncation = function () {
+ var selected = this._newDropdown.querySelector("." + IS_SELECTED_CLASS);
+ var origText = (selected ?
+ selected.textContent :
+ this._newDropdown.querySelectorAll("." + DROPDOWN_ITEM_CLASS)[0].textContent);
+ this._dropdownLabelHelper.textContent = origText;
+ if (this._dropdownLabelHelper.offsetHeight > this._newDropdownLabel.offsetHeight) {
+ var i = 0;
+ var ellipsis = "...";
+ var newText = void 0;
+ do {
+ i--;
+ newText = origText.slice(0, i);
+ this._dropdownLabelHelper.textContent = newText + ellipsis;
+ } while (this._dropdownLabelHelper.offsetHeight > this._newDropdownLabel.offsetHeight);
+ }
+ this._newDropdownLabel.textContent = this._dropdownLabelHelper.textContent;
+ };
+ Dropdown.prototype._getScreenSize = function () {
+ var w = window;
+ var wSize = {
+ x: 0,
+ y: 0
+ };
+ var d = document, e = d.documentElement, g = d.getElementsByTagName("body")[0];
+ wSize.x = w.innerWidth || e.clientWidth || g.clientWidth;
+ wSize.y = w.innerHeight || e.clientHeight || g.clientHeight;
+ return wSize;
+ };
+ Dropdown.prototype._doResize = function () {
+ var isOpen = this._container.classList.contains(IS_OPEN_CLASS);
+ if (!isOpen) {
+ return;
+ }
+ var screenSize = this._getScreenSize().x;
+ if (screenSize <= SMALL_MAX_WIDTH) {
+ this._openDropdownAsPanel();
+ }
+ else {
+ this._removeDropdownAsPanel();
+ }
+ };
+ Dropdown.prototype._openDropdownAsPanel = function () {
+ if (this._panel === undefined) {
+ this._panelContainer = document.createElement("div");
+ this._panelContainer.classList.add(PANEL_CLASS);
+ this._panelContainer.classList.add(DROPDOWN_CLASS);
+ this._panelContainer.classList.add(IS_OPEN_CLASS);
+ this._panelContainer.classList.add(ANIMATE_IN_CLASS);
+ this._panelContainer.appendChild(this._newDropdown);
+ /** Assign the script to the new panel, which creates a panel host, overlay, and attaches it to the DOM */
+ this._panel = new fabric.Panel(this._panelContainer);
+ }
+ };
+ Dropdown.prototype._removeDropdownAsPanel = function (evt) {
+ var _this = this;
+ if (this._panel !== undefined) {
+ /** destroy panel and move dropdown back to outside the panel */
+ /* if event target is overlay element, only append dropdown to prevent */
+ /* double dismiss bug, otherwise, dismiss and append */
+ if (evt && evt.target === this._panel.panelHost.overlay.overlayElement) {
+ this._container.appendChild(this._newDropdown);
+ }
+ else {
+ this._panel.dismiss(function () {
+ _this._container.appendChild(_this._newDropdown);
+ });
+ }
+ this._panel = undefined;
+ }
+ };
+ Dropdown.prototype._onOpenDropdown = function (evt) {
+ var isDisabled = this._container.classList.contains(IS_DISABLED_CLASS);
+ var isOpen = this._container.classList.contains(IS_OPEN_CLASS);
+ if (!isDisabled && !isOpen) {
+ /** Stop the click event from propagating, which would just close the dropdown immediately. */
+ evt.stopPropagation();
+ this._closeOtherDropdowns();
+ /** Go ahead and open that dropdown. */
+ this._container.classList.add(IS_OPEN_CLASS);
+ /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */
+ document.addEventListener("click", this._onCloseDropdown);
+ var screenSize = this._getScreenSize().x;
+ if (screenSize <= SMALL_MAX_WIDTH) {
+ this._openDropdownAsPanel();
+ }
+ }
+ };
+ Dropdown.prototype._closeOtherDropdowns = function () {
+ var dropdowns = document.querySelectorAll("." + DROPDOWN_CLASS + "." + IS_OPEN_CLASS);
+ for (var i = 0; i < dropdowns.length; i++) {
+ dropdowns[i].classList.remove(IS_OPEN_CLASS);
+ }
+ };
+ Dropdown.prototype._onCloseDropdown = function (evt) {
+ this._removeDropdownAsPanel(evt);
+ this._container.classList.remove(IS_OPEN_CLASS);
+ document.removeEventListener("click", this._onCloseDropdown);
+ };
+ Dropdown.prototype._onItemSelection = function (evt) {
+ var item = evt.target;
+ var isDropdownDisabled = this._container.classList.contains(IS_DISABLED_CLASS);
+ var isOptionDisabled = item.classList.contains(IS_DISABLED_CLASS);
+ if (!isDropdownDisabled && !isOptionDisabled) {
+ /** Deselect all items and select this one. */
+ /** Update the original dropdown. */
+ for (var i = 0; i < this._dropdownItems.length; ++i) {
+ if (this._dropdownItems[i].newItem === item) {
+ this._dropdownItems[i].newItem.classList.add(IS_SELECTED_CLASS);
+ this._dropdownItems[i].oldOption.selected = true;
+ }
+ else {
+ this._dropdownItems[i].newItem.classList.remove(IS_SELECTED_CLASS);
+ this._dropdownItems[i].oldOption.selected = false;
+ }
+ }
+ /** Update the replacement dropdown's title. */
+ this._newDropdownLabel.innerHTML = item.textContent;
+ this._checkTruncation();
+ /** Trigger any change event tied to the original dropdown. */
+ var changeEvent = document.createEvent("HTMLEvents");
+ changeEvent.initEvent("change", false, true);
+ this._originalDropdown.dispatchEvent(changeEvent);
+ }
+ };
+ return Dropdown;
+ }());
+ fabric.Dropdown = Dropdown;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+// "use strict";
+///
+///
+var fabric;
+(function (fabric) {
+ /**
+ *
+ * Adds basic demonstration functionality to .ms-PersonaCard components.
+ *
+ */
+ var PersonaCard = (function () {
+ /**
+ *
+ * @param {Element} container - the target container for an instance of PersonaCard
+ * @constructor
+ */
+ function PersonaCard(container) {
+ this._container = container;
+ var activeElement = this._container.querySelector(".ms-PersonaCard-action.is-active");
+ var activeId = activeElement.getAttribute("data-action-id");
+ this._actions = this._container.querySelector(".ms-PersonaCard-actions");
+ this._expander = this._container.querySelector(".ms-PersonaCard-detailExpander");
+ this._actionDetailBox = this._container.querySelector(".ms-PersonaCard-actionDetailBox");
+ this._setDetail(activeId);
+ this._boundOnActionClick = this._onActionClick.bind(this);
+ this._boundOnExpanderClick = this._onExpanderClick.bind(this);
+ this._boundOnTab = this._onTab.bind(this);
+ this._addListeners();
+ }
+ PersonaCard.prototype.removeListeners = function () {
+ this._actions.removeEventListener("click", this._boundOnActionClick);
+ this._expander.removeEventListener("click", this._boundOnExpanderClick);
+ this._container.removeEventListener("keydown", this._boundOnTab);
+ };
+ PersonaCard.prototype._addListeners = function () {
+ this._actions.addEventListener("click", this._boundOnActionClick, false);
+ this._expander.addEventListener("click", this._boundOnExpanderClick, false);
+ this._container.addEventListener("keydown", this._boundOnTab, false);
+ };
+ PersonaCard.prototype._onTab = function (event) {
+ var target = event.target;
+ if (event.keyCode === 9 && target.classList.contains("ms-PersonaCard-action")) {
+ this._onActionClick(event);
+ }
+ };
+ PersonaCard.prototype._onExpanderClick = function (event) {
+ var parent = event.target.parentElement;
+ if (parent.classList.contains("is-collapsed")) {
+ parent.classList.remove("is-collapsed");
+ }
+ else {
+ parent.classList.add("is-collapsed");
+ }
+ var parentHeight = parent.clientHeight;
+ this._animateDetail(parentHeight);
+ };
+ PersonaCard.prototype._onActionClick = function (event) {
+ var target = event.target;
+ var actionId = target.getAttribute("data-action-id");
+ if (actionId && target.className.indexOf("is-active") === -1) {
+ this._setAction(target);
+ this._setDetail(actionId);
+ }
+ };
+ PersonaCard.prototype._setAction = function (target) {
+ var activeElement = this._container.querySelector(".ms-PersonaCard-action.is-active");
+ activeElement.classList.remove("is-active");
+ target.classList.add("is-active");
+ };
+ PersonaCard.prototype._setDetail = function (activeId) {
+ var selector = ".ms-PersonaCard-details[data-detail-id='" + activeId + "']";
+ var lastDetail = this._container.querySelector(".ms-PersonaCard-details.is-active");
+ var activeDetail = this._container.querySelector(selector);
+ if (lastDetail) {
+ lastDetail.classList.remove("is-active");
+ }
+ activeDetail.classList.add("is-active");
+ var detailHeight = activeDetail.clientHeight;
+ this._animateDetail(detailHeight);
+ };
+ PersonaCard.prototype._animateDetail = function (height) {
+ var _this = this;
+ this._actionDetailBox.style.overflowY = "hidden";
+ fabric.Animate.transition(this._actionDetailBox, {
+ height: height,
+ duration: 0.25,
+ ease: fabric.Ease.SINE_EASE_OUT,
+ onEnd: function () {
+ _this._actionDetailBox.style.overflowY = "auto";
+ }
+ });
+ };
+ return PersonaCard;
+ }());
+ fabric.PersonaCard = PersonaCard;
+})(fabric || (fabric = {}));
+
+///
+///
+/**
+ * FacePile
+ *
+ * A host for FacePile
+ *
+ */
+var fabric;
+(function (fabric) {
+ // const CONTEXTUAL_HOST_CLASS = ".ms-ContextualHost";
+ var MODAL_POSITION = "top";
+ var Persona = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of FacePile
+ * @constructor
+ */
+ function Persona(container) {
+ this._persona = container;
+ // If Persona Card and Contextual host exist continue
+ // this._contextualHost = this._persona.querySelector(CONTEXTUAL_HOST_CLASS);
+ this._personaCard = this._persona.querySelector(".ms-PersonaCard");
+ if (this._personaCard) {
+ this._assignEvents();
+ this._personaCard.setAttribute("style", "display: none;");
+ this._createPersonaCard();
+ }
+ }
+ Persona.prototype._createPersonaCard = function () {
+ this._personaCardInstance = new fabric.PersonaCard(this._personaCard);
+ };
+ Persona.prototype._createContextualHostInstance = function () {
+ this._personaCard.setAttribute("style", "display: block;");
+ this._contextualHostInstance = new fabric.ContextualHost(this._personaCard, MODAL_POSITION, this._persona);
+ };
+ Persona.prototype._personaEventHandler = function () {
+ this._createContextualHostInstance();
+ };
+ Persona.prototype._assignEvents = function () {
+ var _this = this;
+ this._persona.addEventListener("click", this._personaEventHandler.bind(this), false);
+ this._persona.addEventListener("keyup", function (e) { return (e.keyCode === 32) ? _this._personaEventHandler() : null; }, false);
+ };
+ return Persona;
+ }());
+ fabric.Persona = Persona;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+var fabric;
+(function (fabric) {
+ /**
+ * FacePile
+ *
+ * A host for FacePile
+ *
+ */
+ var PERSONA_CLASS = ".ms-Persona--facePile";
+ var PERSONA_INITIALS = ".ms-Persona-initials";
+ var PERSONA_IMAGE = ".ms-Persona-image";
+ var PERSONA_PRIMARY_CLASS = ".ms-Persona-primaryText";
+ var PERSONA_SECONDARY_CLASS = ".ms-Persona-secondaryText";
+ var FacePile = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of FacePile
+ * @constructor
+ */
+ function FacePile(container) {
+ this._personaCollection = [];
+ this._facePile = container;
+ this._createPersonaCollection();
+ }
+ FacePile.prototype._createPersonaCollection = function () {
+ var _personas = document.querySelectorAll(PERSONA_CLASS);
+ for (var i = 0; i < _personas.length; i++) {
+ var _thisPersona = _personas[i];
+ this._personaCollection.push({
+ item: _thisPersona,
+ initials: _thisPersona.querySelector(PERSONA_INITIALS).textContent,
+ image: _thisPersona.querySelector(PERSONA_IMAGE) ?
+ _thisPersona.querySelector(PERSONA_IMAGE).getAttribute("src") : null,
+ primaryText: _thisPersona.querySelector(PERSONA_PRIMARY_CLASS) ?
+ _thisPersona.querySelector(PERSONA_PRIMARY_CLASS).textContent : "",
+ secondaryText: _thisPersona.querySelector(PERSONA_SECONDARY_CLASS) ?
+ _thisPersona.querySelector(PERSONA_SECONDARY_CLASS).textContent : "",
+ personaInstance: new fabric.Persona(_thisPersona)
+ });
+ }
+ };
+ return FacePile;
+ }());
+ fabric.FacePile = FacePile;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+"use strict";
+var fabric;
+(function (fabric) {
+ /**
+ * List Item Plugin
+ *
+ * Adds basic demonstration functionality to .ms-ListItem components.
+ *
+ */
+ var ListItem = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of ListItem
+ * @constructor
+ */
+ function ListItem(container) {
+ this._container = container;
+ this._toggleElement = this._container.querySelector(".ms-ListItem-selectionTarget");
+ this._addListeners();
+ }
+ ListItem.prototype.removeListeners = function () {
+ this._toggleElement.removeEventListener("click", this._toggleHandler.bind(this));
+ };
+ ListItem.prototype._addListeners = function () {
+ this._toggleElement.addEventListener("click", this._toggleHandler.bind(this), false);
+ };
+ ListItem.prototype._toggleHandler = function () {
+ this._container.classList.toggle("is-selected");
+ };
+ return ListItem;
+ }());
+ fabric.ListItem = ListItem;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+"use strict";
+var fabric;
+(function (fabric) {
+ /**
+ * List Item Plugin
+ *
+ * Adds basic demonstration functionality to .ms-List components.
+ *
+ */
+ var List = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of List
+ * @constructor
+ */
+ function List(container) {
+ this._container = container;
+ this._listItemComponents = [];
+ var choiceFieldElements = this._container.querySelectorAll(".ms-ListItem");
+ for (var i = 0; i < choiceFieldElements.length; i++) {
+ this._listItemComponents[i] = new fabric.ListItem(choiceFieldElements[i]);
+ }
+ }
+ return List;
+ }());
+ fabric.List = List;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * @namespace fabric
+ */
+var fabric;
+(function (fabric) {
+ "use strict";
+ /**
+ * MessageBanner component
+ *
+ * A component to display error messages
+ *
+ */
+ var MessageBanner = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of MessageBanner
+ * @constructor
+ */
+ function MessageBanner(container) {
+ this._textContainerMaxWidth = 700;
+ this._bufferElementsWidth = 88;
+ this._bufferElementsWidthSmall = 35;
+ this.SMALL_BREAK_POINT = 480;
+ this.container = container;
+ this.init();
+ }
+ /**
+ * initializes component
+ */
+ MessageBanner.prototype.init = function () {
+ this._cacheDOM();
+ this._setListeners();
+ this._clientWidth = this._errorBanner.offsetWidth;
+ this._initTextWidth = this._clipper.offsetWidth;
+ this._onResize();
+ };
+ /**
+ * shows banner if the banner is hidden
+ */
+ MessageBanner.prototype.showBanner = function () {
+ this._errorBanner.className = "ms-MessageBanner";
+ };
+ /**
+ * sets styles on resize
+ */
+ MessageBanner.prototype._onResize = function () {
+ this._clientWidth = this._errorBanner.offsetWidth;
+ if (window.innerWidth >= this.SMALL_BREAK_POINT) {
+ this._resizeRegular();
+ }
+ else {
+ this._resizeSmall();
+ }
+ };
+ /**
+ * resize above 480 pixel breakpoint
+ */
+ MessageBanner.prototype._resizeRegular = function () {
+ if ((this._clientWidth - this._bufferSize) > this._initTextWidth && this._initTextWidth < this._textContainerMaxWidth) {
+ this._textWidth = "auto";
+ this._chevronButton.className = "ms-MessageBanner-expand";
+ this._collapse();
+ }
+ else {
+ this._textWidth = Math.min((this._clientWidth - this._bufferSize), this._textContainerMaxWidth) + "px";
+ if (this._chevronButton.className.indexOf("is-visible") === -1) {
+ this._chevronButton.className += " is-visible";
+ }
+ }
+ this._clipper.style.width = this._textWidth;
+ };
+ /**
+ * resize below 480 pixel breakpoint
+ */
+ MessageBanner.prototype._resizeSmall = function () {
+ if (this._clientWidth - (this._bufferElementsWidthSmall + this._closeButton.offsetWidth) > this._initTextWidth) {
+ this._textWidth = "auto";
+ this._collapse();
+ }
+ else {
+ this._textWidth = (this._clientWidth - (this._bufferElementsWidthSmall + this._closeButton.offsetWidth)) + "px";
+ }
+ this._clipper.style.width = this._textWidth;
+ };
+ /**
+ * caches elements and values of the component
+ */
+ MessageBanner.prototype._cacheDOM = function () {
+ this._errorBanner = this.container;
+ this._clipper = this.container.querySelector(".ms-MessageBanner-clipper");
+ this._chevronButton = this.container.querySelector(".ms-MessageBanner-expand");
+ this._actionButton = this.container.querySelector(".ms-MessageBanner-action");
+ this._bufferSize = this._actionButton.offsetWidth + this._bufferElementsWidth;
+ this._closeButton = this.container.querySelector(".ms-MessageBanner-close");
+ };
+ /**
+ * expands component to show full error message
+ */
+ MessageBanner.prototype._expand = function () {
+ var icon = this._chevronButton.querySelector(".ms-Icon");
+ this._errorBanner.className += " is-expanded";
+ icon.className = "ms-Icon ms-Icon--DoubleChevronUp";
+ };
+ /**
+ * collapses component to only show truncated message
+ */
+ MessageBanner.prototype._collapse = function () {
+ var icon = this._chevronButton.querySelector(".ms-Icon");
+ this._errorBanner.className = "ms-MessageBanner";
+ icon.className = "ms-Icon ms-Icon--DoubleChevronDown";
+ };
+ MessageBanner.prototype._toggleExpansion = function () {
+ if (this._errorBanner.className.indexOf("is-expanded") > -1) {
+ this._collapse();
+ }
+ else {
+ this._expand();
+ }
+ };
+ MessageBanner.prototype._hideMessageBanner = function () {
+ this._errorBanner.className = "ms-MessageBanner is-hidden";
+ };
+ /**
+ * hides banner when close button is clicked
+ */
+ MessageBanner.prototype._hideBanner = function () {
+ if (this._errorBanner.className.indexOf("hide") === -1) {
+ this._errorBanner.className += " hide";
+ setTimeout(this._hideMessageBanner.bind(this), 500);
+ }
+ };
+ /**
+ * sets handlers for resize and button click events
+ */
+ MessageBanner.prototype._setListeners = function () {
+ window.addEventListener("resize", this._onResize.bind(this), false);
+ this._chevronButton.addEventListener("click", this._toggleExpansion.bind(this), false);
+ this._closeButton.addEventListener("click", this._hideBanner.bind(this), false);
+ };
+ return MessageBanner;
+ }());
+ fabric.MessageBanner = MessageBanner;
+})(fabric || (fabric = {})); // end fabric namespace
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+///
+///
+var fabric;
+(function (fabric) {
+ /**
+ * People Picker
+ *
+ * People picker control
+ *
+ */
+ var MODAL_POSITION = "bottom";
+ var TOKEN_CLASS = "ms-Persona--token";
+ var PeoplePicker = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of People Picker
+ * @constructor
+ */
+ function PeoplePicker(container) {
+ this._container = container;
+ this._peoplePickerMenu = this._container.querySelector(".ms-PeoplePicker-results");
+ this._peoplePickerSearch = this._container.querySelector(".ms-TextField-field");
+ this._peoplePickerSearchBox = this._container.querySelector(".ms-PeoplePicker-searchBox");
+ this._selectedPeople = this._container.querySelector(".ms-PeoplePicker-selectedPeople");
+ this._assignClicks();
+ if (this._selectedPeople) {
+ this._assignRemoveHandler();
+ this._selectedCount = this._container.querySelector(".ms-PeoplePicker-selectedCount");
+ this._selectedPlural = this._container.querySelector(".ms-PeoplePicker-selectedCountPlural");
+ }
+ if (this._peoplePickerMenu) {
+ this._peoplePickerMenu.setAttribute("style", "display: none;");
+ }
+ }
+ PeoplePicker.prototype._createModalHost = function (e) {
+ e.stopPropagation();
+ this._peoplePickerMenu.setAttribute("style", "display: block;");
+ this._contextualHostView = new fabric.ContextualHost(this._peoplePickerMenu, MODAL_POSITION, this._peoplePickerSearchBox, false, [""], true, this._contextHostCallBack.bind(this));
+ this._peoplePickerSearchBox.classList.add("is-active");
+ this._isContextualMenuOpen = true;
+ };
+ PeoplePicker.prototype._clickHandler = function (e) {
+ this._createModalHost(e);
+ // Select all results and remove event listeners by cloning
+ var peoplePickerResults = this._peoplePickerMenu.querySelector(".ms-PeoplePicker-result");
+ var resultsParent = peoplePickerResults.parentNode;
+ var resultsClone = resultsParent.cloneNode(true);
+ resultsParent.parentNode.replaceChild(resultsClone, resultsParent);
+ // Get all results
+ this._peoplePickerResults = this._peoplePickerMenu.querySelectorAll(".ms-PeoplePicker-result");
+ // Add _selectResult listeners to each result
+ for (var i = 0; i < this._peoplePickerResults.length; i++) {
+ var personaResult = this._peoplePickerResults[i].querySelector(".ms-Persona");
+ var removeButton = this._peoplePickerResults[i].querySelector(".ms-PeoplePicker-resultAction");
+ personaResult.addEventListener("click", this._selectResult.bind(this), true);
+ removeButton.addEventListener("click", this._removeItem.bind(this), true);
+ }
+ };
+ PeoplePicker.prototype._selectResult = function (e) {
+ e.stopPropagation();
+ var currentResult = this._findElement(e.target, "ms-Persona");
+ var clonedResult = currentResult.cloneNode(true);
+ // if facePile - add to members list / else tokenize
+ if (this._container.classList.contains("ms-PeoplePicker--facePile")) {
+ this._addResultToMembers(clonedResult);
+ }
+ else {
+ this._tokenizeResult(clonedResult);
+ }
+ this._updateCount();
+ // Close the open contextual host
+ this._contextualHostView.disposeModal();
+ };
+ PeoplePicker.prototype._findElement = function (childObj, className) {
+ var currentElement = childObj.parentNode;
+ while (!currentElement.classList.contains(className)) {
+ currentElement = currentElement.parentNode;
+ }
+ return currentElement;
+ };
+ PeoplePicker.prototype._addRemoveBtn = function (persona, token) {
+ var actionBtn;
+ var actionIcon = document.createElement("i");
+ if (token) {
+ actionBtn = document.createElement("div");
+ actionBtn.classList.add("ms-Persona-actionIcon");
+ actionBtn.addEventListener("click", this._removeToken.bind(this), true);
+ }
+ else {
+ actionBtn = document.createElement("button");
+ actionBtn.classList.add("ms-PeoplePicker-resultAction");
+ actionBtn.addEventListener("click", this._removeResult.bind(this), true);
+ }
+ actionIcon.classList.add("ms-Icon", "ms-Icon--Cancel");
+ actionBtn.appendChild(actionIcon);
+ persona.appendChild(actionBtn);
+ };
+ PeoplePicker.prototype._removeToken = function (e) {
+ var currentToken = this._findElement(e.target, "ms-Persona");
+ currentToken.remove();
+ };
+ PeoplePicker.prototype._removeResult = function (e) {
+ var currentResult = this._findElement(e.target, "ms-PeoplePicker-selectedPerson");
+ currentResult.remove();
+ this._updateCount();
+ };
+ PeoplePicker.prototype._removeItem = function (e) {
+ var currentItem = this._findElement(e.target, "ms-PeoplePicker-result");
+ currentItem.remove();
+ };
+ PeoplePicker.prototype._updateCount = function () {
+ if (this._selectedPeople) {
+ var count = this._selectedPeople.querySelectorAll(".ms-PeoplePicker-selectedPerson").length;
+ this._selectedCount.textContent = count.toString();
+ this._selectedPlural.style.display = (count === 1) ? "none" : "inline";
+ }
+ };
+ PeoplePicker.prototype._tokenizeResult = function (tokenResult) {
+ var searchBox = this._container.querySelector(".ms-PeoplePicker-searchBox");
+ var textField = searchBox.querySelector(".ms-TextField");
+ // Add token classes to persona
+ tokenResult.classList.add(TOKEN_CLASS, "ms-PeoplePicker-persona");
+ // Add the remove button to the token
+ this._addRemoveBtn(tokenResult, true);
+ // Use persona xs variant for token
+ if (tokenResult.classList.contains("ms-Persona--sm")) {
+ tokenResult.classList.remove("ms-Persona--sm");
+ tokenResult.classList.add("ms-Persona--xs");
+ }
+ // Prepend the token before the search field
+ searchBox.insertBefore(tokenResult, textField);
+ };
+ PeoplePicker.prototype._addResultToMembers = function (persona) {
+ var membersList = this._container.querySelector(".ms-PeoplePicker-selectedPeople");
+ var firstMember = membersList.querySelector(".ms-PeoplePicker-selectedPerson");
+ var selectedItem = document.createElement("li");
+ // Create the selectedPerson list item
+ selectedItem.classList.add("ms-PeoplePicker-selectedPerson");
+ selectedItem.tabIndex = 1;
+ // Append the result persona to list item
+ selectedItem.appendChild(persona);
+ // Add the remove button to the persona
+ this._addRemoveBtn(selectedItem, false);
+ // Add removeResult event to resultAction
+ selectedItem.querySelector(".ms-PeoplePicker-resultAction").addEventListener("click", this._removeResult.bind(this), true);
+ membersList.insertBefore(selectedItem, firstMember);
+ };
+ PeoplePicker.prototype._assignClicks = function () {
+ var _this = this;
+ this._peoplePickerSearch.addEventListener("click", this._clickHandler.bind(this), true);
+ this._peoplePickerSearch.addEventListener("keyup", function (e) {
+ if (e.keyCode !== 27 && !_this._isContextualMenuOpen) {
+ _this._clickHandler(e);
+ }
+ }, true);
+ };
+ PeoplePicker.prototype._assignRemoveHandler = function () {
+ var selectedPeople = this._selectedPeople.querySelectorAll(".ms-PeoplePicker-selectedPerson");
+ for (var i = 0; i < selectedPeople.length; i++) {
+ selectedPeople[i].querySelector(".ms-PeoplePicker-resultAction").addEventListener("click", this._removeResult.bind(this), true);
+ }
+ };
+ PeoplePicker.prototype._contextHostCallBack = function () {
+ this._peoplePickerSearchBox.classList.remove("is-active");
+ this._isContextualMenuOpen = false;
+ };
+ return PeoplePicker;
+ }());
+ fabric.PeoplePicker = PeoplePicker;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+"use strict";
+var fabric;
+(function (fabric) {
+ /**
+ * Pivot Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Pivot components.
+ *
+ */
+ var Pivot = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of Pivot
+ * @constructor
+ */
+ function Pivot(container) {
+ this._container = container;
+ this._addListeners();
+ // Show the first pivot's content
+ var firstContent = this._container.querySelector(".ms-Pivot-content");
+ firstContent.style.display = "block";
+ }
+ Pivot.prototype.removeListeners = function () {
+ this._container.removeEventListener("click", this._selectTab.bind(this));
+ };
+ Pivot.prototype._addListeners = function () {
+ var _this = this;
+ this._container.querySelector(".ms-Pivot-links").addEventListener("click", this._selectTabMouse.bind(this), false);
+ this._container.addEventListener("keyup", function (event) {
+ if (event.keyCode === 13) {
+ _this._selectTabKeyboard(event);
+ }
+ }, true);
+ };
+ Pivot.prototype._selectTab = function (selectedTab) {
+ // Only if its a pivot link and if it doesn't have ellipsis
+ if (selectedTab.classList.contains("ms-Pivot-link") && !selectedTab.querySelector(".ms-Pivot-ellipsis")) {
+ // Iterate over siblings and un-select them
+ var sibling = selectedTab.parentElement.firstElementChild;
+ while (sibling) {
+ sibling.classList.remove("is-selected");
+ sibling = sibling.nextElementSibling;
+ }
+ // Select the clicked tab
+ selectedTab.classList.add("is-selected");
+ // Hide all of the content
+ var containers = this._container.querySelectorAll(".ms-Pivot-content");
+ Array.prototype.forEach.call(containers, function (el, i) {
+ el.style.display = "none";
+ });
+ // Show the content that corresponds to the selected tab
+ var selectedContentName = selectedTab.getAttribute("data-content");
+ var selectedContent = this._container.querySelector(".ms-Pivot-content[data-content='" + selectedContentName + "']");
+ selectedContent.style.display = "block";
+ }
+ };
+ Pivot.prototype._selectTabMouse = function (event) {
+ event.preventDefault();
+ var selectedTab = event.target;
+ this._selectTab(selectedTab);
+ };
+ Pivot.prototype._selectTabKeyboard = function (event) {
+ event.preventDefault();
+ var selectedTab = event.target;
+ this._selectTab(selectedTab);
+ };
+ return Pivot;
+ }());
+ fabric.Pivot = Pivot;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * @namespace fabric
+ */
+var fabric;
+(function (fabric) {
+ "use strict";
+ /**
+ * ProgressIndicator component
+ *
+ * A component for outputting determinate progress
+ *
+ */
+ var ProgressIndicator = (function () {
+ /**
+ *
+ * @param {HTMLDivElement} container - the target container for an instance of ProgressIndicator
+ * @constructor
+ */
+ function ProgressIndicator(container) {
+ this.container = container;
+ this.cacheDOM();
+ }
+ /**
+ * Sets the progress percentage for a determinate
+ * operation. Either use this or setProgress
+ * and setTotal as setProgressPercent assumes
+ * you've done a percentage calculation before
+ * injecting it into the function
+ * @param {number} percent - a floating point number from 0 to 1
+ */
+ ProgressIndicator.prototype.setProgressPercent = function (percent) {
+ this._progressBar.style.width = Math.round(this._width * percent) + "px";
+ };
+ /**
+ * Sets the progress for a determinate operation.
+ * Use this in combination with setTotal.
+ * @param {number} progress
+ */
+ ProgressIndicator.prototype.setProgress = function (progress) {
+ this._progress = progress;
+ var percentage = this._progress / this._total;
+ this.setProgressPercent(percentage);
+ };
+ /**
+ * Sets the total file size, etc. for a
+ * determinate operation. Use this in
+ * combination with setProgress
+ * @param {number} total
+ */
+ ProgressIndicator.prototype.setTotal = function (total) {
+ this._total = total;
+ };
+ /**
+ * Sets the text for the title or label
+ * of an instance
+ * @param {string} name
+ */
+ ProgressIndicator.prototype.setName = function (name) {
+ this._itemName.innerHTML = name;
+ };
+ /**
+ * Sets the text for a description
+ * of an instance
+ * @param {string} name
+ */
+ ProgressIndicator.prototype.setDescription = function (description) {
+ this._itemDescription.innerHTML = description;
+ };
+ /**
+ * caches elements and values of the component
+ *
+ */
+ ProgressIndicator.prototype.cacheDOM = function () {
+ // an itemName element is optional
+ this._itemName = this.container.querySelector(".ms-ProgressIndicator-itemName") || null;
+ // an itemDescription element is optional
+ this._itemDescription = this.container.querySelector(".ms-ProgressIndicator-itemDescription") || null;
+ this._progressBar = this.container.querySelector(".ms-ProgressIndicator-progressBar");
+ var itemProgress = this.container.querySelector(".ms-ProgressIndicator-itemProgress");
+ this._width = itemProgress.offsetWidth;
+ };
+ return ProgressIndicator;
+ }());
+ fabric.ProgressIndicator = ProgressIndicator;
+})(fabric || (fabric = {})); // end fabric namespace
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * @namespace fabric
+ */
+var fabric;
+(function (fabric) {
+ var CircleObject = (function () {
+ function CircleObject(element, j) {
+ this.element = element;
+ this.j = j;
+ }
+ return CircleObject;
+ }());
+ /**
+ * Spinner Component
+ *
+ * An animating activity indicator.
+ *
+ */
+ var Spinner = (function () {
+ /**
+ * @param {HTMLDOMElement} target - The element the Spinner will attach itself to.
+ */
+ function Spinner(container) {
+ this.eightSize = 0.2;
+ this.animationSpeed = 90;
+ this.parentSize = 20;
+ this.fadeIncrement = 0;
+ this.circleObjects = [];
+ this._target = container;
+ this._init();
+ }
+ /**
+ * @function start - starts or restarts the animation sequence
+ * @memberOf fabric.Spinner
+ */
+ Spinner.prototype.start = function () {
+ var _this = this;
+ this.stop();
+ this.interval = setInterval(function () {
+ var i = _this.circleObjects.length;
+ while (i--) {
+ _this._fade(_this.circleObjects[i]);
+ }
+ }, this.animationSpeed);
+ };
+ /**
+ * @function stop - stops the animation sequence
+ * @memberOf fabric.Spinner
+ */
+ Spinner.prototype.stop = function () {
+ clearInterval(this.interval);
+ };
+ // private methods
+ Spinner.prototype._init = function () {
+ this._setTargetElement();
+ this._setPropertiesForSize();
+ this._createCirclesAndArrange();
+ this._initializeOpacities();
+ this.start();
+ };
+ Spinner.prototype._setPropertiesForSize = function () {
+ if (this.spinner.className.indexOf("large") > -1) {
+ this.parentSize = 28;
+ this.eightSize = 0.179;
+ }
+ this.offsetSize = this.eightSize;
+ this.numCircles = 8;
+ };
+ Spinner.prototype._setTargetElement = function () {
+ // for backwards compatibility
+ if (this._target.className.indexOf("ms-Spinner") === -1) {
+ this.spinner = document.createElement("div");
+ this.spinner.className = "ms-Spinner";
+ this._target.appendChild(this.spinner);
+ }
+ else {
+ this.spinner = this._target;
+ }
+ };
+ Spinner.prototype._initializeOpacities = function () {
+ var i = 0;
+ var j = 1;
+ var opacity;
+ this.fadeIncrement = 1 / this.numCircles;
+ for (i; i < this.numCircles; i++) {
+ var circleObject = this.circleObjects[i];
+ opacity = (this.fadeIncrement * j++);
+ this._setOpacity(circleObject.element, opacity);
+ }
+ };
+ Spinner.prototype._fade = function (circleObject) {
+ var opacity = this._getOpacity(circleObject.element) - this.fadeIncrement;
+ if (opacity <= 0) {
+ opacity = 1;
+ }
+ this._setOpacity(circleObject.element, opacity);
+ };
+ Spinner.prototype._getOpacity = function (element) {
+ return parseFloat(window.getComputedStyle(element).getPropertyValue("opacity"));
+ };
+ Spinner.prototype._setOpacity = function (element, opacity) {
+ element.style.opacity = opacity.toString();
+ };
+ Spinner.prototype._createCircle = function () {
+ var circle = document.createElement("div");
+ circle.className = "ms-Spinner-circle";
+ circle.style.width = circle.style.height = this.parentSize * this.offsetSize + "px";
+ return circle;
+ };
+ Spinner.prototype._createCirclesAndArrange = function () {
+ var angle = 0;
+ var offset = this.parentSize * this.offsetSize;
+ var step = (2 * Math.PI) / this.numCircles;
+ var i = this.numCircles;
+ var circleObject;
+ var radius = (this.parentSize - offset) * 0.5;
+ while (i--) {
+ var circle = this._createCircle();
+ var x = Math.round(this.parentSize * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5;
+ var y = Math.round(this.parentSize * 0.5 + radius * Math.sin(angle) - circle.clientHeight * 0.5) - offset * 0.5;
+ this.spinner.appendChild(circle);
+ circle.style.left = x + "px";
+ circle.style.top = y + "px";
+ angle += step;
+ circleObject = new CircleObject(circle, i);
+ this.circleObjects.push(circleObject);
+ }
+ };
+ return Spinner;
+ }());
+ fabric.Spinner = Spinner;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * @namespace fabric
+ */
+var fabric;
+(function (fabric) {
+ "use strict";
+ var Table = (function () {
+ function Table(container) {
+ this.container = container;
+ // Is the table selectable?
+ if (this.container.className.indexOf("ms-Table--selectable") !== -1) {
+ this._addListeners();
+ }
+ }
+ /**
+ * Add event listeners
+ */
+ Table.prototype._addListeners = function () {
+ this.container.addEventListener("click", this._toggleRowSelection.bind(this), false);
+ };
+ /**
+ * Select or deselect a row
+ */
+ Table.prototype._toggleRowSelection = function (event) {
+ var selectedRow = event.target.parentElement;
+ var selectedStateClass = "is-selected";
+ // Toggle the selected state class
+ if (selectedRow.className === selectedStateClass) {
+ selectedRow.className = "";
+ }
+ else {
+ selectedRow.className = selectedStateClass;
+ }
+ };
+ return Table;
+ }());
+ fabric.Table = Table;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+"use strict";
+var fabric;
+(function (fabric) {
+ var TextFieldConsts;
+ (function (TextFieldConsts) {
+ (function (Type) {
+ Type[Type["Placeholder"] = 0] = "Placeholder";
+ Type[Type["Underlined"] = 1] = "Underlined";
+ })(TextFieldConsts.Type || (TextFieldConsts.Type = {}));
+ var Type = TextFieldConsts.Type;
+ })(TextFieldConsts || (TextFieldConsts = {}));
+ /**
+ * Text Field Plugin
+ *
+ * Adds basic demonstration functionality to .ms-TextField components.
+ */
+ var TextField = (function () {
+ /**
+ *
+ * @param {HTMLDivElement} container - the target container for an instance of TextField
+ * @constructor
+ */
+ function TextField(container) {
+ this._container = container;
+ this._type = [];
+ this._textField = this._container.querySelector(".ms-TextField-field");
+ this._textFieldLabel = this._container.querySelector(".ms-Label");
+ this._setTextFieldType();
+ this._addListeners();
+ }
+ /** Populate _type with various kinds of text fields */
+ TextField.prototype._setTextFieldType = function () {
+ if (this._container.classList.contains("ms-TextField--placeholder")) {
+ this._type.push(TextFieldConsts.Type.Placeholder);
+ }
+ if (this._container.classList.contains("ms-TextField--underlined")) {
+ this._type.push(TextFieldConsts.Type.Underlined);
+ }
+ };
+ /** Add event listeners according to the type(s) of text field */
+ TextField.prototype._addListeners = function () {
+ var _this = this;
+ // Ensure that the text box gets focus when the label is clicked.
+ this._textFieldLabel.addEventListener("click", function (event) {
+ _this._textField.focus();
+ });
+ /** Placeholder - hide/unhide the placeholder */
+ if (this._type.indexOf(TextFieldConsts.Type.Placeholder) >= 0) {
+ this._textField.addEventListener("focus", function (event) {
+ _this._textFieldLabel.style.display = "none";
+ });
+ this._textField.addEventListener("blur", function (event) {
+ // Show only if no value in the text field
+ if (_this._textField.value.length === 0) {
+ _this._textFieldLabel.style.display = "block";
+ }
+ });
+ }
+ /** Underlined - adding/removing a focus class */
+ if (this._type.indexOf(TextFieldConsts.Type.Underlined) >= 0) {
+ this._textField.addEventListener("focus", function (event) {
+ _this._container.classList.add("is-active");
+ });
+ this._textField.addEventListener("blur", function (event) {
+ _this._container.classList.remove("is-active");
+ });
+ }
+ };
+ return TextField;
+ }());
+ fabric.TextField = TextField;
+})(fabric || (fabric = {}));
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+"use strict";
+var fabric;
+(function (fabric) {
+ /**
+ * Toggle Plugin
+ *
+ * Adds basic demonstration functionality to .ms-Toggle components.
+ *
+ */
+ var Toggle = (function () {
+ /**
+ *
+ * @param {HTMLElement} container - the target container for an instance of Toggle
+ * @constructor
+ */
+ function Toggle(container) {
+ this._container = container;
+ this._toggleField = this._container.querySelector(".ms-Toggle-field");
+ this._addListeners();
+ }
+ Toggle.prototype.removeListeners = function () {
+ this._toggleField.removeEventListener("click", this._toggleHandler.bind(this));
+ };
+ Toggle.prototype._addListeners = function () {
+ var _this = this;
+ this._toggleField.addEventListener("click", this._toggleHandler.bind(this), false);
+ this._toggleField.addEventListener("keyup", function (e) { return (e.keyCode === 32) ? _this._toggleHandler() : null; }, false);
+ };
+ Toggle.prototype._toggleHandler = function () {
+ this._toggleField.classList.toggle("is-selected");
+ };
+ return Toggle;
+ }());
+ fabric.Toggle = Toggle;
+})(fabric || (fabric = {}));
diff --git a/dist/js/fabric.min.js b/dist/js/fabric.min.js
new file mode 100644
index 00000000..961080df
--- /dev/null
+++ b/dist/js/fabric.min.js
@@ -0,0 +1,8 @@
+//Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+/**
+ * Office UI Fabric JS 1.3.0
+ * The JavaScript front-end framework for building experiences for Office 365.
+ **/
+var fabric;!function(e){var t=33,i=function(){function e(){}return e.transition=function(t,i){var n={element:t,props:i,transformations:{}};e._animationObjects.push(n),e._parseProperties(n),e._createTransition(n),setTimeout(e._setProperties,0,n),e._setCallback(n)},e.animation=function(t,i,n){var s={element:t,keyframes:i,props:n};e._animationObjects.push(s),e._parseProperties(s),e._createAnimation(s),e._setCallback(s)},e.scrollTo=function(t,i){var n={element:t,props:i,step:0};e._setScrollProperties(n),n.props.delay?setTimeout(e._animationObjects,1e3*n.props.delay,n):e._animateScroll(n),e._animationObjects.push(n)},e._setScrollProperties=function(e){e.beginTop=e.element.scrollTop,e.change=e.props.top-e.beginTop,e.props.duration=1e3*e.props.duration},e._parseProperties=function(t){var i=e._timeProps.concat(e._callbackProps);t.tweenObj={};for(var n in t.props)e._contains(i,n)?t[n]=t.props[n]:t.tweenObj[n]=t.props[n]},e._animateScroll=function(i){var n=i.props.duration/t,s=e._easeOutExpo(i.step++,i.beginTop,i.change,n);i.element.scrollTop=s,i.step>=n?(i.element.scrollTop=i.props.top,e._executeCallback(i.props),e._removeAnimationObject(i)):setTimeout(function(){requestAnimationFrame(function(){e._animateScroll(i)})},t)},e._createTransition=function(t){var i=t.duration||0,n=t.delay||0;t.element.style.transitionProperty=e._getTransitionProperties(t.tweenObj),t.element.style.transitionDuration=i.toString()+"s",t.element.style.transitionTimingFunction=t.ease||"linear",t.element.style.transitionDelay=n.toString()+"s"},e._createAnimation=function(e){var t=e.duration||0,i=e.delay||0;e.element.style.animationName=e.keyframes,e.element.style.animationDuration=t.toString()+"s",e.element.style.animationTimingFunction=e.ease||"linear",e.element.style.animationDelay=i.toString()+"s",e.element.style.animationFillMode="both"},e._getTransitionProperties=function(t){var i=!1,n=!1,s=[];for(var o in t)e._contains(e._transformProps,o)?i=!0:e._contains(e._filters,o)?n=!0:s.push(e._camelCaseToDash(o));return i&&s.push("transform"),n&&(s.push("-webkit-filter"),s.push("filter")),s.join(", ")},e._setProperties=function(t){for(var i in t.tweenObj)e._contains(e._transformProps,i)?e._setTransformValues(t,i):e._contains(e._filters,i)?e._setFilterValues(t,i):e._setRegularValues(t,i);t.transformations&&e._setTransformations(t)},e._setRegularValues=function(e,t){var i=e.tweenObj[t];i.toString().indexOf("%")===-1&&(i+="opacity"!==t&&"backgroundColor"!==t&&"boxShadow"!==t?"px":""),e.element.style[t]=i},e._setFilterValues=function(t,i){var n=t.tweenObj[i];n="hueRotate"===i?"("+n+"deg)":"blur"===i?"("+n+"px)":"("+n+"%)",i=e._camelCaseToDash(i),t.element.style.webkitFilter=i+n,t.element.style.filter=i+n},e._setTransformValues=function(e,t){/x|y|z|scaleX|scaleY|scaleZ|rotate|rotateX|rotateY|rotateZ|skewX|skewY/.test(t)&&(e.transformations[t]=e.tweenObj[t])},e._setTransformations=function(e){var t="",i="",n="",s="",o=e.transformations;s+=void 0!==o.x&&o.x?"translateX("+o.x+"px) ":"",s+=void 0!==o.y&&o.y?"translateY("+o.y+"px) ":"",s+=void 0!==o.z&&o.z?"translateZ("+o.z+"px) ":"",t+=void 0!==o.rotate&&o.rotate?"rotate("+o.rotate+"deg) ":"",t+=void 0!==o.rotateX&&o.rotateX?"rotateX("+o.rotateX+"deg) ":"",t+=void 0!==o.rotateY&&o.rotateY?"rotate("+o.rotateY+"deg) ":"",t+=void 0!==o.rotateZ&&o.rotateZ?"rotate("+o.rotateZ+"deg) ":"",i+=void 0!==o.scaleX&&o.scaleX?"scaleX("+o.scaleX+") ":"",i+=void 0!==o.scaleY&&o.scaleY?"scaleY("+o.scaleY+") ":"",i+=void 0!==o.scaleZ&&o.scaleZ?"scaleZ("+o.scaleZ+") ":"",n+=void 0!==o.skewX&&o.skewX?"skewX("+o.skewX+"deg) ":"",n+=void 0!==o.skewY&&o.skewY?"skewY("+o.skewY+"deg) ":"",e.element.style.transform=s+t+i+n},e._setCallback=function(t){t.element.addEventListener("webkitTransitionEnd",e._complete,!1),t.element.addEventListener("transitionend",e._complete,!1),t.element.addEventListener("webkitAnimationEnd",e._complete,!1),t.element.addEventListener("animationend",e._complete,!1)},e._complete=function(t){t.target.removeEventListener("webkitTransitionEnd",e._complete),t.target.removeEventListener("transitionend",e._complete),t.target.removeEventListener("webkitAnimationEnd",e._complete),t.target.removeEventListener("animationend",e._complete);var i=e._getAnimationObjByElement(t.target);e._executeCallback(i),e._removeAnimationObject(i)},e._getAnimationObjByElement=function(t){for(var i=e._animationObjects.length;i--;)if(e._animationObjects[i].element===t)return e._animationObjects[i];return null},e._removeAnimationObject=function(t){for(var i=e._animationObjects.length;i--;)e._animationObjects[i]===t&&e._animationObjects.splice(i,1)},e._executeCallback=function(e){if(e.onEnd){var t=e.onEndArgs||[];e.onEnd.apply(null,t)}},e._contains=function(e,t){for(var i=e.length;i--;)if(t===e[i])return!0;return!1},e._camelCaseToDash=function(e){return e.replace(/\W+/g,"-").replace(/([a-z\d])([A-Z])/g,"$1-$2").toLowerCase()},e._easeOutExpo=function(e,t,i,n){return e===n?t+i:i*(-Math.pow(2,-10*e/n)+1)+t},e._transformProps=["x","y","z","scaleX","scaleY","scaleZ","rotate","rotateX","rotateY","rotateZ","skewX","skewY"],e._filters=["blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia"],e._timeProps=["duration","ease","delay"],e._callbackProps=["onEnd","onEndArgs"],e._animationObjects=[],e}();e.Animate=i}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(){}return e.QUAD_EASE_IN=e.CB+"(0.550, 0.085, 0.680, 0.530)",e.CUBIC_EASE_IN=e.CB+"(0.550, 0.055, 0.675, 0.190)",e.QUART_EASE_IN=e.CB+"(0.895, 0.030, 0.685, 0.220)",e.QUINT_EASE_IN=e.CB+"(0.755, 0.050, 0.855, 0.060)",e.SINE_EASE_IN=e.CB+"(0.470, 0, 0.745, 0.715)",e.EXPO_EASE_IN=e.CB+"(0.950, 0.050, 0.795, 0.035)",e.CIRC_EASE_IN=e.CB+"(0.600, 0.040, 0.980, 0.335)",e.BACK_EASE_IN=e.CB+"(0.600, 0.040, 0.980, 0.335)",e.QUAD_EASE_OUT=e.CB+"(0.250, 0.460, 0.450, 0.940)",e.CUBIC_EASE_OUT=e.CB+"(0.215, 0.610, 0.355, 1)",e.QUART_EASE_OUT=e.CB+"(0.165, 0.840, 0.440, 1)",e.QUINT_EASE_OUT=e.CB+"(0.230, 1, 0.320, 1)",e.SINE_EASE_OUT=e.CB+"(0.390, 0.575, 0.565, 1)",e.EXPO_EASE_OUT=e.CB+"(0.190, 1, 0.220, 1)",e.CIRC_EASE_OUT=e.CB+"(0.075, 0.820, 0.165, 1)",e.BACK_EASE_OUT=e.CB+"(0.175, 0.885, 0.320, 1.275)",e.QUAD_EASE_IN_OUT=e.CB+"(0.455, 0.030, 0.515, 0.955)",e.CUBIC_EASE_IN_OUT=e.CB+"(0.645, 0.045, 0.355, 1)",e.QUART_EASE_IN_OUT=e.CB+"(0.770, 0, 0.175, 1)",e.QUINT_EASE_IN_OUT=e.CB+"(0.860, 0, 0.070, 1)",e.SINE_EASE_IN_OUT=e.CB+"(0.445, 0.050, 0.550, 0.950)",e.EXPO_EASE_IN_OUT=e.CB+"(1, 0, 0, 1)",e.CIRC_EASE_IN_OUT=e.CB+"(0.785, 0.135, 0.150, 0.860)",e.BACK_EASE_IN_OUT=e.CB+"(0.680, -0.550, 0.265, 1.550)",e.CB="cubic-bezier",e}();e.Ease=t}(fabric||(fabric={})),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),i}e.prototype=Event.prototype,window.CustomEvent=e}();var fabric;!function(e){"use strict";var t=function(){function e(e){this._currentMaxItems=0,this._itemCollection=[],this._tabIndex=2,this.container=e,this._onResize=this._onResize.bind(this),this._openOverflow=this._openOverflow.bind(this),this._overflowKeyPress=this._overflowKeyPress.bind(this),this._closeOverflow=this._closeOverflow.bind(this),this.removeOutlinesOnClick=this.removeOutlinesOnClick.bind(this),this.init()}return e.prototype.removeOutlinesOnClick=function(){this._breadcrumbList.blur()},e.prototype.addItem=function(e,t){this._itemCollection.push({text:e,link:t}),this._updateBreadcrumbs()},e.prototype.removeItemByLabel=function(e){for(var t=this._itemCollection.length;t--;)this._itemCollection[t].text===e&&this._itemCollection.splice(t,1);this._updateBreadcrumbs()},e.prototype.removeItemByPosition=function(e){this._itemCollection.splice(e,1),this._updateBreadcrumbs()},e.prototype.init=function(){this._cacheDOM(),this._setListeners(),this._createItemCollection(),this._onResize()},e.prototype._createItemCollection=function(){var e,t,i,n,s=this._listItems.length,o=0;for(o;oe.MEDIUM?4:2;t!==this._currentMaxItems&&this._updateBreadcrumbs(),this._currentMaxItems=t},e.prototype._updateBreadcrumbs=function(){this._tabIndex=2;var t=window.innerWidth>e.MEDIUM?4:2;this._itemCollection.length>t?this._breadcrumb.classList.add("is-overflow"):this._breadcrumb.classList.remove("is-overflow"),this._addItemsToOverflow(t),this._addBreadcrumbItems(t)},e.prototype._addItemsToOverflow=function(e){var t=this;this._resetList(this._contextMenu);var i=this._itemCollection.length-e,n=this._itemCollection.slice(0,i);n.forEach(function(e){var i=document.createElement("li");i.className="ms-ContextualMenu-item";var n=document.createElement("a");n.className="ms-ContextualMenu-link",null!==e.link&&n.setAttribute("href",e.link),n.setAttribute("tabindex",(t._tabIndex++).toString()),n.textContent=e.text,i.appendChild(n),t._contextMenu.appendChild(i)})},e.prototype._addBreadcrumbItems=function(e){this._resetList(this._breadcrumbList);var t=this._itemCollection.length-e;if(t=t<0?0:t,t>=0)for(t;t0){window.removeEventListener("resize",this._resizeAction,!1),document.removeEventListener("click",this._dismissAction,!0),document.removeEventListener("keyup",this._handleKeyUpDismiss,!0),this._container.parentNode.removeChild(this._container),this._disposalCallback&&this._disposalCallback();var t=e.hosts.indexOf(this);e.hosts.splice(t,1);for(var i=e.hosts.length;i--;)e.hosts[i].disposeModal(),e.hosts.splice(i,1)}},e.prototype.setChildren=function(e){this._children||(this._children=[]),this._children.push(e)},e.prototype.contains=function(e){return this._container.contains(e)},e.prototype.createContainer=function(){var e=document.createElement("div");e.setAttribute("class","ms-ContextualHost"),e.innerHTML+=" ";var t=document.createElement("div");t.setAttribute("class",n),t.innerHTML+=" ",e.appendChild(t),e.innerHTML+=" ";var i=document.createElement("div");return i.setAttribute("class",s),e.appendChild(i),e.innerHTML+="",e},e.prototype._openModal=function(){var e=this;this._copyModalToBody(),this._saveModalSize(),this._findAvailablePosition(),this._showModal(),setTimeout(function(){e._setDismissClick()},100)},e.prototype._findAvailablePosition=function(){var e;switch(this._direction){case"left":e=this._positionOk(this._tryPosModalLeft.bind(this),this._tryPosModalRight.bind(this),this._tryPosModalBottom.bind(this),this._tryPosModalTop.bind(this)),this._setPosition(e);break;case"right":e=this._positionOk(this._tryPosModalRight.bind(this),this._tryPosModalLeft.bind(this),this._tryPosModalBottom.bind(this),this._tryPosModalTop.bind(this)),this._setPosition(e);break;case"top":e=this._positionOk(this._tryPosModalTop.bind(this),this._tryPosModalBottom.bind(this)),this._setPosition(e);break;case"bottom":e=this._positionOk(this._tryPosModalBottom.bind(this),this._tryPosModalTop.bind(this)),this._setPosition(e);break;default:this._setPosition()}},e.prototype._showModal=function(){this._container.classList.add(t)},e.prototype._positionOk=function(e,t,i,n){var s;return s=e(),s||(s=t(),!s&&i&&(s=i(),!s&&n&&(s=n()))),s},e.prototype._calcLeft=function(e,t,i){var n=e/2,s=t/2,o=i+s-n;return o=o-1||this._choiceField.addEventListener("focus",this._FocusHandler.bind(this),!1),t&&t.indexOf("blur")>-1||this._choiceField.addEventListener("blur",this._BlurHandler.bind(this),!1),t&&t.indexOf("click")>-1||this._choiceField.addEventListener("click",this._ClickHandler.bind(this),!1),t&&t.indexOf("keydown")>-1||this._choiceField.addEventListener("keydown",this._KeydownHandler.bind(this),!1)},e.prototype._FocusHandler=function(){this._choiceField.classList.add("in-focus")},e.prototype._BlurHandler=function(){this._choiceField.classList.remove("in-focus")},e.prototype._ClickHandler=function(e){e.stopPropagation(),e.preventDefault(),this._choiceField.classList.contains("is-disabled")||this.toggle()},e.prototype._KeydownHandler=function(e){32===e.keyCode&&(e.stopPropagation(),e.preventDefault(),this._choiceField.classList.contains("is-disabled")||this.toggle())},e}();e.CheckBox=t}(fabric||(fabric={}));var fabric;!function(e){var t=".ms-SearchBox-field",i=".ms-SearchBox-clear",n=".ms-SearchBox-exit",s="has-text",o="is-active",r="is-animated",a=function(){function e(e){var t=this;this._container=e,this._saveDOMRefs(this._container),this._boundExpandSearchHandler=this._expandSearchHandler.bind(this),this._boundEnableClose=this._enableClose.bind(this),this._boundCollapseSearchBox=this._collapseSearchBox.bind(this),this._boundClearSearchBox=this._clearSearchBox.bind(this),this._boundHandleBlur=this._handleBlur.bind(this),this._boundExitSearchBox=this._exitSearchBox.bind(this),this._setHasText(),this._setFocusAction(this._container),this._setClearButtonAction(),this._setBlurAction(),this._clearOnly=!1,setTimeout(function(){t._checkState(),t._addAnimation()},10)}return e.prototype.setCollapsedListeners=function(){this._disposeListeners(),this._searchBox.addEventListener("click",this._boundExpandSearchHandler,!1),this._searchBoxField.addEventListener("focus",this._boundExpandSearchHandler,!0)},e.prototype.getInputField=function(){return this._searchBoxField},e.prototype._saveDOMRefs=function(e){this._searchBox=e,this._searchBoxField=this._searchBox.querySelector(t),this._searchBoxClearButton=this._searchBox.querySelector(i),this._searchBoxExitButton=this._searchBox.querySelector(n)},e.prototype._disposeListeners=function(){this._searchBox.removeEventListener("click",this._boundExpandSearchHandler),this._searchBoxField.removeEventListener("focus",this._boundExpandSearchHandler)},e.prototype._exitSearchBox=function(e){e.stopPropagation(),e.target.blur(),this._clearSearchBox(),this._collapseSearchBox(),this._searchBox.removeEventListener("keyup",this._boundEnableClose),this.setCollapsedListeners()},e.prototype._collapseSearchBox=function(){this._searchBox.classList.remove("is-active");var e=document.createEvent("Event");e.initEvent("searchCollapse",!0,!0),this._searchBoxField.dispatchEvent(e)},e.prototype._expandSearchHandler=function(){this._disposeListeners(),this._searchBox.classList.add("is-active"),this._searchBoxField.focus()},e.prototype._enableClose=function(){this._setHasText()},e.prototype._setHasText=function(){this._searchBoxField.value.length>0?this._searchBox.classList.add(s):this._searchBox.classList.remove(s)},e.prototype._setFocusAction=function(e){var t=this;this._searchBoxField.addEventListener("focus",function(){t._setHasText(),t._searchBox.addEventListener("keyup",t._boundEnableClose,!1),t._searchBox.classList.add(o),t._searchBox.classList.add(o)},!0)},e.prototype._clearSearchBox=function(e){var t=this;this._clearOnly=!0,this._searchBoxField.value="",this._setHasText(),setTimeout(function(){t._clearOnly=!1},10)},e.prototype._setClearButtonAction=function(){var e=this;this._searchBoxExitButton&&this._searchBoxExitButton.addEventListener("click",this._boundExitSearchBox,!1),this._searchBoxClearButton.addEventListener("mousedown",this._boundClearSearchBox,!1),this._searchBoxClearButton.addEventListener("keydown",function(t){var i=t.keyCode;13===i&&e._clearSearchBox(t)},!1)},e.prototype._handleBlur=function(e){var t=this;this._clearOnly?this._searchBoxField.focus():(this._searchBox.removeEventListener("keyup",this._boundEnableClose),setTimeout(function(){t._searchBox.contains(document.activeElement)||(t._clearSearchBox(),t._collapseSearchBox(),t.setCollapsedListeners())},10)),this._clearOnly=!1},e.prototype._setBlurAction=function(){this._searchBoxField.addEventListener("blur",this._boundHandleBlur,!0),this._searchBoxClearButton.addEventListener("blur",this._boundHandleBlur,!0)},e.prototype._checkState=function(){this._searchBox.classList.contains("is-collapsed")&&this.setCollapsedListeners()},e.prototype._addAnimation=function(){this._container.classList.add(r)},e}();e.SearchBox=a}(fabric||(fabric={}));var fabric;!function(e){var t=".ms-ContextualMenu",i=".ms-CommandButton-splitIcon",n=".ms-CommandButton-button",s="bottom",o=function(){function o(e,s){this._container=e,this._command=this._container,this._commandButton=this._command.querySelector(n),this._splitButton=this._command.querySelector(i),s?this._contextualMenu=s:this._contextualMenu=this._container.querySelector(t),this._checkForMenu()}return o.prototype._createModalHostView=function(){this._modalHostView=new e.ContextualHost(this._contextualMenu,s,this._command,(!1))},o.prototype._setClick=function(){this._splitButton?this._splitButton.addEventListener("click",this._createModalHostView.bind(this),!1):this._commandButton.addEventListener("click",this._createModalHostView.bind(this),!1)},o.prototype._checkForMenu=function(){this._contextualMenu&&this._setClick()},o}();e.CommandButton=o}(fabric||(fabric={}));var fabric;!function(e){"use strict";var t=".ms-ContextualMenu",i=".ms-ContextualMenu-item",n=".ms-ContextualMenu-link",s=".ms-SearchBox",o=".ms-CommandBar-mainArea",r=".ms-CommandBar-sideCommands",a=".ms-CommandBar-overflowButton",c="ms-CommandButton--noLabel",l=".ms-SearchBox-closeField",h=".ms-CommandButton",d=".ms-CommandButton-label",p=".ms-Icon",u=40,_=30,m=function(){function m(e){this.responsiveSizes={"sm-min":320,"md-min":480,"lg-min":640,"xl-min":1024,"xxl-min":1366,"xxxl-min":1920},this.visibleCommands=[],this.commandWidths=[],this.overflowCommands=[],this.itemCollection=[],this._sideAreaCollection=[],this.breakpoint="sm",this._container=e,this.responsiveSizes["sm-max"]=this.responsiveSizes["md-min"]-1,this.responsiveSizes["md-max"]=this.responsiveSizes["lg-min"]-1,this.responsiveSizes["lg-max"]=this.responsiveSizes["xl-min"]-1,this.responsiveSizes["xl-max"]=this.responsiveSizes["xxl-min"]-1,this.responsiveSizes["xxl-max"]=this.responsiveSizes["xxxl-min"]-1,this._setElements(),this._setBreakpoint(),this._elements.overflowCommand&&this._initOverflow(),this._setUIState()}return m.prototype._runsSearchBox=function(e){void 0===e&&(e="add"),this._changeSearchState("is-collapsed",e)},m.prototype._runOverflow=function(){this._elements.overflowCommand&&(this._saveCommandWidths(),this._redrawMenu(),this._updateCommands(),this._drawCommands(),this._checkOverflow())},m.prototype._initOverflow=function(){this._createContextualRef(),this._createItemCollection(this.itemCollection,o),this._createItemCollection(this._sideAreaCollection,r),this._saveCommandWidths(),this._updateCommands(),this._drawCommands(),this._setWindowEvent(),this._checkOverflow()},m.prototype._hasClass=function(e,t){return(" "+e.className+" ").indexOf(" "+t+" ")>-1},m.prototype._onSearchExpand=function(){"lg"===this.breakpoint&&(this._container.classList.add("search-expanded"),this._doResize())},m.prototype._onSearchCollapse=function(){"lg"===this.breakpoint&&(this._container.classList.remove("search-expanded"),this._doResize())},m.prototype._getScreenSize=function(){var e=window,t={x:0,y:0},i=document,n=i.documentElement,s=i.getElementsByTagName("body")[0];return t.x=e.innerWidth||n.clientWidth||s.clientWidth,t.y=e.innerHeight||n.clientHeight||s.clientHeight,t},m.prototype._setBreakpoint=function(){var e=this._getScreenSize().x;switch(!0){case e<=this.responsiveSizes["sm-max"]:this.breakpoint="sm";break;case e>=this.responsiveSizes["md-min"]&&e<=this.responsiveSizes["md-max"]:this.breakpoint="md";break;case e>=this.responsiveSizes["lg-min"]&&e<=this.responsiveSizes["lg-max"]:this.breakpoint="lg";break;case e>=this.responsiveSizes["xl-min"]&&e<=this.responsiveSizes["xl-max"]:this.breakpoint="xl";break;case e>=this.responsiveSizes["xxl-min"]&&e<=this.responsiveSizes["xxl-max"]:this.breakpoint="xxl";break;case e>=this.responsiveSizes["xxxl-min"]:this.breakpoint="xxxl"}},m.prototype._createSearchInstance=function(){return!!this._elements.searchBox&&new e.SearchBox(this._elements.searchBox)},m.prototype._changeSearchState=function(e,t){if(this._elements.searchBox)switch(t){case"remove":this._elements.searchBox.classList.remove(e);break;case"add":this._elements.searchBox.classList.add(e)}},m.prototype._setElements=function(){var e=this;this._elements={mainArea:this._container.querySelector(o)},this._container.querySelector(r)&&(this._elements.sideCommandArea=this._container.querySelector(r)),this._container.querySelector(a)&&(this._elements.overflowCommand=this._container.querySelector(a),this._elements.contextMenu=this._container.querySelector(a).querySelector(t)),this._container.querySelector(o+" "+s)&&(this._elements.searchBox=this._container.querySelector(o+" "+s),this._elements.searchBoxClose=this._container.querySelector(l),this.searchBoxInstance=this._createSearchInstance(),this.searchBoxInstance.getInputField().addEventListener("focus",function(){e._onSearchExpand()},!1),this.searchBoxInstance.getInputField().addEventListener("searchCollapse",function(){e._onSearchCollapse()},!1))},m.prototype._createItemCollection=function(t,i){var n,s,o,r,l=this._container.querySelectorAll(i+" > "+h+":not("+a+")");this._commandButtonInstance=new e.CommandButton(this._elements.overflowCommand);for(var u=0;u-1){_=r[m];break}}t.push({item:n,label:s,icon:_,isCollapsed:!!n.classList.contains(c),commandButtonRef:new e.CommandButton(n)})}},m.prototype._createContextualRef=function(){this.contextualItemContainerRef=this._elements.contextMenu.querySelector(i).cloneNode(!0),this.contextualItemLink=this._elements.contextMenu.querySelector(n).cloneNode(!1),this.contextualItemIcon=this._elements.contextMenu.querySelector(".ms-Icon").cloneNode(!1),this._elements.contextMenu.innerHTML=""},m.prototype._getElementWidth=function(e){var t,i;return null===e.offsetParent&&e.setAttribute("style","position: absolute; opacity: 0; display: block;"),
+t=e.getBoundingClientRect().width,i=window.getComputedStyle(e),t+=parseInt(i.marginLeft,10)+parseInt(i.marginRight,10),e.setAttribute("style",""),t},m.prototype._saveCommandWidths=function(){for(var e=0;e0?this._elements.overflowCommand.classList.remove("is-hidden"):(this._elements.overflowCommand.classList.add("is-hidden"),this.activeCommand===this._elements.overflowCommand&&this._elements.contextMenu.classList.remove("is-open"))},m.prototype._redrawMenu=function(){var e;this._hasClass(this._elements.contextMenu,"is-open")&&(e=this.activeCommand.getBoundingClientRect().left,this._drawOverflowMenu(e))},m.prototype._drawOverflowMenu=function(e){this._elements.contextMenu.setAttribute("style","left: "+e+"px; transform: translateX(-50%)")},m.prototype._doResize=function(){this._setBreakpoint(),this._setUIState()},m}();e.CommandBar=m}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(e){this._container=e,this._choiceField=this._container.querySelector(".ms-RadioButton-field"),this._choiceInput=this._container.querySelector(".ms-RadioButton-input"),"true"===this._choiceField.getAttribute("aria-checked")&&this._choiceField.classList.add("is-checked"),this._addListeners()}return e.prototype.getValue=function(){return"true"===this._choiceField.getAttribute("aria-checked")},e.prototype.toggle=function(){this.getValue()?this.unCheck():this.check()},e.prototype.check=function(){this._choiceField.setAttribute("aria-checked","true"),this._choiceField.classList.add("is-checked"),this._choiceInput.checked=!0},e.prototype.unCheck=function(){this._choiceField.setAttribute("aria-checked","false"),this._choiceField.classList.remove("is-checked"),this._choiceInput.checked=!1},e.prototype.removeListeners=function(){this._choiceField.removeEventListener("focus",this._FocusHandler.bind(this)),this._choiceField.removeEventListener("blur",this._BlurHandler.bind(this)),this._choiceField.removeEventListener("click",this._RadioClickHandler.bind(this)),this._choiceField.addEventListener("keydown",this._RadioKeydownHandler.bind(this))},e.prototype._addListeners=function(){this._choiceField.addEventListener("focus",this._FocusHandler.bind(this),!1),this._choiceField.addEventListener("blur",this._BlurHandler.bind(this),!1),this._choiceField.addEventListener("click",this._RadioClickHandler.bind(this),!1),this._choiceField.addEventListener("keydown",this._RadioKeydownHandler.bind(this),!1)},e.prototype._RadioClickHandler=function(e){e.stopPropagation(),e.preventDefault(),this._choiceField.classList.contains("is-disabled")||this._dispatchSelectEvent()},e.prototype._dispatchSelectEvent=function(){var e={bubbles:!0,cancelable:!0,detail:{name:this._choiceField.getAttribute("name"),item:this}};this._choiceField.dispatchEvent(new CustomEvent("msChoicefield",e))},e.prototype._RadioKeydownHandler=function(e){32===e.keyCode&&(e.stopPropagation(),e.preventDefault(),this._choiceField.classList.contains("is-disabled")||this._dispatchSelectEvent())},e.prototype._FocusHandler=function(){this._choiceField.classList.add("in-focus")},e.prototype._BlurHandler=function(){this._choiceField.classList.remove("in-focus")},e}();e.RadioButton=t}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function t(e){this._choiceFieldGroup=e,this._choiceFieldComponents=[],this._initalSetup(),this._addListeners()}return t.prototype.removeListeners=function(){this._choiceFieldGroup.removeEventListener("msChoicefield",this._ChoiceFieldHandler.bind(this))},t.prototype._initalSetup=function(){for(var t=this._choiceFieldGroup.querySelectorAll(".ms-RadioButton"),i=0;i"+o+"";r+="";for(var a=s;a"+a+"";r+="
",i.append(r),i.find(".ms-DatePicker-yearOption").removeClass("is-highlighted"),i.find(".ms-DatePicker-yearOption[data-year='"+n.get("highlight").year+"']").addClass("is-highlighted")},e.prototype.scrollUp=function(e){$("html, body").animate({scrollTop:e.offset().top},367)},e.prototype.setDateAttributes=function(e){var t=e[0],i=e[1],n=e[2];return"undefined"!=typeof t&&null!==t||(t=this.picker.get("highlight").year),"undefined"!=typeof i&&null!==i||(i=this.picker.get("highlight").month),"undefined"!=typeof n&&null!==n||(n=this.picker.get("highlight").date),[t,i,n]},e}();e.DatePicker=t}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(e){if(e)this.overlayElement=e;else{var t=document.createElement("div");t.setAttribute("class","ms-Overlay"),this.overlayElement=t}this.overlayElement.addEventListener("click",this.hide.bind(this),!1)}return e.prototype.remove=function(){this.overlayElement.parentElement.removeChild(this.overlayElement)},e.prototype.show=function(){this.overlayElement.classList.add("is-visible"),document.body.classList.add("ms-u-overflowHidden")},e.prototype.hide=function(){this.overlayElement.classList.remove("is-visible"),document.body.classList.remove("ms-u-overflowHidden")},e}();e.Overlay=t}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function t(e){this._dialog=e,this._closeButtonElement=this._dialog.querySelector(".ms-Dialog-buttonClose"),this._actionButtonElements=this._dialog.querySelectorAll(".ms-Dialog-action"),this._closeButtonElement&&this._closeButtonElement.addEventListener("click",this.close.bind(this),!1);for(var t=0;tthis._newDropdownLabel.offsetHeight){var i=0,n="...",s=void 0;do i--,s=t.slice(0,i),this._dropdownLabelHelper.textContent=s+n;while(this._dropdownLabelHelper.offsetHeight>this._newDropdownLabel.offsetHeight)}this._newDropdownLabel.textContent=this._dropdownLabelHelper.textContent},u.prototype._getScreenSize=function(){var e=window,t={x:0,y:0},i=document,n=i.documentElement,s=i.getElementsByTagName("body")[0];return t.x=e.innerWidth||n.clientWidth||s.clientWidth,t.y=e.innerHeight||n.clientHeight||s.clientHeight,t},u.prototype._doResize=function(){var e=this._container.classList.contains(c);if(e){var t=this._getScreenSize().x;t<=p?this._openDropdownAsPanel():this._removeDropdownAsPanel()}},u.prototype._openDropdownAsPanel=function(){void 0===this._panel&&(this._panelContainer=document.createElement("div"),this._panelContainer.classList.add(a),this._panelContainer.classList.add(t),this._panelContainer.classList.add(c),this._panelContainer.classList.add(d),this._panelContainer.appendChild(this._newDropdown),this._panel=new e.Panel(this._panelContainer))},u.prototype._removeDropdownAsPanel=function(e){var t=this;void 0!==this._panel&&(e&&e.target===this._panel.panelHost.overlay.overlayElement?this._container.appendChild(this._newDropdown):this._panel.dismiss(function(){t._container.appendChild(t._newDropdown)}),this._panel=void 0)},u.prototype._onOpenDropdown=function(e){var t=this._container.classList.contains(l),i=this._container.classList.contains(c);if(!t&&!i){e.stopPropagation(),this._closeOtherDropdowns(),this._container.classList.add(c),document.addEventListener("click",this._onCloseDropdown);var n=this._getScreenSize().x;n<=p&&this._openDropdownAsPanel()}},u.prototype._closeOtherDropdowns=function(){for(var e=document.querySelectorAll("."+t+"."+c),i=0;i=this.SMALL_BREAK_POINT?this._resizeRegular():this._resizeSmall()},e.prototype._resizeRegular=function(){this._clientWidth-this._bufferSize>this._initTextWidth&&this._initTextWidththis._initTextWidth?(this._textWidth="auto",this._collapse()):this._textWidth=this._clientWidth-(this._bufferElementsWidthSmall+this._closeButton.offsetWidth)+"px",this._clipper.style.width=this._textWidth},e.prototype._cacheDOM=function(){this._errorBanner=this.container,this._clipper=this.container.querySelector(".ms-MessageBanner-clipper"),this._chevronButton=this.container.querySelector(".ms-MessageBanner-expand"),this._actionButton=this.container.querySelector(".ms-MessageBanner-action"),this._bufferSize=this._actionButton.offsetWidth+this._bufferElementsWidth,this._closeButton=this.container.querySelector(".ms-MessageBanner-close")},e.prototype._expand=function(){var e=this._chevronButton.querySelector(".ms-Icon");this._errorBanner.className+=" is-expanded",e.className="ms-Icon ms-Icon--DoubleChevronUp"},e.prototype._collapse=function(){var e=this._chevronButton.querySelector(".ms-Icon");this._errorBanner.className="ms-MessageBanner",e.className="ms-Icon ms-Icon--DoubleChevronDown"},e.prototype._toggleExpansion=function(){this._errorBanner.className.indexOf("is-expanded")>-1?this._collapse():this._expand()},e.prototype._hideMessageBanner=function(){this._errorBanner.className="ms-MessageBanner is-hidden"},e.prototype._hideBanner=function(){this._errorBanner.className.indexOf("hide")===-1&&(this._errorBanner.className+=" hide",setTimeout(this._hideMessageBanner.bind(this),500))},e.prototype._setListeners=function(){window.addEventListener("resize",this._onResize.bind(this),!1),this._chevronButton.addEventListener("click",this._toggleExpansion.bind(this),!1),this._closeButton.addEventListener("click",this._hideBanner.bind(this),!1)},e}();e.MessageBanner=t}(fabric||(fabric={}));var fabric;!function(e){var t="bottom",i="ms-Persona--token",n=function(){function n(e){this._container=e,this._peoplePickerMenu=this._container.querySelector(".ms-PeoplePicker-results"),this._peoplePickerSearch=this._container.querySelector(".ms-TextField-field"),this._peoplePickerSearchBox=this._container.querySelector(".ms-PeoplePicker-searchBox"),this._selectedPeople=this._container.querySelector(".ms-PeoplePicker-selectedPeople"),this._assignClicks(),this._selectedPeople&&(this._assignRemoveHandler(),this._selectedCount=this._container.querySelector(".ms-PeoplePicker-selectedCount"),this._selectedPlural=this._container.querySelector(".ms-PeoplePicker-selectedCountPlural")),this._peoplePickerMenu&&this._peoplePickerMenu.setAttribute("style","display: none;")}return n.prototype._createModalHost=function(i){i.stopPropagation(),this._peoplePickerMenu.setAttribute("style","display: block;"),this._contextualHostView=new e.ContextualHost(this._peoplePickerMenu,t,this._peoplePickerSearchBox,(!1),[""],(!0),this._contextHostCallBack.bind(this)),this._peoplePickerSearchBox.classList.add("is-active"),this._isContextualMenuOpen=!0},n.prototype._clickHandler=function(e){this._createModalHost(e);var t=this._peoplePickerMenu.querySelector(".ms-PeoplePicker-result"),i=t.parentNode,n=i.cloneNode(!0);i.parentNode.replaceChild(n,i),this._peoplePickerResults=this._peoplePickerMenu.querySelectorAll(".ms-PeoplePicker-result");for(var s=0;s-1&&(this.parentSize=28,this.eightSize=.179),this.offsetSize=this.eightSize,this.numCircles=8},e.prototype._setTargetElement=function(){this._target.className.indexOf("ms-Spinner")===-1?(this.spinner=document.createElement("div"),this.spinner.className="ms-Spinner",this._target.appendChild(this.spinner)):this.spinner=this._target},e.prototype._initializeOpacities=function(){var e,t=0,i=1;for(this.fadeIncrement=1/this.numCircles,t;t=0&&(this._textField.addEventListener("focus",function(t){e._textFieldLabel.style.display="none"}),this._textField.addEventListener("blur",function(t){0===e._textField.value.length&&(e._textFieldLabel.style.display="block")})),this._type.indexOf(t.Type.Underlined)>=0&&(this._textField.addEventListener("focus",function(t){e._container.classList.add("is-active")}),this._textField.addEventListener("blur",function(t){e._container.classList.remove("is-active")}))},e}();e.TextField=i}(fabric||(fabric={}));var fabric;!function(e){var t=function(){function e(e){this._container=e,this._toggleField=this._container.querySelector(".ms-Toggle-field"),this._addListeners()}return e.prototype.removeListeners=function(){this._toggleField.removeEventListener("click",this._toggleHandler.bind(this))},e.prototype._addListeners=function(){var e=this;this._toggleField.addEventListener("click",this._toggleHandler.bind(this),!1),this._toggleField.addEventListener("keyup",function(t){return 32===t.keyCode?e._toggleHandler():null},!1)},e.prototype._toggleHandler=function(){this._toggleField.classList.toggle("is-selected")},e}();e.Toggle=t}(fabric||(fabric={}));
\ No newline at end of file
diff --git a/dist/lib/PickaDate.js b/dist/lib/PickaDate.js
new file mode 100644
index 00000000..d539613f
--- /dev/null
+++ b/dist/lib/PickaDate.js
@@ -0,0 +1 @@
+!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,h,k){function l(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",w.component.nodes(r.open),t.box),t.wrap),t.frame),t.holder)}function m(){u.data(g,w).addClass(t.input).val(u.data("value")?w.get("select",s.format):f.value).on("focus."+r.id+" click."+r.id,p),s.editable||u.on("keydown."+r.id,function(a){var b=a.keyCode,c=/^(8|46)$/.test(b);return 27==b?(w.close(),!1):void((32==b||c||!r.open&&w.component.key[b])&&(a.preventDefault(),a.stopPropagation(),c?w.clear().close():w.open()))}),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"+(w._hidden?" "+w._hidden.id:"")})}function n(){w.$root.on({focusin:function(a){w.$root.removeClass(t.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=w.$root.children()[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is(":input")||"OPTION"==c.nodeName||(b.preventDefault(),f.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(t.navDisabled)||b.hasClass(t.disabled),e=document.activeElement;e=e&&(e.type||e.href)&&e,(d||e&&!a.contains(w.$root[0],e))&&f.focus(),!d&&c.nav?w.set("highlight",w.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?w.set("select",c.pick).close(!0):c.clear?w.clear().close(!0):c.close&&w.close(!0)}),e(w.$root[0],"hidden",!0)}function o(){var b;s.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof s.hiddenPrefix?s.hiddenPrefix:"","string"==typeof s.hiddenSuffix?s.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),w._hidden=a(' ")[0],u.on("change."+r.id,function(){w._hidden.value=f.value?w.get("select",s.formatSubmit):""}).after(w._hidden)}function p(a){a.stopPropagation(),"focus"==a.type&&w.$root.addClass(t.focused),w.open()}if(!f)return b;var q=!1,r={id:f.id||"P"+Math.abs(~~(Math.random()*new Date))},s=h?a.extend(!0,{},h.defaults,k):k||{},t=a.extend({},b.klasses(),s.klass),u=a(f),v=function(){return this.start()},w=v.prototype={constructor:v,$node:u,start:function(){return r&&r.start?w:(r.methods={},r.start=!0,r.open=!1,r.type=f.type,f.autofocus=f==document.activeElement,f.readOnly=!s.editable,f.id=f.id||r.id,"text"!=f.type&&(f.type="text"),w.component=new h(w,s),w.$root=a(b._.node("div",l(),t.picker,'id="'+f.id+'_root"')),n(),s.formatSubmit&&o(),m(),s.container?a(s.container).append(w.$root):u.after(w.$root),w.on({start:w.component.onStart,render:w.component.onRender,stop:w.component.onStop,open:w.component.onOpen,close:w.component.onClose,set:w.component.onSet}).on({start:s.onStart,render:s.onRender,stop:s.onStop,open:s.onOpen,close:s.onClose,set:s.onSet}),q=c(w.$root.children()[0]),f.autofocus&&w.open(),w.trigger("start").trigger("render"))},render:function(a){return a?w.$root.html(l()):w.$root.find("."+t.box).html(w.component.nodes(r.open)),w.trigger("render")},stop:function(){return r.start?(w.close(),w._hidden&&w._hidden.parentNode.removeChild(w._hidden),w.$root.remove(),u.removeClass(t.input).removeData(g),setTimeout(function(){u.off("."+r.id)},0),f.type=r.type,f.readOnly=!1,w.trigger("stop"),r.methods={},r.start=!1,w):w},open:function(c){return r.open?w:(u.addClass(t.active),e(f,"expanded",!0),setTimeout(function(){w.$root.addClass(t.opened),e(w.$root[0],"hidden",!1)},0),c!==!1&&(r.open=!0,q&&j.css("overflow","hidden").css("padding-right","+="+d()),u.trigger("focus"),i.on("click."+r.id+" focusin."+r.id,function(a){var b=a.target;b!=f&&b!=document&&3!=a.which&&w.close(b===w.$root.children()[0])}).on("keydown."+r.id,function(c){var d=c.keyCode,e=w.component.key[d],g=c.target;27==d?w.close(!0):g!=f||!e&&13!=d?a.contains(w.$root[0],g)&&13==d&&(c.preventDefault(),g.click()):(c.preventDefault(),e?b._.trigger(w.component.key.go,w,[b._.trigger(e)]):w.$root.find("."+t.highlighted).hasClass(t.disabled)||w.set("select",w.component.item.highlight).close())})),w.trigger("open"))},close:function(a){return a&&(u.off("focus."+r.id).trigger("focus"),setTimeout(function(){u.on("focus."+r.id,p)},0)),u.removeClass(t.active),e(f,"expanded",!1),setTimeout(function(){w.$root.removeClass(t.opened+" "+t.focused),e(w.$root[0],"hidden",!0)},0),r.open?(r.open=!1,q&&j.css("overflow","").css("padding-right","-="+d()),i.off("."+r.id),w.trigger("close")):w},clear:function(a){return w.set("clear",null,a)},set:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(d=g&&a.isPlainObject(c)?c:d||{},b){g||(h[b]=c);for(e in h)f=h[e],e in w.component.item&&(void 0===f&&(f=null),w.component.set(e,f,d)),("select"==e||"clear"==e)&&u.val("clear"==e?"":w.get(e,s.format)).trigger("change");w.render()}return d.muted?w:w.trigger("set",h)},get:function(a,c){if(a=a||"value",null!=r[a])return r[a];if("value"==a)return f.value;if(a in w.component.item){if("string"==typeof c){var d=w.component.get(a);return d?b._.trigger(w.component.formats.toString,w.component,[c,d]):""}return w.component.get(a)}},on:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(b){g||(h[b]=c);for(e in h)f=h[e],d&&(e="_"+e),r.methods[e]=r.methods[e]||[],r.methods[e].push(f)}return w},off:function(){var a,b,c=arguments;for(a=0,namesCount=c.length;namesCount>a;a+=1)b=c[a],b in r.methods&&delete r.methods[b];return w},trigger:function(a,c){var d=function(a){var d=r.methods[a];d&&d.map(function(a){b._.trigger(a,w,[c])})};return d("_"+a),d(a),w}};return new v}function c(a){var b,c="position";return a.currentStyle?b=a.currentStyle[c]:window.getComputedStyle&&(b=getComputedStyle(a)[c]),"fixed"==b}function d(){if(j.height()<=h.height())return 0;var b=a('
').appendTo("body"),c=b[0].offsetWidth;b.css("overflow","scroll");var d=a('
').appendTo(b),e=d[0].offsetWidth;return b.remove(),c-e}function e(b,c,d){if(a.isPlainObject(c))for(var e in c)f(b,e,c[e]);else f(b,c,d)}function f(a,b,c){a.setAttribute(("role"==b?"":"aria-")+b,c)}function g(b,c){a.isPlainObject(b)||(b={attribute:c}),c="";for(var d in b){var e=("role"==d?"":"aria-")+d,f=b[d];c+=null==f?"":e+'="'+b[d]+'"'}return c}var h=a(window),i=a(document),j=a(document.documentElement);return b.klasses=function(a){return a=a||"picker",{picker:a,opened:a+"--opened",focused:a+"--focused",input:a+"__input",active:a+"__input--active",holder:a+"__holder",frame:a+"__frame",wrap:a+"__wrap",box:a+"__box"}},b._={group:function(a){for(var c,d="",e=b._.trigger(a.min,a);e<=b._.trigger(a.max,a,[e]);e+=a.i)c=b._.trigger(a.item,a,[e]),d+=b._.node(a.node,c[0],c[1],c[2]);return d},node:function(b,c,d,e){return c?(c=a.isArray(c)?c.join(""):c,d=d?' class="'+d+'"':"",e=e?" "+e:"","<"+b+d+e+">"+c+""+b+">"):""},lead:function(a){return(10>a?"0":"")+a},trigger:function(a,b,c){return"function"==typeof a?a.apply(b,c||[]):a},digits:function(a){return/\d/.test(a[1])?2:1},isDate:function(a){return{}.toString.call(a).indexOf("Date")>-1&&this.isInteger(a.getUTCDate())},isInteger:function(a){return{}.toString.call(a).indexOf("Number")>-1&&a%1===0},ariaAttr:g},b.extend=function(c,d){a.fn[c]=function(e,f){var g=this.data(c);return"picker"==e?g:g&&"string"==typeof e?b._.trigger(g[e],g,[f]):this.each(function(){var f=a(this);f.data(c)||new b(this,c,d,e)})},a.fn[c].defaults=d.defaults},b}),function(a){"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):a(Picker,jQuery)}(function(a,b){function c(a,b){var c=this,d=a.$node[0],e=d.value,f=a.$node.data("value"),g=f||e,h=f?b.formatSubmit:b.format,i=function(){return d.currentStyle?"rtl"==d.currentStyle.direction:"rtl"==getComputedStyle(a.$root[0]).direction};c.settings=b,c.$node=a.$node,c.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},c.item={},c.item.clear=null,c.item.disable=(b.disable||[]).slice(0),c.item.enable=-function(a){return a[0]===!0?a.shift():-1}(c.item.disable),c.set("min",b.min).set("max",b.max).set("now"),g?c.set("select",g,{format:h}):c.set("select",null).set("highlight",c.item.now),c.key={40:7,38:-7,39:function(){return i()?-1:1},37:function(){return i()?1:-1},go:function(a){var b=c.item.highlight,d=new Date(Date.UTC(b.year,b.month,b.date+a));c.set("highlight",d,{interval:a}),this.render()}},a.on("render",function(){a.$root.find("."+b.klass.selectMonth).on("change",function(){var c=this.value;c&&(a.set("highlight",[a.get("view").year,c,a.get("highlight").date]),a.$root.find("."+b.klass.selectMonth).trigger("focus"))}),a.$root.find("."+b.klass.selectYear).on("change",function(){var c=this.value;c&&(a.set("highlight",[c,a.get("view").month,a.get("highlight").date]),a.$root.find("."+b.klass.selectYear).trigger("focus"))})},1).on("open",function(){var d="";c.disabled(c.get("now"))&&(d=":not(."+b.klass.buttonToday+")"),a.$root.find("button"+d+", select").attr("disabled",!1)},1).on("close",function(){a.$root.find("button, select").attr("disabled",!0)},1)}var d=7,e=6,f=a._;c.prototype.set=function(a,b,c){var d=this,e=d.item;return null===b?("clear"==a&&(a="select"),e[a]=b,d):(e["enable"==a?"disable":"flip"==a?"enable":a]=d.queue[a].split(" ").map(function(e){return b=d[e](a,b,c)}).pop(),"select"==a?d.set("highlight",e.select,c):"highlight"==a?d.set("view",e.highlight,c):a.match(/^(flip|min|max|disable|enable)$/)&&(e.select&&d.disabled(e.select)&&d.set("select",e.select,c),e.highlight&&d.disabled(e.highlight)&&d.set("highlight",e.highlight,c)),d)},c.prototype.get=function(a){return this.item[a]},c.prototype.create=function(a,c,d){var e,g=this;return c=void 0===c?a:c,c==-1/0||1/0==c?e=c:b.isPlainObject(c)&&f.isInteger(c.pick)?c=c.obj:b.isArray(c)?(c=new Date(Date.UTC(c[0],c[1],c[2])),c=f.isDate(c)?c:g.create().obj):c=f.isInteger(c)?g.normalize(new Date(c),d):f.isDate(c)?g.normalize(c,d):g.now(a,c,d),{year:e||c.getUTCFullYear(),month:e||c.getUTCMonth(),date:e||c.getUTCDate(),day:e||c.getUTCDay(),obj:e||c,pick:e||c.getTime()}},c.prototype.createRange=function(a,c){var d=this,e=function(a){return a===!0||b.isArray(a)||f.isDate(a)?d.create(a):a};return f.isInteger(a)||(a=e(a)),f.isInteger(c)||(c=e(c)),f.isInteger(a)&&b.isPlainObject(c)?a=[c.year,c.month,c.date+a]:f.isInteger(c)&&b.isPlainObject(a)&&(c=[a.year,a.month,a.date+c]),{from:e(a),to:e(c)}},c.prototype.withinRange=function(a,b){return a=this.createRange(a.from,a.to),b.pick>=a.from.pick&&b.pick<=a.to.pick},c.prototype.overlapRanges=function(a,b){var c=this;return a=c.createRange(a.from,a.to),b=c.createRange(b.from,b.to),c.withinRange(a,b.from)||c.withinRange(a,b.to)||c.withinRange(b,a.from)||c.withinRange(b,a.to)},c.prototype.now=function(a,b,c){return b=new Date,c&&c.rel&&b.setUTCDate(b.getUTCDate()+c.rel),this.normalize(b,c)},c.prototype.navigate=function(a,c,d){var e,f,g,h,i=b.isArray(c),j=b.isPlainObject(c),k=this.item.view;if(i||j){for(j?(f=c.year,g=c.month,h=c.date):(f=+c[0],g=+c[1],h=+c[2]),d&&d.nav&&k&&k.month!==g&&(f=k.year,g=k.month),e=new Date(Date.UTC(f,g+(d&&d.nav?d.nav:0),1)),f=e.getUTCFullYear(),g=e.getUTCMonth();new Date(Date.UTC(f,g,h)).getUTCMonth()!==g;)h-=1;c=[f,g,h]}return c},c.prototype.normalize=function(a){return a.setUTCHours(0,0,0,0),a},c.prototype.measure=function(a,b){var c=this;return b?"string"==typeof b?b=c.parse(a,b):f.isInteger(b)&&(b=c.now(a,b,{rel:b})):b="min"==a?-1/0:1/0,b},c.prototype.viewset=function(a,b){return this.create([b.year,b.month,1])},c.prototype.validate=function(a,c,d){var e,g,h,i,j=this,k=c,l=d&&d.interval?d.interval:1,m=-1===j.item.enable,n=j.item.min,o=j.item.max,p=m&&j.item.disable.filter(function(a){if(b.isArray(a)){var d=j.create(a).pick;dc.pick&&(g=!0)}return f.isInteger(a)}).length;if((!d||!d.nav)&&(!m&&j.disabled(c)||m&&j.disabled(c)&&(p||e||g)||!m&&(c.pick<=n.pick||c.pick>=o.pick)))for(m&&!p&&(!g&&l>0||!e&&0>l)&&(l*=-1);j.disabled(c)&&(Math.abs(l)>1&&(c.monthk.month)&&(c=k,l=l>0?1:-1),c.pick<=n.pick?(h=!0,l=1,c=j.create([n.year,n.month,n.date+(c.pick===n.pick?0:-1)])):c.pick>=o.pick&&(i=!0,l=-1,c=j.create([o.year,o.month,o.date+(c.pick===o.pick?0:1)])),!h||!i);)c=j.create([c.year,c.month,c.date+l]);return c},c.prototype.disabled=function(a){var c=this,d=c.item.disable.filter(function(d){return f.isInteger(d)?a.day===(c.settings.firstDay?d:d-1)%7:b.isArray(d)||f.isDate(d)?a.pick===c.create(d).pick:b.isPlainObject(d)?c.withinRange(d,a):void 0});return d=d.length&&!d.filter(function(a){return b.isArray(a)&&"inverted"==a[3]||b.isPlainObject(a)&&a.inverted}).length,-1===c.item.enable?!d:d||a.pickc.item.max.pick},c.prototype.parse=function(a,b,c){var d=this,e={};return b&&"string"==typeof b?(c&&c.format||(c=c||{},c.format=d.settings.format),d.formats.toArray(c.format).map(function(a){var c=d.formats[a],g=c?f.trigger(c,d,[b,e]):a.replace(/^!/,"").length;c&&(e[a]=b.substr(0,g)),b=b.substr(g)}),[e.yyyy||e.yy,+(e.mm||e.m)-1,e.dd||e.d]):b},c.prototype.formats=function(){function a(a,b,c){var d=a.match(/\w+/)[0];return c.mm||c.m||(c.m=b.indexOf(d)+1),d.length}function b(a){return a.match(/\w+/)[0].length}return{d:function(a,b){return a?f.digits(a):b.date},dd:function(a,b){return a?2:f.lead(b.date)},ddd:function(a,c){return a?b(a):this.settings.weekdaysShort[c.day]},dddd:function(a,c){return a?b(a):this.settings.weekdaysFull[c.day]},m:function(a,b){return a?f.digits(a):b.month+1},mm:function(a,b){return a?2:f.lead(b.month+1)},mmm:function(b,c){var d=this.settings.monthsShort;return b?a(b,d,c):d[c.month]},mmmm:function(b,c){var d=this.settings.monthsFull;return b?a(b,d,c):d[c.month]},yy:function(a,b){return a?2:(""+b.year).slice(2)},yyyy:function(a,b){return a?4:b.year},toArray:function(a){return a.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(a,b){var c=this;return c.formats.toArray(a).map(function(a){return f.trigger(c.formats[a],c,[0,b])||a.replace(/^!/,"")}).join("")}}}(),c.prototype.isDateExact=function(a,c){var d=this;return f.isInteger(a)&&f.isInteger(c)||"boolean"==typeof a&&"boolean"==typeof c?a===c:(f.isDate(a)||b.isArray(a))&&(f.isDate(c)||b.isArray(c))?d.create(a).pick===d.create(c).pick:b.isPlainObject(a)&&b.isPlainObject(c)?d.isDateExact(a.from,c.from)&&d.isDateExact(a.to,c.to):!1},c.prototype.isDateOverlap=function(a,c){var d=this,e=d.settings.firstDay?1:0;return f.isInteger(a)&&(f.isDate(c)||b.isArray(c))?(a=a%7+e,a===d.create(c).day+1):f.isInteger(c)&&(f.isDate(a)||b.isArray(a))?(c=c%7+e,c===d.create(a).day+1):b.isPlainObject(a)&&b.isPlainObject(c)?d.overlapRanges(a,c):!1},c.prototype.flipEnable=function(a){var b=this.item;b.enable=a||(-1==b.enable?1:-1)},c.prototype.deactivate=function(a,c){var d=this,e=d.item.disable.slice(0);return"flip"==c?d.flipEnable():c===!1?(d.flipEnable(1),e=[]):c===!0?(d.flipEnable(-1),e=[]):c.map(function(a){for(var c,g=0;gi;i+=1){if(h=e[i],d.isDateExact(h,a)){c=e[i]=null,j=!0;break}if(d.isDateOverlap(h,a)){b.isPlainObject(a)?(a.inverted=!0,c=a):b.isArray(a)?(c=a,c[3]||c.push("inverted")):f.isDate(a)&&(c=[a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),"inverted"]);break}}if(c)for(i=0;g>i;i+=1)if(d.isDateExact(e[i],a)){e[i]=null;break}if(j)for(i=0;g>i;i+=1)if(d.isDateOverlap(e[i],a)){e[i]=null;break}c&&e.push(c)}),e.filter(function(a){return null!=a})},c.prototype.nodes=function(a){var b=this,c=b.settings,g=b.item,h=g.now,i=g.select,j=g.highlight,k=g.view,l=g.disable,m=g.min,n=g.max,o=function(a,b){return c.firstDay&&(a.push(a.shift()),b.push(b.shift())),f.node("thead",f.node("tr",f.group({min:0,max:d-1,i:1,node:"th",item:function(d){return[a[d],c.klass.weekdays,'scope=col title="'+b[d]+'"']}})))}((c.showWeekdaysFull?c.weekdaysFull:c.weekdaysShort).slice(0),c.weekdaysFull.slice(0)),p=function(a){return f.node("div"," ",c.klass["nav"+(a?"Next":"Prev")]+(a&&k.year>=n.year&&k.month>=n.month||!a&&k.year<=m.year&&k.month<=m.month?" "+c.klass.navDisabled:""),"data-nav="+(a||-1)+" "+f.ariaAttr({role:"button",components:b.$node[0].id+"_table"})+' title="'+(a?c.labelMonthNext:c.labelMonthPrev)+'"')},q=function(){var d=c.showMonthsShort?c.monthsShort:c.monthsFull;return c.selectMonths?f.node("select",f.group({min:0,max:11,i:1,node:"option",item:function(a){return[d[a],0,"value="+a+(k.month==a?" selected":"")+(k.year==m.year&&an.month?" disabled":"")]}}),c.klass.selectMonth,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelMonthSelect+'"'):f.node("div",d[k.month],c.klass.month)},r=function(){var d=k.year,e=c.selectYears===!0?5:~~(c.selectYears/2);if(e){var g=m.year,h=n.year,i=d-e,j=d+e;if(g>i&&(j+=g-i,i=g),j>h){var l=i-g,o=j-h;i-=l>o?o:l,j=h}return f.node("select",f.group({min:i,max:j,i:1,node:"option",item:function(a){return[a,0,"value="+a+(d==a?" selected":"")]}}),c.klass.selectYear,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelYearSelect+'"')}return f.node("div",d,c.klass.year)};return f.node("div",(c.selectYears?r()+q():q()+r())+p()+p(1),c.klass.header)+f.node("table",o+f.node("tbody",f.group({min:0,max:e-1,i:1,node:"tr",item:function(a){var e=c.firstDay&&0===b.create([k.year,k.month,1]).day?-7:0;return[f.group({min:d*a-k.day+e+1,max:function(){return this.min+d-1},i:1,node:"td",item:function(a){a=b.create([k.year,k.month,a+(c.firstDay?1:0)]);var d=i&&i.pick==a.pick,e=j&&j.pick==a.pick,g=l&&b.disabled(a)||a.pickn.pick;return[f.node("div",a.date,function(b){return b.push(k.month==a.month?c.klass.infocus:c.klass.outfocus),h.pick==a.pick&&b.push(c.klass.now),d&&b.push(c.klass.selected),e&&b.push(c.klass.highlighted),g&&b.push(c.klass.disabled),b.join(" ")}([c.klass.day]),"data-pick="+a.pick+" "+f.ariaAttr({role:"gridcell",selected:d&&b.$node.val()===f.trigger(b.formats.toString,b,[c.format,a])?!0:null,activedescendant:e?!0:null,disabled:g?!0:null})),"",f.ariaAttr({role:"presentation"})]}})]}})),c.klass.table,'id="'+b.$node[0].id+'_table" '+f.ariaAttr({role:"grid",components:b.$node[0].id,readonly:!0}))+f.node("div",f.node("button",c.today,c.klass.buttonToday,"type=button data-pick="+h.pick+(a&&!b.disabled(h)?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.clear,c.klass.buttonClear,"type=button data-clear=1"+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.close,c.klass.buttonClose,"type=button data-close=true "+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id})),c.klass.footer)},c.defaults=function(a){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:a+"table",header:a+"header",navPrev:a+"nav--prev",navNext:a+"nav--next",navDisabled:a+"nav--disabled",month:a+"month",year:a+"year",selectMonth:a+"select--month",selectYear:a+"select--year",weekdays:a+"weekday",day:a+"day",disabled:a+"day--disabled",selected:a+"day--selected",highlighted:a+"day--highlighted",now:a+"day--today",infocus:a+"day--infocus",outfocus:a+"day--outfocus",footer:a+"footer",buttonClear:a+"button--clear",buttonToday:a+"button--today",buttonClose:a+"button--close"}}}(a.klasses().picker+"__"),a.extend("pickadate",c)});