diff --git a/.gitignore b/.gitignore index cb742fce1..d5d9fff45 100644 --- a/.gitignore +++ b/.gitignore @@ -10,7 +10,6 @@ npm-debug.log # Fabric files *.sublime-workspace docs.css -dist # Docs files docs/app diff --git a/dist/components/Breadcrumb/Breadcrumb.hbs b/dist/components/Breadcrumb/Breadcrumb.hbs new file mode 100644 index 000000000..be6a3350b --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.hbs @@ -0,0 +1,17 @@ + +
+
+
+
+
    +
    +
    + +
    diff --git a/dist/components/Breadcrumb/Breadcrumb.json b/dist/components/Breadcrumb/Breadcrumb.json new file mode 100644 index 000000000..15a9d21a3 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.json @@ -0,0 +1,8 @@ +{ + "name": "Breadcrumb", + "template": "Breadcrumb.html", + "class": "ms-Breadcrumb", + "dependencies": [ + "ContextualMenu" + ] +} diff --git a/dist/components/Breadcrumb/Breadcrumb.scss b/dist/components/Breadcrumb/Breadcrumb.scss new file mode 100644 index 000000000..4885b1a3e --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.scss @@ -0,0 +1,173 @@ +// 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 { + font-family: $ms-font-family-base; + margin: 23px 0 1px; + + &.is-overflow { + .ms-Breadcrumb-overflow { + display: inline; + } + } +} + +.ms-Breadcrumb-chevron { + font-size: $ms-font-size-l; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 10px 0; +} + +.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; + margin-right: -4px; + + .ms-Breadcrumb-overflowButton { + font-size: $ms-font-size-s; + display: inline-block; + color: $ms-color-themePrimary; + padding: 12px 8px 3px; + cursor: pointer; + vertical-align: top; + } +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; + + &.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; +} + + +@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: $ms-font-size-m; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } + } +} + +@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-top: 4px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } + } +} diff --git a/dist/components/Button/Button.hbs b/dist/components/Button/Button.hbs new file mode 100644 index 000000000..ed857efb4 --- /dev/null +++ b/dist/components/Button/Button.hbs @@ -0,0 +1,16 @@ + +<{{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}} + \ 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 000000000..48625801d --- /dev/null +++ b/dist/components/Button/Button.json @@ -0,0 +1,17 @@ +{ + "name": "Button", + "template": "Button.html", + "class": "ms-Button", + "wrapBranches": true, + "fileOrder": [ + "Button.html", + "Button.Primary.html", + "Button.Hero.html", + "Button.Compound.html", + "Button.Submenu.html" + ], + "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 000000000..57a815b67 --- /dev/null +++ b/dist/components/Button/Button.scss @@ -0,0 +1,275 @@ +// 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; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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; + + &: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 { + background-color: transparent; + border: 0; + vertical-align: top; + line-height: normal; + + .ms-Button-icon { + color: $ms-color-themePrimary; + display: inline-block; + font-size: $ms-font-size-s; + position: relative; + top: -8px; + text-align: center; + + .ms-Icon { + border-radius: 18px; + border: 1px solid $ms-color-themePrimary; + height: 18px; + line-height: 18px; + width: 18px; + font-size: $ms-font-size-s; + margin: 0; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + font-weight: $ms-font-weight-light; + font-size: $ms-font-size-xl; + position: relative; + top: -5px; + text-decoration: none; + } + + &:hover, + &:focus { + .ms-Button-icon { + .ms-Icon { + color: $ms-color-themeDark; + } + } + + .ms-Button-label { + color: $ms-color-themeDarker; + } + } + + &:active { + .ms-Button-icon { + .ms-Icon { + color: $ms-color-themePrimary; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + .ms-Icon { + color: $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 000000000..3e25f149f --- /dev/null +++ b/dist/components/Callout/Callout.hbs @@ -0,0 +1,26 @@ + + +
    +
    + {{#if props.closeIcon}} + + {{/if}} +
    +

    {{{props.title}}}

    +
    +
    +
    +

    {{props.subText}}

    +
    +
    + {{#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 000000000..7b4375442 --- /dev/null +++ b/dist/components/Callout/Callout.json @@ -0,0 +1,19 @@ +{ + "name": "Callout", + "class": "ms-Callout", + "wrapBranches": true, + "dependencies": [ + "Button", + "Label", + "Link", + "ContextualHost", + "CommandButton" + ], + "fileOrder": [ + "Callout.html", + "Callout.Close.html", + "Callout.ActionText.html", + "Callout.Oobe.html", + "Callout.Peek.html" + ] +} diff --git a/dist/components/Callout/Callout.scss b/dist/components/Callout/Callout.scss new file mode 100644 index 000000000..b2a2d77cf --- /dev/null +++ b/dist/components/Callout/Callout.scss @@ -0,0 +1,156 @@ +// 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 { + width: 288px; + font-family: $ms-font-family-base; + + &.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 000000000..6dbc3a5ec --- /dev/null +++ b/dist/components/CheckBox/CheckBox.hbs @@ -0,0 +1,10 @@ + +
    +
  • + {{props.label}} +
    • +
    \ No newline at end of file diff --git a/dist/components/CheckBox/CheckBox.json b/dist/components/CheckBox/CheckBox.json new file mode 100644 index 000000000..d76e45aad --- /dev/null +++ b/dist/components/CheckBox/CheckBox.json @@ -0,0 +1,9 @@ +{ + "name": "CheckBox", + "notes": "Checkboxes.", + "description": "A set of components that allows users to select one or many of a set number of choices using Checkboxes.", + "class": "ms-CheckBox", + "dependencies": [ + "Label" + ] +} \ No newline at end of file diff --git a/dist/components/CheckBox/CheckBox.scss b/dist/components/CheckBox/CheckBox.scss new file mode 100644 index 000000000..d5a50ed98 --- /dev/null +++ b/dist/components/CheckBox/CheckBox.scss @@ -0,0 +1,124 @@ +// 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 + + +// Unselected, radio button (default) +.ms-CheckBox { + @include ms-u-normalize; + 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; + } + + // disabled + & .ms-Choice-field.is-disabled { + pointer-events: none; + cursor: default; + + &:before { + background-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + } + + &:after { + border-color: $ms-color-neutralLight; + } + + .ms-Label { + color: $ms-color-neutralTertiary; + } + } + + & .ms-CheckBox-field.in-focus:after { + border-color: $ms-color-neutralSecondaryAlt; + } + + // The CheckBox radio button or checkbox + .ms-Choice-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + + // The actual styled CheckBox element - radio button by default + &:after { + content: ''; + display: inline-block; + border: 1px $ms-color-neutralTertiaryAlt solid; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; + } + + &:hover { + &:after { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } + + &.ms-Choice-type--checkbox { + &:after { + border-radius: 0; + } + + &.is-checked { + &:hover:before, + &:before { + @include ms-Icon; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: $ms-font-size-s-plus; + top: 3px; + left: 3px; + } + } + } + + // Radio button by default + &.is-checked { + // Circle indicating a checked radio button + &:before { + background-color: $ms-color-neutralSecondary; + border-color: $ms-color-neutralSecondary; + color: $ms-color-neutralSecondary; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; + } + + &:hover:before { + background-color: $ms-color-neutralDark; + color: $ms-color-neutralDark; + } + } + } +} diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs new file mode 100644 index 000000000..2ccfb861a --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs @@ -0,0 +1,11 @@ + +
    +
    + +
    + +
    \ 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 000000000..c3eb891b8 --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json @@ -0,0 +1,64 @@ +{ + "name": "ChoiceFieldGroup", + "notes": "Radio buttons and checkboxes.", + "description": "A set of components that allows users to select one or many of a set number of choices. This takes the form of a Radio button for selection of only 1 choice among many or Checkboxes for multiple selections.", + "class": "ms-ChoiceField", + "dependencies": [ + "Label", + "CheckBox" + ], + "props": { + "title": "Unselected", + "required": true, + "fields": [ + { + "component": "CheckBox", + "props": { + "label": "Option 1", + "modifier": "", + "name": "choicefieldgroup", + "id": "option1", + "checked": false, + "disabled": false, + "type": "radio" + } + }, + { + "component": "CheckBox", + "props": { + "label": "Option 2", + "modifier": "", + "name": "choicefieldgroup", + "id": "option2", + "checked": false, + "disabled": false, + "type": "radio" + } + }, + { + "component": "CheckBox", + "props": { + "label": "Option 3", + "modifier": "", + "name": "choicefieldgroup", + "id": "option3", + "checked": false, + "disabled": false, + "type": "radio" + } + }, + { + "component": "CheckBox", + "props": { + "label": "Option 4", + "modifier": "", + "name": "choicefieldgroup", + "id": "option4", + "checked": false, + "disabled": false, + "type": "radio" + } + } + ] + } +} diff --git a/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss new file mode 100644 index 000000000..0007e11af --- /dev/null +++ b/dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss @@ -0,0 +1,12 @@ +//== Component: Choicefield group +// +// Choice field groups contain multiple radio buttons or checkboxes +.ms-ChoiceFieldGroup { + margin-bottom: 4px; + font-family: $ms-font-family-base; + + .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 000000000..9bd68bb8f --- /dev/null +++ b/dist/components/CommandBar/CommandBar.hbs @@ -0,0 +1,23 @@ + +
    + {{#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 000000000..c6a4fd17c --- /dev/null +++ b/dist/components/CommandBar/CommandBar.json @@ -0,0 +1,19 @@ +{ + "name": "CommandBar", + "accessibilityNotes": + { + "role": "CommandBar", + "narration": "Read all the elements in the dialog on open.", + "keyboard": "Use the TAB key to navigate between elements in the dialog. To exit, use ESC. Trap focus in the dialog until the user dismisses it. The user needs to return to the previous element on close." + }, + "class": "ms-CommandBar", + "wrapBranches": true, + "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 000000000..feed2dea4 --- /dev/null +++ b/dist/components/CommandBar/CommandBar.scss @@ -0,0 +1,112 @@ +// 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-iconSize: 18px; +$CommandBar-sideAreaWidthsm: 128px; +$CommandBarItem-height: $CommandBar-height; + +@mixin highContrastBorder($color) { + border-left: 1px solid $color; + border-right: 1px solid $color; +} + +.ms-CommandBar { + background-color: $ms-color-themeLighterAlt; + height: $CommandBar-height; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; + font-family: $ms-font-family-base; + + &: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 { + margin-right: 8px; + display: inline-block; + vertical-align: top; + transition: margin-right $ms-duration2; + } + + .ms-SearchBox.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: $ms-zIndex-front; + } + + // Search is collapsed unless ativated and its only + // collapsed < L break points + + @media only screen and (min-width: $ms-screen-xl-min) { + .ms-SearchBox { + margin-right: 24px; + } + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + // padding-left: $SearchBox-widthLgCollapsed + 8; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; + 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-lg-min) { + padding-right: 12px; + } + + @media only screen and (min-width: $ms-screen-xl-min) { + padding-right: 16px; + } +} diff --git a/dist/components/CommandButton/CommandButton.hbs b/dist/components/CommandButton/CommandButton.hbs new file mode 100644 index 000000000..0aecd7707 --- /dev/null +++ b/dist/components/CommandButton/CommandButton.hbs @@ -0,0 +1,16 @@ + +
    + <{{props.tag}} class="ms-CommandButton-button" {{#if props.disabled}}tabIndex="-1"{{/if}}> + {{#if props.icon}} + {{/if}}{{props.label}}{{#if props.dropdownIcon}} + {{/if}} + + {{#if props.splitIcon}} + <{{props.tag}} class="ms-CommandButton-splitIcon"> + + + {{/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 000000000..eaea4bcf6 --- /dev/null +++ b/dist/components/CommandButton/CommandButton.json @@ -0,0 +1,182 @@ +{ + "name": "CommandButton", + "notes": "", + "description": "Buttons with extra functionality", + "template": "CommandButton.html", + "class": "ms-CommandButon", + "wrapBranches": true, + "dependencies": [ + "ContextualMenu", + "ContextualHost" + ], + "fileOrder": [ + "CommandButton.html", + "CommandButton.Disabled.html", + "CommandButton.NoLabel.html", + "CommandButton.NoLabelSplit.html", + "CommandButton.Dropdown.html", + "CommandButton.Split.html", + "CommandButton.Inline.html", + "CommandButton.ActionButton.html", + "CommandButton.TextOnly.html", + "CommandButton.Pivot.html" + ], + "props": { + "label": "Command", + "icon": "circleFill", + "tag": "button", + "iconColor": "themePrimary" + }, + "propsDropdown": { + "label": "New", + "icon": "circleFill", + "tag": "button", + "dropdownIcon": "chevronDown", + "iconColor": "themePrimary", + "dropdown": { + "component": "ContextualMenu", + "props": { + "state": "is-opened", + "modifier": "hasIcons", + "items": [ + { + "title": "Folder", + "state": "", + "icon": "folder" + }, + { + "modifier": "divider", + "title": "" + }, + { + "title": "Plain Text Document", + "icon": "document" + }, + { + "title": "A Dog", + "icon": "dogAlt" + }, + { + "title": "The Sun", + "state": "", + "icon": "sun" + }, + { + "title": "Money", + "icon": "money" + } + ] + } + } + }, + "propsSplit": { + "label": "Reply", + "icon": "circleFill", + "splitIcon": "chevronDown", + "iconColor": "themePrimary", + "tag": "button", + "dropdown": { + "component": "ContextualMenu", + "props": { + "state": "is-opened", + "items": [ + { + "title": "Reply", + "state": "" + }, + { + "title": "Reply all", + "state": "" + }, + { + "title": "Forward", + "state": "is-selected" + }, + { + "title": "Flag", + "state": "" + }, + { + "title": "Delete", + "state": "is-disabled" + } + ] + } + } + }, + "propsNoLabel": { + "icon": "circleFill", + "modifier": "noLabel", + "tag": "button", + "iconColor": "themePrimary" + }, + "propsNoLabelSplit": { + "icon": "circleFill", + "modifier": "noLabel", + "tag": "button", + "splitIcon": "chevronDown", + "iconColor": "themePrimary", + "dropdown": { + "component": "ContextualMenu", + "props": { + "state": "", + "items": [ + { + "title": "Reply", + "state": "" + }, + { + "title": "Reply all", + "state": "" + }, + { + "title": "Forward", + "state": "is-selected" + }, + { + "title": "Flag", + "state": "" + }, + { + "title": "Delete", + "state": "is-disabled" + } + ] + } + } + }, + "propsInline": { + "label": "Command", + "icon": "check", + "tag": "button", + "modifier": "inline", + "iconColor": "green" + }, + "propsDisabled": { + "label": "Command", + "icon": "circleFill", + "tag": "button", + "iconColor": "themePrimary", + "disabled": true + }, + "propsActionButton": { + "icon": "circleFill", + "modifier": "actionButton", + "tag": "button", + "iconColor": "themePrimary" + }, + "propsTextOnly": { + "modifier": "TextOnly", + "label": "Command", + "tag": "button" + }, + "propsPivot": { + "label": "New", + "icon": "circleFill", + "tag": "button", + "dropdownIcon": "chevronDown", + "iconColor": "themePrimary", + "state": "is-active", + "modifier": "pivot" + } +} diff --git a/dist/components/CommandButton/CommandButton.scss b/dist/components/CommandButton/CommandButton.scss new file mode 100644 index 000000000..9a5858374 --- /dev/null +++ b/dist/components/CommandButton/CommandButton.scss @@ -0,0 +1,247 @@ +// 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-padding: 8px; + +.ms-CommandButton { + display: inline-block; + position: relative; + font-family: $ms-font-family-base; + + &.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%; + transform: translateY(-50%); + left: 0; +} + +@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-family: $ms-font-family-base; + 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-themeLight; + + .ms-CommandButton-label { + color: $ms-color-neutralDark; + } + } + + &:focus::before { + @include ms-CommandBar-focusRectangle; + } + + &:focus { + outline: 0; + } +} + +.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; +} + +.ms-CommandButton-icon { + display: inline-block; + padding-right: 12px; + position: relative; + font-size: $ms-font-size-l; + min-width: 17px; + height: 100%; + + .ms-Icon { + @include ms-CommandButton-iconBase; + } +} + +.ms-CommandButton-label { + font-family: $ms-font-family-base; + 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 { + display: inline-block; + position: relative; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-l; + font-weight: $ms-font-weight-semilight; + min-width: 17px; + height: 100%; + + .ms-Icon { + @include ms-CommandButton-iconBase; + } + + &:focus::before { + @include ms-CommandBar-focusRectangle; + } +} + +.ms-CommandButton-splitIcon { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-l; + font-weight: $ms-font-weight-semilight; + margin-left: -4px; + width: 21px; + border: 0; + + .ms-Icon { + border-left: 1px solid $ms-color-neutralTertiaryAlt; + @include ms-CommandButton-iconBase; + } +} + +//= Modifier: No Label modifier +// +.ms-CommandButton.ms-CommandButton--noLabel { + .ms-CommandButton-icon { + padding-right: 0; + } + + .ms-CommandButton-label { + display: none; + } +} + +//= 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; + } +} diff --git a/dist/components/ContextualHost/ContextualHost.hbs b/dist/components/ContextualHost/ContextualHost.hbs new file mode 100644 index 000000000..500865be7 --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.hbs @@ -0,0 +1,11 @@ + + +
    +
    + {{#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 000000000..70c7ce8a0 --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.json @@ -0,0 +1,7 @@ +{ + "name": "ContextualHost", + "notes": "", + "description": "A overlay host for context menus and callouts", + "template": "ContextualHost.html", + "class": "ms-ContextualHost" +} \ No newline at end of file diff --git a/dist/components/ContextualHost/ContextualHost.scss b/dist/components/ContextualHost/ContextualHost.scss new file mode 100644 index 000000000..6a36dacbc --- /dev/null +++ b/dist/components/ContextualHost/ContextualHost.scss @@ -0,0 +1,139 @@ +.ms-ContextualHost { + z-index: $ms-zIndex-front; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + font-family: $ms-font-family-base; + 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 { + top: -10px; + } +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom { + .ms-ContextualHost-beak { + 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 000000000..099344eef --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.hbs @@ -0,0 +1,24 @@ + + \ 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 000000000..6694b392e --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.json @@ -0,0 +1,294 @@ +{ + "name": "ContextualMenu", + "notes": "", + "description": "A hidden menu containing actionable items pertaining to an object such as a link or piece of text that should be invoked by a click or hover event. This menu is used by other components including the {0} CommandBar {1}. Custom JavaScript will be needed to complete the functionality of this component.", + "dependencies": ["ContextualHost"], + "template": "ContextualMenu.html", + "class": "ms-ContextualMenu", + "wrapBranches": true, + "fileOrder": [ + "ContextualMenu.html", + "ContextualMenu.SubMenu.html", + "ContextualMenu.Dividers.html", + "ContextualMenu.Multiselect.html", + "ContextualMenu.Checkmarks.html", + "ContextualMenu.Icons.html" + ], + "props": { + "state": "is-open", + "items": [ + { + "title": "Animals", + "state": "" + }, + { + "title": "Books", + "state": "" + }, + { + "title": "Education", + "state": "is-selected" + }, + { + "title": "Music", + "state": "" + }, + { + "title": "Sports", + "state": "is-disabled" + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propsCheckmarks": { + "state": "is-open", + "modifier": "hasChecks", + "items": [ + { + "title": "Animals", + "state": "", + "icon": "check", + "iconSize": "s" + }, + { + "title": "Books", + "state": "" + }, + { + "modifier": "divider", + "title": "" + }, + { + "title": "Education", + "state": "is-selected" + }, + { + "title": "Music", + "state": "", + "icon": "check", + "iconSize": "s" + }, + { + "title": "Sports", + "state": "is-disabled" + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propsIcons": { + "state": "is-open", + "modifier": "hasIcons", + "items": [ + { + "title": "Upload file for photo", + "state": "", + "icon": "upload", + "iconSize": "l" + }, + { + "title": "Create folder", + "state": "", + "icon": "folder", + "iconSize": "l" + }, + { + "modifier": "divider", + "title": "" + }, + { + "title": "Reply", + "state": "is-selected", + "icon": "circleFill", + "iconSize": "l" + }, + { + "title": "Forward", + "state": "", + "icon": "circleFill", + "iconSize": "l" + }, + { + "title": "Archive", + "state": "is-disabled" + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propsSubMenu": { + "state": "is-open", + "items": [ + { + "title": "Animals", + "state": "" + }, + { + "title": "Books", + "state": "", + "subMenuItems": [ + { + "title": "Fiction", + "state": "" + }, + { + "title": "Humor", + "state": "" + }, + { + "title": "Magazines", + "state": "is-selected" + }, + { + "title": "Non-fiction", + "state": "" + }, + { + "title": "Textbooks", + "state": "" + } + ] + }, + { + "title": "Education", + "state": "is-selected" + }, + { + "title": "Music", + "state": "" + }, + { + "title": "Sports", + "state": "is-disabled" + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propsDividers": { + "state": "is-open", + "items": [ + { + "title": "Delete", + "state": "" + }, + { + "title": "Flag", + "state": "" + }, + { + "modifier": "divider", + "title": "" + }, + { + "title": "Important", + "state": "is-selected" + }, + { + "title": "Move", + "state": "" + }, + { + "modifier": "divider", + "title": "" + }, + { + "title": "Move", + "state": "is-disabled", + "subMenuItems": [ + { + "title": "Fiction", + "state": "" + }, + { + "title": "Humor", + "state": "" + }, + { + "title": "Magazines", + "state": "is-selected" + }, + { + "title": "Non-fiction", + "state": "" + }, + { + "title": "Textbooks", + "state": "" + } + ] + }, + { + "title": "Create Rule...", + "state": "is-selected" + }, + {}, + { + "title": "Verdana", + "state": "is-disabled" + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propsMultiselect": { + "state": "is-open", + "items": [ + { + "title": "SORT BY", + "state": "", + "modifier": "header" + }, + { + "title": "Date", + "state": "" + }, + { + "title": "Sender", + "state": "is-selected" + }, + { + "modifier": "divider", + "title": "" + }, + { + "title": "ORDER", + "state": "", + "modifier": "header" + }, + { + "title": "Newest on top", + "state": "is-disabled" + }, + { + "title": "Oldest on top", + "state": "is-disabled" + }, + { + "modifier": "divider", + "title": "" + }, + { + "title": "CONVERSATIONS", + "modifier": "header" + }, + { + "title": "On", + "state": "" + }, + { + "title": "Off", + "state": "" + } + ], + "contextualHostProps": { + "state": "is-open" + } + } +} diff --git a/dist/components/ContextualMenu/ContextualMenu.scss b/dist/components/ContextualMenu/ContextualMenu.scss new file mode 100644 index 000000000..a8ee504fd --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.scss @@ -0,0 +1,176 @@ +// 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-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + display: block; + min-width: 180px; + 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: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; + + &:focus { + outline: transparent; + } + + &:hover, + &:active, + &:focus { + background-color: $ms-color-neutralLight; + color: $ms-color-black; + } + + &:active, + &:focus { + border: 1px solid $ms-color-themePrimary; + } + + &.is-selected { + background-color: $ms-color-themeLight; + color: $ms-color-black; + font-weight: $ms-font-weight-semibold; + + &:hover { + background-color: $ms-color-themeLight; + } + } + + &.is-disabled { + color: $ms-color-neutralTertiary; + background-color: $ms-color-white; + + &: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; + margin: 4px 0; + 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: 40px; + line-height: 40px; + 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-neutralSecondary; + font-size: $ms-font-size-m-plus + 1; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + 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 30px; + } + + .ms-ContextualMenu-link { + padding: 0 30px; + + // Multi-select checkmark + &.is-selected { + background-color: $ms-color-white; + + // Checkmark + &:after { + @include ms-Icon; + color: $ms-color-neutralPrimary; + content: '\e041'; + font-size: $ms-font-size-s; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; + } + } + } +} + +.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 000000000..4771dc725 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.hbs @@ -0,0 +1,45 @@ + + + +
    +
    + + + +
    +
    + + +
    +
    + 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 000000000..1fda93fd1 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.json @@ -0,0 +1,5 @@ +{ + "name": "DatePicker", + "template": "DatePicker.html", + "class": "ms-DatePicker" +} diff --git a/dist/components/DatePicker/DatePicker.scss b/dist/components/DatePicker/DatePicker.scss new file mode 100644 index 000000000..fefe931be --- /dev/null +++ b/dist/components/DatePicker/DatePicker.scss @@ -0,0 +1,526 @@ +// 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-u-normalize; + margin-bottom: 17px; + font-family: $ms-font-family-base; + 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/Dialog/Dialog.hbs b/dist/components/Dialog/Dialog.hbs new file mode 100644 index 000000000..4058bcb61 --- /dev/null +++ b/dist/components/Dialog/Dialog.hbs @@ -0,0 +1,26 @@ + +
    + {{#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 000000000..fec63ae52 --- /dev/null +++ b/dist/components/Dialog/Dialog.json @@ -0,0 +1,248 @@ +{ + "name": "Dialog", + "template": "Dialog.html", + "notes": "", + "description": "A popup box component that animates in over an application. It is primarily used for confirmation tasks, light-weight creation/edit tasks, and simple management tasks. Dialog has several variants including closeable, large header, multiline button, and blocking. Blocking or modal dialogs do not allow for a light dismiss (clicking/tapping outside the dialog box) and should be used when a user's explicit answer is required for them to proceed such as confirming the deletion of data.", + "accessibilityNotes": + { + "role": "Dialog", + "narration": "Read all the elements in the dialog on open.", + "keyboard": "Use the TAB key to navigate between elements in the dialog. To exit, use ESC. Trap focus in the dialog until the user dismisses it. The user needs to return to the previous element on close." + }, + "class": "ms-Dialog", + "wrapBranches": true, + "fileOrder": [ + "Dialog.html", + "Dialog.Close.html", + "Dialog.LgHeader.html", + "Dialog.Multiline.html", + "Dialog.Blocking.html" + ], + "dependencies": [ + "Button", + "CheckBox", + "Overlay", + "ContextualHost" + ], + "props": { + "modifier": "sample", + "closeIcon": "x", + "title": "All emails together", + "subText": "Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.", + "components": [ + { + "component": "CheckBox", + "props": { + "label": "Option1", + "modifier": "", + "name": "checkboxa", + "id": "checkboxa", + "checked": false, + "disabled": false, + "type": "checkbox" + } + }, + { + "component": "CheckBox", + "props": { + "label": "Option2", + "modifier": "", + "name": "checkboxa", + "id": "checkboxa", + "checked": false, + "disabled": false, + "type": "checkbox" + } + } + ], + "actions": [ + { + "component": "Button", + "props": { + "label": "Save", + "tag": "button", + "modifier": "primary" + } + }, + { + "component": "Button", + "props": { + "label": "Cancel", + "tag": "button" + } + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propsBlocking": { + "modifier": "blocking", + "closeIcon": "x", + "title": "Unsaved changes", + "subText": "Are you sure you want to discard these changes?.", + "components": [ + { + "component": "CheckBox", + "props": { + "label": "Option1", + "modifier": "", + "name": "checkboxa", + "id": "checkboxa", + "checked": false, + "disabled": false, + "type": "checkbox" + } + }, + { + "component": "CheckBox", + "props": { + "label": "Option2", + "modifier": "", + "name": "checkboxa", + "id": "checkboxa", + "checked": false, + "disabled": false, + "type": "checkbox" + } + } + ], + "actions": [ + { + "component": "Button", + "props": { + "label": "Save", + "tag": "button", + "modifier": "primary" + } + }, + { + "component": "Button", + "props": { + "label": "Cancel", + "tag": "button" + } + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propsClose": { + "modifier": "close", + "closeIcon": "x", + "title": "All emails together", + "subtext": "Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.", + "components": [ + { + "component": "CheckBox", + "props": { + "label": "Option1", + "modifier": "", + "name": "checkboxa", + "id": "checkboxa", + "checked": false, + "disabled": false, + "type": "checkbox" + } + }, + { + "component": "CheckBox", + "props": { + "label": "Option2", + "modifier": "", + "name": "checkboxa", + "id": "checkboxa", + "checked": false, + "disabled": false, + "type": "checkbox" + } + } + ], + "actions": [ + { + "component": "Button", + "props": { + "label": "Save", + "tag": "button", + "modifier": "primary" + } + }, + { + "component": "Button", + "props": { + "label": "Cancel", + "tag": "button" + } + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propslgHeader": { + "modifier": "lgHeader", + "closeIcon": "x", + "title": "All emails together", + "subText": "Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.", + "actions": [ + { + "component": "Button", + "props": { + "label": "Save", + "tag": "button", + "modifier": "primary" + } + }, + { + "component": "Button", + "props": { + "label": "Cancel", + "tag": "button" + } + } + ], + "contextualHostProps": { + "state": "is-open" + } + }, + "propsMultiline": { + "modifier": "multiline", + "title": "All emails together", + "components": [ + { + "component": "Button", + "props": { + "label": "Create Account", + "description": "Description of this action this button takes", + "icon": "plus", + "modifier": "compound", + "tag": "button" + } + }, + { + "component": "Button", + "props": { + "label": "Create Account", + "description": "Description of this action this button takes", + "icon": "plus", + "modifier": "compound", + "tag": "button" + } + }, + { + "component": "Button", + "props": { + "label": "Create Account", + "description": "Description of this action this button takes", + "icon": "plus", + "modifier": "compound", + "tag": "button" + } + } + ], + "contextualHostProps": { + "state": "is-open" + } + } +} diff --git a/dist/components/Dialog/Dialog.scss b/dist/components/Dialog/Dialog.scss new file mode 100644 index 000000000..5fed1aa5a --- /dev/null +++ b/dist/components/Dialog/Dialog.scss @@ -0,0 +1,117 @@ +// 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 drop-shadow(0, 0, 5px, 0, .4); + background-color: $ms-color-white; + display: none; + font-family: $ms-font-family-base; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: $ms-zIndex-front; + position: absolute; + 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--x { + 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 000000000..a59473c43 --- /dev/null +++ b/dist/components/DialogHost/DialogHost.hbs @@ -0,0 +1,6 @@ +
    +
    + {{#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 000000000..3cd3bf461 --- /dev/null +++ b/dist/components/DialogHost/DialogHost.json @@ -0,0 +1,10 @@ +{ + "name": "DialogHost", + "notes": "", + "description": "A overlay host for context menus and callouts", + "template": "DialogHost.html", + "class": "ms-DialogHost", + "props": { + "arrowPosition": "arrowLeft" + } +} \ No newline at end of file diff --git a/dist/components/DialogHost/DialogHost.scss b/dist/components/DialogHost/DialogHost.scss new file mode 100644 index 000000000..20776a160 --- /dev/null +++ b/dist/components/DialogHost/DialogHost.scss @@ -0,0 +1,11 @@ +.ms-DialogHost { + @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; + font-family: $ms-font-family-base; +} diff --git a/dist/components/Dropdown/Dropdown.Disabled.html b/dist/components/Dropdown/Dropdown.Disabled.html new file mode 100644 index 000000000..27912fc9e --- /dev/null +++ b/dist/components/Dropdown/Dropdown.Disabled.html @@ -0,0 +1,3 @@ + + +{{> Dropdown props=propsDisabled}} \ No newline at end of file diff --git a/dist/components/Dropdown/Dropdown.hbs b/dist/components/Dropdown/Dropdown.hbs new file mode 100644 index 000000000..7d02165ee --- /dev/null +++ b/dist/components/Dropdown/Dropdown.hbs @@ -0,0 +1,11 @@ + + +
    + + + +
    \ 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 000000000..e12d3a487 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.json @@ -0,0 +1,55 @@ +{ + "name": "Dropdown", + "notes": "", + "description": "The styling for a dropdown component and its disabled variant. This dropdown takes current items in a real HTML dropdown and creates a shimmed version that can be styled and selected.", + "template": "Dropdown.html", + "class": "ms-Dropdown", + "dependencies": [ + "Label" + ], + "fileOrder": [ + "Dropdown.html", + "Dropdown.Disabled.html" + ], + "props": { + "label": "Dropdown label", + "items": [ + { + "name": "Choose a sound…" + }, + { + "name": "Dog barking" + }, + { + "name": "Wind blowing" + }, + { + "name": "Duck quacking" + }, + { + "name": "Cow mooing" + } + ] + }, + "propsDisabled": { + "label": "Dropdown label", + "state": "is-disabled", + "items": [ + { + "name": "Choose a sound…" + }, + { + "name": "Dog barking" + }, + { + "name": "Wind blowing" + }, + { + "name": "Duck quacking" + }, + { + "name": "Cow mooing" + } + ] + } +} diff --git a/dist/components/Dropdown/Dropdown.scss b/dist/components/Dropdown/Dropdown.scss new file mode 100644 index 000000000..6d9d60c98 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.scss @@ -0,0 +1,248 @@ +// 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-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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: 0 16px; + } + + &:before { + content: none; + border: 0; + } +} + +// Hide the original dropdown +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-l; + position: absolute; + right: 9px; + bottom: 5px; + 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; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: 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: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + + @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; + } + + // Shorten the first and last items to maintain baseline alignment. + &:first-child, + &:last-child { + height: 39px; + } + + &: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; + line-height: 40px; + } +} + +//== 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; + line-height: 40px; + + &: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 000000000..0850786b4 --- /dev/null +++ b/dist/components/FacePile/FacePile.hbs @@ -0,0 +1,15 @@ + + +
    + + + {{#each props.members}} + {{> (lookup . 'component') props}} + {{/each}} + + +
    \ 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 000000000..dec14b40f --- /dev/null +++ b/dist/components/FacePile/FacePile.json @@ -0,0 +1,374 @@ +{ + "name": "FacePile", + "notes": "", + "template": "FacePile.html", + "class": "ms-FacePile", + "dependencies": [ + "Overlay", + "Link", + "Panel", + "PeoplePicker", + "Persona", + "PersonaCard", + "Spinner", + "ContextualHost" + ], + "props": { + "members": [ + { + "component": "Persona", + "props": { + "initials": "AL", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Alton Lafferty", + "secondaryText": "Accountant", + "modifiers": [ + { + "name": "facePile" + } + ], + "personaCardProps": { + "personaProps": { + "initials": "AL", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Alton Lafferty", + "secondaryText": "Accountant", + "tertiaryText": "In a meeting", + "optionalText": "Available at 4:00pm", + "modifiers": [ + { + "name": "lg" + } + ] + }, + "orgChartProps": { + "groups": [ + { + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Russel Miller", + "secondaryText": "Sales" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Douglas Fielder", + "secondaryText": "Public Relations" + } + } + ] + }, + { + "title": "Manager", + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Grant Steel", + "secondaryText": "Sales" + } + } + ] + }, + { + "title": "Staff", + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Harvey Wallin", + "secondaryText": "Public Relations" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Marcus Lauer", + "secondaryText": "Technical Support" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Marcel Groce", + "secondaryText": "Delivery" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Jessica Fischer", + "secondaryText": "Marketing" + } + } + ] + } + ] + } + } + } + }, + { + "component": "Persona", + "props": { + "initials": "ML", + "initialsColor": "purple", + "primaryText": "Marcus Lauer", + "secondaryText": "Accountant", + "modifiers": [ + { + "name": "facePile" + } + ], + "personaCardProps": { + "personaProps": { + "initials": "ML", + "initialsColor": "purple", + "primaryText": "Marcus Lauer", + "secondaryText": "Accountant", + "tertiaryText": "In a meeting", + "optionalText": "Available at 4:00pm", + "modifiers": [ + { + "name": "lg" + } + ] + }, + "orgChartProps": { + "groups": [ + { + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Russel Miller", + "secondaryText": "Sales" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Douglas Fielder", + "secondaryText": "Public Relations" + } + } + ] + }, + { + "title": "Manager", + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Grant Steel", + "secondaryText": "Sales" + } + } + ] + }, + { + "title": "Staff", + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Harvey Wallin", + "secondaryText": "Public Relations" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Marcus Lauer", + "secondaryText": "Technical Support" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Marcel Groce", + "secondaryText": "Delivery" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Jessica Fischer", + "secondaryText": "Marketing" + } + } + ] + } + ] + } + } + } + }, + { + "component": "Persona", + "props": { + "initials": "DF", + "initialsColor": "green", + "primaryText": "Alton Lafferty", + "secondaryText": "Accountant", + "modifiers": [ + { + "name": "facePile" + } + ], + "personaCardProps": { + "personaProps": { + "initials": "AL", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Alton Lafferty", + "secondaryText": "Accountant", + "tertiaryText": "In a meeting", + "optionalText": "Available at 4:00pm", + "modifiers": [ + { + "name": "lg" + } + ] + }, + "orgChartProps": { + "groups": [ + { + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Russel Miller", + "secondaryText": "Sales" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Douglas Fielder", + "secondaryText": "Public Relations" + } + } + ] + }, + { + "title": "Manager", + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Grant Steel", + "secondaryText": "Sales" + } + } + ] + }, + { + "title": "Staff", + "personas": [ + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Harvey Wallin", + "secondaryText": "Public Relations" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Marcus Lauer", + "secondaryText": "Technical Support" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Marcel Groce", + "secondaryText": "Delivery" + } + }, + { + "component": "Persona", + "props": { + "initials": "RM", + "initialsColor": "blue", + "image": "../persona/Persona.Person2.png", + "primaryText": "Jessica Fischer", + "secondaryText": "Marketing" + } + } + ] + } + ] + } + } + } + } + ] + } +} diff --git a/dist/components/FacePile/FacePile.scss b/dist/components/FacePile/FacePile.scss new file mode 100644 index 000000000..0587b3642 --- /dev/null +++ b/dist/components/FacePile/FacePile.scss @@ -0,0 +1,103 @@ +// 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 { + position: relative; + height: 32px; + width: auto; + font-family: $ms-font-family-base; + + .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 000000000..bb965814d --- /dev/null +++ b/dist/components/Label/Label.hbs @@ -0,0 +1,2 @@ + + diff --git a/dist/components/Label/Label.json b/dist/components/Label/Label.json new file mode 100644 index 000000000..970b0ee91 --- /dev/null +++ b/dist/components/Label/Label.json @@ -0,0 +1,24 @@ +{ + "name": "Label", + "notes": "A standard form label.", + "descripton": "Styling for form labels including the required and disabled variants.", + "template": "Label.html", + "class": "ms-Label", + "wrapBranches": true, + "fileOrder": [ + "Label.html", + "Label.Disabled.html", + "Label.Required.html" + ], + "props": { + "label": "Name" + }, + "propsDisabled": { + "state": "is-disabled", + "label": "Name" + }, + "propsRequired": { + "state": "is-required", + "label": "Name" + } +} diff --git a/dist/components/Label/Label.scss b/dist/components/Label/Label.scss new file mode 100644 index 000000000..1ab79bc1a --- /dev/null +++ b/dist/components/Label/Label.scss @@ -0,0 +1,36 @@ +// 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-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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 000000000..c1e11a82f --- /dev/null +++ b/dist/components/Link/Link.hbs @@ -0,0 +1,7 @@ + + +{{props.label}} + diff --git a/dist/components/Link/Link.json b/dist/components/Link/Link.json new file mode 100644 index 000000000..4c87de10a --- /dev/null +++ b/dist/components/Link/Link.json @@ -0,0 +1,13 @@ +{ + "name": "Link", + "notes": "", + "description": "A component containing styles for links including two variants.", + "template": "Link.html", + "class": "ms-Link", + "props": { + "label": "Example Link", + "href": "", + "title": "", + "tabIndex": "" + } +} diff --git a/dist/components/Link/Link.scss b/dist/components/Link/Link.scss new file mode 100644 index 000000000..d75c8291a --- /dev/null +++ b/dist/components/Link/Link.scss @@ -0,0 +1,38 @@ +// 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 { + font-family: $ms-font-family-base; + 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; + } + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackLink; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteLink; + } +} + +.ms-Link { + @include ms-Link; +} diff --git a/dist/components/List/List.hbs b/dist/components/List/List.hbs new file mode 100644 index 000000000..3b104a7d1 --- /dev/null +++ b/dist/components/List/List.hbs @@ -0,0 +1,7 @@ + + + diff --git a/dist/components/List/List.json b/dist/components/List/List.json new file mode 100644 index 000000000..094fa0f38 --- /dev/null +++ b/dist/components/List/List.json @@ -0,0 +1,200 @@ +{ + "name": "List", + "notes": "", + "description": "A component for displaying lists that need actions, icons, and additional descriptive information. There are two variants for List including the Default List and Grid List. Lists contain {0} ListItems {1} that have their own set of variants.", + "template": "List.html", + "class": "ms-List", + "wrapBranches": true, + "fileOrder": [ + "List.html", + "List.Grid.html" + ], + "dependencies": [ + "ListItem" + ], + "props": { + "listItems": [ + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + } + ] + }, + "propsGrid": { + "modifier": "grid", + "listItems": [ + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + }, + { + "name": "ListItem", + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + } + } + ] + } +} diff --git a/dist/components/List/List.scss b/dist/components/List/List.scss new file mode 100644 index 000000000..4ca2b4e9c --- /dev/null +++ b/dist/components/List/List.scss @@ -0,0 +1,15 @@ +// 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-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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 000000000..94e7f29ee --- /dev/null +++ b/dist/components/ListItem/ListItem.hbs @@ -0,0 +1,19 @@ + + +
  • + {{#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 000000000..4300c229e --- /dev/null +++ b/dist/components/ListItem/ListItem.json @@ -0,0 +1,75 @@ +{ + "name": "ListItem", + "notes": "", + "description": "List item variants that are placed inside of the {0} List {1} component. List variants support several states including Selectable, Selected, Unseen, Picture, Picture, and Document.", + "template": "ListItem.html", + "class": "ms-ListItem", + "fileOrder": [ + "ListItem.html", + "ListItem.Selectable.html", + "ListItem.Selected.html", + "ListItem.Unseen.html", + "ListItem.Unread.html", + "ListItem.Image.html", + "ListItem.Document.html" + ], + "dependencies": [ + "List" + ], + "props": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "actions": [{}] + }, + "propsDocument": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "metaText": "2:42p", + "modifier": "document", + "listIcon": "ppt", + "actions": [{}] + }, + "propsImage": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "image": true, + "modifier": "image", + "actions": [{}] + }, + "propsSelectable": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-selectable", + "actions": [{}] + }, + "propsSelected": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-selected is-selectable", + "actions": [{}] + }, + "propsUnread": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unread is-selectable", + "actions": [{}] + }, + "propsUnseen": { + "primaryText": "Alton Lafferty", + "secondaryText": "Meeting notes", + "tertiaryText": "Today we discussed the importance of a, b, and c in regards to d.", + "metaText": "2:42p", + "state": "is-unseen is-selectable", + "actions": [{}] + } +} diff --git a/dist/components/ListItem/ListItem.scss b/dist/components/ListItem/ListItem.scss new file mode 100644 index 000000000..3c4e3509d --- /dev/null +++ b/dist/components/ListItem/ListItem.scss @@ -0,0 +1,235 @@ +// 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-u-normalize; + @include ms-u-clearfix; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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: 12px; + left: 6px; + 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: '\e041'; + font-size: $ms-font-size-m-plus; + color: $ms-color-neutralSecondaryAlt; + position: absolute; + top: 12px; + left: 6px; + } + + &: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 000000000..cded1ad69 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.hbs @@ -0,0 +1,20 @@ + + +
    +
    +
    +
    + {{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 000000000..03fc1f86b --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.json @@ -0,0 +1,21 @@ +{ + "name": "MessageBanner", + "notes": "A component for displaying errors", + "description:": "A component for displaying errors to a user via a top-of-the-screen message surface.", + "template": "MessageBanner.html", + "class": "ms-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 000000000..e8b3fb675 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.scss @@ -0,0 +1,127 @@ +// 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 { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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 000000000..7297028be --- /dev/null +++ b/dist/components/MessageBar/MessageBar.hbs @@ -0,0 +1,13 @@ + + +
    +
    +
    + +
    +
    + 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 000000000..33ca5ace8 --- /dev/null +++ b/dist/components/MessageBar/MessageBar.json @@ -0,0 +1,16 @@ +{ + "name": "MessageBar", + "template": "MessageBar.html", + "class": "ms-MessageBar", + "dependencies": [ + "Link" + ], + "fileOrder": [ + "MessageBar.html", + "MessageBar.Warning.html", + "MessageBar.SevereWarning.html", + "MessageBar.Error.html", + "MessageBar.Success.html", + "MessageBar.Remove.html" + ] +} diff --git a/dist/components/MessageBar/MessageBar.scss b/dist/components/MessageBar/MessageBar.scss new file mode 100644 index 000000000..b27f5c580 --- /dev/null +++ b/dist/components/MessageBar/MessageBar.scss @@ -0,0 +1,101 @@ +// 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 { + padding: $MessageBar-padding; + display: table; + @include ms-bgColor-info; +} + +.ms-MessageBar-icon, +.ms-MessageBar-text { + display: table-cell; + vertical-align: top; +} + +.ms-MessageBar-icon { + padding-right: $MessageBar-padding; + font-size: 16px; + @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: Remove message +// +.ms-MessageBar.ms-MessageBar--remove { + @include ms-bgColor-error; + + .ms-MessageBar-icon { + @include ms-fontColor-error; + } + + .ms-Icon { + font-size: 8px; + margin-left: 3px; + } +} + + +//== Modifier: Success message +// +.ms-MessageBar.ms-MessageBar--success { + @include ms-bgColor-success; + + .ms-MessageBar-icon { + @include ms-fontColor-green; + } + + .ms-Icon { + font-size: $ms-font-size-s; + top: 3px; + + &:before { + margin-left: 1px; + } + + &:after { + font-size: 8px; + margin-left: 3px; + top: 1px; + } + } +} diff --git a/dist/components/OrgChart/OrgChart.hbs b/dist/components/OrgChart/OrgChart.hbs new file mode 100644 index 000000000..fb020d8ca --- /dev/null +++ b/dist/components/OrgChart/OrgChart.hbs @@ -0,0 +1,18 @@ + + +
    + {{#each props.groups}} +
    + {{#if title}}
    {{title}}
    {{/if}} + +
    + {{/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 000000000..6e5c2b035 --- /dev/null +++ b/dist/components/OrgChart/OrgChart.json @@ -0,0 +1,9 @@ +{ + "name": "OrgChart", + "template": "OrgChart.html", + "class": "ms-OrgChart", + "wrapBranches": true, + "dependencies": [ + "Persona" + ] +} diff --git a/dist/components/OrgChart/OrgChart.scss b/dist/components/OrgChart/OrgChart.scss new file mode 100644 index 000000000..54b723a73 --- /dev/null +++ b/dist/components/OrgChart/OrgChart.scss @@ -0,0 +1,45 @@ +// 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-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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 000000000..80d4bc7e6 --- /dev/null +++ b/dist/components/Overlay/Overlay.hbs @@ -0,0 +1,3 @@ + + +
    diff --git a/dist/components/Overlay/Overlay.json b/dist/components/Overlay/Overlay.json new file mode 100644 index 000000000..2028d336f --- /dev/null +++ b/dist/components/Overlay/Overlay.json @@ -0,0 +1,5 @@ +{ + "name": "Overlay", + "template": "Overlay.html", + "class": "ms-Overlay" +} diff --git a/dist/components/Overlay/Overlay.scss b/dist/components/Overlay/Overlay.scss new file mode 100644 index 000000000..3bfc77faf --- /dev/null +++ b/dist/components/Overlay/Overlay.scss @@ -0,0 +1,29 @@ +// 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 { + background-color: $ms-color-whiteTranslucent40; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: $ms-zIndex-back; + font-family: $ms-font-family-base; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +//== Modifier: Dark overlay +// +.ms-Overlay--dark { + background-color: $ms-color-blackTranslucent40; +} diff --git a/dist/components/Panel/Panel.hbs b/dist/components/Panel/Panel.hbs new file mode 100644 index 000000000..5dd3624ca --- /dev/null +++ b/dist/components/Panel/Panel.hbs @@ -0,0 +1,17 @@ + +
    + {{#if props.commandBarProps}} +
    + {{> CommandBar props=props.commandBarProps}} +
    + {{/if}} + +
    +

    {{props.headerText}}

    +
    + {{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 000000000..608c9e678 --- /dev/null +++ b/dist/components/Panel/Panel.json @@ -0,0 +1,5 @@ +{ + "name": "Panel", + "template": "Panel.html", + "class": "ms-Panel" +} diff --git a/dist/components/Panel/Panel.scss b/dist/components/Panel/Panel.scss new file mode 100644 index 000000000..4920380d2 --- /dev/null +++ b/dist/components/Panel/Panel.scss @@ -0,0 +1,239 @@ +// 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 + +$Panel-width-lightDismiss: 272px; + +$Panel-width-sm: 272px; +$Panel-width-md: 340px; +$Panel-width-lg: 644px; +$Panel-width-xl: 940px; +$Panel-width-xxl: 1192px; + +$Panel-margin-md: 48px; +$Panel-margin-lg: 428px; +$Panel-margin-xl: 176px; +$CommandBarHeight: 40px; +$CommandButtonLightBlue: #B5D8F4; +$CommandButtonLighterBlue: #D7EAF9; +$CommandButtonDarkBlue: #07288B; +$CommandButtonBlue: #2488D8; + +// The panel itself, where the content goes. +.ms-Panel { + background-color: $ms-color-white; + width: 100%; + max-width: $Panel-width-sm; + @include drop-shadow(-30px, 0, 30px, -30px, .2); + position: absolute; + top: 0; + bottom: 0; + right: 0; + z-index: $ms-zIndex-front; + font-family: $ms-font-family-base; + display: none; + + // Animations -- Default (anchored right) + &.animate-in { + @include ms-u-slideLeftIn40; + } + + &.animate-out { + @include ms-u-slideRightOut40; + } + + &.is-open { + display: block; + } +} + +//== Modifier: Medium panel (anchored right, fixed width) +// +.ms-Panel.ms-Panel--md { + max-width: $Panel-width-md; +} + +//== Modifier: Large panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--lg { + max-width: $Panel-width-lg; +} + +//== Modifier: XLarge panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--xl { + max-width: $Panel-width-xl; +} + +//== Modifier: XLarge panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--xxl { + max-width: $Panel-width-xxl; +} + +//== Modifier: Left anchored panel (anchored left, fixed width) +// Note: This panel variant should only be used for left nav. +.ms-PanelHost.ms-PanelHost--left { + right: auto; + left: 0; + border-left: 1px solid $ms-color-neutralLight; + border-right: 1px solid $ms-color-neutralLight; + @include drop-shadow(-30px, 0, 30px, 30px, .2); + + // Commands and content inner are not displayed + // Note: Replace with a leftnav menu. + .ms-Panel-commands, + .ms-Panel-contentInner { + display: none; + } + + // Animations - Left panel (anchored left) + &.ms-Panel-animateIn { + .ms-Panel-main { + @include ms-u-slideRightIn40; + } + + .ms-Overlay { + @include ms-u-fadeIn200; + } + } + + &.ms-Panel--left.ms-Panel-animateOut { + .ms-Panel-main { + @include ms-u-slideLeftOut40; + } + + .ms-Overlay { + @include ms-u-fadeOut200; + } + } +} + +// The close button in the top right (x) +.ms-Panel-closeButton { + @include button-reset; + position: absolute; + right: 8px; + top: 0; + height: $CommandBarHeight; + width: $CommandBarHeight; + line-height: $CommandBarHeight; + outline: 0; + padding: 0; + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-m; + + &:hover { + color: $ms-color-neutralPrimary; + } +} + +// Scrollable content area +.ms-Panel-contentInner { + margin-top: $CommandBarHeight; + padding: 0 16px 20px; + overflow-y: auto; + + @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; + } +} + +//== Modifier: Deprecated Animated commandbar +// +.ms-Panel.ms-Panel--animatedCommands { + .ms-CommandBar { + @media (min-width: $ms-screen-md-min) { + display: block; + } + } + + .ms-CommandBarItem { + user-select: none; + + &:hover { + background-color: $CommandButtonLighterBlue; + } + + &:active { + background-color: $CommandButtonLightBlue; + + .ms-CommandBarItem-icon { + color: $CommandButtonDarkBlue;; + } + + .ms-CommandBarItem-commandText { + color: $ms-color-black; + } + } + } + + .ms-CommandBarItem:first-child { + background-color: $ms-color-themePrimary; + box-shadow: inset 0 1px 0 0 $CommandButtonBlue; + + .ms-CommandBarItem-icon { + color: $ms-color-white; + } + + .ms-CommandBarItem-commandText { + color: $ms-color-white; + } + + .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; + } + + &:hover { + background-color: $ms-color-themeDark; + box-shadow: none; + + .ms-CommandBarItem-icon { + color: $ms-color-white; + } + + .ms-CommandBarItem-commandText { + color: $ms-color-white; + } + } + } + + &.is-open { + .ms-CommandBar { + @include ms-u-slideDownIn20; + animation-delay: 250ms; + } + + @media (min-width: $ms-screen-md-min) { + // Animate CommandBar in + .ms-CommandBar { + animation-delay: 500ms; + } + } + } +} diff --git a/dist/components/PanelHost/PanelHost.hbs b/dist/components/PanelHost/PanelHost.hbs new file mode 100644 index 000000000..610aec6db --- /dev/null +++ b/dist/components/PanelHost/PanelHost.hbs @@ -0,0 +1,5 @@ +
    +
    +
    + {{> 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 000000000..b7c3342c8 --- /dev/null +++ b/dist/components/PanelHost/PanelHost.json @@ -0,0 +1,18 @@ +{ + "name": "PanelHost", + "notes": "", + "description": "Containers used in 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.", + "template": "PanelHost.html", + "class": "ms-PanelHost", + "wrapBranches": true, + "dependencies": [ + "Overlay" + ], + "fileOrder": [ + "PanelHost.html" + ], + "props": { + "headerText": "PanelHost", + "content": "Content goes here" + } +} \ No newline at end of file diff --git a/dist/components/PanelHost/PanelHost.scss b/dist/components/PanelHost/PanelHost.scss new file mode 100644 index 000000000..27960552e --- /dev/null +++ b/dist/components/PanelHost/PanelHost.scss @@ -0,0 +1,96 @@ +$Panel-width-lightDismiss: 272px; + +// The panel covers the entire screen. +.ms-PanelHost { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + pointer-events: none; + z-index: $ms-zIndex-front; + font-family: $ms-font-family-base; +} + +//== State: When the panel is open. +// +.ms-Panel.is-open { + display: block; + opacity: 1; + pointer-events: auto; + + .ms-Overlay { + display: block; + pointer-events: auto; + + @media screen and (-ms-high-contrast: active) { + opacity: 0; + } + } + + &.ms-Panel-animateIn { + @include ms-u-fadeIn100; + } + + &.ms-Panel-animateOut { + @include ms-u-fadeOut100; + + .ms-Overlay { + display: none; + } + } + + // Medium screens and up + @media (min-width: $ms-screen-md-min) { + // Animations -- Default (anchored right) + &.ms-Panel-animateIn { + @include ms-u-slideLeftIn40; + + .ms-Overlay { + @include ms-u-fadeIn200; + } + } + + &.ms-Panel-animateOut { + @include ms-u-slideRightOut40; + + .ms-Overlay { + @include ms-u-fadeOut200; + } + } + + // Animations - Left panel (anchored left) + &.ms-Panel--left.ms-Panel-animateIn { + @include ms-u-slideRightIn40; + + .ms-Overlay { + @include ms-u-fadeIn200; + } + } + + &.ms-Panel--left.ms-Panel-animateOut { + @include ms-u-slideLeftOut40; + + .ms-Overlay { + @include ms-u-fadeOut200; + } + } + + // Animate overlay to full opacity, activate pointer events + .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } + + &.ms-Panel-animateIn, + &.ms-Panel--left.ms-Panel-animateIn { + .ms-Overlay { + @media screen and (-ms-high-contrast: active) { + opacity: 0; + animation-name: none; + } + } + } + } +} diff --git a/dist/components/PeoplePicker/PeoplePicker.hbs b/dist/components/PeoplePicker/PeoplePicker.hbs new file mode 100644 index 000000000..bfdf384e2 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.hbs @@ -0,0 +1,36 @@ + + +
    +
    + {{> TextField props=props.textFieldProps}} +
    +
    + {{#each thisProps.groups}} +
    +
    + {{title}} +
    + {{#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 000000000..890d4e4af --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.json @@ -0,0 +1,20 @@ +{ + "name": "PeoplePicker", + "notes": "", + "description": "A component used for searching for and picking a person (or people). There are several variants and modifications to the dropdown list of {0} Personas {1} that allow for removing selected people, compact visualizations, a disconnected state, and a 'tokenized' list of selected users.", + "template": "PeoplePicker.html", + "class": "ms-PeoplePicker", + "dependencies": [ + "Label", + "Persona", + "PersonaCard", + "Spinner", + "TextField", + "ContextualHost", + "OrgChart" + ], + "wrapBranches": true, + "fileOrder": [ + "PeoplePicker.html" + ] +} diff --git a/dist/components/PeoplePicker/PeoplePicker.scss b/dist/components/PeoplePicker/PeoplePicker.scss new file mode 100644 index 000000000..95bee8900 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.scss @@ -0,0 +1,601 @@ +// 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: 42px; +$ms-Persona-leftPadding: 16px; + +.ms-PeoplePicker { + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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: 2px solid $ms-color-themePrimary; + + .ms-TextField { + border: 0; + margin-bottom: 0; + + .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; + } +} + +// 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; + + &:hover { + background-color: $ms-color-neutralLight; + } + + .ms-PeoplePicker-resultAction { + &:hover { + background-color: $ms-color-neutralTertiaryAlt; + outline: 1px solid transparent; + } + } + + &.is-selected { + background-color: $ms-color-themeLight; + + .ms-PeoplePicker-resultAction { + &:hover { + 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: 30px; + text-align: center; + + .ms-Icon { + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-m-plus; + } + + &:active { + background-color: $ms-color-themeTertiary; + } +} + +// 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 an area to trigger additional searches +.ms-PeoplePicker-searchMore { + border-top: 1px solid $ms-color-neutralLight; + height: 69px; + position: relative; + overflow: hidden; + + .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; + + .ms-Spinner-circle { + background-color: $ms-color-themePrimary; + } + } +} + +// Searching state +.ms-PeoplePicker-searchMore.is-searching { + + .ms-Spinner { + display: block; + } + + .ms-PeoplePicker-searchMoreIcon { + .ms-Icon { + display: none; + } + } + + .ms-PeoplePicker-searchMorePrimary { + color: $ms-color-themePrimary; + } + + &:hover { + background-color: transparent; + cursor: default; + } +} + +.ms-PeoplePicker-searchMoreBtn { + @include button-reset; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; + + &:hover { + background-color: $ms-color-neutralLight; + cursor: pointer; + } + + // TODO: Works in Chrome, but not working in IE + &:focus, + &:active { + background-color: $ms-color-themeLight; + } +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +// Default search icon +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; + + .ms-Icon { + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m + 2; + position: absolute; + text-align: center; + top: 27px; + width: 100%; + } +} + +// Primary text +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-weight: $ms-font-weight-regular; +} + +// Secondary text +.ms-PeoplePicker-searchMoreSecondary { + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xs; + color: $ms-color-neutralSecondary; +} + +// The search more area may be in a disconnected state. +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected { + + // Do nothing on hover + &:hover { + background-color: inherit; + cursor: default; + } + + // Alert icon + .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: $ms-color-neutralSecondary; + } + + // Primary text + .ms-PeoplePicker-searchMorePrimary { + color: $ms-color-neutralSecondary; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-xs; + line-height: 20px; + position: relative; + top: 12px; + } +} + +// Compact size +.ms-PeoplePicker.ms-PeoplePicker--compact { + + // Limit to 5 results before scrolling. + .ms-PeoplePicker-resultGroups { + max-height: 209px; + } + + .ms-PeoplePicker-resultAction { + height: 32px; + + .ms-Icon { + margin-top: -8px; + } + } + + .ms-PeoplePicker-searchMore { + height: 49px; + + .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; + } + + } + + .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: $ms-Persona-leftPadding; + } + + .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; + + .ms-Icon { + font-size: $ms-font-size-l; + top: 0; + margin-top: 0; + line-height: 50px; + } + } + + .ms-PeoplePicker-searchMorePrimary { + font-size: $ms-font-size-s; + line-height: 45px; + } + + .ms-PeoplePicker-searchMoreSecondary { + display: none; + } +} + + +//== Modifier: FacePile and Members list +// +.ms-PeoplePicker.ms-PeoplePicker--FacePile, +.ms-PeoplePicker.ms-PeoplePicker--membersList { + .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; + } + + .ms-PeoplePicker-searchField { + height: 28px; + } + + .ms-Persona { + cursor: pointer; + } +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; + + &.is-active { + display: block; + } +} + +.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-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid $ms-color-neutralLight; + } + + // Personas are size xs on mobile, sm on md screens and above + .ms-PeoplePicker-results, + .ms-PeoplePicker-selectedPeople { + @media (max-width: $ms-screen-sm-max) { + .ms-Persona-imageArea, + .ms-Persona-image { + width: 32px; + height: 32px; + } + + .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-PersonaCard { + display: none; + position: absolute; + height: 200px; + + &.is-active { + display: block; + } + } + + .ms-Persona.ms-Persona--selectable { + padding: 0; + } + + .ms-PeoplePicker-searchMore { + display: none; + + &.is-active { + display: block; + } + } + + .ms-PeoplePicker-searchMore, + .ms-PeoplePicker-searchMoreBtn, + .ms-PeoplePicker-searchMoreIcon { + height: 48px; + } + + .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; + } + + .ms-PeoplePicker-searchMoreIcon { + width: 48px; + } + + .ms-PeoplePicker-searchMorePrimary { + font-size: $ms-font-size-s; + line-height: 48px; + } + + .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; + } + + .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; + } +} + +.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 000000000..f6bb953bc --- /dev/null +++ b/dist/components/Persona/Persona.hbs @@ -0,0 +1,44 @@ + + +
    +
    + {{#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 000000000..3df4c67d1 --- /dev/null +++ b/dist/components/Persona/Persona.json @@ -0,0 +1,8 @@ +{ + "name": "Persona", + "class": "ms-Persona", + "dependencies": [ + "PersonaCard", + "ContextualHost" + ] +} diff --git a/dist/components/Persona/Persona.scss b/dist/components/Persona/Persona.scss new file mode 100644 index 000000000..d3a69b382 --- /dev/null +++ b/dist/components/Persona/Persona.scss @@ -0,0 +1,710 @@ +// 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 + + +//= Colors used in the initials color block +$ms-color-initials-lightBlue: #6BA5E7; +$ms-color-initials-blue: #2D89EF; +$ms-color-initials-darkBlue: #2B5797; +$ms-color-initials-teal: #00ABA9; +$ms-color-initials-lightGreen: #99B433; +$ms-color-initials-green: #00A300; +$ms-color-initials-darkGreen: #1E7145; +$ms-color-initials-lightPink: #E773BD; +$ms-color-initials-pink: #FF0097; +$ms-color-initials-magenta: #7E3878; +$ms-color-initials-purple: #603CBA; +$ms-color-initials-black: #1D1D1D; +$ms-color-initials-orange: #DA532C; +$ms-color-initials-red: #EE1111; +$ms-color-initials-darkRed: #B91D47; + +// 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-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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--lightBlue { + background-color: $ms-color-initials-lightBlue; + } + + &.ms-Persona-initials--blue { + background-color: $ms-color-initials-blue; + } + + &.ms-Persona-initials--darkBlue { + background-color: $ms-color-initials-darkBlue; + } + + &.ms-Persona-initials--teal { + background-color: $ms-color-initials-teal; + } + + &.ms-Persona-initials--lightGreen { + background-color: $ms-color-initials-lightGreen; + } + + &.ms-Persona-initials--green { + background-color: $ms-color-initials-green; + } + + &.ms-Persona-initials--darkGreen { + background-color: $ms-color-initials-darkGreen; + } + + &.ms-Persona-initials--lightPink { + background-color: $ms-color-initials-lightPink; + } + + &.ms-Persona-initials--pink { + background-color: $ms-color-initials-pink; + } + + &.ms-Persona-initials--magenta { + background-color: $ms-color-initials-magenta; + } + + &.ms-Persona-initials--purple { + background-color: $ms-color-initials-purple; + } + + &.ms-Persona-initials--black { + background-color: $ms-color-initials-black; + } + + &.ms-Persona-initials--orange { + background-color: $ms-color-initials-orange; + } + + &.ms-Persona-initials--red { + background-color: $ms-color-initials-red; + } + + &.ms-Persona-initials--darkRed { + background-color: $ms-color-initials-darkRed; + } +} + +.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; +} + +.ms-Persona-presenceIcon { + color: $ms-color-white; + font-size: 9px; + 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; + } +} + + +//== 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; + } +} + + +//== 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; + } +} + +//== 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-block; + width: auto; + background-color: $ms-color-neutralLighter; + border-radius: 20px; + margin-bottom: 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: 30px; + } + + .ms-Persona-initials { + position: relative; + } +} diff --git a/dist/components/PersonaCard/PersonaCard.hbs b/dist/components/PersonaCard/PersonaCard.hbs new file mode 100644 index 000000000..37ba1983d --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.hbs @@ -0,0 +1,36 @@ + +
    +
    + {{> Persona props=props.personaProps}} +
    + +
    +
    +
    Personal: alton.lafferty@outlook.com
    +
    Work: altonlafferty@contoso.com
    +
    +
    +
    Lync: Start Lync call
    +
    +
    +
    +
    Details
    +
    Personal: 555.206.2443
    +
    Work: 555.929.8240
    +
    +
    +
    Skype: Start Skype call
    +
    + +
    + {{> OrgChart props=props.orgChartProps}} +
    +
    +
    diff --git a/dist/components/PersonaCard/PersonaCard.json b/dist/components/PersonaCard/PersonaCard.json new file mode 100644 index 000000000..277e92511 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.json @@ -0,0 +1,5 @@ +{ + "name": "PersonaCard", + "template": "PersonaCard.html", + "class": "ms-PersonaCard" +} diff --git a/dist/components/PersonaCard/PersonaCard.scss b/dist/components/PersonaCard/PersonaCard.scss new file mode 100644 index 000000000..1625db942 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.scss @@ -0,0 +1,198 @@ +// 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-u-slideUpIn10; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + 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; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid $ms-color-neutralTertiaryAlt; + background-color: $ms-color-white; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: $ms-font-size-l; + 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: 15px; + } + } +} + +.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: 0; +} + +.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 { + content: '\e088'; + } + } +} + +.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-font-size-m-plus; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; + + &:after { + @include ms-Icon; + content: '\e087'; + } +} + +.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 000000000..f54c67219 --- /dev/null +++ b/dist/components/Pivot/Pivot.hbs @@ -0,0 +1,19 @@ + + +
    + + {{#each props.links}} +
    + {{content}} +
    + {{/each}} +
    diff --git a/dist/components/Pivot/Pivot.json b/dist/components/Pivot/Pivot.json new file mode 100644 index 000000000..80ef06142 --- /dev/null +++ b/dist/components/Pivot/Pivot.json @@ -0,0 +1,5 @@ +{ + "name": "Pivot", + "template": "Pivot.html", + "class": "ms-Pivot" +} diff --git a/dist/components/Pivot/Pivot.scss b/dist/components/Pivot/Pivot.scss new file mode 100644 index 000000000..77945c791 --- /dev/null +++ b/dist/components/Pivot/Pivot.scss @@ -0,0 +1,165 @@ +// 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-u-normalize; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; +} + +.ms-Pivot-links { + color: $ms-color-neutralPrimary; + height: 30px; + list-style-type: none; + white-space: nowrap; + padding: 0; +} + +.ms-Pivot-link { + color: $ms-color-neutralPrimary; + display: inline-block; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m-plus; + line-height: 27px; + margin-right: 15px; + + &:hover, + &:focus { + color: $ms-color-black; + cursor: pointer; + } + + &:active { + color: $ms-color-themePrimary; + } + + //== State: Selected + &.is-selected { + color: $ms-color-themePrimary; + font-weight: $ms-font-weight-semibold; + } +} + +// 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; +} + + +//== 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; + } + } +} + + + +@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 000000000..099d25a33 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.hbs @@ -0,0 +1,10 @@ + + +
    +
    {{props.title}}
    +
    +
    +
    +
    +
    {{props.title}}
    +
    diff --git a/dist/components/ProgressIndicator/ProgressIndicator.json b/dist/components/ProgressIndicator/ProgressIndicator.json new file mode 100644 index 000000000..944be9699 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.json @@ -0,0 +1,7 @@ +{ + "name": "ProgressIndicator", + "notes": "A component for outputting determinate progress", + "description": "A simple, determinate progress indicator that allows the user to see the status of activities. Unlike the {0} Spinner {1}, ProgressIndicator should accurately display the progress of the activity while the Spinner is used when the time is indeterminate.", + "template": "ProgressIndicator.html", + "class": "ms-ProgressIndicator" +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.scss b/dist/components/ProgressIndicator/ProgressIndicator.scss new file mode 100644 index 000000000..54398c161 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.scss @@ -0,0 +1,63 @@ +// 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 { + font-family: $ms-font-family-base; + 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 000000000..fd7c49fbf --- /dev/null +++ b/dist/components/RadioButton/RadioButton.hbs @@ -0,0 +1,10 @@ + +
    +
  • + {{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 000000000..66f4424f9 --- /dev/null +++ b/dist/components/RadioButton/RadioButton.json @@ -0,0 +1,9 @@ +{ + "name": "RadioButton", + "notes": "RadioButton.", + "description": "A set of components that allows users to select one or many of a set number of choices using Checkboxes.", + "class": "ms-RadioButton", + "dependencies": [ + "Label" + ] +} \ No newline at end of file diff --git a/dist/components/RadioButton/RadioButton.scss b/dist/components/RadioButton/RadioButton.scss new file mode 100644 index 000000000..13a7dfae3 --- /dev/null +++ b/dist/components/RadioButton/RadioButton.scss @@ -0,0 +1,105 @@ +// 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 + + +// Unselected, radio button (default) +.ms-RadioButton { + @include ms-u-normalize; + 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; + } + + // disabled + & .ms-Choice-type--radio.is-disabled { + pointer-events: none; + cursor: default; + + &:before { + background-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + } + + &:after { + border-color: $ms-color-neutralLight; + } + + .ms-Label { + color: $ms-color-neutralTertiary; + } + } + + & .ms-Choice-type--radio.in-focus:after { + border-color: $ms-color-neutralSecondaryAlt; + } + + // The RadioButton radio button or checkbox + .ms-Choice-type--radio { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + + // The actual styled RadioButton element - radio button by default + &:after { + content: ''; + display: inline-block; + border: 1px $ms-color-neutralTertiaryAlt solid; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; + } + + &:hover { + &:after { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } + + // Radio button by default + &.is-checked { + // Circle indicating a checked radio button + &:before { + background-color: $ms-color-neutralSecondary; + border-color: $ms-color-neutralSecondary; + color: $ms-color-neutralSecondary; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; + } + + &:hover:before { + background-color: $ms-color-neutralDark; + color: $ms-color-neutralDark; + } + } + } +} diff --git a/dist/components/SearchBox/SearchBox.hbs b/dist/components/SearchBox/SearchBox.hbs new file mode 100644 index 000000000..3f191af88 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.hbs @@ -0,0 +1,10 @@ + + +
    + + + {{renderPartial props.clearButton.component props.clearButton.props}} +
    \ 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 000000000..13da7a447 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.json @@ -0,0 +1,19 @@ +{ + "name": "SearchBox", + "template": "SearchBox.html", + "class": "ms-SearchBox", + "props": { + "label": "Search", + "defaultValue": "", + "icon": "search", + "clearButton": { + "component": "CommandButton", + "props": { + "icon": "x", + "modifier": "noLabel", + "tag": "button", + "customClasses": "ms-SearchBox-close" + } + } + } +} diff --git a/dist/components/SearchBox/SearchBox.scss b/dist/components/SearchBox/SearchBox.scss new file mode 100644 index 000000000..7b6a81894 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.scss @@ -0,0 +1,250 @@ +// 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 + + +.ms-SearchBox { + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + position: relative; + display: inline-block; + overflow: hidden; + transition: width $ms-duration1; + width: 180px; + + .ms-CommandButton { + display: none; + } + + // State: Active searchbox + &.is-active { + z-index: $ms-zIndex-front; + + .ms-SearchBox-label { + display: none; + } + + .ms-CommandButton { + display: block; + } + } + + &.has-text { + .ms-SearchBox-text { + display: none; + } + } + + &:hover { + background-color: $ms-color-themeLighter; + border-color: $ms-color-themePrimary; + + .ms-SearchBox-label { + color: $ms-color-black; + + .ms-Icon { + color: $ms-color-neutralPrimary; + } + } + } + + // State: Disabled searchbox + &.is-disabled { + .ms-SearchBox-label { + @include ms-Label-is-disabled; + } + + .ms-SearchBox-icon { + color: $ms-color-neutralTertiaryAlt; + } + + .ms-SearchBox-field { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + } +} + +.ms-SearchBox-field { + position: relative; + @include ms-u-normalize; + border: 1px solid $ms-color-themeTertiary; + outline: transparent 1px solid; + border-radius: 0; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-m; + color: $ms-color-black; + height: 32px; + padding: 6px 3px 7px 32px; + width: 100%; + 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-close.ms-CommandButton { + position: absolute; + right: 0; + top: 0; + height: 100%; + display: none; + z-index: $ms-zIndex-front + 1; + + .ms-CommandButton-button { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + height: 100%; + } + + .ms-CommandButton-icon { + color: $ms-color-white; + } +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: $ms-color-neutralSecondary; + + .ms-Icon { + margin-right: 7px; + font-size: $ms-font-size-l; + color: $ms-color-neutralSecondaryAlt; + } +} + +//== Modifier: CommandBar Search +// + +.ms-SearchBox.ms-SearchBox--commandBar { + border: 0; + @include ms-bgColor-themeLighter; + width: 208px; + + .ms-SearchBox-field { + border: 0; + height: 40px; + background: transparent; + padding-left: 40px; + } + + .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; + padding-left: 0; + } + + .ms-SearchBox-icon { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 16px; + margin-right: 8px; + color: $ms-color-themePrimary; + } + + .ms-SearchBox-close { + @include ms-bgColor-themeLighter; + color: $ms-color-themePrimary; + + .ms-CommandButton-icon { + color: $ms-color-themePrimary; + } + } + + &:hover { + border: 0; + background-color: none; + + .ms-SearchBox-label { + color: $ms-color-neutralDark; + } + + .ms-SearchBox-icon { + color: $ms-color-themePrimary; + } + } + + &.is-collapsed { + width: 50px; + min-height: 40px; + + .ms-SearchBox-close { + display: none; + } + + .ms-SearchBox-text { + display: none; + } + + .ms-SearchBox-field { + cursor: pointer; + } + } + + &.is-collapsed.is-active { + width: 100%; + + .ms-SearchBox-field { + display: block; + cursor: text; + } + + .ms-SearchBox-text { + display: inline-block; + } + + .ms-SearchBox-close { + display: block; + } + } +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + @include ms-bgColor-themeLight; + + .ms-SearchBox-close { + .ms-CommandButton-button { + @include ms-bgColor-themeLight; + } + } + + .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; + + .ms-SearchBox-text { + display: none; + } + + .ms-SearchBox-icon { + width: 16px; + margin-left: 16px; + margin-right: 8px; + display: inline-block; + } + } +} diff --git a/dist/components/Spinner/Spinner.hbs b/dist/components/Spinner/Spinner.hbs new file mode 100644 index 000000000..26bf325da --- /dev/null +++ b/dist/components/Spinner/Spinner.hbs @@ -0,0 +1,9 @@ + + +
    + {{#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 000000000..b94a967dd --- /dev/null +++ b/dist/components/Spinner/Spinner.json @@ -0,0 +1,5 @@ +{ + "name": "Spinner", + "template": "Spinner.html", + "class": "ms-Spinner" +} diff --git a/dist/components/Spinner/Spinner.scss b/dist/components/Spinner/Spinner.scss new file mode 100644 index 000000000..9c017dc47 --- /dev/null +++ b/dist/components/Spinner/Spinner.scss @@ -0,0 +1,47 @@ +// 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 { + position: relative; + height: 20px; + font-family: $ms-font-family-base; + + &.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 { + position: relative; + font-family: $ms-font-family-base; + 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 000000000..2477cf0f9 --- /dev/null +++ b/dist/components/Table/Table.hbs @@ -0,0 +1,26 @@ + + + + + + {{#if props.isSelectable}} + + {{/if}} + {{#each props.headers}} + + {{/each}} + + + + {{#each props.rows}} + + {{#if ../props.isSelectable}} + + {{/if}} + {{#each columns}} + + {{/each}} + + {{/each}} + +
    {{value}}
    {{value}}
    diff --git a/dist/components/Table/Table.json b/dist/components/Table/Table.json new file mode 100644 index 000000000..d9a5dd586 --- /dev/null +++ b/dist/components/Table/Table.json @@ -0,0 +1,5 @@ +{ + "name": "Table", + "template": "Table.html", + "class": "ms-Table" +} diff --git a/dist/components/Table/Table.scss b/dist/components/Table/Table.scss new file mode 100644 index 000000000..56dec8995 --- /dev/null +++ b/dist/components/Table/Table.scss @@ -0,0 +1,140 @@ +// 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 { + display: table; + width: 100%; + border-collapse: collapse; + font-family: $ms-font-family-base; +} + +// 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; + content: '\e041'; + color: $ms-color-white; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; + } + } + } +} + +.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; + } + + .ms-Table-rowCheck { + &::after { + @include ms-Icon; + content: '\e041'; + color: $ms-color-neutralTertiary; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; + } + } +} + +// On selectable tables, each row has a checkbox. +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; + + // Empty checkbox. + &:before { + border: 1px solid $ms-color-neutralTertiary; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; + } +} + +// 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 000000000..7599a9e60 --- /dev/null +++ b/dist/components/TextField/TextField.hbs @@ -0,0 +1,8 @@ + + +
    + {{#if 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 000000000..97ca9bb4a --- /dev/null +++ b/dist/components/TextField/TextField.json @@ -0,0 +1,5 @@ +{ + "name": "TextField", + "template": "TextField.html", + "class": "ms-TextField" +} diff --git a/dist/components/TextField/TextField.scss b/dist/components/TextField/TextField.scss new file mode 100644 index 000000000..903edb6ce --- /dev/null +++ b/dist/components/TextField/TextField.scss @@ -0,0 +1,252 @@ +// 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-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + margin-bottom: 8px; +} + +//= 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-s; + color: $ms-color-neutralPrimary; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; + + &: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; + } + } + + @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; + + .ms-Label { + position: absolute; + font-weight: $ms-font-weight-semilight; + font-size: $ms-font-size-s; + color: $ms-color-neutralSecondary; + padding: 7px 0 7px 10px; + } + + &.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-s; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + 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: 2px; + + &: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 { + font-weight: $ms-font-weight-semilight; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; + } +} + + + +//== Modifier: Single line (default), underlined +// +.ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + border-bottom: 1px solid $ms-color-themePrimary; + display: table; + width: 100%; + min-width: 180px; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + } + + &:active, + &:focus { + border-color: $ms-color-themePrimary; + } + + .ms-TextField-field { + border: 0; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; + + &:active, + &:focus { + 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; + } + } +} diff --git a/dist/components/Toggle/Toggle.Disabled.html b/dist/components/Toggle/Toggle.Disabled.html new file mode 100644 index 000000000..ea2458df4 --- /dev/null +++ b/dist/components/Toggle/Toggle.Disabled.html @@ -0,0 +1,10 @@ + + +
    + Let apps use my location + + +
    \ No newline at end of file diff --git a/dist/components/Toggle/Toggle.TextLeft.html b/dist/components/Toggle/Toggle.TextLeft.html new file mode 100644 index 000000000..670ea3da3 --- /dev/null +++ b/dist/components/Toggle/Toggle.TextLeft.html @@ -0,0 +1,3 @@ + + +{{> Toggle props=propsTextLeft}} \ No newline at end of file diff --git a/dist/components/Toggle/Toggle.hbs b/dist/components/Toggle/Toggle.hbs new file mode 100644 index 000000000..179b55845 --- /dev/null +++ b/dist/components/Toggle/Toggle.hbs @@ -0,0 +1,10 @@ + + +
    + {{props.description}} + + +
    diff --git a/dist/components/Toggle/Toggle.json b/dist/components/Toggle/Toggle.json new file mode 100644 index 000000000..ba55f3139 --- /dev/null +++ b/dist/components/Toggle/Toggle.json @@ -0,0 +1,28 @@ +{ + "name": "Toggle", + "notes": "", + "description":"A boolean visualization that allows for users to select between two states, typically on and off. In Office 365, on/true is signified by a blue state while off/false is shown in grey. Also see {0} ChoiceField - checkbox {1} for a boolean visualization that is better suited to a long list of individual choices for the user.", + "template": "Toggle.html", + "class": "ms-Toggle", + "fileOrder": [ + "Toggle.html", + "Toggle.TextLeft.html", + "Toggle.Disabled.html" + ], + "dependencies": [ + "Label" + ], + "props": { + "description": "Let apps use my location", + "onText": "On", + "offText": "Off", + "demoID": "demo-toggle-3" + }, + "propsTextLeft": { + "modifier": "textLeft", + "description": "Let apps use my location", + "onText": "On", + "offText": "Off", + "demoID": "demo-toggle-1" + } +} diff --git a/dist/components/Toggle/Toggle.scss b/dist/components/Toggle/Toggle.scss new file mode 100644 index 000000000..e2eb2c25e --- /dev/null +++ b/dist/components/Toggle/Toggle.scss @@ -0,0 +1,211 @@ +// 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; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + #{$direction}: -2.5px; + width: 12px; + height: 20px; + background-color: $ms-color-neutralSecondaryAlt; + outline: 2px solid transparent; + + @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; + border-right: 2.5px solid $ms-color-white; + } + } + + @if $direction == right { + &:before { + left: auto; + border-left: 2.5px solid $ms-color-white; + } + } + + &:active { + background-color: $ms-color-themePrimary; + } +} + +// Toggle +.ms-Toggle { + @include ms-u-normalize; + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; + position: relative; + display: block; + margin-bottom: 26px; + + // Action label (on/off) on the right of the toggle + .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: $ms-font-size-s; + } + + // 'Off' state - slider on the left + & .ms-Toggle-field { + background-color: $ms-color-neutralLighter; + + @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; + + @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; + } + } + + .ms-Toggle-field { + &:focus, + &:hover { + background-color: $ms-color-neutralLight; + outline: 0; + } + + &.is-selected { + &:focus, + &:hover { + background-color: $ms-color-themeDark; + } + } + + .ms-Label { + color: $ms-color-black; + user-select: none; + } + + &: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-s; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +// Toggle input field +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px $ms-color-neutralTertiaryAlt solid; + cursor: pointer; +} + +// 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 000000000..d8090be5c --- /dev/null +++ b/dist/css/fabric.components.css @@ -0,0 +1,5575 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 3.0.0 + * The 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; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.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; + margin-right: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + padding: 12px 8px 3px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.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; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: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 { + background-color: transparent; + border: 0; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-weight: 100; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #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 .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #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 { + width: 288px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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; + margin: 0; + padding: 0; + box-shadow: none; + 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; +} + +.ms-CheckBox .ms-Choice-field.is-disabled { + pointer-events: none; + cursor: default; +} + +.ms-CheckBox .ms-Choice-field.is-disabled:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-CheckBox .ms-Choice-field.is-disabled:after { + border-color: #eaeaea; +} + +.ms-CheckBox .ms-Choice-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-CheckBox .ms-CheckBox-field.in-focus:after { + border-color: #767676; +} + +.ms-CheckBox .ms-Choice-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-CheckBox .ms-Choice-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-CheckBox .ms-Choice-field:hover:after { + border-color: #767676; +} + +.ms-CheckBox .ms-Choice-field:hover .ms-Label { + color: #000000; +} + +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after { + border-radius: 0; +} + +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before, +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +.ms-CheckBox .ms-Choice-field.is-checked:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +.ms-CheckBox .ms-Choice-field.is-checked:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-RadioButton { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + 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-RadioButton .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled { + pointer-events: none; + cursor: default; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled:after { + border-color: #eaeaea; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-RadioButton .ms-Choice-type--radio.in-focus:after { + border-color: #767676; +} + +.ms-RadioButton .ms-Choice-type--radio { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-RadioButton .ms-Choice-type--radio:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-RadioButton .ms-Choice-type--radio:hover:after { + border-color: #767676; +} + +.ms-RadioButton .ms-Choice-type--radio:hover .ms-Label { + color: #000000; +} + +.ms-RadioButton .ms-Choice-type--radio.is-checked:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + margin-right: 8px; + display: inline-block; + vertical-align: top; + transition: margin-right 0.267s; +} + +.ms-CommandBar .ms-SearchBox.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: 10; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar .ms-SearchBox { + margin-right: 24px; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; + 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: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandButton { + display: inline-block; + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: #c7e0f4; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.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; +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; +} + +.ms-CommandButton-icon { + display: inline-block; + padding-right: 12px; + position: relative; + font-size: 17px; + min-width: 17px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton-label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + display: inline-block; + position: relative; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; + min-width: 17px; + height: 100%; +} + +.ms-CommandButton-dropdownIcon .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton-dropdownIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-splitIcon { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; + margin-left: -4px; + width: 21px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + border-left: 1px solid #c8c8c8; + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + padding-right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.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; +} + +.ms-ContextualMenu { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + 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: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; +} + +.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; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + 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: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: #c7e0f4; +} + +.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-Dialog { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: absolute; + -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--x { + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: 0 16px; +} + +.ms-Panel .ms-Dropdown-items:before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + right: 9px; + bottom: 5px; + 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; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: 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: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@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:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.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; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@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 { + position: relative; + height: 32px; + width: auto; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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; + 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; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-List { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + list-style-type: none; +} + +.ms-ListItem { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + 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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + 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 { + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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--remove { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--remove .ms-Icon { + font-size: 8px; + margin-left: 3px; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon { + font-size: 12px; + top: 3px; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon:before { + margin-left: 1px; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon:after { + font-size: 8px; + margin-left: 3px; + top: 1px; +} + +.ms-OrgChart { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 0; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Panel { + background-color: #ffffff; + width: 100%; + max-width: 272px; + box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2); + position: absolute; + top: 0; + bottom: 0; + right: 0; + z-index: 10; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + display: none; +} + +.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-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-PanelHost.ms-PanelHost--left { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands, +.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner { + display: none; +} + +.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main { + 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-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.267s; +} + +.ms-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + 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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.167s; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; +} + +@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; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + 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; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + animation-delay: 500ms; + } +} + +.ms-PeoplePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 2px solid #0078d7; +} + +.ms-PeoplePicker-searchBox .ms-TextField { + border: 0; + margin-bottom: 0; +} + +.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.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; +} + +.ms-PeoplePicker-result:hover { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #71afe5; +} + +.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: 30px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.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 { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-weight: 400; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-weight: 300; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.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-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.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.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.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; +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 9px; + 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--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; +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +.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: inline-block; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin-bottom: 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: 30px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + 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-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + 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: 15px; +} + +.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: 0; +} + +.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: '\e088'; +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.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 { + 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; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + color: #333333; + height: 30px; + list-style-type: none; + white-space: nowrap; + padding: 0; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-weight: 300; + font-size: 15px; + line-height: 27px; + margin-right: 15px; +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active { + color: #0078d7; +} + +.ms-Pivot-link.is-selected { + color: #0078d7; + font-weight: 600; +} + +.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; +} + +.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 (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@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; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: inline-block; + overflow: hidden; + transition: width 0.167s; + width: 180px; +} + +.ms-SearchBox .ms-CommandButton { + display: none; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-CommandButton { + display: block; +} + +.ms-SearchBox.has-text .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox:hover { + background-color: #deecf9; + border-color: #0078d7; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: transparent 1px solid; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 32px; + width: 100%; + 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-close.ms-CommandButton { + position: absolute; + right: 0; + top: 0; + height: 100%; + display: none; + z-index: 11; +} + +.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 100%; +} + +.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-label .ms-Icon { + margin-right: 7px; + font-size: 17px; + color: #767676; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + border: 0; + background-color: #deecf9; + width: 208px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + border: 0; + height: 40px; + background: transparent; + padding-left: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; + padding-left: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 16px; + margin-right: 8px; + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close { + background-color: #deecf9; + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + border: 0; + background-color: none; +} + +.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.is-collapsed { + width: 50px; + min-height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-close { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; +} + +.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; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-close { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #c7e0f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-close .ms-CommandButton-button { + background-color: #c7e0f4; +} + +.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 .ms-SearchBox-label .ms-SearchBox-icon { + width: 16px; + margin-left: 16px; + margin-right: 8px; + display: inline-block; +} + +.ms-Spinner { + position: relative; + height: 20px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 12px; + font-weight: 400; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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: #c7e0f4; +} + +.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 { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.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 thead .ms-Table-rowCheck::after, +.ms-Table-head .ms-Table-rowCheck::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.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, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.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, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.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: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.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::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.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: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + 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: 2px; +} + +.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-weight: 300; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + border-bottom: 1px solid #0078d7; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--textFieldUnderlined:hover { + border-color: #767676; +} + +.ms-TextField.ms-TextField--textFieldUnderlined:active, +.ms-TextField.ms-TextField--textFieldUnderlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + border: 0; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:focus { + outline: 0; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-Label { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: 12px; +} + +.ms-Toggle .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@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; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle .ms-Toggle-field:active { + background-color: #0078d7; +} + +.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; +} + +.ms-Toggle .ms-Toggle-field.is-selected:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@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 { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle .ms-Toggle-field.is-selected:active { + background-color: #0078d7; +} + +.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 .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + background-color: #eaeaea; + outline: 0; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #005a9e; +} + +.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: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: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px #c8c8c8 solid; + cursor: pointer; +} + +.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 000000000..577a441b0 --- /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 3.0.0 + * The 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;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.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;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;padding:12px 8px 3px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.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}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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: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{background-color:transparent;border:0;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-weight:100;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#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 .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#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{width:288px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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;margin:0;padding:0;box-shadow:none;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}.ms-CheckBox .ms-Choice-field.is-disabled{pointer-events:none;cursor:default}.ms-CheckBox .ms-Choice-field.is-disabled:before{background-color:#c8c8c8;color:#c8c8c8}.ms-CheckBox .ms-Choice-field.is-disabled:after{border-color:#eaeaea}.ms-CheckBox .ms-Choice-field.is-disabled .ms-Label{color:#a6a6a6}.ms-CheckBox .ms-CheckBox-field.in-focus:after{border-color:#767676}.ms-CheckBox .ms-Choice-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-CheckBox .ms-Choice-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-CheckBox .ms-Choice-field:hover:after{border-color:#767676}.ms-CheckBox .ms-Choice-field:hover .ms-Label{color:#000}.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after{border-radius:0}.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before,.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}.ms-CheckBox .ms-Choice-field.is-checked:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}.ms-CheckBox .ms-Choice-field.is-checked:hover:before{background-color:#212121;color:#212121}.ms-RadioButton{box-sizing:border-box;margin:0;padding:0;box-shadow:none;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-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-RadioButton .ms-Choice-type--radio.is-disabled{pointer-events:none;cursor:default}.ms-RadioButton .ms-Choice-type--radio.is-disabled:before{background-color:#c8c8c8;color:#c8c8c8}.ms-RadioButton .ms-Choice-type--radio.is-disabled:after{border-color:#eaeaea}.ms-RadioButton .ms-Choice-type--radio.is-disabled .ms-Label{color:#a6a6a6}.ms-RadioButton .ms-Choice-type--radio.in-focus:after{border-color:#767676}.ms-RadioButton .ms-Choice-type--radio{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-RadioButton .ms-Choice-type--radio:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-RadioButton .ms-Choice-type--radio:hover:after{border-color:#767676}.ms-RadioButton .ms-Choice-type--radio:hover .ms-Label{color:#000}.ms-RadioButton .ms-Choice-type--radio.is-checked:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before{background-color:#212121;color:#212121}.ms-ChoiceFieldGroup{margin-bottom:4px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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{margin-right:8px;display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px;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;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandButton{display:inline-block;position:relative;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:#c7e0f4}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.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}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}.ms-CommandButton-icon{display:inline-block;padding-right:12px;position:relative;font-size:17px;min-width:17px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton-label{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{display:inline-block;position:relative;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;min-width:17px;height:100%}.ms-CommandButton-dropdownIcon .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton-dropdownIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-splitIcon{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;margin-left:-4px;width:21px;border:0}.ms-CommandButton-splitIcon .ms-Icon{border-left:1px solid #c8c8c8;position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{padding-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.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}.ms-ContextualMenu{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;display:block;min-width:180px;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:40px;line-height:40px;padding:0 18px;position:relative}.ms-ContextualMenu-link:focus{outline:transparent}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff}.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;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;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:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:#c7e0f4}.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-Dialog{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:absolute;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--x{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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:0 16px}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;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:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@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:first-child,.ms-Dropdown-item:last-child{height:39px}.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;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@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{position:relative;height:32px;width:auto;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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;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}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{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{padding:8px;display:table;background-color:#f4f4f4}.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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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--remove{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--remove .ms-Icon{font-size:8px;margin-left:3px}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-MessageBar.ms-MessageBar--success .ms-Icon{font-size:12px;top:3px}.ms-MessageBar.ms-MessageBar--success .ms-Icon:before{margin-left:1px}.ms-MessageBar.ms-MessageBar--success .ms-Icon:after{font-size:8px;margin-left:3px;top:1px}.ms-OrgChart{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:0;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Panel{background-color:#fff;width:100%;max-width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;bottom:0;right:0;z-index:10;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;display:none}.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-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-PanelHost.ms-PanelHost--left{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands,.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner{display:none}.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main{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-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay{-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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-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-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto}@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}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{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;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{animation-delay:.5s}}.ms-PeoplePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:2px solid #0078d7}.ms-PeoplePicker-searchBox .ms-TextField{border:0;margin-bottom:0}.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.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}.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-result.is-selected{background-color:#c7e0f4}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#71afe5}.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:30px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.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{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-weight:400}.ms-PeoplePicker-searchMoreSecondary{font-weight:300;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-weight:300;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.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-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn{height:42px}}.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.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.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}.ms-Persona-presenceIcon{color:#fff;font-size:9px;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--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}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}.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:inline-block;width:auto;background-color:#f4f4f4;border-radius:20px;margin-bottom: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:30px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{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-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;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:15px}.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:0}.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:'\e088'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.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{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;font-size:14px;font-weight:400}.ms-Pivot-links{color:#333;height:30px;list-style-type:none;white-space:nowrap;padding:0}.ms-Pivot-link{color:#333;display:inline-block;font-weight:300;font-size:15px;line-height:27px;margin-right:15px}.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active{color:#0078d7}.ms-Pivot-link.is-selected{color:#0078d7;font-weight:600}.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}.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 (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@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;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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;position:relative;display:inline-block;overflow:hidden;transition:width .167s;width:180px}.ms-SearchBox .ms-CommandButton{display:none}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-CommandButton{display:block}.ms-SearchBox.has-text .ms-SearchBox-text{display:none}.ms-SearchBox:hover{background-color:#deecf9;border-color:#0078d7}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-weight:300;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 32px;width:100%;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-close.ms-CommandButton{position:absolute;right:0;top:0;height:100%;display:none;z-index:11}.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:100%}.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-icon{color:#fff}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-label .ms-Icon{margin-right:7px;font-size:17px;color:#767676}.ms-SearchBox.ms-SearchBox--commandBar{border:0;background-color:#deecf9;width:208px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{border:0;height:40px;background:transparent;padding-left:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{display:block;line-height:40px;height:40px;padding-left:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{display:inline-block;width:16px;height:16px;margin-left:16px;margin-right:8px;color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close{background-color:#deecf9;color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:hover{border:0;background-color:none}.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.is-collapsed{width:50px;min-height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-close,.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer}.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}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-close{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-active,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-close .ms-CommandButton-button{background-color:#c7e0f4}.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 .ms-SearchBox-label .ms-SearchBox-icon{width:16px;margin-left:16px;margin-right:8px;display:inline-block}.ms-Spinner{position:relative;height:20px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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}.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:#c7e0f4}.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{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.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-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-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:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.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:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:12px;color:#666;padding:7px 0 7px 10px}.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:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;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:2px}.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-weight:300;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-TextField.ms-TextField--textFieldUnderlined{border:0;border-bottom:1px solid #0078d7;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--textFieldUnderlined:hover{border-color:#767676}.ms-TextField.ms-TextField--textFieldUnderlined:active,.ms-TextField.ms-TextField--textFieldUnderlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{border:0;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:active,.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:focus{outline:0}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 0 0 62px;font-size:12px}.ms-Toggle .ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle .ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@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;border-right:2.5px solid #fff}.ms-Toggle .ms-Toggle-field:active{background-color:#0078d7}.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}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@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{left:auto;border-left:2.5px solid #fff}.ms-Toggle .ms-Toggle-field.is-selected:active{background-color:#0078d7}.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 .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{background-color:#eaeaea;outline:0}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#005a9e}.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: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:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.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 000000000..0583f37b7 --- /dev/null +++ b/dist/css/fabric.components.rtl.css @@ -0,0 +1,5444 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ + +/** + * Office UI Fabric 3.0.0 + * The 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; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.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; + margin-left: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + padding: 12px 8px 3px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.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; +} + +@media screen and (max-width:639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width:479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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: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 { + background-color: transparent; + border: 0; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-weight: 100; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon { + color: #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 .ms-Icon, +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon { + color: #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 { + width: 288px; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; +} + +.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; + margin: 0; + padding: 0; + box-shadow: none; + 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; +} + +.ms-CheckBox .ms-Choice-field.is-disabled { + pointer-events: none; + cursor: default; +} + +.ms-CheckBox .ms-Choice-field.is-disabled:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-CheckBox .ms-Choice-field.is-disabled:after { + border-color: #eaeaea; +} + +.ms-CheckBox .ms-Choice-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-CheckBox .ms-CheckBox-field.in-focus:after { + border-color: #767676; +} + +.ms-CheckBox .ms-Choice-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-CheckBox .ms-Choice-field:after { + content: ''; + display: inline-block; + border: 1px solid #c8c8c8; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: 400; + right: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-CheckBox .ms-Choice-field:hover:after { + border-color: #767676; +} + +.ms-CheckBox .ms-Choice-field:hover .ms-Label { + color: #000000; +} + +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after { + border-radius: 0; +} + +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before, +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + right: 3px; +} + +.ms-CheckBox .ms-Choice-field.is-checked:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + left: 0; + bottom: 0; + right: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +.ms-CheckBox .ms-Choice-field.is-checked:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-RadioButton { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + 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-RadioButton .ms-Label { + font-size: 14px; + padding: 0 26px 0 0; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled { + pointer-events: none; + cursor: default; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled:after { + border-color: #eaeaea; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-RadioButton .ms-Choice-type--radio.in-focus:after { + border-color: #767676; +} + +.ms-RadioButton .ms-Choice-type--radio { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-RadioButton .ms-Choice-type--radio:after { + content: ''; + display: inline-block; + border: 1px solid #c8c8c8; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: 400; + right: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-RadioButton .ms-Choice-type--radio:hover:after { + border-color: #767676; +} + +.ms-RadioButton .ms-Choice-type--radio:hover .ms-Label { + color: #000000; +} + +.ms-RadioButton .ms-Choice-type--radio.is-checked:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + left: 0; + bottom: 0; + right: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-right: 0; + border: 0; + position: relative; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; +} + +.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 { + margin-left: 8px; + display: inline-block; + vertical-align: top; + transition: margin-left 0.267s; +} + +.ms-CommandBar .ms-SearchBox.is-collapsed.is-active { + width: 100%; + position: absolute; + right: 0; + left: 0; + z-index: 10; +} + +@media only screen and (min-width:1024px) { + .ms-CommandBar .ms-SearchBox { + margin-left: 24px; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: left; + text-align: left; + width: auto; + padding-left: 8px; + 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; + padding-left: 12px; + } +} + +@media only screen and (min-width:1024px) { + .ms-CommandBar-sideCommands { + padding-left: 16px; + } +} + +.ms-CommandButton { + display: inline-block; + position: relative; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; +} + +.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-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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: #c7e0f4; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.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; +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-right: 8px; +} + +.ms-CommandButton-icon { + display: inline-block; + padding-left: 12px; + position: relative; + font-size: 17px; + min-width: 17px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; +} + +.ms-CommandButton-label { + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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 { + display: inline-block; + position: relative; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 17px; + font-weight: 300; + min-width: 17px; + height: 100%; +} + +.ms-CommandButton-dropdownIcon .ms-Icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; +} + +.ms-CommandButton-dropdownIcon:focus:before { + top: 3px; + right: 3px; + left: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-splitIcon { + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 17px; + font-weight: 300; + margin-right: -4px; + width: 21px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + border-right: 1px solid #c8c8c8; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + padding-left: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.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; +} + +.ms-ContextualMenu { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + 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: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; +} + +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus, +.ms-ContextualMenu-link:hover { + background-color: #eaeaea; + color: #000000; +} + +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; +} + +.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; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + 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: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + left: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.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: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + right: 10px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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: #c7e0f4; +} + +.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-Dialog { + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + display: none; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: absolute; + 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--x { + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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: 0 16px; +} + +.ms-Panel .ms-Dropdown-items:before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + left: 9px; + bottom: 5px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + padding: 0; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 10px 0 32px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-items, +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + box-shadow: none; +} + +.ms-Dropdown-items { + padding: 0; + 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: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@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:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.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; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@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 { + position: relative; + height: 32px; + width: auto; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; +} + +.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; + 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; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-List { + padding: 0; + list-style-type: none; +} + +.ms-List, +.ms-ListItem { + box-sizing: border-box; + margin: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + right: 6px; + 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: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + right: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + 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 { + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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 { + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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 { + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + 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 { + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.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 { + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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--remove { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--remove .ms-Icon { + font-size: 8px; + margin-right: 3px; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon { + font-size: 12px; + top: 3px; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon:before { + margin-right: 1px; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon:after { + font-size: 8px; + margin-right: 3px; + top: 1px; +} + +.ms-OrgChart { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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 { + background-color: hsla(0,0%,100%,0.4); + position: absolute; + bottom: 0; + right: 0; + left: 0; + top: 0; + z-index: 0; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0,0,0,0.4); +} + +.ms-Panel { + background-color: #ffffff; + width: 100%; + max-width: 272px; + box-shadow: 30px 0 30px -30px rgba(0,0,0,0.2); + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 10; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + display: none; +} + +.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-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-PanelHost.ms-PanelHost--left { + left: auto; + right: 0; + border-right: 1px solid #eaeaea; + border-left: 1px solid #eaeaea; + box-shadow: 30px 0 30px 30px rgba(0,0,0,0.2); +} + +.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands, +.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner { + display: none; +} + +.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main { + 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-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.267s; +} + +.ms-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + 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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.167s; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + left: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; +} + +@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; + } +} + +@media (min-width:480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText, +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-right: 12px; + padding-left: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText, +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + 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; + animation-delay: 0.25s; +} + +@media (min-width:480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + animation-delay: 0.5s; + } +} + +.ms-PeoplePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 2px solid #0078d7; +} + +.ms-PeoplePicker-searchBox .ms-TextField { + border: 0; + margin-bottom: 0; +} + +.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.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; +} + +.ms-PeoplePicker-result:hover { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #71afe5; +} + +.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: 30px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.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 { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + right: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-right: 70px; + text-align: right; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:active, +.ms-PeoplePicker-searchMoreBtn:focus { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-right: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + right: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-weight: 400; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-weight: 300; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + right: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.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-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width:479px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + right: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-right: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width:480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width:480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn { + height: 42px; + } +} + +.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.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn { + padding-right: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner { + top: 16px; + right: 14px; + height: 20px; + width: 20px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.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; +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 9px; + 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--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; +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +.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: inline-block; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin-bottom: 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: 30px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + 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-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + 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: 15px; +} + +.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: 0; +} + +.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: '\e088'; +} + +.ms-PersonaCard-details[data-detail-id=org] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + 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: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e087'; +} + +.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 { + 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; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + color: #333333; + height: 30px; + list-style-type: none; + white-space: nowrap; + padding: 0; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-weight: 300; + font-size: 15px; + line-height: 27px; + margin-left: 15px; +} + +.ms-Pivot-link:focus, +.ms-Pivot-link:hover { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active { + color: #0078d7; +} + +.ms-Pivot-link.is-selected { + color: #0078d7; + font-weight: 600; +} + +.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; +} + +.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 (min-width:640px) { + .ms-Pivot-link, + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@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; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: inline-block; + overflow: hidden; + transition: width 0.167s; + width: 180px; +} + +.ms-SearchBox .ms-CommandButton { + display: none; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-CommandButton { + display: block; +} + +.ms-SearchBox.has-text .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox:hover { + background-color: #deecf9; + border-color: #0078d7; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: 1px solid transparent; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 32px 7px 3px; + width: 100%; + 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-close.ms-CommandButton { + position: absolute; + left: 0; + top: 0; + height: 100%; + display: none; + z-index: 11; +} + +.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 100%; +} + +.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + right: 0; + padding-right: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-label .ms-Icon { + margin-left: 7px; + font-size: 17px; + color: #767676; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + border: 0; + background-color: #deecf9; + width: 208px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + border: 0; + height: 40px; + background: transparent; + padding-right: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; + padding-right: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon { + display: inline-block; + width: 16px; + height: 16px; + margin-right: 16px; + margin-left: 8px; + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close { + background-color: #deecf9; + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + border: 0; + background-color: none; +} + +.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.is-collapsed { + width: 50px; + min-height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-close, +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; +} + +.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; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-close { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active, +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-close .ms-CommandButton-button { + background-color: #c7e0f4; +} + +.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 .ms-SearchBox-label .ms-SearchBox-icon { + width: 16px; + margin-right: 16px; + margin-left: 8px; + display: inline-block; +} + +.ms-Spinner { + position: relative; + height: 20px; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; +} + +.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; +} + +.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: #c7e0f4; +} + +.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 { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + right: 4px; + top: 9px; +} + +.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-head .ms-Table-rowCheck:after, +.ms-Table thead .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + right: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + right: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required::-webkit-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: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.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:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 12px; + color: #666666; + padding: 7px 10px 7px 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: 12px; + margin-left: 8px; + display: table-cell; + vertical-align: bottom; + padding-right: 12px; + padding-bottom: 5px; + 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: 2px; +} + +.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-weight: 300; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + border-bottom: 1px solid #0078d7; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--textFieldUnderlined:hover { + border-color: #767676; +} + +.ms-TextField.ms-TextField--textFieldUnderlined:active, +.ms-TextField.ms-TextField--textFieldUnderlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + border: 0; + display: table-cell; + text-align: right; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:focus { + outline: 0; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-Label { + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 62px 0 0; + font-size: 12px; +} + +.ms-Toggle .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@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; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle .ms-Toggle-field:active { + background-color: #0078d7; +} + +.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; +} + +.ms-Toggle .ms-Toggle-field.is-selected:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@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 { + right: auto; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle .ms-Toggle-field.is-selected:active { + background-color: #0078d7; +} + +.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 .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + background-color: #eaeaea; + outline: 0; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #005a9e; +} + +.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: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: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px solid #c8c8c8; + cursor: pointer; +} + +.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 000000000..b4477b42d --- /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 3.0.0 + * The 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;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.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;margin-left:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;padding:12px 8px 3px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.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}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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: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{background-color:transparent;border:0;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-weight:100;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#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 .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#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{width:288px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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;margin:0;padding:0;box-shadow:none;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}.ms-CheckBox .ms-Choice-field.is-disabled{pointer-events:none;cursor:default}.ms-CheckBox .ms-Choice-field.is-disabled:before{background-color:#c8c8c8;color:#c8c8c8}.ms-CheckBox .ms-Choice-field.is-disabled:after{border-color:#eaeaea}.ms-CheckBox .ms-Choice-field.is-disabled .ms-Label{color:#a6a6a6}.ms-CheckBox .ms-CheckBox-field.in-focus:after{border-color:#767676}.ms-CheckBox .ms-Choice-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-CheckBox .ms-Choice-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;font-weight:400;right:-1px;top:-1px;border-radius:50%;position:absolute}.ms-CheckBox .ms-Choice-field:hover:after{border-color:#767676}.ms-CheckBox .ms-Choice-field:hover .ms-Label{color:#000}.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after{border-radius:0}.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before,.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;right:3px}.ms-CheckBox .ms-Choice-field.is-checked:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;left:0;bottom:0;right:4px;width:11px;height:11px;box-sizing:border-box}.ms-CheckBox .ms-Choice-field.is-checked:hover:before{background-color:#212121;color:#212121}.ms-RadioButton{box-sizing:border-box;margin:0;padding:0;box-shadow:none;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-RadioButton .ms-Label{font-size:14px;padding:0 26px 0 0}.ms-RadioButton .ms-Choice-type--radio.is-disabled{pointer-events:none;cursor:default}.ms-RadioButton .ms-Choice-type--radio.is-disabled:before{background-color:#c8c8c8;color:#c8c8c8}.ms-RadioButton .ms-Choice-type--radio.is-disabled:after{border-color:#eaeaea}.ms-RadioButton .ms-Choice-type--radio.is-disabled .ms-Label{color:#a6a6a6}.ms-RadioButton .ms-Choice-type--radio.in-focus:after{border-color:#767676}.ms-RadioButton .ms-Choice-type--radio{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-RadioButton .ms-Choice-type--radio:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;font-weight:400;right:-1px;top:-1px;border-radius:50%;position:absolute}.ms-RadioButton .ms-Choice-type--radio:hover:after{border-color:#767676}.ms-RadioButton .ms-Choice-type--radio:hover .ms-Label{color:#000}.ms-RadioButton .ms-Choice-type--radio.is-checked:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;left:0;bottom:0;right:4px;width:11px;height:11px;box-sizing:border-box}.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before{background-color:#212121;color:#212121}.ms-ChoiceFieldGroup{margin-bottom:4px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-right:0;border:0;position:relative;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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{margin-left:8px;display:inline-block;vertical-align:top;transition:margin-left .267s}.ms-CommandBar .ms-SearchBox.is-collapsed.is-active{width:100%;position:absolute;right:0;left:0;z-index:10}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-left:24px}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:left;text-align:left;width:auto;padding-left:8px;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;padding-left:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-left:16px}}.ms-CommandButton{display:inline-block;position:relative;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:#c7e0f4}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.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}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-right:8px}.ms-CommandButton-icon{display:inline-block;padding-left:12px;position:relative;font-size:17px;min-width:17px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);right:0}.ms-CommandButton-label{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{display:inline-block;position:relative;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;min-width:17px;height:100%}.ms-CommandButton-dropdownIcon .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);right:0}.ms-CommandButton-dropdownIcon:focus:before{top:3px;right:3px;left:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-splitIcon{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;margin-right:-4px;width:21px;border:0}.ms-CommandButton-splitIcon .ms-Icon{border-right:1px solid #c8c8c8;position:absolute;top:50%;transform:translateY(-50%);right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{padding-left:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.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}.ms-ContextualMenu{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;display:block;min-width:180px;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:40px;line-height:40px;padding:0 18px;position:relative}.ms-ContextualMenu-link:focus{outline:transparent}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff}.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;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;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:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;left:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;right:10px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:#c7e0f4}.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-Dialog{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:absolute;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--x{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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:0 16px}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;left:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 10px 0 32px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;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:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@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:first-child,.ms-Dropdown-item:last-child{height:39px}.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;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@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{position:relative;height:32px;width:auto;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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;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}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;right:6px;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;right:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{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{padding:8px;display:table;background-color:#f4f4f4}.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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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--remove{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--remove .ms-Icon{font-size:8px;margin-right:3px}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-MessageBar.ms-MessageBar--success .ms-Icon{font-size:12px;top:3px}.ms-MessageBar.ms-MessageBar--success .ms-Icon:before{margin-right:1px}.ms-MessageBar.ms-MessageBar--success .ms-Icon:after{font-size:8px;margin-right:3px;top:1px}.ms-OrgChart{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;right:0;left:0;top:0;z-index:0;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Panel{background-color:#fff;width:100%;max-width:272px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;bottom:0;left:0;z-index:10;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;display:none}.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-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-PanelHost.ms-PanelHost--left{left:auto;right:0;border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;box-shadow:30px 0 30px 30px rgba(0,0,0,.2)}.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands,.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner{display:none}.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main{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-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay{-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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-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-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;left:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto}@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}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-right:12px;padding-left:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{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;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{animation-delay:.5s}}.ms-PeoplePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:2px solid #0078d7}.ms-PeoplePicker-searchBox .ms-TextField{border:0;margin-bottom:0}.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.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}.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-result.is-selected{background-color:#c7e0f4}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#71afe5}.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:30px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.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{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;right:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-right:70px;text-align:right}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-right:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;right:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-weight:400}.ms-PeoplePicker-searchMoreSecondary{font-weight:300;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-weight:300;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;right:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.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-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{right:19px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-right:8px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn{height:42px}}.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.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn{padding-right:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner{top:16px;right:14px;height:20px;width:20px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.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}.ms-Persona-presenceIcon{color:#fff;font-size:9px;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--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}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}.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:inline-block;width:auto;background-color:#f4f4f4;border-radius:20px;margin-bottom: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:30px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{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-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;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:15px}.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:0}.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:'\e088'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.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{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;font-size:14px;font-weight:400}.ms-Pivot-links{color:#333;height:30px;list-style-type:none;white-space:nowrap;padding:0}.ms-Pivot-link{color:#333;display:inline-block;font-weight:300;font-size:15px;line-height:27px;margin-left:15px}.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active{color:#0078d7}.ms-Pivot-link.is-selected{color:#0078d7;font-weight:600}.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}.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 (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@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;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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;position:relative;display:inline-block;overflow:hidden;transition:width .167s;width:180px}.ms-SearchBox .ms-CommandButton{display:none}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-CommandButton{display:block}.ms-SearchBox.has-text .ms-SearchBox-text{display:none}.ms-SearchBox:hover{background-color:#deecf9;border-color:#0078d7}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-weight:300;font-size:14px;color:#000;height:32px;padding:6px 32px 7px 3px;width:100%;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-close.ms-CommandButton{position:absolute;left:0;top:0;height:100%;display:none;z-index:11}.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:100%}.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-icon{color:#fff}.ms-SearchBox-label{position:absolute;top:0;right:0;padding-right:8px;line-height:32px;color:#666}.ms-SearchBox-label .ms-Icon{margin-left:7px;font-size:17px;color:#767676}.ms-SearchBox.ms-SearchBox--commandBar{border:0;background-color:#deecf9;width:208px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{border:0;height:40px;background:transparent;padding-right:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{display:block;line-height:40px;height:40px;padding-right:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{display:inline-block;width:16px;height:16px;margin-right:16px;margin-left:8px;color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close{background-color:#deecf9;color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:hover{border:0;background-color:none}.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.is-collapsed{width:50px;min-height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-close,.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer}.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}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-close{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-active,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-close .ms-CommandButton-button{background-color:#c7e0f4}.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 .ms-SearchBox-label .ms-SearchBox-icon{width:16px;margin-right:16px;margin-left:8px;display:inline-block}.ms-Spinner{position:relative;height:20px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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}.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:#c7e0f4}.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{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;right:4px;top:9px}.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-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;right:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;right:2px;position:absolute;top:6px;width:14px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-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:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.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:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:12px;color:#666;padding:7px 10px 7px 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:12px;margin-left:8px;display:table-cell;vertical-align:bottom;padding-right:12px;padding-bottom:5px;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:2px}.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-weight:300;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-TextField.ms-TextField--textFieldUnderlined{border:0;border-bottom:1px solid #0078d7;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--textFieldUnderlined:hover{border-color:#767676}.ms-TextField.ms-TextField--textFieldUnderlined:active,.ms-TextField.ms-TextField--textFieldUnderlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{border:0;display:table-cell;text-align:right;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:active,.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:focus{outline:0}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 62px 0 0;font-size:12px}.ms-Toggle .ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle .ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@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;border-left:2.5px solid #fff}.ms-Toggle .ms-Toggle-field:active{background-color:#0078d7}.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}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@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{right:auto;border-right:2.5px solid #fff}.ms-Toggle .ms-Toggle-field.is-selected:active{background-color:#0078d7}.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 .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{background-color:#eaeaea;outline:0}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#005a9e}.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: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:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.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.css b/dist/css/fabric.css new file mode 100644 index 000000000..0ca14587e --- /dev/null +++ b/dist/css/fabric.css @@ -0,0 +1,4834 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 3.0.0 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox, +.ms-u-borderBox:before, +.ms-u-borderBox:after { + box-sizing: border-box; +} + +.ms-u-borderBase { + border: 1px solid; +} + +.ms-u-clearfix { + *zoom: 1; +} + +.ms-u-clearfix:before, +.ms-u-clearfix:after { + 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: #2b88d8; +} + +.ms-bgColor-themeTertiary, +.ms-bgColor-themeTertiary--hover:hover { + background-color: #71afe5; +} + +.ms-bgColor-themeLight, +.ms-bgColor-themeLight--hover:hover { + background-color: #c7e0f4; +} + +.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: #000000; +} + +.ms-bgColor-neutralDark, +.ms-bgColor-neutralDark--hover:hover { + background-color: #212121; +} + +.ms-bgColor-neutralPrimary, +.ms-bgColor-neutralPrimary--hover:hover { + background-color: #333333; +} + +.ms-bgColor-neutralPrimaryAlt, +.ms-bgColor-neutralPrimaryAlt--hover:hover { + background-color: #3c3c3c; +} + +.ms-bgColor-neutralSecondary, +.ms-bgColor-neutralSecondary--hover:hover { + background-color: #666666; +} + +.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: #ffffff; +} + +.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: #2b88d8; +} + +.ms-borderColor-themeTertiary, +.ms-borderColor-themeTertiary--hover:hover { + border-color: #71afe5; +} + +.ms-borderColor-themeLight, +.ms-borderColor-themeLight--hover:hover { + border-color: #c7e0f4; +} + +.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: #000000; +} + +.ms-borderColor-neutralDark, +.ms-borderColor-neutralDark--hover:hover { + border-color: #212121; +} + +.ms-borderColor-neutralPrimary, +.ms-borderColor-neutralPrimary--hover:hover { + border-color: #333333; +} + +.ms-borderColor-neutralPrimaryAlt, +.ms-borderColor-neutralPrimaryAlt--hover:hover { + border-color: #3c3c3c; +} + +.ms-borderColor-neutralSecondary, +.ms-borderColor-neutralSecondary--hover:hover { + border-color: #666666; +} + +.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: #ffffff; +} + +.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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 42px; + font-weight: 100; +} + +.ms-font-xxl { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 28px; + font-weight: 100; +} + +.ms-font-xl { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 21px; + font-weight: 100; +} + +.ms-font-l { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; +} + +.ms-font-m-plus { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 15px; + font-weight: 400; +} + +.ms-font-m { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; +} + +.ms-font-s-plus { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 13px; + font-weight: 400; +} + +.ms-font-s { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 12px; + font-weight: 400; +} + +.ms-font-xs { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 11px; + font-weight: 400; +} + +.ms-font-mi { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: #2b88d8; +} + +.ms-fontColor-themeTertiary, +.ms-fontColor-themeTertiary--hover:hover { + color: #71afe5; +} + +.ms-fontColor-themeLight, +.ms-fontColor-themeLight--hover:hover { + color: #c7e0f4; +} + +.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: #000000; +} + +.ms-fontColor-neutralDark, +.ms-fontColor-neutralDark--hover:hover { + color: #212121; +} + +.ms-fontColor-neutralPrimary, +.ms-fontColor-neutralPrimary--hover:hover { + color: #333333; +} + +.ms-fontColor-neutralPrimaryAlt, +.ms-fontColor-neutralPrimaryAlt--hover:hover { + color: #3c3c3c; +} + +.ms-fontColor-neutralSecondary, +.ms-fontColor-neutralSecondary--hover:hover { + color: #666666; +} + +.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: #ffffff; +} + +.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; +} + +/* + 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 +*/ +@font-face { + font-family: 'Segoe UI WestEuropean'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; +} + +/* + 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 +*/ +@font-face { + font-family: 'Office365Icons'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?'); + src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff?') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf?') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg?#office365icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +.ms-Icon { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} + +.ms-Icon--circleEmpty:before { + content: '\e000'; +} + +.ms-Icon--circleFill:before { + content: '\e001'; +} + +.ms-Icon--placeholder:before { + content: '\e002'; +} + +.ms-Icon--star:before { + content: '\e003'; +} + +.ms-Icon--plus:before { + content: '\e004'; +} + +.ms-Icon--minus:before { + content: '\e005'; +} + +.ms-Icon--question:before { + content: '\e006'; +} + +.ms-Icon--exclamation:before { + content: '\e007'; +} + +.ms-Icon--person:before { + content: '\e008'; +} + +.ms-Icon--mail:before { + content: '\e009'; +} + +.ms-Icon--infoCircle:before { + content: '\e00a'; +} + +.ms-Icon--alert:before { + content: '\e00b'; +} + +.ms-Icon--xCircle:before { + content: '\e00c'; +} + +.ms-Icon--mailOpen:before { + content: '\e00d'; +} + +.ms-Icon--people:before { + content: '\e00e'; +} + +.ms-Icon--bell:before { + content: '\e010'; +} + +.ms-Icon--calendar:before { + content: '\e011'; +} + +.ms-Icon--scheduling:before { + content: '\e012'; +} + +.ms-Icon--event:before { + content: '\e013'; +} + +.ms-Icon--folder:before { + content: '\e014'; +} + +.ms-Icon--documents:before { + content: '\e015'; +} + +.ms-Icon--onedrive:before { + content: '\e016'; +} + +.ms-Icon--chat:before { + content: '\e017'; +} + +.ms-Icon--sites:before { + content: '\e018'; +} + +.ms-Icon--listBullets:before { + content: '\e019'; +} + +.ms-Icon--calendarWeek:before { + content: '\e01a'; +} + +.ms-Icon--calendarWorkWeek:before { + content: '\e01b'; +} + +.ms-Icon--calendarDay:before { + content: '\e01c'; +} + +.ms-Icon--folderMove:before { + content: '\e01d'; +} + +.ms-Icon--panel:before { + content: '\e01e'; +} + +.ms-Icon--popout:before { + content: '\e01f'; +} + +.ms-Icon--menu:before { + content: '\e020'; +} + +.ms-Icon--home:before { + content: '\e021'; +} + +.ms-Icon--favorites:before { + content: '\e022'; +} + +.ms-Icon--phone:before { + content: '\e023'; +} + +.ms-Icon--mailSend:before { + content: '\e024'; +} + +.ms-Icon--save:before { + content: '\e025'; +} + +.ms-Icon--trash:before { + content: '\e026'; +} + +.ms-Icon--pencil:before { + content: '\e027'; +} + +.ms-Icon--flag:before { + content: '\e028'; +} + +.ms-Icon--reply:before { + content: '\e029'; +} + +.ms-Icon--miniatures:before { + content: '\e02a'; +} + +.ms-Icon--voicemail:before { + content: '\e02b'; +} + +.ms-Icon--play:before { + content: '\e02c'; +} + +.ms-Icon--pause:before { + content: '\e02d'; +} + +.ms-Icon--onlineAdd:before { + content: '\e02e'; +} + +.ms-Icon--onlineJoin:before { + content: '\e02f'; +} + +.ms-Icon--replyAll:before { + content: '\e030'; +} + +.ms-Icon--attachment:before { + content: '\e031'; +} + +.ms-Icon--drm:before { + content: '\e032'; +} + +.ms-Icon--pinDown:before { + content: '\e033'; +} + +.ms-Icon--refresh:before { + content: '\e034'; +} + +.ms-Icon--gear:before { + content: '\e035'; +} + +.ms-Icon--smiley:before { + content: '\e036'; +} + +.ms-Icon--info:before { + content: '\e037'; +} + +.ms-Icon--lock:before { + content: '\e038'; +} + +.ms-Icon--search:before { + content: '\e039'; +} + +.ms-Icon--questionReverse:before { + content: '\e03a'; +} + +.ms-Icon--notRecurring:before { + content: '\e03b'; +} + +.ms-Icon--tasks:before { + content: '\e040'; +} + +.ms-Icon--check:before { + content: '\e041'; +} + +.ms-Icon--x:before { + content: '\e042'; +} + +.ms-Icon--ellipsis:before { + content: '\e045'; +} + +.ms-Icon--dot:before { + content: '\e046'; +} + +.ms-Icon--arrowUp:before { + content: '\e047'; +} + +.ms-Icon--arrowDown:before { + content: '\e048'; +} + +.ms-Icon--arrowLeft:before { + content: '\e049'; +} + +.ms-Icon--arrowRight:before { + content: '\e04a'; +} + +.ms-Icon--download:before { + content: '\e04b'; +} + +.ms-Icon--directions:before { + content: '\e04c'; +} + +.ms-Icon--microphone:before { + content: '\e04f'; +} + +.ms-Icon--caretUp:before { + content: '\e051'; +} + +.ms-Icon--caretDown:before { + content: '\e052'; +} + +.ms-Icon--caretLeft:before { + content: '\e053'; +} + +.ms-Icon--caretRight:before { + content: '\e054'; +} + +.ms-Icon--caretUpLeft:before { + content: '\e05a'; +} + +.ms-Icon--caretUpRight:before { + content: '\e05b'; +} + +.ms-Icon--caretDownRight:before { + content: '\e05c'; +} + +.ms-Icon--caretDownLeft:before { + content: '\e05d'; +} + +.ms-Icon--note:before { + content: '\e06a'; +} + +.ms-Icon--noteReply:before { + content: '\e06b'; +} + +.ms-Icon--noteForward:before { + content: '\e06c'; +} + +.ms-Icon--key:before { + content: '\e06f'; +} + +.ms-Icon--tile:before { + content: '\e070'; +} + +.ms-Icon--taskRecurring:before { + content: '\e071'; +} + +.ms-Icon--starEmpty:before { + content: '\e073'; +} + +.ms-Icon--upload:before { + content: '\e076'; +} + +.ms-Icon--wrench:before { + content: '\e077'; +} + +.ms-Icon--share:before { + content: '\e078'; +} + +.ms-Icon--documentReply:before { + content: '\e079'; +} + +.ms-Icon--documentForward:before { + content: '\e07a'; +} + +.ms-Icon--partner:before { + content: '\e080'; +} + +.ms-Icon--reactivate:before { + content: '\e084'; +} + +.ms-Icon--sort:before { + content: '\e085'; +} + +.ms-Icon--personAdd:before { + content: '\e086'; +} + +.ms-Icon--chevronUp:before { + content: '\e087'; +} + +.ms-Icon--chevronDown:before { + content: '\e088'; +} + +.ms-Icon--chevronLeft:before { + content: '\e089'; +} + +.ms-Icon--chevronRight:before { + content: '\e08a'; +} + +.ms-Icon--peopleAdd:before { + content: '\e08c'; +} + +.ms-Icon--newsfeed:before { + content: '\e08d'; +} + +.ms-Icon--notebook:before { + content: '\e08e'; +} + +.ms-Icon--link:before { + content: '\e08f'; +} + +.ms-Icon--chevronsUp:before { + content: '\e090'; +} + +.ms-Icon--chevronsDown:before { + content: '\e091'; +} + +.ms-Icon--chevronsLeft:before { + content: '\e092'; +} + +.ms-Icon--chevronsRight:before { + content: '\e093'; +} + +.ms-Icon--clutter:before { + content: '\e09a'; +} + +.ms-Icon--subscribe:before { + content: '\e09c'; +} + +.ms-Icon--unsubscribe:before { + content: '\e09d'; +} + +.ms-Icon--personRemove:before { + content: '\e09e'; +} + +.ms-Icon--receiptForward:before { + content: '\e0a0'; +} + +.ms-Icon--receiptReply:before { + content: '\e0a1'; +} + +.ms-Icon--receiptCheck:before { + content: '\e0a2'; +} + +.ms-Icon--peopleRemove:before { + content: '\e0a3'; +} + +.ms-Icon--merge:before { + content: '\e0a4'; +} + +.ms-Icon--split:before { + content: '\e0a5'; +} + +.ms-Icon--eventCancel:before { + content: '\e0a6'; +} + +.ms-Icon--eventShare:before { + content: '\e0a7'; +} + +.ms-Icon--today:before { + content: '\e0a9'; +} + +.ms-Icon--oofReply:before { + content: '\e0aa'; +} + +.ms-Icon--voicemailReply:before { + content: '\e0ac'; +} + +.ms-Icon--voicemailForward:before { + content: '\e0ad'; +} + +.ms-Icon--ribbon:before { + content: '\e0af'; +} + +.ms-Icon--contact:before { + content: '\e0b0'; +} + +.ms-Icon--eye:before { + content: '\e0b1'; +} + +.ms-Icon--glasses:before { + content: '\e0b2'; +} + +.ms-Icon--print:before { + content: '\e100'; +} + +.ms-Icon--room:before { + content: '\e101'; +} + +.ms-Icon--post:before { + content: '\e102'; +} + +.ms-Icon--toggle:before { + content: '\e103'; +} + +.ms-Icon--touch:before { + content: '\e104'; +} + +.ms-Icon--clock:before { + content: '\e105'; +} + +.ms-Icon--fax:before { + content: '\e106'; +} + +.ms-Icon--lightning:before { + content: '\e110'; +} + +.ms-Icon--dialpad:before { + content: '\e111'; +} + +.ms-Icon--phoneTransfer:before { + content: '\e112'; +} + +.ms-Icon--phoneAdd:before { + content: '\e113'; +} + +.ms-Icon--late:before { + content: '\e114'; +} + +.ms-Icon--chatAdd:before { + content: '\e115'; +} + +.ms-Icon--conflict:before { + content: '\e116'; +} + +.ms-Icon--navigate:before { + content: '\e117'; +} + +.ms-Icon--camera:before { + content: '\e119'; +} + +.ms-Icon--filter:before { + content: '\e11a'; +} + +.ms-Icon--fullscreen:before { + content: '\e11b'; +} + +.ms-Icon--new:before { + content: '\e11c'; +} + +.ms-Icon--mailEmpty:before { + content: '\e11d'; +} + +.ms-Icon--editBox:before { + content: '\e11e'; +} + +.ms-Icon--waffle:before { + content: '\e11f'; +} + +.ms-Icon--work:before { + content: '\e120'; +} + +.ms-Icon--eventRecurring:before { + content: '\e121'; +} + +.ms-Icon--cart:before { + content: '\e122'; +} + +.ms-Icon--socialListening:before { + content: '\e123'; +} + +.ms-Icon--mapMarker:before { + content: '\e124'; +} + +.ms-Icon--org:before { + content: '\e125'; +} + +.ms-Icon--replyAlt:before { + content: '\e150'; +} + +.ms-Icon--replyAllAlt:before { + content: '\e152'; +} + +.ms-Icon--eventInfo:before { + content: '\e154'; +} + +.ms-Icon--group:before { + content: '\e155'; +} + +.ms-Icon--money:before { + content: '\e161'; +} + +.ms-Icon--graph:before { + content: '\e162'; +} + +.ms-Icon--noteEdit:before { + content: '\e163'; +} + +.ms-Icon--dashboard:before { + content: '\e164'; +} + +.ms-Icon--mailEdit:before { + content: '\e165'; +} + +.ms-Icon--pinLeft:before { + content: '\e167'; +} + +.ms-Icon--heart:before { + content: '\e16a'; +} + +.ms-Icon--heartEmpty:before { + content: '\e16b'; +} + +.ms-Icon--picture:before { + content: '\e16c'; +} + +.ms-Icon--cake:before { + content: '\e16d'; +} + +.ms-Icon--books:before { + content: '\e16e'; +} + +.ms-Icon--chart:before { + content: '\e16f'; +} + +.ms-Icon--video:before { + content: '\e170'; +} + +.ms-Icon--soccer:before { + content: '\e171'; +} + +.ms-Icon--meal:before { + content: '\e172'; +} + +.ms-Icon--balloon:before { + content: '\e173'; +} + +.ms-Icon--cat:before { + content: '\e174'; +} + +.ms-Icon--dog:before { + content: '\e175'; +} + +.ms-Icon--bag:before { + content: '\e176'; +} + +.ms-Icon--music:before { + content: '\e177'; +} + +.ms-Icon--stopwatch:before { + content: '\e178'; +} + +.ms-Icon--coffee:before { + content: '\e179'; +} + +.ms-Icon--briefcase:before { + content: '\e17a'; +} + +.ms-Icon--pill:before { + content: '\e17b'; +} + +.ms-Icon--trophy:before { + content: '\e17c'; +} + +.ms-Icon--firstAid:before { + content: '\e17d'; +} + +.ms-Icon--plane:before { + content: '\e17e'; +} + +.ms-Icon--page:before { + content: '\e17f'; +} + +.ms-Icon--car:before { + content: '\e180'; +} + +.ms-Icon--dogAlt:before { + content: '\e181'; +} + +.ms-Icon--document:before { + content: '\e182'; +} + +.ms-Icon--metadata:before { + content: '\e183'; +} + +.ms-Icon--pointItem:before { + content: '\e184'; +} + +.ms-Icon--text:before { + content: '\e185'; +} + +.ms-Icon--fieldText:before { + content: '\e186'; +} + +.ms-Icon--fieldNumber:before { + content: '\e187'; +} + +.ms-Icon--dropdown:before { + content: '\e188'; +} + +.ms-Icon--radioButton:before { + content: '\e189'; +} + +.ms-Icon--checkbox:before { + content: '\e18a'; +} + +.ms-Icon--story:before { + content: '\e18b'; +} + +.ms-Icon--bold:before { + content: '\e18c'; +} + +.ms-Icon--italic:before { + content: '\e18d'; +} + +.ms-Icon--underline:before { + content: '\e18e'; +} + +.ms-Icon--quote:before { + content: '\e18f'; +} + +.ms-Icon--styleRemove:before { + content: '\e190'; +} + +.ms-Icon--pictureAdd:before { + content: '\e191'; +} + +.ms-Icon--pictureRemove:before { + content: '\e192'; +} + +.ms-Icon--desktop:before { + content: '\e193'; +} + +.ms-Icon--tablet:before { + content: '\e194'; +} + +.ms-Icon--mobile:before { + content: '\e195'; +} + +.ms-Icon--table:before { + content: '\e196'; +} + +.ms-Icon--hide:before { + content: '\e197'; +} + +.ms-Icon--shield:before { + content: '\e198'; +} + +.ms-Icon--header:before { + content: '\e19a'; +} + +.ms-Icon--paint:before { + content: '\e19b'; +} + +.ms-Icon--support:before { + content: '\e19c'; +} + +.ms-Icon--settings:before { + content: '\e19d'; +} + +.ms-Icon--creditCard:before { + content: '\e19e'; +} + +.ms-Icon--reload:before { + content: '\e19f'; +} + +.ms-Icon--peopleSecurity:before { + content: '\e200'; +} + +.ms-Icon--fieldTextBox:before { + content: '\e203'; +} + +.ms-Icon--multiChoice:before { + content: '\e204'; +} + +.ms-Icon--fieldMail:before { + content: '\e205'; +} + +.ms-Icon--contactForm:before { + content: '\e206'; +} + +.ms-Icon--circleHalfFilled:before { + content: '\e207'; +} + +.ms-Icon--documentPDF:before { + content: '\e208'; +} + +.ms-Icon--bookmark:before { + content: '\e209'; +} + +.ms-Icon--circleUnfilled:before { + content: '\e20b'; +} + +.ms-Icon--circleFilled:before { + content: '\e20c'; +} + +.ms-Icon--textBox:before { + content: '\e20e'; +} + +.ms-Icon--drop:before { + content: '\e20f'; +} + +.ms-Icon--sun:before { + content: '\e210'; +} + +.ms-Icon--lifesaver:before { + content: '\e211'; +} + +.ms-Icon--lifesaverLock:before { + content: '\e212'; +} + +.ms-Icon--mailUnread:before { + content: '\e213'; +} + +.ms-Icon--mailRead:before { + content: '\e214'; +} + +.ms-Icon--inboxCheck:before { + content: '\e215'; +} + +.ms-Icon--folderSearch:before { + content: '\e216'; +} + +.ms-Icon--collapse:before { + content: '\e217'; +} + +.ms-Icon--expand:before { + content: '\e218'; +} + +.ms-Icon--ascending:before { + content: '\e219'; +} + +.ms-Icon--descending:before { + content: '\e21a'; +} + +.ms-Icon--filterClear:before { + content: '\e21b'; +} + +.ms-Icon--checkboxEmpty:before { + content: '\e21c'; +} + +.ms-Icon--checkboxMixed:before { + content: '\e21d'; +} + +.ms-Icon--boards:before { + content: '\e21e'; +} + +.ms-Icon--checkboxCheck:before { + content: '\e21f'; +} + +.ms-Icon--frowny:before { + content: '\e220'; +} + +.ms-Icon--lightBulb:before { + content: '\e221'; +} + +.ms-Icon--globe:before { + content: '\e222'; +} + +.ms-Icon--deviceWipe:before { + content: '\e223'; +} + +.ms-Icon--listCheck:before { + content: '\e226'; +} + +.ms-Icon--listGroup:before { + content: '\e227'; +} + +.ms-Icon--timeline:before { + content: '\e228'; +} + +.ms-Icon--fontIncrease:before { + content: '\e229'; +} + +.ms-Icon--fontDecrease:before { + content: '\e22a'; +} + +.ms-Icon--fontColor:before { + content: '\e22b'; +} + +.ms-Icon--mailCheck:before { + content: '\e22c'; +} + +.ms-Icon--mailDown:before { + content: '\e22d'; +} + +.ms-Icon--listCheckbox:before { + content: '\e22e'; +} + +.ms-Icon--sunAdd:before { + content: '\e22f'; +} + +.ms-Icon--sunQuestion:before { + content: '\e230'; +} + +.ms-Icon--chevronThinUp:before { + content: '\e231'; +} + +.ms-Icon--chevronThinDown:before { + content: '\e232'; +} + +.ms-Icon--chevronThinLeft:before { + content: '\e233'; +} + +.ms-Icon--chevronThinRight:before { + content: '\e234'; +} + +.ms-Icon--chevronThickUp:before { + content: '\e235'; +} + +.ms-Icon--chevronThickDown:before { + content: '\e236'; +} + +.ms-Icon--chevronThickLeft:before { + content: '\e237'; +} + +.ms-Icon--chevronThickRight:before { + content: '\e238'; +} + +.ms-Icon--linkRemove:before { + content: '\e239'; +} + +.ms-Icon--alertOutline:before { + content: '\e23b'; +} + +.ms-Icon--documentLandscape:before { + content: '\e23c'; +} + +.ms-Icon--documentAdd:before { + content: '\e23d'; +} + +.ms-Icon--toggleMiddle:before { + content: '\e23e'; +} + +.ms-Icon--embed:before { + content: '\e23f'; +} + +.ms-Icon--listNumbered:before { + content: '\e240'; +} + +.ms-Icon--peopleCheck:before { + content: '\e242'; +} + +.ms-Icon--caretUpOutline:before { + content: '\e243'; +} + +.ms-Icon--caretDownOutline:before { + content: '\e244'; +} + +.ms-Icon--caretLeftOutline:before { + content: '\e245'; +} + +.ms-Icon--caretRightOutline:before { + content: '\e246'; +} + +.ms-Icon--mailSync:before { + content: '\e248'; +} + +.ms-Icon--mailError:before { + content: '\e249'; +} + +.ms-Icon--mailPause:before { + content: '\e24a'; +} + +.ms-Icon--peopleSync:before { + content: '\e24b'; +} + +.ms-Icon--peopleError:before { + content: '\e24c'; +} + +.ms-Icon--peoplePause:before { + content: '\e24d'; +} + +.ms-Icon--circleBall:before { + content: '\e24e'; +} + +.ms-Icon--circleBalloons:before { + content: '\e24f'; +} + +.ms-Icon--circleCar:before { + content: '\e250'; +} + +.ms-Icon--circleCat:before { + content: '\e251'; +} + +.ms-Icon--circleCoffee:before { + content: '\e252'; +} + +.ms-Icon--circleDog:before { + content: '\e253'; +} + +.ms-Icon--circleLightning:before { + content: '\e254'; +} + +.ms-Icon--circlePill:before { + content: '\e255'; +} + +.ms-Icon--circlePlane:before { + content: '\e256'; +} + +.ms-Icon--circlePoodle:before { + content: '\e257'; +} + +.ms-Icon--checkPeople:before { + content: '\e259'; +} + +.ms-Icon--documentSearch:before { + content: '\e25a'; +} + +.ms-Icon--sortLines:before { + content: '\e25c'; +} + +.ms-Icon--calendarPublic:before { + content: '\e25d'; +} + +.ms-Icon--contactPublic:before { + content: '\e25e'; +} + +.ms-Icon--classNotebook:before { + content: '\e25f'; +} + +.ms-Icon--triangleUp:before { + content: '\e260'; +} + +.ms-Icon--triangleRight:before { + content: '\e261'; +} + +.ms-Icon--triangleDown:before { + content: '\e262'; +} + +.ms-Icon--triangleLeft:before { + content: '\e263'; +} + +.ms-Icon--triangleEmptyUp:before { + content: '\e264'; +} + +.ms-Icon--triangleEmptyRight:before { + content: '\e265'; +} + +.ms-Icon--triangleEmptyDown:before { + content: '\e266'; +} + +.ms-Icon--triangleEmptyLeft:before { + content: '\e267'; +} + +.ms-Icon--filePDF:before { + content: '\e268'; +} + +.ms-Icon--fileImage:before { + content: '\e26c'; +} + +.ms-Icon--fileDocument:before { + content: '\e26d'; +} + +.ms-Icon--listGroup2:before { + content: '\e26e'; +} + +.ms-Icon--copy:before { + content: '\e26f'; +} + +.ms-Icon--creditCardOutline:before { + content: '\e270'; +} + +.ms-Icon--mailPublic:before { + content: '\e272'; +} + +.ms-Icon--folderPublic:before { + content: '\e273'; +} + +.ms-Icon--teamwork:before { + content: '\e274'; +} + +.ms-Icon--move:before { + content: '\e275'; +} + +.ms-Icon--classroom:before { + content: '\e276'; +} + +.ms-Icon--menu2:before { + content: '\e277'; +} + +.ms-Icon--plus2:before { + content: '\e278'; +} + +.ms-Icon--tag:before { + content: '\e279'; +} + +.ms-Icon--arrowUp2:before { + content: '\e27a'; +} + +.ms-Icon--arrowDown2:before { + content: '\e27b'; +} + +.ms-Icon--circlePlus:before { + content: '\e27c'; +} + +.ms-Icon--circleInfo:before { + content: '\e27d'; +} + +.ms-Icon--section:before { + content: '\e27e'; +} + +.ms-Icon--sections:before { + content: '\e27f'; +} + +.ms-Icon--at:before { + content: '\e282'; +} + +.ms-Icon--arrowUpRight:before { + content: '\e283'; +} + +.ms-Icon--arrowDownRight:before { + content: '\e284'; +} + +.ms-Icon--arrowDownLeft:before { + content: '\e285'; +} + +.ms-Icon--arrowUpLeft:before { + content: '\e286'; +} + +.ms-Icon--bundle:before { + content: '\e287'; +} + +.ms-Icon--pictureEdit:before { + content: '\e288'; +} + +.ms-Icon--protectionCenter:before { + content: '\e289'; +} + +.ms-Icon--alert2:before { + content: '\e28a'; +} + +.ms-Icon--skypeCircleCheck:before { + content: '\e310'; +} + +.ms-Icon--skypeCircleClock:before { + content: '\e311'; +} + +.ms-Icon--skypeCircleMinus:before { + content: '\e312'; +} + +.ms-Icon--skypeCheck:before { + content: '\e315'; +} + +.ms-Icon--skypeClock:before { + content: '\e316'; +} + +.ms-Icon--skypeMinus:before { + content: '\e317'; +} + +.ms-Icon--circle { + position: relative; + display: inline-block; + font-size: 1rem; + width: 1em; + height: 1em; + margin: 0 0.5em 0 0; + padding: 0; + text-align: left; + -webkit-font-smoothing: antialiased; +} + +.ms-Icon--circle:before, +.ms-Icon--circle:after { + 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; + -ms-transform: scale(2); + transform: scale(2); + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + z-index: 0; +} + +.ms-Icon--circle.ms-Icon--star:before { + top: -2%; + left: 1%; +} + +.ms-Icon--circle.ms-Icon--person:before { + top: -2%; + left: -3%; +} + +.ms-Icon--circle.ms-Icon--alert:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Icon--circle.ms-Icon--people:before { + top: -4%; + left: -7%; +} + +.ms-Icon--circle.ms-Icon--bell:before { + top: -3%; +} + +.ms-Icon--circle.ms-Icon--scheduling:before { + top: -3%; + left: 6%; +} + +.ms-Icon--circle.ms-Icon--documents:before { + top: -1%; + left: -2%; +} + +.ms-Icon--circle.ms-Icon--listBullets:before { + top: -1%; + left: 5%; +} + +.ms-Icon--circle.ms-Icon--panel:before { + left: -2%; +} + +.ms-Icon--circle.ms-Icon--popout:before { + top: -2%; + left: -2%; +} + +.ms-Icon--circle.ms-Icon--home:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--favorites:before { + top: -2%; + left: 2%; +} + +.ms-Icon--circle.ms-Icon--phone:before { + top: -2%; + left: -2%; +} + +.ms-Icon--circle.ms-Icon--mailSend:before { + left: -10%; +} + +.ms-Icon--circle.ms-Icon--pencil:before { + top: -2%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--flag:before { + left: 3%; +} + +.ms-Icon--circle.ms-Icon--miniatures:before { + left: -3%; +} + +.ms-Icon--circle.ms-Icon--voicemail:before { + top: 2%; + left: -7%; +} + +.ms-Icon--circle.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; +} + +.ms-Icon--circle.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--gear:before { + left: 2%; +} + +.ms-Icon--circle.ms-Icon--check:before { + top: 3%; +} + +.ms-Icon--circle.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; +} + +.ms-Icon--circle.ms-Icon--directions:before { + left: 10%; +} + +.ms-Icon--circle.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDown:before { + top: 5%; + left: 2%; +} + +.ms-Icon--circle.ms-Icon--caretLeft:before { + left: -6%; +} + +.ms-Icon--circle.ms-Icon--caretRight:before { + left: 6%; +} + +.ms-Icon--circle.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; +} + +.ms-Icon--circle.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownRight:before { + left: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownLeft:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--note:before { + top: 2%; + left: -3%; +} + +.ms-Icon--circle.ms-Icon--noteReply:before { + top: 6%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Icon--circle.ms-Icon--key:before { + top: 5%; + left: 1%; +} + +.ms-Icon--circle.ms-Icon--tile:before { + top: -1%; + left: -18%; +} + +.ms-Icon--circle.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; +} + +.ms-Icon--circle.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; +} + +.ms-Icon--circle.ms-Icon--documentReply:before { + top: -2%; + left: 7%; +} + +.ms-Icon--circle.ms-Icon--documentForward:before { + left: 5%; +} + +.ms-Icon--circle.ms-Icon--partner:before { + top: -2%; +} + +.ms-Icon--circle.ms-Icon--reactivate:before { + top: -2%; + left: 6%; +} + +.ms-Icon--circle.ms-Icon--sort:before { + left: -19%; +} + +.ms-Icon--circle.ms-Icon--personAdd:before { + top: -2%; + left: 6%; +} + +.ms-Icon--circle.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Icon--circle.ms-Icon--chevronLeft:before { + left: -5%; +} + +.ms-Icon--circle.ms-Icon--chevronRight:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; +} + +.ms-Icon--circle.ms-Icon--newsfeed:before { + left: -4%; +} + +.ms-Icon--circle.ms-Icon--notebook:before { + left: -4%; +} + +.ms-Icon--circle.ms-Icon--link:before { + top: 2%; + left: -18%; +} + +.ms-Icon--circle.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--chevronsLeft:before { + left: -5%; +} + +.ms-Icon--circle.ms-Icon--chevronsRight:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--personRemove:before { + left: 5%; +} + +.ms-Icon--circle.ms-Icon--receiptForward:before { + left: -20%; +} + +.ms-Icon--circle.ms-Icon--receiptReply:before { + left: -20%; +} + +.ms-Icon--circle.ms-Icon--receiptCheck:before { + left: -20%; +} + +.ms-Icon--circle.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; +} + +.ms-Icon--circle.ms-Icon--merge:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--split:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--eventCancel:before { + left: -2%; +} + +.ms-Icon--circle.ms-Icon--today:before { + top: -2%; +} + +.ms-Icon--circle.ms-Icon--oofReply:before { + left: 5%; +} + +.ms-Icon--circle.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; +} + +.ms-Icon--circle.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; +} + +.ms-Icon--circle.ms-Icon--eye:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--post:before { + top: -4%; + left: 4%; +} + +.ms-Icon--circle.ms-Icon--fax:before { + top: -3%; + left: -2%; +} + +.ms-Icon--circle.ms-Icon--lightning:before { + top: 2%; + left: 1%; +} + +.ms-Icon--circle.ms-Icon--filter:before { + top: 7%; +} + +.ms-Icon--circle.ms-Icon--cart:before { + left: 3%; +} + +.ms-Icon--circle.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--replyAllAlt:before { + left: -16%; +} + +.ms-Icon--circle.ms-Icon--group:before { + left: -33%; +} + +.ms-Icon--circle.ms-Icon--money:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--noteEdit:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; +} + +.ms-Icon--circle.ms-Icon--pinLeft:before { + left: -6%; +} + +.ms-Icon--circle.ms-Icon--heart:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--cake:before { + top: -5%; +} + +.ms-Icon--circle.ms-Icon--books:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--video:before { + top: -3%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--balloon:before { + top: 4%; + left: -1%; +} + +.ms-Icon--circle.ms-Icon--music:before { + top: -2%; + left: -5%; +} + +.ms-Icon--circle.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--coffee:before { + top: -3%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--plane:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--dogAlt:before { + left: -15%; +} + +.ms-Icon--circle.ms-Icon--metadata:before { + top: -4%; + left: 4%; +} + +.ms-Icon--circle.ms-Icon--text:before { + top: -4%; + left: 10%; +} + +.ms-Icon--circle.ms-Icon--fieldText:before { + left: -14%; +} + +.ms-Icon--circle.ms-Icon--fieldNumber:before { + left: -14%; +} + +.ms-Icon--circle.ms-Icon--dropdown:before { + left: -14%; +} + +.ms-Icon--circle.ms-Icon--story:before { + left: -5%; +} + +.ms-Icon--circle.ms-Icon--bold:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--underline:before { + top: 4%; +} + +.ms-Icon--circle.ms-Icon--quote:before { + left: -4%; +} + +.ms-Icon--circle.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; +} + +.ms-Icon--circle.ms-Icon--pictureAdd:before { + left: -6%; +} + +.ms-Icon--circle.ms-Icon--pictureRemove:before { + left: -6%; +} + +.ms-Icon--circle.ms-Icon--mobile:before { + left: -3%; +} + +.ms-Icon--circle.ms-Icon--hide:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--header:before { + left: -9%; +} + +.ms-Icon--circle.ms-Icon--msn:before { + left: 3%; +} + +.ms-Icon--circle.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Icon--circle.ms-Icon--caretLeftOutline:before { + left: -5%; +} + +.ms-Icon--circle.ms-Icon--caretRightOutline:before { + left: 5%; +} + +.ms-Icon--circle.ms-Icon--sway:before { + left: -3%; +} + +.ms-Icon--circle.ms-Icon--mailSync:before { + left: 8%; + top: 3%; +} + +.ms-Icon--circle.ms-Icon--peopleSync:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--peopleError:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--peoplePause:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--documentSearch:before { + left: 8%; +} + +.ms-Icon--circle.ms-Icon--dynamicsMarketing:before { + left: -8%; +} + +.ms-u-slideRightIn10 { + animation-name: fadeIn, slideRightIn10; + -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; +} + +@keyframes slideRightIn10 { + from { + transform: translate3d(-10px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn20 { + animation-name: fadeIn, slideRightIn20; + -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; +} + +@keyframes slideRightIn20 { + from { + transform: translate3d(-20px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn40 { + 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; +} + +@keyframes slideRightIn40 { + from { + transform: translate3d(-40px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn10 { + animation-name: fadeIn, slideLeftIn10; + -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; +} + +@keyframes slideLeftIn10 { + from { + transform: translate3d(10px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn20 { + animation-name: fadeIn, slideLeftIn20; + -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; +} + +@keyframes slideLeftIn20 { + from { + transform: translate3d(20px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn40 { + 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; +} + +@keyframes slideLeftIn40 { + from { + transform: translate3d(40px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn400 { + animation-name: fadeIn, slideRightIn400; + -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; +} + +@keyframes slideRightIn400 { + from { + transform: translate3d(-400px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn400 { + animation-name: fadeIn, slideLeft400; + -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; +} + +@keyframes slideLeft400 { + from { + transform: translate3d(400px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideUpIn20 { + animation-name: fadeIn, slideUpIn20; + -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; +} + +@keyframes slideUpIn20 { + from { + transform: translate3d(0px, 20px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideUpIn10 { + 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; +} + +@keyframes slideUpIn10 { + from { + transform: translate3d(0px, 10px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideDownIn20 { + 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; +} + +@keyframes slideDownIn20 { + from { + transform: translate3d(0px, -20px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideDownIn10 { + 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; +} + +@keyframes slideDownIn10 { + from { + transform: translate3d(0px, -10px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightOut40 { + 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; +} + +@keyframes slideRightOut40 { + from { + transform: translate3d(0px, 0px, 0px); + } + + to { + transform: translate3d(40px, 0px, 0px); + } +} + +.ms-u-slideLeftOut40 { + 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; +} + +@keyframes slideLeftOut40 { + from { + transform: translate3d(0, 0px, 0px); + } + + to { + transform: translate3d(-40px, 0px, 0px); + } +} + +.ms-u-slideRightOut400 { + animation-name: fadeOut, slideRightOut400; + -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; +} + +@keyframes slideRightOut400 { + from { + transform: translate3d(0, 0px, 0px); + } + + to { + transform: translate3d(400px, 0px, 0px); + } +} + +.ms-u-slideLeftOut400 { + animation-name: fadeOut, slideLeftOut400; + -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; +} + +@keyframes slideLeftOut400 { + from { + transform: translate3d(0, 0px, 0px); + } + + to { + transform: translate3d(-400px, 0px, 0px); + } +} + +.ms-u-slideUpOut20 { + 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; +} + +@keyframes slideUpOut20 { + from { + transform: translate3d(0px, 0, 0px); + } + + to { + transform: translate3d(0px, -20px, 0px); + } +} + +.ms-u-slideUpOut10 { + animation-name: fadeOut, slideUpOut10; + -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; +} + +@keyframes slideUpOut10 { + from { + transform: translate3d(0px, 0, 0px); + } + + to { + transform: translate3d(0px, -10px, 0px); + } +} + +.ms-u-slideDownOut20 { + animation-name: fadeOut, slideDownOut20; + -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; +} + +@keyframes slideDownOut20 { + from { + transform: translate3d(0px, 0, 0px); + } + + to { + transform: translate3d(0px, 20px, 0px); + } +} + +.ms-u-slideDownOut10 { + animation-name: fadeOut, slideDownOut10; + -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; +} + +@keyframes slideDownOut10 { + from { + transform: translate3d(0px, 0, 0px); + } + + to { + transform: translate3d(0px, 10px, 0px); + } +} + +.ms-u-scaleUpIn100 { + animation-name: fadeIn, scaleUp100; + -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; +} + +@keyframes scaleUp100 { + from { + transform: scale3d(0.98, 0.98, 1); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.ms-u-scaleDownIn100 { + animation-name: fadeIn, scaleDown100; + -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; +} + +@keyframes scaleDown100 { + from { + transform: scale3d(1.03, 1.03, 1); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.ms-u-scaleUpOut103 { + animation-name: fadeOut, scaleUp103; + -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; +} + +@keyframes scaleUp103 { + from { + transform: scale3d(1, 1, 1); + } + + to { + transform: scale3d(1.03, 1.03, 1); + } +} + +.ms-u-scaleDownOut98 { + animation-name: fadeOut, scaleDown98; + -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; +} + +@keyframes scaleDown98 { + from { + transform: scale3d(1, 1, 1); + } + + to { + transform: scale3d(0.98, 0.98, 1); + } +} + +.ms-u-fadeIn400 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; +} + +.ms-u-fadeIn100 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.167s; +} + +.ms-u-fadeIn200 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.267s; +} + +.ms-u-fadeIn500 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.467s; +} + +@keyframes fadeIn { + from { + opacity: 0; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 1; + } +} + +.ms-u-fadeOut400 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; +} + +.ms-u-fadeOut100 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.1s; +} + +.ms-u-fadeOut200 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.167s; +} + +.ms-u-fadeOut500 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.467s; +} + +@keyframes fadeOut { + from { + opacity: 1; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 0; + } +} + +.ms-u-rotate90deg { + animation-name: rotate90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +@keyframes rotate90 { + from { + transform: rotateZ(0deg); + } + + to { + transform: rotateZ(90deg); + } +} + +.ms-u-rotateN90deg { + animation-name: rotateN90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +@keyframes rotateN90 { + from { + transform: rotateZ(90deg); + } + + to { + transform: rotateZ(0deg); + } +} + +.ms-u-expandCollapse400 { + transition: height 0.367s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-expandCollapse200 { + transition: height 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-expandCollapse100 { + transition: height 0.1s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-delay100 { + animation-delay: 0.167s; +} + +.ms-u-delay200 { + animation-delay: 0.267s; +} + +@media (max-width: 479px) { + .ms-u-hiddenSm, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 480px) and (max-width: 639px) { + .ms-u-hiddenMd, + .ms-u-hiddenMdUp, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLg, + .ms-u-hiddenLgUp, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1024px) and (max-width: 1365px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXl, + .ms-u-hiddenXlUp, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1366px) and (max-width: 1919px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxl, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1920px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .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%; + } + + .ms-u-md11 { + width: 91.66666666666666%; + } + + .ms-u-md10 { + width: 83.33333333333334%; + } + + .ms-u-md9 { + width: 75%; + } + + .ms-u-md8 { + width: 66.66666666666666%; + } + + .ms-u-md7 { + width: 58.333333333333336%; + } + + .ms-u-md6 { + width: 50%; + } + + .ms-u-md5 { + width: 41.66666666666667%; + } + + .ms-u-md4 { + width: 33.33333333333333%; + } + + .ms-u-md3 { + width: 25%; + } + + .ms-u-md2 { + width: 16.666666666666664%; + } + + .ms-u-md1 { + width: 8.333333333333332%; + } + + .ms-u-mdPull12 { + right: 100%; + } + + .ms-u-mdPull11 { + right: 91.66666666666666%; + } + + .ms-u-mdPull10 { + right: 83.33333333333334%; + } + + .ms-u-mdPull9 { + right: 75%; + } + + .ms-u-mdPull8 { + right: 66.66666666666666%; + } + + .ms-u-mdPull7 { + right: 58.333333333333336%; + } + + .ms-u-mdPull6 { + right: 50%; + } + + .ms-u-mdPull5 { + right: 41.66666666666667%; + } + + .ms-u-mdPull4 { + right: 33.33333333333333%; + } + + .ms-u-mdPull3 { + right: 25%; + } + + .ms-u-mdPull2 { + right: 16.666666666666664%; + } + + .ms-u-mdPull1 { + right: 8.333333333333332%; + } + + .ms-u-mdPull0 { + right: auto; + } + + .ms-u-mdPush12 { + left: 100%; + } + + .ms-u-mdPush11 { + left: 91.66666666666666%; + } + + .ms-u-mdPush10 { + left: 83.33333333333334%; + } + + .ms-u-mdPush9 { + left: 75%; + } + + .ms-u-mdPush8 { + left: 66.66666666666666%; + } + + .ms-u-mdPush7 { + left: 58.333333333333336%; + } + + .ms-u-mdPush6 { + left: 50%; + } + + .ms-u-mdPush5 { + left: 41.66666666666667%; + } + + .ms-u-mdPush4 { + left: 33.33333333333333%; + } + + .ms-u-mdPush3 { + left: 25%; + } + + .ms-u-mdPush2 { + left: 16.666666666666664%; + } + + .ms-u-mdPush1 { + left: 8.333333333333332%; + } + + .ms-u-mdPush0 { + left: auto; + } + + .ms-u-mdOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-mdOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-mdOffset9 { + margin-left: 75%; + } + + .ms-u-mdOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-mdOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-mdOffset6 { + margin-left: 50%; + } + + .ms-u-mdOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-mdOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-mdOffset3 { + margin-left: 25%; + } + + .ms-u-mdOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-mdOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-mdOffset0 { + margin-left: 0; + } +} + +@media (min-width: 640px) { + .ms-u-lg12 { + width: 100%; + } + + .ms-u-lg11 { + width: 91.66666666666666%; + } + + .ms-u-lg10 { + width: 83.33333333333334%; + } + + .ms-u-lg9 { + width: 75%; + } + + .ms-u-lg8 { + width: 66.66666666666666%; + } + + .ms-u-lg7 { + width: 58.333333333333336%; + } + + .ms-u-lg6 { + width: 50%; + } + + .ms-u-lg5 { + width: 41.66666666666667%; + } + + .ms-u-lg4 { + width: 33.33333333333333%; + } + + .ms-u-lg3 { + width: 25%; + } + + .ms-u-lg2 { + width: 16.666666666666664%; + } + + .ms-u-lg1 { + width: 8.333333333333332%; + } + + .ms-u-lgPull12 { + right: 100%; + } + + .ms-u-lgPull11 { + right: 91.66666666666666%; + } + + .ms-u-lgPull10 { + right: 83.33333333333334%; + } + + .ms-u-lgPull9 { + right: 75%; + } + + .ms-u-lgPull8 { + right: 66.66666666666666%; + } + + .ms-u-lgPull7 { + right: 58.333333333333336%; + } + + .ms-u-lgPull6 { + right: 50%; + } + + .ms-u-lgPull5 { + right: 41.66666666666667%; + } + + .ms-u-lgPull4 { + right: 33.33333333333333%; + } + + .ms-u-lgPull3 { + right: 25%; + } + + .ms-u-lgPull2 { + right: 16.666666666666664%; + } + + .ms-u-lgPull1 { + right: 8.333333333333332%; + } + + .ms-u-lgPull0 { + right: auto; + } + + .ms-u-lgPush12 { + left: 100%; + } + + .ms-u-lgPush11 { + left: 91.66666666666666%; + } + + .ms-u-lgPush10 { + left: 83.33333333333334%; + } + + .ms-u-lgPush9 { + left: 75%; + } + + .ms-u-lgPush8 { + left: 66.66666666666666%; + } + + .ms-u-lgPush7 { + left: 58.333333333333336%; + } + + .ms-u-lgPush6 { + left: 50%; + } + + .ms-u-lgPush5 { + left: 41.66666666666667%; + } + + .ms-u-lgPush4 { + left: 33.33333333333333%; + } + + .ms-u-lgPush3 { + left: 25%; + } + + .ms-u-lgPush2 { + left: 16.666666666666664%; + } + + .ms-u-lgPush1 { + left: 8.333333333333332%; + } + + .ms-u-lgPush0 { + left: auto; + } + + .ms-u-lgOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-lgOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-lgOffset9 { + margin-left: 75%; + } + + .ms-u-lgOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-lgOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-lgOffset6 { + margin-left: 50%; + } + + .ms-u-lgOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-lgOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-lgOffset3 { + margin-left: 25%; + } + + .ms-u-lgOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-lgOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-lgOffset0 { + margin-left: 0; + } +} + +@media (min-width: 1024px) { + .ms-u-xl12 { + width: 100%; + } + + .ms-u-xl11 { + width: 91.66666666666666%; + } + + .ms-u-xl10 { + width: 83.33333333333334%; + } + + .ms-u-xl9 { + width: 75%; + } + + .ms-u-xl8 { + width: 66.66666666666666%; + } + + .ms-u-xl7 { + width: 58.333333333333336%; + } + + .ms-u-xl6 { + width: 50%; + } + + .ms-u-xl5 { + width: 41.66666666666667%; + } + + .ms-u-xl4 { + width: 33.33333333333333%; + } + + .ms-u-xl3 { + width: 25%; + } + + .ms-u-xl2 { + width: 16.666666666666664%; + } + + .ms-u-xl1 { + width: 8.333333333333332%; + } + + .ms-u-xlPull12 { + right: 100%; + } + + .ms-u-xlPull11 { + right: 91.66666666666666%; + } + + .ms-u-xlPull10 { + right: 83.33333333333334%; + } + + .ms-u-xlPull9 { + right: 75%; + } + + .ms-u-xlPull8 { + right: 66.66666666666666%; + } + + .ms-u-xlPull7 { + right: 58.333333333333336%; + } + + .ms-u-xlPull6 { + right: 50%; + } + + .ms-u-xlPull5 { + right: 41.66666666666667%; + } + + .ms-u-xlPull4 { + right: 33.33333333333333%; + } + + .ms-u-xlPull3 { + right: 25%; + } + + .ms-u-xlPull2 { + right: 16.666666666666664%; + } + + .ms-u-xlPull1 { + right: 8.333333333333332%; + } + + .ms-u-xlPull0 { + right: auto; + } + + .ms-u-xlPush12 { + left: 100%; + } + + .ms-u-xlPush11 { + left: 91.66666666666666%; + } + + .ms-u-xlPush10 { + left: 83.33333333333334%; + } + + .ms-u-xlPush9 { + left: 75%; + } + + .ms-u-xlPush8 { + left: 66.66666666666666%; + } + + .ms-u-xlPush7 { + left: 58.333333333333336%; + } + + .ms-u-xlPush6 { + left: 50%; + } + + .ms-u-xlPush5 { + left: 41.66666666666667%; + } + + .ms-u-xlPush4 { + left: 33.33333333333333%; + } + + .ms-u-xlPush3 { + left: 25%; + } + + .ms-u-xlPush2 { + left: 16.666666666666664%; + } + + .ms-u-xlPush1 { + left: 8.333333333333332%; + } + + .ms-u-xlPush0 { + left: auto; + } + + .ms-u-xlOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-xlOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-xlOffset9 { + margin-left: 75%; + } + + .ms-u-xlOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-xlOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-xlOffset6 { + margin-left: 50%; + } + + .ms-u-xlOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-xlOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-xlOffset3 { + margin-left: 25%; + } + + .ms-u-xlOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-xlOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-xlOffset0 { + margin-left: 0; + } +} + +@media (min-width: 1366px) { + .ms-u-xxl12 { + width: 100%; + } + + .ms-u-xxl11 { + width: 91.66666666666666%; + } + + .ms-u-xxl10 { + width: 83.33333333333334%; + } + + .ms-u-xxl9 { + width: 75%; + } + + .ms-u-xxl8 { + width: 66.66666666666666%; + } + + .ms-u-xxl7 { + width: 58.333333333333336%; + } + + .ms-u-xxl6 { + width: 50%; + } + + .ms-u-xxl5 { + width: 41.66666666666667%; + } + + .ms-u-xxl4 { + width: 33.33333333333333%; + } + + .ms-u-xxl3 { + width: 25%; + } + + .ms-u-xxl2 { + width: 16.666666666666664%; + } + + .ms-u-xxl1 { + width: 8.333333333333332%; + } + + .ms-u-xxlPull12 { + right: 100%; + } + + .ms-u-xxlPull11 { + right: 91.66666666666666%; + } + + .ms-u-xxlPull10 { + right: 83.33333333333334%; + } + + .ms-u-xxlPull9 { + right: 75%; + } + + .ms-u-xxlPull8 { + right: 66.66666666666666%; + } + + .ms-u-xxlPull7 { + right: 58.333333333333336%; + } + + .ms-u-xxlPull6 { + right: 50%; + } + + .ms-u-xxlPull5 { + right: 41.66666666666667%; + } + + .ms-u-xxlPull4 { + right: 33.33333333333333%; + } + + .ms-u-xxlPull3 { + right: 25%; + } + + .ms-u-xxlPull2 { + right: 16.666666666666664%; + } + + .ms-u-xxlPull1 { + right: 8.333333333333332%; + } + + .ms-u-xxlPull0 { + right: auto; + } + + .ms-u-xxlPush12 { + left: 100%; + } + + .ms-u-xxlPush11 { + left: 91.66666666666666%; + } + + .ms-u-xxlPush10 { + left: 83.33333333333334%; + } + + .ms-u-xxlPush9 { + left: 75%; + } + + .ms-u-xxlPush8 { + left: 66.66666666666666%; + } + + .ms-u-xxlPush7 { + left: 58.333333333333336%; + } + + .ms-u-xxlPush6 { + left: 50%; + } + + .ms-u-xxlPush5 { + left: 41.66666666666667%; + } + + .ms-u-xxlPush4 { + left: 33.33333333333333%; + } + + .ms-u-xxlPush3 { + left: 25%; + } + + .ms-u-xxlPush2 { + left: 16.666666666666664%; + } + + .ms-u-xxlPush1 { + left: 8.333333333333332%; + } + + .ms-u-xxlPush0 { + left: auto; + } + + .ms-u-xxlOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-xxlOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-xxlOffset9 { + margin-left: 75%; + } + + .ms-u-xxlOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-xxlOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-xxlOffset6 { + margin-left: 50%; + } + + .ms-u-xxlOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-xxlOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-xxlOffset3 { + margin-left: 25%; + } + + .ms-u-xxlOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-xxlOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-xxlOffset0 { + margin-left: 0; + } +} + +@media (min-width: 1920px) { + .ms-u-xxxl12 { + width: 100%; + } + + .ms-u-xxxl11 { + width: 91.66666666666666%; + } + + .ms-u-xxxl10 { + width: 83.33333333333334%; + } + + .ms-u-xxxl9 { + width: 75%; + } + + .ms-u-xxxl8 { + width: 66.66666666666666%; + } + + .ms-u-xxxl7 { + width: 58.333333333333336%; + } + + .ms-u-xxxl6 { + width: 50%; + } + + .ms-u-xxxl5 { + width: 41.66666666666667%; + } + + .ms-u-xxxl4 { + width: 33.33333333333333%; + } + + .ms-u-xxxl3 { + width: 25%; + } + + .ms-u-xxxl2 { + width: 16.666666666666664%; + } + + .ms-u-xxxl1 { + width: 8.333333333333332%; + } + + .ms-u-xxxlPull12 { + right: 100%; + } + + .ms-u-xxxlPull11 { + right: 91.66666666666666%; + } + + .ms-u-xxxlPull10 { + right: 83.33333333333334%; + } + + .ms-u-xxxlPull9 { + right: 75%; + } + + .ms-u-xxxlPull8 { + right: 66.66666666666666%; + } + + .ms-u-xxxlPull7 { + right: 58.333333333333336%; + } + + .ms-u-xxxlPull6 { + right: 50%; + } + + .ms-u-xxxlPull5 { + right: 41.66666666666667%; + } + + .ms-u-xxxlPull4 { + right: 33.33333333333333%; + } + + .ms-u-xxxlPull3 { + right: 25%; + } + + .ms-u-xxxlPull2 { + right: 16.666666666666664%; + } + + .ms-u-xxxlPull1 { + right: 8.333333333333332%; + } + + .ms-u-xxxlPull0 { + right: auto; + } + + .ms-u-xxxlPush12 { + left: 100%; + } + + .ms-u-xxxlPush11 { + left: 91.66666666666666%; + } + + .ms-u-xxxlPush10 { + left: 83.33333333333334%; + } + + .ms-u-xxxlPush9 { + left: 75%; + } + + .ms-u-xxxlPush8 { + left: 66.66666666666666%; + } + + .ms-u-xxxlPush7 { + left: 58.333333333333336%; + } + + .ms-u-xxxlPush6 { + left: 50%; + } + + .ms-u-xxxlPush5 { + left: 41.66666666666667%; + } + + .ms-u-xxxlPush4 { + left: 33.33333333333333%; + } + + .ms-u-xxxlPush3 { + left: 25%; + } + + .ms-u-xxxlPush2 { + left: 16.666666666666664%; + } + + .ms-u-xxxlPush1 { + left: 8.333333333333332%; + } + + .ms-u-xxxlPush0 { + left: auto; + } + + .ms-u-xxxlOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-xxxlOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-xxxlOffset9 { + margin-left: 75%; + } + + .ms-u-xxxlOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-xxxlOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-xxxlOffset6 { + margin-left: 50%; + } + + .ms-u-xxxlOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-xxxlOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-xxxlOffset3 { + margin-left: 25%; + } + + .ms-u-xxxlOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-xxxlOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-xxxlOffset0 { + margin-left: 0; + } +} + +.ms-Grid { + box-sizing: border-box; + *zoom: 1; + padding: 0 8px; +} + +.ms-Grid:before, +.ms-Grid:after { + 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:before, +.ms-Grid-row:after { + 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; +} diff --git a/dist/css/fabric.min.css b/dist/css/fabric.min.css new file mode 100644 index 000000000..b2b898647 --- /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 3.0.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:#2b88d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#71afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#c7e0f4}.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:#2b88d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#71afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#c7e0f4}.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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:100}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l,.ms-font-xl{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi,.ms-font-xs{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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:#2b88d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#71afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#c7e0f4}.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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:200;font-style:normal}@font-face{font-family:Office365Icons;src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot);src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg#office365icons) format('svg');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none}.ms-Icon--circleEmpty:before{content:'\e000'}.ms-Icon--circleFill:before{content:'\e001'}.ms-Icon--placeholder:before{content:'\e002'}.ms-Icon--star:before{content:'\e003'}.ms-Icon--plus:before{content:'\e004'}.ms-Icon--minus:before{content:'\e005'}.ms-Icon--question:before{content:'\e006'}.ms-Icon--exclamation:before{content:'\e007'}.ms-Icon--person:before{content:'\e008'}.ms-Icon--mail:before{content:'\e009'}.ms-Icon--infoCircle:before{content:'\e00a'}.ms-Icon--alert:before{content:'\e00b'}.ms-Icon--xCircle:before{content:'\e00c'}.ms-Icon--mailOpen:before{content:'\e00d'}.ms-Icon--people:before{content:'\e00e'}.ms-Icon--bell:before{content:'\e010'}.ms-Icon--calendar:before{content:'\e011'}.ms-Icon--scheduling:before{content:'\e012'}.ms-Icon--event:before{content:'\e013'}.ms-Icon--folder:before{content:'\e014'}.ms-Icon--documents:before{content:'\e015'}.ms-Icon--onedrive:before{content:'\e016'}.ms-Icon--chat:before{content:'\e017'}.ms-Icon--sites:before{content:'\e018'}.ms-Icon--listBullets:before{content:'\e019'}.ms-Icon--calendarWeek:before{content:'\e01a'}.ms-Icon--calendarWorkWeek:before{content:'\e01b'}.ms-Icon--calendarDay:before{content:'\e01c'}.ms-Icon--folderMove:before{content:'\e01d'}.ms-Icon--panel:before{content:'\e01e'}.ms-Icon--popout:before{content:'\e01f'}.ms-Icon--menu:before{content:'\e020'}.ms-Icon--home:before{content:'\e021'}.ms-Icon--favorites:before{content:'\e022'}.ms-Icon--phone:before{content:'\e023'}.ms-Icon--mailSend:before{content:'\e024'}.ms-Icon--save:before{content:'\e025'}.ms-Icon--trash:before{content:'\e026'}.ms-Icon--pencil:before{content:'\e027'}.ms-Icon--flag:before{content:'\e028'}.ms-Icon--reply:before{content:'\e029'}.ms-Icon--miniatures:before{content:'\e02a'}.ms-Icon--voicemail:before{content:'\e02b'}.ms-Icon--play:before{content:'\e02c'}.ms-Icon--pause:before{content:'\e02d'}.ms-Icon--onlineAdd:before{content:'\e02e'}.ms-Icon--onlineJoin:before{content:'\e02f'}.ms-Icon--replyAll:before{content:'\e030'}.ms-Icon--attachment:before{content:'\e031'}.ms-Icon--drm:before{content:'\e032'}.ms-Icon--pinDown:before{content:'\e033'}.ms-Icon--refresh:before{content:'\e034'}.ms-Icon--gear:before{content:'\e035'}.ms-Icon--smiley:before{content:'\e036'}.ms-Icon--info:before{content:'\e037'}.ms-Icon--lock:before{content:'\e038'}.ms-Icon--search:before{content:'\e039'}.ms-Icon--questionReverse:before{content:'\e03a'}.ms-Icon--notRecurring:before{content:'\e03b'}.ms-Icon--tasks:before{content:'\e040'}.ms-Icon--check:before{content:'\e041'}.ms-Icon--x:before{content:'\e042'}.ms-Icon--ellipsis:before{content:'\e045'}.ms-Icon--dot:before{content:'\e046'}.ms-Icon--arrowUp:before{content:'\e047'}.ms-Icon--arrowDown:before{content:'\e048'}.ms-Icon--arrowLeft:before{content:'\e049'}.ms-Icon--arrowRight:before{content:'\e04a'}.ms-Icon--download:before{content:'\e04b'}.ms-Icon--directions:before{content:'\e04c'}.ms-Icon--microphone:before{content:'\e04f'}.ms-Icon--caretUp:before{content:'\e051'}.ms-Icon--caretDown:before{content:'\e052'}.ms-Icon--caretLeft:before{content:'\e053'}.ms-Icon--caretRight:before{content:'\e054'}.ms-Icon--caretUpLeft:before{content:'\e05a'}.ms-Icon--caretUpRight:before{content:'\e05b'}.ms-Icon--caretDownRight:before{content:'\e05c'}.ms-Icon--caretDownLeft:before{content:'\e05d'}.ms-Icon--note:before{content:'\e06a'}.ms-Icon--noteReply:before{content:'\e06b'}.ms-Icon--noteForward:before{content:'\e06c'}.ms-Icon--key:before{content:'\e06f'}.ms-Icon--tile:before{content:'\e070'}.ms-Icon--taskRecurring:before{content:'\e071'}.ms-Icon--starEmpty:before{content:'\e073'}.ms-Icon--upload:before{content:'\e076'}.ms-Icon--wrench:before{content:'\e077'}.ms-Icon--share:before{content:'\e078'}.ms-Icon--documentReply:before{content:'\e079'}.ms-Icon--documentForward:before{content:'\e07a'}.ms-Icon--partner:before{content:'\e080'}.ms-Icon--reactivate:before{content:'\e084'}.ms-Icon--sort:before{content:'\e085'}.ms-Icon--personAdd:before{content:'\e086'}.ms-Icon--chevronUp:before{content:'\e087'}.ms-Icon--chevronDown:before{content:'\e088'}.ms-Icon--chevronLeft:before{content:'\e089'}.ms-Icon--chevronRight:before{content:'\e08a'}.ms-Icon--peopleAdd:before{content:'\e08c'}.ms-Icon--newsfeed:before{content:'\e08d'}.ms-Icon--notebook:before{content:'\e08e'}.ms-Icon--link:before{content:'\e08f'}.ms-Icon--chevronsUp:before{content:'\e090'}.ms-Icon--chevronsDown:before{content:'\e091'}.ms-Icon--chevronsLeft:before{content:'\e092'}.ms-Icon--chevronsRight:before{content:'\e093'}.ms-Icon--clutter:before{content:'\e09a'}.ms-Icon--subscribe:before{content:'\e09c'}.ms-Icon--unsubscribe:before{content:'\e09d'}.ms-Icon--personRemove:before{content:'\e09e'}.ms-Icon--receiptForward:before{content:'\e0a0'}.ms-Icon--receiptReply:before{content:'\e0a1'}.ms-Icon--receiptCheck:before{content:'\e0a2'}.ms-Icon--peopleRemove:before{content:'\e0a3'}.ms-Icon--merge:before{content:'\e0a4'}.ms-Icon--split:before{content:'\e0a5'}.ms-Icon--eventCancel:before{content:'\e0a6'}.ms-Icon--eventShare:before{content:'\e0a7'}.ms-Icon--today:before{content:'\e0a9'}.ms-Icon--oofReply:before{content:'\e0aa'}.ms-Icon--voicemailReply:before{content:'\e0ac'}.ms-Icon--voicemailForward:before{content:'\e0ad'}.ms-Icon--ribbon:before{content:'\e0af'}.ms-Icon--contact:before{content:'\e0b0'}.ms-Icon--eye:before{content:'\e0b1'}.ms-Icon--glasses:before{content:'\e0b2'}.ms-Icon--print:before{content:'\e100'}.ms-Icon--room:before{content:'\e101'}.ms-Icon--post:before{content:'\e102'}.ms-Icon--toggle:before{content:'\e103'}.ms-Icon--touch:before{content:'\e104'}.ms-Icon--clock:before{content:'\e105'}.ms-Icon--fax:before{content:'\e106'}.ms-Icon--lightning:before{content:'\e110'}.ms-Icon--dialpad:before{content:'\e111'}.ms-Icon--phoneTransfer:before{content:'\e112'}.ms-Icon--phoneAdd:before{content:'\e113'}.ms-Icon--late:before{content:'\e114'}.ms-Icon--chatAdd:before{content:'\e115'}.ms-Icon--conflict:before{content:'\e116'}.ms-Icon--navigate:before{content:'\e117'}.ms-Icon--camera:before{content:'\e119'}.ms-Icon--filter:before{content:'\e11a'}.ms-Icon--fullscreen:before{content:'\e11b'}.ms-Icon--new:before{content:'\e11c'}.ms-Icon--mailEmpty:before{content:'\e11d'}.ms-Icon--editBox:before{content:'\e11e'}.ms-Icon--waffle:before{content:'\e11f'}.ms-Icon--work:before{content:'\e120'}.ms-Icon--eventRecurring:before{content:'\e121'}.ms-Icon--cart:before{content:'\e122'}.ms-Icon--socialListening:before{content:'\e123'}.ms-Icon--mapMarker:before{content:'\e124'}.ms-Icon--org:before{content:'\e125'}.ms-Icon--replyAlt:before{content:'\e150'}.ms-Icon--replyAllAlt:before{content:'\e152'}.ms-Icon--eventInfo:before{content:'\e154'}.ms-Icon--group:before{content:'\e155'}.ms-Icon--money:before{content:'\e161'}.ms-Icon--graph:before{content:'\e162'}.ms-Icon--noteEdit:before{content:'\e163'}.ms-Icon--dashboard:before{content:'\e164'}.ms-Icon--mailEdit:before{content:'\e165'}.ms-Icon--pinLeft:before{content:'\e167'}.ms-Icon--heart:before{content:'\e16a'}.ms-Icon--heartEmpty:before{content:'\e16b'}.ms-Icon--picture:before{content:'\e16c'}.ms-Icon--cake:before{content:'\e16d'}.ms-Icon--books:before{content:'\e16e'}.ms-Icon--chart:before{content:'\e16f'}.ms-Icon--video:before{content:'\e170'}.ms-Icon--soccer:before{content:'\e171'}.ms-Icon--meal:before{content:'\e172'}.ms-Icon--balloon:before{content:'\e173'}.ms-Icon--cat:before{content:'\e174'}.ms-Icon--dog:before{content:'\e175'}.ms-Icon--bag:before{content:'\e176'}.ms-Icon--music:before{content:'\e177'}.ms-Icon--stopwatch:before{content:'\e178'}.ms-Icon--coffee:before{content:'\e179'}.ms-Icon--briefcase:before{content:'\e17a'}.ms-Icon--pill:before{content:'\e17b'}.ms-Icon--trophy:before{content:'\e17c'}.ms-Icon--firstAid:before{content:'\e17d'}.ms-Icon--plane:before{content:'\e17e'}.ms-Icon--page:before{content:'\e17f'}.ms-Icon--car:before{content:'\e180'}.ms-Icon--dogAlt:before{content:'\e181'}.ms-Icon--document:before{content:'\e182'}.ms-Icon--metadata:before{content:'\e183'}.ms-Icon--pointItem:before{content:'\e184'}.ms-Icon--text:before{content:'\e185'}.ms-Icon--fieldText:before{content:'\e186'}.ms-Icon--fieldNumber:before{content:'\e187'}.ms-Icon--dropdown:before{content:'\e188'}.ms-Icon--radioButton:before{content:'\e189'}.ms-Icon--checkbox:before{content:'\e18a'}.ms-Icon--story:before{content:'\e18b'}.ms-Icon--bold:before{content:'\e18c'}.ms-Icon--italic:before{content:'\e18d'}.ms-Icon--underline:before{content:'\e18e'}.ms-Icon--quote:before{content:'\e18f'}.ms-Icon--styleRemove:before{content:'\e190'}.ms-Icon--pictureAdd:before{content:'\e191'}.ms-Icon--pictureRemove:before{content:'\e192'}.ms-Icon--desktop:before{content:'\e193'}.ms-Icon--tablet:before{content:'\e194'}.ms-Icon--mobile:before{content:'\e195'}.ms-Icon--table:before{content:'\e196'}.ms-Icon--hide:before{content:'\e197'}.ms-Icon--shield:before{content:'\e198'}.ms-Icon--header:before{content:'\e19a'}.ms-Icon--paint:before{content:'\e19b'}.ms-Icon--support:before{content:'\e19c'}.ms-Icon--settings:before{content:'\e19d'}.ms-Icon--creditCard:before{content:'\e19e'}.ms-Icon--reload:before{content:'\e19f'}.ms-Icon--peopleSecurity:before{content:'\e200'}.ms-Icon--fieldTextBox:before{content:'\e203'}.ms-Icon--multiChoice:before{content:'\e204'}.ms-Icon--fieldMail:before{content:'\e205'}.ms-Icon--contactForm:before{content:'\e206'}.ms-Icon--circleHalfFilled:before{content:'\e207'}.ms-Icon--documentPDF:before{content:'\e208'}.ms-Icon--bookmark:before{content:'\e209'}.ms-Icon--circleUnfilled:before{content:'\e20b'}.ms-Icon--circleFilled:before{content:'\e20c'}.ms-Icon--textBox:before{content:'\e20e'}.ms-Icon--drop:before{content:'\e20f'}.ms-Icon--sun:before{content:'\e210'}.ms-Icon--lifesaver:before{content:'\e211'}.ms-Icon--lifesaverLock:before{content:'\e212'}.ms-Icon--mailUnread:before{content:'\e213'}.ms-Icon--mailRead:before{content:'\e214'}.ms-Icon--inboxCheck:before{content:'\e215'}.ms-Icon--folderSearch:before{content:'\e216'}.ms-Icon--collapse:before{content:'\e217'}.ms-Icon--expand:before{content:'\e218'}.ms-Icon--ascending:before{content:'\e219'}.ms-Icon--descending:before{content:'\e21a'}.ms-Icon--filterClear:before{content:'\e21b'}.ms-Icon--checkboxEmpty:before{content:'\e21c'}.ms-Icon--checkboxMixed:before{content:'\e21d'}.ms-Icon--boards:before{content:'\e21e'}.ms-Icon--checkboxCheck:before{content:'\e21f'}.ms-Icon--frowny:before{content:'\e220'}.ms-Icon--lightBulb:before{content:'\e221'}.ms-Icon--globe:before{content:'\e222'}.ms-Icon--deviceWipe:before{content:'\e223'}.ms-Icon--listCheck:before{content:'\e226'}.ms-Icon--listGroup:before{content:'\e227'}.ms-Icon--timeline:before{content:'\e228'}.ms-Icon--fontIncrease:before{content:'\e229'}.ms-Icon--fontDecrease:before{content:'\e22a'}.ms-Icon--fontColor:before{content:'\e22b'}.ms-Icon--mailCheck:before{content:'\e22c'}.ms-Icon--mailDown:before{content:'\e22d'}.ms-Icon--listCheckbox:before{content:'\e22e'}.ms-Icon--sunAdd:before{content:'\e22f'}.ms-Icon--sunQuestion:before{content:'\e230'}.ms-Icon--chevronThinUp:before{content:'\e231'}.ms-Icon--chevronThinDown:before{content:'\e232'}.ms-Icon--chevronThinLeft:before{content:'\e233'}.ms-Icon--chevronThinRight:before{content:'\e234'}.ms-Icon--chevronThickUp:before{content:'\e235'}.ms-Icon--chevronThickDown:before{content:'\e236'}.ms-Icon--chevronThickLeft:before{content:'\e237'}.ms-Icon--chevronThickRight:before{content:'\e238'}.ms-Icon--linkRemove:before{content:'\e239'}.ms-Icon--alertOutline:before{content:'\e23b'}.ms-Icon--documentLandscape:before{content:'\e23c'}.ms-Icon--documentAdd:before{content:'\e23d'}.ms-Icon--toggleMiddle:before{content:'\e23e'}.ms-Icon--embed:before{content:'\e23f'}.ms-Icon--listNumbered:before{content:'\e240'}.ms-Icon--peopleCheck:before{content:'\e242'}.ms-Icon--caretUpOutline:before{content:'\e243'}.ms-Icon--caretDownOutline:before{content:'\e244'}.ms-Icon--caretLeftOutline:before{content:'\e245'}.ms-Icon--caretRightOutline:before{content:'\e246'}.ms-Icon--mailSync:before{content:'\e248'}.ms-Icon--mailError:before{content:'\e249'}.ms-Icon--mailPause:before{content:'\e24a'}.ms-Icon--peopleSync:before{content:'\e24b'}.ms-Icon--peopleError:before{content:'\e24c'}.ms-Icon--peoplePause:before{content:'\e24d'}.ms-Icon--circleBall:before{content:'\e24e'}.ms-Icon--circleBalloons:before{content:'\e24f'}.ms-Icon--circleCar:before{content:'\e250'}.ms-Icon--circleCat:before{content:'\e251'}.ms-Icon--circleCoffee:before{content:'\e252'}.ms-Icon--circleDog:before{content:'\e253'}.ms-Icon--circleLightning:before{content:'\e254'}.ms-Icon--circlePill:before{content:'\e255'}.ms-Icon--circlePlane:before{content:'\e256'}.ms-Icon--circlePoodle:before{content:'\e257'}.ms-Icon--checkPeople:before{content:'\e259'}.ms-Icon--documentSearch:before{content:'\e25a'}.ms-Icon--sortLines:before{content:'\e25c'}.ms-Icon--calendarPublic:before{content:'\e25d'}.ms-Icon--contactPublic:before{content:'\e25e'}.ms-Icon--classNotebook:before{content:'\e25f'}.ms-Icon--triangleUp:before{content:'\e260'}.ms-Icon--triangleRight:before{content:'\e261'}.ms-Icon--triangleDown:before{content:'\e262'}.ms-Icon--triangleLeft:before{content:'\e263'}.ms-Icon--triangleEmptyUp:before{content:'\e264'}.ms-Icon--triangleEmptyRight:before{content:'\e265'}.ms-Icon--triangleEmptyDown:before{content:'\e266'}.ms-Icon--triangleEmptyLeft:before{content:'\e267'}.ms-Icon--filePDF:before{content:'\e268'}.ms-Icon--fileImage:before{content:'\e26c'}.ms-Icon--fileDocument:before{content:'\e26d'}.ms-Icon--listGroup2:before{content:'\e26e'}.ms-Icon--copy:before{content:'\e26f'}.ms-Icon--creditCardOutline:before{content:'\e270'}.ms-Icon--mailPublic:before{content:'\e272'}.ms-Icon--folderPublic:before{content:'\e273'}.ms-Icon--teamwork:before{content:'\e274'}.ms-Icon--move:before{content:'\e275'}.ms-Icon--classroom:before{content:'\e276'}.ms-Icon--menu2:before{content:'\e277'}.ms-Icon--plus2:before{content:'\e278'}.ms-Icon--tag:before{content:'\e279'}.ms-Icon--arrowUp2:before{content:'\e27a'}.ms-Icon--arrowDown2:before{content:'\e27b'}.ms-Icon--circlePlus:before{content:'\e27c'}.ms-Icon--circleInfo:before{content:'\e27d'}.ms-Icon--section:before{content:'\e27e'}.ms-Icon--sections:before{content:'\e27f'}.ms-Icon--at:before{content:'\e282'}.ms-Icon--arrowUpRight:before{content:'\e283'}.ms-Icon--arrowDownRight:before{content:'\e284'}.ms-Icon--arrowDownLeft:before{content:'\e285'}.ms-Icon--arrowUpLeft:before{content:'\e286'}.ms-Icon--bundle:before{content:'\e287'}.ms-Icon--pictureEdit:before{content:'\e288'}.ms-Icon--protectionCenter:before{content:'\e289'}.ms-Icon--alert2:before{content:'\e28a'}.ms-Icon--skypeCircleCheck:before{content:'\e310'}.ms-Icon--skypeCircleClock:before{content:'\e311'}.ms-Icon--skypeCircleMinus:before{content:'\e312'}.ms-Icon--skypeCheck:before{content:'\e315'}.ms-Icon--skypeClock:before{content:'\e316'}.ms-Icon--skypeMinus:before{content:'\e317'}.ms-Icon--circle{position:relative;display:inline-block;font-size:1rem;width:1em;height:1em;margin:0 .5em 0 0;padding:0;text-align:left;-webkit-font-smoothing:antialiased}.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--circle.ms-Icon--star:before{top:-2%;left:1%}.ms-Icon--circle.ms-Icon--person:before{top:-2%;left:-3%}.ms-Icon--circle.ms-Icon--alert:before{top:-4%}.ms-Icon--circle.ms-Icon--mailOpen:before{top:-5%}.ms-Icon--circle.ms-Icon--people:before{top:-4%;left:-7%}.ms-Icon--circle.ms-Icon--bell:before{top:-3%}.ms-Icon--circle.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Icon--circle.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Icon--circle.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Icon--circle.ms-Icon--panel:before{left:-2%}.ms-Icon--circle.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Icon--circle.ms-Icon--home:before{top:-4%}.ms-Icon--circle.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Icon--circle.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Icon--circle.ms-Icon--mailSend:before{left:-10%}.ms-Icon--circle.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Icon--circle.ms-Icon--flag:before{left:3%}.ms-Icon--circle.ms-Icon--miniatures:before{left:-3%}.ms-Icon--circle.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Icon--circle.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Icon--circle.ms-Icon--pinDown:before{top:5%}.ms-Icon--circle.ms-Icon--gear:before{left:2%}.ms-Icon--circle.ms-Icon--check:before{top:3%}.ms-Icon--circle.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Icon--circle.ms-Icon--directions:before{left:10%}.ms-Icon--circle.ms-Icon--microphone:before{top:-3%}.ms-Icon--circle.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Icon--circle.ms-Icon--caretLeft:before{left:-6%}.ms-Icon--circle.ms-Icon--caretRight:before{left:6%}.ms-Icon--circle.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Icon--circle.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Icon--circle.ms-Icon--caretDownRight:before{left:-3%}.ms-Icon--circle.ms-Icon--caretDownLeft:before{left:4%}.ms-Icon--circle.ms-Icon--note:before{top:2%;left:-3%}.ms-Icon--circle.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Icon--circle.ms-Icon--noteForward:before{top:6%}.ms-Icon--circle.ms-Icon--key:before{top:5%;left:1%}.ms-Icon--circle.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Icon--circle.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Icon--circle.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Icon--circle.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Icon--circle.ms-Icon--documentForward:before{left:5%}.ms-Icon--circle.ms-Icon--partner:before{top:-2%}.ms-Icon--circle.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Icon--circle.ms-Icon--sort:before{left:-19%}.ms-Icon--circle.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Icon--circle.ms-Icon--chevronDown:before{top:4%}.ms-Icon--circle.ms-Icon--chevronLeft:before{left:-5%}.ms-Icon--circle.ms-Icon--chevronRight:before{left:4%}.ms-Icon--circle.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Icon--circle.ms-Icon--newsfeed:before,.ms-Icon--circle.ms-Icon--notebook:before{left:-4%}.ms-Icon--circle.ms-Icon--link:before{top:2%;left:-18%}.ms-Icon--circle.ms-Icon--chevronsDown:before{top:5%}.ms-Icon--circle.ms-Icon--chevronsLeft:before{left:-5%}.ms-Icon--circle.ms-Icon--chevronsRight:before{left:4%}.ms-Icon--circle.ms-Icon--personRemove:before{left:5%}.ms-Icon--circle.ms-Icon--receiptCheck:before,.ms-Icon--circle.ms-Icon--receiptForward:before,.ms-Icon--circle.ms-Icon--receiptReply:before{left:-20%}.ms-Icon--circle.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Icon--circle.ms-Icon--merge:before,.ms-Icon--circle.ms-Icon--split:before{top:2%}.ms-Icon--circle.ms-Icon--eventCancel:before{left:-2%}.ms-Icon--circle.ms-Icon--today:before{top:-2%}.ms-Icon--circle.ms-Icon--oofReply:before{left:5%}.ms-Icon--circle.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Icon--circle.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Icon--circle.ms-Icon--eye:before{top:-4%}.ms-Icon--circle.ms-Icon--post:before{top:-4%;left:4%}.ms-Icon--circle.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Icon--circle.ms-Icon--lightning:before{top:2%;left:1%}.ms-Icon--circle.ms-Icon--filter:before{top:7%}.ms-Icon--circle.ms-Icon--cart:before{left:3%}.ms-Icon--circle.ms-Icon--mapMarker:before,.ms-Icon--circle.ms-Icon--socialListening:before{top:2%}.ms-Icon--circle.ms-Icon--replyAllAlt:before{left:-16%}.ms-Icon--circle.ms-Icon--group:before{left:-33%}.ms-Icon--circle.ms-Icon--money:before{left:-8%}.ms-Icon--circle.ms-Icon--noteEdit:before{left:4%}.ms-Icon--circle.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Icon--circle.ms-Icon--pinLeft:before{left:-6%}.ms-Icon--circle.ms-Icon--heart:before,.ms-Icon--circle.ms-Icon--heartEmpty:before{top:5%}.ms-Icon--circle.ms-Icon--cake:before{top:-5%}.ms-Icon--circle.ms-Icon--books:before{left:-8%}.ms-Icon--circle.ms-Icon--video:before{top:-3%;left:3%}.ms-Icon--circle.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Icon--circle.ms-Icon--music:before{top:-2%;left:-5%}.ms-Icon--circle.ms-Icon--coffee:before,.ms-Icon--circle.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Icon--circle.ms-Icon--plane:before{left:4%}.ms-Icon--circle.ms-Icon--dogAlt:before{left:-15%}.ms-Icon--circle.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Icon--circle.ms-Icon--text:before{top:-4%;left:10%}.ms-Icon--circle.ms-Icon--dropdown:before,.ms-Icon--circle.ms-Icon--fieldNumber:before,.ms-Icon--circle.ms-Icon--fieldText:before{left:-14%}.ms-Icon--circle.ms-Icon--story:before{left:-5%}.ms-Icon--circle.ms-Icon--bold:before{left:4%}.ms-Icon--circle.ms-Icon--underline:before{top:4%}.ms-Icon--circle.ms-Icon--quote:before{left:-4%}.ms-Icon--circle.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Icon--circle.ms-Icon--pictureAdd:before,.ms-Icon--circle.ms-Icon--pictureRemove:before{left:-6%}.ms-Icon--circle.ms-Icon--mobile:before{left:-3%}.ms-Icon--circle.ms-Icon--hide:before{top:-4%}.ms-Icon--circle.ms-Icon--header:before{left:-9%}.ms-Icon--circle.ms-Icon--msn:before{left:3%}.ms-Icon--circle.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Icon--circle.ms-Icon--caretDownOutline:before{top:6%}.ms-Icon--circle.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Icon--circle.ms-Icon--caretRightOutline:before{left:5%}.ms-Icon--circle.ms-Icon--sway:before{left:-3%}.ms-Icon--circle.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Icon--circle.ms-Icon--peopleError:before,.ms-Icon--circle.ms-Icon--peoplePause:before,.ms-Icon--circle.ms-Icon--peopleSync:before{left:-8%}.ms-Icon--circle.ms-Icon--documentSearch:before{left:8%}.ms-Icon--circle.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-u-slideRightIn10{animation-name:y,a;-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 a{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn20{animation-name:y,b;-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 b{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn40{animation-name:y,c;-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 c{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn10{animation-name:y,d;-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 d{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn20{animation-name:y,e;-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 e{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn40{animation-name:y,f;-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 f{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn400{animation-name:y,g;-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 g{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn400{animation-name:y,h;-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 h{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn20{animation-name:y,i;-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 i{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn10{animation-name:y,j;-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 j{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn20{animation-name:y,k;-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 k{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn10{animation-name:y,l;-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 l{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}.ms-u-slideRightOut40{animation-name:z,m;-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 m{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{animation-name:z,n;-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 n{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{animation-name:z,o;-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 o{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{animation-name:z,p;-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 p{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{animation-name:z,q;-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 q{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{animation-name:z,r;-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 r{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{animation-name:z,s;-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 s{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{animation-name:z,t;-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 t{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{animation-name:y,u;-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 u{0%{transform:scale3d(.98,.98,1)}to{transform:scaleX(1)}}.ms-u-scaleDownIn100{animation-name:y,v;-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 v{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleX(1)}}.ms-u-scaleUpOut103{animation-name:z,w;-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 w{0%{transform:scaleX(1)}to{transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{animation-name:z,x;-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 x{0%{transform:scaleX(1)}to{transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;-webkit-animation-name:y;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:y;animation-fill-mode:both}.ms-u-fadeIn100{animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;-webkit-animation-name:y;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:y;animation-fill-mode:both;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;-webkit-animation-name:y;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:y;animation-fill-mode:both;animation-duration:.467s}@keyframes y{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:z;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:z;animation-fill-mode:both}.ms-u-fadeOut100{animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;-webkit-animation-name:z;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:z;animation-fill-mode:both;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;-webkit-animation-name:z;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:z;animation-fill-mode:both;animation-duration:.467s}@keyframes z{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{animation-name:A;-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 A{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}.ms-u-rotateN90deg{animation-name:B;-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 B{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%}.ms-u-md11{width:91.66666666666666%}.ms-u-md10{width:83.33333333333334%}.ms-u-md9{width:75%}.ms-u-md8{width:66.66666666666666%}.ms-u-md7{width:58.333333333333336%}.ms-u-md6{width:50%}.ms-u-md5{width:41.66666666666667%}.ms-u-md4{width:33.33333333333333%}.ms-u-md3{width:25%}.ms-u-md2{width:16.666666666666664%}.ms-u-md1{width:8.333333333333332%}.ms-u-mdPull12{right:100%}.ms-u-mdPull11{right:91.66666666666666%}.ms-u-mdPull10{right:83.33333333333334%}.ms-u-mdPull9{right:75%}.ms-u-mdPull8{right:66.66666666666666%}.ms-u-mdPull7{right:58.333333333333336%}.ms-u-mdPull6{right:50%}.ms-u-mdPull5{right:41.66666666666667%}.ms-u-mdPull4{right:33.33333333333333%}.ms-u-mdPull3{right:25%}.ms-u-mdPull2{right:16.666666666666664%}.ms-u-mdPull1{right:8.333333333333332%}.ms-u-mdPull0{right:auto}.ms-u-mdPush12{left:100%}.ms-u-mdPush11{left:91.66666666666666%}.ms-u-mdPush10{left:83.33333333333334%}.ms-u-mdPush9{left:75%}.ms-u-mdPush8{left:66.66666666666666%}.ms-u-mdPush7{left:58.333333333333336%}.ms-u-mdPush6{left:50%}.ms-u-mdPush5{left:41.66666666666667%}.ms-u-mdPush4{left:33.33333333333333%}.ms-u-mdPush3{left:25%}.ms-u-mdPush2{left:16.666666666666664%}.ms-u-mdPush1{left:8.333333333333332%}.ms-u-mdPush0{left:auto}.ms-u-mdOffset11{margin-left:91.66666666666666%}.ms-u-mdOffset10{margin-left:83.33333333333334%}.ms-u-mdOffset9{margin-left:75%}.ms-u-mdOffset8{margin-left:66.66666666666666%}.ms-u-mdOffset7{margin-left:58.333333333333336%}.ms-u-mdOffset6{margin-left:50%}.ms-u-mdOffset5{margin-left:41.66666666666667%}.ms-u-mdOffset4{margin-left:33.33333333333333%}.ms-u-mdOffset3{margin-left:25%}.ms-u-mdOffset2{margin-left:16.666666666666664%}.ms-u-mdOffset1{margin-left:8.333333333333332%}.ms-u-mdOffset0{margin-left:0}}@media (min-width:640px){.ms-u-lg12{width:100%}.ms-u-lg11{width:91.66666666666666%}.ms-u-lg10{width:83.33333333333334%}.ms-u-lg9{width:75%}.ms-u-lg8{width:66.66666666666666%}.ms-u-lg7{width:58.333333333333336%}.ms-u-lg6{width:50%}.ms-u-lg5{width:41.66666666666667%}.ms-u-lg4{width:33.33333333333333%}.ms-u-lg3{width:25%}.ms-u-lg2{width:16.666666666666664%}.ms-u-lg1{width:8.333333333333332%}.ms-u-lgPull12{right:100%}.ms-u-lgPull11{right:91.66666666666666%}.ms-u-lgPull10{right:83.33333333333334%}.ms-u-lgPull9{right:75%}.ms-u-lgPull8{right:66.66666666666666%}.ms-u-lgPull7{right:58.333333333333336%}.ms-u-lgPull6{right:50%}.ms-u-lgPull5{right:41.66666666666667%}.ms-u-lgPull4{right:33.33333333333333%}.ms-u-lgPull3{right:25%}.ms-u-lgPull2{right:16.666666666666664%}.ms-u-lgPull1{right:8.333333333333332%}.ms-u-lgPull0{right:auto}.ms-u-lgPush12{left:100%}.ms-u-lgPush11{left:91.66666666666666%}.ms-u-lgPush10{left:83.33333333333334%}.ms-u-lgPush9{left:75%}.ms-u-lgPush8{left:66.66666666666666%}.ms-u-lgPush7{left:58.333333333333336%}.ms-u-lgPush6{left:50%}.ms-u-lgPush5{left:41.66666666666667%}.ms-u-lgPush4{left:33.33333333333333%}.ms-u-lgPush3{left:25%}.ms-u-lgPush2{left:16.666666666666664%}.ms-u-lgPush1{left:8.333333333333332%}.ms-u-lgPush0{left:auto}.ms-u-lgOffset11{margin-left:91.66666666666666%}.ms-u-lgOffset10{margin-left:83.33333333333334%}.ms-u-lgOffset9{margin-left:75%}.ms-u-lgOffset8{margin-left:66.66666666666666%}.ms-u-lgOffset7{margin-left:58.333333333333336%}.ms-u-lgOffset6{margin-left:50%}.ms-u-lgOffset5{margin-left:41.66666666666667%}.ms-u-lgOffset4{margin-left:33.33333333333333%}.ms-u-lgOffset3{margin-left:25%}.ms-u-lgOffset2{margin-left:16.666666666666664%}.ms-u-lgOffset1{margin-left:8.333333333333332%}.ms-u-lgOffset0{margin-left:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}.ms-u-xl11{width:91.66666666666666%}.ms-u-xl10{width:83.33333333333334%}.ms-u-xl9{width:75%}.ms-u-xl8{width:66.66666666666666%}.ms-u-xl7{width:58.333333333333336%}.ms-u-xl6{width:50%}.ms-u-xl5{width:41.66666666666667%}.ms-u-xl4{width:33.33333333333333%}.ms-u-xl3{width:25%}.ms-u-xl2{width:16.666666666666664%}.ms-u-xl1{width:8.333333333333332%}.ms-u-xlPull12{right:100%}.ms-u-xlPull11{right:91.66666666666666%}.ms-u-xlPull10{right:83.33333333333334%}.ms-u-xlPull9{right:75%}.ms-u-xlPull8{right:66.66666666666666%}.ms-u-xlPull7{right:58.333333333333336%}.ms-u-xlPull6{right:50%}.ms-u-xlPull5{right:41.66666666666667%}.ms-u-xlPull4{right:33.33333333333333%}.ms-u-xlPull3{right:25%}.ms-u-xlPull2{right:16.666666666666664%}.ms-u-xlPull1{right:8.333333333333332%}.ms-u-xlPull0{right:auto}.ms-u-xlPush12{left:100%}.ms-u-xlPush11{left:91.66666666666666%}.ms-u-xlPush10{left:83.33333333333334%}.ms-u-xlPush9{left:75%}.ms-u-xlPush8{left:66.66666666666666%}.ms-u-xlPush7{left:58.333333333333336%}.ms-u-xlPush6{left:50%}.ms-u-xlPush5{left:41.66666666666667%}.ms-u-xlPush4{left:33.33333333333333%}.ms-u-xlPush3{left:25%}.ms-u-xlPush2{left:16.666666666666664%}.ms-u-xlPush1{left:8.333333333333332%}.ms-u-xlPush0{left:auto}.ms-u-xlOffset11{margin-left:91.66666666666666%}.ms-u-xlOffset10{margin-left:83.33333333333334%}.ms-u-xlOffset9{margin-left:75%}.ms-u-xlOffset8{margin-left:66.66666666666666%}.ms-u-xlOffset7{margin-left:58.333333333333336%}.ms-u-xlOffset6{margin-left:50%}.ms-u-xlOffset5{margin-left:41.66666666666667%}.ms-u-xlOffset4{margin-left:33.33333333333333%}.ms-u-xlOffset3{margin-left:25%}.ms-u-xlOffset2{margin-left:16.666666666666664%}.ms-u-xlOffset1{margin-left:8.333333333333332%}.ms-u-xlOffset0{margin-left:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}.ms-u-xxl11{width:91.66666666666666%}.ms-u-xxl10{width:83.33333333333334%}.ms-u-xxl9{width:75%}.ms-u-xxl8{width:66.66666666666666%}.ms-u-xxl7{width:58.333333333333336%}.ms-u-xxl6{width:50%}.ms-u-xxl5{width:41.66666666666667%}.ms-u-xxl4{width:33.33333333333333%}.ms-u-xxl3{width:25%}.ms-u-xxl2{width:16.666666666666664%}.ms-u-xxl1{width:8.333333333333332%}.ms-u-xxlPull12{right:100%}.ms-u-xxlPull11{right:91.66666666666666%}.ms-u-xxlPull10{right:83.33333333333334%}.ms-u-xxlPull9{right:75%}.ms-u-xxlPull8{right:66.66666666666666%}.ms-u-xxlPull7{right:58.333333333333336%}.ms-u-xxlPull6{right:50%}.ms-u-xxlPull5{right:41.66666666666667%}.ms-u-xxlPull4{right:33.33333333333333%}.ms-u-xxlPull3{right:25%}.ms-u-xxlPull2{right:16.666666666666664%}.ms-u-xxlPull1{right:8.333333333333332%}.ms-u-xxlPull0{right:auto}.ms-u-xxlPush12{left:100%}.ms-u-xxlPush11{left:91.66666666666666%}.ms-u-xxlPush10{left:83.33333333333334%}.ms-u-xxlPush9{left:75%}.ms-u-xxlPush8{left:66.66666666666666%}.ms-u-xxlPush7{left:58.333333333333336%}.ms-u-xxlPush6{left:50%}.ms-u-xxlPush5{left:41.66666666666667%}.ms-u-xxlPush4{left:33.33333333333333%}.ms-u-xxlPush3{left:25%}.ms-u-xxlPush2{left:16.666666666666664%}.ms-u-xxlPush1{left:8.333333333333332%}.ms-u-xxlPush0{left:auto}.ms-u-xxlOffset11{margin-left:91.66666666666666%}.ms-u-xxlOffset10{margin-left:83.33333333333334%}.ms-u-xxlOffset9{margin-left:75%}.ms-u-xxlOffset8{margin-left:66.66666666666666%}.ms-u-xxlOffset7{margin-left:58.333333333333336%}.ms-u-xxlOffset6{margin-left:50%}.ms-u-xxlOffset5{margin-left:41.66666666666667%}.ms-u-xxlOffset4{margin-left:33.33333333333333%}.ms-u-xxlOffset3{margin-left:25%}.ms-u-xxlOffset2{margin-left:16.666666666666664%}.ms-u-xxlOffset1{margin-left:8.333333333333332%}.ms-u-xxlOffset0{margin-left:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}.ms-u-xxxl11{width:91.66666666666666%}.ms-u-xxxl10{width:83.33333333333334%}.ms-u-xxxl9{width:75%}.ms-u-xxxl8{width:66.66666666666666%}.ms-u-xxxl7{width:58.333333333333336%}.ms-u-xxxl6{width:50%}.ms-u-xxxl5{width:41.66666666666667%}.ms-u-xxxl4{width:33.33333333333333%}.ms-u-xxxl3{width:25%}.ms-u-xxxl2{width:16.666666666666664%}.ms-u-xxxl1{width:8.333333333333332%}.ms-u-xxxlPull12{right:100%}.ms-u-xxxlPull11{right:91.66666666666666%}.ms-u-xxxlPull10{right:83.33333333333334%}.ms-u-xxxlPull9{right:75%}.ms-u-xxxlPull8{right:66.66666666666666%}.ms-u-xxxlPull7{right:58.333333333333336%}.ms-u-xxxlPull6{right:50%}.ms-u-xxxlPull5{right:41.66666666666667%}.ms-u-xxxlPull4{right:33.33333333333333%}.ms-u-xxxlPull3{right:25%}.ms-u-xxxlPull2{right:16.666666666666664%}.ms-u-xxxlPull1{right:8.333333333333332%}.ms-u-xxxlPull0{right:auto}.ms-u-xxxlPush12{left:100%}.ms-u-xxxlPush11{left:91.66666666666666%}.ms-u-xxxlPush10{left:83.33333333333334%}.ms-u-xxxlPush9{left:75%}.ms-u-xxxlPush8{left:66.66666666666666%}.ms-u-xxxlPush7{left:58.333333333333336%}.ms-u-xxxlPush6{left:50%}.ms-u-xxxlPush5{left:41.66666666666667%}.ms-u-xxxlPush4{left:33.33333333333333%}.ms-u-xxxlPush3{left:25%}.ms-u-xxxlPush2{left:16.666666666666664%}.ms-u-xxxlPush1{left:8.333333333333332%}.ms-u-xxxlPush0{left:auto}.ms-u-xxxlOffset11{margin-left:91.66666666666666%}.ms-u-xxxlOffset10{margin-left:83.33333333333334%}.ms-u-xxxlOffset9{margin-left:75%}.ms-u-xxxlOffset8{margin-left:66.66666666666666%}.ms-u-xxxlOffset7{margin-left:58.333333333333336%}.ms-u-xxxlOffset6{margin-left:50%}.ms-u-xxxlOffset5{margin-left:41.66666666666667%}.ms-u-xxxlOffset4{margin-left:33.33333333333333%}.ms-u-xxxlOffset3{margin-left:25%}.ms-u-xxxlOffset2{margin-left:16.666666666666664%}.ms-u-xxxlOffset1{margin-left:8.333333333333332%}.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} \ No newline at end of file diff --git a/dist/css/fabric.rtl.css b/dist/css/fabric.rtl.css new file mode 100644 index 000000000..f36b86e7b --- /dev/null +++ b/dist/css/fabric.rtl.css @@ -0,0 +1,5521 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 3.0.0 + * The front-end framework for building experiences for Office 365. + **/ + +.ms-u-borderBox, +.ms-u-borderBox:before, +.ms-u-borderBox:after { + box-sizing: border-box; +} + +.ms-u-borderBase { + border: 1px solid; +} + +.ms-u-clearfix { + *zoom: 1; +} + +.ms-u-clearfix:before, +.ms-u-clearfix:after { + 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: #2b88d8; +} + +.ms-bgColor-themeTertiary, +.ms-bgColor-themeTertiary--hover:hover { + background-color: #71afe5; +} + +.ms-bgColor-themeLight, +.ms-bgColor-themeLight--hover:hover { + background-color: #c7e0f4; +} + +.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: #000000; +} + +.ms-bgColor-neutralDark, +.ms-bgColor-neutralDark--hover:hover { + background-color: #212121; +} + +.ms-bgColor-neutralPrimary, +.ms-bgColor-neutralPrimary--hover:hover { + background-color: #333333; +} + +.ms-bgColor-neutralPrimaryAlt, +.ms-bgColor-neutralPrimaryAlt--hover:hover { + background-color: #3c3c3c; +} + +.ms-bgColor-neutralSecondary, +.ms-bgColor-neutralSecondary--hover:hover { + background-color: #666666; +} + +.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: #ffffff; +} + +.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: #2b88d8; +} + +.ms-borderColor-themeTertiary, +.ms-borderColor-themeTertiary--hover:hover { + border-color: #71afe5; +} + +.ms-borderColor-themeLight, +.ms-borderColor-themeLight--hover:hover { + border-color: #c7e0f4; +} + +.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: #000000; +} + +.ms-borderColor-neutralDark, +.ms-borderColor-neutralDark--hover:hover { + border-color: #212121; +} + +.ms-borderColor-neutralPrimary, +.ms-borderColor-neutralPrimary--hover:hover { + border-color: #333333; +} + +.ms-borderColor-neutralPrimaryAlt, +.ms-borderColor-neutralPrimaryAlt--hover:hover { + border-color: #3c3c3c; +} + +.ms-borderColor-neutralSecondary, +.ms-borderColor-neutralSecondary--hover:hover { + border-color: #666666; +} + +.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: #ffffff; +} + +.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; +} + +/* + 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 +*/ + +@font-face { + font-family: 'Segoe UI WestEuropean'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; +} + +.ms-font-su { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 42px; + font-weight: 100; +} + +.ms-font-xxl { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 28px; + font-weight: 100; +} + +.ms-font-xl { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 21px; + font-weight: 100; +} + +.ms-font-l { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; +} + +.ms-font-m-plus { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 15px; + font-weight: 400; +} + +.ms-font-m { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; +} + +.ms-font-s-plus { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 13px; + font-weight: 400; +} + +.ms-font-s { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 12px; + font-weight: 400; +} + +.ms-font-xs { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 11px; + font-weight: 400; +} + +.ms-font-mi { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: #2b88d8; +} + +.ms-fontColor-themeTertiary, +.ms-fontColor-themeTertiary--hover:hover { + color: #71afe5; +} + +.ms-fontColor-themeLight, +.ms-fontColor-themeLight--hover:hover { + color: #c7e0f4; +} + +.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: #000000; +} + +.ms-fontColor-neutralDark, +.ms-fontColor-neutralDark--hover:hover { + color: #212121; +} + +.ms-fontColor-neutralPrimary, +.ms-fontColor-neutralPrimary--hover:hover { + color: #333333; +} + +.ms-fontColor-neutralPrimaryAlt, +.ms-fontColor-neutralPrimaryAlt--hover:hover { + color: #3c3c3c; +} + +.ms-fontColor-neutralSecondary, +.ms-fontColor-neutralSecondary--hover:hover { + color: #666666; +} + +.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: #ffffff; +} + +.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-mi, +*[lang='jpn'] .ms-font-xs, +*[lang='jpn'] .ms-font-s, +*[lang='jpn'] .ms-font-s-plus, +*[lang='jpn'] .ms-font-m, +*[lang='jpn'] .ms-font-m-plus, +*[lang='jpn'] .ms-font-l, +*[lang='jpn'] .ms-font-xl, +*[lang='jpn'] .ms-font-xxl, +*[lang='jpn'] .ms-font-su, +*[lang='jpn'] .ms-fontWeight-light, +*[lang='jpn'] .ms-fontWeight-light-hover:hover, +*[lang='jpn'] .ms-fontWeight-semilight, +*[lang='jpn'] .ms-fontWeight-semilight-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 { + font-family: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='kor'] .ms-font-mi, +*[lang='kor'] .ms-font-xs, +*[lang='kor'] .ms-font-s, +*[lang='kor'] .ms-font-s-plus, +*[lang='kor'] .ms-font-m, +*[lang='kor'] .ms-font-m-plus, +*[lang='kor'] .ms-font-l, +*[lang='kor'] .ms-font-xl, +*[lang='kor'] .ms-font-xxl, +*[lang='kor'] .ms-font-su, +*[lang='kor'] .ms-fontWeight-light, +*[lang='kor'] .ms-fontWeight-light-hover:hover, +*[lang='kor'] .ms-fontWeight-semilight, +*[lang='kor'] .ms-fontWeight-semilight-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 { + font-family: 'Malgun Gothic', Gulim, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='cmn'] .ms-font-mi, +*[lang='cmn'] .ms-font-xs, +*[lang='cmn'] .ms-font-s, +*[lang='cmn'] .ms-font-s-plus, +*[lang='cmn'] .ms-font-m, +*[lang='cmn'] .ms-font-m-plus, +*[lang='cmn'] .ms-font-l, +*[lang='cmn'] .ms-font-xl, +*[lang='cmn'] .ms-font-xxl, +*[lang='cmn'] .ms-font-su, +*[lang='cmn'] .ms-fontWeight-light, +*[lang='cmn'] .ms-fontWeight-light-hover:hover, +*[lang='cmn'] .ms-fontWeight-semilight, +*[lang='cmn'] .ms-fontWeight-semilight-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 { + font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='yue'] .ms-font-mi, +*[lang='yue'] .ms-font-xs, +*[lang='yue'] .ms-font-s, +*[lang='yue'] .ms-font-s-plus, +*[lang='yue'] .ms-font-m, +*[lang='yue'] .ms-font-m-plus, +*[lang='yue'] .ms-font-l, +*[lang='yue'] .ms-font-xl, +*[lang='yue'] .ms-font-xxl, +*[lang='yue'] .ms-font-su, +*[lang='yue'] .ms-fontWeight-light, +*[lang='yue'] .ms-fontWeight-light-hover:hover, +*[lang='yue'] .ms-fontWeight-semilight, +*[lang='yue'] .ms-fontWeight-semilight-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 { + font-family: 'Microsoft Jhenghei', Pmingliu, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='hin'] .ms-font-mi, +*[lang='hin'] .ms-font-xs, +*[lang='hin'] .ms-font-s, +*[lang='hin'] .ms-font-s-plus, +*[lang='hin'] .ms-font-m, +*[lang='hin'] .ms-font-m-plus, +*[lang='hin'] .ms-font-l, +*[lang='hin'] .ms-font-xl, +*[lang='hin'] .ms-font-xxl, +*[lang='hin'] .ms-font-su, +*[lang='hin'] .ms-fontWeight-light, +*[lang='hin'] .ms-fontWeight-light-hover:hover, +*[lang='hin'] .ms-fontWeight-semilight, +*[lang='hin'] .ms-fontWeight-semilight-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 { + font-family: 'Nirmala UI', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='tha'] .ms-font-mi, +*[lang='tha'] .ms-font-xs, +*[lang='tha'] .ms-font-s, +*[lang='tha'] .ms-font-s-plus, +*[lang='tha'] .ms-font-m, +*[lang='tha'] .ms-font-m-plus, +*[lang='tha'] .ms-font-l, +*[lang='tha'] .ms-font-xl, +*[lang='tha'] .ms-font-xxl, +*[lang='tha'] .ms-font-su, +*[lang='tha'] .ms-fontWeight-light, +*[lang='tha'] .ms-fontWeight-light-hover:hover, +*[lang='tha'] .ms-fontWeight-semilight, +*[lang='tha'] .ms-fontWeight-semilight-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 { + font-family: 'Leelawadee UI', 'Kmer UI', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='ara'] .ms-font-mi, +*[lang='ara'] .ms-font-xs, +*[lang='ara'] .ms-font-s, +*[lang='ara'] .ms-font-s-plus, +*[lang='ara'] .ms-font-m, +*[lang='ara'] .ms-font-m-plus, +*[lang='ara'] .ms-font-l, +*[lang='ara'] .ms-font-xl, +*[lang='ara'] .ms-font-xxl, +*[lang='ara'] .ms-font-su, +*[lang='ara'] .ms-fontWeight-light, +*[lang='ara'] .ms-fontWeight-light-hover:hover, +*[lang='ara'] .ms-fontWeight-semilight, +*[lang='ara'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI Arabic', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='ces'] .ms-font-mi, +*[lang='ces'] .ms-font-xs, +*[lang='ces'] .ms-font-s, +*[lang='ces'] .ms-font-s-plus, +*[lang='ces'] .ms-font-m, +*[lang='ces'] .ms-font-m-plus, +*[lang='ces'] .ms-font-l, +*[lang='ces'] .ms-font-xl, +*[lang='ces'] .ms-font-xxl, +*[lang='ces'] .ms-font-su, +*[lang='ces'] .ms-fontWeight-light, +*[lang='ces'] .ms-fontWeight-light-hover:hover, +*[lang='ces'] .ms-fontWeight-semilight, +*[lang='ces'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='est'] .ms-font-mi, +*[lang='est'] .ms-font-xs, +*[lang='est'] .ms-font-s, +*[lang='est'] .ms-font-s-plus, +*[lang='est'] .ms-font-m, +*[lang='est'] .ms-font-m-plus, +*[lang='est'] .ms-font-l, +*[lang='est'] .ms-font-xl, +*[lang='est'] .ms-font-xxl, +*[lang='est'] .ms-font-su, +*[lang='est'] .ms-fontWeight-light, +*[lang='est'] .ms-fontWeight-light-hover:hover, +*[lang='est'] .ms-fontWeight-semilight, +*[lang='est'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='hrv'] .ms-font-mi, +*[lang='hrv'] .ms-font-xs, +*[lang='hrv'] .ms-font-s, +*[lang='hrv'] .ms-font-s-plus, +*[lang='hrv'] .ms-font-m, +*[lang='hrv'] .ms-font-m-plus, +*[lang='hrv'] .ms-font-l, +*[lang='hrv'] .ms-font-xl, +*[lang='hrv'] .ms-font-xxl, +*[lang='hrv'] .ms-font-su, +*[lang='hrv'] .ms-fontWeight-light, +*[lang='hrv'] .ms-fontWeight-light-hover:hover, +*[lang='hrv'] .ms-fontWeight-semilight, +*[lang='hrv'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='hun'] .ms-font-mi, +*[lang='hun'] .ms-font-xs, +*[lang='hun'] .ms-font-s, +*[lang='hun'] .ms-font-s-plus, +*[lang='hun'] .ms-font-m, +*[lang='hun'] .ms-font-m-plus, +*[lang='hun'] .ms-font-l, +*[lang='hun'] .ms-font-xl, +*[lang='hun'] .ms-font-xxl, +*[lang='hun'] .ms-font-su, +*[lang='hun'] .ms-fontWeight-light, +*[lang='hun'] .ms-fontWeight-light-hover:hover, +*[lang='hun'] .ms-fontWeight-semilight, +*[lang='hun'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='kaz'] .ms-font-mi, +*[lang='kaz'] .ms-font-xs, +*[lang='kaz'] .ms-font-s, +*[lang='kaz'] .ms-font-s-plus, +*[lang='kaz'] .ms-font-m, +*[lang='kaz'] .ms-font-m-plus, +*[lang='kaz'] .ms-font-l, +*[lang='kaz'] .ms-font-xl, +*[lang='kaz'] .ms-font-xxl, +*[lang='kaz'] .ms-font-su, +*[lang='kaz'] .ms-fontWeight-light, +*[lang='kaz'] .ms-fontWeight-light-hover:hover, +*[lang='kaz'] .ms-fontWeight-semilight, +*[lang='kaz'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='lav'] .ms-font-mi, +*[lang='lav'] .ms-font-xs, +*[lang='lav'] .ms-font-s, +*[lang='lav'] .ms-font-s-plus, +*[lang='lav'] .ms-font-m, +*[lang='lav'] .ms-font-m-plus, +*[lang='lav'] .ms-font-l, +*[lang='lav'] .ms-font-xl, +*[lang='lav'] .ms-font-xxl, +*[lang='lav'] .ms-font-su, +*[lang='lav'] .ms-fontWeight-light, +*[lang='lav'] .ms-fontWeight-light-hover:hover, +*[lang='lav'] .ms-fontWeight-semilight, +*[lang='lav'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='lit'] .ms-font-mi, +*[lang='lit'] .ms-font-xs, +*[lang='lit'] .ms-font-s, +*[lang='lit'] .ms-font-s-plus, +*[lang='lit'] .ms-font-m, +*[lang='lit'] .ms-font-m-plus, +*[lang='lit'] .ms-font-l, +*[lang='lit'] .ms-font-xl, +*[lang='lit'] .ms-font-xxl, +*[lang='lit'] .ms-font-su, +*[lang='lit'] .ms-fontWeight-light, +*[lang='lit'] .ms-fontWeight-light-hover:hover, +*[lang='lit'] .ms-fontWeight-semilight, +*[lang='lit'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='pol'] .ms-font-mi, +*[lang='pol'] .ms-font-xs, +*[lang='pol'] .ms-font-s, +*[lang='pol'] .ms-font-s-plus, +*[lang='pol'] .ms-font-m, +*[lang='pol'] .ms-font-m-plus, +*[lang='pol'] .ms-font-l, +*[lang='pol'] .ms-font-xl, +*[lang='pol'] .ms-font-xxl, +*[lang='pol'] .ms-font-su, +*[lang='pol'] .ms-fontWeight-light, +*[lang='pol'] .ms-fontWeight-light-hover:hover, +*[lang='pol'] .ms-fontWeight-semilight, +*[lang='pol'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='slk'] .ms-font-mi, +*[lang='slk'] .ms-font-xs, +*[lang='slk'] .ms-font-s, +*[lang='slk'] .ms-font-s-plus, +*[lang='slk'] .ms-font-m, +*[lang='slk'] .ms-font-m-plus, +*[lang='slk'] .ms-font-l, +*[lang='slk'] .ms-font-xl, +*[lang='slk'] .ms-font-xxl, +*[lang='slk'] .ms-font-su, +*[lang='slk'] .ms-fontWeight-light, +*[lang='slk'] .ms-fontWeight-light-hover:hover, +*[lang='slk'] .ms-fontWeight-semilight, +*[lang='slk'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='tur'] .ms-font-mi, +*[lang='tur'] .ms-font-xs, +*[lang='tur'] .ms-font-s, +*[lang='tur'] .ms-font-s-plus, +*[lang='tur'] .ms-font-m, +*[lang='tur'] .ms-font-m-plus, +*[lang='tur'] .ms-font-l, +*[lang='tur'] .ms-font-xl, +*[lang='tur'] .ms-font-xxl, +*[lang='tur'] .ms-font-su, +*[lang='tur'] .ms-fontWeight-light, +*[lang='tur'] .ms-fontWeight-light-hover:hover, +*[lang='tur'] .ms-fontWeight-semilight, +*[lang='tur'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI EastEuropean', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='rus'] .ms-font-mi, +*[lang='rus'] .ms-font-xs, +*[lang='rus'] .ms-font-s, +*[lang='rus'] .ms-font-s-plus, +*[lang='rus'] .ms-font-m, +*[lang='rus'] .ms-font-m-plus, +*[lang='rus'] .ms-font-l, +*[lang='rus'] .ms-font-xl, +*[lang='rus'] .ms-font-xxl, +*[lang='rus'] .ms-font-su, +*[lang='rus'] .ms-fontWeight-light, +*[lang='rus'] .ms-fontWeight-light-hover:hover, +*[lang='rus'] .ms-fontWeight-semilight, +*[lang='rus'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI Cyrillic', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='ell'] .ms-font-mi, +*[lang='ell'] .ms-font-xs, +*[lang='ell'] .ms-font-s, +*[lang='ell'] .ms-font-s-plus, +*[lang='ell'] .ms-font-m, +*[lang='ell'] .ms-font-m-plus, +*[lang='ell'] .ms-font-l, +*[lang='ell'] .ms-font-xl, +*[lang='ell'] .ms-font-xxl, +*[lang='ell'] .ms-font-su, +*[lang='ell'] .ms-fontWeight-light, +*[lang='ell'] .ms-fontWeight-light-hover:hover, +*[lang='ell'] .ms-fontWeight-semilight, +*[lang='ell'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI Greek', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='heb'] .ms-font-mi, +*[lang='heb'] .ms-font-xs, +*[lang='heb'] .ms-font-s, +*[lang='heb'] .ms-font-s-plus, +*[lang='heb'] .ms-font-m, +*[lang='heb'] .ms-font-m-plus, +*[lang='heb'] .ms-font-l, +*[lang='heb'] .ms-font-xl, +*[lang='heb'] .ms-font-xxl, +*[lang='heb'] .ms-font-su, +*[lang='heb'] .ms-fontWeight-light, +*[lang='heb'] .ms-fontWeight-light-hover:hover, +*[lang='heb'] .ms-fontWeight-semilight, +*[lang='heb'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI Hebrew', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +*[lang='vie'] .ms-font-mi, +*[lang='vie'] .ms-font-xs, +*[lang='vie'] .ms-font-s, +*[lang='vie'] .ms-font-s-plus, +*[lang='vie'] .ms-font-m, +*[lang='vie'] .ms-font-m-plus, +*[lang='vie'] .ms-font-l, +*[lang='vie'] .ms-font-xl, +*[lang='vie'] .ms-font-xxl, +*[lang='vie'] .ms-font-su, +*[lang='vie'] .ms-fontWeight-light, +*[lang='vie'] .ms-fontWeight-light-hover:hover, +*[lang='vie'] .ms-fontWeight-semilight, +*[lang='vie'] .ms-fontWeight-semilight-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 { + font-family: 'Segoe UI Vietnamese', 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +/* + 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 +*/ + +@font-face { + font-family: 'Office365Icons'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?'); + src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff?') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf?') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg?#office365icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +.ms-Icon { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} + +.ms-Icon--circleEmpty:before { + content: '\e000'; +} + +.ms-Icon--circleFill:before { + content: '\e001'; +} + +.ms-Icon--placeholder:before { + content: '\e002'; +} + +.ms-Icon--star:before { + content: '\e003'; +} + +.ms-Icon--plus:before { + content: '\e004'; +} + +.ms-Icon--minus:before { + content: '\e005'; +} + +.ms-Icon--question:before { + content: '\e006'; +} + +.ms-Icon--exclamation:before { + content: '\e007'; +} + +.ms-Icon--person:before { + content: '\e008'; +} + +.ms-Icon--mail:before { + content: '\e009'; +} + +.ms-Icon--infoCircle:before { + content: '\e00a'; +} + +.ms-Icon--alert:before { + content: '\e00b'; +} + +.ms-Icon--xCircle:before { + content: '\e00c'; +} + +.ms-Icon--mailOpen:before { + content: '\e00d'; +} + +.ms-Icon--people:before { + content: '\e00e'; +} + +.ms-Icon--bell:before { + content: '\e010'; +} + +.ms-Icon--calendar:before { + content: '\e011'; +} + +.ms-Icon--scheduling:before { + content: '\e012'; +} + +.ms-Icon--event:before { + content: '\e013'; +} + +.ms-Icon--folder:before { + content: '\e014'; +} + +.ms-Icon--documents:before { + content: '\e015'; +} + +.ms-Icon--onedrive:before { + content: '\e016'; +} + +.ms-Icon--chat:before { + content: '\e017'; +} + +.ms-Icon--sites:before { + content: '\e018'; +} + +.ms-Icon--listBullets:before { + content: '\e019'; +} + +.ms-Icon--calendarWeek:before { + content: '\e01a'; +} + +.ms-Icon--calendarWorkWeek:before { + content: '\e01b'; +} + +.ms-Icon--calendarDay:before { + content: '\e01c'; +} + +.ms-Icon--folderMove:before { + content: '\e01d'; +} + +.ms-Icon--panel:before { + content: '\e01e'; +} + +.ms-Icon--popout:before { + content: '\e01f'; +} + +.ms-Icon--menu:before { + content: '\e020'; +} + +.ms-Icon--home:before { + content: '\e021'; +} + +.ms-Icon--favorites:before { + content: '\e022'; +} + +.ms-Icon--phone:before { + content: '\e023'; +} + +.ms-Icon--mailSend:before { + content: '\e024'; +} + +.ms-Icon--save:before { + content: '\e025'; +} + +.ms-Icon--trash:before { + content: '\e026'; +} + +.ms-Icon--pencil:before { + content: '\e027'; +} + +.ms-Icon--flag:before { + content: '\e028'; +} + +.ms-Icon--reply:before { + content: '\e029'; +} + +.ms-Icon--miniatures:before { + content: '\e02a'; +} + +.ms-Icon--voicemail:before { + content: '\e02b'; +} + +.ms-Icon--play:before { + content: '\e02c'; +} + +.ms-Icon--pause:before { + content: '\e02d'; +} + +.ms-Icon--onlineAdd:before { + content: '\e02e'; +} + +.ms-Icon--onlineJoin:before { + content: '\e02f'; +} + +.ms-Icon--replyAll:before { + content: '\e030'; +} + +.ms-Icon--attachment:before { + content: '\e031'; +} + +.ms-Icon--drm:before { + content: '\e032'; +} + +.ms-Icon--pinDown:before { + content: '\e033'; +} + +.ms-Icon--refresh:before { + content: '\e034'; +} + +.ms-Icon--gear:before { + content: '\e035'; +} + +.ms-Icon--smiley:before { + content: '\e036'; +} + +.ms-Icon--info:before { + content: '\e037'; +} + +.ms-Icon--lock:before { + content: '\e038'; +} + +.ms-Icon--search:before { + content: '\e039'; +} + +.ms-Icon--questionReverse:before { + content: '\e03a'; +} + +.ms-Icon--notRecurring:before { + content: '\e03b'; +} + +.ms-Icon--tasks:before { + content: '\e040'; +} + +.ms-Icon--check:before { + content: '\e041'; +} + +.ms-Icon--x:before { + content: '\e042'; +} + +.ms-Icon--ellipsis:before { + content: '\e045'; +} + +.ms-Icon--dot:before { + content: '\e046'; +} + +.ms-Icon--arrowUp:before { + content: '\e047'; +} + +.ms-Icon--arrowDown:before { + content: '\e048'; +} + +.ms-Icon--arrowLeft:before { + content: '\e049'; +} + +.ms-Icon--arrowRight:before { + content: '\e04a'; +} + +.ms-Icon--download:before { + content: '\e04b'; +} + +.ms-Icon--directions:before { + content: '\e04c'; +} + +.ms-Icon--microphone:before { + content: '\e04f'; +} + +.ms-Icon--caretUp:before { + content: '\e051'; +} + +.ms-Icon--caretDown:before { + content: '\e052'; +} + +.ms-Icon--caretLeft:before { + content: '\e053'; +} + +.ms-Icon--caretRight:before { + content: '\e054'; +} + +.ms-Icon--caretUpLeft:before { + content: '\e05a'; +} + +.ms-Icon--caretUpRight:before { + content: '\e05b'; +} + +.ms-Icon--caretDownRight:before { + content: '\e05c'; +} + +.ms-Icon--caretDownLeft:before { + content: '\e05d'; +} + +.ms-Icon--note:before { + content: '\e06a'; +} + +.ms-Icon--noteReply:before { + content: '\e06b'; +} + +.ms-Icon--noteForward:before { + content: '\e06c'; +} + +.ms-Icon--key:before { + content: '\e06f'; +} + +.ms-Icon--tile:before { + content: '\e070'; +} + +.ms-Icon--taskRecurring:before { + content: '\e071'; +} + +.ms-Icon--starEmpty:before { + content: '\e073'; +} + +.ms-Icon--upload:before { + content: '\e076'; +} + +.ms-Icon--wrench:before { + content: '\e077'; +} + +.ms-Icon--share:before { + content: '\e078'; +} + +.ms-Icon--documentReply:before { + content: '\e079'; +} + +.ms-Icon--documentForward:before { + content: '\e07a'; +} + +.ms-Icon--partner:before { + content: '\e080'; +} + +.ms-Icon--reactivate:before { + content: '\e084'; +} + +.ms-Icon--sort:before { + content: '\e085'; +} + +.ms-Icon--personAdd:before { + content: '\e086'; +} + +.ms-Icon--chevronUp:before { + content: '\e087'; +} + +.ms-Icon--chevronDown:before { + content: '\e088'; +} + +.ms-Icon--chevronLeft:before { + content: '\e089'; +} + +.ms-Icon--chevronRight:before { + content: '\e08a'; +} + +.ms-Icon--peopleAdd:before { + content: '\e08c'; +} + +.ms-Icon--newsfeed:before { + content: '\e08d'; +} + +.ms-Icon--notebook:before { + content: '\e08e'; +} + +.ms-Icon--link:before { + content: '\e08f'; +} + +.ms-Icon--chevronsUp:before { + content: '\e090'; +} + +.ms-Icon--chevronsDown:before { + content: '\e091'; +} + +.ms-Icon--chevronsLeft:before { + content: '\e092'; +} + +.ms-Icon--chevronsRight:before { + content: '\e093'; +} + +.ms-Icon--clutter:before { + content: '\e09a'; +} + +.ms-Icon--subscribe:before { + content: '\e09c'; +} + +.ms-Icon--unsubscribe:before { + content: '\e09d'; +} + +.ms-Icon--personRemove:before { + content: '\e09e'; +} + +.ms-Icon--receiptForward:before { + content: '\e0a0'; +} + +.ms-Icon--receiptReply:before { + content: '\e0a1'; +} + +.ms-Icon--receiptCheck:before { + content: '\e0a2'; +} + +.ms-Icon--peopleRemove:before { + content: '\e0a3'; +} + +.ms-Icon--merge:before { + content: '\e0a4'; +} + +.ms-Icon--split:before { + content: '\e0a5'; +} + +.ms-Icon--eventCancel:before { + content: '\e0a6'; +} + +.ms-Icon--eventShare:before { + content: '\e0a7'; +} + +.ms-Icon--today:before { + content: '\e0a9'; +} + +.ms-Icon--oofReply:before { + content: '\e0aa'; +} + +.ms-Icon--voicemailReply:before { + content: '\e0ac'; +} + +.ms-Icon--voicemailForward:before { + content: '\e0ad'; +} + +.ms-Icon--ribbon:before { + content: '\e0af'; +} + +.ms-Icon--contact:before { + content: '\e0b0'; +} + +.ms-Icon--eye:before { + content: '\e0b1'; +} + +.ms-Icon--glasses:before { + content: '\e0b2'; +} + +.ms-Icon--print:before { + content: '\e100'; +} + +.ms-Icon--room:before { + content: '\e101'; +} + +.ms-Icon--post:before { + content: '\e102'; +} + +.ms-Icon--toggle:before { + content: '\e103'; +} + +.ms-Icon--touch:before { + content: '\e104'; +} + +.ms-Icon--clock:before { + content: '\e105'; +} + +.ms-Icon--fax:before { + content: '\e106'; +} + +.ms-Icon--lightning:before { + content: '\e110'; +} + +.ms-Icon--dialpad:before { + content: '\e111'; +} + +.ms-Icon--phoneTransfer:before { + content: '\e112'; +} + +.ms-Icon--phoneAdd:before { + content: '\e113'; +} + +.ms-Icon--late:before { + content: '\e114'; +} + +.ms-Icon--chatAdd:before { + content: '\e115'; +} + +.ms-Icon--conflict:before { + content: '\e116'; +} + +.ms-Icon--navigate:before { + content: '\e117'; +} + +.ms-Icon--camera:before { + content: '\e119'; +} + +.ms-Icon--filter:before { + content: '\e11a'; +} + +.ms-Icon--fullscreen:before { + content: '\e11b'; +} + +.ms-Icon--new:before { + content: '\e11c'; +} + +.ms-Icon--mailEmpty:before { + content: '\e11d'; +} + +.ms-Icon--editBox:before { + content: '\e11e'; +} + +.ms-Icon--waffle:before { + content: '\e11f'; +} + +.ms-Icon--work:before { + content: '\e120'; +} + +.ms-Icon--eventRecurring:before { + content: '\e121'; +} + +.ms-Icon--cart:before { + content: '\e122'; +} + +.ms-Icon--socialListening:before { + content: '\e123'; +} + +.ms-Icon--mapMarker:before { + content: '\e124'; +} + +.ms-Icon--org:before { + content: '\e125'; +} + +.ms-Icon--replyAlt:before { + content: '\e150'; +} + +.ms-Icon--replyAllAlt:before { + content: '\e152'; +} + +.ms-Icon--eventInfo:before { + content: '\e154'; +} + +.ms-Icon--group:before { + content: '\e155'; +} + +.ms-Icon--money:before { + content: '\e161'; +} + +.ms-Icon--graph:before { + content: '\e162'; +} + +.ms-Icon--noteEdit:before { + content: '\e163'; +} + +.ms-Icon--dashboard:before { + content: '\e164'; +} + +.ms-Icon--mailEdit:before { + content: '\e165'; +} + +.ms-Icon--pinLeft:before { + content: '\e167'; +} + +.ms-Icon--heart:before { + content: '\e16a'; +} + +.ms-Icon--heartEmpty:before { + content: '\e16b'; +} + +.ms-Icon--picture:before { + content: '\e16c'; +} + +.ms-Icon--cake:before { + content: '\e16d'; +} + +.ms-Icon--books:before { + content: '\e16e'; +} + +.ms-Icon--chart:before { + content: '\e16f'; +} + +.ms-Icon--video:before { + content: '\e170'; +} + +.ms-Icon--soccer:before { + content: '\e171'; +} + +.ms-Icon--meal:before { + content: '\e172'; +} + +.ms-Icon--balloon:before { + content: '\e173'; +} + +.ms-Icon--cat:before { + content: '\e174'; +} + +.ms-Icon--dog:before { + content: '\e175'; +} + +.ms-Icon--bag:before { + content: '\e176'; +} + +.ms-Icon--music:before { + content: '\e177'; +} + +.ms-Icon--stopwatch:before { + content: '\e178'; +} + +.ms-Icon--coffee:before { + content: '\e179'; +} + +.ms-Icon--briefcase:before { + content: '\e17a'; +} + +.ms-Icon--pill:before { + content: '\e17b'; +} + +.ms-Icon--trophy:before { + content: '\e17c'; +} + +.ms-Icon--firstAid:before { + content: '\e17d'; +} + +.ms-Icon--plane:before { + content: '\e17e'; +} + +.ms-Icon--page:before { + content: '\e17f'; +} + +.ms-Icon--car:before { + content: '\e180'; +} + +.ms-Icon--dogAlt:before { + content: '\e181'; +} + +.ms-Icon--document:before { + content: '\e182'; +} + +.ms-Icon--metadata:before { + content: '\e183'; +} + +.ms-Icon--pointItem:before { + content: '\e184'; +} + +.ms-Icon--text:before { + content: '\e185'; +} + +.ms-Icon--fieldText:before { + content: '\e186'; +} + +.ms-Icon--fieldNumber:before { + content: '\e187'; +} + +.ms-Icon--dropdown:before { + content: '\e188'; +} + +.ms-Icon--radioButton:before { + content: '\e189'; +} + +.ms-Icon--checkbox:before { + content: '\e18a'; +} + +.ms-Icon--story:before { + content: '\e18b'; +} + +.ms-Icon--bold:before { + content: '\e18c'; +} + +.ms-Icon--italic:before { + content: '\e18d'; +} + +.ms-Icon--underline:before { + content: '\e18e'; +} + +.ms-Icon--quote:before { + content: '\e18f'; +} + +.ms-Icon--styleRemove:before { + content: '\e190'; +} + +.ms-Icon--pictureAdd:before { + content: '\e191'; +} + +.ms-Icon--pictureRemove:before { + content: '\e192'; +} + +.ms-Icon--desktop:before { + content: '\e193'; +} + +.ms-Icon--tablet:before { + content: '\e194'; +} + +.ms-Icon--mobile:before { + content: '\e195'; +} + +.ms-Icon--table:before { + content: '\e196'; +} + +.ms-Icon--hide:before { + content: '\e197'; +} + +.ms-Icon--shield:before { + content: '\e198'; +} + +.ms-Icon--header:before { + content: '\e19a'; +} + +.ms-Icon--paint:before { + content: '\e19b'; +} + +.ms-Icon--support:before { + content: '\e19c'; +} + +.ms-Icon--settings:before { + content: '\e19d'; +} + +.ms-Icon--creditCard:before { + content: '\e19e'; +} + +.ms-Icon--reload:before { + content: '\e19f'; +} + +.ms-Icon--peopleSecurity:before { + content: '\e200'; +} + +.ms-Icon--fieldTextBox:before { + content: '\e203'; +} + +.ms-Icon--multiChoice:before { + content: '\e204'; +} + +.ms-Icon--fieldMail:before { + content: '\e205'; +} + +.ms-Icon--contactForm:before { + content: '\e206'; +} + +.ms-Icon--circleHalfFilled:before { + content: '\e207'; +} + +.ms-Icon--documentPDF:before { + content: '\e208'; +} + +.ms-Icon--bookmark:before { + content: '\e209'; +} + +.ms-Icon--circleUnfilled:before { + content: '\e20b'; +} + +.ms-Icon--circleFilled:before { + content: '\e20c'; +} + +.ms-Icon--textBox:before { + content: '\e20e'; +} + +.ms-Icon--drop:before { + content: '\e20f'; +} + +.ms-Icon--sun:before { + content: '\e210'; +} + +.ms-Icon--lifesaver:before { + content: '\e211'; +} + +.ms-Icon--lifesaverLock:before { + content: '\e212'; +} + +.ms-Icon--mailUnread:before { + content: '\e213'; +} + +.ms-Icon--mailRead:before { + content: '\e214'; +} + +.ms-Icon--inboxCheck:before { + content: '\e215'; +} + +.ms-Icon--folderSearch:before { + content: '\e216'; +} + +.ms-Icon--collapse:before { + content: '\e217'; +} + +.ms-Icon--expand:before { + content: '\e218'; +} + +.ms-Icon--ascending:before { + content: '\e219'; +} + +.ms-Icon--descending:before { + content: '\e21a'; +} + +.ms-Icon--filterClear:before { + content: '\e21b'; +} + +.ms-Icon--checkboxEmpty:before { + content: '\e21c'; +} + +.ms-Icon--checkboxMixed:before { + content: '\e21d'; +} + +.ms-Icon--boards:before { + content: '\e21e'; +} + +.ms-Icon--checkboxCheck:before { + content: '\e21f'; +} + +.ms-Icon--frowny:before { + content: '\e220'; +} + +.ms-Icon--lightBulb:before { + content: '\e221'; +} + +.ms-Icon--globe:before { + content: '\e222'; +} + +.ms-Icon--deviceWipe:before { + content: '\e223'; +} + +.ms-Icon--listCheck:before { + content: '\e226'; +} + +.ms-Icon--listGroup:before { + content: '\e227'; +} + +.ms-Icon--timeline:before { + content: '\e228'; +} + +.ms-Icon--fontIncrease:before { + content: '\e229'; +} + +.ms-Icon--fontDecrease:before { + content: '\e22a'; +} + +.ms-Icon--fontColor:before { + content: '\e22b'; +} + +.ms-Icon--mailCheck:before { + content: '\e22c'; +} + +.ms-Icon--mailDown:before { + content: '\e22d'; +} + +.ms-Icon--listCheckbox:before { + content: '\e22e'; +} + +.ms-Icon--sunAdd:before { + content: '\e22f'; +} + +.ms-Icon--sunQuestion:before { + content: '\e230'; +} + +.ms-Icon--chevronThinUp:before { + content: '\e231'; +} + +.ms-Icon--chevronThinDown:before { + content: '\e232'; +} + +.ms-Icon--chevronThinLeft:before { + content: '\e233'; +} + +.ms-Icon--chevronThinRight:before { + content: '\e234'; +} + +.ms-Icon--chevronThickUp:before { + content: '\e235'; +} + +.ms-Icon--chevronThickDown:before { + content: '\e236'; +} + +.ms-Icon--chevronThickLeft:before { + content: '\e237'; +} + +.ms-Icon--chevronThickRight:before { + content: '\e238'; +} + +.ms-Icon--linkRemove:before { + content: '\e239'; +} + +.ms-Icon--alertOutline:before { + content: '\e23b'; +} + +.ms-Icon--documentLandscape:before { + content: '\e23c'; +} + +.ms-Icon--documentAdd:before { + content: '\e23d'; +} + +.ms-Icon--toggleMiddle:before { + content: '\e23e'; +} + +.ms-Icon--embed:before { + content: '\e23f'; +} + +.ms-Icon--listNumbered:before { + content: '\e240'; +} + +.ms-Icon--peopleCheck:before { + content: '\e242'; +} + +.ms-Icon--caretUpOutline:before { + content: '\e243'; +} + +.ms-Icon--caretDownOutline:before { + content: '\e244'; +} + +.ms-Icon--caretLeftOutline:before { + content: '\e245'; +} + +.ms-Icon--caretRightOutline:before { + content: '\e246'; +} + +.ms-Icon--mailSync:before { + content: '\e248'; +} + +.ms-Icon--mailError:before { + content: '\e249'; +} + +.ms-Icon--mailPause:before { + content: '\e24a'; +} + +.ms-Icon--peopleSync:before { + content: '\e24b'; +} + +.ms-Icon--peopleError:before { + content: '\e24c'; +} + +.ms-Icon--peoplePause:before { + content: '\e24d'; +} + +.ms-Icon--circleBall:before { + content: '\e24e'; +} + +.ms-Icon--circleBalloons:before { + content: '\e24f'; +} + +.ms-Icon--circleCar:before { + content: '\e250'; +} + +.ms-Icon--circleCat:before { + content: '\e251'; +} + +.ms-Icon--circleCoffee:before { + content: '\e252'; +} + +.ms-Icon--circleDog:before { + content: '\e253'; +} + +.ms-Icon--circleLightning:before { + content: '\e254'; +} + +.ms-Icon--circlePill:before { + content: '\e255'; +} + +.ms-Icon--circlePlane:before { + content: '\e256'; +} + +.ms-Icon--circlePoodle:before { + content: '\e257'; +} + +.ms-Icon--checkPeople:before { + content: '\e259'; +} + +.ms-Icon--documentSearch:before { + content: '\e25a'; +} + +.ms-Icon--sortLines:before { + content: '\e25c'; +} + +.ms-Icon--calendarPublic:before { + content: '\e25d'; +} + +.ms-Icon--contactPublic:before { + content: '\e25e'; +} + +.ms-Icon--classNotebook:before { + content: '\e25f'; +} + +.ms-Icon--triangleUp:before { + content: '\e260'; +} + +.ms-Icon--triangleRight:before { + content: '\e261'; +} + +.ms-Icon--triangleDown:before { + content: '\e262'; +} + +.ms-Icon--triangleLeft:before { + content: '\e263'; +} + +.ms-Icon--triangleEmptyUp:before { + content: '\e264'; +} + +.ms-Icon--triangleEmptyRight:before { + content: '\e265'; +} + +.ms-Icon--triangleEmptyDown:before { + content: '\e266'; +} + +.ms-Icon--triangleEmptyLeft:before { + content: '\e267'; +} + +.ms-Icon--filePDF:before { + content: '\e268'; +} + +.ms-Icon--fileImage:before { + content: '\e26c'; +} + +.ms-Icon--fileDocument:before { + content: '\e26d'; +} + +.ms-Icon--listGroup2:before { + content: '\e26e'; +} + +.ms-Icon--copy:before { + content: '\e26f'; +} + +.ms-Icon--creditCardOutline:before { + content: '\e270'; +} + +.ms-Icon--mailPublic:before { + content: '\e272'; +} + +.ms-Icon--folderPublic:before { + content: '\e273'; +} + +.ms-Icon--teamwork:before { + content: '\e274'; +} + +.ms-Icon--move:before { + content: '\e275'; +} + +.ms-Icon--classroom:before { + content: '\e276'; +} + +.ms-Icon--menu2:before { + content: '\e277'; +} + +.ms-Icon--plus2:before { + content: '\e278'; +} + +.ms-Icon--tag:before { + content: '\e279'; +} + +.ms-Icon--arrowUp2:before { + content: '\e27a'; +} + +.ms-Icon--arrowDown2:before { + content: '\e27b'; +} + +.ms-Icon--circlePlus:before { + content: '\e27c'; +} + +.ms-Icon--circleInfo:before { + content: '\e27d'; +} + +.ms-Icon--section:before { + content: '\e27e'; +} + +.ms-Icon--sections:before { + content: '\e27f'; +} + +.ms-Icon--at:before { + content: '\e282'; +} + +.ms-Icon--arrowUpRight:before { + content: '\e283'; +} + +.ms-Icon--arrowDownRight:before { + content: '\e284'; +} + +.ms-Icon--arrowDownLeft:before { + content: '\e285'; +} + +.ms-Icon--arrowUpLeft:before { + content: '\e286'; +} + +.ms-Icon--bundle:before { + content: '\e287'; +} + +.ms-Icon--pictureEdit:before { + content: '\e288'; +} + +.ms-Icon--protectionCenter:before { + content: '\e289'; +} + +.ms-Icon--alert2:before { + content: '\e28a'; +} + +.ms-Icon--skypeCircleCheck:before { + content: '\e310'; +} + +.ms-Icon--skypeCircleClock:before { + content: '\e311'; +} + +.ms-Icon--skypeCircleMinus:before { + content: '\e312'; +} + +.ms-Icon--skypeCheck:before { + content: '\e315'; +} + +.ms-Icon--skypeClock:before { + content: '\e316'; +} + +.ms-Icon--skypeMinus:before { + content: '\e317'; +} + +.ms-Icon--circle { + position: relative; + display: inline-block; + font-size: 1rem; + width: 1em; + height: 1em; + margin: 0 0 0 0.5em; + padding: 0; + text-align: right; + -webkit-font-smoothing: antialiased; +} + +.ms-Icon--circle:before, +.ms-Icon--circle:after { + 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; + -ms-transform: scale(2); + transform: scale(2); + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + z-index: 0; +} + +.ms-Icon--circle.ms-Icon--star:before { + top: -2%; + right: 1%; +} + +.ms-Icon--circle.ms-Icon--person:before { + top: -2%; + right: -3%; +} + +.ms-Icon--circle.ms-Icon--alert:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Icon--circle.ms-Icon--people:before { + top: -4%; + right: -7%; +} + +.ms-Icon--circle.ms-Icon--bell:before { + top: -3%; +} + +.ms-Icon--circle.ms-Icon--scheduling:before { + top: -3%; + right: 6%; +} + +.ms-Icon--circle.ms-Icon--documents:before { + top: -1%; + right: -2%; +} + +.ms-Icon--circle.ms-Icon--listBullets:before { + top: -1%; + right: 5%; +} + +.ms-Icon--circle.ms-Icon--panel:before { + right: -2%; +} + +.ms-Icon--circle.ms-Icon--popout:before { + top: -2%; + right: -2%; +} + +.ms-Icon--circle.ms-Icon--home:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--favorites:before { + top: -2%; + right: 2%; +} + +.ms-Icon--circle.ms-Icon--phone:before { + top: -2%; + right: -2%; +} + +.ms-Icon--circle.ms-Icon--mailSend:before { + right: -10%; +} + +.ms-Icon--circle.ms-Icon--pencil:before { + top: -2%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--flag:before { + right: 3%; +} + +.ms-Icon--circle.ms-Icon--miniatures:before { + right: -3%; +} + +.ms-Icon--circle.ms-Icon--voicemail:before { + top: 2%; + right: -7%; +} + +.ms-Icon--circle.ms-Icon--onlineAdd:before { + top: -1%; + right: 2%; +} + +.ms-Icon--circle.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--gear:before { + right: 2%; +} + +.ms-Icon--circle.ms-Icon--check:before { + top: 3%; +} + +.ms-Icon--circle.ms-Icon--ellipsis:before { + top: 2%; + right: -12%; +} + +.ms-Icon--circle.ms-Icon--directions:before { + right: 10%; +} + +.ms-Icon--circle.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDown:before { + top: 5%; + right: 2%; +} + +.ms-Icon--circle.ms-Icon--caretLeft:before { + right: -6%; +} + +.ms-Icon--circle.ms-Icon--caretRight:before { + right: 6%; +} + +.ms-Icon--circle.ms-Icon--caretUpLeft:before { + top: 5%; + right: 5%; +} + +.ms-Icon--circle.ms-Icon--caretUpRight:before { + top: 5%; + right: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownRight:before { + right: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownLeft:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--note:before { + top: 2%; + right: -3%; +} + +.ms-Icon--circle.ms-Icon--noteReply:before { + top: 6%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Icon--circle.ms-Icon--key:before { + top: 5%; + right: 1%; +} + +.ms-Icon--circle.ms-Icon--tile:before { + top: -1%; + right: -18%; +} + +.ms-Icon--circle.ms-Icon--taskRecurring:before { + top: 2%; + right: -1%; +} + +.ms-Icon--circle.ms-Icon--starEmpty:before { + top: -4%; + right: 1%; +} + +.ms-Icon--circle.ms-Icon--documentReply:before { + top: -2%; + right: 7%; +} + +.ms-Icon--circle.ms-Icon--documentForward:before { + right: 5%; +} + +.ms-Icon--circle.ms-Icon--partner:before { + top: -2%; +} + +.ms-Icon--circle.ms-Icon--reactivate:before { + top: -2%; + right: 6%; +} + +.ms-Icon--circle.ms-Icon--sort:before { + right: -19%; +} + +.ms-Icon--circle.ms-Icon--personAdd:before { + top: -2%; + right: 6%; +} + +.ms-Icon--circle.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Icon--circle.ms-Icon--chevronLeft:before { + right: -5%; +} + +.ms-Icon--circle.ms-Icon--chevronRight:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--peopleAdd:before { + top: -5%; + right: -12%; +} + +.ms-Icon--circle.ms-Icon--newsfeed:before { + right: -4%; +} + +.ms-Icon--circle.ms-Icon--notebook:before { + right: -4%; +} + +.ms-Icon--circle.ms-Icon--link:before { + top: 2%; + right: -18%; +} + +.ms-Icon--circle.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--chevronsLeft:before { + right: -5%; +} + +.ms-Icon--circle.ms-Icon--chevronsRight:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--personRemove:before { + right: 5%; +} + +.ms-Icon--circle.ms-Icon--receiptForward:before { + right: -20%; +} + +.ms-Icon--circle.ms-Icon--receiptReply:before { + right: -20%; +} + +.ms-Icon--circle.ms-Icon--receiptCheck:before { + right: -20%; +} + +.ms-Icon--circle.ms-Icon--peopleRemove:before { + top: -3%; + right: -12%; +} + +.ms-Icon--circle.ms-Icon--merge:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--split:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--eventCancel:before { + right: -2%; +} + +.ms-Icon--circle.ms-Icon--today:before { + top: -2%; +} + +.ms-Icon--circle.ms-Icon--oofReply:before { + right: 5%; +} + +.ms-Icon--circle.ms-Icon--voicemailReply:before { + top: 4%; + right: -25%; +} + +.ms-Icon--circle.ms-Icon--voicemailForward:before { + top: 4%; + right: -20%; +} + +.ms-Icon--circle.ms-Icon--eye:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--post:before { + top: -4%; + right: 4%; +} + +.ms-Icon--circle.ms-Icon--fax:before { + top: -3%; + right: -2%; +} + +.ms-Icon--circle.ms-Icon--lightning:before { + top: 2%; + right: 1%; +} + +.ms-Icon--circle.ms-Icon--filter:before { + top: 7%; +} + +.ms-Icon--circle.ms-Icon--cart:before { + right: 3%; +} + +.ms-Icon--circle.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--replyAllAlt:before { + right: -16%; +} + +.ms-Icon--circle.ms-Icon--group:before { + right: -33%; +} + +.ms-Icon--circle.ms-Icon--money:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--noteEdit:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--mailEdit:before { + top: 3%; + right: 7%; +} + +.ms-Icon--circle.ms-Icon--pinLeft:before { + right: -6%; +} + +.ms-Icon--circle.ms-Icon--heart:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--cake:before { + top: -5%; +} + +.ms-Icon--circle.ms-Icon--books:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--video:before { + top: -3%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--balloon:before { + top: 4%; + right: -1%; +} + +.ms-Icon--circle.ms-Icon--music:before { + top: -2%; + right: -5%; +} + +.ms-Icon--circle.ms-Icon--stopwatch:before { + top: -3%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--coffee:before { + top: -3%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--plane:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--dogAlt:before { + right: -15%; +} + +.ms-Icon--circle.ms-Icon--metadata:before { + top: -4%; + right: 4%; +} + +.ms-Icon--circle.ms-Icon--text:before { + top: -4%; + right: 10%; +} + +.ms-Icon--circle.ms-Icon--fieldText:before { + right: -14%; +} + +.ms-Icon--circle.ms-Icon--fieldNumber:before { + right: -14%; +} + +.ms-Icon--circle.ms-Icon--dropdown:before { + right: -14%; +} + +.ms-Icon--circle.ms-Icon--story:before { + right: -5%; +} + +.ms-Icon--circle.ms-Icon--bold:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--underline:before { + top: 4%; +} + +.ms-Icon--circle.ms-Icon--quote:before { + right: -4%; +} + +.ms-Icon--circle.ms-Icon--styleRemove:before { + top: 4%; + right: 5%; +} + +.ms-Icon--circle.ms-Icon--pictureAdd:before { + right: -6%; +} + +.ms-Icon--circle.ms-Icon--pictureRemove:before { + right: -6%; +} + +.ms-Icon--circle.ms-Icon--mobile:before { + right: -3%; +} + +.ms-Icon--circle.ms-Icon--hide:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--header:before { + right: -9%; +} + +.ms-Icon--circle.ms-Icon--msn:before { + right: 3%; +} + +.ms-Icon--circle.ms-Icon--peopleCheck:before { + right: -7%; + top: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Icon--circle.ms-Icon--caretLeftOutline:before { + right: -5%; +} + +.ms-Icon--circle.ms-Icon--caretRightOutline:before { + right: 5%; +} + +.ms-Icon--circle.ms-Icon--sway:before { + right: -3%; +} + +.ms-Icon--circle.ms-Icon--mailSync:before { + right: 8%; + top: 3%; +} + +.ms-Icon--circle.ms-Icon--peopleSync:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--peopleError:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--peoplePause:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--documentSearch:before { + right: 8%; +} + +.ms-Icon--circle.ms-Icon--dynamicsMarketing:before { + right: -8%; +} + +.ms-Icon--question, +.ms-Icon--calendar, +.ms-Icon--folder, +.ms-Icon--chat, +.ms-Icon--listBullets, +.ms-Icon--folderMove, +.ms-Icon--mailSend, +.ms-Icon--reply, +.ms-Icon--play, +.ms-Icon--replyAll, +.ms-Icon--refresh, +.ms-Icon--questionReverse, +.ms-Icon--notRecurring, +.ms-Icon--tasks, +.ms-Icon--check, +.ms-Icon--arrowLeft, +.ms-Icon--arrowRight, +.ms-Icon--directions, +.ms-Icon--caretLeft, +.ms-Icon--caretRight, +.ms-Icon--caretUpLeft, +.ms-Icon--caretUpRight, +.ms-Icon--caretDownRight, +.ms-Icon--caretDownLeft, +.ms-Icon--note, +.ms-Icon--noteReply, +.ms-Icon--noteForward, +.ms-Icon--taskRecurring, +.ms-Icon--documentReply, +.ms-Icon--documentForward, +.ms-Icon--reactivate, +.ms-Icon--chevronLeft, +.ms-Icon--chevronRight, +.ms-Icon--notebook, +.ms-Icon--chevronsLeft, +.ms-Icon--chevronsRight, +.ms-Icon--receiptForward, +.ms-Icon--receiptReply, +.ms-Icon--receiptCheck, +.ms-Icon--eventShare, +.ms-Icon--oofReply, +.ms-Icon--voicemailReply, +.ms-Icon--voicemailForward, +.ms-Icon--post, +.ms-Icon--toggle, +.ms-Icon--late, +.ms-Icon--eventRecurring, +.ms-Icon--cart, +.ms-Icon--socialListening, +.ms-Icon--replyAlt, +.ms-Icon--replyAllAlt, +.ms-Icon--graph, +.ms-Icon--pinLeft, +.ms-Icon--chart, +.ms-Icon--page, +.ms-Icon--document, +.ms-Icon--metadata, +.ms-Icon--pointItem, +.ms-Icon--dropdown, +.ms-Icon--checkbox, +.ms-Icon--reload, +.ms-Icon--multiChoice, +.ms-Icon--contactForm, +.ms-Icon--inboxCheck, +.ms-Icon--checkboxCheck, +.ms-Icon--folderSearch, +.ms-Icon--listCheck, +.ms-Icon--listGroup, +.ms-Icon--timeline +.ms-Icon--mailCheck, +.ms-Icon--listCheckbox, +.ms-Icon--sunQuestion, +.ms-Icon--chevronThinLeft, +.ms-Icon--chevronThinRight, +.ms-Icon--chevronThickLeft, +.ms-Icon--chevronThickRight, +.ms-Icon--documentLandscape, +.ms-Icon--peopleCheck, +.ms-Icon--caretLeftOutline, +.ms-Icon--caretRightOutline, +.ms-Icon--mailSync, +.ms-Icon--peopleSync, +.ms-Icon--checkPeople, +.ms-Icon--sortLines, +.ms-Icon--triangleRight:before, +.ms-Icon--triangleLeft:before, +.ms-Icon--contactPublic:before, +.ms-Icon--triangleEmptyRight:before, +.ms-Icon--triangleEmptyLeft:before, +.ms-Icon--fileDocument:before, +.ms-Icon--listGroup2:before, +.ms-Icon--copy:before, +.ms-Icon--sections:before, +.ms-Icon--arrowUpRight:before, +.ms-Icon--arrowDownRight:before, +.ms-Icon--arrowDownLeft:before, +.ms-Icon--arrowUpLeft:before, +.ms-Icon--bundle:before { + -ms-transform: scaleX(-1); + transform: scaleX(-1); +} + +.ms-u-slideRightIn10 { + animation-name: fadeIn, slideRightIn10; + -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; +} + +@keyframes slideRightIn10 { + from { + transform: translate3d(-10px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn20 { + animation-name: fadeIn, slideRightIn20; + -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; +} + +@keyframes slideRightIn20 { + from { + transform: translate3d(-20px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn40 { + 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; +} + +@keyframes slideRightIn40 { + from { + transform: translate3d(-40px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn10 { + animation-name: fadeIn, slideLeftIn10; + -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; +} + +@keyframes slideLeftIn10 { + from { + transform: translate3d(10px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn20 { + animation-name: fadeIn, slideLeftIn20; + -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; +} + +@keyframes slideLeftIn20 { + from { + transform: translate3d(20px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn40 { + 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; +} + +@keyframes slideLeftIn40 { + from { + transform: translate3d(40px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn400 { + animation-name: fadeIn, slideRightIn400; + -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; +} + +@keyframes slideRightIn400 { + from { + transform: translate3d(-400px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn400 { + animation-name: fadeIn, slideLeft400; + -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; +} + +@keyframes slideLeft400 { + from { + transform: translate3d(400px, 0px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideUpIn20 { + animation-name: fadeIn, slideUpIn20; + -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; +} + +@keyframes slideUpIn20 { + from { + transform: translate3d(0px, 20px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideUpIn10 { + 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; +} + +@keyframes slideUpIn10 { + from { + transform: translate3d(0px, 10px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideDownIn20 { + 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; +} + +@keyframes slideDownIn20 { + from { + transform: translate3d(0px, -20px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideDownIn10 { + 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; +} + +@keyframes slideDownIn10 { + from { + transform: translate3d(0px, -10px, 0px); + } + + to { + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightOut40 { + 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; +} + +@keyframes slideRightOut40 { + from { + transform: translate3d(0px, 0px, 0px); + } + + to { + transform: translate3d(40px, 0px, 0px); + } +} + +.ms-u-slideLeftOut40 { + 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; +} + +@keyframes slideLeftOut40 { + from { + transform: translate3d(0, 0px, 0px); + } + + to { + transform: translate3d(-40px, 0px, 0px); + } +} + +.ms-u-slideRightOut400 { + animation-name: fadeOut, slideRightOut400; + -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; +} + +@keyframes slideRightOut400 { + from { + transform: translate3d(0, 0px, 0px); + } + + to { + transform: translate3d(400px, 0px, 0px); + } +} + +.ms-u-slideLeftOut400 { + animation-name: fadeOut, slideLeftOut400; + -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; +} + +@keyframes slideLeftOut400 { + from { + transform: translate3d(0, 0px, 0px); + } + + to { + transform: translate3d(-400px, 0px, 0px); + } +} + +.ms-u-slideUpOut20 { + 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; +} + +@keyframes slideUpOut20 { + from { + transform: translate3d(0px, 0, 0px); + } + + to { + transform: translate3d(0px, -20px, 0px); + } +} + +.ms-u-slideUpOut10 { + animation-name: fadeOut, slideUpOut10; + -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; +} + +@keyframes slideUpOut10 { + from { + transform: translate3d(0px, 0, 0px); + } + + to { + transform: translate3d(0px, -10px, 0px); + } +} + +.ms-u-slideDownOut20 { + animation-name: fadeOut, slideDownOut20; + -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; +} + +@keyframes slideDownOut20 { + from { + transform: translate3d(0px, 0, 0px); + } + + to { + transform: translate3d(0px, 20px, 0px); + } +} + +.ms-u-slideDownOut10 { + animation-name: fadeOut, slideDownOut10; + -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; +} + +@keyframes slideDownOut10 { + from { + transform: translate3d(0px, 0, 0px); + } + + to { + transform: translate3d(0px, 10px, 0px); + } +} + +.ms-u-scaleUpIn100 { + animation-name: fadeIn, scaleUp100; + -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; +} + +@keyframes scaleUp100 { + from { + transform: scale3d(0.98, 0.98, 1); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.ms-u-scaleDownIn100 { + animation-name: fadeIn, scaleDown100; + -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; +} + +@keyframes scaleDown100 { + from { + transform: scale3d(1.03, 1.03, 1); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.ms-u-scaleUpOut103 { + animation-name: fadeOut, scaleUp103; + -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; +} + +@keyframes scaleUp103 { + from { + transform: scale3d(1, 1, 1); + } + + to { + transform: scale3d(1.03, 1.03, 1); + } +} + +.ms-u-scaleDownOut98 { + animation-name: fadeOut, scaleDown98; + -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; +} + +@keyframes scaleDown98 { + from { + transform: scale3d(1, 1, 1); + } + + to { + transform: scale3d(0.98, 0.98, 1); + } +} + +.ms-u-fadeIn400 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; +} + +.ms-u-fadeIn100 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.167s; +} + +.ms-u-fadeIn200 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.267s; +} + +.ms-u-fadeIn500 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.467s; +} + +@keyframes fadeIn { + from { + opacity: 0; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 1; + } +} + +.ms-u-fadeOut400 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; +} + +.ms-u-fadeOut100 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.1s; +} + +.ms-u-fadeOut200 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.167s; +} + +.ms-u-fadeOut500 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.467s; +} + +@keyframes fadeOut { + from { + opacity: 1; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 0; + } +} + +.ms-u-rotate90deg { + animation-name: rotate90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +@keyframes rotate90 { + from { + transform: rotateZ(0deg); + } + + to { + transform: rotateZ(90deg); + } +} + +.ms-u-rotateN90deg { + animation-name: rotateN90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +@keyframes rotateN90 { + from { + transform: rotateZ(90deg); + } + + to { + transform: rotateZ(0deg); + } +} + +.ms-u-expandCollapse400 { + transition: height 0.367s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-expandCollapse200 { + transition: height 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-expandCollapse100 { + transition: height 0.1s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-delay100 { + animation-delay: 0.167s; +} + +.ms-u-delay200 { + animation-delay: 0.267s; +} + +.ms-u-slideRightIn10 { + animation-name: fadeIn, slideLeft10; + -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-u-slideRightIn20 { + animation-name: fadeIn, slideLeft20; + -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-u-slideRightIn40 { + animation-name: fadeIn, slideLeft40; + -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-u-slideLeftIn10 { + animation-name: fadeIn, slideRight10; + -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-u-slideLeftIn20 { + animation-name: fadeIn, slideRight20; + -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-u-slideLeftIn40 { + animation-name: fadeIn, slideRight40; + -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-u-slideRightIn400 { + animation-name: fadeIn, slideLeft400; + -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-u-slideLeftIn400 { + animation-name: fadeIn, slideRight400; + -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-u-slideRightOut40 { + 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-u-slideLeftOut40 { + 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-u-slideRightOut400 { + animation-name: fadeOut, slideLeftOut400; + -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-u-slideLeftOut400 { + animation-name: fadeOut, slideRightOut400; + -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-u-rotate90deg { + animation-name: rotateN90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +.ms-u-rotateN90deg { + animation-name: rotate90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-fill-mode: both; +} + +@media (max-width: 479px) { + .ms-u-hiddenSm, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 480px) and (max-width: 639px) { + .ms-u-hiddenMd, + .ms-u-hiddenMdUp, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLg, + .ms-u-hiddenLgUp, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1024px) and (max-width: 1365px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXl, + .ms-u-hiddenXlUp, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1366px) and (max-width: 1919px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxl, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1920px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .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%; + } + + .ms-u-md11 { + width: 91.66666666666666%; + } + + .ms-u-md10 { + width: 83.33333333333334%; + } + + .ms-u-md9 { + width: 75%; + } + + .ms-u-md8 { + width: 66.66666666666666%; + } + + .ms-u-md7 { + width: 58.333333333333336%; + } + + .ms-u-md6 { + width: 50%; + } + + .ms-u-md5 { + width: 41.66666666666667%; + } + + .ms-u-md4 { + width: 33.33333333333333%; + } + + .ms-u-md3 { + width: 25%; + } + + .ms-u-md2 { + width: 16.666666666666664%; + } + + .ms-u-md1 { + width: 8.333333333333332%; + } + + .ms-u-mdPull12 { + left: 100%; + } + + .ms-u-mdPull11 { + left: 91.66666666666666%; + } + + .ms-u-mdPull10 { + left: 83.33333333333334%; + } + + .ms-u-mdPull9 { + left: 75%; + } + + .ms-u-mdPull8 { + left: 66.66666666666666%; + } + + .ms-u-mdPull7 { + left: 58.333333333333336%; + } + + .ms-u-mdPull6 { + left: 50%; + } + + .ms-u-mdPull5 { + left: 41.66666666666667%; + } + + .ms-u-mdPull4 { + left: 33.33333333333333%; + } + + .ms-u-mdPull3 { + left: 25%; + } + + .ms-u-mdPull2 { + left: 16.666666666666664%; + } + + .ms-u-mdPull1 { + left: 8.333333333333332%; + } + + .ms-u-mdPull0 { + left: auto; + } + + .ms-u-mdPush12 { + right: 100%; + } + + .ms-u-mdPush11 { + right: 91.66666666666666%; + } + + .ms-u-mdPush10 { + right: 83.33333333333334%; + } + + .ms-u-mdPush9 { + right: 75%; + } + + .ms-u-mdPush8 { + right: 66.66666666666666%; + } + + .ms-u-mdPush7 { + right: 58.333333333333336%; + } + + .ms-u-mdPush6 { + right: 50%; + } + + .ms-u-mdPush5 { + right: 41.66666666666667%; + } + + .ms-u-mdPush4 { + right: 33.33333333333333%; + } + + .ms-u-mdPush3 { + right: 25%; + } + + .ms-u-mdPush2 { + right: 16.666666666666664%; + } + + .ms-u-mdPush1 { + right: 8.333333333333332%; + } + + .ms-u-mdPush0 { + right: auto; + } + + .ms-u-mdOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-mdOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-mdOffset9 { + margin-right: 75%; + } + + .ms-u-mdOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-mdOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-mdOffset6 { + margin-right: 50%; + } + + .ms-u-mdOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-mdOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-mdOffset3 { + margin-right: 25%; + } + + .ms-u-mdOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-mdOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-mdOffset0 { + margin-right: 0; + } +} + +@media (min-width: 640px) { + .ms-u-lg12 { + width: 100%; + } + + .ms-u-lg11 { + width: 91.66666666666666%; + } + + .ms-u-lg10 { + width: 83.33333333333334%; + } + + .ms-u-lg9 { + width: 75%; + } + + .ms-u-lg8 { + width: 66.66666666666666%; + } + + .ms-u-lg7 { + width: 58.333333333333336%; + } + + .ms-u-lg6 { + width: 50%; + } + + .ms-u-lg5 { + width: 41.66666666666667%; + } + + .ms-u-lg4 { + width: 33.33333333333333%; + } + + .ms-u-lg3 { + width: 25%; + } + + .ms-u-lg2 { + width: 16.666666666666664%; + } + + .ms-u-lg1 { + width: 8.333333333333332%; + } + + .ms-u-lgPull12 { + left: 100%; + } + + .ms-u-lgPull11 { + left: 91.66666666666666%; + } + + .ms-u-lgPull10 { + left: 83.33333333333334%; + } + + .ms-u-lgPull9 { + left: 75%; + } + + .ms-u-lgPull8 { + left: 66.66666666666666%; + } + + .ms-u-lgPull7 { + left: 58.333333333333336%; + } + + .ms-u-lgPull6 { + left: 50%; + } + + .ms-u-lgPull5 { + left: 41.66666666666667%; + } + + .ms-u-lgPull4 { + left: 33.33333333333333%; + } + + .ms-u-lgPull3 { + left: 25%; + } + + .ms-u-lgPull2 { + left: 16.666666666666664%; + } + + .ms-u-lgPull1 { + left: 8.333333333333332%; + } + + .ms-u-lgPull0 { + left: auto; + } + + .ms-u-lgPush12 { + right: 100%; + } + + .ms-u-lgPush11 { + right: 91.66666666666666%; + } + + .ms-u-lgPush10 { + right: 83.33333333333334%; + } + + .ms-u-lgPush9 { + right: 75%; + } + + .ms-u-lgPush8 { + right: 66.66666666666666%; + } + + .ms-u-lgPush7 { + right: 58.333333333333336%; + } + + .ms-u-lgPush6 { + right: 50%; + } + + .ms-u-lgPush5 { + right: 41.66666666666667%; + } + + .ms-u-lgPush4 { + right: 33.33333333333333%; + } + + .ms-u-lgPush3 { + right: 25%; + } + + .ms-u-lgPush2 { + right: 16.666666666666664%; + } + + .ms-u-lgPush1 { + right: 8.333333333333332%; + } + + .ms-u-lgPush0 { + right: auto; + } + + .ms-u-lgOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-lgOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-lgOffset9 { + margin-right: 75%; + } + + .ms-u-lgOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-lgOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-lgOffset6 { + margin-right: 50%; + } + + .ms-u-lgOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-lgOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-lgOffset3 { + margin-right: 25%; + } + + .ms-u-lgOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-lgOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-lgOffset0 { + margin-right: 0; + } +} + +@media (min-width: 1024px) { + .ms-u-xl12 { + width: 100%; + } + + .ms-u-xl11 { + width: 91.66666666666666%; + } + + .ms-u-xl10 { + width: 83.33333333333334%; + } + + .ms-u-xl9 { + width: 75%; + } + + .ms-u-xl8 { + width: 66.66666666666666%; + } + + .ms-u-xl7 { + width: 58.333333333333336%; + } + + .ms-u-xl6 { + width: 50%; + } + + .ms-u-xl5 { + width: 41.66666666666667%; + } + + .ms-u-xl4 { + width: 33.33333333333333%; + } + + .ms-u-xl3 { + width: 25%; + } + + .ms-u-xl2 { + width: 16.666666666666664%; + } + + .ms-u-xl1 { + width: 8.333333333333332%; + } + + .ms-u-xlPull12 { + left: 100%; + } + + .ms-u-xlPull11 { + left: 91.66666666666666%; + } + + .ms-u-xlPull10 { + left: 83.33333333333334%; + } + + .ms-u-xlPull9 { + left: 75%; + } + + .ms-u-xlPull8 { + left: 66.66666666666666%; + } + + .ms-u-xlPull7 { + left: 58.333333333333336%; + } + + .ms-u-xlPull6 { + left: 50%; + } + + .ms-u-xlPull5 { + left: 41.66666666666667%; + } + + .ms-u-xlPull4 { + left: 33.33333333333333%; + } + + .ms-u-xlPull3 { + left: 25%; + } + + .ms-u-xlPull2 { + left: 16.666666666666664%; + } + + .ms-u-xlPull1 { + left: 8.333333333333332%; + } + + .ms-u-xlPull0 { + left: auto; + } + + .ms-u-xlPush12 { + right: 100%; + } + + .ms-u-xlPush11 { + right: 91.66666666666666%; + } + + .ms-u-xlPush10 { + right: 83.33333333333334%; + } + + .ms-u-xlPush9 { + right: 75%; + } + + .ms-u-xlPush8 { + right: 66.66666666666666%; + } + + .ms-u-xlPush7 { + right: 58.333333333333336%; + } + + .ms-u-xlPush6 { + right: 50%; + } + + .ms-u-xlPush5 { + right: 41.66666666666667%; + } + + .ms-u-xlPush4 { + right: 33.33333333333333%; + } + + .ms-u-xlPush3 { + right: 25%; + } + + .ms-u-xlPush2 { + right: 16.666666666666664%; + } + + .ms-u-xlPush1 { + right: 8.333333333333332%; + } + + .ms-u-xlPush0 { + right: auto; + } + + .ms-u-xlOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-xlOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-xlOffset9 { + margin-right: 75%; + } + + .ms-u-xlOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-xlOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-xlOffset6 { + margin-right: 50%; + } + + .ms-u-xlOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-xlOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-xlOffset3 { + margin-right: 25%; + } + + .ms-u-xlOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-xlOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-xlOffset0 { + margin-right: 0; + } +} + +@media (min-width: 1366px) { + .ms-u-xxl12 { + width: 100%; + } + + .ms-u-xxl11 { + width: 91.66666666666666%; + } + + .ms-u-xxl10 { + width: 83.33333333333334%; + } + + .ms-u-xxl9 { + width: 75%; + } + + .ms-u-xxl8 { + width: 66.66666666666666%; + } + + .ms-u-xxl7 { + width: 58.333333333333336%; + } + + .ms-u-xxl6 { + width: 50%; + } + + .ms-u-xxl5 { + width: 41.66666666666667%; + } + + .ms-u-xxl4 { + width: 33.33333333333333%; + } + + .ms-u-xxl3 { + width: 25%; + } + + .ms-u-xxl2 { + width: 16.666666666666664%; + } + + .ms-u-xxl1 { + width: 8.333333333333332%; + } + + .ms-u-xxlPull12 { + left: 100%; + } + + .ms-u-xxlPull11 { + left: 91.66666666666666%; + } + + .ms-u-xxlPull10 { + left: 83.33333333333334%; + } + + .ms-u-xxlPull9 { + left: 75%; + } + + .ms-u-xxlPull8 { + left: 66.66666666666666%; + } + + .ms-u-xxlPull7 { + left: 58.333333333333336%; + } + + .ms-u-xxlPull6 { + left: 50%; + } + + .ms-u-xxlPull5 { + left: 41.66666666666667%; + } + + .ms-u-xxlPull4 { + left: 33.33333333333333%; + } + + .ms-u-xxlPull3 { + left: 25%; + } + + .ms-u-xxlPull2 { + left: 16.666666666666664%; + } + + .ms-u-xxlPull1 { + left: 8.333333333333332%; + } + + .ms-u-xxlPull0 { + left: auto; + } + + .ms-u-xxlPush12 { + right: 100%; + } + + .ms-u-xxlPush11 { + right: 91.66666666666666%; + } + + .ms-u-xxlPush10 { + right: 83.33333333333334%; + } + + .ms-u-xxlPush9 { + right: 75%; + } + + .ms-u-xxlPush8 { + right: 66.66666666666666%; + } + + .ms-u-xxlPush7 { + right: 58.333333333333336%; + } + + .ms-u-xxlPush6 { + right: 50%; + } + + .ms-u-xxlPush5 { + right: 41.66666666666667%; + } + + .ms-u-xxlPush4 { + right: 33.33333333333333%; + } + + .ms-u-xxlPush3 { + right: 25%; + } + + .ms-u-xxlPush2 { + right: 16.666666666666664%; + } + + .ms-u-xxlPush1 { + right: 8.333333333333332%; + } + + .ms-u-xxlPush0 { + right: auto; + } + + .ms-u-xxlOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-xxlOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-xxlOffset9 { + margin-right: 75%; + } + + .ms-u-xxlOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-xxlOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-xxlOffset6 { + margin-right: 50%; + } + + .ms-u-xxlOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-xxlOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-xxlOffset3 { + margin-right: 25%; + } + + .ms-u-xxlOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-xxlOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-xxlOffset0 { + margin-right: 0; + } +} + +@media (min-width: 1920px) { + .ms-u-xxxl12 { + width: 100%; + } + + .ms-u-xxxl11 { + width: 91.66666666666666%; + } + + .ms-u-xxxl10 { + width: 83.33333333333334%; + } + + .ms-u-xxxl9 { + width: 75%; + } + + .ms-u-xxxl8 { + width: 66.66666666666666%; + } + + .ms-u-xxxl7 { + width: 58.333333333333336%; + } + + .ms-u-xxxl6 { + width: 50%; + } + + .ms-u-xxxl5 { + width: 41.66666666666667%; + } + + .ms-u-xxxl4 { + width: 33.33333333333333%; + } + + .ms-u-xxxl3 { + width: 25%; + } + + .ms-u-xxxl2 { + width: 16.666666666666664%; + } + + .ms-u-xxxl1 { + width: 8.333333333333332%; + } + + .ms-u-xxxlPull12 { + left: 100%; + } + + .ms-u-xxxlPull11 { + left: 91.66666666666666%; + } + + .ms-u-xxxlPull10 { + left: 83.33333333333334%; + } + + .ms-u-xxxlPull9 { + left: 75%; + } + + .ms-u-xxxlPull8 { + left: 66.66666666666666%; + } + + .ms-u-xxxlPull7 { + left: 58.333333333333336%; + } + + .ms-u-xxxlPull6 { + left: 50%; + } + + .ms-u-xxxlPull5 { + left: 41.66666666666667%; + } + + .ms-u-xxxlPull4 { + left: 33.33333333333333%; + } + + .ms-u-xxxlPull3 { + left: 25%; + } + + .ms-u-xxxlPull2 { + left: 16.666666666666664%; + } + + .ms-u-xxxlPull1 { + left: 8.333333333333332%; + } + + .ms-u-xxxlPull0 { + left: auto; + } + + .ms-u-xxxlPush12 { + right: 100%; + } + + .ms-u-xxxlPush11 { + right: 91.66666666666666%; + } + + .ms-u-xxxlPush10 { + right: 83.33333333333334%; + } + + .ms-u-xxxlPush9 { + right: 75%; + } + + .ms-u-xxxlPush8 { + right: 66.66666666666666%; + } + + .ms-u-xxxlPush7 { + right: 58.333333333333336%; + } + + .ms-u-xxxlPush6 { + right: 50%; + } + + .ms-u-xxxlPush5 { + right: 41.66666666666667%; + } + + .ms-u-xxxlPush4 { + right: 33.33333333333333%; + } + + .ms-u-xxxlPush3 { + right: 25%; + } + + .ms-u-xxxlPush2 { + right: 16.666666666666664%; + } + + .ms-u-xxxlPush1 { + right: 8.333333333333332%; + } + + .ms-u-xxxlPush0 { + right: auto; + } + + .ms-u-xxxlOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-xxxlOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-xxxlOffset9 { + margin-right: 75%; + } + + .ms-u-xxxlOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-xxxlOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-xxxlOffset6 { + margin-right: 50%; + } + + .ms-u-xxxlOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-xxxlOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-xxxlOffset3 { + margin-right: 25%; + } + + .ms-u-xxxlOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-xxxlOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-xxxlOffset0 { + margin-right: 0; + } +} + +.ms-Grid { + box-sizing: border-box; + *zoom: 1; + padding: 0 8px; +} + +.ms-Grid:before, +.ms-Grid:after { + 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:before, +.ms-Grid-row:after { + 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; +} diff --git a/dist/css/fabric.rtl.min.css b/dist/css/fabric.rtl.min.css new file mode 100644 index 000000000..9894534ff --- /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 3.0.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:#2b88d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#71afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#c7e0f4}.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:#2b88d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#71afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#c7e0f4}.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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/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://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:100}.ms-font-xxl{font-size:28px}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l,.ms-font-xl{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi,.ms-font-xs{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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:#2b88d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#71afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#c7e0f4}.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:Office365Icons;src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot);src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg#office365icons) format('svg');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none}.ms-Icon--circleEmpty:before{content:'\e000'}.ms-Icon--circleFill:before{content:'\e001'}.ms-Icon--placeholder:before{content:'\e002'}.ms-Icon--star:before{content:'\e003'}.ms-Icon--plus:before{content:'\e004'}.ms-Icon--minus:before{content:'\e005'}.ms-Icon--question:before{content:'\e006'}.ms-Icon--exclamation:before{content:'\e007'}.ms-Icon--person:before{content:'\e008'}.ms-Icon--mail:before{content:'\e009'}.ms-Icon--infoCircle:before{content:'\e00a'}.ms-Icon--alert:before{content:'\e00b'}.ms-Icon--xCircle:before{content:'\e00c'}.ms-Icon--mailOpen:before{content:'\e00d'}.ms-Icon--people:before{content:'\e00e'}.ms-Icon--bell:before{content:'\e010'}.ms-Icon--calendar:before{content:'\e011'}.ms-Icon--scheduling:before{content:'\e012'}.ms-Icon--event:before{content:'\e013'}.ms-Icon--folder:before{content:'\e014'}.ms-Icon--documents:before{content:'\e015'}.ms-Icon--onedrive:before{content:'\e016'}.ms-Icon--chat:before{content:'\e017'}.ms-Icon--sites:before{content:'\e018'}.ms-Icon--listBullets:before{content:'\e019'}.ms-Icon--calendarWeek:before{content:'\e01a'}.ms-Icon--calendarWorkWeek:before{content:'\e01b'}.ms-Icon--calendarDay:before{content:'\e01c'}.ms-Icon--folderMove:before{content:'\e01d'}.ms-Icon--panel:before{content:'\e01e'}.ms-Icon--popout:before{content:'\e01f'}.ms-Icon--menu:before{content:'\e020'}.ms-Icon--home:before{content:'\e021'}.ms-Icon--favorites:before{content:'\e022'}.ms-Icon--phone:before{content:'\e023'}.ms-Icon--mailSend:before{content:'\e024'}.ms-Icon--save:before{content:'\e025'}.ms-Icon--trash:before{content:'\e026'}.ms-Icon--pencil:before{content:'\e027'}.ms-Icon--flag:before{content:'\e028'}.ms-Icon--reply:before{content:'\e029'}.ms-Icon--miniatures:before{content:'\e02a'}.ms-Icon--voicemail:before{content:'\e02b'}.ms-Icon--play:before{content:'\e02c'}.ms-Icon--pause:before{content:'\e02d'}.ms-Icon--onlineAdd:before{content:'\e02e'}.ms-Icon--onlineJoin:before{content:'\e02f'}.ms-Icon--replyAll:before{content:'\e030'}.ms-Icon--attachment:before{content:'\e031'}.ms-Icon--drm:before{content:'\e032'}.ms-Icon--pinDown:before{content:'\e033'}.ms-Icon--refresh:before{content:'\e034'}.ms-Icon--gear:before{content:'\e035'}.ms-Icon--smiley:before{content:'\e036'}.ms-Icon--info:before{content:'\e037'}.ms-Icon--lock:before{content:'\e038'}.ms-Icon--search:before{content:'\e039'}.ms-Icon--questionReverse:before{content:'\e03a'}.ms-Icon--notRecurring:before{content:'\e03b'}.ms-Icon--tasks:before{content:'\e040'}.ms-Icon--check:before{content:'\e041'}.ms-Icon--x:before{content:'\e042'}.ms-Icon--ellipsis:before{content:'\e045'}.ms-Icon--dot:before{content:'\e046'}.ms-Icon--arrowUp:before{content:'\e047'}.ms-Icon--arrowDown:before{content:'\e048'}.ms-Icon--arrowLeft:before{content:'\e049'}.ms-Icon--arrowRight:before{content:'\e04a'}.ms-Icon--download:before{content:'\e04b'}.ms-Icon--directions:before{content:'\e04c'}.ms-Icon--microphone:before{content:'\e04f'}.ms-Icon--caretUp:before{content:'\e051'}.ms-Icon--caretDown:before{content:'\e052'}.ms-Icon--caretLeft:before{content:'\e053'}.ms-Icon--caretRight:before{content:'\e054'}.ms-Icon--caretUpLeft:before{content:'\e05a'}.ms-Icon--caretUpRight:before{content:'\e05b'}.ms-Icon--caretDownRight:before{content:'\e05c'}.ms-Icon--caretDownLeft:before{content:'\e05d'}.ms-Icon--note:before{content:'\e06a'}.ms-Icon--noteReply:before{content:'\e06b'}.ms-Icon--noteForward:before{content:'\e06c'}.ms-Icon--key:before{content:'\e06f'}.ms-Icon--tile:before{content:'\e070'}.ms-Icon--taskRecurring:before{content:'\e071'}.ms-Icon--starEmpty:before{content:'\e073'}.ms-Icon--upload:before{content:'\e076'}.ms-Icon--wrench:before{content:'\e077'}.ms-Icon--share:before{content:'\e078'}.ms-Icon--documentReply:before{content:'\e079'}.ms-Icon--documentForward:before{content:'\e07a'}.ms-Icon--partner:before{content:'\e080'}.ms-Icon--reactivate:before{content:'\e084'}.ms-Icon--sort:before{content:'\e085'}.ms-Icon--personAdd:before{content:'\e086'}.ms-Icon--chevronUp:before{content:'\e087'}.ms-Icon--chevronDown:before{content:'\e088'}.ms-Icon--chevronLeft:before{content:'\e089'}.ms-Icon--chevronRight:before{content:'\e08a'}.ms-Icon--peopleAdd:before{content:'\e08c'}.ms-Icon--newsfeed:before{content:'\e08d'}.ms-Icon--notebook:before{content:'\e08e'}.ms-Icon--link:before{content:'\e08f'}.ms-Icon--chevronsUp:before{content:'\e090'}.ms-Icon--chevronsDown:before{content:'\e091'}.ms-Icon--chevronsLeft:before{content:'\e092'}.ms-Icon--chevronsRight:before{content:'\e093'}.ms-Icon--clutter:before{content:'\e09a'}.ms-Icon--subscribe:before{content:'\e09c'}.ms-Icon--unsubscribe:before{content:'\e09d'}.ms-Icon--personRemove:before{content:'\e09e'}.ms-Icon--receiptForward:before{content:'\e0a0'}.ms-Icon--receiptReply:before{content:'\e0a1'}.ms-Icon--receiptCheck:before{content:'\e0a2'}.ms-Icon--peopleRemove:before{content:'\e0a3'}.ms-Icon--merge:before{content:'\e0a4'}.ms-Icon--split:before{content:'\e0a5'}.ms-Icon--eventCancel:before{content:'\e0a6'}.ms-Icon--eventShare:before{content:'\e0a7'}.ms-Icon--today:before{content:'\e0a9'}.ms-Icon--oofReply:before{content:'\e0aa'}.ms-Icon--voicemailReply:before{content:'\e0ac'}.ms-Icon--voicemailForward:before{content:'\e0ad'}.ms-Icon--ribbon:before{content:'\e0af'}.ms-Icon--contact:before{content:'\e0b0'}.ms-Icon--eye:before{content:'\e0b1'}.ms-Icon--glasses:before{content:'\e0b2'}.ms-Icon--print:before{content:'\e100'}.ms-Icon--room:before{content:'\e101'}.ms-Icon--post:before{content:'\e102'}.ms-Icon--toggle:before{content:'\e103'}.ms-Icon--touch:before{content:'\e104'}.ms-Icon--clock:before{content:'\e105'}.ms-Icon--fax:before{content:'\e106'}.ms-Icon--lightning:before{content:'\e110'}.ms-Icon--dialpad:before{content:'\e111'}.ms-Icon--phoneTransfer:before{content:'\e112'}.ms-Icon--phoneAdd:before{content:'\e113'}.ms-Icon--late:before{content:'\e114'}.ms-Icon--chatAdd:before{content:'\e115'}.ms-Icon--conflict:before{content:'\e116'}.ms-Icon--navigate:before{content:'\e117'}.ms-Icon--camera:before{content:'\e119'}.ms-Icon--filter:before{content:'\e11a'}.ms-Icon--fullscreen:before{content:'\e11b'}.ms-Icon--new:before{content:'\e11c'}.ms-Icon--mailEmpty:before{content:'\e11d'}.ms-Icon--editBox:before{content:'\e11e'}.ms-Icon--waffle:before{content:'\e11f'}.ms-Icon--work:before{content:'\e120'}.ms-Icon--eventRecurring:before{content:'\e121'}.ms-Icon--cart:before{content:'\e122'}.ms-Icon--socialListening:before{content:'\e123'}.ms-Icon--mapMarker:before{content:'\e124'}.ms-Icon--org:before{content:'\e125'}.ms-Icon--replyAlt:before{content:'\e150'}.ms-Icon--replyAllAlt:before{content:'\e152'}.ms-Icon--eventInfo:before{content:'\e154'}.ms-Icon--group:before{content:'\e155'}.ms-Icon--money:before{content:'\e161'}.ms-Icon--graph:before{content:'\e162'}.ms-Icon--noteEdit:before{content:'\e163'}.ms-Icon--dashboard:before{content:'\e164'}.ms-Icon--mailEdit:before{content:'\e165'}.ms-Icon--pinLeft:before{content:'\e167'}.ms-Icon--heart:before{content:'\e16a'}.ms-Icon--heartEmpty:before{content:'\e16b'}.ms-Icon--picture:before{content:'\e16c'}.ms-Icon--cake:before{content:'\e16d'}.ms-Icon--books:before{content:'\e16e'}.ms-Icon--chart:before{content:'\e16f'}.ms-Icon--video:before{content:'\e170'}.ms-Icon--soccer:before{content:'\e171'}.ms-Icon--meal:before{content:'\e172'}.ms-Icon--balloon:before{content:'\e173'}.ms-Icon--cat:before{content:'\e174'}.ms-Icon--dog:before{content:'\e175'}.ms-Icon--bag:before{content:'\e176'}.ms-Icon--music:before{content:'\e177'}.ms-Icon--stopwatch:before{content:'\e178'}.ms-Icon--coffee:before{content:'\e179'}.ms-Icon--briefcase:before{content:'\e17a'}.ms-Icon--pill:before{content:'\e17b'}.ms-Icon--trophy:before{content:'\e17c'}.ms-Icon--firstAid:before{content:'\e17d'}.ms-Icon--plane:before{content:'\e17e'}.ms-Icon--page:before{content:'\e17f'}.ms-Icon--car:before{content:'\e180'}.ms-Icon--dogAlt:before{content:'\e181'}.ms-Icon--document:before{content:'\e182'}.ms-Icon--metadata:before{content:'\e183'}.ms-Icon--pointItem:before{content:'\e184'}.ms-Icon--text:before{content:'\e185'}.ms-Icon--fieldText:before{content:'\e186'}.ms-Icon--fieldNumber:before{content:'\e187'}.ms-Icon--dropdown:before{content:'\e188'}.ms-Icon--radioButton:before{content:'\e189'}.ms-Icon--checkbox:before{content:'\e18a'}.ms-Icon--story:before{content:'\e18b'}.ms-Icon--bold:before{content:'\e18c'}.ms-Icon--italic:before{content:'\e18d'}.ms-Icon--underline:before{content:'\e18e'}.ms-Icon--quote:before{content:'\e18f'}.ms-Icon--styleRemove:before{content:'\e190'}.ms-Icon--pictureAdd:before{content:'\e191'}.ms-Icon--pictureRemove:before{content:'\e192'}.ms-Icon--desktop:before{content:'\e193'}.ms-Icon--tablet:before{content:'\e194'}.ms-Icon--mobile:before{content:'\e195'}.ms-Icon--table:before{content:'\e196'}.ms-Icon--hide:before{content:'\e197'}.ms-Icon--shield:before{content:'\e198'}.ms-Icon--header:before{content:'\e19a'}.ms-Icon--paint:before{content:'\e19b'}.ms-Icon--support:before{content:'\e19c'}.ms-Icon--settings:before{content:'\e19d'}.ms-Icon--creditCard:before{content:'\e19e'}.ms-Icon--reload:before{content:'\e19f'}.ms-Icon--peopleSecurity:before{content:'\e200'}.ms-Icon--fieldTextBox:before{content:'\e203'}.ms-Icon--multiChoice:before{content:'\e204'}.ms-Icon--fieldMail:before{content:'\e205'}.ms-Icon--contactForm:before{content:'\e206'}.ms-Icon--circleHalfFilled:before{content:'\e207'}.ms-Icon--documentPDF:before{content:'\e208'}.ms-Icon--bookmark:before{content:'\e209'}.ms-Icon--circleUnfilled:before{content:'\e20b'}.ms-Icon--circleFilled:before{content:'\e20c'}.ms-Icon--textBox:before{content:'\e20e'}.ms-Icon--drop:before{content:'\e20f'}.ms-Icon--sun:before{content:'\e210'}.ms-Icon--lifesaver:before{content:'\e211'}.ms-Icon--lifesaverLock:before{content:'\e212'}.ms-Icon--mailUnread:before{content:'\e213'}.ms-Icon--mailRead:before{content:'\e214'}.ms-Icon--inboxCheck:before{content:'\e215'}.ms-Icon--folderSearch:before{content:'\e216'}.ms-Icon--collapse:before{content:'\e217'}.ms-Icon--expand:before{content:'\e218'}.ms-Icon--ascending:before{content:'\e219'}.ms-Icon--descending:before{content:'\e21a'}.ms-Icon--filterClear:before{content:'\e21b'}.ms-Icon--checkboxEmpty:before{content:'\e21c'}.ms-Icon--checkboxMixed:before{content:'\e21d'}.ms-Icon--boards:before{content:'\e21e'}.ms-Icon--checkboxCheck:before{content:'\e21f'}.ms-Icon--frowny:before{content:'\e220'}.ms-Icon--lightBulb:before{content:'\e221'}.ms-Icon--globe:before{content:'\e222'}.ms-Icon--deviceWipe:before{content:'\e223'}.ms-Icon--listCheck:before{content:'\e226'}.ms-Icon--listGroup:before{content:'\e227'}.ms-Icon--timeline:before{content:'\e228'}.ms-Icon--fontIncrease:before{content:'\e229'}.ms-Icon--fontDecrease:before{content:'\e22a'}.ms-Icon--fontColor:before{content:'\e22b'}.ms-Icon--mailCheck:before{content:'\e22c'}.ms-Icon--mailDown:before{content:'\e22d'}.ms-Icon--listCheckbox:before{content:'\e22e'}.ms-Icon--sunAdd:before{content:'\e22f'}.ms-Icon--sunQuestion:before{content:'\e230'}.ms-Icon--chevronThinUp:before{content:'\e231'}.ms-Icon--chevronThinDown:before{content:'\e232'}.ms-Icon--chevronThinLeft:before{content:'\e233'}.ms-Icon--chevronThinRight:before{content:'\e234'}.ms-Icon--chevronThickUp:before{content:'\e235'}.ms-Icon--chevronThickDown:before{content:'\e236'}.ms-Icon--chevronThickLeft:before{content:'\e237'}.ms-Icon--chevronThickRight:before{content:'\e238'}.ms-Icon--linkRemove:before{content:'\e239'}.ms-Icon--alertOutline:before{content:'\e23b'}.ms-Icon--documentLandscape:before{content:'\e23c'}.ms-Icon--documentAdd:before{content:'\e23d'}.ms-Icon--toggleMiddle:before{content:'\e23e'}.ms-Icon--embed:before{content:'\e23f'}.ms-Icon--listNumbered:before{content:'\e240'}.ms-Icon--peopleCheck:before{content:'\e242'}.ms-Icon--caretUpOutline:before{content:'\e243'}.ms-Icon--caretDownOutline:before{content:'\e244'}.ms-Icon--caretLeftOutline:before{content:'\e245'}.ms-Icon--caretRightOutline:before{content:'\e246'}.ms-Icon--mailSync:before{content:'\e248'}.ms-Icon--mailError:before{content:'\e249'}.ms-Icon--mailPause:before{content:'\e24a'}.ms-Icon--peopleSync:before{content:'\e24b'}.ms-Icon--peopleError:before{content:'\e24c'}.ms-Icon--peoplePause:before{content:'\e24d'}.ms-Icon--circleBall:before{content:'\e24e'}.ms-Icon--circleBalloons:before{content:'\e24f'}.ms-Icon--circleCar:before{content:'\e250'}.ms-Icon--circleCat:before{content:'\e251'}.ms-Icon--circleCoffee:before{content:'\e252'}.ms-Icon--circleDog:before{content:'\e253'}.ms-Icon--circleLightning:before{content:'\e254'}.ms-Icon--circlePill:before{content:'\e255'}.ms-Icon--circlePlane:before{content:'\e256'}.ms-Icon--circlePoodle:before{content:'\e257'}.ms-Icon--checkPeople:before{content:'\e259'}.ms-Icon--documentSearch:before{content:'\e25a'}.ms-Icon--sortLines:before{content:'\e25c'}.ms-Icon--calendarPublic:before{content:'\e25d'}.ms-Icon--contactPublic:before{content:'\e25e'}.ms-Icon--classNotebook:before{content:'\e25f'}.ms-Icon--triangleUp:before{content:'\e260'}.ms-Icon--triangleRight:before{content:'\e261'}.ms-Icon--triangleDown:before{content:'\e262'}.ms-Icon--triangleLeft:before{content:'\e263'}.ms-Icon--triangleEmptyUp:before{content:'\e264'}.ms-Icon--triangleEmptyRight:before{content:'\e265'}.ms-Icon--triangleEmptyDown:before{content:'\e266'}.ms-Icon--triangleEmptyLeft:before{content:'\e267'}.ms-Icon--filePDF:before{content:'\e268'}.ms-Icon--fileImage:before{content:'\e26c'}.ms-Icon--fileDocument:before{content:'\e26d'}.ms-Icon--listGroup2:before{content:'\e26e'}.ms-Icon--copy:before{content:'\e26f'}.ms-Icon--creditCardOutline:before{content:'\e270'}.ms-Icon--mailPublic:before{content:'\e272'}.ms-Icon--folderPublic:before{content:'\e273'}.ms-Icon--teamwork:before{content:'\e274'}.ms-Icon--move:before{content:'\e275'}.ms-Icon--classroom:before{content:'\e276'}.ms-Icon--menu2:before{content:'\e277'}.ms-Icon--plus2:before{content:'\e278'}.ms-Icon--tag:before{content:'\e279'}.ms-Icon--arrowUp2:before{content:'\e27a'}.ms-Icon--arrowDown2:before{content:'\e27b'}.ms-Icon--circlePlus:before{content:'\e27c'}.ms-Icon--circleInfo:before{content:'\e27d'}.ms-Icon--section:before{content:'\e27e'}.ms-Icon--sections:before{content:'\e27f'}.ms-Icon--at:before{content:'\e282'}.ms-Icon--arrowUpRight:before{content:'\e283'}.ms-Icon--arrowDownRight:before{content:'\e284'}.ms-Icon--arrowDownLeft:before{content:'\e285'}.ms-Icon--arrowUpLeft:before{content:'\e286'}.ms-Icon--bundle:before{content:'\e287'}.ms-Icon--pictureEdit:before{content:'\e288'}.ms-Icon--protectionCenter:before{content:'\e289'}.ms-Icon--alert2:before{content:'\e28a'}.ms-Icon--skypeCircleCheck:before{content:'\e310'}.ms-Icon--skypeCircleClock:before{content:'\e311'}.ms-Icon--skypeCircleMinus:before{content:'\e312'}.ms-Icon--skypeCheck:before{content:'\e315'}.ms-Icon--skypeClock:before{content:'\e316'}.ms-Icon--skypeMinus:before{content:'\e317'}.ms-Icon--circle{position:relative;display:inline-block;font-size:1rem;width:1em;height:1em;margin:0 0 0 .5em;padding:0;text-align:right;-webkit-font-smoothing:antialiased}.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--circle.ms-Icon--star:before{top:-2%;right:1%}.ms-Icon--circle.ms-Icon--person:before{top:-2%;right:-3%}.ms-Icon--circle.ms-Icon--alert:before{top:-4%}.ms-Icon--circle.ms-Icon--mailOpen:before{top:-5%}.ms-Icon--circle.ms-Icon--people:before{top:-4%;right:-7%}.ms-Icon--circle.ms-Icon--bell:before{top:-3%}.ms-Icon--circle.ms-Icon--scheduling:before{top:-3%;right:6%}.ms-Icon--circle.ms-Icon--documents:before{top:-1%;right:-2%}.ms-Icon--circle.ms-Icon--listBullets:before{top:-1%;right:5%}.ms-Icon--circle.ms-Icon--panel:before{right:-2%}.ms-Icon--circle.ms-Icon--popout:before{top:-2%;right:-2%}.ms-Icon--circle.ms-Icon--home:before{top:-4%}.ms-Icon--circle.ms-Icon--favorites:before{top:-2%;right:2%}.ms-Icon--circle.ms-Icon--phone:before{top:-2%;right:-2%}.ms-Icon--circle.ms-Icon--mailSend:before{right:-10%}.ms-Icon--circle.ms-Icon--pencil:before{top:-2%;right:3%}.ms-Icon--circle.ms-Icon--flag:before{right:3%}.ms-Icon--circle.ms-Icon--miniatures:before{right:-3%}.ms-Icon--circle.ms-Icon--voicemail:before{top:2%;right:-7%}.ms-Icon--circle.ms-Icon--onlineAdd:before{top:-1%;right:2%}.ms-Icon--circle.ms-Icon--pinDown:before{top:5%}.ms-Icon--circle.ms-Icon--gear:before{right:2%}.ms-Icon--circle.ms-Icon--check:before{top:3%}.ms-Icon--circle.ms-Icon--ellipsis:before{top:2%;right:-12%}.ms-Icon--circle.ms-Icon--directions:before{right:10%}.ms-Icon--circle.ms-Icon--microphone:before{top:-3%}.ms-Icon--circle.ms-Icon--caretDown:before{top:5%;right:2%}.ms-Icon--circle.ms-Icon--caretLeft:before{right:-6%}.ms-Icon--circle.ms-Icon--caretRight:before{right:6%}.ms-Icon--circle.ms-Icon--caretUpLeft:before{top:5%;right:5%}.ms-Icon--circle.ms-Icon--caretUpRight:before{top:5%;right:-3%}.ms-Icon--circle.ms-Icon--caretDownRight:before{right:-3%}.ms-Icon--circle.ms-Icon--caretDownLeft:before{right:4%}.ms-Icon--circle.ms-Icon--note:before{top:2%;right:-3%}.ms-Icon--circle.ms-Icon--noteReply:before{top:6%;right:3%}.ms-Icon--circle.ms-Icon--noteForward:before{top:6%}.ms-Icon--circle.ms-Icon--key:before{top:5%;right:1%}.ms-Icon--circle.ms-Icon--tile:before{top:-1%;right:-18%}.ms-Icon--circle.ms-Icon--taskRecurring:before{top:2%;right:-1%}.ms-Icon--circle.ms-Icon--starEmpty:before{top:-4%;right:1%}.ms-Icon--circle.ms-Icon--documentReply:before{top:-2%;right:7%}.ms-Icon--circle.ms-Icon--documentForward:before{right:5%}.ms-Icon--circle.ms-Icon--partner:before{top:-2%}.ms-Icon--circle.ms-Icon--reactivate:before{top:-2%;right:6%}.ms-Icon--circle.ms-Icon--sort:before{right:-19%}.ms-Icon--circle.ms-Icon--personAdd:before{top:-2%;right:6%}.ms-Icon--circle.ms-Icon--chevronDown:before{top:4%}.ms-Icon--circle.ms-Icon--chevronLeft:before{right:-5%}.ms-Icon--circle.ms-Icon--chevronRight:before{right:4%}.ms-Icon--circle.ms-Icon--peopleAdd:before{top:-5%;right:-12%}.ms-Icon--circle.ms-Icon--newsfeed:before,.ms-Icon--circle.ms-Icon--notebook:before{right:-4%}.ms-Icon--circle.ms-Icon--link:before{top:2%;right:-18%}.ms-Icon--circle.ms-Icon--chevronsDown:before{top:5%}.ms-Icon--circle.ms-Icon--chevronsLeft:before{right:-5%}.ms-Icon--circle.ms-Icon--chevronsRight:before{right:4%}.ms-Icon--circle.ms-Icon--personRemove:before{right:5%}.ms-Icon--circle.ms-Icon--receiptCheck:before,.ms-Icon--circle.ms-Icon--receiptForward:before,.ms-Icon--circle.ms-Icon--receiptReply:before{right:-20%}.ms-Icon--circle.ms-Icon--peopleRemove:before{top:-3%;right:-12%}.ms-Icon--circle.ms-Icon--merge:before,.ms-Icon--circle.ms-Icon--split:before{top:2%}.ms-Icon--circle.ms-Icon--eventCancel:before{right:-2%}.ms-Icon--circle.ms-Icon--today:before{top:-2%}.ms-Icon--circle.ms-Icon--oofReply:before{right:5%}.ms-Icon--circle.ms-Icon--voicemailReply:before{top:4%;right:-25%}.ms-Icon--circle.ms-Icon--voicemailForward:before{top:4%;right:-20%}.ms-Icon--circle.ms-Icon--eye:before{top:-4%}.ms-Icon--circle.ms-Icon--post:before{top:-4%;right:4%}.ms-Icon--circle.ms-Icon--fax:before{top:-3%;right:-2%}.ms-Icon--circle.ms-Icon--lightning:before{top:2%;right:1%}.ms-Icon--circle.ms-Icon--filter:before{top:7%}.ms-Icon--circle.ms-Icon--cart:before{right:3%}.ms-Icon--circle.ms-Icon--mapMarker:before,.ms-Icon--circle.ms-Icon--socialListening:before{top:2%}.ms-Icon--circle.ms-Icon--replyAllAlt:before{right:-16%}.ms-Icon--circle.ms-Icon--group:before{right:-33%}.ms-Icon--circle.ms-Icon--money:before{right:-8%}.ms-Icon--circle.ms-Icon--noteEdit:before{right:4%}.ms-Icon--circle.ms-Icon--mailEdit:before{top:3%;right:7%}.ms-Icon--circle.ms-Icon--pinLeft:before{right:-6%}.ms-Icon--circle.ms-Icon--heart:before,.ms-Icon--circle.ms-Icon--heartEmpty:before{top:5%}.ms-Icon--circle.ms-Icon--cake:before{top:-5%}.ms-Icon--circle.ms-Icon--books:before{right:-8%}.ms-Icon--circle.ms-Icon--video:before{top:-3%;right:3%}.ms-Icon--circle.ms-Icon--balloon:before{top:4%;right:-1%}.ms-Icon--circle.ms-Icon--music:before{top:-2%;right:-5%}.ms-Icon--circle.ms-Icon--coffee:before,.ms-Icon--circle.ms-Icon--stopwatch:before{top:-3%;right:3%}.ms-Icon--circle.ms-Icon--plane:before{right:4%}.ms-Icon--circle.ms-Icon--dogAlt:before{right:-15%}.ms-Icon--circle.ms-Icon--metadata:before{top:-4%;right:4%}.ms-Icon--circle.ms-Icon--text:before{top:-4%;right:10%}.ms-Icon--circle.ms-Icon--dropdown:before,.ms-Icon--circle.ms-Icon--fieldNumber:before,.ms-Icon--circle.ms-Icon--fieldText:before{right:-14%}.ms-Icon--circle.ms-Icon--story:before{right:-5%}.ms-Icon--circle.ms-Icon--bold:before{right:4%}.ms-Icon--circle.ms-Icon--underline:before{top:4%}.ms-Icon--circle.ms-Icon--quote:before{right:-4%}.ms-Icon--circle.ms-Icon--styleRemove:before{top:4%;right:5%}.ms-Icon--circle.ms-Icon--pictureAdd:before,.ms-Icon--circle.ms-Icon--pictureRemove:before{right:-6%}.ms-Icon--circle.ms-Icon--mobile:before{right:-3%}.ms-Icon--circle.ms-Icon--hide:before{top:-4%}.ms-Icon--circle.ms-Icon--header:before{right:-9%}.ms-Icon--circle.ms-Icon--msn:before{right:3%}.ms-Icon--circle.ms-Icon--peopleCheck:before{right:-7%;top:-3%}.ms-Icon--circle.ms-Icon--caretDownOutline:before{top:6%}.ms-Icon--circle.ms-Icon--caretLeftOutline:before{right:-5%}.ms-Icon--circle.ms-Icon--caretRightOutline:before{right:5%}.ms-Icon--circle.ms-Icon--sway:before{right:-3%}.ms-Icon--circle.ms-Icon--mailSync:before{right:8%;top:3%}.ms-Icon--circle.ms-Icon--peopleError:before,.ms-Icon--circle.ms-Icon--peoplePause:before,.ms-Icon--circle.ms-Icon--peopleSync:before{right:-8%}.ms-Icon--circle.ms-Icon--documentSearch:before{right:8%}.ms-Icon--circle.ms-Icon--dynamicsMarketing:before{right:-8%}.ms-Icon--arrowDownLeft:before,.ms-Icon--arrowDownRight:before,.ms-Icon--arrowLeft,.ms-Icon--arrowRight,.ms-Icon--arrowUpLeft:before,.ms-Icon--arrowUpRight:before,.ms-Icon--bundle:before,.ms-Icon--calendar,.ms-Icon--caretDownLeft,.ms-Icon--caretDownRight,.ms-Icon--caretLeft,.ms-Icon--caretLeftOutline,.ms-Icon--caretRight,.ms-Icon--caretRightOutline,.ms-Icon--caretUpLeft,.ms-Icon--caretUpRight,.ms-Icon--cart,.ms-Icon--chart,.ms-Icon--chat,.ms-Icon--check,.ms-Icon--checkbox,.ms-Icon--checkboxCheck,.ms-Icon--checkPeople,.ms-Icon--chevronLeft,.ms-Icon--chevronRight,.ms-Icon--chevronsLeft,.ms-Icon--chevronsRight,.ms-Icon--chevronThickLeft,.ms-Icon--chevronThickRight,.ms-Icon--chevronThinLeft,.ms-Icon--chevronThinRight,.ms-Icon--contactForm,.ms-Icon--contactPublic:before,.ms-Icon--copy:before,.ms-Icon--directions,.ms-Icon--document,.ms-Icon--documentForward,.ms-Icon--documentLandscape,.ms-Icon--documentReply,.ms-Icon--dropdown,.ms-Icon--eventRecurring,.ms-Icon--eventShare,.ms-Icon--fileDocument:before,.ms-Icon--folder,.ms-Icon--folderMove,.ms-Icon--folderSearch,.ms-Icon--graph,.ms-Icon--inboxCheck,.ms-Icon--late,.ms-Icon--listBullets,.ms-Icon--listCheck,.ms-Icon--listCheckbox,.ms-Icon--listGroup,.ms-Icon--listGroup2:before,.ms-Icon--mailSend,.ms-Icon--mailSync,.ms-Icon--metadata,.ms-Icon--multiChoice,.ms-Icon--note,.ms-Icon--notebook,.ms-Icon--noteForward,.ms-Icon--noteReply,.ms-Icon--notRecurring,.ms-Icon--oofReply,.ms-Icon--page,.ms-Icon--peopleCheck,.ms-Icon--peopleSync,.ms-Icon--pinLeft,.ms-Icon--play,.ms-Icon--pointItem,.ms-Icon--post,.ms-Icon--question,.ms-Icon--questionReverse,.ms-Icon--reactivate,.ms-Icon--receiptCheck,.ms-Icon--receiptForward,.ms-Icon--receiptReply,.ms-Icon--refresh,.ms-Icon--reload,.ms-Icon--reply,.ms-Icon--replyAll,.ms-Icon--replyAllAlt,.ms-Icon--replyAlt,.ms-Icon--sections:before,.ms-Icon--socialListening,.ms-Icon--sortLines,.ms-Icon--sunQuestion,.ms-Icon--taskRecurring,.ms-Icon--tasks,.ms-Icon--timeline .ms-Icon--mailCheck,.ms-Icon--toggle,.ms-Icon--triangleEmptyLeft:before,.ms-Icon--triangleEmptyRight:before,.ms-Icon--triangleLeft:before,.ms-Icon--triangleRight:before,.ms-Icon--voicemailForward,.ms-Icon--voicemailReply{transform:scaleX(-1)}.ms-u-slideRightIn10{animation-name:y,a;-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 a{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn20{animation-name:y,b;-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 b{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn40{animation-name:y,c;-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 c{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn10{animation-name:y,d;-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 d{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn20{animation-name:y,e;-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 e{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn40{animation-name:y,f;-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 f{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}.ms-u-slideRightIn400{animation-name:y,g;-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 g{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideLeftIn400{animation-name:y,h;-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 h{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn20{animation-name:y,i;-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 i{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}.ms-u-slideUpIn10{animation-name:y,j;-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 j{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn20{animation-name:y,k;-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 k{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}.ms-u-slideDownIn10{animation-name:y,l;-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 l{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}.ms-u-slideRightOut40{animation-name:z,m;-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 m{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{animation-name:z,n;-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 n{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{animation-name:z,o;-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 o{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{animation-name:z,p;-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 p{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{animation-name:z,q;-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 q{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{animation-name:z,r;-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 r{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{animation-name:z,s;-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 s{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{animation-name:z,t;-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 t{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{animation-name:y,u;-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 u{0%{transform:scale3d(.98,.98,1)}to{transform:scaleX(1)}}.ms-u-scaleDownIn100{animation-name:y,v;-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 v{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleX(1)}}.ms-u-scaleUpOut103{animation-name:z,w;-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 w{0%{transform:scaleX(1)}to{transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{animation-name:z,x;-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 x{0%{transform:scaleX(1)}to{transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;-webkit-animation-name:y;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:y;animation-fill-mode:both}.ms-u-fadeIn100{animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;-webkit-animation-name:y;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:y;animation-fill-mode:both;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;-webkit-animation-name:y;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:y;animation-fill-mode:both;animation-duration:.467s}@keyframes y{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:z;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:z;animation-fill-mode:both}.ms-u-fadeOut100{animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;-webkit-animation-name:z;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:z;animation-fill-mode:both;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;-webkit-animation-name:z;-webkit-animation-fill-mode:both;animation-duration:.367s;animation-name:z;animation-fill-mode:both;animation-duration:.467s}@keyframes z{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{animation-name:A;-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 A{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}.ms-u-rotateN90deg{animation-name:B;-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 B{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:y,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:y,slideLeft20;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn40{animation-name:y,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:y,slideRight10;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideLeftIn20{animation-name:y,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:y,slideRight40;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightIn400{animation-name:y,h;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:y,slideRight400;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}.ms-u-slideRightOut40{animation-name:z,n;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:z,m;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-slideRightOut400{animation-name:z,p;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:z,o;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}.ms-u-rotate90deg{animation-name:B;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:A;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%}.ms-u-md11{width:91.66666666666666%}.ms-u-md10{width:83.33333333333334%}.ms-u-md9{width:75%}.ms-u-md8{width:66.66666666666666%}.ms-u-md7{width:58.333333333333336%}.ms-u-md6{width:50%}.ms-u-md5{width:41.66666666666667%}.ms-u-md4{width:33.33333333333333%}.ms-u-md3{width:25%}.ms-u-md2{width:16.666666666666664%}.ms-u-md1{width:8.333333333333332%}.ms-u-mdPull12{left:100%}.ms-u-mdPull11{left:91.66666666666666%}.ms-u-mdPull10{left:83.33333333333334%}.ms-u-mdPull9{left:75%}.ms-u-mdPull8{left:66.66666666666666%}.ms-u-mdPull7{left:58.333333333333336%}.ms-u-mdPull6{left:50%}.ms-u-mdPull5{left:41.66666666666667%}.ms-u-mdPull4{left:33.33333333333333%}.ms-u-mdPull3{left:25%}.ms-u-mdPull2{left:16.666666666666664%}.ms-u-mdPull1{left:8.333333333333332%}.ms-u-mdPull0{left:auto}.ms-u-mdPush12{right:100%}.ms-u-mdPush11{right:91.66666666666666%}.ms-u-mdPush10{right:83.33333333333334%}.ms-u-mdPush9{right:75%}.ms-u-mdPush8{right:66.66666666666666%}.ms-u-mdPush7{right:58.333333333333336%}.ms-u-mdPush6{right:50%}.ms-u-mdPush5{right:41.66666666666667%}.ms-u-mdPush4{right:33.33333333333333%}.ms-u-mdPush3{right:25%}.ms-u-mdPush2{right:16.666666666666664%}.ms-u-mdPush1{right:8.333333333333332%}.ms-u-mdPush0{right:auto}.ms-u-mdOffset11{margin-right:91.66666666666666%}.ms-u-mdOffset10{margin-right:83.33333333333334%}.ms-u-mdOffset9{margin-right:75%}.ms-u-mdOffset8{margin-right:66.66666666666666%}.ms-u-mdOffset7{margin-right:58.333333333333336%}.ms-u-mdOffset6{margin-right:50%}.ms-u-mdOffset5{margin-right:41.66666666666667%}.ms-u-mdOffset4{margin-right:33.33333333333333%}.ms-u-mdOffset3{margin-right:25%}.ms-u-mdOffset2{margin-right:16.666666666666664%}.ms-u-mdOffset1{margin-right:8.333333333333332%}.ms-u-mdOffset0{margin-right:0}}@media (min-width:640px){.ms-u-lg12{width:100%}.ms-u-lg11{width:91.66666666666666%}.ms-u-lg10{width:83.33333333333334%}.ms-u-lg9{width:75%}.ms-u-lg8{width:66.66666666666666%}.ms-u-lg7{width:58.333333333333336%}.ms-u-lg6{width:50%}.ms-u-lg5{width:41.66666666666667%}.ms-u-lg4{width:33.33333333333333%}.ms-u-lg3{width:25%}.ms-u-lg2{width:16.666666666666664%}.ms-u-lg1{width:8.333333333333332%}.ms-u-lgPull12{left:100%}.ms-u-lgPull11{left:91.66666666666666%}.ms-u-lgPull10{left:83.33333333333334%}.ms-u-lgPull9{left:75%}.ms-u-lgPull8{left:66.66666666666666%}.ms-u-lgPull7{left:58.333333333333336%}.ms-u-lgPull6{left:50%}.ms-u-lgPull5{left:41.66666666666667%}.ms-u-lgPull4{left:33.33333333333333%}.ms-u-lgPull3{left:25%}.ms-u-lgPull2{left:16.666666666666664%}.ms-u-lgPull1{left:8.333333333333332%}.ms-u-lgPull0{left:auto}.ms-u-lgPush12{right:100%}.ms-u-lgPush11{right:91.66666666666666%}.ms-u-lgPush10{right:83.33333333333334%}.ms-u-lgPush9{right:75%}.ms-u-lgPush8{right:66.66666666666666%}.ms-u-lgPush7{right:58.333333333333336%}.ms-u-lgPush6{right:50%}.ms-u-lgPush5{right:41.66666666666667%}.ms-u-lgPush4{right:33.33333333333333%}.ms-u-lgPush3{right:25%}.ms-u-lgPush2{right:16.666666666666664%}.ms-u-lgPush1{right:8.333333333333332%}.ms-u-lgPush0{right:auto}.ms-u-lgOffset11{margin-right:91.66666666666666%}.ms-u-lgOffset10{margin-right:83.33333333333334%}.ms-u-lgOffset9{margin-right:75%}.ms-u-lgOffset8{margin-right:66.66666666666666%}.ms-u-lgOffset7{margin-right:58.333333333333336%}.ms-u-lgOffset6{margin-right:50%}.ms-u-lgOffset5{margin-right:41.66666666666667%}.ms-u-lgOffset4{margin-right:33.33333333333333%}.ms-u-lgOffset3{margin-right:25%}.ms-u-lgOffset2{margin-right:16.666666666666664%}.ms-u-lgOffset1{margin-right:8.333333333333332%}.ms-u-lgOffset0{margin-right:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}.ms-u-xl11{width:91.66666666666666%}.ms-u-xl10{width:83.33333333333334%}.ms-u-xl9{width:75%}.ms-u-xl8{width:66.66666666666666%}.ms-u-xl7{width:58.333333333333336%}.ms-u-xl6{width:50%}.ms-u-xl5{width:41.66666666666667%}.ms-u-xl4{width:33.33333333333333%}.ms-u-xl3{width:25%}.ms-u-xl2{width:16.666666666666664%}.ms-u-xl1{width:8.333333333333332%}.ms-u-xlPull12{left:100%}.ms-u-xlPull11{left:91.66666666666666%}.ms-u-xlPull10{left:83.33333333333334%}.ms-u-xlPull9{left:75%}.ms-u-xlPull8{left:66.66666666666666%}.ms-u-xlPull7{left:58.333333333333336%}.ms-u-xlPull6{left:50%}.ms-u-xlPull5{left:41.66666666666667%}.ms-u-xlPull4{left:33.33333333333333%}.ms-u-xlPull3{left:25%}.ms-u-xlPull2{left:16.666666666666664%}.ms-u-xlPull1{left:8.333333333333332%}.ms-u-xlPull0{left:auto}.ms-u-xlPush12{right:100%}.ms-u-xlPush11{right:91.66666666666666%}.ms-u-xlPush10{right:83.33333333333334%}.ms-u-xlPush9{right:75%}.ms-u-xlPush8{right:66.66666666666666%}.ms-u-xlPush7{right:58.333333333333336%}.ms-u-xlPush6{right:50%}.ms-u-xlPush5{right:41.66666666666667%}.ms-u-xlPush4{right:33.33333333333333%}.ms-u-xlPush3{right:25%}.ms-u-xlPush2{right:16.666666666666664%}.ms-u-xlPush1{right:8.333333333333332%}.ms-u-xlPush0{right:auto}.ms-u-xlOffset11{margin-right:91.66666666666666%}.ms-u-xlOffset10{margin-right:83.33333333333334%}.ms-u-xlOffset9{margin-right:75%}.ms-u-xlOffset8{margin-right:66.66666666666666%}.ms-u-xlOffset7{margin-right:58.333333333333336%}.ms-u-xlOffset6{margin-right:50%}.ms-u-xlOffset5{margin-right:41.66666666666667%}.ms-u-xlOffset4{margin-right:33.33333333333333%}.ms-u-xlOffset3{margin-right:25%}.ms-u-xlOffset2{margin-right:16.666666666666664%}.ms-u-xlOffset1{margin-right:8.333333333333332%}.ms-u-xlOffset0{margin-right:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}.ms-u-xxl11{width:91.66666666666666%}.ms-u-xxl10{width:83.33333333333334%}.ms-u-xxl9{width:75%}.ms-u-xxl8{width:66.66666666666666%}.ms-u-xxl7{width:58.333333333333336%}.ms-u-xxl6{width:50%}.ms-u-xxl5{width:41.66666666666667%}.ms-u-xxl4{width:33.33333333333333%}.ms-u-xxl3{width:25%}.ms-u-xxl2{width:16.666666666666664%}.ms-u-xxl1{width:8.333333333333332%}.ms-u-xxlPull12{left:100%}.ms-u-xxlPull11{left:91.66666666666666%}.ms-u-xxlPull10{left:83.33333333333334%}.ms-u-xxlPull9{left:75%}.ms-u-xxlPull8{left:66.66666666666666%}.ms-u-xxlPull7{left:58.333333333333336%}.ms-u-xxlPull6{left:50%}.ms-u-xxlPull5{left:41.66666666666667%}.ms-u-xxlPull4{left:33.33333333333333%}.ms-u-xxlPull3{left:25%}.ms-u-xxlPull2{left:16.666666666666664%}.ms-u-xxlPull1{left:8.333333333333332%}.ms-u-xxlPull0{left:auto}.ms-u-xxlPush12{right:100%}.ms-u-xxlPush11{right:91.66666666666666%}.ms-u-xxlPush10{right:83.33333333333334%}.ms-u-xxlPush9{right:75%}.ms-u-xxlPush8{right:66.66666666666666%}.ms-u-xxlPush7{right:58.333333333333336%}.ms-u-xxlPush6{right:50%}.ms-u-xxlPush5{right:41.66666666666667%}.ms-u-xxlPush4{right:33.33333333333333%}.ms-u-xxlPush3{right:25%}.ms-u-xxlPush2{right:16.666666666666664%}.ms-u-xxlPush1{right:8.333333333333332%}.ms-u-xxlPush0{right:auto}.ms-u-xxlOffset11{margin-right:91.66666666666666%}.ms-u-xxlOffset10{margin-right:83.33333333333334%}.ms-u-xxlOffset9{margin-right:75%}.ms-u-xxlOffset8{margin-right:66.66666666666666%}.ms-u-xxlOffset7{margin-right:58.333333333333336%}.ms-u-xxlOffset6{margin-right:50%}.ms-u-xxlOffset5{margin-right:41.66666666666667%}.ms-u-xxlOffset4{margin-right:33.33333333333333%}.ms-u-xxlOffset3{margin-right:25%}.ms-u-xxlOffset2{margin-right:16.666666666666664%}.ms-u-xxlOffset1{margin-right:8.333333333333332%}.ms-u-xxlOffset0{margin-right:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}.ms-u-xxxl11{width:91.66666666666666%}.ms-u-xxxl10{width:83.33333333333334%}.ms-u-xxxl9{width:75%}.ms-u-xxxl8{width:66.66666666666666%}.ms-u-xxxl7{width:58.333333333333336%}.ms-u-xxxl6{width:50%}.ms-u-xxxl5{width:41.66666666666667%}.ms-u-xxxl4{width:33.33333333333333%}.ms-u-xxxl3{width:25%}.ms-u-xxxl2{width:16.666666666666664%}.ms-u-xxxl1{width:8.333333333333332%}.ms-u-xxxlPull12{left:100%}.ms-u-xxxlPull11{left:91.66666666666666%}.ms-u-xxxlPull10{left:83.33333333333334%}.ms-u-xxxlPull9{left:75%}.ms-u-xxxlPull8{left:66.66666666666666%}.ms-u-xxxlPull7{left:58.333333333333336%}.ms-u-xxxlPull6{left:50%}.ms-u-xxxlPull5{left:41.66666666666667%}.ms-u-xxxlPull4{left:33.33333333333333%}.ms-u-xxxlPull3{left:25%}.ms-u-xxxlPull2{left:16.666666666666664%}.ms-u-xxxlPull1{left:8.333333333333332%}.ms-u-xxxlPull0{left:auto}.ms-u-xxxlPush12{right:100%}.ms-u-xxxlPush11{right:91.66666666666666%}.ms-u-xxxlPush10{right:83.33333333333334%}.ms-u-xxxlPush9{right:75%}.ms-u-xxxlPush8{right:66.66666666666666%}.ms-u-xxxlPush7{right:58.333333333333336%}.ms-u-xxxlPush6{right:50%}.ms-u-xxxlPush5{right:41.66666666666667%}.ms-u-xxxlPush4{right:33.33333333333333%}.ms-u-xxxlPush3{right:25%}.ms-u-xxxlPush2{right:16.666666666666664%}.ms-u-xxxlPush1{right:8.333333333333332%}.ms-u-xxxlPush0{right:auto}.ms-u-xxxlOffset11{margin-right:91.66666666666666%}.ms-u-xxxlOffset10{margin-right:83.33333333333334%}.ms-u-xxxlOffset9{margin-right:75%}.ms-u-xxxlOffset8{margin-right:66.66666666666666%}.ms-u-xxxlOffset7{margin-right:58.333333333333336%}.ms-u-xxxlOffset6{margin-right:50%}.ms-u-xxxlOffset5{margin-right:41.66666666666667%}.ms-u-xxxlOffset4{margin-right:33.33333333333333%}.ms-u-xxxlOffset3{margin-right:25%}.ms-u-xxxlOffset2{margin-right:16.666666666666664%}.ms-u-xxxlOffset1{margin-right:8.333333333333332%}.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} \ 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 000000000..a8f83b754 --- /dev/null +++ b/dist/documentation/Components/Breadcrumb/index.html @@ -0,0 +1,161 @@ + + + + + + + + Breadcrumb + + + + + + + + + + + +

    Breadcrumb

    +

    Shows the current location in a hierarchy and provides a means of navigating upward.

    +

    Variants

    +

    Default

    + + +
    +
    +
    +
    +
      +
      +
      + +
      + + +

      States

      + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .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

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. 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--ellipsis" tabindex="1"></div>
+         <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
+         <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" href="#" tabindex="2">Files</a>
+             <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
+         </li>
+         <li class="ms-Breadcrumb-listItem">
+             <a class="ms-Breadcrumb-itemLink" href="#" tabindex="3">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" href="#" tabindex="4">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" href="#" tabindex="5">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" href="#" tabindex="6">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" href="#" tabindex="7">Folder 5</a>
+             <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight"></i>
+         </li>
+     </ul>
+ </div>
+
        +
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Breadcrumbs on the page:
         <script>
+     var BreadCrumbHTML = document.querySelector('.ms-BreadCrumb');
+     var BreadCrumb = new fabric['BreadCrumb'](BreadCrumbHTML);
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the .ms-Breadcrumb-listItem elements) with your content.
        6. +
      +

      Dependencies

      +

      This component uses a Contextual Menu for the overflow menu.

      +

      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 000000000..0ac1fdbeb --- /dev/null +++ b/dist/documentation/Components/Button/index.html @@ -0,0 +1,109 @@ + + + + + + + + Button + + + + + + + + + + + +

      Button

      +

      Allows users to take action, such as submitting a form or dismissing a message.

      +

      Variants

      +

      Default

      + + + +

      Primary

      +

      Where multiple buttons are presented together, this is the default action when submitting the form.

      + + + +

      Compound

      +

      Provides a second line of text to explain the action the button takes.

      + + + +

      Hero

      +

      Similar to the Command variant, but with a larger size to draw attention to important actions.

      + + + +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .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

      +
        +
      1. 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>
+
        +
        2. +
      2. 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>
+
        +
        3. +
      3. Replace the sample HTML content (such as the content of .ms-Button-label) with your content.
        4. +
      +

      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 000000000..76d4251bf --- /dev/null +++ b/dist/documentation/Components/Callout/index.html @@ -0,0 +1,269 @@ + + + + + + + + Callout + + + + + + + + + + + +

      Callout

      +

      Notification area that provides a detailed description or set of actions on an object.

      +

      Variants

      +

      Default

      + +
      + + + +
      + + +
      +
      +

      Close

      +

      Includes an icon to dismiss the callout.

      + +
      + + + +
      + + +
      +
      +

      Action text

      +

      Includes buttons to take action.

      + +
      + + + +
      + + +
      +
      +

      OOBE (Out Of the Box Experience)

      +

      Draws attention to one aspect of the application during a product tour.

      + +
      + + + +
      + + +
      +
      +

      Peek

      +

      A smaller callout with an action.

      + +
      + + + +
      + + +
      +
      +

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page. For example:
         <div class="ms-Callout ms-Callout--arrowLeft">
+     <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">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 href="#" class="ms-Callout-link">Learn more</a>
+             </div>
+         </div>    
+     </div>
+ </div>
+
        +
        3. +
      3. Replace the sample HTML content (such as the content of .ms-Callout-title) with your content.
        4. +
      +

      Dependencies

      +

      This component has no dependencies.

      +

      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 000000000..4a05c3168 --- /dev/null +++ b/dist/documentation/Components/CheckBox/index.html @@ -0,0 +1,99 @@ + + + + + + + + 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.

      + + +
      + +
      + +
      + +
      + +
      + +
      +

      States

      + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      disabled attribute.ms-CheckBox-input + Disables the input.
      checked attribute.ms-CheckBox-input + Fills in the checkbox or radio button.
      +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page. For example:
         <div class="ms-CheckBox">
+     <input id="demo-radio-unselected" class="ms-CheckBox-input" type="radio">
+     <label for="demo-radio-unselected" class="ms-CheckBox-field">
+         <span class="ms-Label">Unselected</span>
+     </label>
+ </div>
+
        +
        3. +
      3. Replace the sample HTML content (such as the content of .ms-Label) with your content.
        4. +
      +

      Dependencies

      +

      This component uses a Label to label each checkbox, radio button, and group.

      +

      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 000000000..885a56101 --- /dev/null +++ b/dist/documentation/Components/ChoiceFieldGroup/index.html @@ -0,0 +1,65 @@ + + + + + + + + ChoiceFieldGroup + + + + + + + + + + + +

      Choice Field

      +

      Allows selection from one or more options.

      +

      Radio button group

      +

      Used to indicate a single choice from multiple options.

      + + +
      +
      + +
      + +
      + + + + \ 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 000000000..b281919a6 --- /dev/null +++ b/dist/documentation/Components/CommandBar/index.html @@ -0,0 +1,549 @@ + + + + + + + + CommandBar + + + + + + + + + + + +

      Command Bar

      +

      Commanding surface for panels, pages, and applications. Unlike the NavBar, this component should not navigate to other pages.

      +

      Variants

      +

      Default

      + + +
      +
      + +
      + +
      +
      +
      + + +
      + + + +
      + +
      +
      + +
      + +
      + +
      + + + +
      + +
      + +
      + +
      + +
      + +
      + +
      + + +
      + + + +
      + +
      +
      + + + +
      +
      + +
      + +
      + +
      + +
      +
      +
      + +
      + +
      + +
      + +
      + +
      + +
      + +
      + + + + +
      + +
      + +
      + +
      + +
      + + +
      + + + +
      + +
      +
      + +

      Provides a means of navigating to different areas within an application. On small screens, the navigation items are placed inside a hamburger menu. + + +

      +
      + +
      + + + +
      + +
      + +
      +
      +
      + + +
      + + + +
      + +
      +
      + +
      + + + +
      + +
      + + Albums + +
      + +
      + + Tags + +
      + +
      + + Places + +
      + +
      + + People + +
      + + +
      + + + +
      + +
      +
      +

      +

      States

      + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-hidden + .ms-CommandBarItem + Hides a Command Bar item from view.
      .is-active + .ms-CommandBarSearch + Expands the search field for use.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from the sample above into your page. For example:
         <div class="ms-CommandBar">
+     <div class="ms-CommandBarSearch">
+         <input class="ms-CommandBarSearch-input" type="text" placeholder="Search" tabindex="1"/>
+         <div class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper">
+         <i class="ms-Icon ms-Icon--search"></i>
+         </div>
+         <div class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s">
+         <i class="ms-Icon ms-Icon--x"></i>
+         </div>
+     </div>  
+     <div class="ms-CommandBar-sideCommands">
+         <div class="ms-CommandBarItem">
+         <div class="ms-CommandBarItem-linkWrapper">
+             <a class="ms-CommandBarItem-link" tabindex="1">
+             <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--reactivate"></span>
+             <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Undo</span>
+             <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
+             </a>
+         </div>
+         </div>
+     </div>
+     <div class="ms-CommandBar-mainArea">
+         <div class="ms-CommandBarItem">
+         <div class="ms-CommandBarItem-linkWrapper">
+             <a class="ms-CommandBarItem-link" tabindex="1">
+             <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--star"></span>
+             <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">New</span>
+             <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
+             </a>
+         </div>
+         </div>
+         <div class="ms-CommandBarItem">
+         <div class="ms-CommandBarItem-linkWrapper">
+             <a class="ms-CommandBarItem-link" tabindex="1">
+             <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--save"></span>
+             <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Delete</span>
+             </a>
+         </div>
+         </div>
+         <div class="ms-CommandBarItem">
+         <div class="ms-CommandBarItem-linkWrapper">
+             <a class="ms-CommandBarItem-link" tabindex="1">
+             <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--flag"></span>
+             <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Archive</span>
+             </a>
+         </div>
+         </div>
+         <div class="ms-CommandBarItem ms-CommandBarItem--hasTextOnly">
+         <div class="ms-CommandBarItem-linkWrapper">
+             <a class="ms-CommandBarItem-link" tabindex="1">
+             <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Junk</span>
+             </a>
+         </div>
+         </div>
+         <div class="ms-CommandBarItem ms-CommandBarItem--hasTextOnly">
+         <div class="ms-CommandBarItem-linkWrapper">
+             <a class="ms-CommandBarItem-link" tabindex="1">
+             <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Move To</span>
+             <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
+             </a>
+         </div>
+         </div>
+         <div class="ms-CommandBarItem ms-CommandBarItem--hasTextOnly">
+         <div class="ms-CommandBarItem-linkWrapper">
+             <a class="ms-CommandBarItem-link" tabindex="1">
+             <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Categories</span>
+             <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
+             </a>
+         </div>
+         </div>
+         <!-- Overflow Command -->
+         <div class="ms-CommandBarItem ms-CommandBarItem--iconOnly ms-CommandBarItem-overflow">
+         <div class="ms-CommandBarItem-linkWrapper">
+             <a class="ms-CommandBarItem-link" tabindex="2">
+             <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--ellipsis"></span>
+             <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Ellipsis</span>
+             <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
+             </a>
+         </div>
+         <ul class="ms-CommandBar-overflowMenu ms-ContextualMenu"></ul>
+         </div>
+         <!-- End Overflow Command -->
+     </div>
+ </div>
+
        +
        3. +
      3. Add the following <script> tag to your page 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>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as .ms-CommandBarItem elements) with your content.
        6. +
      +

      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 000000000..1eba9c1a1 --- /dev/null +++ b/dist/documentation/Components/CommandButton/index.html @@ -0,0 +1,238 @@ + + + + + + + + CommandButton + + + + + + + + + + + +

      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

      + + +
      + +
      +

      Action Button

      + + +
      + +
      +

      Disabled

      + + +
      + +
      + + + +
      + + + +
      +

      Inline

      + + +
      + +
      +

      No Label

      + + +
      + +
      +

      No Label Split

      + + +
      + + + + +
      +

      Pivot

      + + +
      + +
      +

      Split

      + + +
      + + + + +
      +

      Text Only

      + + +
      + +
      +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .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

      +
        +
      1. 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>
+
        +
        2. +
      2. 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--circleFill"></i></span><span class="ms-CommandButton-label">Command</span>
+   </button>
+ </div>
+
        +
        3. +
      3. Replace the sample HTML content (such as the content of .ms-CommandButton-label) with your content.
        4. +
      4. +

        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['Persona'](CommandButtonElements[i]);
+     }
+   </script>
+
        +
        5. +
      +

      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 000000000..c9d308084 --- /dev/null +++ b/dist/documentation/Components/ContextualMenu/index.html @@ -0,0 +1,320 @@ + + + + + + + + ContextualMenu + + + + + + + + + + + +

      Contextual Menu

      +

      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

      + + + + + + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .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

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page. For example:
         <ul class="ms-ContextualMenu">
+     <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link" href="#">Animals</a></li>
+     <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link" href="#">Books</a></li>
+     <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link is-selected" href="#">Education</a></li>
+     <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link" href="#">Music</a></li>
+     <li class="ms-ContextualMenu-item"><a class="ms-ContextualMenu-link is-disabled" href="#">Sports</a></li>
+ </ul>
+
        +
        3. +
      3. +

        Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all ContextualMenu components on the page:

        + 
         <script>
+     var ButtonElement = document.querySelector(".ms-Button");
+     var ContextualMenuElement = document.querySelector(".ms-ContextualMenu");
+
+     var contextualMenu = new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the .ms-ContextualMenu-link elements) with your content.
        6. +
      +

      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 000000000..6c685b7cb --- /dev/null +++ b/dist/documentation/Components/DatePicker/index.html @@ -0,0 +1,183 @@ + + + + + + + + DatePicker + + + + + + + + + + + +

      Date Picker

      +

      Allows for the selection of a date into a text field.

      +

      Variants

      +

      Default

      + + + + +
      +
      + + + +
      +
      + + +
      +
      + Go to today +
      +
      +
      + + +
      +
      +
      +
      + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
      +
      +
      +
      + + +
      +
      +
      + +

      States

      + + + + + + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .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

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. 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&hellip;">
+     </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>
+
        +
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all DatePicker components on the page:
         <script>
+     $(document).ready(function() {
+         if ($.fn.DatePicker) {
+             $('.ms-DatePicker').DatePicker();
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      +

      Dependencies

      +

      This component has no dependencies on other components. It does, however, require pickadate.js which is included in jquery.fabric.min.js.

      +

      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 000000000..c26198c4a --- /dev/null +++ b/dist/documentation/Components/Dialog/index.html @@ -0,0 +1,498 @@ + + + + + + + + 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.

      + +
      + +
      + +
      + +
      +
      +
      + + + + +
      +
      + + +
      + + +

      Multiline

      +

      Includes multiple large buttons, each with a title and description.

      + +
      + +
      +
      All emails together
      +
      + + + + + + +
      +
      + + +
      + + +

      Large Header

      +

      Provides a large, styled header followed by 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.

      +
      +
      + + + + +
      +
      + + +
      + +

      Blocking

      +

      The overlay for this variant does not dismiss the Dialog.

      + +
      + +
      +
      Unsaved changes
      +
      +

      Are you sure you want to discard these changes?.

      + +
      + +
      + +
      + +
      +
      +
      + + + + +
      +
      + + +
      + + +

      Close

      +

      Includes a close button at the top right, as an additional way to dismiss the dialog.

      + +
      + +
      + +
      All emails together
      +
      + +
      + +
      + +
      + +
      +
      +
      + + + + +
      +
      + + +
      + + +

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. +

        Copy the HTML from one of the samples above into your page. For example:

        + 
         <button class="ms-Button js-DialogAction--open">
+     <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
+     <span class="ms-Button-label">Open Dialog</span>
+     <span class="ms-Button-description">Opens the Sample Dialog</span>
+ </button>
+
+ <div class="ms-Dialog">
+     <div class="ms-Overlay ms-Overlay--dark"></div>
+     <div class="ms-Dialog-main">
+         <button class="ms-Dialog-button ms-Dialog-close">
+         <i class="ms-Icon ms-Icon--x"></i>
+         </button>
+         <div class="ms-Dialog-header">
+         <p class="ms-Dialog-title">All emails together</p>
+         </div>
+         <div class="ms-Dialog-inner">
+         <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-ChoiceField">
+                 <input id="demo-checkbox-unselected1" class="ms-ChoiceField-input" type="checkbox">
+                 <label for="demo-checkbox-unselected1" class="ms-ChoiceField-field"><span class="ms-Label">Option1</span></label>
+             </div>
+             <div class="ms-ChoiceField">
+                 <input id="demo-checkbox-unselected2" class="ms-ChoiceField-input" type="checkbox">
+                 <label for="demo-checkbox-unselected2" class="ms-ChoiceField-field"><span class="ms-Label">Option2</span></label>
+             </div>
+         </div>
+         <div class="ms-Dialog-actions">
+             <div class="ms-Dialog-actionsRight">
+             <button class="ms-Dialog-action ms-Button ms-Button--primary">
+                 <span class="ms-Button-label">Save</span>
+             </button>
+             <button class="ms-Dialog-action ms-Button">
+                 <span class="ms-Button-label">Cancel</span>
+             </button>
+             </div>
+         </div>
+         </div>
+     </div>
+ </div>
+
        +
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page:
         <script>
+     $(document).ready(function() {
+         if ($.fn.Dialog) {
+             $('.ms-Dialog').Dialog();
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the content of .ms-Dialog-content) with your content.
        6. +
      +

      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 000000000..cb9db8340 --- /dev/null +++ b/dist/documentation/Components/Dropdown/index.html @@ -0,0 +1,119 @@ + + + + + + + + Dropdown + + + + + + + + + + + +

      Dropdown

      +

      Allows for the selection of one option from a list.

      +

      Variants

      +

      Default

      + + + +
      + + + +
      +

      Disabled

      + + + +
      + + + +
      +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-disabled + .ms-Dropdown + Disables the dropdown.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. 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--caretDown"></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>
+
        +
        3. +
      3. Add the following <script> tag to your page to instantiate all Dropdown components on the page:
         <script>
+     var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
+     for (var i = 0; i < DropdownHTMLElements.length; ++i) {
+         var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
+     }
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the options within .ms-Dropdown-select) with your content.
        6. +
      +

      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 000000000..96e017201 --- /dev/null +++ b/dist/documentation/Components/FacePile/index.html @@ -0,0 +1,131 @@ + + + + + + + + FacePile + + + + + + + + + + + +

      FacePile

      +

      Displays several people with the option to add additional people or view the details of a person.

      +

      Variants

      +

      Default

      + + + +
      + + + + +
      +
      +
      +
      +
      +
      +
      +
      + + +
      +
      +
      +
      +
      +
      +
      +
      + + +
      +
      +
      +
      +
      +
      +
      +
      + + +
      +

      States

      + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .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

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from the sample above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page:
         <script>
+     $(document).ready(function() {
+         if ($.fn.FacePile) {
+             $('.ms-FacePile').FacePile();
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content with your content.
        6. +
      +

      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 000000000..40cdf46b7 --- /dev/null +++ b/dist/documentation/Components/Label/index.html @@ -0,0 +1,100 @@ + + + + + + + + Label + + + + + + + + + + + +

      Label

      +

      Used to label form elements such as TextField and Dropdown.

      +

      Variants

      +

      Default

      + + + + + +

      Required

      + +
      + + +
      + + +

      Disabled

      + +
      + + +
      + + +

      States

      + + + + + + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-required + .ms-Label + Marks the form element as required.
      .is-disabled + .ms-Label + Marks the form element as disabled.
      +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page. For example:
         <label class="ms-Label">
+     Name
+ </label>
+
        +
        3. +
      3. Replace the sample HTML content (such as the content of .ms-Label) with your content.
        4. +
      +

      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 000000000..5698a12b0 --- /dev/null +++ b/dist/documentation/Components/Link/index.html @@ -0,0 +1,55 @@ + + + + + + + + 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

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page. For example:
         <div class="ms-font-m">
+     <a href="#" class="ms-Link">Link to a webpage</a>
+ </div>
+
        +
        3. +
      3. Replace the sample text with the text of your link.
        4. +
      +

      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 000000000..d41f4fe07 --- /dev/null +++ b/dist/documentation/Components/List/index.html @@ -0,0 +1,240 @@ + + + + + + + + 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.

      + + + + + +

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. 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.
        4. +
      +

      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 000000000..69ea18883 --- /dev/null +++ b/dist/documentation/Components/ListItem/index.html @@ -0,0 +1,248 @@ + + + + + + + + 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

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page:
         <script>
+     $(document).ready(function() {
+         if ($.fn.ListItem) {
+             $('.ms-ListItem').ListItem();
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the content of .ms-ListItem-primaryText) with your content.
        6. +
      +

      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 000000000..b17706254 --- /dev/null +++ b/dist/documentation/Components/MessageBanner/index.html @@ -0,0 +1,101 @@ + + + + + + + + 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. +
      +
      + +
      + + +
      +
      + +
      + +
      + + + +

      States

      +

      This component has only the default state.

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from the sample above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Breadcrumbs on the page:
         <script>
+     $(document).ready(function() {
+         if (typeof fabric !== "undefined") {
+             if ('MessageBanner' in fabric) {
+                 var elements = document.querySelectorAll('.ms-MessageBanner');
+                 var i = elements.length;
+                 var component;
+                 while(i--) {
+                     component = new fabric['MessageBanner'](elements[i]);
+                 }
+             }
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content (such as the text in .ms-MessageBanner-action) with your content.
        6. +
      +

      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 000000000..720737fdf --- /dev/null +++ b/dist/documentation/Components/MessageBar/index.html @@ -0,0 +1,135 @@ + + + + + + + + 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 +
      +
      +
      + +

      Remove

      +

      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 +
      +
      +
      + +

      Dependencies

      +

      This component has a dependency on the Link component.

      + + + \ 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 000000000..7cdeeeda3 --- /dev/null +++ b/dist/documentation/Components/OrgChart/index.html @@ -0,0 +1,199 @@ + + + + + + + + OrgChart + + + + + + + + + + + +

      Org Chart

      +

      Displays multiple Persona components in groups with headers in order to show the hierarchy of an organization or team.

      +

      Variants

      +

      Default

      + + + +
      +
      + + +
      +
      +
      Manager
      + +
      +
      +
      Staff
      + +
      +
      +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from the samples above into your page.
        3. +
      3. Replace the Persona components with your own.
        4. +
      +

      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 000000000..9ba2e889c --- /dev/null +++ b/dist/documentation/Components/Overlay/index.html @@ -0,0 +1,78 @@ + + + + + + + + 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

      + +
      + + +
      + +
      + + + +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Replace the sample HTML content (such as the content of .ms-Button-label) with your content.
        4. +
      +

      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 000000000..7bc027dfe --- /dev/null +++ b/dist/documentation/Components/Panel/index.html @@ -0,0 +1,266 @@ + + + + + + + + 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

      + +
      + + + +
      +
      + +
      +
      + +
      + +
      + +
      + +
      +
      +
      +
      + +
      +

      Panel

      +
      + Content goes here +
      +
      +
      +
      + + +

      Medium

      + +
      + + + +
      + +
      +

      Medium Panel

      +
      + Content goes here +
      +
      +
      +
      + + +

      Large

      + +
      + + + +
      + +
      +

      Large panel

      +
      + Content goes here +
      +
      +
      +
      + + +

      Large, fixed

      + +
      + + + +
      + +
      +

      Large panel

      +
      + Content goes here +
      +
      +
      +
      + + +

      Extra Large

      + +
      + + + +
      + +
      +

      Extra large panel

      +
      + Content goes here +
      +
      +
      +
      + + +

      Extra extra large

      + +
      + + + +
      + +
      +

      Extra extra large panel

      +
      + Content goes here +
      +
      +
      +
      + + +

      States

      + + + + + + + + + + + + + + + +
      StateApplied toResult
      .is-open + .ms-Panel + The panel is closed by default. Apply this class to open it.
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from the sample above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page:
         <script>
+     var PanelElements = document.querySelectorAll(".ms-Panel");
+     for(var i = 0; i < PanelElements.length; i++) {
+         new fabric['Panel'](PanelElements[i]);
+     }
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content with your content.
        6. +
      + + + \ 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 000000000..147416f77 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 000000000..6646e4c60 --- /dev/null +++ b/dist/documentation/Components/PeoplePicker/index.html @@ -0,0 +1,185 @@ + + + + + + + + PeoplePicker + + + + + + + + + + + +

      People Picker

      +

      A form input that allows for the choice of one or more people.

      +

      Variants

      +

      Default

      +

      Uses the standard sized Persona component. + + + +

      +
      + + +
      + + + + +
      +
      +
      +
      +
      + +
      +
      +

      +

      Compact

      +

      Use the extra small Persona component to fit more results. + + + +

      +
      + + +
      + + + + +
      +
      +
      +
      +
      + +
      +
      +

      +

      Members list

      +

      Has a smaller search field. + + + +

      +
      + + +
      + + + + +
      +
      +
      +
      +
      + +
      +
      +

      +

      Face pile

      +

      Presents the selected people in a list below the search field, rather than inline. + + + +

      +
      + + +
      + + + + +
      +
      +
      +
      +
      + +
      +
      +

      +

      More options

      +

      Disconnected

      +

      If the network is unavailable, you can present an error message in the search more area. @@include('PeoplePicker.Disconnected.html') +

      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page:
         <script>
+     $(document).ready(function() {
+         if ($.fn.PeoplePicker) {
+             $('.ms-PeoplePicker').PeoplePicker();
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content with your content.
        6. +
      +

      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 000000000..4d06e964d 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 000000000..4ba5f7b0d 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 000000000..d8d69a820 --- /dev/null +++ b/dist/documentation/Components/Persona/index.html @@ -0,0 +1,1022 @@ + + + + + + + + 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
      +
      +
      + + +
      +
      + +
      +
      + +
      +
      +
      Alton Lafferty
      +
      +
      + + +
      +
      + +
      +
      + +
      +
      +
      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. + + + +

      +
      +
      AL
      +
      +
      + +
      +
      +
      Alton Lafferty
      +
      +
      +

      +

      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

      + + + +
      +
      + +
      +
      + +
      +
      +
      Gerrad Matteu
      +
      +
      + +
      +
      + + +
      +
      + +
      +
      + +
      +
      +
      Gerrad Matteu
      +
      +
      + +
      +
      + + +
      +
      + +
      +
      + +
      +
      +
      Gerrad Matteu
      +
      +
      + +
      +
      + +

      FacePile

      + + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      + +
      +
      + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
      + +
      +
      +
      Personal: alton.lafferty@outlook.com +
      +
      Work: altonlafferty@contoso.com +
      +
      +
      +
      Lync: Start Lync call +
      +
      +
      +
      +
      Details
      +
      Personal: 555.206.2443
      +
      Work: 555.929.8240
      +
      +
      +
      Skype: Start Skype call +
      +
      + +
      + + +
      +
      + +
        +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      Manager
      +
        +
      • + +
        • +
      +
      +
      +
      Staff
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      + +
      +
      + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
      + +
      +
      +
      Personal: alton.lafferty@outlook.com +
      +
      Work: altonlafferty@contoso.com +
      +
      +
      +
      Lync: Start Lync call +
      +
      +
      +
      +
      Details
      +
      Personal: 555.206.2443
      +
      Work: 555.929.8240
      +
      +
      +
      Skype: Start Skype call +
      +
      + +
      + + +
      +
      + +
        +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      Manager
      +
        +
      • + +
        • +
      +
      +
      +
      Staff
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      + +
      +
      + + +
      +
      +
      AL
      + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      +
      + +
      +
      +
      Personal: alton.lafferty@outlook.com +
      +
      Work: altonlafferty@contoso.com +
      +
      +
      +
      Lync: Start Lync call +
      +
      +
      +
      +
      Details
      +
      Personal: 555.206.2443
      +
      Work: 555.929.8240
      +
      +
      +
      Skype: Start Skype call +
      +
      + +
      + + +
      +
      + +
        +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      Manager
      +
        +
      • + +
        • +
      +
      +
      +
      Staff
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      +
      + +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Replace the sample HTML content (such as the name within .ms-Persona-primaryText) with your content.
        4. +
      +

      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 000000000..dbf326793 --- /dev/null +++ b/dist/documentation/Components/PersonaCard/index.html @@ -0,0 +1,273 @@ + + + + + + + + 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
      +
      +
      +
      + +
      +
      +
      Personal: alton.lafferty@outlook.com +
      +
      Work: altonlafferty@contoso.com +
      +
      +
      +
      Lync: Start Lync call +
      +
      +
      +
      +
      Details
      +
      Personal: 555.206.2443
      +
      Work: 555.929.8240
      +
      +
      +
      Skype: Start Skype call +
      +
      + +
      + + +
      +
      + +
        +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      Manager
      +
        +
      • + +
        • +
      +
      +
      +
      Staff
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      +
      +
      + + + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <head>
+     <link rel="stylesheet" href="fabric.min.css">
+     <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Persona Card components on the page:
         <script>
+         var PersonaCardElement = document.querySelector(".ms-PersonaCard");
+         new fabric['PersonaCard'](PersonaCardElement, ButtonElement);
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content with your content.
        6. +
      +

      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 000000000..06b83267e --- /dev/null +++ b/dist/documentation/Components/Pivot/index.html @@ -0,0 +1,195 @@ + + + + + + + + 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

      + + + +
      + +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      + +
      +
      + +

      Large

      + + + +
      + +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      + +
      +
      + +

      Tabs

      + + + +
      + +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      + +
      +
      + +

      Large tabs

      + + + +
      + +
      + This is the my files tab. +
      +
      + This is the recent tab. +
      +
      + This is the shared with me tab. +
      +
      + +
      +
      + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Pivot components on the page:
         <script>
+     $(document).ready(function() {
+         if ($.fn.Pivot) {
+             $('.ms-Pivot').Pivot();
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      5. Replace the sample HTML content with your content.
        6. +
      +

      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 000000000..783b2c439 --- /dev/null +++ b/dist/documentation/Components/ProgressIndicator/index.html @@ -0,0 +1,83 @@ + + + + + + + + ProgressIndicator + + + + + + + + + + + +

      Progress Indicator

      +

      Displays the progress of an operation when the percentage complete can be determined. Unable to determine how much of the operation is complete? Use a Spinner instead.

      +

      Variants

      +

      Default

      + + + +
      +
      Example.jpg
      +
      +
      +
      +
      +
      Example.jpg
      +
      + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from the sample above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all ProgressIndicators on the page:
         <script>
+     $(document).ready(function() {
+         if (typeof fabric !== "undefined") {
+             if ('ProgressIndicator' in fabric) {
+                 var elements = document.querySelectorAll('.ms-ProgressIndicator');
+                 var i = elements.length;
+                 var component;
+                 while(i--) {
+                     component = new fabric['ProgressIndicator'](elements[i]);
+                 }
+             }
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      +

      Dependencies

      +

      This component has no dependency on other components.

      + + + + + + \ 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 000000000..ad3b602f7 --- /dev/null +++ b/dist/documentation/Components/SearchBox/index.html @@ -0,0 +1,108 @@ + + + + + + + + SearchBox + + + + + + + + + + + +

      Search Box

      +

      A special form field that allows for the input of search text.

      +

      Variants

      +

      Default

      + + + +
      + + + +
      + +
      +
      +

      Collapsed

      + + + + +

      Command bar

      + + + +
      + + + +
      + +
      +
      +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all SearchBox components on the page:
         <script>
+     $(document).ready(function() {
+         if ($.fn.SearchBox) {
+             $('.ms-SearchBox').SearchBox();
+         }
+     });
+ </script>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      +

      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 000000000..84bd1ff92 --- /dev/null +++ b/dist/documentation/Components/Spinner/index.html @@ -0,0 +1,118 @@ + + + + + + + + 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

      + +
      + + +
      +
      + Loading... +
      +
      +
      + + + +

      Large with label

      + +
      + + +
      +
      + Loading... +
      +
      +
      + + + +

      Using this component

      +
        +
      1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery:
         <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="jquery.fabric.min.js"></script>
+ </head>
+
        +
        2. +
      2. Copy the HTML from the sample above into your page.
        3. +
      3. Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Spinners on the page:
         <script>
+     $(document).ready(function() {
+         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>
+
        +
        4. +
      4. Verify that the component is working the same as in the sample above.
        5. +
      +

      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 000000000..0f7726871 --- /dev/null +++ b/dist/documentation/Components/Table/index.html @@ -0,0 +1,234 @@ + + + + + + + + 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. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      +

      +

      Fixed

      +

      The columns are split evenly, regardless of their content. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      +

      +

      Selectable

      +

      Rows can be selected. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      LocationModifiedTypeFile Name
      +

      +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from the sample above into your page.
        3. +
      3. Replace the content with your own data. You can add more rows or columns.
        4. +
      +

      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 000000000..3af02c6e7 --- /dev/null +++ b/dist/documentation/Components/TextField/index.html @@ -0,0 +1,100 @@ + + + + + + + + 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

      + + + +
      + + + + +
      + +

      Multiline

      + + + +
      + + + + +
      + +

      Placeholder text

      + +
      + + +
      + + + + +
      +
      + + + +

      Underlined (@TODO: deprecated?)

      + + + +
      + + + + +
      + +

      Underlined

      + + + +
      + + + + +
      + +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Update the .ms-Label to contain your label text.
        4. +
      +

      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 000000000..c11ca38ab --- /dev/null +++ b/dist/documentation/Components/Toggle/index.html @@ -0,0 +1,84 @@ + + + + + + + + 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 + + +
      + +

      Label on left

      + + + +
      + Let apps use my location + + +
      + +

      Disabled

      + + + +
      + Let apps use my location + + +
      + +

      Using this component

      +
        +
      1. 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>
+
        +
        2. +
      2. Copy the HTML from one of the samples above into your page.
        3. +
      3. Update the .ms-Label to contain your label text.
        4. +
      +

      Dependencies

      +

      This component has a dependency on the Label component.

      + + + + \ 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 000000000..ddcccc815 --- /dev/null +++ b/dist/documentation/Samples/Form/css/Form.css @@ -0,0 +1,5710 @@ +/* + 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; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.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; + margin-right: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + padding: 12px 8px 3px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.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; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: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 { + background-color: transparent; + border: 0; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-weight: 100; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #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 .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #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 { + width: 288px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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; + margin: 0; + padding: 0; + box-shadow: none; + 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; +} + +.ms-CheckBox .ms-Choice-field.is-disabled { + pointer-events: none; + cursor: default; +} + +.ms-CheckBox .ms-Choice-field.is-disabled:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-CheckBox .ms-Choice-field.is-disabled:after { + border-color: #eaeaea; +} + +.ms-CheckBox .ms-Choice-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-CheckBox .ms-CheckBox-field.in-focus:after { + border-color: #767676; +} + +.ms-CheckBox .ms-Choice-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-CheckBox .ms-Choice-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-CheckBox .ms-Choice-field:hover:after { + border-color: #767676; +} + +.ms-CheckBox .ms-Choice-field:hover .ms-Label { + color: #000000; +} + +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after { + border-radius: 0; +} + +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before, +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +.ms-CheckBox .ms-Choice-field.is-checked:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +.ms-CheckBox .ms-Choice-field.is-checked:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-RadioButton { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + 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-RadioButton .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled { + pointer-events: none; + cursor: default; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled:after { + border-color: #eaeaea; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-RadioButton .ms-Choice-type--radio.in-focus:after { + border-color: #767676; +} + +.ms-RadioButton .ms-Choice-type--radio { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-RadioButton .ms-Choice-type--radio:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-RadioButton .ms-Choice-type--radio:hover:after { + border-color: #767676; +} + +.ms-RadioButton .ms-Choice-type--radio:hover .ms-Label { + color: #000000; +} + +.ms-RadioButton .ms-Choice-type--radio.is-checked:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + margin-right: 8px; + display: inline-block; + vertical-align: top; + transition: margin-right 0.267s; +} + +.ms-CommandBar .ms-SearchBox.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: 10; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar .ms-SearchBox { + margin-right: 24px; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; + 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: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandButton { + display: inline-block; + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: #c7e0f4; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.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; +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; +} + +.ms-CommandButton-icon { + display: inline-block; + padding-right: 12px; + position: relative; + font-size: 17px; + min-width: 17px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton-label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + display: inline-block; + position: relative; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; + min-width: 17px; + height: 100%; +} + +.ms-CommandButton-dropdownIcon .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton-dropdownIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-splitIcon { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; + margin-left: -4px; + width: 21px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + border-left: 1px solid #c8c8c8; + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + padding-right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.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; +} + +.ms-ContextualMenu { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + 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: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; +} + +.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; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + 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: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: #c7e0f4; +} + +.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-Dialog { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: absolute; + -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--x { + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: 0 16px; +} + +.ms-Panel .ms-Dropdown-items:before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + right: 9px; + bottom: 5px; + 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; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: 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: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@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:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.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; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@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 { + position: relative; + height: 32px; + width: auto; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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; + 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; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-List { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + list-style-type: none; +} + +.ms-ListItem { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + 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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + 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 { + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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--remove { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--remove .ms-Icon { + font-size: 8px; + margin-left: 3px; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon { + font-size: 12px; + top: 3px; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon:before { + margin-left: 1px; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon:after { + font-size: 8px; + margin-left: 3px; + top: 1px; +} + +.ms-OrgChart { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 0; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Panel { + background-color: #ffffff; + width: 100%; + max-width: 272px; + box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2); + position: absolute; + top: 0; + bottom: 0; + right: 0; + z-index: 10; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + display: none; +} + +.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-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-PanelHost.ms-PanelHost--left { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands, +.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner { + display: none; +} + +.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main { + 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-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.267s; +} + +.ms-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + 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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.167s; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; +} + +@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; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + 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; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + animation-delay: 500ms; + } +} + +.ms-PeoplePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 2px solid #0078d7; +} + +.ms-PeoplePicker-searchBox .ms-TextField { + border: 0; + margin-bottom: 0; +} + +.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.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; +} + +.ms-PeoplePicker-result:hover { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #71afe5; +} + +.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: 30px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.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 { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-weight: 400; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-weight: 300; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.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-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.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.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.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; +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 9px; + 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--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; +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +.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: inline-block; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin-bottom: 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: 30px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + 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-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + 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: 15px; +} + +.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: 0; +} + +.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: '\e088'; +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.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 { + 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; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + color: #333333; + height: 30px; + list-style-type: none; + white-space: nowrap; + padding: 0; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-weight: 300; + font-size: 15px; + line-height: 27px; + margin-right: 15px; +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active { + color: #0078d7; +} + +.ms-Pivot-link.is-selected { + color: #0078d7; + font-weight: 600; +} + +.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; +} + +.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 (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@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; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: inline-block; + overflow: hidden; + transition: width 0.167s; + width: 180px; +} + +.ms-SearchBox .ms-CommandButton { + display: none; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-CommandButton { + display: block; +} + +.ms-SearchBox.has-text .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox:hover { + background-color: #deecf9; + border-color: #0078d7; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: transparent 1px solid; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 32px; + width: 100%; + 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-close.ms-CommandButton { + position: absolute; + right: 0; + top: 0; + height: 100%; + display: none; + z-index: 11; +} + +.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 100%; +} + +.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-label .ms-Icon { + margin-right: 7px; + font-size: 17px; + color: #767676; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + border: 0; + background-color: #deecf9; + width: 208px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + border: 0; + height: 40px; + background: transparent; + padding-left: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; + padding-left: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 16px; + margin-right: 8px; + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close { + background-color: #deecf9; + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + border: 0; + background-color: none; +} + +.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.is-collapsed { + width: 50px; + min-height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-close { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; +} + +.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; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-close { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #c7e0f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-close .ms-CommandButton-button { + background-color: #c7e0f4; +} + +.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 .ms-SearchBox-label .ms-SearchBox-icon { + width: 16px; + margin-left: 16px; + margin-right: 8px; + display: inline-block; +} + +.ms-Spinner { + position: relative; + height: 20px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 12px; + font-weight: 400; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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: #c7e0f4; +} + +.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 { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.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 thead .ms-Table-rowCheck::after, +.ms-Table-head .ms-Table-rowCheck::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.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, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.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, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.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: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.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::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.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: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + 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: 2px; +} + +.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-weight: 300; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + border-bottom: 1px solid #0078d7; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--textFieldUnderlined:hover { + border-color: #767676; +} + +.ms-TextField.ms-TextField--textFieldUnderlined:active, +.ms-TextField.ms-TextField--textFieldUnderlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + border: 0; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:focus { + outline: 0; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-Label { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: 12px; +} + +.ms-Toggle .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@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; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle .ms-Toggle-field:active { + background-color: #0078d7; +} + +.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; +} + +.ms-Toggle .ms-Toggle-field.is-selected:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@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 { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle .ms-Toggle-field.is-selected:active { + background-color: #0078d7; +} + +.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 .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + background-color: #eaeaea; + outline: 0; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #005a9e; +} + +.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: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: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px #c8c8c8 solid; + cursor: pointer; +} + +.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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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; + 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; +} + +@media screen and (-ms-high-contrast: active) { + a { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + a { + color: #00009f; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + font-weight: normal; +} + +h1 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 28px; + font-weight: 100; + color: inherit; + letter-spacing: -1px; +} + +h2 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 21px; + font-weight: 100; + color: inherit; +} + +h3 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; + color: inherit; +} + +h4 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + color: inherit; +} + +h5 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 12px; + font-weight: 400; + color: inherit; +} + +h6 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 000000000..e4b636ec2 --- /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;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.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;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;padding:12px 8px 3px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.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}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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: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{background-color:transparent;border:0;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-weight:100;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#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 .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#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{width:288px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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;margin:0;padding:0;box-shadow:none;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}.ms-CheckBox .ms-Choice-field.is-disabled{pointer-events:none;cursor:default}.ms-CheckBox .ms-Choice-field.is-disabled:before{background-color:#c8c8c8;color:#c8c8c8}.ms-CheckBox .ms-Choice-field.is-disabled:after{border-color:#eaeaea}.ms-CheckBox .ms-Choice-field.is-disabled .ms-Label{color:#a6a6a6}.ms-CheckBox .ms-CheckBox-field.in-focus:after{border-color:#767676}.ms-CheckBox .ms-Choice-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-CheckBox .ms-Choice-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-CheckBox .ms-Choice-field:hover:after{border-color:#767676}.ms-CheckBox .ms-Choice-field:hover .ms-Label{color:#000}.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after{border-radius:0}.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before,.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}.ms-CheckBox .ms-Choice-field.is-checked:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}.ms-CheckBox .ms-Choice-field.is-checked:hover:before{background-color:#212121;color:#212121}.ms-RadioButton{box-sizing:border-box;margin:0;padding:0;box-shadow:none;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-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-RadioButton .ms-Choice-type--radio.is-disabled{pointer-events:none;cursor:default}.ms-RadioButton .ms-Choice-type--radio.is-disabled:before{background-color:#c8c8c8;color:#c8c8c8}.ms-RadioButton .ms-Choice-type--radio.is-disabled:after{border-color:#eaeaea}.ms-RadioButton .ms-Choice-type--radio.is-disabled .ms-Label{color:#a6a6a6}.ms-RadioButton .ms-Choice-type--radio.in-focus:after{border-color:#767676}.ms-RadioButton .ms-Choice-type--radio{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-RadioButton .ms-Choice-type--radio:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-RadioButton .ms-Choice-type--radio:hover:after{border-color:#767676}.ms-RadioButton .ms-Choice-type--radio:hover .ms-Label{color:#000}.ms-RadioButton .ms-Choice-type--radio.is-checked:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before{background-color:#212121;color:#212121}.ms-ChoiceFieldGroup{margin-bottom:4px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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{margin-right:8px;display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px;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;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandButton{display:inline-block;position:relative;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:#c7e0f4}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.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}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}.ms-CommandButton-icon{display:inline-block;padding-right:12px;position:relative;font-size:17px;min-width:17px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton-label{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{display:inline-block;position:relative;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;min-width:17px;height:100%}.ms-CommandButton-dropdownIcon .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton-dropdownIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-splitIcon{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;margin-left:-4px;width:21px;border:0}.ms-CommandButton-splitIcon .ms-Icon{border-left:1px solid #c8c8c8;position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{padding-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.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}.ms-ContextualMenu{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;display:block;min-width:180px;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:40px;line-height:40px;padding:0 18px;position:relative}.ms-ContextualMenu-link:focus{outline:transparent}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff}.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;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;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:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:#c7e0f4}.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-Dialog{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:absolute;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--x{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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:0 16px}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;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:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@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:first-child,.ms-Dropdown-item:last-child{height:39px}.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;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@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{position:relative;height:32px;width:auto;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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;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}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{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{padding:8px;display:table;background-color:#f4f4f4}.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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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--remove{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--remove .ms-Icon{font-size:8px;margin-left:3px}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-MessageBar.ms-MessageBar--success .ms-Icon{font-size:12px;top:3px}.ms-MessageBar.ms-MessageBar--success .ms-Icon:before{margin-left:1px}.ms-MessageBar.ms-MessageBar--success .ms-Icon:after{font-size:8px;margin-left:3px;top:1px}.ms-OrgChart{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:0;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Panel{background-color:#fff;width:100%;max-width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;bottom:0;right:0;z-index:10;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;display:none}.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-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-PanelHost.ms-PanelHost--left{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands,.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner{display:none}.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main{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-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay{-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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-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-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto}@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}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{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;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{animation-delay:.5s}}.ms-PeoplePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:2px solid #0078d7}.ms-PeoplePicker-searchBox .ms-TextField{border:0;margin-bottom:0}.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.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}.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-result.is-selected{background-color:#c7e0f4}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#71afe5}.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:30px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.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{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-weight:400}.ms-PeoplePicker-searchMoreSecondary{font-weight:300;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-weight:300;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.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-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn{height:42px}}.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.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.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}.ms-Persona-presenceIcon{color:#fff;font-size:9px;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--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}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}.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:inline-block;width:auto;background-color:#f4f4f4;border-radius:20px;margin-bottom: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:30px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{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-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;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:15px}.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:0}.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:'\e088'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.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{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;font-size:14px;font-weight:400}.ms-Pivot-links{color:#333;height:30px;list-style-type:none;white-space:nowrap;padding:0}.ms-Pivot-link{color:#333;display:inline-block;font-weight:300;font-size:15px;line-height:27px;margin-right:15px}.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active{color:#0078d7}.ms-Pivot-link.is-selected{color:#0078d7;font-weight:600}.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}.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 (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@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;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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;position:relative;display:inline-block;overflow:hidden;transition:width .167s;width:180px}.ms-SearchBox .ms-CommandButton{display:none}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-CommandButton{display:block}.ms-SearchBox.has-text .ms-SearchBox-text{display:none}.ms-SearchBox:hover{background-color:#deecf9;border-color:#0078d7}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-weight:300;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 32px;width:100%;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-close.ms-CommandButton{position:absolute;right:0;top:0;height:100%;display:none;z-index:11}.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:100%}.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-icon{color:#fff}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-label .ms-Icon{margin-right:7px;font-size:17px;color:#767676}.ms-SearchBox.ms-SearchBox--commandBar{border:0;background-color:#deecf9;width:208px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{border:0;height:40px;background:transparent;padding-left:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{display:block;line-height:40px;height:40px;padding-left:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{display:inline-block;width:16px;height:16px;margin-left:16px;margin-right:8px;color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close{background-color:#deecf9;color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:hover{border:0;background-color:none}.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.is-collapsed{width:50px;min-height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-close,.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer}.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}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-close{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-active,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-close .ms-CommandButton-button{background-color:#c7e0f4}.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 .ms-SearchBox-label .ms-SearchBox-icon{width:16px;margin-left:16px;margin-right:8px;display:inline-block}.ms-Spinner{position:relative;height:20px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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}.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:#c7e0f4}.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{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.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-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-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:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.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:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:12px;color:#666;padding:7px 0 7px 10px}.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:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;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:2px}.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-weight:300;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-TextField.ms-TextField--textFieldUnderlined{border:0;border-bottom:1px solid #0078d7;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--textFieldUnderlined:hover{border-color:#767676}.ms-TextField.ms-TextField--textFieldUnderlined:active,.ms-TextField.ms-TextField--textFieldUnderlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{border:0;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:active,.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:focus{outline:0}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 0 0 62px;font-size:12px}.ms-Toggle .ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle .ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@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;border-right:2.5px solid #fff}.ms-Toggle .ms-Toggle-field:active{background-color:#0078d7}.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}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@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{left:auto;border-left:2.5px solid #fff}.ms-Toggle .ms-Toggle-field.is-selected:active{background-color:#0078d7}.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 .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{background-color:#eaeaea;outline:0}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#005a9e}.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: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:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.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{color:#333;padding:0;margin:0}a,body,html{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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}@media screen and (-ms-high-contrast:active){a{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){a{color:#00009f}}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:400}h1{font-size:28px;letter-spacing:-1px}h1,h2{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:100;color:inherit}h2{font-size:21px}h3{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;color:inherit}h4{font-size:14px}h4,h5{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-weight:400;color:inherit}h5{font-size:12px}h6{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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 000000000..e2a4a6ddf --- /dev/null +++ b/dist/documentation/Samples/Form/index.html @@ -0,0 +1,250 @@ + + + + + + + + Example Form + + + + + + + + + + + + + +
      +
      +
      +
      +

      Nod Publishers

      +

      Check your text.

      +
      +
      +
      + +
      +
      +
      +

      Create an account to start using Nod.

      +
      + +
      +
      + + + Can't be changed after sign-up. Why not? +
      + +
      + + +
      + +
      + + +
      + + +
      +
      + +
      +
      + + +
      +
      + + +
      +
      + +
      + + + We recommend not using your business address. Why not? +
      + +
      + + + We will use this to create your user ID. +
      + +
      + + +
      + +
      + + +
      +
      + + +
      + +
      + + + +
      + +
      + + +
      + +
      + + +
      + + +
      +
      + + + +
      +
      + + +
      +
      + Go to today +
      +
      +
      + + +
      +
      +
      +
      + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
      +
      +
      +
      + + +
      +
      +
      + +
      + + + You use this to sign in. +
      + +
      + + + At least 8 characters. A mix of letters and numbers is best. +
      + +
      + + +
      + +
      + +
      +
      +
      +
      +
      + + + + + + \ 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 000000000..cac00f760 --- /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 '../../../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/Icons/index.html b/dist/documentation/Samples/Icons/index.html new file mode 100644 index 000000000..7c2b395c7 --- /dev/null +++ b/dist/documentation/Samples/Icons/index.html @@ -0,0 +1,438 @@ + + + + + + + + Fabric Icons + + + + + + + + + +
      +
      +

      Icons

      + +

      Fabric uses a custom font for its iconography, containing glyphs that can be infinitely scaled, colored, styled, and even flipped for right-to-left localization.

      + + +
      + +
      + +
      +
      + + \ No newline at end of file diff --git a/dist/documentation/Samples/Languages/index.html b/dist/documentation/Samples/Languages/index.html new file mode 100644 index 000000000..ac2f3089f --- /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.

      + + +
      +
      + +
      +
      +
      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 000000000..9bd5729c0 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/channel.html @@ -0,0 +1,256 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + +
      +
      + +
      + + +
      +
      +
      +
      + + + Home + +
      +
      + + + Channels + +
      +
      + + + Upload + +
      + +
      + + +
      + +
      +
      + +
      +
      + +
      +
      + +
      +
      +

      Popular Videos

      +
      +
      +
      +
      + + Azure Media Services Overview + +
      +
      + + Dynamically procrastinate B2C users after installed base benefits + 10:28 + +
      +
      +
      +
      + + Azure Media Services Overview + +
      +
      + + Dramatically maintain clicks-and-mortar solutions + 3:49 + +
      +
      +
      +
      + + Azure Media Services Overview + +
      +
      + + Seamlessly visualize quality intellectual capital + 1:56 + +
      +
      +
      +
      +
      +
      + + +
      +
      +
      +
        +
      • Popular
        • +
      • All Videos
        • +
      • My Videos
        • + +
      +
      + +
      +
      +
      +
      +
      + + Video Title + 3:49 + +
      +
      + Dramatically maintain clicks-and-mortar solutions + 946 views +
      +
      +
      + +
      +
      +
      + + Video Title + 8:35 + +
      +
      + Dynamically innovate resource-leveling customer service + 92 views +
      +
      +
      + +
      +
      +
      + + Video Title + 10:28 + +
      +
      + Efficiently procrastinate B2C users after installed base benefits + 499 views +
      +
      +
      + +
      +
      +
      + + Video Title + 6:32 + +
      +
      + Completely synergize resource sucking relationships + 378 views +
      +
      +
      + +
      +
      +
      + + Video Title + 10:45 + +
      +
      + Seamlessly visualize quality intellectual capital + 345 views +
      +
      +
      + +
      +
      +
      + + Video Title + 2:59 + +
      +
      + Synergizing across organizations + 66 views +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + + \ 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 000000000..21340f8e2 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/channels.html @@ -0,0 +1,108 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + +
      +
      + +
      + + +
      +
      +
      +
      + + + Home + +
      +
      + + + Channels + +
      +
      + + + Upload + +
      + +
      + + + + +
      + +
      +
      + +
      +
      +
      + Technical Presentations + Employee Interviews + Executive Briefings + Research Insights + Acquisitions and Mergers Overview + Web Tech Talks + Brown Bag Series + Sales Reports + Growth Initiatives + Holding Projetions + Customer Trends +
      +
      +
      +
      + + + + + \ 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 000000000..c24f36cd7 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/css/VideoPortal.css @@ -0,0 +1,6044 @@ +/* + 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; + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.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; + margin-right: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + padding: 12px 8px 3px; + cursor: pointer; + vertical-align: top; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.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; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} + +.ms-Button { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: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 { + background-color: transparent; + border: 0; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-weight: 100; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #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 .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #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 { + width: 288px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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; + margin: 0; + padding: 0; + box-shadow: none; + 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; +} + +.ms-CheckBox .ms-Choice-field.is-disabled { + pointer-events: none; + cursor: default; +} + +.ms-CheckBox .ms-Choice-field.is-disabled:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-CheckBox .ms-Choice-field.is-disabled:after { + border-color: #eaeaea; +} + +.ms-CheckBox .ms-Choice-field.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-CheckBox .ms-CheckBox-field.in-focus:after { + border-color: #767676; +} + +.ms-CheckBox .ms-Choice-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-CheckBox .ms-Choice-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-CheckBox .ms-Choice-field:hover:after { + border-color: #767676; +} + +.ms-CheckBox .ms-Choice-field:hover .ms-Label { + color: #000000; +} + +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after { + border-radius: 0; +} + +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before, +.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +.ms-CheckBox .ms-Choice-field.is-checked:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +.ms-CheckBox .ms-Choice-field.is-checked:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-RadioButton { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + 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-RadioButton .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled { + pointer-events: none; + cursor: default; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled:after { + border-color: #eaeaea; +} + +.ms-RadioButton .ms-Choice-type--radio.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-RadioButton .ms-Choice-type--radio.in-focus:after { + border-color: #767676; +} + +.ms-RadioButton .ms-Choice-type--radio { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-RadioButton .ms-Choice-type--radio:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-RadioButton .ms-Choice-type--radio:hover:after { + border-color: #767676; +} + +.ms-RadioButton .ms-Choice-type--radio:hover .ms-Label { + color: #000000; +} + +.ms-RadioButton .ms-Choice-type--radio.is-checked:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list { + padding: 0; + margin: 0; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + margin-right: 8px; + display: inline-block; + vertical-align: top; + transition: margin-right 0.267s; +} + +.ms-CommandBar .ms-SearchBox.is-collapsed.is-active { + width: 100%; + position: absolute; + left: 0; + right: 0; + z-index: 10; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar .ms-SearchBox { + margin-right: 24px; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + height: 100%; + overflow: hidden; +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; + 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: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandButton { + display: inline-block; + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: #c7e0f4; +} + +.ms-CommandButton-button:hover .ms-CommandButton-label, +.ms-CommandButton-splitIcon:hover .ms-CommandButton-label { + color: #212121; +} + +.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; +} + +.ms-CommandButton-button { + border: 0; + margin: 0; +} + +.ms-CommandButton + .ms-CommandButton { + margin-left: 8px; +} + +.ms-CommandButton-icon { + display: inline-block; + padding-right: 12px; + position: relative; + font-size: 17px; + min-width: 17px; + height: 100%; +} + +.ms-CommandButton-icon .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton-label { + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + display: inline-block; + position: relative; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; + min-width: 17px; + height: 100%; +} + +.ms-CommandButton-dropdownIcon .ms-Icon { + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton-dropdownIcon:focus::before { + top: 3px; + left: 3px; + right: 3px; + bottom: 3px; + border: 1px solid #333333; + position: absolute; + z-index: 10; + content: ''; + outline: none; +} + +.ms-CommandButton-splitIcon { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 17px; + font-weight: 300; + margin-left: -4px; + width: 21px; + border: 0; +} + +.ms-CommandButton-splitIcon .ms-Icon { + border-left: 1px solid #c8c8c8; + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon { + padding-right: 0; +} + +.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label { + display: none; +} + +.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; +} + +.ms-ContextualMenu { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + display: block; + min-width: 180px; + 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: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +.ms-ContextualMenu-link:focus { + outline: transparent; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-weight: 600; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + background-color: #ffffff; +} + +.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; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + 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: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: #c7e0f4; +} + +.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-Dialog { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + height: auto; + min-width: 220px; + max-width: 340px; + padding: 28px 24px; + z-index: 10; + position: absolute; + -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--x { + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: 0 16px; +} + +.ms-Panel .ms-Dropdown-items:before { + content: none; + border: 0; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + right: 9px; + bottom: 5px; + 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; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: 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: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@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:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.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; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@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 { + position: relative; + height: 32px; + width: auto; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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; + 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; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-List { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + list-style-type: none; +} + +.ms-ListItem { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + 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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + z-index: 10; + margin: 16px auto; + position: relative; + min-width: 10px; + display: none; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + top: -10px; +} + +.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak { + 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 { + padding: 8px; + display: table; + background-color: #f4f4f4; +} + +.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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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--remove { + background-color: #fde7e9; +} + +.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon { + color: #a80000; +} + +.ms-MessageBar.ms-MessageBar--remove .ms-Icon { + font-size: 8px; + margin-left: 3px; +} + +.ms-MessageBar.ms-MessageBar--success { + background-color: #dff6dd; +} + +.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon { + color: #107c10; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon { + font-size: 12px; + top: 3px; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon:before { + margin-left: 1px; +} + +.ms-MessageBar.ms-MessageBar--success .ms-Icon:after { + font-size: 8px; + margin-left: 3px; + top: 1px; +} + +.ms-OrgChart { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 0; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + display: none; +} + +.ms-Overlay.is-visible { + display: block; +} + +.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Panel { + background-color: #ffffff; + width: 100%; + max-width: 272px; + box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.2); + position: absolute; + top: 0; + bottom: 0; + right: 0; + z-index: 10; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + display: none; +} + +.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-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-PanelHost.ms-PanelHost--left { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + box-shadow: -30px 0 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands, +.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner { + display: none; +} + +.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main { + 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-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeIn; + animation-fill-mode: both; + animation-duration: 0.267s; +} + +.ms-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + 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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: 0.367s; + animation-name: fadeOut; + animation-fill-mode: both; + animation-duration: 0.167s; +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + margin-top: 40px; + padding: 0 16px 20px; + overflow-y: auto; +} + +@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; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + 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; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + animation-delay: 500ms; + } +} + +.ms-PeoplePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + border-bottom: 2px solid #0078d7; +} + +.ms-PeoplePicker-searchBox .ms-TextField { + border: 0; + margin-bottom: 0; +} + +.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field { + min-height: 40px; + border: 0; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field { + border-color: #0078d7; +} + +.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; +} + +.ms-PeoplePicker-result:hover { + background-color: #eaeaea; +} + +.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-result.is-selected { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover { + background-color: #71afe5; +} + +.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: 30px; + text-align: center; +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.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 { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-weight: 400; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-weight: 300; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-weight: 300; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.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-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.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.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.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; +} + +.ms-Persona-presenceIcon { + color: #ffffff; + font-size: 9px; + 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--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; +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #e81123; +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #93abbd; +} + +.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: inline-block; + width: auto; + background-color: #f4f4f4; + border-radius: 20px; + margin-bottom: 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: 30px; +} + +.ms-Persona.ms-Persona--token .ms-Persona-initials { + position: relative; +} + +.ms-PersonaCard { + 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-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + 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: 15px; +} + +.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: 0; +} + +.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: '\e088'; +} + +.ms-PersonaCard-details[data-detail-id='org'] { + max-height: 300px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + 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: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.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 { + 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; + font-size: 14px; + font-weight: 400; +} + +.ms-Pivot-links { + color: #333333; + height: 30px; + list-style-type: none; + white-space: nowrap; + padding: 0; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + font-weight: 300; + font-size: 15px; + line-height: 27px; + margin-right: 15px; +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active { + color: #0078d7; +} + +.ms-Pivot-link.is-selected { + color: #0078d7; + font-weight: 600; +} + +.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; +} + +.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 (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@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; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: inline-block; + overflow: hidden; + transition: width 0.167s; + width: 180px; +} + +.ms-SearchBox .ms-CommandButton { + display: none; +} + +.ms-SearchBox.is-active { + z-index: 10; +} + +.ms-SearchBox.is-active .ms-SearchBox-label { + display: none; +} + +.ms-SearchBox.is-active .ms-CommandButton { + display: block; +} + +.ms-SearchBox.has-text .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox:hover { + background-color: #deecf9; + border-color: #0078d7; +} + +.ms-SearchBox:hover .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: transparent 1px solid; + border-radius: 0; + font-weight: 300; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 32px; + width: 100%; + 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-close.ms-CommandButton { + position: absolute; + right: 0; + top: 0; + height: 100%; + display: none; + z-index: 11; +} + +.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-button { + background-color: #0078d7; + color: #ffffff; + height: 100%; +} + +.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-icon { + color: #ffffff; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-label .ms-Icon { + margin-right: 7px; + font-size: 17px; + color: #767676; +} + +.ms-SearchBox.ms-SearchBox--commandBar { + border: 0; + background-color: #deecf9; + width: 208px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field { + border: 0; + height: 40px; + background: transparent; + padding-left: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label { + display: block; + line-height: 40px; + height: 40px; + padding-left: 0; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 16px; + margin-right: 8px; + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close { + background-color: #deecf9; + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close .ms-CommandButton-icon { + color: #0078d7; +} + +.ms-SearchBox.ms-SearchBox--commandBar:hover { + border: 0; + background-color: none; +} + +.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.is-collapsed { + width: 50px; + min-height: 40px; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-close { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text { + display: none; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field { + cursor: pointer; +} + +.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; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-close { + display: block; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active { + background-color: #c7e0f4; +} + +.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-close .ms-CommandButton-button { + background-color: #c7e0f4; +} + +.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 .ms-SearchBox-label .ms-SearchBox-icon { + width: 16px; + margin-left: 16px; + margin-right: 8px; + display: inline-block; +} + +.ms-Spinner { + position: relative; + height: 20px; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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 { + position: relative; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 12px; + font-weight: 400; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +} + +.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: #c7e0f4; +} + +.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 { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.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 thead .ms-Table-rowCheck::after, +.ms-Table-head .ms-Table-rowCheck::after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +.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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + margin-bottom: 8px; +} + +.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, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.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, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.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: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.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::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-weight: 300; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.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: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + 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: 2px; +} + +.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-weight: 300; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-TextField.ms-TextField--textFieldUnderlined { + border: 0; + border-bottom: 1px solid #0078d7; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--textFieldUnderlined:hover { + border-color: #767676; +} + +.ms-TextField.ms-TextField--textFieldUnderlined:active, +.ms-TextField.ms-TextField--textFieldUnderlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field { + border: 0; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:focus { + outline: 0; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-Label { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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 { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: 12px; +} + +.ms-Toggle .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@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; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle .ms-Toggle-field:active { + background-color: #0078d7; +} + +.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; +} + +.ms-Toggle .ms-Toggle-field.is-selected:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@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 { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle .ms-Toggle-field.is-selected:active { + background-color: #0078d7; +} + +.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 .ms-Toggle-field:focus, +.ms-Toggle .ms-Toggle-field:hover { + background-color: #eaeaea; + outline: 0; +} + +.ms-Toggle .ms-Toggle-field.is-selected:focus, +.ms-Toggle .ms-Toggle-field.is-selected:hover { + background-color: #005a9e; +} + +.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: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: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px #c8c8c8 solid; + cursor: pointer; +} + +.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 { + color: #333333; + font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + 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; + 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; +} + +@media screen and (-ms-high-contrast: active) { + a { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + a { + color: #00009f; + } +} + +.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 000000000..dcda9a007 --- /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;margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.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;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;padding:12px 8px 3px;cursor:pointer;vertical-align:top}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.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}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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: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{background-color:transparent;border:0;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-weight:100;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#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 .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#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{width:288px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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;margin:0;padding:0;box-shadow:none;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}.ms-CheckBox .ms-Choice-field.is-disabled{pointer-events:none;cursor:default}.ms-CheckBox .ms-Choice-field.is-disabled:before{background-color:#c8c8c8;color:#c8c8c8}.ms-CheckBox .ms-Choice-field.is-disabled:after{border-color:#eaeaea}.ms-CheckBox .ms-Choice-field.is-disabled .ms-Label{color:#a6a6a6}.ms-CheckBox .ms-CheckBox-field.in-focus:after{border-color:#767676}.ms-CheckBox .ms-Choice-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-CheckBox .ms-Choice-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-CheckBox .ms-Choice-field:hover:after{border-color:#767676}.ms-CheckBox .ms-Choice-field:hover .ms-Label{color:#000}.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox:after{border-radius:0}.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:before,.ms-CheckBox .ms-Choice-field.ms-Choice-type--checkbox.is-checked:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}.ms-CheckBox .ms-Choice-field.is-checked:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}.ms-CheckBox .ms-Choice-field.is-checked:hover:before{background-color:#212121;color:#212121}.ms-RadioButton{box-sizing:border-box;margin:0;padding:0;box-shadow:none;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-RadioButton .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-RadioButton .ms-Choice-type--radio.is-disabled{pointer-events:none;cursor:default}.ms-RadioButton .ms-Choice-type--radio.is-disabled:before{background-color:#c8c8c8;color:#c8c8c8}.ms-RadioButton .ms-Choice-type--radio.is-disabled:after{border-color:#eaeaea}.ms-RadioButton .ms-Choice-type--radio.is-disabled .ms-Label{color:#a6a6a6}.ms-RadioButton .ms-Choice-type--radio.in-focus:after{border-color:#767676}.ms-RadioButton .ms-Choice-type--radio{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-RadioButton .ms-Choice-type--radio:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-RadioButton .ms-Choice-type--radio:hover:after{border-color:#767676}.ms-RadioButton .ms-Choice-type--radio:hover .ms-Label{color:#000}.ms-RadioButton .ms-Choice-type--radio.is-checked:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}.ms-RadioButton .ms-Choice-type--radio.is-checked:hover:before{background-color:#212121;color:#212121}.ms-ChoiceFieldGroup{margin-bottom:4px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-ChoiceFieldGroup .ms-ChoiceFieldGroup-list{padding:0;margin:0}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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{margin-right:8px;display:inline-block;vertical-align:top;transition:margin-right .267s}.ms-CommandBar .ms-SearchBox.is-collapsed.is-active{width:100%;position:absolute;left:0;right:0;z-index:10}@media only screen and (min-width:1024px){.ms-CommandBar .ms-SearchBox{margin-right:24px}}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;height:100%;overflow:hidden}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px;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;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandButton{display:inline-block;position:relative;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:#c7e0f4}.ms-CommandButton-button:hover .ms-CommandButton-label,.ms-CommandButton-splitIcon:hover .ms-CommandButton-label{color:#212121}.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}.ms-CommandButton-button{border:0;margin:0}.ms-CommandButton+.ms-CommandButton{margin-left:8px}.ms-CommandButton-icon{display:inline-block;padding-right:12px;position:relative;font-size:17px;min-width:17px;height:100%}.ms-CommandButton-icon .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton-label{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{display:inline-block;position:relative;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;min-width:17px;height:100%}.ms-CommandButton-dropdownIcon .ms-Icon{position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton-dropdownIcon:focus:before{top:3px;left:3px;right:3px;bottom:3px;border:1px solid #333;position:absolute;z-index:10;content:'';outline:none}.ms-CommandButton-splitIcon{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:17px;font-weight:300;margin-left:-4px;width:21px;border:0}.ms-CommandButton-splitIcon .ms-Icon{border-left:1px solid #c8c8c8;position:absolute;top:50%;transform:translateY(-50%);left:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-icon{padding-right:0}.ms-CommandButton.ms-CommandButton--noLabel .ms-CommandButton-label{display:none}.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}.ms-ContextualMenu{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;display:block;min-width:180px;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:40px;line-height:40px;padding:0 18px;position:relative}.ms-ContextualMenu-link:focus{outline:transparent}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus{border:1px solid #0078d7}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-weight:600}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;background-color:#fff}.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;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;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:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:#c7e0f4}.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-Dialog{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;height:auto;min-width:220px;max-width:340px;padding:28px 24px;z-index:10;position:absolute;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--x{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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:0 16px}.ms-Panel .ms-Dropdown-items:before{content:none;border:0}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;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:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@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:first-child,.ms-Dropdown-item:last-child{height:39px}.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;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@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{position:relative;height:32px;width:auto;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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;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}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{padding:0;list-style-type:none}.ms-List,.ms-ListItem{box-sizing:border-box;margin:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{z-index:10;margin:16px auto;position:relative;min-width:10px;display:none;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{top:-10px}.ms-ContextualHost.ms-ContextualHost--arrowBottom .ms-ContextualHost-beak{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{padding:8px;display:table;background-color:#f4f4f4}.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{color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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--remove{background-color:#fde7e9}.ms-MessageBar.ms-MessageBar--remove .ms-MessageBar-icon{color:#a80000}.ms-MessageBar.ms-MessageBar--remove .ms-Icon{font-size:8px;margin-left:3px}.ms-MessageBar.ms-MessageBar--success{background-color:#dff6dd}.ms-MessageBar.ms-MessageBar--success .ms-MessageBar-icon{color:#107c10}.ms-MessageBar.ms-MessageBar--success .ms-Icon{font-size:12px;top:3px}.ms-MessageBar.ms-MessageBar--success .ms-Icon:before{margin-left:1px}.ms-MessageBar.ms-MessageBar--success .ms-Icon:after{font-size:8px;margin-left:3px;top:1px}.ms-OrgChart{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:0;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;display:none}.ms-Overlay.is-visible{display:block}.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Panel{background-color:#fff;width:100%;max-width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);position:absolute;top:0;bottom:0;right:0;z-index:10;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;display:none}.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-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-PanelHost.ms-PanelHost--left{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-PanelHost.ms-PanelHost--left .ms-Panel-commands,.ms-PanelHost.ms-PanelHost--left .ms-Panel-contentInner{display:none}.ms-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Panel-main{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-PanelHost.ms-PanelHost--left.ms-Panel-animateIn .ms-Overlay{-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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{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-PanelHost.ms-PanelHost--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-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-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{margin-top:40px;padding:0 16px 20px;overflow-y:auto}@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}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{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;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{animation-delay:.5s}}.ms-PeoplePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{border-bottom:2px solid #0078d7}.ms-PeoplePicker-searchBox .ms-TextField{border:0;margin-bottom:0}.ms-PeoplePicker-searchBox .ms-TextField .ms-TextField-field{min-height:40px;border:0}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox .ms-TextField-field{border-color:#0078d7}.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}.ms-PeoplePicker-result:hover{background-color:#eaeaea}.ms-PeoplePicker-result .ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-result.is-selected{background-color:#c7e0f4}.ms-PeoplePicker-result.is-selected .ms-PeoplePicker-resultAction:hover{background-color:#71afe5}.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:30px;text-align:center}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.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{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-weight:400}.ms-PeoplePicker-searchMoreSecondary{font-weight:300;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-weight:300;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.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-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-resultBtn{height:42px}}.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.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--FacePile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.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}.ms-Persona-presenceIcon{color:#fff;font-size:9px;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--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}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#e81123}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#93abbd}.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:inline-block;width:auto;background-color:#f4f4f4;border-radius:20px;margin-bottom: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:30px}.ms-Persona.ms-Persona--token .ms-Persona-initials{position:relative}.ms-PersonaCard{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-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;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:15px}.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:0}.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:'\e088'}.ms-PersonaCard-details[data-detail-id=org]{max-height:300px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;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:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.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{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;font-size:14px;font-weight:400}.ms-Pivot-links{color:#333;height:30px;list-style-type:none;white-space:nowrap;padding:0}.ms-Pivot-link{color:#333;display:inline-block;font-weight:300;font-size:15px;line-height:27px;margin-right:15px}.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active{color:#0078d7}.ms-Pivot-link.is-selected{color:#0078d7;font-weight:600}.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}.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 (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@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;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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;position:relative;display:inline-block;overflow:hidden;transition:width .167s;width:180px}.ms-SearchBox .ms-CommandButton{display:none}.ms-SearchBox.is-active{z-index:10}.ms-SearchBox.is-active .ms-SearchBox-label{display:none}.ms-SearchBox.is-active .ms-CommandButton{display:block}.ms-SearchBox.has-text .ms-SearchBox-text{display:none}.ms-SearchBox:hover{background-color:#deecf9;border-color:#0078d7}.ms-SearchBox:hover .ms-SearchBox-label{color:#000}.ms-SearchBox:hover .ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-weight:300;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 32px;width:100%;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-close.ms-CommandButton{position:absolute;right:0;top:0;height:100%;display:none;z-index:11}.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-button{background-color:#0078d7;color:#fff;height:100%}.ms-SearchBox-close.ms-CommandButton .ms-CommandButton-icon{color:#fff}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-label .ms-Icon{margin-right:7px;font-size:17px;color:#767676}.ms-SearchBox.ms-SearchBox--commandBar{border:0;background-color:#deecf9;width:208px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-field{border:0;height:40px;background:transparent;padding-left:40px}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-label{display:block;line-height:40px;height:40px;padding-left:0}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-icon{display:inline-block;width:16px;height:16px;margin-left:16px;margin-right:8px;color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close{background-color:#deecf9;color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar .ms-SearchBox-close .ms-CommandButton-icon{color:#0078d7}.ms-SearchBox.ms-SearchBox--commandBar:hover{border:0;background-color:none}.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.is-collapsed{width:50px;min-height:40px}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-close,.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-text{display:none}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed .ms-SearchBox-field{cursor:pointer}.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}.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active .ms-SearchBox-close{display:block}.ms-SearchBox.ms-SearchBox--commandBar.is-active,.ms-SearchBox.ms-SearchBox--commandBar.is-active .ms-SearchBox-close .ms-CommandButton-button{background-color:#c7e0f4}.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 .ms-SearchBox-label .ms-SearchBox-icon{width:16px;margin-left:16px;margin-right:8px;display:inline-block}.ms-Spinner{position:relative;height:20px;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.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}.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:#c7e0f4}.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{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.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-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}.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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-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:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.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:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-weight:300;font-size:12px;color:#666;padding:7px 0 7px 10px}.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:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;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:2px}.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-weight:300;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-TextField.ms-TextField--textFieldUnderlined{border:0;border-bottom:1px solid #0078d7;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--textFieldUnderlined:hover{border-color:#767676}.ms-TextField.ms-TextField--textFieldUnderlined:active,.ms-TextField.ms-TextField--textFieldUnderlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field{border:0;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:active,.ms-TextField.ms-TextField--textFieldUnderlined .ms-TextField-field:focus{outline:0}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-Label{color:#a6a6a6}.ms-TextField.ms-TextField--textFieldUnderlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-Label{margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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{box-sizing:border-box;margin:0;padding:0;box-shadow:none;color:#333;font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 0 0 62px;font-size:12px}.ms-Toggle .ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle .ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@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;border-right:2.5px solid #fff}.ms-Toggle .ms-Toggle-field:active{background-color:#0078d7}.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}.ms-Toggle .ms-Toggle-field.is-selected:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@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{left:auto;border-left:2.5px solid #fff}.ms-Toggle .ms-Toggle-field.is-selected:active{background-color:#0078d7}.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 .ms-Toggle-field:focus,.ms-Toggle .ms-Toggle-field:hover{background-color:#eaeaea;outline:0}.ms-Toggle .ms-Toggle-field.is-selected:focus,.ms-Toggle .ms-Toggle-field.is-selected:hover{background-color:#005a9e}.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: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:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.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{color:#333;padding:0;margin:0}a,body,html{font-family:Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;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}@media screen and (-ms-high-contrast:active){a{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){a{color:#00009f}}.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 000000000..062903aa4 --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/index.html @@ -0,0 +1,302 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + + +
      +
      + +
      + +
      +
      +
      +
      + + + Home + +
      +
      + + + Channels + +
      +
      + + + Upload + +
      + +
      + + +
      + +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      +
      + + Azure Media Services Overview + +
      +
      + + Dynamically procrastinate B2C users after installed base benefits + 10:28 + +
      +
      +
      +
      + + Azure Media Services Overview + +
      +
      + + Dramatically maintain clicks-and-mortar solutions + 3:49 + +
      +
      +
      +
      + + Azure Media Services Overview + +
      +
      + + Seamlessly visualize quality intellectual capital + 1:56 + +
      +
      +
      +
      +
      +
      + + +
      +
      + +
      + +
      +

      + + PopularSee all videos + +

      + + +
      +
      +
      +
      +
      + + Video Title + 10:45 + +
      +
      + Seamlessly visualize quality intellectual capital + 345 views +
      +
      +
      + +
      +
      +
      + + Video Title + 2:59 + +
      +
      + Synergizing across organizations + 66 views +
      +
      +
      + +
      +
      +
      + + Video Title + 1:46 + +
      +
      + Holistically pontificate installed base portals + 930 views +
      +
      +
      + +
      +
      +
      + + Video Title + 1:56 + +
      +
      + Seamlessly visualize quality intellectual capital + 445 views +
      +
      +
      +
      +
      +
      + + +
      +

      + + CommunitySee all videos + +

      + +
      +
      +
      +
      +
      + + Video Title + 3:49 + +
      +
      + Dramatically maintain clicks-and-mortar solutions + 946 views +
      +
      +
      + +
      +
      +
      + + Video Title + 8:35 + +
      +
      + Dynamically innovate resource-leveling customer service + 92 views +
      +
      +
      + +
      +
      +
      + + Video Title + 10:28 + +
      +
      + Efficiently procrastinate B2C users after installed base benefits + 499 views +
      +
      +
      + +
      +
      +
      + + Video Title + 6:32 + +
      +
      + Completely synergize resource sucking relationships + 378 views +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + + \ 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 000000000..b8bdb3a7d --- /dev/null +++ b/dist/documentation/Samples/VideoPortal/player.html @@ -0,0 +1,216 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + +
      +
      + +
      + + +
      +
      +
      +
      + + + Home + +
      +
      + + + Channels + +
      +
      + + + Upload + +
      + +
      + + +
      + +
      +
      + +
      +
      + +
      +
      +
      +
      +
      + +
      + Video Title +
      +
      +
      +
      +
      + + +
      +
      +
      +
      +
      +
      +

      + Dynamically procrastinate B2C users after installed base benefits +

      +
      + +
      + + + Community Videos + + +
      +
      + +
      +
      + 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

      + + +
      +
      +
      +
      +
      + + Video Title + 3:49 + +
      +
      + Dramatically maintain clicks-and-mortar solutions + 946 views +
      +
      +
      + +
      +
      +
      + + Video Title + 3:49 + +
      +
      + Completely synergize resource sucking relationships + 946 views +
      +
      +
      + +
      +
      +
      + + Video Title + 3:49 + +
      +
      + Efficiently procrastinate B2C users after installed base benefits + 946 views +
      +
      +
      + +
      +
      +
      + + Video Title + 3:49 + +
      +
      + Seamlessly visualize quality intellectual capital + 946 views +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + + + \ 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 000000000..13e67dd08 --- /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 000000000..23e9446c9 --- /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 000000000..4d49d1b46 --- /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 000000000..a936a063d --- /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 000000000..ef99eb2a4 --- /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 000000000..719880480 --- /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 000000000..031dffaaf --- /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 000000000..d5afe890a --- /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 000000000..fa9bfae97 --- /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 000000000..19217f94c --- /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 '../../../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/index.html b/dist/documentation/index.html new file mode 100644 index 000000000..1c43b03d7 --- /dev/null +++ b/dist/documentation/index.html @@ -0,0 +1,119 @@ + + + + + + Fabric Samples Index + + + + + + + + +

      Components

      +
      + + Breadcrumb + + Button + + Callout + + CheckBox + + ChoiceFieldGroup + + CommandBar + + CommandButton + + ContextualMenu + + DatePicker + + Dialog + + Dropdown + + FacePile + + Label + + Link + + List + + ListItem + + MessageBanner + + MessageBar + + OrgChart + + Overlay + + Panel + + PeoplePicker + + Persona + + PersonaCard + + Pivot + + ProgressIndicator + + SearchBox + + Spinner + + Table + + TextField + + Toggle + +
      + +

      Samples

      +
      + + Form + + Icons + + Languages + + VideoPortal + +
      + + + + \ No newline at end of file diff --git a/dist/js/fabric.js b/dist/js/fabric.js new file mode 100644 index 000000000..1558e257c --- /dev/null +++ b/dist/js/fabric.js @@ -0,0 +1,5177 @@ +//Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// 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. +/** + * @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.container = container; + 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 + * @param tabIndex {number} the item's tabIndex + */ + Breadcrumb.prototype.addItem = function (itemLabel, itemLink, tabIndex) { + this._itemCollection.push({ text: itemLabel, link: itemLink, tabIndex: tabIndex }); + 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 breadcrumbs list + * index starts at 0 + * @param value {String} 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 () { + 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._addBreadcrumbItems(maxItems); + this._addItemsToOverflow(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"; + if (!isNaN(item.tabIndex)) { + li.setAttribute("tabindex", item.tabIndex); + } + var a = document.createElement("a"); + a.className = "ms-ContextualMenu-link"; + if (item.link !== null) { + a.setAttribute("href", item.link); + } + 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); + } + if (!isNaN(item.tabIndex)) { + a.setAttribute("tabindex", item.tabIndex); + } + 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.bind(this)); + this._overflowButton.addEventListener("click", this._openOverflow.bind(this), false); + this._overflowButton.addEventListener("keypress", this._overflowKeyPress.bind(this), false); + document.addEventListener("click", this._closeOverflow.bind(this), 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 = {})); + + + +var FabricTemplateLibrary = (function () { + function FabricTemplateLibrary() { + } + FabricTemplateLibrary.prototype.Breadcrumb = function () { + var Breadcrumb0 = document.createElement("div"); + Breadcrumb0.setAttribute("class", "ms-Breadcrumb "); + Breadcrumb0.innerHTML += " "; + var Breadcrumb0c1 = document.createElement("div"); + Breadcrumb0c1.setAttribute("class", "ms-Breadcrumb-overflow"); + Breadcrumb0c1.innerHTML += " "; + var Breadcrumb0c1c1 = document.createElement("div"); + Breadcrumb0c1c1.setAttribute("class", "ms-Breadcrumb-overflowButton ms-Icon ms-Icon--ellipsis"); + Breadcrumb0c1c1.setAttribute("tabindex", "1"); + Breadcrumb0c1.appendChild(Breadcrumb0c1c1); + Breadcrumb0c1.innerHTML += " "; + var Breadcrumb0c1c3 = document.createElement("div"); + Breadcrumb0c1c3.setAttribute("class", "ms-Breadcrumb-overflowMenu"); + Breadcrumb0c1c3.innerHTML += " "; + var Breadcrumb0c1c3c1 = document.createElement("ul"); + Breadcrumb0c1c3c1.setAttribute("class", "ms-ContextualMenu is-open"); + Breadcrumb0c1c3.appendChild(Breadcrumb0c1c3c1); + Breadcrumb0c1c3.innerHTML += " "; + Breadcrumb0c1.appendChild(Breadcrumb0c1c3); + Breadcrumb0c1.innerHTML += " "; + Breadcrumb0.appendChild(Breadcrumb0c1); + Breadcrumb0.innerHTML += " "; + var Breadcrumb0c3 = document.createElement("ul"); + Breadcrumb0c3.setAttribute("class", "ms-Breadcrumb-list"); + Breadcrumb0c3.innerHTML += " "; + Breadcrumb0.appendChild(Breadcrumb0c3); + Breadcrumb0.innerHTML += ""; + return Breadcrumb0; + }; + FabricTemplateLibrary.prototype.Button = function () { + var Button0 = document.createElement("button"); + Button0.setAttribute("class", "ms-Button "); + Button0.innerHTML += " "; + var Button0c1 = document.createElement("span"); + Button0c1.setAttribute("class", "ms-Button-label"); + Button0c1.innerHTML += "Create Account"; + Button0.appendChild(Button0c1); + Button0.innerHTML += ""; + return Button0; + }; + FabricTemplateLibrary.prototype.Callout = function () { + var Callout0 = document.createElement("div"); + Callout0.setAttribute("class", "ms-Callout "); + Callout0.innerHTML += " "; + var Callout0c1 = document.createElement("div"); + Callout0c1.setAttribute("class", "ms-Callout-main"); + Callout0c1.innerHTML += " "; + var Callout0c1c1 = document.createElement("div"); + Callout0c1c1.setAttribute("class", "ms-Callout-header"); + Callout0c1c1.innerHTML += " "; + var Callout0c1c1c1 = document.createElement("p"); + Callout0c1c1c1.setAttribute("class", "ms-Callout-title"); + Callout0c1c1.appendChild(Callout0c1c1c1); + Callout0c1c1.innerHTML += " "; + Callout0c1.appendChild(Callout0c1c1); + Callout0c1.innerHTML += " "; + var Callout0c1c3 = document.createElement("div"); + Callout0c1c3.setAttribute("class", "ms-Callout-inner"); + Callout0c1c3.innerHTML += " "; + var Callout0c1c3c1 = document.createElement("div"); + Callout0c1c3c1.setAttribute("class", "ms-Callout-content"); + Callout0c1c3c1.innerHTML += " "; + var Callout0c1c3c1c1 = document.createElement("p"); + Callout0c1c3c1c1.setAttribute("class", "ms-Callout-subText "); + Callout0c1c3c1.appendChild(Callout0c1c3c1c1); + Callout0c1c3c1.innerHTML += " "; + Callout0c1c3.appendChild(Callout0c1c3c1); + Callout0c1c3.innerHTML += " "; + var Callout0c1c3c3 = document.createElement("div"); + Callout0c1c3c3.setAttribute("class", "ms-Callout-actions"); + Callout0c1c3c3.innerHTML += " "; + Callout0c1c3.appendChild(Callout0c1c3c3); + Callout0c1c3.innerHTML += " "; + Callout0c1.appendChild(Callout0c1c3); + Callout0c1.innerHTML += " "; + Callout0.appendChild(Callout0c1); + Callout0.innerHTML += ""; + return Callout0; + }; + FabricTemplateLibrary.prototype.CheckBox = function () { + var CheckBox0 = document.createElement("div"); + CheckBox0.setAttribute("class", "ms-CheckBox"); + CheckBox0.innerHTML += " "; + var CheckBox0c1 = document.createElement("li"); + CheckBox0c1.setAttribute("role", ""); + CheckBox0c1.setAttribute("class", "ms-Choice-field "); + CheckBox0c1.setAttribute("tabindex", "0"); + CheckBox0c1.setAttribute("aria-checked", ""); + CheckBox0c1.setAttribute("name", ""); + CheckBox0c1.innerHTML += " "; + var CheckBox0c1c1 = document.createElement("span"); + CheckBox0c1c1.setAttribute("class", "ms-Label"); + CheckBox0c1.appendChild(CheckBox0c1c1); + CheckBox0c1.innerHTML += " "; + CheckBox0.appendChild(CheckBox0c1); + CheckBox0.innerHTML += ""; + return CheckBox0; + }; + FabricTemplateLibrary.prototype.ChoiceFieldGroup = function () { + var ChoiceFieldGroup0 = document.createElement("div"); + ChoiceFieldGroup0.setAttribute("class", "ms-ChoiceFieldGroup"); + ChoiceFieldGroup0.setAttribute("id", ""); + ChoiceFieldGroup0.setAttribute("role", ""); + ChoiceFieldGroup0.innerHTML += " "; + var ChoiceFieldGroup0c1 = document.createElement("div"); + ChoiceFieldGroup0c1.setAttribute("class", "ms-ChoiceFieldGroup-title"); + ChoiceFieldGroup0c1.innerHTML += " "; + var ChoiceFieldGroup0c1c1 = document.createElement("label"); + ChoiceFieldGroup0c1c1.setAttribute("class", "ms-Label is-required "); + ChoiceFieldGroup0c1c1.innerHTML += "Unselected"; + ChoiceFieldGroup0c1.appendChild(ChoiceFieldGroup0c1c1); + ChoiceFieldGroup0c1.innerHTML += " "; + ChoiceFieldGroup0.appendChild(ChoiceFieldGroup0c1); + ChoiceFieldGroup0.innerHTML += " "; + var ChoiceFieldGroup0c3 = document.createElement("ul"); + ChoiceFieldGroup0c3.setAttribute("class", "ms-ChoiceFieldGroup-list"); + ChoiceFieldGroup0c3.innerHTML += " "; + ChoiceFieldGroup0c3.innerHTML += ""; + var ChoiceFieldGroup0c3c3 = document.createElement("div"); + ChoiceFieldGroup0c3c3.setAttribute("class", "ms-CheckBox"); + ChoiceFieldGroup0c3c3.innerHTML += " "; + var ChoiceFieldGroup0c3c3c1 = document.createElement("li"); + ChoiceFieldGroup0c3c3c1.setAttribute("role", "radio"); + ChoiceFieldGroup0c3c3c1.setAttribute("class", "ms-Choice-field "); + ChoiceFieldGroup0c3c3c1.setAttribute("tabindex", "0"); + ChoiceFieldGroup0c3c3c1.setAttribute("aria-checked", "false"); + ChoiceFieldGroup0c3c3c1.setAttribute("name", "choicefieldgroup"); + ChoiceFieldGroup0c3c3c1.innerHTML += " "; + var ChoiceFieldGroup0c3c3c1c1 = document.createElement("span"); + ChoiceFieldGroup0c3c3c1c1.setAttribute("class", "ms-Label"); + ChoiceFieldGroup0c3c3c1c1.innerHTML += "Option 1"; + ChoiceFieldGroup0c3c3c1.appendChild(ChoiceFieldGroup0c3c3c1c1); + ChoiceFieldGroup0c3c3c1.innerHTML += " "; + ChoiceFieldGroup0c3c3.appendChild(ChoiceFieldGroup0c3c3c1); + ChoiceFieldGroup0c3c3.innerHTML += ""; + ChoiceFieldGroup0c3.appendChild(ChoiceFieldGroup0c3c3); + ChoiceFieldGroup0c3.innerHTML += " "; + ChoiceFieldGroup0c3.innerHTML += ""; + var ChoiceFieldGroup0c3c7 = document.createElement("div"); + ChoiceFieldGroup0c3c7.setAttribute("class", "ms-CheckBox"); + ChoiceFieldGroup0c3c7.innerHTML += " "; + var ChoiceFieldGroup0c3c7c1 = document.createElement("li"); + ChoiceFieldGroup0c3c7c1.setAttribute("role", "radio"); + ChoiceFieldGroup0c3c7c1.setAttribute("class", "ms-Choice-field "); + ChoiceFieldGroup0c3c7c1.setAttribute("tabindex", "0"); + ChoiceFieldGroup0c3c7c1.setAttribute("aria-checked", "false"); + ChoiceFieldGroup0c3c7c1.setAttribute("name", "choicefieldgroup"); + ChoiceFieldGroup0c3c7c1.innerHTML += " "; + var ChoiceFieldGroup0c3c7c1c1 = document.createElement("span"); + ChoiceFieldGroup0c3c7c1c1.setAttribute("class", "ms-Label"); + ChoiceFieldGroup0c3c7c1c1.innerHTML += "Option 2"; + ChoiceFieldGroup0c3c7c1.appendChild(ChoiceFieldGroup0c3c7c1c1); + ChoiceFieldGroup0c3c7c1.innerHTML += " "; + ChoiceFieldGroup0c3c7.appendChild(ChoiceFieldGroup0c3c7c1); + ChoiceFieldGroup0c3c7.innerHTML += ""; + ChoiceFieldGroup0c3.appendChild(ChoiceFieldGroup0c3c7); + ChoiceFieldGroup0c3.innerHTML += " "; + ChoiceFieldGroup0c3.innerHTML += ""; + var ChoiceFieldGroup0c3c11 = document.createElement("div"); + ChoiceFieldGroup0c3c11.setAttribute("class", "ms-CheckBox"); + ChoiceFieldGroup0c3c11.innerHTML += " "; + var ChoiceFieldGroup0c3c11c1 = document.createElement("li"); + ChoiceFieldGroup0c3c11c1.setAttribute("role", "radio"); + ChoiceFieldGroup0c3c11c1.setAttribute("class", "ms-Choice-field "); + ChoiceFieldGroup0c3c11c1.setAttribute("tabindex", "0"); + ChoiceFieldGroup0c3c11c1.setAttribute("aria-checked", "false"); + ChoiceFieldGroup0c3c11c1.setAttribute("name", "choicefieldgroup"); + ChoiceFieldGroup0c3c11c1.innerHTML += " "; + var ChoiceFieldGroup0c3c11c1c1 = document.createElement("span"); + ChoiceFieldGroup0c3c11c1c1.setAttribute("class", "ms-Label"); + ChoiceFieldGroup0c3c11c1c1.innerHTML += "Option 3"; + ChoiceFieldGroup0c3c11c1.appendChild(ChoiceFieldGroup0c3c11c1c1); + ChoiceFieldGroup0c3c11c1.innerHTML += " "; + ChoiceFieldGroup0c3c11.appendChild(ChoiceFieldGroup0c3c11c1); + ChoiceFieldGroup0c3c11.innerHTML += ""; + ChoiceFieldGroup0c3.appendChild(ChoiceFieldGroup0c3c11); + ChoiceFieldGroup0c3.innerHTML += " "; + ChoiceFieldGroup0c3.innerHTML += ""; + var ChoiceFieldGroup0c3c15 = document.createElement("div"); + ChoiceFieldGroup0c3c15.setAttribute("class", "ms-CheckBox"); + ChoiceFieldGroup0c3c15.innerHTML += " "; + var ChoiceFieldGroup0c3c15c1 = document.createElement("li"); + ChoiceFieldGroup0c3c15c1.setAttribute("role", "radio"); + ChoiceFieldGroup0c3c15c1.setAttribute("class", "ms-Choice-field "); + ChoiceFieldGroup0c3c15c1.setAttribute("tabindex", "0"); + ChoiceFieldGroup0c3c15c1.setAttribute("aria-checked", "false"); + ChoiceFieldGroup0c3c15c1.setAttribute("name", "choicefieldgroup"); + ChoiceFieldGroup0c3c15c1.innerHTML += " "; + var ChoiceFieldGroup0c3c15c1c1 = document.createElement("span"); + ChoiceFieldGroup0c3c15c1c1.setAttribute("class", "ms-Label"); + ChoiceFieldGroup0c3c15c1c1.innerHTML += "Option 4"; + ChoiceFieldGroup0c3c15c1.appendChild(ChoiceFieldGroup0c3c15c1c1); + ChoiceFieldGroup0c3c15c1.innerHTML += " "; + ChoiceFieldGroup0c3c15.appendChild(ChoiceFieldGroup0c3c15c1); + ChoiceFieldGroup0c3c15.innerHTML += ""; + ChoiceFieldGroup0c3.appendChild(ChoiceFieldGroup0c3c15); + ChoiceFieldGroup0c3.innerHTML += " "; + ChoiceFieldGroup0.appendChild(ChoiceFieldGroup0c3); + ChoiceFieldGroup0.innerHTML += ""; + return ChoiceFieldGroup0; + }; + FabricTemplateLibrary.prototype.CommandBar = function () { + var CommandBar0 = document.createElement("div"); + CommandBar0.setAttribute("class", "ms-CommandBar "); + CommandBar0.innerHTML += " "; + var CommandBar0c1 = document.createElement("div"); + CommandBar0c1.setAttribute("class", "ms-CommandBar-mainArea"); + CommandBar0c1.innerHTML += " "; + CommandBar0.appendChild(CommandBar0c1); + CommandBar0.innerHTML += ""; + return CommandBar0; + }; + FabricTemplateLibrary.prototype.CommandButton = function () { + var CommandButton0 = document.createElement("div"); + CommandButton0.setAttribute("class", "ms-CommandButton "); + CommandButton0.innerHTML += " "; + var CommandButton0c1 = document.createElement("button"); + CommandButton0c1.setAttribute("class", "ms-CommandButton-button"); + CommandButton0c1.innerHTML += " "; + var CommandButton0c1c1 = document.createElement("span"); + CommandButton0c1c1.setAttribute("class", "ms-CommandButton-icon ms-fontColor-themePrimary"); + var CommandButton0c1c1c0 = document.createElement("i"); + CommandButton0c1c1c0.setAttribute("class", "ms-Icon ms-Icon--circleFill"); + CommandButton0c1c1.appendChild(CommandButton0c1c1c0); + CommandButton0c1.appendChild(CommandButton0c1c1); + var CommandButton0c1c2 = document.createElement("span"); + CommandButton0c1c2.setAttribute("class", "ms-CommandButton-label"); + CommandButton0c1c2.innerHTML += "Command"; + CommandButton0c1.appendChild(CommandButton0c1c2); + CommandButton0c1.innerHTML += " "; + CommandButton0.appendChild(CommandButton0c1); + CommandButton0.innerHTML += ""; + return CommandButton0; + }; + FabricTemplateLibrary.prototype.ContextualHost = function () { + var ContextualHost0 = document.createElement("div"); + ContextualHost0.setAttribute("class", "ms-ContextualHost "); + ContextualHost0.innerHTML += " "; + var ContextualHost0c1 = document.createElement("div"); + ContextualHost0c1.setAttribute("class", "ms-ContextualHost-main"); + ContextualHost0c1.innerHTML += " "; + ContextualHost0.appendChild(ContextualHost0c1); + ContextualHost0.innerHTML += " "; + var ContextualHost0c3 = document.createElement("div"); + ContextualHost0c3.setAttribute("class", "ms-ContextualHost-beak"); + ContextualHost0.appendChild(ContextualHost0c3); + ContextualHost0.innerHTML += ""; + return ContextualHost0; + }; + FabricTemplateLibrary.prototype.ContextualMenu = function () { + var ContextualMenu0 = document.createElement("ul"); + ContextualMenu0.setAttribute("class", "ms-ContextualMenu is-open "); + ContextualMenu0.innerHTML += " "; + var ContextualMenu0c1 = document.createElement("li"); + ContextualMenu0c1.setAttribute("class", "ms-ContextualMenu-item "); + ContextualMenu0c1.innerHTML += " "; + var ContextualMenu0c1c1 = document.createElement("a"); + ContextualMenu0c1c1.setAttribute("class", "ms-ContextualMenu-link "); + ContextualMenu0c1c1.setAttribute("tabindex", "1"); + ContextualMenu0c1c1.innerHTML += "Animals"; + ContextualMenu0c1.appendChild(ContextualMenu0c1c1); + ContextualMenu0c1.innerHTML += " "; + ContextualMenu0.appendChild(ContextualMenu0c1); + ContextualMenu0.innerHTML += " "; + var ContextualMenu0c3 = document.createElement("li"); + ContextualMenu0c3.setAttribute("class", "ms-ContextualMenu-item "); + ContextualMenu0c3.innerHTML += " "; + var ContextualMenu0c3c1 = document.createElement("a"); + ContextualMenu0c3c1.setAttribute("class", "ms-ContextualMenu-link "); + ContextualMenu0c3c1.setAttribute("tabindex", "1"); + ContextualMenu0c3c1.innerHTML += "Books"; + ContextualMenu0c3.appendChild(ContextualMenu0c3c1); + ContextualMenu0c3.innerHTML += " "; + ContextualMenu0.appendChild(ContextualMenu0c3); + ContextualMenu0.innerHTML += " "; + var ContextualMenu0c5 = document.createElement("li"); + ContextualMenu0c5.setAttribute("class", "ms-ContextualMenu-item "); + ContextualMenu0c5.innerHTML += " "; + var ContextualMenu0c5c1 = document.createElement("a"); + ContextualMenu0c5c1.setAttribute("class", "ms-ContextualMenu-link is-selected "); + ContextualMenu0c5c1.setAttribute("tabindex", "1"); + ContextualMenu0c5c1.innerHTML += "Education"; + ContextualMenu0c5.appendChild(ContextualMenu0c5c1); + ContextualMenu0c5.innerHTML += " "; + ContextualMenu0.appendChild(ContextualMenu0c5); + ContextualMenu0.innerHTML += " "; + var ContextualMenu0c7 = document.createElement("li"); + ContextualMenu0c7.setAttribute("class", "ms-ContextualMenu-item "); + ContextualMenu0c7.innerHTML += " "; + var ContextualMenu0c7c1 = document.createElement("a"); + ContextualMenu0c7c1.setAttribute("class", "ms-ContextualMenu-link "); + ContextualMenu0c7c1.setAttribute("tabindex", "1"); + ContextualMenu0c7c1.innerHTML += "Music"; + ContextualMenu0c7.appendChild(ContextualMenu0c7c1); + ContextualMenu0c7.innerHTML += " "; + ContextualMenu0.appendChild(ContextualMenu0c7); + ContextualMenu0.innerHTML += " "; + var ContextualMenu0c9 = document.createElement("li"); + ContextualMenu0c9.setAttribute("class", "ms-ContextualMenu-item "); + ContextualMenu0c9.innerHTML += " "; + var ContextualMenu0c9c1 = document.createElement("a"); + ContextualMenu0c9c1.setAttribute("class", "ms-ContextualMenu-link is-disabled "); + ContextualMenu0c9c1.setAttribute("tabindex", "1"); + ContextualMenu0c9c1.innerHTML += "Sports"; + ContextualMenu0c9.appendChild(ContextualMenu0c9c1); + ContextualMenu0c9.innerHTML += " "; + ContextualMenu0.appendChild(ContextualMenu0c9); + ContextualMenu0.innerHTML += ""; + return ContextualMenu0; + }; + FabricTemplateLibrary.prototype.DatePicker = function () { + var DatePicker0 = document.createElement("div"); + DatePicker0.setAttribute("class", "ms-DatePicker"); + DatePicker0.innerHTML += " "; + var DatePicker0c1 = document.createElement("div"); + DatePicker0c1.setAttribute("class", "ms-TextField"); + DatePicker0c1.innerHTML += " "; + var DatePicker0c1c1 = document.createElement("label"); + DatePicker0c1c1.setAttribute("class", "ms-Label"); + DatePicker0c1c1.innerHTML += "Start date"; + DatePicker0c1.appendChild(DatePicker0c1c1); + DatePicker0c1.innerHTML += " "; + var DatePicker0c1c3 = document.createElement("i"); + DatePicker0c1c3.setAttribute("class", "ms-DatePicker-event ms-Icon ms-Icon--event"); + DatePicker0c1.appendChild(DatePicker0c1c3); + DatePicker0c1.innerHTML += " "; + var DatePicker0c1c5 = document.createElement("input"); + DatePicker0c1c5.setAttribute("class", "ms-TextField-field"); + DatePicker0c1c5.setAttribute("type", "text"); + DatePicker0c1c5.setAttribute("placeholder", "Select a date…"); + DatePicker0c1.appendChild(DatePicker0c1c5); + DatePicker0c1.innerHTML += " "; + DatePicker0.appendChild(DatePicker0c1); + DatePicker0.innerHTML += " "; + var DatePicker0c3 = document.createElement("div"); + DatePicker0c3.setAttribute("class", "ms-DatePicker-monthComponents"); + DatePicker0c3.innerHTML += " "; + var DatePicker0c3c1 = document.createElement("span"); + DatePicker0c3c1.setAttribute("class", "ms-DatePicker-nextMonth js-nextMonth"); + var DatePicker0c3c1c0 = document.createElement("i"); + DatePicker0c3c1c0.setAttribute("class", "ms-Icon ms-Icon--chevronRight"); + DatePicker0c3c1.appendChild(DatePicker0c3c1c0); + DatePicker0c3.appendChild(DatePicker0c3c1); + DatePicker0c3.innerHTML += " "; + var DatePicker0c3c3 = document.createElement("span"); + DatePicker0c3c3.setAttribute("class", "ms-DatePicker-prevMonth js-prevMonth"); + var DatePicker0c3c3c0 = document.createElement("i"); + DatePicker0c3c3c0.setAttribute("class", "ms-Icon ms-Icon--chevronLeft"); + DatePicker0c3c3.appendChild(DatePicker0c3c3c0); + DatePicker0c3.appendChild(DatePicker0c3c3); + DatePicker0c3.innerHTML += " "; + var DatePicker0c3c5 = document.createElement("div"); + DatePicker0c3c5.setAttribute("class", "ms-DatePicker-headerToggleView js-showMonthPicker"); + DatePicker0c3.appendChild(DatePicker0c3c5); + DatePicker0c3.innerHTML += " "; + DatePicker0.appendChild(DatePicker0c3); + DatePicker0.innerHTML += " "; + var DatePicker0c5 = document.createElement("span"); + DatePicker0c5.setAttribute("class", "ms-DatePicker-goToday js-goToday"); + DatePicker0c5.innerHTML += "Go to today"; + DatePicker0.appendChild(DatePicker0c5); + DatePicker0.innerHTML += " "; + var DatePicker0c7 = document.createElement("div"); + DatePicker0c7.setAttribute("class", "ms-DatePicker-monthPicker"); + DatePicker0c7.innerHTML += " "; + var DatePicker0c7c1 = document.createElement("div"); + DatePicker0c7c1.setAttribute("class", "ms-DatePicker-header"); + DatePicker0c7c1.innerHTML += " "; + var DatePicker0c7c1c1 = document.createElement("div"); + DatePicker0c7c1c1.setAttribute("class", "ms-DatePicker-yearComponents"); + DatePicker0c7c1c1.innerHTML += " "; + var DatePicker0c7c1c1c1 = document.createElement("span"); + DatePicker0c7c1c1c1.setAttribute("class", "ms-DatePicker-nextYear js-nextYear"); + var DatePicker0c7c1c1c1c0 = document.createElement("i"); + DatePicker0c7c1c1c1c0.setAttribute("class", "ms-Icon ms-Icon--chevronRight"); + DatePicker0c7c1c1c1.appendChild(DatePicker0c7c1c1c1c0); + DatePicker0c7c1c1.appendChild(DatePicker0c7c1c1c1); + DatePicker0c7c1c1.innerHTML += " "; + var DatePicker0c7c1c1c3 = document.createElement("span"); + DatePicker0c7c1c1c3.setAttribute("class", "ms-DatePicker-prevYear js-prevYear"); + var DatePicker0c7c1c1c3c0 = document.createElement("i"); + DatePicker0c7c1c1c3c0.setAttribute("class", "ms-Icon ms-Icon--chevronLeft"); + DatePicker0c7c1c1c3.appendChild(DatePicker0c7c1c1c3c0); + DatePicker0c7c1c1.appendChild(DatePicker0c7c1c1c3); + DatePicker0c7c1c1.innerHTML += " "; + DatePicker0c7c1.appendChild(DatePicker0c7c1c1); + DatePicker0c7c1.innerHTML += " "; + var DatePicker0c7c1c3 = document.createElement("div"); + DatePicker0c7c1c3.setAttribute("class", "ms-DatePicker-currentYear js-showYearPicker"); + DatePicker0c7c1.appendChild(DatePicker0c7c1c3); + DatePicker0c7c1.innerHTML += " "; + DatePicker0c7.appendChild(DatePicker0c7c1); + DatePicker0c7.innerHTML += " "; + var DatePicker0c7c3 = document.createElement("div"); + DatePicker0c7c3.setAttribute("class", "ms-DatePicker-optionGrid"); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c1 = document.createElement("span"); + DatePicker0c7c3c1.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c1.setAttribute("data-month", "0"); + DatePicker0c7c3c1.innerHTML += "Jan"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c1); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c3 = document.createElement("span"); + DatePicker0c7c3c3.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c3.setAttribute("data-month", "1"); + DatePicker0c7c3c3.innerHTML += "Feb"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c3); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c5 = document.createElement("span"); + DatePicker0c7c3c5.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c5.setAttribute("data-month", "2"); + DatePicker0c7c3c5.innerHTML += "Mar"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c5); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c7 = document.createElement("span"); + DatePicker0c7c3c7.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c7.setAttribute("data-month", "3"); + DatePicker0c7c3c7.innerHTML += "Apr"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c7); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c9 = document.createElement("span"); + DatePicker0c7c3c9.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c9.setAttribute("data-month", "4"); + DatePicker0c7c3c9.innerHTML += "May"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c9); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c11 = document.createElement("span"); + DatePicker0c7c3c11.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c11.setAttribute("data-month", "5"); + DatePicker0c7c3c11.innerHTML += "Jun"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c11); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c13 = document.createElement("span"); + DatePicker0c7c3c13.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c13.setAttribute("data-month", "6"); + DatePicker0c7c3c13.innerHTML += "Jul"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c13); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c15 = document.createElement("span"); + DatePicker0c7c3c15.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c15.setAttribute("data-month", "7"); + DatePicker0c7c3c15.innerHTML += "Aug"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c15); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c17 = document.createElement("span"); + DatePicker0c7c3c17.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c17.setAttribute("data-month", "8"); + DatePicker0c7c3c17.innerHTML += "Sep"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c17); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c19 = document.createElement("span"); + DatePicker0c7c3c19.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c19.setAttribute("data-month", "9"); + DatePicker0c7c3c19.innerHTML += "Oct"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c19); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c21 = document.createElement("span"); + DatePicker0c7c3c21.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c21.setAttribute("data-month", "10"); + DatePicker0c7c3c21.innerHTML += "Nov"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c21); + DatePicker0c7c3.innerHTML += " "; + var DatePicker0c7c3c23 = document.createElement("span"); + DatePicker0c7c3c23.setAttribute("class", "ms-DatePicker-monthOption js-changeDate"); + DatePicker0c7c3c23.setAttribute("data-month", "11"); + DatePicker0c7c3c23.innerHTML += "Dec"; + DatePicker0c7c3.appendChild(DatePicker0c7c3c23); + DatePicker0c7c3.innerHTML += " "; + DatePicker0c7.appendChild(DatePicker0c7c3); + DatePicker0c7.innerHTML += " "; + DatePicker0.appendChild(DatePicker0c7); + DatePicker0.innerHTML += " "; + var DatePicker0c9 = document.createElement("div"); + DatePicker0c9.setAttribute("class", "ms-DatePicker-yearPicker"); + DatePicker0c9.innerHTML += " "; + var DatePicker0c9c1 = document.createElement("div"); + DatePicker0c9c1.setAttribute("class", "ms-DatePicker-decadeComponents"); + DatePicker0c9c1.innerHTML += " "; + var DatePicker0c9c1c1 = document.createElement("span"); + DatePicker0c9c1c1.setAttribute("class", "ms-DatePicker-nextDecade js-nextDecade"); + var DatePicker0c9c1c1c0 = document.createElement("i"); + DatePicker0c9c1c1c0.setAttribute("class", "ms-Icon ms-Icon--chevronRight"); + DatePicker0c9c1c1.appendChild(DatePicker0c9c1c1c0); + DatePicker0c9c1.appendChild(DatePicker0c9c1c1); + DatePicker0c9c1.innerHTML += " "; + var DatePicker0c9c1c3 = document.createElement("span"); + DatePicker0c9c1c3.setAttribute("class", "ms-DatePicker-prevDecade js-prevDecade"); + var DatePicker0c9c1c3c0 = document.createElement("i"); + DatePicker0c9c1c3c0.setAttribute("class", "ms-Icon ms-Icon--chevronLeft"); + DatePicker0c9c1c3.appendChild(DatePicker0c9c1c3c0); + DatePicker0c9c1.appendChild(DatePicker0c9c1c3); + DatePicker0c9c1.innerHTML += " "; + DatePicker0c9.appendChild(DatePicker0c9c1); + DatePicker0c9.innerHTML += " "; + DatePicker0.appendChild(DatePicker0c9); + DatePicker0.innerHTML += ""; + return DatePicker0; + }; + FabricTemplateLibrary.prototype.Dialog = function () { + var Dialog0 = document.createElement("div"); + Dialog0.setAttribute("class", "ms-Dialog ms-Dialog--sample "); + Dialog0.innerHTML += " "; + var Dialog0c1 = document.createElement("button"); + Dialog0c1.setAttribute("class", "ms-Dialog-button ms-Dialog-buttonClose"); + Dialog0c1.innerHTML += " "; + var Dialog0c1c1 = document.createElement("i"); + Dialog0c1c1.setAttribute("class", "ms-Icon ms-Icon--x"); + Dialog0c1.appendChild(Dialog0c1c1); + Dialog0c1.innerHTML += " "; + Dialog0.appendChild(Dialog0c1); + Dialog0.innerHTML += " "; + var Dialog0c3 = document.createElement("div"); + Dialog0c3.setAttribute("class", "ms-Dialog-title"); + Dialog0c3.innerHTML += "All emails together"; + Dialog0.appendChild(Dialog0c3); + Dialog0.innerHTML += " "; + var Dialog0c5 = document.createElement("div"); + Dialog0c5.setAttribute("class", "ms-Dialog-content"); + Dialog0c5.innerHTML += " "; + var Dialog0c5c1 = document.createElement("p"); + Dialog0c5c1.setAttribute("class", "ms-Dialog-subText"); + Dialog0c5c1.innerHTML += "Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails."; + Dialog0c5.appendChild(Dialog0c5c1); + Dialog0c5.innerHTML += " "; + Dialog0c5.innerHTML += ""; + var Dialog0c5c5 = document.createElement("div"); + Dialog0c5c5.setAttribute("class", "ms-CheckBox"); + Dialog0c5c5.innerHTML += " "; + var Dialog0c5c5c1 = document.createElement("li"); + Dialog0c5c5c1.setAttribute("role", "checkbox"); + Dialog0c5c5c1.setAttribute("class", "ms-Choice-field "); + Dialog0c5c5c1.setAttribute("tabindex", "0"); + Dialog0c5c5c1.setAttribute("aria-checked", "false"); + Dialog0c5c5c1.setAttribute("name", "checkboxa"); + Dialog0c5c5c1.innerHTML += " "; + var Dialog0c5c5c1c1 = document.createElement("span"); + Dialog0c5c5c1c1.setAttribute("class", "ms-Label"); + Dialog0c5c5c1c1.innerHTML += "Option1"; + Dialog0c5c5c1.appendChild(Dialog0c5c5c1c1); + Dialog0c5c5c1.innerHTML += " "; + Dialog0c5c5.appendChild(Dialog0c5c5c1); + Dialog0c5c5.innerHTML += ""; + Dialog0c5.appendChild(Dialog0c5c5); + Dialog0c5.innerHTML += " "; + Dialog0c5.innerHTML += ""; + var Dialog0c5c9 = document.createElement("div"); + Dialog0c5c9.setAttribute("class", "ms-CheckBox"); + Dialog0c5c9.innerHTML += " "; + var Dialog0c5c9c1 = document.createElement("li"); + Dialog0c5c9c1.setAttribute("role", "checkbox"); + Dialog0c5c9c1.setAttribute("class", "ms-Choice-field "); + Dialog0c5c9c1.setAttribute("tabindex", "0"); + Dialog0c5c9c1.setAttribute("aria-checked", "false"); + Dialog0c5c9c1.setAttribute("name", "checkboxa"); + Dialog0c5c9c1.innerHTML += " "; + var Dialog0c5c9c1c1 = document.createElement("span"); + Dialog0c5c9c1c1.setAttribute("class", "ms-Label"); + Dialog0c5c9c1c1.innerHTML += "Option2"; + Dialog0c5c9c1.appendChild(Dialog0c5c9c1c1); + Dialog0c5c9c1.innerHTML += " "; + Dialog0c5c9.appendChild(Dialog0c5c9c1); + Dialog0c5c9.innerHTML += ""; + Dialog0c5.appendChild(Dialog0c5c9); + Dialog0c5.innerHTML += " "; + Dialog0.appendChild(Dialog0c5); + Dialog0.innerHTML += " "; + var Dialog0c7 = document.createElement("div"); + Dialog0c7.setAttribute("class", "ms-Dialog-actions"); + Dialog0c7.innerHTML += " "; + Dialog0c7.innerHTML += ""; + var Dialog0c7c3 = document.createElement("button"); + Dialog0c7c3.setAttribute("class", "ms-Button ms-Button--primary "); + Dialog0c7c3.innerHTML += " "; + var Dialog0c7c3c1 = document.createElement("span"); + Dialog0c7c3c1.setAttribute("class", "ms-Button-label"); + Dialog0c7c3c1.innerHTML += "Save"; + Dialog0c7c3.appendChild(Dialog0c7c3c1); + Dialog0c7c3.innerHTML += ""; + Dialog0c7.appendChild(Dialog0c7c3); + Dialog0c7.innerHTML += " "; + Dialog0c7.innerHTML += ""; + var Dialog0c7c7 = document.createElement("button"); + Dialog0c7c7.setAttribute("class", "ms-Button "); + Dialog0c7c7.innerHTML += " "; + var Dialog0c7c7c1 = document.createElement("span"); + Dialog0c7c7c1.setAttribute("class", "ms-Button-label"); + Dialog0c7c7c1.innerHTML += "Cancel"; + Dialog0c7c7.appendChild(Dialog0c7c7c1); + Dialog0c7c7.innerHTML += ""; + Dialog0c7.appendChild(Dialog0c7c7); + Dialog0c7.innerHTML += " "; + Dialog0.appendChild(Dialog0c7); + Dialog0.innerHTML += ""; + return Dialog0; + }; + FabricTemplateLibrary.prototype.DialogHost = function () { + var DialogHost0 = document.createElement("div"); + DialogHost0.setAttribute("class", "ms-DialogHost "); + DialogHost0.innerHTML += " "; + var DialogHost0c1 = document.createElement("div"); + DialogHost0c1.setAttribute("class", "ms-DialogHost-main"); + DialogHost0c1.innerHTML += " "; + DialogHost0.appendChild(DialogHost0c1); + DialogHost0.innerHTML += ""; + return DialogHost0; + }; + FabricTemplateLibrary.prototype.Dropdown = function () { + var Dropdown0 = document.createElement("div"); + Dropdown0.setAttribute("class", "ms-Dropdown "); + Dropdown0.setAttribute("tabindex", "0"); + Dropdown0.innerHTML += " "; + var Dropdown0c1 = document.createElement("label"); + Dropdown0c1.setAttribute("class", "ms-Label"); + Dropdown0c1.innerHTML += "Dropdown label"; + Dropdown0.appendChild(Dropdown0c1); + Dropdown0.innerHTML += " "; + var Dropdown0c3 = document.createElement("i"); + Dropdown0c3.setAttribute("class", "ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"); + Dropdown0.appendChild(Dropdown0c3); + Dropdown0.innerHTML += " "; + var Dropdown0c5 = document.createElement("select"); + Dropdown0c5.setAttribute("class", "ms-Dropdown-select"); + Dropdown0c5.innerHTML += " "; + var Dropdown0c5c1 = document.createElement("option"); + Dropdown0c5c1.innerHTML += "Choose a sound&hellip;"; + Dropdown0c5.appendChild(Dropdown0c5c1); + Dropdown0c5.innerHTML += " "; + var Dropdown0c5c3 = document.createElement("option"); + Dropdown0c5c3.innerHTML += "Dog barking"; + Dropdown0c5.appendChild(Dropdown0c5c3); + Dropdown0c5.innerHTML += " "; + var Dropdown0c5c5 = document.createElement("option"); + Dropdown0c5c5.innerHTML += "Wind blowing"; + Dropdown0c5.appendChild(Dropdown0c5c5); + Dropdown0c5.innerHTML += " "; + var Dropdown0c5c7 = document.createElement("option"); + Dropdown0c5c7.innerHTML += "Duck quacking"; + Dropdown0c5.appendChild(Dropdown0c5c7); + Dropdown0c5.innerHTML += " "; + var Dropdown0c5c9 = document.createElement("option"); + Dropdown0c5c9.innerHTML += "Cow mooing"; + Dropdown0c5.appendChild(Dropdown0c5c9); + Dropdown0c5.innerHTML += " "; + Dropdown0.appendChild(Dropdown0c5); + Dropdown0.innerHTML += ""; + return Dropdown0; + }; + FabricTemplateLibrary.prototype.FacePile = function () { + var FacePile0 = document.createElement("div"); + FacePile0.setAttribute("class", "ms-FacePile"); + FacePile0.innerHTML += " "; + var FacePile0c1 = document.createElement("button"); + FacePile0c1.setAttribute("class", "ms-FacePile-addButton ms-FacePile-addButton--addPerson js-addPerson"); + FacePile0c1.innerHTML += " "; + var FacePile0c1c1 = document.createElement("i"); + FacePile0c1c1.setAttribute("class", "ms-FacePile-addPersonIcon ms-Icon ms-Icon--personAdd"); + FacePile0c1.appendChild(FacePile0c1c1); + FacePile0c1.innerHTML += " "; + FacePile0.appendChild(FacePile0c1); + FacePile0.innerHTML += " "; + FacePile0.innerHTML += " "; + var FacePile0c5 = document.createElement("div"); + FacePile0c5.setAttribute("class", "ms-Persona "); + FacePile0c5.innerHTML += " "; + var FacePile0c5c1 = document.createElement("div"); + FacePile0c5c1.setAttribute("class", "ms-Persona-imageArea"); + FacePile0c5c1.innerHTML += " "; + FacePile0c5.appendChild(FacePile0c5c1); + FacePile0c5.innerHTML += " "; + var FacePile0c5c3 = document.createElement("div"); + FacePile0c5c3.setAttribute("class", "ms-Persona-presence"); + FacePile0c5c3.innerHTML += " "; + FacePile0c5.appendChild(FacePile0c5c3); + FacePile0c5.innerHTML += " "; + var FacePile0c5c5 = document.createElement("div"); + FacePile0c5c5.setAttribute("class", "ms-Persona-details"); + FacePile0c5c5.innerHTML += " "; + FacePile0c5.appendChild(FacePile0c5c5); + FacePile0c5.innerHTML += " "; + FacePile0.appendChild(FacePile0c5); + FacePile0.innerHTML += " "; + FacePile0.innerHTML += " "; + var FacePile0c9 = document.createElement("div"); + FacePile0c9.setAttribute("class", "ms-Persona "); + FacePile0c9.innerHTML += " "; + var FacePile0c9c1 = document.createElement("div"); + FacePile0c9c1.setAttribute("class", "ms-Persona-imageArea"); + FacePile0c9c1.innerHTML += " "; + FacePile0c9.appendChild(FacePile0c9c1); + FacePile0c9.innerHTML += " "; + var FacePile0c9c3 = document.createElement("div"); + FacePile0c9c3.setAttribute("class", "ms-Persona-presence"); + FacePile0c9c3.innerHTML += " "; + FacePile0c9.appendChild(FacePile0c9c3); + FacePile0c9.innerHTML += " "; + var FacePile0c9c5 = document.createElement("div"); + FacePile0c9c5.setAttribute("class", "ms-Persona-details"); + FacePile0c9c5.innerHTML += " "; + FacePile0c9.appendChild(FacePile0c9c5); + FacePile0c9.innerHTML += " "; + FacePile0.appendChild(FacePile0c9); + FacePile0.innerHTML += " "; + FacePile0.innerHTML += " "; + var FacePile0c13 = document.createElement("div"); + FacePile0c13.setAttribute("class", "ms-Persona "); + FacePile0c13.innerHTML += " "; + var FacePile0c13c1 = document.createElement("div"); + FacePile0c13c1.setAttribute("class", "ms-Persona-imageArea"); + FacePile0c13c1.innerHTML += " "; + FacePile0c13.appendChild(FacePile0c13c1); + FacePile0c13.innerHTML += " "; + var FacePile0c13c3 = document.createElement("div"); + FacePile0c13c3.setAttribute("class", "ms-Persona-presence"); + FacePile0c13c3.innerHTML += " "; + FacePile0c13.appendChild(FacePile0c13c3); + FacePile0c13.innerHTML += " "; + var FacePile0c13c5 = document.createElement("div"); + FacePile0c13c5.setAttribute("class", "ms-Persona-details"); + FacePile0c13c5.innerHTML += " "; + FacePile0c13.appendChild(FacePile0c13c5); + FacePile0c13.innerHTML += " "; + FacePile0.appendChild(FacePile0c13); + FacePile0.innerHTML += " "; + var FacePile0c15 = document.createElement("button"); + FacePile0c15.setAttribute("class", "ms-FacePile-addButton ms-FacePile-addButton--overflow js-overflowPanel"); + FacePile0c15.innerHTML += " "; + var FacePile0c15c1 = document.createElement("span"); + FacePile0c15c1.setAttribute("class", "ms-FacePile-overflowText"); + FacePile0c15c1.innerHTML += "+3"; + FacePile0c15.appendChild(FacePile0c15c1); + FacePile0c15.innerHTML += " "; + FacePile0.appendChild(FacePile0c15); + FacePile0.innerHTML += ""; + return FacePile0; + }; + FabricTemplateLibrary.prototype.Label = function () { + var Label0 = document.createElement("label"); + Label0.setAttribute("class", "ms-Label "); + Label0.innerHTML += "Name"; + return Label0; + }; + FabricTemplateLibrary.prototype.Link = function () { + var Link0 = document.createElement("a"); + Link0.setAttribute("class", "ms-Link "); + Link0.innerHTML += "Example Link"; + return Link0; + }; + FabricTemplateLibrary.prototype.List = function () { + var List0 = document.createElement("ul"); + List0.setAttribute("class", "ms-List "); + List0.innerHTML += " "; + List0.innerHTML += " "; + var List0c3 = document.createElement("li"); + List0c3.setAttribute("class", "ms-ListItem is-unread is-selectable"); + List0c3.setAttribute("tabindex", "0"); + List0c3.innerHTML += " "; + var List0c3c1 = document.createElement("span"); + List0c3c1.setAttribute("class", "ms-ListItem-primaryText"); + List0c3c1.innerHTML += "Alton Lafferty"; + List0c3.appendChild(List0c3c1); + List0c3.innerHTML += " "; + var List0c3c3 = document.createElement("span"); + List0c3c3.setAttribute("class", "ms-ListItem-secondaryText"); + List0c3c3.innerHTML += "Meeting notes"; + List0c3.appendChild(List0c3c3); + List0c3.innerHTML += " "; + var List0c3c5 = document.createElement("span"); + List0c3c5.setAttribute("class", "ms-ListItem-tertiaryText"); + List0c3c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + List0c3.appendChild(List0c3c5); + List0c3.innerHTML += " "; + var List0c3c7 = document.createElement("span"); + List0c3c7.setAttribute("class", "ms-ListItem-metaText"); + List0c3c7.innerHTML += "2:42p"; + List0c3.appendChild(List0c3c7); + List0c3.innerHTML += " "; + var List0c3c9 = document.createElement("div"); + List0c3c9.setAttribute("class", "ms-ListItem-selectionTarget"); + List0c3.appendChild(List0c3c9); + List0c3.innerHTML += " "; + var List0c3c11 = document.createElement("div"); + List0c3c11.setAttribute("class", "ms-ListItem-actions"); + List0c3c11.innerHTML += " "; + var List0c3c11c1 = document.createElement("div"); + List0c3c11c1.setAttribute("class", "ms-ListItem-action"); + var List0c3c11c1c0 = document.createElement("i"); + List0c3c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + List0c3c11c1.appendChild(List0c3c11c1c0); + List0c3c11.appendChild(List0c3c11c1); + List0c3c11.innerHTML += " "; + var List0c3c11c3 = document.createElement("div"); + List0c3c11c3.setAttribute("class", "ms-ListItem-action"); + var List0c3c11c3c0 = document.createElement("i"); + List0c3c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + List0c3c11c3.appendChild(List0c3c11c3c0); + List0c3c11.appendChild(List0c3c11c3); + List0c3c11.innerHTML += " "; + var List0c3c11c5 = document.createElement("div"); + List0c3c11c5.setAttribute("class", "ms-ListItem-action"); + var List0c3c11c5c0 = document.createElement("i"); + List0c3c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + List0c3c11c5.appendChild(List0c3c11c5c0); + List0c3c11.appendChild(List0c3c11c5); + List0c3c11.innerHTML += " "; + var List0c3c11c7 = document.createElement("div"); + List0c3c11c7.setAttribute("class", "ms-ListItem-action"); + var List0c3c11c7c0 = document.createElement("i"); + List0c3c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + List0c3c11c7.appendChild(List0c3c11c7c0); + List0c3c11.appendChild(List0c3c11c7); + List0c3c11.innerHTML += " "; + List0c3.appendChild(List0c3c11); + List0c3.innerHTML += " "; + List0.appendChild(List0c3); + List0.innerHTML += " "; + List0.innerHTML += " "; + var List0c7 = document.createElement("li"); + List0c7.setAttribute("class", "ms-ListItem is-unread is-selectable"); + List0c7.setAttribute("tabindex", "0"); + List0c7.innerHTML += " "; + var List0c7c1 = document.createElement("span"); + List0c7c1.setAttribute("class", "ms-ListItem-primaryText"); + List0c7c1.innerHTML += "Alton Lafferty"; + List0c7.appendChild(List0c7c1); + List0c7.innerHTML += " "; + var List0c7c3 = document.createElement("span"); + List0c7c3.setAttribute("class", "ms-ListItem-secondaryText"); + List0c7c3.innerHTML += "Meeting notes"; + List0c7.appendChild(List0c7c3); + List0c7.innerHTML += " "; + var List0c7c5 = document.createElement("span"); + List0c7c5.setAttribute("class", "ms-ListItem-tertiaryText"); + List0c7c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + List0c7.appendChild(List0c7c5); + List0c7.innerHTML += " "; + var List0c7c7 = document.createElement("span"); + List0c7c7.setAttribute("class", "ms-ListItem-metaText"); + List0c7c7.innerHTML += "2:42p"; + List0c7.appendChild(List0c7c7); + List0c7.innerHTML += " "; + var List0c7c9 = document.createElement("div"); + List0c7c9.setAttribute("class", "ms-ListItem-selectionTarget"); + List0c7.appendChild(List0c7c9); + List0c7.innerHTML += " "; + var List0c7c11 = document.createElement("div"); + List0c7c11.setAttribute("class", "ms-ListItem-actions"); + List0c7c11.innerHTML += " "; + var List0c7c11c1 = document.createElement("div"); + List0c7c11c1.setAttribute("class", "ms-ListItem-action"); + var List0c7c11c1c0 = document.createElement("i"); + List0c7c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + List0c7c11c1.appendChild(List0c7c11c1c0); + List0c7c11.appendChild(List0c7c11c1); + List0c7c11.innerHTML += " "; + var List0c7c11c3 = document.createElement("div"); + List0c7c11c3.setAttribute("class", "ms-ListItem-action"); + var List0c7c11c3c0 = document.createElement("i"); + List0c7c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + List0c7c11c3.appendChild(List0c7c11c3c0); + List0c7c11.appendChild(List0c7c11c3); + List0c7c11.innerHTML += " "; + var List0c7c11c5 = document.createElement("div"); + List0c7c11c5.setAttribute("class", "ms-ListItem-action"); + var List0c7c11c5c0 = document.createElement("i"); + List0c7c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + List0c7c11c5.appendChild(List0c7c11c5c0); + List0c7c11.appendChild(List0c7c11c5); + List0c7c11.innerHTML += " "; + var List0c7c11c7 = document.createElement("div"); + List0c7c11c7.setAttribute("class", "ms-ListItem-action"); + var List0c7c11c7c0 = document.createElement("i"); + List0c7c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + List0c7c11c7.appendChild(List0c7c11c7c0); + List0c7c11.appendChild(List0c7c11c7); + List0c7c11.innerHTML += " "; + List0c7.appendChild(List0c7c11); + List0c7.innerHTML += " "; + List0.appendChild(List0c7); + List0.innerHTML += " "; + List0.innerHTML += " "; + var List0c11 = document.createElement("li"); + List0c11.setAttribute("class", "ms-ListItem is-unread is-selectable"); + List0c11.setAttribute("tabindex", "0"); + List0c11.innerHTML += " "; + var List0c11c1 = document.createElement("span"); + List0c11c1.setAttribute("class", "ms-ListItem-primaryText"); + List0c11c1.innerHTML += "Alton Lafferty"; + List0c11.appendChild(List0c11c1); + List0c11.innerHTML += " "; + var List0c11c3 = document.createElement("span"); + List0c11c3.setAttribute("class", "ms-ListItem-secondaryText"); + List0c11c3.innerHTML += "Meeting notes"; + List0c11.appendChild(List0c11c3); + List0c11.innerHTML += " "; + var List0c11c5 = document.createElement("span"); + List0c11c5.setAttribute("class", "ms-ListItem-tertiaryText"); + List0c11c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + List0c11.appendChild(List0c11c5); + List0c11.innerHTML += " "; + var List0c11c7 = document.createElement("span"); + List0c11c7.setAttribute("class", "ms-ListItem-metaText"); + List0c11c7.innerHTML += "2:42p"; + List0c11.appendChild(List0c11c7); + List0c11.innerHTML += " "; + var List0c11c9 = document.createElement("div"); + List0c11c9.setAttribute("class", "ms-ListItem-selectionTarget"); + List0c11.appendChild(List0c11c9); + List0c11.innerHTML += " "; + var List0c11c11 = document.createElement("div"); + List0c11c11.setAttribute("class", "ms-ListItem-actions"); + List0c11c11.innerHTML += " "; + var List0c11c11c1 = document.createElement("div"); + List0c11c11c1.setAttribute("class", "ms-ListItem-action"); + var List0c11c11c1c0 = document.createElement("i"); + List0c11c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + List0c11c11c1.appendChild(List0c11c11c1c0); + List0c11c11.appendChild(List0c11c11c1); + List0c11c11.innerHTML += " "; + var List0c11c11c3 = document.createElement("div"); + List0c11c11c3.setAttribute("class", "ms-ListItem-action"); + var List0c11c11c3c0 = document.createElement("i"); + List0c11c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + List0c11c11c3.appendChild(List0c11c11c3c0); + List0c11c11.appendChild(List0c11c11c3); + List0c11c11.innerHTML += " "; + var List0c11c11c5 = document.createElement("div"); + List0c11c11c5.setAttribute("class", "ms-ListItem-action"); + var List0c11c11c5c0 = document.createElement("i"); + List0c11c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + List0c11c11c5.appendChild(List0c11c11c5c0); + List0c11c11.appendChild(List0c11c11c5); + List0c11c11.innerHTML += " "; + var List0c11c11c7 = document.createElement("div"); + List0c11c11c7.setAttribute("class", "ms-ListItem-action"); + var List0c11c11c7c0 = document.createElement("i"); + List0c11c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + List0c11c11c7.appendChild(List0c11c11c7c0); + List0c11c11.appendChild(List0c11c11c7); + List0c11c11.innerHTML += " "; + List0c11.appendChild(List0c11c11); + List0c11.innerHTML += " "; + List0.appendChild(List0c11); + List0.innerHTML += " "; + List0.innerHTML += " "; + var List0c15 = document.createElement("li"); + List0c15.setAttribute("class", "ms-ListItem is-unread is-selectable"); + List0c15.setAttribute("tabindex", "0"); + List0c15.innerHTML += " "; + var List0c15c1 = document.createElement("span"); + List0c15c1.setAttribute("class", "ms-ListItem-primaryText"); + List0c15c1.innerHTML += "Alton Lafferty"; + List0c15.appendChild(List0c15c1); + List0c15.innerHTML += " "; + var List0c15c3 = document.createElement("span"); + List0c15c3.setAttribute("class", "ms-ListItem-secondaryText"); + List0c15c3.innerHTML += "Meeting notes"; + List0c15.appendChild(List0c15c3); + List0c15.innerHTML += " "; + var List0c15c5 = document.createElement("span"); + List0c15c5.setAttribute("class", "ms-ListItem-tertiaryText"); + List0c15c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + List0c15.appendChild(List0c15c5); + List0c15.innerHTML += " "; + var List0c15c7 = document.createElement("span"); + List0c15c7.setAttribute("class", "ms-ListItem-metaText"); + List0c15c7.innerHTML += "2:42p"; + List0c15.appendChild(List0c15c7); + List0c15.innerHTML += " "; + var List0c15c9 = document.createElement("div"); + List0c15c9.setAttribute("class", "ms-ListItem-selectionTarget"); + List0c15.appendChild(List0c15c9); + List0c15.innerHTML += " "; + var List0c15c11 = document.createElement("div"); + List0c15c11.setAttribute("class", "ms-ListItem-actions"); + List0c15c11.innerHTML += " "; + var List0c15c11c1 = document.createElement("div"); + List0c15c11c1.setAttribute("class", "ms-ListItem-action"); + var List0c15c11c1c0 = document.createElement("i"); + List0c15c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + List0c15c11c1.appendChild(List0c15c11c1c0); + List0c15c11.appendChild(List0c15c11c1); + List0c15c11.innerHTML += " "; + var List0c15c11c3 = document.createElement("div"); + List0c15c11c3.setAttribute("class", "ms-ListItem-action"); + var List0c15c11c3c0 = document.createElement("i"); + List0c15c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + List0c15c11c3.appendChild(List0c15c11c3c0); + List0c15c11.appendChild(List0c15c11c3); + List0c15c11.innerHTML += " "; + var List0c15c11c5 = document.createElement("div"); + List0c15c11c5.setAttribute("class", "ms-ListItem-action"); + var List0c15c11c5c0 = document.createElement("i"); + List0c15c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + List0c15c11c5.appendChild(List0c15c11c5c0); + List0c15c11.appendChild(List0c15c11c5); + List0c15c11.innerHTML += " "; + var List0c15c11c7 = document.createElement("div"); + List0c15c11c7.setAttribute("class", "ms-ListItem-action"); + var List0c15c11c7c0 = document.createElement("i"); + List0c15c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + List0c15c11c7.appendChild(List0c15c11c7c0); + List0c15c11.appendChild(List0c15c11c7); + List0c15c11.innerHTML += " "; + List0c15.appendChild(List0c15c11); + List0c15.innerHTML += " "; + List0.appendChild(List0c15); + List0.innerHTML += " "; + List0.innerHTML += " "; + var List0c19 = document.createElement("li"); + List0c19.setAttribute("class", "ms-ListItem is-unread is-selectable"); + List0c19.setAttribute("tabindex", "0"); + List0c19.innerHTML += " "; + var List0c19c1 = document.createElement("span"); + List0c19c1.setAttribute("class", "ms-ListItem-primaryText"); + List0c19c1.innerHTML += "Alton Lafferty"; + List0c19.appendChild(List0c19c1); + List0c19.innerHTML += " "; + var List0c19c3 = document.createElement("span"); + List0c19c3.setAttribute("class", "ms-ListItem-secondaryText"); + List0c19c3.innerHTML += "Meeting notes"; + List0c19.appendChild(List0c19c3); + List0c19.innerHTML += " "; + var List0c19c5 = document.createElement("span"); + List0c19c5.setAttribute("class", "ms-ListItem-tertiaryText"); + List0c19c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + List0c19.appendChild(List0c19c5); + List0c19.innerHTML += " "; + var List0c19c7 = document.createElement("span"); + List0c19c7.setAttribute("class", "ms-ListItem-metaText"); + List0c19c7.innerHTML += "2:42p"; + List0c19.appendChild(List0c19c7); + List0c19.innerHTML += " "; + var List0c19c9 = document.createElement("div"); + List0c19c9.setAttribute("class", "ms-ListItem-selectionTarget"); + List0c19.appendChild(List0c19c9); + List0c19.innerHTML += " "; + var List0c19c11 = document.createElement("div"); + List0c19c11.setAttribute("class", "ms-ListItem-actions"); + List0c19c11.innerHTML += " "; + var List0c19c11c1 = document.createElement("div"); + List0c19c11c1.setAttribute("class", "ms-ListItem-action"); + var List0c19c11c1c0 = document.createElement("i"); + List0c19c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + List0c19c11c1.appendChild(List0c19c11c1c0); + List0c19c11.appendChild(List0c19c11c1); + List0c19c11.innerHTML += " "; + var List0c19c11c3 = document.createElement("div"); + List0c19c11c3.setAttribute("class", "ms-ListItem-action"); + var List0c19c11c3c0 = document.createElement("i"); + List0c19c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + List0c19c11c3.appendChild(List0c19c11c3c0); + List0c19c11.appendChild(List0c19c11c3); + List0c19c11.innerHTML += " "; + var List0c19c11c5 = document.createElement("div"); + List0c19c11c5.setAttribute("class", "ms-ListItem-action"); + var List0c19c11c5c0 = document.createElement("i"); + List0c19c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + List0c19c11c5.appendChild(List0c19c11c5c0); + List0c19c11.appendChild(List0c19c11c5); + List0c19c11.innerHTML += " "; + var List0c19c11c7 = document.createElement("div"); + List0c19c11c7.setAttribute("class", "ms-ListItem-action"); + var List0c19c11c7c0 = document.createElement("i"); + List0c19c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + List0c19c11c7.appendChild(List0c19c11c7c0); + List0c19c11.appendChild(List0c19c11c7); + List0c19c11.innerHTML += " "; + List0c19.appendChild(List0c19c11); + List0c19.innerHTML += " "; + List0.appendChild(List0c19); + List0.innerHTML += " "; + List0.innerHTML += " "; + var List0c23 = document.createElement("li"); + List0c23.setAttribute("class", "ms-ListItem is-unread is-selectable"); + List0c23.setAttribute("tabindex", "0"); + List0c23.innerHTML += " "; + var List0c23c1 = document.createElement("span"); + List0c23c1.setAttribute("class", "ms-ListItem-primaryText"); + List0c23c1.innerHTML += "Alton Lafferty"; + List0c23.appendChild(List0c23c1); + List0c23.innerHTML += " "; + var List0c23c3 = document.createElement("span"); + List0c23c3.setAttribute("class", "ms-ListItem-secondaryText"); + List0c23c3.innerHTML += "Meeting notes"; + List0c23.appendChild(List0c23c3); + List0c23.innerHTML += " "; + var List0c23c5 = document.createElement("span"); + List0c23c5.setAttribute("class", "ms-ListItem-tertiaryText"); + List0c23c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + List0c23.appendChild(List0c23c5); + List0c23.innerHTML += " "; + var List0c23c7 = document.createElement("span"); + List0c23c7.setAttribute("class", "ms-ListItem-metaText"); + List0c23c7.innerHTML += "2:42p"; + List0c23.appendChild(List0c23c7); + List0c23.innerHTML += " "; + var List0c23c9 = document.createElement("div"); + List0c23c9.setAttribute("class", "ms-ListItem-selectionTarget"); + List0c23.appendChild(List0c23c9); + List0c23.innerHTML += " "; + var List0c23c11 = document.createElement("div"); + List0c23c11.setAttribute("class", "ms-ListItem-actions"); + List0c23c11.innerHTML += " "; + var List0c23c11c1 = document.createElement("div"); + List0c23c11c1.setAttribute("class", "ms-ListItem-action"); + var List0c23c11c1c0 = document.createElement("i"); + List0c23c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + List0c23c11c1.appendChild(List0c23c11c1c0); + List0c23c11.appendChild(List0c23c11c1); + List0c23c11.innerHTML += " "; + var List0c23c11c3 = document.createElement("div"); + List0c23c11c3.setAttribute("class", "ms-ListItem-action"); + var List0c23c11c3c0 = document.createElement("i"); + List0c23c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + List0c23c11c3.appendChild(List0c23c11c3c0); + List0c23c11.appendChild(List0c23c11c3); + List0c23c11.innerHTML += " "; + var List0c23c11c5 = document.createElement("div"); + List0c23c11c5.setAttribute("class", "ms-ListItem-action"); + var List0c23c11c5c0 = document.createElement("i"); + List0c23c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + List0c23c11c5.appendChild(List0c23c11c5c0); + List0c23c11.appendChild(List0c23c11c5); + List0c23c11.innerHTML += " "; + var List0c23c11c7 = document.createElement("div"); + List0c23c11c7.setAttribute("class", "ms-ListItem-action"); + var List0c23c11c7c0 = document.createElement("i"); + List0c23c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + List0c23c11c7.appendChild(List0c23c11c7c0); + List0c23c11.appendChild(List0c23c11c7); + List0c23c11.innerHTML += " "; + List0c23.appendChild(List0c23c11); + List0c23.innerHTML += " "; + List0.appendChild(List0c23); + List0.innerHTML += " "; + List0.innerHTML += " "; + var List0c27 = document.createElement("li"); + List0c27.setAttribute("class", "ms-ListItem is-unread is-selectable"); + List0c27.setAttribute("tabindex", "0"); + List0c27.innerHTML += " "; + var List0c27c1 = document.createElement("span"); + List0c27c1.setAttribute("class", "ms-ListItem-primaryText"); + List0c27c1.innerHTML += "Alton Lafferty"; + List0c27.appendChild(List0c27c1); + List0c27.innerHTML += " "; + var List0c27c3 = document.createElement("span"); + List0c27c3.setAttribute("class", "ms-ListItem-secondaryText"); + List0c27c3.innerHTML += "Meeting notes"; + List0c27.appendChild(List0c27c3); + List0c27.innerHTML += " "; + var List0c27c5 = document.createElement("span"); + List0c27c5.setAttribute("class", "ms-ListItem-tertiaryText"); + List0c27c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + List0c27.appendChild(List0c27c5); + List0c27.innerHTML += " "; + var List0c27c7 = document.createElement("span"); + List0c27c7.setAttribute("class", "ms-ListItem-metaText"); + List0c27c7.innerHTML += "2:42p"; + List0c27.appendChild(List0c27c7); + List0c27.innerHTML += " "; + var List0c27c9 = document.createElement("div"); + List0c27c9.setAttribute("class", "ms-ListItem-selectionTarget"); + List0c27.appendChild(List0c27c9); + List0c27.innerHTML += " "; + var List0c27c11 = document.createElement("div"); + List0c27c11.setAttribute("class", "ms-ListItem-actions"); + List0c27c11.innerHTML += " "; + var List0c27c11c1 = document.createElement("div"); + List0c27c11c1.setAttribute("class", "ms-ListItem-action"); + var List0c27c11c1c0 = document.createElement("i"); + List0c27c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + List0c27c11c1.appendChild(List0c27c11c1c0); + List0c27c11.appendChild(List0c27c11c1); + List0c27c11.innerHTML += " "; + var List0c27c11c3 = document.createElement("div"); + List0c27c11c3.setAttribute("class", "ms-ListItem-action"); + var List0c27c11c3c0 = document.createElement("i"); + List0c27c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + List0c27c11c3.appendChild(List0c27c11c3c0); + List0c27c11.appendChild(List0c27c11c3); + List0c27c11.innerHTML += " "; + var List0c27c11c5 = document.createElement("div"); + List0c27c11c5.setAttribute("class", "ms-ListItem-action"); + var List0c27c11c5c0 = document.createElement("i"); + List0c27c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + List0c27c11c5.appendChild(List0c27c11c5c0); + List0c27c11.appendChild(List0c27c11c5); + List0c27c11.innerHTML += " "; + var List0c27c11c7 = document.createElement("div"); + List0c27c11c7.setAttribute("class", "ms-ListItem-action"); + var List0c27c11c7c0 = document.createElement("i"); + List0c27c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + List0c27c11c7.appendChild(List0c27c11c7c0); + List0c27c11.appendChild(List0c27c11c7); + List0c27c11.innerHTML += " "; + List0c27.appendChild(List0c27c11); + List0c27.innerHTML += " "; + List0.appendChild(List0c27); + List0.innerHTML += " "; + List0.innerHTML += " "; + var List0c31 = document.createElement("li"); + List0c31.setAttribute("class", "ms-ListItem is-unread is-selectable"); + List0c31.setAttribute("tabindex", "0"); + List0c31.innerHTML += " "; + var List0c31c1 = document.createElement("span"); + List0c31c1.setAttribute("class", "ms-ListItem-primaryText"); + List0c31c1.innerHTML += "Alton Lafferty"; + List0c31.appendChild(List0c31c1); + List0c31.innerHTML += " "; + var List0c31c3 = document.createElement("span"); + List0c31c3.setAttribute("class", "ms-ListItem-secondaryText"); + List0c31c3.innerHTML += "Meeting notes"; + List0c31.appendChild(List0c31c3); + List0c31.innerHTML += " "; + var List0c31c5 = document.createElement("span"); + List0c31c5.setAttribute("class", "ms-ListItem-tertiaryText"); + List0c31c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + List0c31.appendChild(List0c31c5); + List0c31.innerHTML += " "; + var List0c31c7 = document.createElement("span"); + List0c31c7.setAttribute("class", "ms-ListItem-metaText"); + List0c31c7.innerHTML += "2:42p"; + List0c31.appendChild(List0c31c7); + List0c31.innerHTML += " "; + var List0c31c9 = document.createElement("div"); + List0c31c9.setAttribute("class", "ms-ListItem-selectionTarget"); + List0c31.appendChild(List0c31c9); + List0c31.innerHTML += " "; + var List0c31c11 = document.createElement("div"); + List0c31c11.setAttribute("class", "ms-ListItem-actions"); + List0c31c11.innerHTML += " "; + var List0c31c11c1 = document.createElement("div"); + List0c31c11c1.setAttribute("class", "ms-ListItem-action"); + var List0c31c11c1c0 = document.createElement("i"); + List0c31c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + List0c31c11c1.appendChild(List0c31c11c1c0); + List0c31c11.appendChild(List0c31c11c1); + List0c31c11.innerHTML += " "; + var List0c31c11c3 = document.createElement("div"); + List0c31c11c3.setAttribute("class", "ms-ListItem-action"); + var List0c31c11c3c0 = document.createElement("i"); + List0c31c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + List0c31c11c3.appendChild(List0c31c11c3c0); + List0c31c11.appendChild(List0c31c11c3); + List0c31c11.innerHTML += " "; + var List0c31c11c5 = document.createElement("div"); + List0c31c11c5.setAttribute("class", "ms-ListItem-action"); + var List0c31c11c5c0 = document.createElement("i"); + List0c31c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + List0c31c11c5.appendChild(List0c31c11c5c0); + List0c31c11.appendChild(List0c31c11c5); + List0c31c11.innerHTML += " "; + var List0c31c11c7 = document.createElement("div"); + List0c31c11c7.setAttribute("class", "ms-ListItem-action"); + var List0c31c11c7c0 = document.createElement("i"); + List0c31c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + List0c31c11c7.appendChild(List0c31c11c7c0); + List0c31c11.appendChild(List0c31c11c7); + List0c31c11.innerHTML += " "; + List0c31.appendChild(List0c31c11); + List0c31.innerHTML += " "; + List0.appendChild(List0c31); + List0.innerHTML += " "; + return List0; + }; + FabricTemplateLibrary.prototype.ListItem = function () { + var ListItem0 = document.createElement("li"); + ListItem0.setAttribute("class", "ms-ListItem "); + ListItem0.setAttribute("tabindex", "0"); + ListItem0.innerHTML += " "; + var ListItem0c1 = document.createElement("span"); + ListItem0c1.setAttribute("class", "ms-ListItem-primaryText"); + ListItem0c1.innerHTML += "Alton Lafferty"; + ListItem0.appendChild(ListItem0c1); + ListItem0.innerHTML += " "; + var ListItem0c3 = document.createElement("span"); + ListItem0c3.setAttribute("class", "ms-ListItem-secondaryText"); + ListItem0c3.innerHTML += "Meeting notes"; + ListItem0.appendChild(ListItem0c3); + ListItem0.innerHTML += " "; + var ListItem0c5 = document.createElement("span"); + ListItem0c5.setAttribute("class", "ms-ListItem-tertiaryText"); + ListItem0c5.innerHTML += "Today we discussed the importance of a, b, and c in regards to d."; + ListItem0.appendChild(ListItem0c5); + ListItem0.innerHTML += " "; + var ListItem0c7 = document.createElement("span"); + ListItem0c7.setAttribute("class", "ms-ListItem-metaText"); + ListItem0c7.innerHTML += "2:42p"; + ListItem0.appendChild(ListItem0c7); + ListItem0.innerHTML += " "; + var ListItem0c9 = document.createElement("div"); + ListItem0c9.setAttribute("class", "ms-ListItem-selectionTarget"); + ListItem0.appendChild(ListItem0c9); + ListItem0.innerHTML += " "; + var ListItem0c11 = document.createElement("div"); + ListItem0c11.setAttribute("class", "ms-ListItem-actions"); + ListItem0c11.innerHTML += " "; + var ListItem0c11c1 = document.createElement("div"); + ListItem0c11c1.setAttribute("class", "ms-ListItem-action"); + var ListItem0c11c1c0 = document.createElement("i"); + ListItem0c11c1c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + ListItem0c11c1.appendChild(ListItem0c11c1c0); + ListItem0c11.appendChild(ListItem0c11c1); + ListItem0c11.innerHTML += " "; + var ListItem0c11c3 = document.createElement("div"); + ListItem0c11c3.setAttribute("class", "ms-ListItem-action"); + var ListItem0c11c3c0 = document.createElement("i"); + ListItem0c11c3c0.setAttribute("class", "ms-Icon ms-Icon--trash"); + ListItem0c11c3.appendChild(ListItem0c11c3c0); + ListItem0c11.appendChild(ListItem0c11c3); + ListItem0c11.innerHTML += " "; + var ListItem0c11c5 = document.createElement("div"); + ListItem0c11c5.setAttribute("class", "ms-ListItem-action"); + var ListItem0c11c5c0 = document.createElement("i"); + ListItem0c11c5c0.setAttribute("class", "ms-Icon ms-Icon--flag"); + ListItem0c11c5.appendChild(ListItem0c11c5c0); + ListItem0c11.appendChild(ListItem0c11c5); + ListItem0c11.innerHTML += " "; + var ListItem0c11c7 = document.createElement("div"); + ListItem0c11c7.setAttribute("class", "ms-ListItem-action"); + var ListItem0c11c7c0 = document.createElement("i"); + ListItem0c11c7c0.setAttribute("class", "ms-Icon ms-Icon--pinLeft"); + ListItem0c11c7.appendChild(ListItem0c11c7c0); + ListItem0c11.appendChild(ListItem0c11c7); + ListItem0c11.innerHTML += " "; + ListItem0.appendChild(ListItem0c11); + ListItem0.innerHTML += ""; + return ListItem0; + }; + FabricTemplateLibrary.prototype.MessageBanner = function () { + var MessageBanner0 = document.createElement("div"); + MessageBanner0.setAttribute("class", "ms-MessageBanner"); + MessageBanner0.innerHTML += " "; + var MessageBanner0c1 = document.createElement("div"); + MessageBanner0c1.setAttribute("class", "ms-MessageBanner-content"); + MessageBanner0c1.innerHTML += " "; + var MessageBanner0c1c1 = document.createElement("div"); + MessageBanner0c1c1.setAttribute("class", "ms-MessageBanner-text"); + MessageBanner0c1c1.innerHTML += " "; + var MessageBanner0c1c1c1 = document.createElement("div"); + MessageBanner0c1c1c1.setAttribute("class", "ms-MessageBanner-clipper"); + MessageBanner0c1c1c1.innerHTML += " You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage. "; + MessageBanner0c1c1.appendChild(MessageBanner0c1c1c1); + MessageBanner0c1c1.innerHTML += " "; + MessageBanner0c1.appendChild(MessageBanner0c1c1); + MessageBanner0c1.innerHTML += " "; + var MessageBanner0c1c3 = document.createElement("button"); + MessageBanner0c1c3.setAttribute("class", "ms-MessageBanner-expand"); + MessageBanner0c1c3.innerHTML += " "; + var MessageBanner0c1c3c1 = document.createElement("i"); + MessageBanner0c1c3c1.setAttribute("class", "ms-Icon ms-Icon--chevronsDown"); + MessageBanner0c1c3.appendChild(MessageBanner0c1c3c1); + MessageBanner0c1c3.innerHTML += " "; + MessageBanner0c1.appendChild(MessageBanner0c1c3); + MessageBanner0c1.innerHTML += " "; + var MessageBanner0c1c5 = document.createElement("div"); + MessageBanner0c1c5.setAttribute("class", "ms-MessageBanner-action"); + MessageBanner0c1c5.innerHTML += " "; + MessageBanner0c1c5.innerHTML += ""; + var MessageBanner0c1c5c3 = document.createElement("button"); + MessageBanner0c1c5c3.setAttribute("class", "ms-Button ms-Button--primary "); + MessageBanner0c1c5c3.innerHTML += " "; + var MessageBanner0c1c5c3c1 = document.createElement("span"); + MessageBanner0c1c5c3c1.setAttribute("class", "ms-Button-label"); + MessageBanner0c1c5c3c1.innerHTML += "Get More Storage"; + MessageBanner0c1c5c3.appendChild(MessageBanner0c1c5c3c1); + MessageBanner0c1c5c3.innerHTML += ""; + MessageBanner0c1c5.appendChild(MessageBanner0c1c5c3); + MessageBanner0c1c5.innerHTML += " "; + MessageBanner0c1.appendChild(MessageBanner0c1c5); + MessageBanner0c1.innerHTML += " "; + MessageBanner0.appendChild(MessageBanner0c1); + MessageBanner0.innerHTML += " "; + var MessageBanner0c3 = document.createElement("button"); + MessageBanner0c3.setAttribute("class", "ms-MessageBanner-close"); + MessageBanner0c3.innerHTML += " "; + var MessageBanner0c3c1 = document.createElement("i"); + MessageBanner0c3c1.setAttribute("class", "ms-Icon ms-Icon--x"); + MessageBanner0c3.appendChild(MessageBanner0c3c1); + MessageBanner0c3.innerHTML += " "; + MessageBanner0.appendChild(MessageBanner0c3); + MessageBanner0.innerHTML += ""; + return MessageBanner0; + }; + FabricTemplateLibrary.prototype.MessageBar = function () { + var MessageBar0 = document.createElement("div"); + MessageBar0.setAttribute("class", "ms-MessageBar "); + MessageBar0.innerHTML += " "; + var MessageBar0c1 = document.createElement("div"); + MessageBar0c1.setAttribute("class", "ms-MessageBar-content"); + MessageBar0c1.innerHTML += " "; + var MessageBar0c1c1 = document.createElement("div"); + MessageBar0c1c1.setAttribute("class", "ms-MessageBar-icon"); + MessageBar0c1c1.innerHTML += " "; + var MessageBar0c1c1c1 = document.createElement("i"); + MessageBar0c1c1c1.setAttribute("class", "ms-Icon "); + MessageBar0c1c1.appendChild(MessageBar0c1c1c1); + MessageBar0c1c1.innerHTML += " "; + MessageBar0c1.appendChild(MessageBar0c1c1); + MessageBar0c1.innerHTML += " "; + var MessageBar0c1c3 = document.createElement("div"); + MessageBar0c1c3.setAttribute("class", "ms-MessageBar-text"); + MessageBar0c1c3.innerHTML += " Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit."; + var MessageBar0c1c3c1 = document.createElement("br"); + MessageBar0c1c3.appendChild(MessageBar0c1c3c1); + MessageBar0c1c3.innerHTML += " "; + var MessageBar0c1c3c3 = document.createElement("a"); + MessageBar0c1c3c3.setAttribute("href", ""); + MessageBar0c1c3c3.setAttribute("class", "ms-Link"); + MessageBar0c1c3c3.innerHTML += "Hyperlink string"; + MessageBar0c1c3.appendChild(MessageBar0c1c3c3); + MessageBar0c1c3.innerHTML += " "; + MessageBar0c1.appendChild(MessageBar0c1c3); + MessageBar0c1.innerHTML += " "; + MessageBar0.appendChild(MessageBar0c1); + MessageBar0.innerHTML += ""; + return MessageBar0; + }; + FabricTemplateLibrary.prototype.OrgChart = function () { + var OrgChart0 = document.createElement("div"); + OrgChart0.setAttribute("class", "ms-OrgChart "); + OrgChart0.innerHTML += ""; + return OrgChart0; + }; + FabricTemplateLibrary.prototype.Overlay = function () { + var Overlay0 = document.createElement("div"); + Overlay0.setAttribute("class", "ms-Overlay "); + return Overlay0; + }; + FabricTemplateLibrary.prototype.Panel = function () { + var Panel0 = document.createElement("div"); + Panel0.setAttribute("class", "ms-Panel "); + Panel0.innerHTML += " "; + var Panel0c1 = document.createElement("button"); + Panel0c1.setAttribute("class", "ms-Panel-closeButton ms-PanelAction-close"); + Panel0c1.innerHTML += " "; + var Panel0c1c1 = document.createElement("i"); + Panel0c1c1.setAttribute("class", "ms-Panel-closeIcon ms-Icon ms-Icon--x"); + Panel0c1.appendChild(Panel0c1c1); + Panel0c1.innerHTML += " "; + Panel0.appendChild(Panel0c1); + Panel0.innerHTML += " "; + var Panel0c3 = document.createElement("div"); + Panel0c3.setAttribute("class", "ms-Panel-contentInner"); + Panel0c3.innerHTML += " "; + var Panel0c3c1 = document.createElement("p"); + Panel0c3c1.setAttribute("class", "ms-Panel-headerText"); + Panel0c3.appendChild(Panel0c3c1); + Panel0c3.innerHTML += " "; + var Panel0c3c3 = document.createElement("div"); + Panel0c3c3.setAttribute("class", "ms-Panel-content"); + Panel0c3c3.innerHTML += " "; + var Panel0c3c3c1 = document.createElement("span"); + Panel0c3c3c1.setAttribute("class", "ms-font-m"); + Panel0c3c3.appendChild(Panel0c3c3c1); + Panel0c3c3.innerHTML += " "; + Panel0c3.appendChild(Panel0c3c3); + Panel0c3.innerHTML += " "; + Panel0.appendChild(Panel0c3); + Panel0.innerHTML += ""; + return Panel0; + }; + FabricTemplateLibrary.prototype.PanelHost = function () { + var PanelHost0 = document.createElement("div"); + PanelHost0.setAttribute("class", "ms-PanelHost"); + PanelHost0.innerHTML += " "; + var PanelHost0c1 = document.createElement("div"); + PanelHost0c1.setAttribute("class", "ms-PanelHost-inner"); + PanelHost0c1.innerHTML += " "; + PanelHost0.appendChild(PanelHost0c1); + PanelHost0.innerHTML += " "; + PanelHost0.innerHTML += " "; + var PanelHost0c5 = document.createElement("div"); + PanelHost0c5.setAttribute("class", "ms-Overlay "); + PanelHost0.appendChild(PanelHost0c5); + PanelHost0.innerHTML += ""; + return PanelHost0; + }; + FabricTemplateLibrary.prototype.PeoplePicker = function () { + var PeoplePicker0 = document.createElement("div"); + PeoplePicker0.setAttribute("class", "ms-PeoplePicker"); + PeoplePicker0.innerHTML += " "; + var PeoplePicker0c1 = document.createElement("div"); + PeoplePicker0c1.setAttribute("class", "ms-PeoplePicker-searchBox"); + PeoplePicker0c1.innerHTML += " "; + PeoplePicker0c1.innerHTML += " "; + var PeoplePicker0c1c3 = document.createElement("div"); + PeoplePicker0c1c3.setAttribute("class", "ms-TextField "); + PeoplePicker0c1c3.innerHTML += " "; + PeoplePicker0c1.appendChild(PeoplePicker0c1c3); + PeoplePicker0c1.innerHTML += " "; + PeoplePicker0.appendChild(PeoplePicker0c1); + PeoplePicker0.innerHTML += " "; + var PeoplePicker0c3 = document.createElement("div"); + PeoplePicker0c3.setAttribute("class", "ms-PeoplePicker-results"); + PeoplePicker0c3.innerHTML += " "; + PeoplePicker0.appendChild(PeoplePicker0c3); + PeoplePicker0.innerHTML += " "; + var PeoplePicker0c5 = document.createElement("div"); + PeoplePicker0c5.setAttribute("class", "ms-PeoplePicker-searchMore"); + PeoplePicker0c5.innerHTML += " "; + var PeoplePicker0c5c1 = document.createElement("button"); + PeoplePicker0c5c1.setAttribute("class", "ms-PeoplePicker-searchMoreBtn"); + PeoplePicker0c5c1.innerHTML += " "; + var PeoplePicker0c5c1c1 = document.createElement("div"); + PeoplePicker0c5c1c1.setAttribute("class", "ms-PeoplePicker-searchMoreIcon"); + PeoplePicker0c5c1c1.innerHTML += " "; + var PeoplePicker0c5c1c1c1 = document.createElement("i"); + PeoplePicker0c5c1c1c1.setAttribute("class", "ms-Icon ms-Icon--search"); + PeoplePicker0c5c1c1.appendChild(PeoplePicker0c5c1c1c1); + PeoplePicker0c5c1c1.innerHTML += " "; + PeoplePicker0c5c1.appendChild(PeoplePicker0c5c1c1); + PeoplePicker0c5c1.innerHTML += " "; + var PeoplePicker0c5c1c3 = document.createElement("div"); + PeoplePicker0c5c1c3.setAttribute("class", "ms-PeoplePicker-searchMoreSecondary"); + PeoplePicker0c5c1c3.innerHTML += "Showing top 5 results"; + PeoplePicker0c5c1.appendChild(PeoplePicker0c5c1c3); + PeoplePicker0c5c1.innerHTML += " "; + var PeoplePicker0c5c1c5 = document.createElement("div"); + PeoplePicker0c5c1c5.setAttribute("class", "ms-PeoplePicker-searchMorePrimary"); + PeoplePicker0c5c1c5.innerHTML += "Search Contacts & Directory"; + PeoplePicker0c5c1.appendChild(PeoplePicker0c5c1c5); + PeoplePicker0c5c1.innerHTML += " "; + PeoplePicker0c5.appendChild(PeoplePicker0c5c1); + PeoplePicker0c5.innerHTML += " "; + PeoplePicker0.appendChild(PeoplePicker0c5); + PeoplePicker0.innerHTML += ""; + return PeoplePicker0; + }; + FabricTemplateLibrary.prototype.Persona = function () { + var Persona0 = document.createElement("div"); + Persona0.setAttribute("class", "ms-Persona"); + Persona0.innerHTML += " "; + var Persona0c1 = document.createElement("div"); + Persona0c1.setAttribute("class", "ms-Persona-imageArea"); + Persona0c1.innerHTML += " "; + Persona0.appendChild(Persona0c1); + Persona0.innerHTML += " "; + var Persona0c3 = document.createElement("div"); + Persona0c3.setAttribute("class", "ms-Persona-presence"); + Persona0c3.innerHTML += " "; + Persona0.appendChild(Persona0c3); + Persona0.innerHTML += " "; + var Persona0c5 = document.createElement("div"); + Persona0c5.setAttribute("class", "ms-Persona-details"); + Persona0c5.innerHTML += " "; + Persona0.appendChild(Persona0c5); + Persona0.innerHTML += ""; + return Persona0; + }; + FabricTemplateLibrary.prototype.PersonaCard = function () { + var PersonaCard0 = document.createElement("div"); + PersonaCard0.setAttribute("class", "ms-PersonaCard "); + PersonaCard0.innerHTML += " "; + var PersonaCard0c1 = document.createElement("div"); + PersonaCard0c1.setAttribute("class", "ms-PersonaCard-persona"); + PersonaCard0c1.innerHTML += " "; + PersonaCard0c1.innerHTML += " "; + var PersonaCard0c1c3 = document.createElement("div"); + PersonaCard0c1c3.setAttribute("class", "ms-Persona "); + PersonaCard0c1c3.innerHTML += " "; + var PersonaCard0c1c3c1 = document.createElement("div"); + PersonaCard0c1c3c1.setAttribute("class", "ms-Persona-imageArea"); + PersonaCard0c1c3c1.innerHTML += " "; + PersonaCard0c1c3.appendChild(PersonaCard0c1c3c1); + PersonaCard0c1c3.innerHTML += " "; + var PersonaCard0c1c3c3 = document.createElement("div"); + PersonaCard0c1c3c3.setAttribute("class", "ms-Persona-presence"); + PersonaCard0c1c3c3.innerHTML += " "; + PersonaCard0c1c3.appendChild(PersonaCard0c1c3c3); + PersonaCard0c1c3.innerHTML += " "; + var PersonaCard0c1c3c5 = document.createElement("div"); + PersonaCard0c1c3c5.setAttribute("class", "ms-Persona-details"); + PersonaCard0c1c3c5.innerHTML += " "; + PersonaCard0c1c3.appendChild(PersonaCard0c1c3c5); + PersonaCard0c1c3.innerHTML += " "; + PersonaCard0c1.appendChild(PersonaCard0c1c3); + PersonaCard0c1.innerHTML += " "; + PersonaCard0.appendChild(PersonaCard0c1); + PersonaCard0.innerHTML += " "; + var PersonaCard0c3 = document.createElement("ul"); + PersonaCard0c3.setAttribute("class", "ms-PersonaCard-actions"); + PersonaCard0c3.innerHTML += " "; + var PersonaCard0c3c1 = document.createElement("li"); + PersonaCard0c3c1.setAttribute("data-action-id", "chat"); + PersonaCard0c3c1.setAttribute("class", "ms-PersonaCard-action"); + PersonaCard0c3c1.setAttribute("tabindex", "1"); + var PersonaCard0c3c1c0 = document.createElement("i"); + PersonaCard0c3c1c0.setAttribute("class", "ms-Icon ms-Icon--chat"); + PersonaCard0c3c1.appendChild(PersonaCard0c3c1c0); + PersonaCard0c3.appendChild(PersonaCard0c3c1); + PersonaCard0c3.innerHTML += " "; + var PersonaCard0c3c3 = document.createElement("li"); + PersonaCard0c3c3.setAttribute("data-action-id", "phone"); + PersonaCard0c3c3.setAttribute("class", "ms-PersonaCard-action is-active"); + PersonaCard0c3c3.setAttribute("tabindex", "2"); + var PersonaCard0c3c3c0 = document.createElement("i"); + PersonaCard0c3c3c0.setAttribute("class", "ms-Icon ms-Icon--phone"); + PersonaCard0c3c3.appendChild(PersonaCard0c3c3c0); + PersonaCard0c3.appendChild(PersonaCard0c3c3); + PersonaCard0c3.innerHTML += " "; + var PersonaCard0c3c5 = document.createElement("li"); + PersonaCard0c3c5.setAttribute("data-action-id", "video"); + PersonaCard0c3c5.setAttribute("class", "ms-PersonaCard-action"); + PersonaCard0c3c5.setAttribute("tabindex", "3"); + var PersonaCard0c3c5c0 = document.createElement("i"); + PersonaCard0c3c5c0.setAttribute("class", "ms-Icon ms-Icon--video"); + PersonaCard0c3c5.appendChild(PersonaCard0c3c5c0); + PersonaCard0c3.appendChild(PersonaCard0c3c5); + PersonaCard0c3.innerHTML += " "; + var PersonaCard0c3c7 = document.createElement("li"); + PersonaCard0c3c7.setAttribute("data-action-id", "mail"); + PersonaCard0c3c7.setAttribute("class", "ms-PersonaCard-action"); + PersonaCard0c3c7.setAttribute("tabindex", "4"); + var PersonaCard0c3c7c0 = document.createElement("i"); + PersonaCard0c3c7c0.setAttribute("class", "ms-Icon ms-Icon--mail"); + PersonaCard0c3c7.appendChild(PersonaCard0c3c7c0); + PersonaCard0c3.appendChild(PersonaCard0c3c7); + PersonaCard0c3.innerHTML += " "; + var PersonaCard0c3c9 = document.createElement("li"); + PersonaCard0c3c9.setAttribute("class", "ms-PersonaCard-overflow"); + PersonaCard0c3c9.setAttribute("alt", "View profile in Delve"); + PersonaCard0c3c9.setAttribute("title", "View profile in Delve"); + PersonaCard0c3c9.innerHTML += "View profile"; + PersonaCard0c3.appendChild(PersonaCard0c3c9); + PersonaCard0c3.innerHTML += " "; + var PersonaCard0c3c11 = document.createElement("li"); + PersonaCard0c3c11.setAttribute("data-action-id", "org"); + PersonaCard0c3c11.setAttribute("class", "ms-PersonaCard-action ms-PersonaCard-orgChart"); + PersonaCard0c3c11.setAttribute("tabindex", "5"); + var PersonaCard0c3c11c0 = document.createElement("i"); + PersonaCard0c3c11c0.setAttribute("class", "ms-Icon ms-Icon--org"); + PersonaCard0c3c11.appendChild(PersonaCard0c3c11c0); + PersonaCard0c3.appendChild(PersonaCard0c3c11); + PersonaCard0c3.innerHTML += " "; + PersonaCard0.appendChild(PersonaCard0c3); + PersonaCard0.innerHTML += " "; + var PersonaCard0c5 = document.createElement("div"); + PersonaCard0c5.setAttribute("class", "ms-PersonaCard-actionDetailBox"); + PersonaCard0c5.innerHTML += " "; + var PersonaCard0c5c1 = document.createElement("div"); + PersonaCard0c5c1.setAttribute("data-detail-id", "mail"); + PersonaCard0c5c1.setAttribute("class", "ms-PersonaCard-details"); + PersonaCard0c5c1.innerHTML += " "; + var PersonaCard0c5c1c1 = document.createElement("div"); + PersonaCard0c5c1c1.setAttribute("class", "ms-PersonaCard-detailLine"); + var PersonaCard0c5c1c1c0 = document.createElement("span"); + PersonaCard0c5c1c1c0.setAttribute("class", "ms-PersonaCard-detailLabel"); + PersonaCard0c5c1c1c0.innerHTML += "Personal:"; + PersonaCard0c5c1c1.appendChild(PersonaCard0c5c1c1c0); + PersonaCard0c5c1c1.innerHTML += " "; + var PersonaCard0c5c1c1c2 = document.createElement("a"); + PersonaCard0c5c1c1c2.setAttribute("class", "ms-Link"); + PersonaCard0c5c1c1c2.setAttribute("href", "mailto:alton.lafferty@outlook.com"); + PersonaCard0c5c1c1c2.innerHTML += "alton.lafferty@outlook.com"; + PersonaCard0c5c1c1.appendChild(PersonaCard0c5c1c1c2); + PersonaCard0c5c1.appendChild(PersonaCard0c5c1c1); + PersonaCard0c5c1.innerHTML += " "; + var PersonaCard0c5c1c3 = document.createElement("div"); + PersonaCard0c5c1c3.setAttribute("class", "ms-PersonaCard-detailLine"); + var PersonaCard0c5c1c3c0 = document.createElement("span"); + PersonaCard0c5c1c3c0.setAttribute("class", "ms-PersonaCard-detailLabel"); + PersonaCard0c5c1c3c0.innerHTML += "Work:"; + PersonaCard0c5c1c3.appendChild(PersonaCard0c5c1c3c0); + PersonaCard0c5c1c3.innerHTML += " "; + var PersonaCard0c5c1c3c2 = document.createElement("a"); + PersonaCard0c5c1c3c2.setAttribute("class", "ms-Link"); + PersonaCard0c5c1c3c2.setAttribute("href", "mailto:alton.lafferty@outlook.com"); + PersonaCard0c5c1c3c2.innerHTML += "altonlafferty@contoso.com"; + PersonaCard0c5c1c3.appendChild(PersonaCard0c5c1c3c2); + PersonaCard0c5c1.appendChild(PersonaCard0c5c1c3); + PersonaCard0c5c1.innerHTML += " "; + PersonaCard0c5.appendChild(PersonaCard0c5c1); + PersonaCard0c5.innerHTML += " "; + var PersonaCard0c5c3 = document.createElement("div"); + PersonaCard0c5c3.setAttribute("data-detail-id", "chat"); + PersonaCard0c5c3.setAttribute("class", "ms-PersonaCard-details"); + PersonaCard0c5c3.innerHTML += " "; + var PersonaCard0c5c3c1 = document.createElement("div"); + PersonaCard0c5c3c1.setAttribute("class", "ms-PersonaCard-detailLine"); + var PersonaCard0c5c3c1c0 = document.createElement("span"); + PersonaCard0c5c3c1c0.setAttribute("class", "ms-PersonaCard-detailLabel"); + PersonaCard0c5c3c1c0.innerHTML += "Lync:"; + PersonaCard0c5c3c1.appendChild(PersonaCard0c5c3c1c0); + PersonaCard0c5c3c1.innerHTML += " "; + var PersonaCard0c5c3c1c2 = document.createElement("a"); + PersonaCard0c5c3c1c2.setAttribute("class", "ms-Link"); + PersonaCard0c5c3c1c2.setAttribute("href", "#"); + PersonaCard0c5c3c1c2.innerHTML += "Start Lync call"; + PersonaCard0c5c3c1.appendChild(PersonaCard0c5c3c1c2); + PersonaCard0c5c3.appendChild(PersonaCard0c5c3c1); + PersonaCard0c5c3.innerHTML += " "; + PersonaCard0c5.appendChild(PersonaCard0c5c3); + PersonaCard0c5.innerHTML += " "; + var PersonaCard0c5c5 = document.createElement("div"); + PersonaCard0c5c5.setAttribute("data-detail-id", "phone"); + PersonaCard0c5c5.setAttribute("class", "ms-PersonaCard-details"); + PersonaCard0c5c5.innerHTML += " "; + var PersonaCard0c5c5c1 = document.createElement("div"); + PersonaCard0c5c5c1.setAttribute("class", "ms-PersonaCard-detailExpander"); + PersonaCard0c5c5.appendChild(PersonaCard0c5c5c1); + PersonaCard0c5c5.innerHTML += " "; + var PersonaCard0c5c5c3 = document.createElement("div"); + PersonaCard0c5c5c3.setAttribute("class", "ms-PersonaCard-detailLine"); + var PersonaCard0c5c5c3c0 = document.createElement("span"); + PersonaCard0c5c5c3c0.setAttribute("class", "ms-PersonaCard-detailLabel"); + PersonaCard0c5c5c3c0.innerHTML += "Details"; + PersonaCard0c5c5c3.appendChild(PersonaCard0c5c5c3c0); + PersonaCard0c5c5.appendChild(PersonaCard0c5c5c3); + PersonaCard0c5c5.innerHTML += " "; + var PersonaCard0c5c5c5 = document.createElement("div"); + PersonaCard0c5c5c5.setAttribute("class", "ms-PersonaCard-detailLine"); + var PersonaCard0c5c5c5c0 = document.createElement("span"); + PersonaCard0c5c5c5c0.setAttribute("class", "ms-PersonaCard-detailLabel"); + PersonaCard0c5c5c5c0.innerHTML += "Personal:"; + PersonaCard0c5c5c5.appendChild(PersonaCard0c5c5c5c0); + PersonaCard0c5c5c5.innerHTML += " 555.206.2443"; + PersonaCard0c5c5.appendChild(PersonaCard0c5c5c5); + PersonaCard0c5c5.innerHTML += " "; + var PersonaCard0c5c5c7 = document.createElement("div"); + PersonaCard0c5c5c7.setAttribute("class", "ms-PersonaCard-detailLine"); + var PersonaCard0c5c5c7c0 = document.createElement("span"); + PersonaCard0c5c5c7c0.setAttribute("class", "ms-PersonaCard-detailLabel"); + PersonaCard0c5c5c7c0.innerHTML += "Work:"; + PersonaCard0c5c5c7.appendChild(PersonaCard0c5c5c7c0); + PersonaCard0c5c5c7.innerHTML += " 555.929.8240"; + PersonaCard0c5c5.appendChild(PersonaCard0c5c5c7); + PersonaCard0c5c5.innerHTML += " "; + PersonaCard0c5.appendChild(PersonaCard0c5c5); + PersonaCard0c5.innerHTML += " "; + var PersonaCard0c5c7 = document.createElement("div"); + PersonaCard0c5c7.setAttribute("data-detail-id", "video"); + PersonaCard0c5c7.setAttribute("class", "ms-PersonaCard-details"); + PersonaCard0c5c7.innerHTML += " "; + var PersonaCard0c5c7c1 = document.createElement("div"); + PersonaCard0c5c7c1.setAttribute("class", "ms-PersonaCard-detailLine"); + var PersonaCard0c5c7c1c0 = document.createElement("span"); + PersonaCard0c5c7c1c0.setAttribute("class", "ms-PersonaCard-detailLabel"); + PersonaCard0c5c7c1c0.innerHTML += "Skype:"; + PersonaCard0c5c7c1.appendChild(PersonaCard0c5c7c1c0); + PersonaCard0c5c7c1.innerHTML += " "; + var PersonaCard0c5c7c1c2 = document.createElement("a"); + PersonaCard0c5c7c1c2.setAttribute("class", "ms-Link"); + PersonaCard0c5c7c1c2.setAttribute("href", "#"); + PersonaCard0c5c7c1c2.innerHTML += "Start Skype call"; + PersonaCard0c5c7c1.appendChild(PersonaCard0c5c7c1c2); + PersonaCard0c5c7.appendChild(PersonaCard0c5c7c1); + PersonaCard0c5c7.innerHTML += " "; + PersonaCard0c5.appendChild(PersonaCard0c5c7); + PersonaCard0c5.innerHTML += " "; + PersonaCard0c5.innerHTML += " "; + var PersonaCard0c5c11 = document.createElement("div"); + PersonaCard0c5c11.setAttribute("data-detail-id", "org"); + PersonaCard0c5c11.setAttribute("class", "ms-PersonaCard-details"); + PersonaCard0c5c11.innerHTML += " "; + PersonaCard0c5c11.innerHTML += " "; + var PersonaCard0c5c11c3 = document.createElement("div"); + PersonaCard0c5c11c3.setAttribute("class", "ms-OrgChart "); + PersonaCard0c5c11c3.innerHTML += " "; + PersonaCard0c5c11.appendChild(PersonaCard0c5c11c3); + PersonaCard0c5c11.innerHTML += " "; + PersonaCard0c5.appendChild(PersonaCard0c5c11); + PersonaCard0c5.innerHTML += " "; + PersonaCard0.appendChild(PersonaCard0c5); + PersonaCard0.innerHTML += ""; + return PersonaCard0; + }; + FabricTemplateLibrary.prototype.Pivot = function () { + var Pivot0 = document.createElement("div"); + Pivot0.setAttribute("class", "ms-Pivot "); + Pivot0.innerHTML += " "; + var Pivot0c1 = document.createElement("ul"); + Pivot0c1.setAttribute("class", "ms-Pivot-links"); + Pivot0c1.innerHTML += " "; + Pivot0.appendChild(Pivot0c1); + Pivot0.innerHTML += ""; + return Pivot0; + }; + FabricTemplateLibrary.prototype.ProgressIndicator = function () { + var ProgressIndicator0 = document.createElement("div"); + ProgressIndicator0.setAttribute("class", "ms-ProgressIndicator"); + ProgressIndicator0.innerHTML += " "; + var ProgressIndicator0c1 = document.createElement("div"); + ProgressIndicator0c1.setAttribute("class", "ms-ProgressIndicator-itemName"); + ProgressIndicator0.appendChild(ProgressIndicator0c1); + ProgressIndicator0.innerHTML += " "; + var ProgressIndicator0c3 = document.createElement("div"); + ProgressIndicator0c3.setAttribute("class", "ms-ProgressIndicator-itemProgress"); + ProgressIndicator0c3.innerHTML += " "; + var ProgressIndicator0c3c1 = document.createElement("div"); + ProgressIndicator0c3c1.setAttribute("class", "ms-ProgressIndicator-progressTrack"); + ProgressIndicator0c3.appendChild(ProgressIndicator0c3c1); + ProgressIndicator0c3.innerHTML += " "; + var ProgressIndicator0c3c3 = document.createElement("div"); + ProgressIndicator0c3c3.setAttribute("class", "ms-ProgressIndicator-progressBar"); + ProgressIndicator0c3.appendChild(ProgressIndicator0c3c3); + ProgressIndicator0c3.innerHTML += " "; + ProgressIndicator0.appendChild(ProgressIndicator0c3); + ProgressIndicator0.innerHTML += " "; + var ProgressIndicator0c5 = document.createElement("div"); + ProgressIndicator0c5.setAttribute("class", "ms-ProgressIndicator-itemDescription"); + ProgressIndicator0.appendChild(ProgressIndicator0c5); + ProgressIndicator0.innerHTML += ""; + return ProgressIndicator0; + }; + FabricTemplateLibrary.prototype.RadioButton = function () { + var RadioButton0 = document.createElement("div"); + RadioButton0.setAttribute("class", "ms-RadioButton"); + RadioButton0.innerHTML += " "; + var RadioButton0c1 = document.createElement("li"); + RadioButton0c1.setAttribute("role", ""); + RadioButton0c1.setAttribute("class", "ms-Choice-field "); + RadioButton0c1.setAttribute("tabindex", "0"); + RadioButton0c1.setAttribute("aria-checked", ""); + RadioButton0c1.setAttribute("name", ""); + RadioButton0c1.innerHTML += " "; + var RadioButton0c1c1 = document.createElement("span"); + RadioButton0c1c1.setAttribute("class", "ms-Label"); + RadioButton0c1.appendChild(RadioButton0c1c1); + RadioButton0c1.innerHTML += " "; + RadioButton0.appendChild(RadioButton0c1); + RadioButton0.innerHTML += ""; + return RadioButton0; + }; + FabricTemplateLibrary.prototype.SearchBox = function () { + var SearchBox0 = document.createElement("div"); + SearchBox0.setAttribute("class", "ms-SearchBox "); + SearchBox0.innerHTML += " "; + var SearchBox0c1 = document.createElement("input"); + SearchBox0c1.setAttribute("class", "ms-SearchBox-field"); + SearchBox0c1.setAttribute("type", "text"); + SearchBox0c1.setAttribute("value", ""); + SearchBox0.appendChild(SearchBox0c1); + SearchBox0.innerHTML += " "; + var SearchBox0c3 = document.createElement("label"); + SearchBox0c3.setAttribute("class", "ms-SearchBox-label"); + SearchBox0c3.innerHTML += " "; + var SearchBox0c3c1 = document.createElement("i"); + SearchBox0c3c1.setAttribute("class", "ms-SearchBox-icon ms-Icon ms-Icon--search"); + SearchBox0c3.appendChild(SearchBox0c3c1); + SearchBox0c3.innerHTML += " "; + var SearchBox0c3c3 = document.createElement("span"); + SearchBox0c3c3.setAttribute("class", "ms-SearchBox-text"); + SearchBox0c3c3.innerHTML += "Search"; + SearchBox0c3.appendChild(SearchBox0c3c3); + SearchBox0c3.innerHTML += " "; + SearchBox0.appendChild(SearchBox0c3); + SearchBox0.innerHTML += " "; + SearchBox0.innerHTML += ""; + var SearchBox0c7 = document.createElement("div"); + SearchBox0c7.setAttribute("class", "ms-CommandButton ms-SearchBox-close ms-CommandButton--noLabel "); + SearchBox0c7.innerHTML += " "; + var SearchBox0c7c1 = document.createElement("button"); + SearchBox0c7c1.setAttribute("class", "ms-CommandButton-button"); + SearchBox0c7c1.innerHTML += " "; + var SearchBox0c7c1c1 = document.createElement("span"); + SearchBox0c7c1c1.setAttribute("class", "ms-CommandButton-icon "); + var SearchBox0c7c1c1c0 = document.createElement("i"); + SearchBox0c7c1c1c0.setAttribute("class", "ms-Icon ms-Icon--x"); + SearchBox0c7c1c1.appendChild(SearchBox0c7c1c1c0); + SearchBox0c7c1.appendChild(SearchBox0c7c1c1); + var SearchBox0c7c1c2 = document.createElement("span"); + SearchBox0c7c1c2.setAttribute("class", "ms-CommandButton-label"); + SearchBox0c7c1.appendChild(SearchBox0c7c1c2); + SearchBox0c7c1.innerHTML += " "; + SearchBox0c7.appendChild(SearchBox0c7c1); + SearchBox0c7.innerHTML += ""; + SearchBox0.appendChild(SearchBox0c7); + SearchBox0.innerHTML += ""; + return SearchBox0; + }; + FabricTemplateLibrary.prototype.Spinner = function () { + var Spinner0 = document.createElement("div"); + Spinner0.setAttribute("class", "ms-Spinner "); + Spinner0.innerHTML += ""; + return Spinner0; + }; + FabricTemplateLibrary.prototype.Table = function () { + var Table0 = document.createElement("table"); + Table0.setAttribute("class", "ms-Table "); + Table0.innerHTML += " "; + var Table0c1 = document.createElement("thead"); + Table0c1.innerHTML += " "; + var Table0c1c1 = document.createElement("tr"); + Table0c1c1.innerHTML += " "; + Table0c1.appendChild(Table0c1c1); + Table0c1.innerHTML += " "; + Table0.appendChild(Table0c1); + Table0.innerHTML += " "; + var Table0c3 = document.createElement("tbody"); + Table0c3.innerHTML += " "; + Table0.appendChild(Table0c3); + Table0.innerHTML += ""; + return Table0; + }; + FabricTemplateLibrary.prototype.TextField = function () { + var TextField0 = document.createElement("div"); + TextField0.setAttribute("class", "ms-TextField "); + TextField0.innerHTML += " "; + return TextField0; + }; + FabricTemplateLibrary.prototype.Toggle = function () { + var Toggle0 = document.createElement("div"); + Toggle0.setAttribute("class", "ms-Toggle "); + Toggle0.innerHTML += " "; + var Toggle0c1 = document.createElement("span"); + Toggle0c1.setAttribute("class", "ms-Toggle-description"); + Toggle0c1.innerHTML += "Let apps use my location"; + Toggle0.appendChild(Toggle0c1); + Toggle0.innerHTML += " "; + var Toggle0c3 = document.createElement("input"); + Toggle0c3.setAttribute("type", "checkbox"); + Toggle0c3.setAttribute("id", "demo-toggle-3"); + Toggle0c3.setAttribute("class", "ms-Toggle-input"); + Toggle0.appendChild(Toggle0c3); + Toggle0.innerHTML += " "; + var Toggle0c5 = document.createElement("label"); + Toggle0c5.setAttribute("for", "demo-toggle-3"); + Toggle0c5.setAttribute("class", "ms-Toggle-field"); + Toggle0c5.setAttribute("tabindex", "0"); + Toggle0c5.innerHTML += " "; + var Toggle0c5c1 = document.createElement("span"); + Toggle0c5c1.setAttribute("class", "ms-Label ms-Label--off"); + Toggle0c5c1.innerHTML += "Off"; + Toggle0c5.appendChild(Toggle0c5c1); + Toggle0c5.innerHTML += " "; + var Toggle0c5c3 = document.createElement("span"); + Toggle0c5c3.setAttribute("class", "ms-Label ms-Label--on"); + Toggle0c5c3.innerHTML += "On"; + Toggle0c5.appendChild(Toggle0c5c3); + Toggle0c5.innerHTML += " "; + Toggle0.appendChild(Toggle0c5); + Toggle0.innerHTML += ""; + return Toggle0; + }; + return FabricTemplateLibrary; +}()); + +// 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) { + if (hasArrow === void 0) { hasArrow = true; } + this._ftl = new FabricTemplateLibrary(); + this._resizeAction = this._resizeAction.bind(this); + this._disMissAction = this._disMissAction.bind(this); + this._matchTargetWidth = matchTargetWidth || false; + this._direction = direction; + this._container = this._ftl.ContextualHost(); + this._contextualHost = this._container; + this._contextualHostMain = this._contextualHost.querySelector(CONTEXT_HOST_MAIN_CLASS); + this._contextualHostMain.appendChild(content); + this._hasArrow = hasArrow; + this._arrow = this._container.querySelector(CONTEXT_HOST_BEAK_CLASS); + this._targetElement = targetElement; + this._openModal(); + this._setResizeDisposal(); + if (modifiers) { + for (var i = 0; i < modifiers.length; i++) { + this._container.classList.add(MODIFIER_BASE + modifiers[i]); + } + } + } + ContextualHost.prototype.disposeModal = function () { + window.removeEventListener("resize", this._resizeAction, false); + document.removeEventListener("click", this._disMissAction, true); + this._container.parentNode.removeChild(this._container); + }; + 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._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 teHeight = teBR.height; + var mHLeft; + var mHTop; + var mWidth = ""; + var arrowTop; + 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) { + 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) { + 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 elemenet clicked is not INSIDE of searchbox then close seach + 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 () { + var _this = this; + document.addEventListener("click", this._disMissAction, true); + document.addEventListener("keyup", function (e) { + if (e.keyCode === 32 || e.keyCode === 27) { + _this._disMissAction(e); + } + }, true); + }; + 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(); + }; + 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._choiceFieldLI = this._container.querySelector(".ms-Choice-field"); + if (this._choiceFieldLI.getAttribute("aria-checked") === "true") { + this._choiceFieldLI.classList.add("is-checked"); + } + if (this._choiceFieldLI.getAttribute("role") === "checkbox") { + this._choiceFieldLI.classList.add("ms-Choice-type--checkbox"); + } + this._addListeners(); + } + CheckBox.prototype.getValue = function () { + return this._choiceFieldLI.getAttribute("aria-checked") === "true" ? true : false; + }; + CheckBox.prototype.toggle = function () { + if (this.getValue()) { + this.unCheck(); + } + else { + this.check(); + } + }; + CheckBox.prototype.check = function () { + this._choiceFieldLI.setAttribute("aria-checked", "true"); + this._choiceFieldLI.classList.add("is-checked"); + }; + CheckBox.prototype.unCheck = function () { + this._choiceFieldLI.setAttribute("aria-checked", "false"); + this._choiceFieldLI.classList.remove("is-checked"); + }; + CheckBox.prototype.removeListeners = function () { + this._choiceFieldLI.removeEventListener("focus", this._FocusHandler.bind(this)); + this._choiceFieldLI.removeEventListener("blur", this._BlurHandler.bind(this)); + this._choiceFieldLI.removeEventListener("click", this._ClickHandler.bind(this)); + this._choiceFieldLI.addEventListener("keydown", this._KeydownHandler.bind(this)); + }; + CheckBox.prototype._addListeners = function (events) { + var ignore = events && events.ignore; + if (!ignore || !(ignore.indexOf("focus") > -1)) { + this._choiceFieldLI.addEventListener("focus", this._FocusHandler.bind(this), false); + } + if (!ignore || !(ignore.indexOf("blur") > -1)) { + this._choiceFieldLI.addEventListener("blur", this._BlurHandler.bind(this), false); + } + if (!ignore || !(ignore.indexOf("click") > -1)) { + this._choiceFieldLI.addEventListener("click", this._ClickHandler.bind(this), false); + } + if (!ignore || !(ignore.indexOf("keydown") > -1)) { + this._choiceFieldLI.addEventListener("keydown", this._KeydownHandler.bind(this), false); + } + }; + CheckBox.prototype._FocusHandler = function () { + this._choiceFieldLI.classList.add("in-focus"); + }; + CheckBox.prototype._BlurHandler = function () { + this._choiceFieldLI.classList.remove("in-focus"); + }; + CheckBox.prototype._ClickHandler = function (event) { + event.stopPropagation(); + event.preventDefault(); + this.toggle(); + }; + CheckBox.prototype._KeydownHandler = function (event) { + if (event.keyCode === 32) { + event.stopPropagation(); + event.preventDefault(); + if (!this._choiceFieldLI.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. +/// +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var fabric; +(function (fabric) { + /** + * RadioButton Plugin + * + * Adds basic demonstration functionality to .ms-RadioButton components. + * + */ + var RadioButton = (function (_super) { + __extends(RadioButton, _super); + /** + * + * @param {HTMLElement} container - the target container for an instance of RadioButton + * @constructor + */ + function RadioButton(container) { + _super.call(this, container); + if (this._choiceFieldLI.getAttribute("role") === "radio") { + this._choiceFieldLI.classList.add("ms-Choice-type--radio"); + } + } + RadioButton.prototype.removeListeners = function () { + _super.prototype.removeListeners.call(this); + this._choiceFieldLI.removeEventListener("click", this._RadioClickHandler.bind(this)); + this._choiceFieldLI.addEventListener("keydown", this._RadioKeydownHandler.bind(this)); + }; + RadioButton.prototype._addListeners = function () { + _super.prototype._addListeners.call(this, { ignore: ["keydown", "click"] }); + this._choiceFieldLI.addEventListener("click", this._RadioClickHandler.bind(this), false); + this._choiceFieldLI.addEventListener("keydown", this._RadioKeydownHandler.bind(this), false); + }; + RadioButton.prototype._RadioClickHandler = function (event) { + event.stopPropagation(); + event.preventDefault(); + this._dispatchSelectEvent(); + }; + RadioButton.prototype._dispatchSelectEvent = function () { + var objDict = { + bubbles: true, + cancelable: true, + detail: { + name: this._choiceFieldLI.getAttribute("name"), + item: this + } + }; + this._choiceFieldLI.dispatchEvent(new CustomEvent("msChoicefield", objDict)); + }; + RadioButton.prototype._RadioKeydownHandler = function (event) { + if (event.keyCode === 32) { + event.stopPropagation(); + event.preventDefault(); + if (!this._choiceFieldLI.classList.contains("is-disabled")) { + this._dispatchSelectEvent(); + } + } + }; + return RadioButton; + }(fabric.CheckBox)); + 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. +/** + * 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_CLOSE_BUTTON = ".ms-CommandButton"; + var SB_HAS_TEXT = "has-text"; + var SB_IS_ACTIVE = "is-active"; + var SearchBox = (function () { + function SearchBox(container) { + this._cancel = false; + this._container = container; + this._saveDOMRefs(this._container); + this._setHasText(); + this._setFocusAction(this._container); + this._setCloseButtonAction(); + this._setBlurAction(); + this._checkState(); + } + SearchBox.prototype.setCollapsedListeners = function () { + var _this = this; + this._disposeListeners(); + this._searchBox.addEventListener("click", function () { _this._expandSearchHandler(); }, false); + this._searchBoxField.addEventListener("focus", function () { _this._expandSearchHandler(); }, true); + }; + SearchBox.prototype._saveDOMRefs = function (context) { + this._searchBox = context; + this._searchBoxField = this._searchBox.querySelector(SB_FIELD); + this._searchBoxCloseButton = this._searchBox.querySelector(SB_CLOSE_BUTTON); + }; + SearchBox.prototype._hasClass = function (element, cls) { + return (" " + element.className + " ").indexOf(" " + cls + " ") > -1; + }; + SearchBox.prototype._disposeListeners = function () { + var _this = this; + this._searchBox.removeEventListener("click", function () { _this._expandSearchHandler(); }, false); + this._searchBoxField.removeEventListener("focus", function () { _this._expandSearchHandler(); }, true); + }; + SearchBox.prototype._handleOutsideSearchClick = function (e) { + var _this = this; + // If the elemenet clicked is not INSIDE of searchbox then close seach + if (!this._searchBox.contains(e.target) && e.target !== this._searchBox) { + this._collapseSearchBox(); + document.removeEventListener("click", function (ev) { _this._handleOutsideSearchClick(ev); }, false); + this.setCollapsedListeners(); + } + }; + SearchBox.prototype._collapseSearchBox = function () { + this._searchBox.classList.remove("is-active"); + }; + SearchBox.prototype._expandSearchHandler = function () { + var _this = this; + this._disposeListeners(); + this._searchBox.classList.add("is-active"); + this._searchBoxField.focus(); + this._searchBoxCloseButton.addEventListener("click", function () { _this._collapseSearchBox(); }, false); + document.addEventListener("click", function (ev) { _this._handleOutsideSearchClick(ev); }, false); + }; + 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.classList.add(SB_IS_ACTIVE); + }, true); + }; + SearchBox.prototype._clearSearchBox = function () { + this._searchBoxField.value = ""; + this._searchBox.classList.remove(SB_IS_ACTIVE); + this._setHasText(); + this._cancel = false; + }; + SearchBox.prototype._setCloseButtonAction = function () { + var _this = this; + this._searchBoxCloseButton.addEventListener("mousedown", function () { + _this._clearSearchBox(); + }, false); + this._searchBoxCloseButton.addEventListener("keydown", function (e) { + var keyCode = e.keyCode; + if (keyCode === 13) { + _this._clearSearchBox(); + } + }, false); + }; + SearchBox.prototype._handleBlur = function () { + var _this = this; + setTimeout(function () { + if (!_this._searchBox.contains(document.activeElement)) { + _this._clearSearchBox(); + } + }, 10); + }; + SearchBox.prototype._setBlurAction = function () { + var _this = this; + this._searchBoxField.addEventListener("blur", function () { _this._handleBlur(); }, true); + this._searchBoxCloseButton.addEventListener("blur", function () { _this._handleBlur(); }, true); + }; + SearchBox.prototype._checkState = function () { + if (this._hasClass(this._searchBox, "is-collapsed")) { + this.setCollapsedListeners(); + } + }; + 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 = 41.5; + 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 (reInit, state) { + if (reInit === void 0) { reInit = true; } + if (state === void 0) { state = "add"; } + this._changeSearchState("is-collapsed", state); + if (reInit) { + this.searchBoxInstance = this._createSearchInstance(); + } + }; + 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._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 () { + 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(); + } + }; + 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 mainCommandSurfaceAreaWidth = this._elements.mainArea.getBoundingClientRect().width; + var totalAreaWidth = mainCommandSurfaceAreaWidth; + if (this._elements.searchBox) { + searchCommandWidth = this._getElementWidth(this._elements.searchBox); + } + var totalCommandWidth = searchCommandWidth + OVERFLOW_WIDTH; // Start with searchbox width + // Reset overflow and visible + this.visibleCommands = []; + this.overflowCommands = []; + for (var i = 0; i < this.itemCollection.length; i++) { + totalCommandWidth += this.commandWidths[i]; + if (totalCommandWidth < 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 newIcon = this.contextualItemIcon.cloneNode(false); + var iconClass = this.overflowCommands[i].icon; + newClink.innerText = this.overflowCommands[i].label; + newCItem.appendChild(newClink); + 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._processColapsedClasses = 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._processColapsedClasses("add"); + this._runOverflow(); + break; + case "md": + this._runsSearchBox(); + // Add collapsed classes to commands + this._processColapsedClasses("add"); + this._runOverflow(); + break; + case "lg": + this._runsSearchBox(); + this._processColapsedClasses("remove"); + this._runOverflow(); + break; + case "xl": + this._runsSearchBox(false, "remove"); + this._processColapsedClasses("remove"); + this._runOverflow(); + break; + default: + this._runsSearchBox(false, "remove"); + this._processColapsedClasses("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. +/// +/// +/// +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._setOpener(hostTarget); + this._init(); + } + ContextualMenu.prototype.getHost = function () { + return this._host; + }; + ContextualMenu.prototype._init = function () { + this._container.addEventListener("click", this._onContextualMenuClick.bind(this), true); + }; + 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); + } + } + }; + 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._setOpener = function (hostTarget) { + var _this = this; + hostTarget.addEventListener("click", function (event) { + event.preventDefault(); + _this._openContextMenu(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); + container.dispatchEvent(new Event("hostAdded")); + }; + 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"); + /** 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); + /** Move back one month. */ + $monthControls.on("click", ".js-prevMonth", function (event) { + event.preventDefault(); + var newMonth = $picker.get("highlight").month - 1; + _this.changeHighlightedDate($picker, 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($picker, 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($picker, 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($picker, 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($picker, 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($picker, 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.toElement); + /** 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($picker, 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.toElement); + /** 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($picker, 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 ($picker, newYear, newMonth, newDay) { + /** All letiables are optional. If not provided, default to the current value. */ + if (typeof newYear === "undefined" || newYear === null) { + newYear = $picker.get("highlight").year; + } + if (typeof newMonth === "undefined" || newMonth === null) { + newMonth = $picker.get("highlight").month; + } + if (typeof newDay === "undefined" || newDay === null) { + newDay = $picker.get("highlight").date; + } + /** Update it. */ + $picker.set("highlight", [newYear, newMonth, newDay]); + }; + /** 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); + }; + 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) { + this._ftl = new FabricTemplateLibrary(); + if (overlayElement) { + this.overlayElement = overlayElement; + } + else { + this.overlayElement = this._ftl.Overlay(); + } + 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"); + }; + Overlay.prototype.hide = function () { + this.overlayElement.classList.remove("is-visible"); + }; + 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"); + 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(); + } + 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 () { + 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._setEvents(); + } + 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(); + } + }, ANIMATION_END); + }; + Panel.prototype._setEvents = function () { + var _this = this; + this._panelHost._overlay.overlayElement.addEventListener("click", function () { + _this.dismiss(); + }); + var closeButton = this._panel.querySelector(".ms-PanelAction-close"); + if (closeButton !== null) { + closeButton.addEventListener("click", function () { + _this.dismiss(); + }); + } + }; + 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_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 ")[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+""):""},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)}); diff --git a/dist/sass/Fabric.Animations.Output.scss b/dist/sass/Fabric.Animations.Output.scss new file mode 100644 index 000000000..38227eb79 --- /dev/null +++ b/dist/sass/Fabric.Animations.Output.scss @@ -0,0 +1,419 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Animations + + +// Note that all animation classes should begin with the "ms-u" utility prefix. +// The original class names are deprecated and will be removed in a future release. + +@import "Fabric.Animations"; + +// slideRightIn10 +.ms-u-slideRightIn10 { + @include ms-u-slideRightIn10; +} +@-webkit-keyframes slideRightIn10 { + from { -webkit-transform:translate3d(-10px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRightIn10 { + from { transform:translate3d(-10px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightIn20 +.ms-u-slideRightIn20 { + @include ms-u-slideRightIn20; +} +@-webkit-keyframes slideRightIn20 { + from { -webkit-transform:translate3d(-20px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRightIn20 { + from { transform:translate3d(-20px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightIn40 +.ms-u-slideRightIn40 { + @include ms-u-slideRightIn40; +} +@-webkit-keyframes slideRightIn40 { + from { -webkit-transform:translate3d(-40px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRightIn40 { + from { transform:translate3d(-40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn10 +.ms-u-slideLeftIn10 { + @include ms-u-slideLeftIn10; +} +@-webkit-keyframes slideLeftIn10 { + from { -webkit-transform:translate3d(10px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeftIn10 { + from { transform:translate3d(10px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn20 +.ms-u-slideLeftIn20 { + @include ms-u-slideLeftIn20; +} +@-webkit-keyframes slideLeftIn20 { + from { -webkit-transform:translate3d(20px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeftIn20 { + from { transform:translate3d(20px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn40 +.ms-u-slideLeftIn40 { + @include ms-u-slideLeftIn40; +} +@-webkit-keyframes slideLeftIn40 { + from { -webkit-transform:translate3d(40px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeftIn40 { + from { transform:translate3d(40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightIn400 +.ms-u-slideRightIn400 { + @include ms-u-slideRightIn400; +} +@-webkit-keyframes slideRightIn400 { + from { -webkit-transform:translate3d(-400px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRightIn400 { + from { transform:translate3d(-400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn400 +.ms-u-slideLeftIn400 { + @include ms-u-slideLeftIn400; +} +@-webkit-keyframes slideLeft400 { + from { -webkit-transform:translate3d(400px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeft400 { + from { transform:translate3d(400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideUpIn20 +.ms-u-slideUpIn20 { + @include ms-u-slideUpIn20; +} +@-webkit-keyframes slideUpIn20 { + from { -webkit-transform:translate3d(0px, 20px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideUpIn20 { + from { transform:translate3d(0px, 20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideUpIn10 +.ms-u-slideUpIn10 { + @include ms-u-slideUpIn10; +} +@-webkit-keyframes slideUpIn10 { + from { -webkit-transform:translate3d(0px, 10px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideUpIn10 { + from { transform:translate3d(0px, 10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideDownIn20 +.ms-u-slideDownIn20 { + @include ms-u-slideDownIn20; +} +@-webkit-keyframes slideDownIn20 { + from { -webkit-transform:translate3d(0px, -20px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideDownIn20 { + from { transform:translate3d(0px, -20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideDownIn10 +.ms-u-slideDownIn10 { + @include ms-u-slideDownIn10; +} +@-webkit-keyframes slideDownIn10 { + from { -webkit-transform:translate3d(0px, -10px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideDownIn10 { + from { transform:translate3d(0px, -10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightOut40 +.ms-u-slideRightOut40 { + @include ms-u-slideRightOut40; +} +@-webkit-keyframes slideRightOut40 { + from { -webkit-transform:translate3d(0px, 0px, 0px); } + to { -webkit-transform:translate3d(40px, 0px, 0px); } +} +@keyframes slideRightOut40 { + from { transform:translate3d(0px, 0px, 0px); } + to { transform:translate3d(40px, 0px, 0px); } +} + +// slideLeftOut40 +.ms-u-slideLeftOut40 { + @include ms-u-slideLeftOut40; +} +@-webkit-keyframes slideLeftOut40 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(-40px, 0px, 0px); } +} +@keyframes slideLeftOut40 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-40px, 0px, 0px); } +} + +// slideRightOut400 +.ms-u-slideRightOut400 { + @include ms-u-slideRightOut400; +} +@-webkit-keyframes slideRightOut400 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(400px, 0px, 0px); } +} +@keyframes slideRightOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(400px, 0px, 0px); } +} + +// slideLeftOut400 +.ms-u-slideLeftOut400 { + @include ms-u-slideLeftOut400; +} +@-webkit-keyframes slideLeftOut400 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(-400px, 0px, 0px); } +} +@keyframes slideLeftOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-400px, 0px, 0px); } +} + +// slideUpOut20 +.ms-u-slideUpOut20 { + @include ms-u-slideUpOut20; +} +@-webkit-keyframes slideUpOut20 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, -20px, 0px); } +} +@keyframes slideUpOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -20px, 0px); } +} + +// slideUpOut10 +.ms-u-slideUpOut10 { + @include ms-u-slideUpOut10; +} +@-webkit-keyframes slideUpOut10 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, -10px, 0px); } +} +@keyframes slideUpOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -10px, 0px); } +} + +// slideDownOut20 +.ms-u-slideDownOut20 { + @include ms-u-slideDownOut20; +} +@-webkit-keyframes slideDownOut20 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, 20px, 0px); } +} +@keyframes slideDownOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 20px, 0px); } +} + +// slideDownOut10 +.ms-u-slideDownOut10 { + @include ms-u-slideDownOut10; +} +@-webkit-keyframes slideDownOut10 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, 10px, 0px); } +} +@keyframes slideDownOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 10px, 0px); } +} + +// scaleUpIn100 +.ms-u-scaleUpIn100 { + @include ms-u-scaleUpIn100; +} +@-webkit-keyframes scaleUp100 { + from { -webkit-transform:scale3d(.98, .98, 1); } + to { -webkit-transform:scale3d(1, 1, 1); } +} +@keyframes scaleUp100 { + from { transform:scale3d(.98, .98, 1); } + to { transform:scale3d(1, 1, 1); } +} + +// scaleDownIn100 +.ms-u-scaleDownIn100 { + @include ms-u-scaleDownIn100; +} +@-webkit-keyframes scaleDown100 { + from { -webkit-transform:scale3d(1.03, 1.03, 1); } + to { -webkit-transform:scale3d(1, 1, 1); } +} +@keyframes scaleDown100 { + from { transform:scale3d(1.03, 1.03, 1); } + to { transform:scale3d(1, 1, 1); } +} + +// scaleUpOut103 +.ms-u-scaleUpOut103 { + @include ms-u-scaleUpOut103; +} +@-webkit-keyframes scaleUp103 { + from { -webkit-transform:scale3d(1, 1, 1); } + to { -webkit-transform:scale3d(1.03, 1.03, 1); } +} +@keyframes scaleUp103 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(1.03, 1.03, 1); } +} + +// scaleDownOut98 +.ms-u-scaleDownOut98 { + @include ms-u-scaleDownOut98; +} +@-webkit-keyframes scaleDown98 { + from { -webkit-transform:scale3d(1, 1, 1); } + to { -webkit-transform:scale3d(0.98, 0.98, 1); } +} +@keyframes scaleDown98 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(0.98, 0.98, 1); } +} + +// fadeIn +.ms-u-fadeIn400 { + @include ms-u-fadeIn400; +} +.ms-u-fadeIn100 { + @include ms-u-fadeIn100; +} +.ms-u-fadeIn200 { + @include ms-u-fadeIn200; +} +.ms-u-fadeIn500 { + @include ms-u-fadeIn500; +} +@-webkit-keyframes fadeIn { + from { opacity: 0; -webkit-animation-timing-function: $ms-ease2; } + to { opacity: 1; } +} +@keyframes fadeIn { + from { opacity: 0; animation-timing-function: $ms-ease2; } + to { opacity: 1; } +} + +// fadeOut +.ms-u-fadeOut400 { + @include ms-u-fadeOut400; +} +.ms-u-fadeOut100 { + @include ms-u-fadeOut100; +} +.ms-u-fadeOut200 { + @include ms-u-fadeOut200; +} +.ms-u-fadeOut500 { + @include ms-u-fadeOut500; +} +@-webkit-keyframes fadeOut { + from { opacity: 1; -webkit-animation-timing-function: $ms-ease2; } + to { opacity: 0; } +} +@keyframes fadeOut { + from { opacity: 1; animation-timing-function: $ms-ease2; } + to { opacity: 0; } +} + +// rotate90deg +.ms-u-rotate90deg { + @include ms-u-rotate90deg; +} +@-webkit-keyframes rotate90 { + from { -webkit-transform:rotateZ(0deg); } + to { -webkit-transform:rotateZ(90deg); } +} +@keyframes rotate90 { + from { transform:rotateZ(0deg); } + to { transform:rotateZ(90deg); } +} + +// rotateN90deg +.ms-u-rotateN90deg { + @include ms-u-rotateN90deg; +} +@-webkit-keyframes rotateN90 { + from { -webkit-transform:rotateZ(90deg); } + to { -webkit-transform:rotateZ(0deg); } +} +@keyframes rotateN90 { + from { transform:rotateZ(90deg); } + to { transform:rotateZ(0deg); } +} + +// expandCollapse400 +.ms-u-expandCollapse400 { + @include ms-u-expandCollapse400; +} + +// expandCollapse200 +.ms-u-expandCollapse200 { + @include ms-u-expandCollapse200; +} + +// expandCollapse100 +.ms-u-expandCollapse100 { + @include ms-u-expandCollapse100; +} + +// delay100 +.ms-u-delay100 { + @include ms-u-delay100; +} + +// delay200 +.ms-u-delay200 { + @include ms-u-delay200; +} diff --git a/dist/sass/Fabric.Animations.RTL.Output.scss b/dist/sass/Fabric.Animations.RTL.Output.scss new file mode 100644 index 000000000..8ad465a5b --- /dev/null +++ b/dist/sass/Fabric.Animations.RTL.Output.scss @@ -0,0 +1,80 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// RTL overrides for Fabric Animations + + +@import "Fabric.Animations.Output"; +@import "Fabric.Animations.RTL"; + +// slideRightIn10 +.ms-u-slideRightIn10 { + @include ms-u-slideRightIn10; +} + +// slideRightIn20 +.ms-u-slideRightIn20 { + @include ms-u-slideRightIn20; +} + +// slideRightIn40 +.ms-u-slideRightIn40 { + @include ms-u-slideRightIn40; +} + +// slideLeftIn10 +.ms-u-slideLeftIn10 { + @include ms-u-slideLeftIn10; +} + +// slideLeftIn20 +.ms-u-slideLeftIn20 { + @include ms-u-slideLeftIn20; +} + +// slideLeftIn40 +.ms-u-slideLeftIn40 { + @include ms-u-slideLeftIn40; +} + +// slideRightIn400 +.ms-u-slideRightIn400 { + @include ms-u-slideRightIn400; +} + +// slideLeftIn400 +.ms-u-slideLeftIn400 { + @include ms-u-slideLeftIn400; +} + +// slideRightOut40 +.ms-u-slideRightOut40 { + @include ms-u-slideRightOut40; +} + +// slideLeftOut40 +.ms-u-slideLeftOut40 { + @include ms-u-slideLeftOut40; +} + +// slideRightOut400 +.ms-u-slideRightOut400 { + @include ms-u-slideRightOut400; +} + +// slideLeftOut400 +.ms-u-slideLeftOut400 { + @include ms-u-slideLeftOut400; +} + +// rotate90deg +.ms-u-rotate90deg { + @include ms-u-rotate90deg; +} + +// rotateN90deg +.ms-u-rotateN90deg { + @include ms-u-rotateN90deg; +} diff --git a/dist/sass/Fabric.Color.Mixins.Output.scss b/dist/sass/Fabric.Color.Mixins.Output.scss new file mode 100644 index 000000000..a5a6120b7 --- /dev/null +++ b/dist/sass/Fabric.Color.Mixins.Output.scss @@ -0,0 +1,443 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Color Mixins + +@import "Fabric.Color.Mixins"; + +//== Background colors +// +// Theme colors +.ms-bgColor-themeDark, +.ms-bgColor-themeDark--hover:hover { + @include ms-bgColor-themeDark; +} + +.ms-bgColor-themeDarkAlt, +.ms-bgColor-themeDarkAlt--hover:hover { + @include ms-bgColor-themeDarkAlt; +} + +.ms-bgColor-themeDarker, +.ms-bgColor-themeDarker--hover:hover { + @include ms-bgColor-themeDarker; +} + +.ms-bgColor-themePrimary, +.ms-bgColor-themePrimary--hover:hover { + @include ms-bgColor-themePrimary; +} + +.ms-bgColor-themeSecondary, +.ms-bgColor-themeSecondary--hover:hover { + @include ms-bgColor-themeSecondary; +} + +.ms-bgColor-themeTertiary, +.ms-bgColor-themeTertiary--hover:hover { + @include ms-bgColor-themeTertiary; +} + +.ms-bgColor-themeLight, +.ms-bgColor-themeLight--hover:hover { + @include ms-bgColor-themeLight; +} + +.ms-bgColor-themeLighter, +.ms-bgColor-themeLighter--hover:hover { + @include ms-bgColor-themeLighter; +} + +.ms-bgColor-themeLighterAlt, +.ms-bgColor-themeLighterAlt--hover:hover { + @include ms-bgColor-themeLighterAlt; +} + +// Neutral colors +.ms-bgColor-black, +.ms-bgColor-black--hover:hover { + @include ms-bgColor-black; +} + +.ms-bgColor-neutralDark, +.ms-bgColor-neutralDark--hover:hover { + @include ms-bgColor-neutralDark; +} + +.ms-bgColor-neutralPrimary, +.ms-bgColor-neutralPrimary--hover:hover { + @include ms-bgColor-neutralPrimary; +} + +.ms-bgColor-neutralPrimaryAlt, +.ms-bgColor-neutralPrimaryAlt--hover:hover { + @include ms-bgColor-neutralPrimaryAlt; +} + +.ms-bgColor-neutralSecondary, +.ms-bgColor-neutralSecondary--hover:hover { + @include ms-bgColor-neutralSecondary; +} + +.ms-bgColor-neutralSecondaryAlt, +.ms-bgColor-neutralSecondaryAlt--hover:hover { + @include ms-bgColor-neutralSecondaryAlt; +} + +.ms-bgColor-neutralTertiary, +.ms-bgColor-neutralTertiary--hover:hover { + @include ms-bgColor-neutralTertiary; +} + +.ms-bgColor-neutralTertiaryAlt, +.ms-bgColor-neutralTertiaryAlt--hover:hover { + @include ms-bgColor-neutralTertiaryAlt; +} + +.ms-bgColor-neutralLight, +.ms-bgColor-neutralLight--hover:hover { + @include ms-bgColor-neutralLight; +} + +.ms-bgColor-neutralLighter, +.ms-bgColor-neutralLighter--hover:hover { + @include ms-bgColor-neutralLighter; +} + +.ms-bgColor-neutralLighterAlt, +.ms-bgColor-neutralLighterAlt--hover:hover { + @include ms-bgColor-neutralLighterAlt; +} + +.ms-bgColor-white, +.ms-bgColor-white--hover:hover { + @include ms-bgColor-white; +} + + +// Brand and accent colors +.ms-bgColor-yellow { + @include ms-bgColor-yellow; +} + +.ms-bgColor-yellowLight { + @include ms-bgColor-yellowLight; +} + +.ms-bgColor-orange { + @include ms-bgColor-orange; +} + +.ms-bgColor-orangeLight { + @include ms-bgColor-orangeLight; +} + +.ms-bgColor-orangeLighter { + @include ms-bgColor-orangeLighter; +} + +.ms-bgColor-redDark { + @include ms-bgColor-redDark; +} + +.ms-bgColor-red { + @include ms-bgColor-red; +} + +.ms-bgColor-magentaDark { + @include ms-bgColor-magentaDark; +} + +.ms-bgColor-magenta { + @include ms-bgColor-magenta; +} + +.ms-bgColor-magentaLight { + @include ms-bgColor-magentaLight; +} + +.ms-bgColor-purpleDark { + @include ms-bgColor-purpleDark; +} + +.ms-bgColor-purple { + @include ms-bgColor-purple; +} + +.ms-bgColor-purpleLight { + @include ms-bgColor-purpleLight; +} + +.ms-bgColor-blueDark { + @include ms-bgColor-blueDark; +} + +.ms-bgColor-blueMid { + @include ms-bgColor-blueMid; +} + +.ms-bgColor-blue { + @include ms-bgColor-blue; +} + +.ms-bgColor-blueLight { + @include ms-bgColor-blueLight; +} + +.ms-bgColor-tealDark { + @include ms-bgColor-tealDark; +} + +.ms-bgColor-teal { + @include ms-bgColor-teal; +} + +.ms-bgColor-tealLight { + @include ms-bgColor-tealLight; +} + +.ms-bgColor-greenDark { + @include ms-bgColor-greenDark; +} + +.ms-bgColor-green { + @include ms-bgColor-green; +} + +.ms-bgColor-greenLight { + @include ms-bgColor-greenLight; +} + +// Message colors +.ms-bgColor-info { + @include ms-bgColor-info; +} + +.ms-bgColor-success { + @include ms-bgColor-success; +} + +.ms-bgColor-severeWarning { + @include ms-bgColor-severeWarning; +} + +.ms-bgColor-warning { + @include ms-bgColor-warning; +} + +.ms-bgColor-error { + @include ms-bgColor-error; +} + + +//== Border colors +// + +// Theme colors +.ms-borderColor-themeDark, +.ms-borderColor-themeDark--hover:hover { + @include ms-borderColor-themeDark; +} + +.ms-borderColor-themeDarkAlt, +.ms-borderColor-themeDarkAlt--hover:hover { + @include ms-borderColor-themeDarkAlt; +} + +.ms-borderColor-themeDarker, +.ms-borderColor-themeDarker--hover:hover { + @include ms-borderColor-themeDarker; +} + +.ms-borderColor-themePrimary, +.ms-borderColor-themePrimary--hover:hover { + @include ms-borderColor-themePrimary; +} + +.ms-borderColor-themeSecondary, +.ms-borderColor-themeSecondary--hover:hover { + @include ms-borderColor-themeSecondary; +} + +.ms-borderColor-themeTertiary, +.ms-borderColor-themeTertiary--hover:hover { + @include ms-borderColor-themeTertiary; +} + +.ms-borderColor-themeLight, +.ms-borderColor-themeLight--hover:hover { + @include ms-borderColor-themeLight; +} + +.ms-borderColor-themeLighter, +.ms-borderColor-themeLighter--hover:hover { + @include ms-borderColor-themeLighter; +} + +.ms-borderColor-themeLighterAlt, +.ms-borderColor-themeLighterAlt--hover:hover { + @include ms-borderColor-themeLighterAlt; +} + + +// Neutral colors +.ms-borderColor-black, +.ms-borderColor-black--hover:hover { + @include ms-borderColor-black; +} + +.ms-borderColor-neutralDark, +.ms-borderColor-neutralDark--hover:hover { + @include ms-borderColor-neutralDark; +} + +.ms-borderColor-neutralPrimary, +.ms-borderColor-neutralPrimary--hover:hover { + @include ms-borderColor-neutralPrimary; +} + +.ms-borderColor-neutralPrimaryAlt, +.ms-borderColor-neutralPrimaryAlt--hover:hover { + @include ms-borderColor-neutralPrimaryAlt; +} + +.ms-borderColor-neutralSecondary, +.ms-borderColor-neutralSecondary--hover:hover { + @include ms-borderColor-neutralSecondary; +} + +.ms-borderColor-neutralSecondaryAlt, +.ms-borderColor-neutralSecondaryAlt--hover:hover { + @include ms-borderColor-neutralSecondaryAlt; +} + +.ms-borderColor-neutralTertiary, +.ms-borderColor-neutralTertiary--hover:hover { + @include ms-borderColor-neutralTertiary; +} + +.ms-borderColor-neutralTertiaryAlt, +.ms-borderColor-neutralTertiaryAlt--hover:hover { + @include ms-borderColor-neutralTertiaryAlt; +} + +.ms-borderColor-neutralLight, +.ms-borderColor-neutralLight--hover:hover { + @include ms-borderColor-neutralLight; +} + +.ms-borderColor-neutralLighter, +.ms-borderColor-neutralLighter--hover:hover { + @include ms-borderColor-neutralLighter; +} + +.ms-borderColor-neutralLighterAlt, +.ms-borderColor-neutralLighterAlt--hover:hover { + @include ms-borderColor-neutralLighterAlt; +} + +.ms-borderColor-white, +.ms-borderColor-white--hover:hover { + @include ms-borderColor-white; +} + +// Brand and accent colors +.ms-borderColor-yellow { + @include ms-borderColor-yellow; +} + +.ms-borderColor-yellowLight { + @include ms-borderColor-yellowLight; +} + +.ms-borderColor-orange { + @include ms-borderColor-orange; +} + +.ms-borderColor-orangeLight { + @include ms-borderColor-orangeLight; +} + +.ms-borderColor-orangeLighter { + @include ms-borderColor-orangeLighter; +} + +.ms-borderColor-redDark { + @include ms-borderColor-redDark; +} + +.ms-borderColor-red { + @include ms-borderColor-red; +} + +.ms-borderColor-magentaDark { + @include ms-borderColor-magentaDark; +} + +.ms-borderColor-magenta { + @include ms-borderColor-magenta; +} + +.ms-borderColor-magentaLight { + @include ms-borderColor-magentaLight; +} + +.ms-borderColor-purpleDark { + @include ms-borderColor-purpleDark; +} + +.ms-borderColor-purple { + @include ms-borderColor-purple; +} + +.ms-borderColor-purpleLight { + @include ms-borderColor-purpleLight; +} + +.ms-borderColor-blueDark { + @include ms-borderColor-blueDark; +} + +.ms-borderColor-blueMid { + @include ms-borderColor-blueMid; +} + +.ms-borderColor-blue { + @include ms-borderColor-blue; +} + +.ms-borderColor-blueLight { + @include ms-borderColor-blueLight; +} + +.ms-borderColor-tealDark { + @include ms-borderColor-tealDark; +} + +.ms-borderColor-teal { + @include ms-borderColor-teal; +} + +.ms-borderColor-tealLight { + @include ms-borderColor-tealLight; +} + +.ms-borderColor-greenDark { + @include ms-borderColor-greenDark; +} + +.ms-borderColor-green { + @include ms-borderColor-green; +} + +.ms-borderColor-greenLight { + @include ms-borderColor-greenLight; +} + +// Individual borders, by request +.ms-borderColorTop-themePrimary, +.ms-borderColorTop-themePrimary--hover:hover { + @include ms-borderColorTop-themePrimary; +} diff --git a/dist/sass/Fabric.Components.scss b/dist/sass/Fabric.Components.scss new file mode 100644 index 000000000..3c1a9a85c --- /dev/null +++ b/dist/sass/Fabric.Components.scss @@ -0,0 +1,35 @@ +@import 'Fabric.Common'; + +@import '../components/Breadcrumb/Breadcrumb'; +@import '../components/Button/Button'; +@import '../components/Callout/Callout'; +@import '../components/CheckBox/CheckBox'; +@import '../components/RadioButton/RadioButton'; +@import '../components/ChoiceFieldGroup/ChoiceFieldGroup'; +@import '../components/CommandBar/CommandBar'; +@import '../components/CommandButton/CommandButton'; +@import '../components/ContextualMenu/ContextualMenu'; +@import '../components/DatePicker/DatePicker'; +@import '../components/Dialog/Dialog'; +@import '../components/Dropdown/Dropdown'; +@import '../components/FacePile/FacePile'; +@import '../components/Label/Label'; +@import '../components/Link/Link'; +@import '../components/List/List'; +@import '../components/ListItem/ListItem'; +@import '../components/MessageBanner/MessageBanner'; +@import '../components/ContextualHost/ContextualHost'; +@import '../components/MessageBar/MessageBar'; +@import '../components/OrgChart/OrgChart'; +@import '../components/Overlay/Overlay'; +@import '../components/Panel/Panel'; +@import '../components/PeoplePicker/PeoplePicker'; +@import '../components/Persona/Persona'; +@import '../components/PersonaCard/PersonaCard'; +@import '../components/Pivot/Pivot'; +@import '../components/ProgressIndicator/ProgressIndicator'; +@import '../components/SearchBox/SearchBox'; +@import '../components/Spinner/Spinner'; +@import '../components/Table/Table'; +@import '../components/TextField/TextField'; +@import '../components/Toggle/Toggle'; diff --git a/dist/sass/Fabric.Grid.Output.scss b/dist/sass/Fabric.Grid.Output.scss new file mode 100644 index 000000000..eabedd697 --- /dev/null +++ b/dist/sass/Fabric.Grid.Output.scss @@ -0,0 +1,32 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fluid 12-column grids for small, medium, and large devices + +@import "Fabric.Grid"; + +//== Grid container (same for all sizes) +// +.ms-Grid { + @include ms-Grid; +} + +//== Grid rows (pull first and last column out) +// +.ms-Grid-row { + @include ms-Grid-row; +} + +//== Grid cells +// +.ms-Grid-col { + @include ms-Grid-col; +} + +// For nested grids (a grid inside a column), removing the padding +// so that the nested grid's columns go to the edge of the parent's. +.ms-Grid-col .ms-Grid { + padding: 0; +} diff --git a/dist/sass/Fabric.Icons.Font.Output.scss b/dist/sass/Fabric.Icons.Font.Output.scss new file mode 100644 index 000000000..d15af33a2 --- /dev/null +++ b/dist/sass/Fabric.Icons.Font.Output.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. + +// +// Office UI Fabric +// -------------------------------------------------- +// Icon font-family definition + +/* + 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 +*/ + +@import "Fabric.Typography.Fonts"; + +@font-face { + font-family: 'Office365Icons'; + src: url('#{$ms-font-directory}/icons/office365icons.eot?'); + src: url('#{$ms-font-directory}/icons/office365icons.eot?#iefix') format('embedded-opentype'), + url('#{$ms-font-directory}/icons/office365icons.woff?') format('woff'), + url('#{$ms-font-directory}/icons/office365icons.ttf?') format('truetype'), + url('#{$ms-font-directory}/icons/office365icons.svg?#office365icons') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/dist/sass/Fabric.Icons.Output.scss b/dist/sass/Fabric.Icons.Output.scss new file mode 100644 index 000000000..b0c91aa65 --- /dev/null +++ b/dist/sass/Fabric.Icons.Output.scss @@ -0,0 +1,777 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Icon definitions + + +@import './Fabric.Icons'; + +// Base icon definition +.ms-Icon { + @include ms-Icon(); +} + +// Modifiers: Each of the icons. +//*-- Start +.ms-Icon--circleEmpty:before { @include ms-Icon--circleEmpty; } +.ms-Icon--circleFill:before { @include ms-Icon--circleFill; } +.ms-Icon--placeholder:before { @include ms-Icon--placeholder; } +.ms-Icon--star:before { @include ms-Icon--star; } +.ms-Icon--plus:before { @include ms-Icon--plus; } +.ms-Icon--minus:before { @include ms-Icon--minus; } +.ms-Icon--question:before { @include ms-Icon--question; } +.ms-Icon--exclamation:before { @include ms-Icon--exclamation; } +.ms-Icon--person:before { @include ms-Icon--person; } +.ms-Icon--mail:before { @include ms-Icon--mail; } +.ms-Icon--infoCircle:before { @include ms-Icon--infoCircle; } +.ms-Icon--alert:before { @include ms-Icon--alert; } +.ms-Icon--xCircle:before { @include ms-Icon--xCircle; } +.ms-Icon--mailOpen:before { @include ms-Icon--mailOpen; } +.ms-Icon--people:before { @include ms-Icon--people; } +.ms-Icon--bell:before { @include ms-Icon--bell; } +.ms-Icon--calendar:before { @include ms-Icon--calendar; } +.ms-Icon--scheduling:before { @include ms-Icon--scheduling; } +.ms-Icon--event:before { @include ms-Icon--event; } +.ms-Icon--folder:before { @include ms-Icon--folder; } +.ms-Icon--documents:before { @include ms-Icon--documents; } +.ms-Icon--onedrive:before { @include ms-Icon--onedrive; } +.ms-Icon--chat:before { @include ms-Icon--chat; } +.ms-Icon--sites:before { @include ms-Icon--sites; } +.ms-Icon--listBullets:before { @include ms-Icon--listBullets; } +.ms-Icon--calendarWeek:before { @include ms-Icon--calendarWeek; } +.ms-Icon--calendarWorkWeek:before { @include ms-Icon--calendarWorkWeek; } +.ms-Icon--calendarDay:before { @include ms-Icon--calendarDay; } +.ms-Icon--folderMove:before { @include ms-Icon--folderMove; } +.ms-Icon--panel:before { @include ms-Icon--panel; } +.ms-Icon--popout:before { @include ms-Icon--popout; } +.ms-Icon--menu:before { @include ms-Icon--menu; } +.ms-Icon--home:before { @include ms-Icon--home; } +.ms-Icon--favorites:before { @include ms-Icon--favorites; } +.ms-Icon--phone:before { @include ms-Icon--phone; } +.ms-Icon--mailSend:before { @include ms-Icon--mailSend; } +.ms-Icon--save:before { @include ms-Icon--save; } +.ms-Icon--trash:before { @include ms-Icon--trash; } +.ms-Icon--pencil:before { @include ms-Icon--pencil; } +.ms-Icon--flag:before { @include ms-Icon--flag; } +.ms-Icon--reply:before { @include ms-Icon--reply; } +.ms-Icon--miniatures:before { @include ms-Icon--miniatures; } +.ms-Icon--voicemail:before { @include ms-Icon--voicemail; } +.ms-Icon--play:before { @include ms-Icon--play; } +.ms-Icon--pause:before { @include ms-Icon--pause; } +.ms-Icon--onlineAdd:before { @include ms-Icon--onlineAdd; } +.ms-Icon--onlineJoin:before { @include ms-Icon--onlineJoin; } +.ms-Icon--replyAll:before { @include ms-Icon--replyAll; } +.ms-Icon--attachment:before { @include ms-Icon--attachment; } +.ms-Icon--drm:before { @include ms-Icon--drm; } +.ms-Icon--pinDown:before { @include ms-Icon--pinDown; } +.ms-Icon--refresh:before { @include ms-Icon--refresh; } +.ms-Icon--gear:before { @include ms-Icon--gear; } +.ms-Icon--smiley:before { @include ms-Icon--smiley; } +.ms-Icon--info:before { @include ms-Icon--info; } +.ms-Icon--lock:before { @include ms-Icon--lock; } +.ms-Icon--search:before { @include ms-Icon--search; } +.ms-Icon--questionReverse:before { @include ms-Icon--questionReverse; } +.ms-Icon--notRecurring:before { @include ms-Icon--notRecurring; } +.ms-Icon--tasks:before { @include ms-Icon--tasks; } +.ms-Icon--check:before { @include ms-Icon--check; } +.ms-Icon--x:before { @include ms-Icon--x; } +.ms-Icon--ellipsis:before { @include ms-Icon--ellipsis; } +.ms-Icon--dot:before { @include ms-Icon--dot; } +.ms-Icon--arrowUp:before { @include ms-Icon--arrowUp; } +.ms-Icon--arrowDown:before { @include ms-Icon--arrowDown; } +.ms-Icon--arrowLeft:before { @include ms-Icon--arrowLeft; } +.ms-Icon--arrowRight:before { @include ms-Icon--arrowRight; } +.ms-Icon--download:before { @include ms-Icon--download; } +.ms-Icon--directions:before { @include ms-Icon--directions; } +.ms-Icon--microphone:before { @include ms-Icon--microphone; } +.ms-Icon--caretUp:before { @include ms-Icon--caretUp; } +.ms-Icon--caretDown:before { @include ms-Icon--caretDown; } +.ms-Icon--caretLeft:before { @include ms-Icon--caretLeft; } +.ms-Icon--caretRight:before { @include ms-Icon--caretRight; } +.ms-Icon--caretUpLeft:before { @include ms-Icon--caretUpLeft; } +.ms-Icon--caretUpRight:before { @include ms-Icon--caretUpRight; } +.ms-Icon--caretDownRight:before { @include ms-Icon--caretDownRight; } +.ms-Icon--caretDownLeft:before { @include ms-Icon--caretDownLeft; } +.ms-Icon--note:before { @include ms-Icon--note; } +.ms-Icon--noteReply:before { @include ms-Icon--noteReply; } +.ms-Icon--noteForward:before { @include ms-Icon--noteForward; } +.ms-Icon--key:before { @include ms-Icon--key; } +.ms-Icon--tile:before { @include ms-Icon--tile; } +.ms-Icon--taskRecurring:before { @include ms-Icon--taskRecurring; } +.ms-Icon--starEmpty:before { @include ms-Icon--starEmpty; } +.ms-Icon--upload:before { @include ms-Icon--upload; } +.ms-Icon--wrench:before { @include ms-Icon--wrench; } +.ms-Icon--share:before { @include ms-Icon--share; } +.ms-Icon--documentReply:before { @include ms-Icon--documentReply; } +.ms-Icon--documentForward:before { @include ms-Icon--documentForward; } +.ms-Icon--partner:before { @include ms-Icon--partner; } +.ms-Icon--reactivate:before { @include ms-Icon--reactivate; } +.ms-Icon--sort:before { @include ms-Icon--sort; } +.ms-Icon--personAdd:before { @include ms-Icon--personAdd; } +.ms-Icon--chevronUp:before { @include ms-Icon--chevronUp; } +.ms-Icon--chevronDown:before { @include ms-Icon--chevronDown; } +.ms-Icon--chevronLeft:before { @include ms-Icon--chevronLeft; } +.ms-Icon--chevronRight:before { @include ms-Icon--chevronRight; } +.ms-Icon--peopleAdd:before { @include ms-Icon--peopleAdd; } +.ms-Icon--newsfeed:before { @include ms-Icon--newsfeed; } +.ms-Icon--notebook:before { @include ms-Icon--notebook; } +.ms-Icon--link:before { @include ms-Icon--link; } +.ms-Icon--chevronsUp:before { @include ms-Icon--chevronsUp; } +.ms-Icon--chevronsDown:before { @include ms-Icon--chevronsDown; } +.ms-Icon--chevronsLeft:before { @include ms-Icon--chevronsLeft; } +.ms-Icon--chevronsRight:before { @include ms-Icon--chevronsRight; } +.ms-Icon--clutter:before { @include ms-Icon--clutter; } +.ms-Icon--subscribe:before { @include ms-Icon--subscribe; } +.ms-Icon--unsubscribe:before { @include ms-Icon--unsubscribe; } +.ms-Icon--personRemove:before { @include ms-Icon--personRemove; } +.ms-Icon--receiptForward:before { @include ms-Icon--receiptForward; } +.ms-Icon--receiptReply:before { @include ms-Icon--receiptReply; } +.ms-Icon--receiptCheck:before { @include ms-Icon--receiptCheck; } +.ms-Icon--peopleRemove:before { @include ms-Icon--peopleRemove; } +.ms-Icon--merge:before { @include ms-Icon--merge; } +.ms-Icon--split:before { @include ms-Icon--split; } +.ms-Icon--eventCancel:before { @include ms-Icon--eventCancel; } +.ms-Icon--eventShare:before { @include ms-Icon--eventShare; } +.ms-Icon--today:before { @include ms-Icon--today; } +.ms-Icon--oofReply:before { @include ms-Icon--oofReply; } +.ms-Icon--voicemailReply:before { @include ms-Icon--voicemailReply; } +.ms-Icon--voicemailForward:before { @include ms-Icon--voicemailForward; } +.ms-Icon--ribbon:before { @include ms-Icon--ribbon; } +.ms-Icon--contact:before { @include ms-Icon--contact; } +.ms-Icon--eye:before { @include ms-Icon--eye; } +.ms-Icon--glasses:before { @include ms-Icon--glasses; } +.ms-Icon--print:before { @include ms-Icon--print; } +.ms-Icon--room:before { @include ms-Icon--room; } +.ms-Icon--post:before { @include ms-Icon--post; } +.ms-Icon--toggle:before { @include ms-Icon--toggle; } +.ms-Icon--touch:before { @include ms-Icon--touch; } +.ms-Icon--clock:before { @include ms-Icon--clock; } +.ms-Icon--fax:before { @include ms-Icon--fax; } +.ms-Icon--lightning:before { @include ms-Icon--lightning; } +.ms-Icon--dialpad:before { @include ms-Icon--dialpad; } +.ms-Icon--phoneTransfer:before { @include ms-Icon--phoneTransfer; } +.ms-Icon--phoneAdd:before { @include ms-Icon--phoneAdd; } +.ms-Icon--late:before { @include ms-Icon--late; } +.ms-Icon--chatAdd:before { @include ms-Icon--chatAdd; } +.ms-Icon--conflict:before { @include ms-Icon--conflict; } +.ms-Icon--navigate:before { @include ms-Icon--navigate; } +.ms-Icon--camera:before { @include ms-Icon--camera; } +.ms-Icon--filter:before { @include ms-Icon--filter; } +.ms-Icon--fullscreen:before { @include ms-Icon--fullscreen; } +.ms-Icon--new:before { @include ms-Icon--new; } +.ms-Icon--mailEmpty:before { @include ms-Icon--mailEmpty; } +.ms-Icon--editBox:before { @include ms-Icon--editBox; } +.ms-Icon--waffle:before { @include ms-Icon--waffle; } +.ms-Icon--work:before { @include ms-Icon--work; } +.ms-Icon--eventRecurring:before { @include ms-Icon--eventRecurring; } +.ms-Icon--cart:before { @include ms-Icon--cart; } +.ms-Icon--socialListening:before { @include ms-Icon--socialListening; } +.ms-Icon--mapMarker:before { @include ms-Icon--mapMarker; } +.ms-Icon--org:before { @include ms-Icon--org; } +.ms-Icon--replyAlt:before { @include ms-Icon--replyAlt; } +.ms-Icon--replyAllAlt:before { @include ms-Icon--replyAllAlt; } +.ms-Icon--eventInfo:before { @include ms-Icon--eventInfo; } +.ms-Icon--group:before { @include ms-Icon--group; } +.ms-Icon--money:before { @include ms-Icon--money; } +.ms-Icon--graph:before { @include ms-Icon--graph; } +.ms-Icon--noteEdit:before { @include ms-Icon--noteEdit; } +.ms-Icon--dashboard:before { @include ms-Icon--dashboard; } +.ms-Icon--mailEdit:before { @include ms-Icon--mailEdit; } +.ms-Icon--pinLeft:before { @include ms-Icon--pinLeft; } +.ms-Icon--heart:before { @include ms-Icon--heart; } +.ms-Icon--heartEmpty:before { @include ms-Icon--heartEmpty; } +.ms-Icon--picture:before { @include ms-Icon--picture; } +.ms-Icon--cake:before { @include ms-Icon--cake; } +.ms-Icon--books:before { @include ms-Icon--books; } +.ms-Icon--chart:before { @include ms-Icon--chart; } +.ms-Icon--video:before { @include ms-Icon--video; } +.ms-Icon--soccer:before { @include ms-Icon--soccer; } +.ms-Icon--meal:before { @include ms-Icon--meal; } +.ms-Icon--balloon:before { @include ms-Icon--balloon; } +.ms-Icon--cat:before { @include ms-Icon--cat; } +.ms-Icon--dog:before { @include ms-Icon--dog; } +.ms-Icon--bag:before { @include ms-Icon--bag; } +.ms-Icon--music:before { @include ms-Icon--music; } +.ms-Icon--stopwatch:before { @include ms-Icon--stopwatch; } +.ms-Icon--coffee:before { @include ms-Icon--coffee; } +.ms-Icon--briefcase:before { @include ms-Icon--briefcase; } +.ms-Icon--pill:before { @include ms-Icon--pill; } +.ms-Icon--trophy:before { @include ms-Icon--trophy; } +.ms-Icon--firstAid:before { @include ms-Icon--firstAid; } +.ms-Icon--plane:before { @include ms-Icon--plane; } +.ms-Icon--page:before { @include ms-Icon--page; } +.ms-Icon--car:before { @include ms-Icon--car; } +.ms-Icon--dogAlt:before { @include ms-Icon--dogAlt; } +.ms-Icon--document:before { @include ms-Icon--document; } +.ms-Icon--metadata:before { @include ms-Icon--metadata; } +.ms-Icon--pointItem:before { @include ms-Icon--pointItem; } +.ms-Icon--text:before { @include ms-Icon--text; } +.ms-Icon--fieldText:before { @include ms-Icon--fieldText; } +.ms-Icon--fieldNumber:before { @include ms-Icon--fieldNumber; } +.ms-Icon--dropdown:before { @include ms-Icon--dropdown; } +.ms-Icon--radioButton:before { @include ms-Icon--radioButton; } +.ms-Icon--checkbox:before { @include ms-Icon--checkbox; } +.ms-Icon--story:before { @include ms-Icon--story; } +.ms-Icon--bold:before { @include ms-Icon--bold; } +.ms-Icon--italic:before { @include ms-Icon--italic; } +.ms-Icon--underline:before { @include ms-Icon--underline; } +.ms-Icon--quote:before { @include ms-Icon--quote; } +.ms-Icon--styleRemove:before { @include ms-Icon--styleRemove; } +.ms-Icon--pictureAdd:before { @include ms-Icon--pictureAdd; } +.ms-Icon--pictureRemove:before { @include ms-Icon--pictureRemove; } +.ms-Icon--desktop:before { @include ms-Icon--desktop; } +.ms-Icon--tablet:before { @include ms-Icon--tablet; } +.ms-Icon--mobile:before { @include ms-Icon--mobile; } +.ms-Icon--table:before { @include ms-Icon--table; } +.ms-Icon--hide:before { @include ms-Icon--hide; } +.ms-Icon--shield:before { @include ms-Icon--shield; } +.ms-Icon--header:before { @include ms-Icon--header; } +.ms-Icon--paint:before { @include ms-Icon--paint; } +.ms-Icon--support:before { @include ms-Icon--support; } +.ms-Icon--settings:before { @include ms-Icon--settings; } +.ms-Icon--creditCard:before { @include ms-Icon--creditCard; } +.ms-Icon--reload:before { @include ms-Icon--reload; } +.ms-Icon--peopleSecurity:before { @include ms-Icon--peopleSecurity; } +.ms-Icon--fieldTextBox:before { @include ms-Icon--fieldTextBox; } +.ms-Icon--multiChoice:before { @include ms-Icon--multiChoice; } +.ms-Icon--fieldMail:before { @include ms-Icon--fieldMail; } +.ms-Icon--contactForm:before { @include ms-Icon--contactForm; } +.ms-Icon--circleHalfFilled:before { @include ms-Icon--circleHalfFilled; } +.ms-Icon--documentPDF:before { @include ms-Icon--documentPDF; } +.ms-Icon--bookmark:before { @include ms-Icon--bookmark; } +.ms-Icon--circleUnfilled:before { @include ms-Icon--circleUnfilled; } +.ms-Icon--circleFilled:before { @include ms-Icon--circleFilled; } +.ms-Icon--textBox:before { @include ms-Icon--textBox; } +.ms-Icon--drop:before { @include ms-Icon--drop; } +.ms-Icon--sun:before { @include ms-Icon--sun; } +.ms-Icon--lifesaver:before { @include ms-Icon--lifesaver; } +.ms-Icon--lifesaverLock:before { @include ms-Icon--lifesaverLock; } +.ms-Icon--mailUnread:before { @include ms-Icon--mailUnread; } +.ms-Icon--mailRead:before { @include ms-Icon--mailRead; } +.ms-Icon--inboxCheck:before { @include ms-Icon--inboxCheck; } +.ms-Icon--folderSearch:before { @include ms-Icon--folderSearch; } +.ms-Icon--collapse:before { @include ms-Icon--collapse; } +.ms-Icon--expand:before { @include ms-Icon--expand; } +.ms-Icon--ascending:before { @include ms-Icon--ascending; } +.ms-Icon--descending:before { @include ms-Icon--descending; } +.ms-Icon--filterClear:before { @include ms-Icon--filterClear; } +.ms-Icon--checkboxEmpty:before { @include ms-Icon--checkboxEmpty; } +.ms-Icon--checkboxMixed:before { @include ms-Icon--checkboxMixed; } +.ms-Icon--boards:before { @include ms-Icon--boards; } +.ms-Icon--checkboxCheck:before { @include ms-Icon--checkboxCheck; } +.ms-Icon--frowny:before { @include ms-Icon--frowny; } +.ms-Icon--lightBulb:before { @include ms-Icon--lightBulb; } +.ms-Icon--globe:before { @include ms-Icon--globe; } +.ms-Icon--deviceWipe:before { @include ms-Icon--deviceWipe; } +.ms-Icon--listCheck:before { @include ms-Icon--listCheck; } +.ms-Icon--listGroup:before { @include ms-Icon--listGroup; } +.ms-Icon--timeline:before { @include ms-Icon--timeline; } +.ms-Icon--fontIncrease:before { @include ms-Icon--fontIncrease; } +.ms-Icon--fontDecrease:before { @include ms-Icon--fontDecrease; } +.ms-Icon--fontColor:before { @include ms-Icon--fontColor; } +.ms-Icon--mailCheck:before { @include ms-Icon--mailCheck; } +.ms-Icon--mailDown:before { @include ms-Icon--mailDown; } +.ms-Icon--listCheckbox:before { @include ms-Icon--listCheckbox; } +.ms-Icon--sunAdd:before { @include ms-Icon--sunAdd; } +.ms-Icon--sunQuestion:before { @include ms-Icon--sunQuestion; } +.ms-Icon--chevronThinUp:before { @include ms-Icon--chevronThinUp; } +.ms-Icon--chevronThinDown:before { @include ms-Icon--chevronThinDown; } +.ms-Icon--chevronThinLeft:before { @include ms-Icon--chevronThinLeft; } +.ms-Icon--chevronThinRight:before { @include ms-Icon--chevronThinRight; } +.ms-Icon--chevronThickUp:before { @include ms-Icon--chevronThickUp; } +.ms-Icon--chevronThickDown:before { @include ms-Icon--chevronThickDown; } +.ms-Icon--chevronThickLeft:before { @include ms-Icon--chevronThickLeft; } +.ms-Icon--chevronThickRight:before { @include ms-Icon--chevronThickRight; } +.ms-Icon--linkRemove:before { @include ms-Icon--linkRemove; } +.ms-Icon--alertOutline:before { @include ms-Icon--alertOutline; } +.ms-Icon--documentLandscape:before { @include ms-Icon--documentLandscape; } +.ms-Icon--documentAdd:before { @include ms-Icon--documentAdd; } +.ms-Icon--toggleMiddle:before { @include ms-Icon--toggleMiddle; } +.ms-Icon--embed:before { @include ms-Icon--embed; } +.ms-Icon--listNumbered:before { @include ms-Icon--listNumbered; } +.ms-Icon--peopleCheck:before { @include ms-Icon--peopleCheck; } +.ms-Icon--caretUpOutline:before { @include ms-Icon--caretUpOutline; } +.ms-Icon--caretDownOutline:before { @include ms-Icon--caretDownOutline; } +.ms-Icon--caretLeftOutline:before { @include ms-Icon--caretLeftOutline; } +.ms-Icon--caretRightOutline:before { @include ms-Icon--caretRightOutline; } +.ms-Icon--mailSync:before { @include ms-Icon--mailSync; } +.ms-Icon--mailError:before { @include ms-Icon--mailError; } +.ms-Icon--mailPause:before { @include ms-Icon--mailPause; } +.ms-Icon--peopleSync:before { @include ms-Icon--peopleSync; } +.ms-Icon--peopleError:before { @include ms-Icon--peopleError; } +.ms-Icon--peoplePause:before { @include ms-Icon--peoplePause; } +.ms-Icon--circleBall:before { @include ms-Icon--circleBall; } +.ms-Icon--circleBalloons:before { @include ms-Icon--circleBalloons; } +.ms-Icon--circleCar:before { @include ms-Icon--circleCar; } +.ms-Icon--circleCat:before { @include ms-Icon--circleCat; } +.ms-Icon--circleCoffee:before { @include ms-Icon--circleCoffee; } +.ms-Icon--circleDog:before { @include ms-Icon--circleDog; } +.ms-Icon--circleLightning:before { @include ms-Icon--circleLightning; } +.ms-Icon--circlePill:before { @include ms-Icon--circlePill; } +.ms-Icon--circlePlane:before { @include ms-Icon--circlePlane; } +.ms-Icon--circlePoodle:before { @include ms-Icon--circlePoodle; } +.ms-Icon--checkPeople:before { @include ms-Icon--checkPeople; } +.ms-Icon--documentSearch:before { @include ms-Icon--documentSearch; } +.ms-Icon--sortLines:before { @include ms-Icon--sortLines; } +.ms-Icon--calendarPublic:before { @include ms-Icon--calendarPublic; } +.ms-Icon--contactPublic:before { @include ms-Icon--contactPublic; } +.ms-Icon--classNotebook:before { @include ms-Icon--classNotebook; } +.ms-Icon--triangleUp:before { @include ms-Icon--triangleUp; } +.ms-Icon--triangleRight:before { @include ms-Icon--triangleRight; } +.ms-Icon--triangleDown:before { @include ms-Icon--triangleDown; } +.ms-Icon--triangleLeft:before { @include ms-Icon--triangleLeft; } +.ms-Icon--triangleEmptyUp:before { @include ms-Icon--triangleEmptyUp; } +.ms-Icon--triangleEmptyRight:before { @include ms-Icon--triangleEmptyRight; } +.ms-Icon--triangleEmptyDown:before { @include ms-Icon--triangleEmptyDown; } +.ms-Icon--triangleEmptyLeft:before { @include ms-Icon--triangleEmptyLeft; } +.ms-Icon--filePDF:before { @include ms-Icon--filePDF; } +.ms-Icon--fileImage:before { @include ms-Icon--fileImage; } +.ms-Icon--fileDocument:before { @include ms-Icon--fileDocument; } +.ms-Icon--listGroup2:before { @include ms-Icon--listGroup2; } +.ms-Icon--copy:before { @include ms-Icon--copy; } +.ms-Icon--creditCardOutline:before { @include ms-Icon--creditCardOutline; } +.ms-Icon--mailPublic:before { @include ms-Icon--mailPublic; } +.ms-Icon--folderPublic:before { @include ms-Icon--folderPublic; } +.ms-Icon--teamwork:before { @include ms-Icon--teamwork; } +.ms-Icon--move:before { @include ms-Icon--move; } +.ms-Icon--classroom:before { @include ms-Icon--classroom; } +.ms-Icon--menu2:before { @include ms-Icon--menu2; } +.ms-Icon--plus2:before { @include ms-Icon--plus2; } +.ms-Icon--tag:before { @include ms-Icon--tag; } +.ms-Icon--arrowUp2:before { @include ms-Icon--arrowUp2; } +.ms-Icon--arrowDown2:before { @include ms-Icon--arrowDown2; } +.ms-Icon--circlePlus:before { @include ms-Icon--circlePlus; } +.ms-Icon--circleInfo:before { @include ms-Icon--circleInfo; } +.ms-Icon--section:before { @include ms-Icon--section; } +.ms-Icon--sections:before { @include ms-Icon--sections; } +.ms-Icon--at:before { @include ms-Icon--at; } +.ms-Icon--arrowUpRight:before { @include ms-Icon--arrowUpRight; } +.ms-Icon--arrowDownRight:before { @include ms-Icon--arrowDownRight; } +.ms-Icon--arrowDownLeft:before { @include ms-Icon--arrowDownLeft; } +.ms-Icon--arrowUpLeft:before { @include ms-Icon--arrowUpLeft; } +.ms-Icon--bundle:before { @include ms-Icon--bundle; } +.ms-Icon--pictureEdit:before { @include ms-Icon--pictureEdit; } +.ms-Icon--protectionCenter:before { @include ms-Icon--protectionCenter; } +.ms-Icon--alert2:before { @include ms-Icon--alert2; } +.ms-Icon--skypeCircleCheck:before { @include ms-Icon--skypeCircleCheck; } +.ms-Icon--skypeCircleClock:before { @include ms-Icon--skypeCircleClock; } +.ms-Icon--skypeCircleMinus:before { @include ms-Icon--skypeCircleMinus; } +.ms-Icon--skypeCheck:before { @include ms-Icon--skypeCheck; } +.ms-Icon--skypeClock:before { @include ms-Icon--skypeClock; } +.ms-Icon--skypeMinus:before { @include ms-Icon--skypeMinus; } + +//*-- end +// Modifier: Place the icon in a circle. +.ms-Icon--circle { + @include ms-Icon--circle; +} + +// Modifiers: Some icons require custom alignment when placed in circles. +.ms-Icon--circle { + &.ms-Icon--star:before { + top: -2%; + left: 1%; + } + &.ms-Icon--person:before { + top: -2%; + left: -3%; + } + &.ms-Icon--alert:before { + top: -4%; + } + &.ms-Icon--mailOpen:before { + top: -5%; + } + &.ms-Icon--people:before { + top: -4%; + left: -7%; + } + &.ms-Icon--bell:before { + top: -3%; + } + &.ms-Icon--scheduling:before { + top: -3%; + left: 6%; + } + &.ms-Icon--documents:before { + top: -1%; + left: -2%; + } + &.ms-Icon--listBullets:before { + top: -1%; + left: 5%; + } + &.ms-Icon--panel:before { + left: -2%; + } + &.ms-Icon--popout:before { + top: -2%; + left: -2%; + } + &.ms-Icon--home:before { + top: -4%; + } + &.ms-Icon--favorites:before { + top: -2%; + left: 2%; + } + &.ms-Icon--phone:before { + top: -2%; + left: -2%; + } + &.ms-Icon--mailSend:before { + left: -10%; + } + &.ms-Icon--pencil:before { + top: -2%; + left: 3%; + } + &.ms-Icon--flag:before { + left: 3%; + } + &.ms-Icon--miniatures:before { + left: -3%; + } + &.ms-Icon--voicemail:before { + top: 2%; + left: -7%; + } + &.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; + } + &.ms-Icon--pinDown:before { + top: 5%; + } + &.ms-Icon--gear:before { + left: 2%; + } + &.ms-Icon--check:before { + top: 3%; + } + &.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; + } + &.ms-Icon--directions:before { + left: 10%; + } + &.ms-Icon--microphone:before { + top: -3%; + } + &.ms-Icon--caretDown:before { + top: 5%; + left: 2%; + } + &.ms-Icon--caretLeft:before { + left: -6%; + } + &.ms-Icon--caretRight:before { + left: 6%; + } + &.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; + } + &.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; + } + &.ms-Icon--caretDownRight:before { + left: -3%; + } + &.ms-Icon--caretDownLeft:before { + left: 4%; + } + &.ms-Icon--note:before { + top: 2%; + left: -3%; + } + &.ms-Icon--noteReply:before { + top: 6%; + left: 3%; + } + &.ms-Icon--noteForward:before { + top: 6%; + } + &.ms-Icon--key:before { + top: 5%; + left: 1%; + } + &.ms-Icon--tile:before { + top: -1%; + left: -18%; + } + &.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; + } + &.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; + } + &.ms-Icon--documentReply:before { + top: -2%; + left: 7%; + } + &.ms-Icon--documentForward:before { + left: 5%; + } + &.ms-Icon--partner:before { + top: -2%; + } + &.ms-Icon--reactivate:before { + top: -2%; + left: 6%; + } + &.ms-Icon--sort:before { + left: -19%; + } + &.ms-Icon--personAdd:before { + top: -2%; + left: 6%; + } + &.ms-Icon--chevronDown:before { + top: 4%; + } + &.ms-Icon--chevronLeft:before { + left: -5%; + } + &.ms-Icon--chevronRight:before { + left: 4%; + } + &.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; + } + &.ms-Icon--newsfeed:before { + left: -4%; + } + &.ms-Icon--notebook:before { + left: -4%; + } + &.ms-Icon--link:before { + top: 2%; + left: -18%; + } + &.ms-Icon--chevronsDown:before { + top: 5%; + } + &.ms-Icon--chevronsLeft:before { + left: -5%; + } + &.ms-Icon--chevronsRight:before { + left: 4%; + } + &.ms-Icon--personRemove:before { + left: 5%; + } + &.ms-Icon--receiptForward:before { + left: -20%; + } + &.ms-Icon--receiptReply:before { + left: -20%; + } + &.ms-Icon--receiptCheck:before { + left: -20%; + } + &.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; + } + &.ms-Icon--merge:before { + top: 2%; + } + &.ms-Icon--split:before { + top: 2%; + } + &.ms-Icon--eventCancel:before { + left: -2%; + } + &.ms-Icon--today:before { + top: -2%; + } + &.ms-Icon--oofReply:before { + left: 5%; + } + &.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; + } + &.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; + } + &.ms-Icon--eye:before { + top: -4%; + } + &.ms-Icon--post:before { + top: -4%; + left: 4%; + } + &.ms-Icon--fax:before { + top: -3%; + left: -2%; + } + &.ms-Icon--lightning:before { + top: 2%; + left: 1%; + } + &.ms-Icon--filter:before { + top: 7%; + } + &.ms-Icon--cart:before { + left: 3%; + } + &.ms-Icon--socialListening:before { + top: 2%; + } + &.ms-Icon--mapMarker:before { + top: 2%; + } + &.ms-Icon--replyAllAlt:before { + left: -16%; + } + &.ms-Icon--group:before { + left: -33%; + } + &.ms-Icon--money:before { + left: -8%; + } + &.ms-Icon--noteEdit:before { + left: 4%; + } + &.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; + } + &.ms-Icon--pinLeft:before { + left: -6%; + } + &.ms-Icon--heart:before { + top: 5%; + } + &.ms-Icon--heartEmpty:before { + top: 5%; + } + &.ms-Icon--cake:before { + top: -5%; + } + &.ms-Icon--books:before { + left: -8%; + } + &.ms-Icon--video:before { + top: -3%; + left: 3%; + } + &.ms-Icon--balloon:before { + top: 4%; + left: -1%; + } + &.ms-Icon--music:before { + top: -2%; + left: -5%; + } + &.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; + } + &.ms-Icon--coffee:before { + top: -3%; + left: 3%; + } + &.ms-Icon--plane:before { + left: 4%; + } + &.ms-Icon--dogAlt:before { + left: -15%; + } + &.ms-Icon--metadata:before { + top: -4%; + left: 4%; + } + &.ms-Icon--text:before { + top: -4%; + left: 10%; + } + &.ms-Icon--fieldText:before { + left: -14%; + } + &.ms-Icon--fieldNumber:before { + left: -14%; + } + &.ms-Icon--dropdown:before { + left: -14%; + } + &.ms-Icon--story:before { + left: -5%; + } + &.ms-Icon--bold:before { + left: 4%; + } + &.ms-Icon--underline:before { + top: 4%; + } + &.ms-Icon--quote:before { + left: -4%; + } + &.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; + } + &.ms-Icon--pictureAdd:before { + left: -6%; + } + &.ms-Icon--pictureRemove:before { + left: -6%; + } + &.ms-Icon--mobile:before { + left: -3%; + } + &.ms-Icon--hide:before { + top: -4%; + } + &.ms-Icon--header:before { + left: -9%; + } + &.ms-Icon--msn:before { + left: 3%; + } + &.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; + } + &.ms-Icon--caretDownOutline:before { + top: 6%; + } + &.ms-Icon--caretLeftOutline:before { + left: -5%; + } + &.ms-Icon--caretRightOutline:before { + left: 5%; + } + &.ms-Icon--sway:before { + left: -3%; + } + &.ms-Icon--mailSync:before { + left: 8%; + top: 3%; + } + &.ms-Icon--peopleSync:before { + left: -8%; + } + &.ms-Icon--peopleError:before { + left: -8%; + } + &.ms-Icon--peoplePause:before { + left: -8%; + } + &.ms-Icon--documentSearch:before { + left: 8%; + } + &.ms-Icon--dynamicsMarketing:before { + left: -8%; + } +} diff --git a/dist/sass/Fabric.Icons.RTL.Output.scss b/dist/sass/Fabric.Icons.RTL.Output.scss new file mode 100644 index 000000000..d7dfcaf13 --- /dev/null +++ b/dist/sass/Fabric.Icons.RTL.Output.scss @@ -0,0 +1,114 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// RTL overrides for Fabricicons + + +@import 'Fabric.Icons.Output'; + +// Flip icons with 'directionality' +.ms-Icon--question, +.ms-Icon--calendar, +.ms-Icon--folder, +.ms-Icon--chat, +.ms-Icon--listBullets, +.ms-Icon--folderMove, +.ms-Icon--mailSend, +.ms-Icon--reply, +.ms-Icon--play, +.ms-Icon--replyAll, +.ms-Icon--refresh, +.ms-Icon--questionReverse, +.ms-Icon--notRecurring, +.ms-Icon--tasks, +.ms-Icon--check, +.ms-Icon--arrowLeft, +.ms-Icon--arrowRight, +.ms-Icon--directions, +.ms-Icon--caretLeft, +.ms-Icon--caretRight, +.ms-Icon--caretUpLeft, +.ms-Icon--caretUpRight, +.ms-Icon--caretDownRight, +.ms-Icon--caretDownLeft, +.ms-Icon--note, +.ms-Icon--noteReply, +.ms-Icon--noteForward, +.ms-Icon--taskRecurring, +.ms-Icon--documentReply, +.ms-Icon--documentForward, +.ms-Icon--reactivate, +.ms-Icon--chevronLeft, +.ms-Icon--chevronRight, +.ms-Icon--notebook, +.ms-Icon--chevronsLeft, +.ms-Icon--chevronsRight, +.ms-Icon--receiptForward, +.ms-Icon--receiptReply, +.ms-Icon--receiptCheck, +.ms-Icon--eventShare, +.ms-Icon--oofReply, +.ms-Icon--voicemailReply, +.ms-Icon--voicemailForward, +.ms-Icon--post, +.ms-Icon--toggle, +.ms-Icon--late, +.ms-Icon--eventRecurring, +.ms-Icon--cart, +.ms-Icon--socialListening, +.ms-Icon--replyAlt, +.ms-Icon--replyAllAlt, +.ms-Icon--graph, +.ms-Icon--pinLeft, +.ms-Icon--chart, +.ms-Icon--page, +.ms-Icon--document, +.ms-Icon--metadata, +.ms-Icon--pointItem, +.ms-Icon--dropdown, +.ms-Icon--checkbox, +.ms-Icon--reload, +.ms-Icon--multiChoice, +.ms-Icon--contactForm, +.ms-Icon--inboxCheck, +.ms-Icon--checkboxCheck, +.ms-Icon--folderSearch, +.ms-Icon--listCheck, +.ms-Icon--listGroup, +.ms-Icon--timeline +.ms-Icon--mailCheck, +.ms-Icon--listCheckbox, +.ms-Icon--sunQuestion, +.ms-Icon--chevronThinLeft, +.ms-Icon--chevronThinRight, +.ms-Icon--chevronThickLeft, +.ms-Icon--chevronThickRight, +.ms-Icon--documentLandscape, +.ms-Icon--peopleCheck, +.ms-Icon--caretLeftOutline, +.ms-Icon--caretRightOutline, +.ms-Icon--mailSync, +.ms-Icon--peopleSync, +.ms-Icon--checkPeople, +.ms-Icon--sortLines, +.ms-Icon--triangleRight:before, +.ms-Icon--triangleLeft:before, +.ms-Icon--contactPublic:before, +.ms-Icon--triangleEmptyRight:before, +.ms-Icon--triangleEmptyLeft:before, +.ms-Icon--fileDocument:before, +.ms-Icon--listGroup2:before, +.ms-Icon--copy:before, +.ms-Icon--sections:before, +.ms-Icon--arrowUpRight:before, +.ms-Icon--arrowDownRight:before, +.ms-Icon--arrowDownLeft:before, +.ms-Icon--arrowUpLeft:before, +.ms-Icon--bundle:before { + -moz-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + -o-transform: scaleX(-1); + transform: scaleX(-1); +} \ No newline at end of file diff --git a/dist/sass/Fabric.RTL.scss b/dist/sass/Fabric.RTL.scss new file mode 100644 index 000000000..ef50a7f70 --- /dev/null +++ b/dist/sass/Fabric.RTL.scss @@ -0,0 +1,36 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// OSS Framework Design Language +// -------------------------------------------------- +// Fabric Core Module Loader (RTL) + +// Common utilities +@import './Fabric.Utilities.Output'; +@import './Fabric.ZIndex.Variables'; +@import './Fabric.Mixins'; +@import './Fabric.Mixins.RTL'; + +// Colors +@import './Fabric.Color.Variables'; +@import './Fabric.Color.Mixins.Output'; + +// Typography +@import './Fabric.Typography.Variables'; +@import './Fabric.Typography.Fonts.Output'; +@import './Fabric.Typography.Output'; +@import './Fabric.Typography.Language.Overrides.Output'; + +// Icons +@import './Fabric.Icons.Font.Output'; +@import './Fabric.Icons.RTL.Output'; + +// Animations +@import './Fabric.Animations.RTL.Output'; + +// Responsive +@import './Fabric.Responsive.Variables'; +@import './Fabric.Responsive.Utilities.Output'; + +// Grid +@import './Fabric.Grid.Output'; diff --git a/dist/sass/Fabric.Responsive.Utilities.Output.scss b/dist/sass/Fabric.Responsive.Utilities.Output.scss new file mode 100644 index 000000000..caa7c267b --- /dev/null +++ b/dist/sass/Fabric.Responsive.Utilities.Output.scss @@ -0,0 +1,1022 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Responsive utilities based on defined variables, component visibility, +// and size for different displays. +@import "./Fabric.Responsive.Variables"; +@import "./Fabric.Responsive.Utilities.Variables"; + +//== Responsive visiblity classes +// + +// Hidden on small +@media (max-width: $ms-screen-sm-max) { + .ms-u-hiddenSm, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on medium +@media (min-width: $ms-screen-md-min) and (max-width: $ms-screen-md-max) { + .ms-u-hiddenMd, + .ms-u-hiddenMdUp, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on large +@media (min-width: $ms-screen-lg-min) and (max-width: $ms-screen-lg-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLg, + .ms-u-hiddenLgUp, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra large +@media (min-width: $ms-screen-xl-min) and (max-width: $ms-screen-xl-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXl, + .ms-u-hiddenXlUp, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra extra large +@media (min-width: $ms-screen-xxl-min) and (max-width: $ms-screen-xxl-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxl, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra extra extra large +@media (min-width: $ms-screen-xxxl-min) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxxl { + display: none !important; + } +} + + +//== Responsive sizes +// +// These are all based on a 12 column grid. For example, +// ms-u-sm6 sets the width to 50% (6/12) on small screens. + +// Small screens (default) +.ms-u-sm12 { + @include ms-u-sm12; +} +.ms-u-sm11 { + @include ms-u-sm11; +} +.ms-u-sm10 { + @include ms-u-sm10; +} +.ms-u-sm9 { + @include ms-u-sm9; +} +.ms-u-sm8 { + @include ms-u-sm8; +} +.ms-u-sm7 { + @include ms-u-sm7; +} +.ms-u-sm6 { + @include ms-u-sm6; +} +.ms-u-sm5 { + @include ms-u-sm5; +} +.ms-u-sm4 { + @include ms-u-sm4; +} +.ms-u-sm3 { + @include ms-u-sm3; +} +.ms-u-sm2 { + @include ms-u-sm2; +} +.ms-u-sm1 { + @include ms-u-sm1; +} +.ms-u-smPull12 { + @include ms-u-smPull12; +} +.ms-u-smPull11 { + @include ms-u-smPull11; +} +.ms-u-smPull10 { + @include ms-u-smPull10; +} +.ms-u-smPull9 { + @include ms-u-smPull9; +} +.ms-u-smPull8 { + @include ms-u-smPull8; +} +.ms-u-smPull7 { + @include ms-u-smPull7; +} +.ms-u-smPull6 { + @include ms-u-smPull6; +} +.ms-u-smPull5 { + @include ms-u-smPull5; +} +.ms-u-smPull4 { + @include ms-u-smPull4; +} +.ms-u-smPull3 { + @include ms-u-smPull3; +} +.ms-u-smPull2 { + @include ms-u-smPull2; +} +.ms-u-smPull1 { + @include ms-u-smPull1; +} +.ms-u-smPull0 { + @include ms-u-smPull0; +} +.ms-u-smPush12 { + @include ms-u-smPush12; +} +.ms-u-smPush11 { + @include ms-u-smPush11; +} +.ms-u-smPush10 { + @include ms-u-smPush10; +} +.ms-u-smPush9 { + @include ms-u-smPush9; +} +.ms-u-smPush8 { + @include ms-u-smPush8; +} +.ms-u-smPush7 { + @include ms-u-smPush7; +} +.ms-u-smPush6 { + @include ms-u-smPush6; +} +.ms-u-smPush5 { + @include ms-u-smPush5; +} +.ms-u-smPush4 { + @include ms-u-smPush4; +} +.ms-u-smPush3 { + @include ms-u-smPush3; +} +.ms-u-smPush2 { + @include ms-u-smPush2; +} +.ms-u-smPush1 { + @include ms-u-smPush1; +} +.ms-u-smPush0 { + @include ms-u-smPush0; +} + +// Small Offset classes 0 ... 11 +.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; +} + +// Medium screens +@media (min-width: $ms-screen-md-min) { + .ms-u-md12 { + @include ms-u-md12; + } + .ms-u-md11 { + @include ms-u-md11; + } + .ms-u-md10 { + @include ms-u-md10; + } + .ms-u-md9 { + @include ms-u-md9; + } + .ms-u-md8 { + @include ms-u-md8; + } + .ms-u-md7 { + @include ms-u-md7; + } + .ms-u-md6 { + @include ms-u-md6; + } + .ms-u-md5 { + @include ms-u-md5; + } + .ms-u-md4 { + @include ms-u-md4; + } + .ms-u-md3 { + @include ms-u-md3; + } + .ms-u-md2 { + @include ms-u-md2; + } + .ms-u-md1 { + @include ms-u-md1; + } + .ms-u-mdPull12 { + @include ms-u-mdPull12; + } + .ms-u-mdPull11 { + @include ms-u-mdPull11; + } + .ms-u-mdPull10 { + @include ms-u-mdPull10; + } + .ms-u-mdPull9 { + @include ms-u-mdPull9; + } + .ms-u-mdPull8 { + @include ms-u-mdPull8; + } + .ms-u-mdPull7 { + @include ms-u-mdPull7; + } + .ms-u-mdPull6 { + @include ms-u-mdPull6; + } + .ms-u-mdPull5 { + @include ms-u-mdPull5; + } + .ms-u-mdPull4 { + @include ms-u-mdPull4; + } + .ms-u-mdPull3 { + @include ms-u-mdPull3; + } + .ms-u-mdPull2 { + @include ms-u-mdPull2; + } + .ms-u-mdPull1 { + @include ms-u-mdPull1; + } + .ms-u-mdPull0 { + @include ms-u-mdPull0; + } + .ms-u-mdPush12 { + @include ms-u-mdPush12; + } + .ms-u-mdPush11 { + @include ms-u-mdPush11; + } + .ms-u-mdPush10 { + @include ms-u-mdPush10; + } + .ms-u-mdPush9 { + @include ms-u-mdPush9; + } + .ms-u-mdPush8 { + @include ms-u-mdPush8; + } + .ms-u-mdPush7 { + @include ms-u-mdPush7; + } + .ms-u-mdPush6 { + @include ms-u-mdPush6; + } + .ms-u-mdPush5 { + @include ms-u-mdPush5; + } + .ms-u-mdPush4 { + @include ms-u-mdPush4; + } + .ms-u-mdPush3 { + @include ms-u-mdPush3; + } + .ms-u-mdPush2 { + @include ms-u-mdPush2; + } + .ms-u-mdPush1 { + @include ms-u-mdPush1; + } + .ms-u-mdPush0 { + @include ms-u-mdPush0; + } + + // Medium Offset classes 0 ... 11 + .ms-u-mdOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-mdOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-mdOffset9 { + margin-left: 75%; + } + .ms-u-mdOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-mdOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-mdOffset6 { + margin-left: 50%; + } + .ms-u-mdOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-mdOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-mdOffset3 { + margin-left: 25%; + } + .ms-u-mdOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-mdOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-mdOffset0 { + margin-left: 0; + } +} + +// Large screens +@media (min-width: $ms-screen-lg-min) { + .ms-u-lg12 { + @include ms-u-lg12; + } + .ms-u-lg11 { + @include ms-u-lg11; + } + .ms-u-lg10 { + @include ms-u-lg10; + } + .ms-u-lg9 { + @include ms-u-lg9; + } + .ms-u-lg8 { + @include ms-u-lg8; + } + .ms-u-lg7 { + @include ms-u-lg7; + } + .ms-u-lg6 { + @include ms-u-lg6; + } + .ms-u-lg5 { + @include ms-u-lg5; + } + .ms-u-lg4 { + @include ms-u-lg4; + } + .ms-u-lg3 { + @include ms-u-lg3; + } + .ms-u-lg2 { + @include ms-u-lg2; + } + .ms-u-lg1 { + @include ms-u-lg1; + } + .ms-u-lgPull12 { + @include ms-u-lgPull12; + } + .ms-u-lgPull11 { + @include ms-u-lgPull11; + } + .ms-u-lgPull10 { + @include ms-u-lgPull10; + } + .ms-u-lgPull9 { + @include ms-u-lgPull9; + } + .ms-u-lgPull8 { + @include ms-u-lgPull8; + } + .ms-u-lgPull7 { + @include ms-u-lgPull7; + } + .ms-u-lgPull6 { + @include ms-u-lgPull6; + } + .ms-u-lgPull5 { + @include ms-u-lgPull5; + } + .ms-u-lgPull4 { + @include ms-u-lgPull4; + } + .ms-u-lgPull3 { + @include ms-u-lgPull3; + } + .ms-u-lgPull2 { + @include ms-u-lgPull2; + } + .ms-u-lgPull1 { + @include ms-u-lgPull1; + } + .ms-u-lgPull0 { + @include ms-u-lgPull0; + } + .ms-u-lgPush12 { + @include ms-u-lgPush12; + } + .ms-u-lgPush11 { + @include ms-u-lgPush11; + } + .ms-u-lgPush10 { + @include ms-u-lgPush10; + } + .ms-u-lgPush9 { + @include ms-u-lgPush9; + } + .ms-u-lgPush8 { + @include ms-u-lgPush8; + } + .ms-u-lgPush7 { + @include ms-u-lgPush7; + } + .ms-u-lgPush6 { + @include ms-u-lgPush6; + } + .ms-u-lgPush5 { + @include ms-u-lgPush5; + } + .ms-u-lgPush4 { + @include ms-u-lgPush4; + } + .ms-u-lgPush3 { + @include ms-u-lgPush3; + } + .ms-u-lgPush2 { + @include ms-u-lgPush2; + } + .ms-u-lgPush1 { + @include ms-u-lgPush1; + } + .ms-u-lgPush0 { + @include ms-u-lgPush0; + } + + // Large Offset classes 0 ... 11 + .ms-u-lgOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-lgOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-lgOffset9 { + margin-left: 75%; + } + .ms-u-lgOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-lgOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-lgOffset6 { + margin-left: 50%; + } + .ms-u-lgOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-lgOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-lgOffset3 { + margin-left: 25%; + } + .ms-u-lgOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-lgOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-lgOffset0 { + margin-left: 0; + } +} + +// Extra large screens +@media (min-width: $ms-screen-xl-min) { + .ms-u-xl12 { + @include ms-u-xl12; + } + .ms-u-xl11 { + @include ms-u-xl11; + } + .ms-u-xl10 { + @include ms-u-xl10; + } + .ms-u-xl9 { + @include ms-u-xl9; + } + .ms-u-xl8 { + @include ms-u-xl8; + } + .ms-u-xl7 { + @include ms-u-xl7; + } + .ms-u-xl6 { + @include ms-u-xl6; + } + .ms-u-xl5 { + @include ms-u-xl5; + } + .ms-u-xl4 { + @include ms-u-xl4; + } + .ms-u-xl3 { + @include ms-u-xl3; + } + .ms-u-xl2 { + @include ms-u-xl2; + } + .ms-u-xl1 { + @include ms-u-xl1; + } + .ms-u-xlPull12 { + @include ms-u-xlPull12; + } + .ms-u-xlPull11 { + @include ms-u-xlPull11; + } + .ms-u-xlPull10 { + @include ms-u-xlPull10; + } + .ms-u-xlPull9 { + @include ms-u-xlPull9; + } + .ms-u-xlPull8 { + @include ms-u-xlPull8; + } + .ms-u-xlPull7 { + @include ms-u-xlPull7; + } + .ms-u-xlPull6 { + @include ms-u-xlPull6; + } + .ms-u-xlPull5 { + @include ms-u-xlPull5; + } + .ms-u-xlPull4 { + @include ms-u-xlPull4; + } + .ms-u-xlPull3 { + @include ms-u-xlPull3; + } + .ms-u-xlPull2 { + @include ms-u-xlPull2; + } + .ms-u-xlPull1 { + @include ms-u-xlPull1; + } + .ms-u-xlPull0 { + @include ms-u-xlPull0; + } + .ms-u-xlPush12 { + @include ms-u-xlPush12; + } + .ms-u-xlPush11 { + @include ms-u-xlPush11; + } + .ms-u-xlPush10 { + @include ms-u-xlPush10; + } + .ms-u-xlPush9 { + @include ms-u-xlPush9; + } + .ms-u-xlPush8 { + @include ms-u-xlPush8; + } + .ms-u-xlPush7 { + @include ms-u-xlPush7; + } + .ms-u-xlPush6 { + @include ms-u-xlPush6; + } + .ms-u-xlPush5 { + @include ms-u-xlPush5; + } + .ms-u-xlPush4 { + @include ms-u-xlPush4; + } + .ms-u-xlPush3 { + @include ms-u-xlPush3; + } + .ms-u-xlPush2 { + @include ms-u-xlPush2; + } + .ms-u-xlPush1 { + @include ms-u-xlPush1; + } + .ms-u-xlPush0 { + @include ms-u-xlPush0; + } + + // Large Offset classes 0 ... 11 + .ms-u-xlOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-xlOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-xlOffset9 { + margin-left: 75%; + } + .ms-u-xlOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-xlOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-xlOffset6 { + margin-left: 50%; + } + .ms-u-xlOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-xlOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-xlOffset3 { + margin-left: 25%; + } + .ms-u-xlOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-xlOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-xlOffset0 { + margin-left: 0; + } +} + +// Extra extra large screens +@media (min-width: $ms-screen-xxl-min) { + .ms-u-xxl12 { + @include ms-u-xxl12; + } + .ms-u-xxl11 { + @include ms-u-xxl11; + } + .ms-u-xxl10 { + @include ms-u-xxl10; + } + .ms-u-xxl9 { + @include ms-u-xxl9; + } + .ms-u-xxl8 { + @include ms-u-xxl8; + } + .ms-u-xxl7 { + @include ms-u-xxl7; + } + .ms-u-xxl6 { + @include ms-u-xxl6; + } + .ms-u-xxl5 { + @include ms-u-xxl5; + } + .ms-u-xxl4 { + @include ms-u-xxl4; + } + .ms-u-xxl3 { + @include ms-u-xxl3; + } + .ms-u-xxl2 { + @include ms-u-xxl2; + } + .ms-u-xxl1 { + @include ms-u-xxl1; + } + .ms-u-xxlPull12 { + @include ms-u-xxlPull12; + } + .ms-u-xxlPull11 { + @include ms-u-xxlPull11; + } + .ms-u-xxlPull10 { + @include ms-u-xxlPull10; + } + .ms-u-xxlPull9 { + @include ms-u-xxlPull9; + } + .ms-u-xxlPull8 { + @include ms-u-xxlPull8; + } + .ms-u-xxlPull7 { + @include ms-u-xxlPull7; + } + .ms-u-xxlPull6 { + @include ms-u-xxlPull6; + } + .ms-u-xxlPull5 { + @include ms-u-xxlPull5; + } + .ms-u-xxlPull4 { + @include ms-u-xxlPull4; + } + .ms-u-xxlPull3 { + @include ms-u-xxlPull3; + } + .ms-u-xxlPull2 { + @include ms-u-xxlPull2; + } + .ms-u-xxlPull1 { + @include ms-u-xxlPull1; + } + .ms-u-xxlPull0 { + @include ms-u-xxlPull0; + } + .ms-u-xxlPush12 { + @include ms-u-xxlPush12; + } + .ms-u-xxlPush11 { + @include ms-u-xxlPush11; + } + .ms-u-xxlPush10 { + @include ms-u-xxlPush10; + } + .ms-u-xxlPush9 { + @include ms-u-xxlPush9; + } + .ms-u-xxlPush8 { + @include ms-u-xxlPush8; + } + .ms-u-xxlPush7 { + @include ms-u-xxlPush7; + } + .ms-u-xxlPush6 { + @include ms-u-xxlPush6; + } + .ms-u-xxlPush5 { + @include ms-u-xxlPush5; + } + .ms-u-xxlPush4 { + @include ms-u-xxlPush4; + } + .ms-u-xxlPush3 { + @include ms-u-xxlPush3; + } + .ms-u-xxlPush2 { + @include ms-u-xxlPush2; + } + .ms-u-xxlPush1 { + @include ms-u-xxlPush1; + } + .ms-u-xxlPush0 { + @include ms-u-xxlPush0; + } + + // Extra extra large Offset classes 0 ... 11 + .ms-u-xxlOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-xxlOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-xxlOffset9 { + margin-left: 75%; + } + .ms-u-xxlOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-xxlOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-xxlOffset6 { + margin-left: 50%; + } + .ms-u-xxlOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-xxlOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-xxlOffset3 { + margin-left: 25%; + } + .ms-u-xxlOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-xxlOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-xxlOffset0 { + margin-left: 0; + } +} + +// Extra extra extra large screens +@media (min-width: $ms-screen-xxxl-min) { + .ms-u-xxxl12 { + @include ms-u-xxxl12; + } + .ms-u-xxxl11 { + @include ms-u-xxxl11; + } + .ms-u-xxxl10 { + @include ms-u-xxxl10; + } + .ms-u-xxxl9 { + @include ms-u-xxxl9; + } + .ms-u-xxxl8 { + @include ms-u-xxxl8; + } + .ms-u-xxxl7 { + @include ms-u-xxxl7; + } + .ms-u-xxxl6 { + @include ms-u-xxxl6; + } + .ms-u-xxxl5 { + @include ms-u-xxxl5; + } + .ms-u-xxxl4 { + @include ms-u-xxxl4; + } + .ms-u-xxxl3 { + @include ms-u-xxxl3; + } + .ms-u-xxxl2 { + @include ms-u-xxxl2; + } + .ms-u-xxxl1 { + @include ms-u-xxxl1; + } + .ms-u-xxxlPull12 { + @include ms-u-xxxlPull12; + } + .ms-u-xxxlPull11 { + @include ms-u-xxxlPull11; + } + .ms-u-xxxlPull10 { + @include ms-u-xxxlPull10; + } + .ms-u-xxxlPull9 { + @include ms-u-xxxlPull9; + } + .ms-u-xxxlPull8 { + @include ms-u-xxxlPull8; + } + .ms-u-xxxlPull7 { + @include ms-u-xxxlPull7; + } + .ms-u-xxxlPull6 { + @include ms-u-xxxlPull6; + } + .ms-u-xxxlPull5 { + @include ms-u-xxxlPull5; + } + .ms-u-xxxlPull4 { + @include ms-u-xxxlPull4; + } + .ms-u-xxxlPull3 { + @include ms-u-xxxlPull3; + } + .ms-u-xxxlPull2 { + @include ms-u-xxxlPull2; + } + .ms-u-xxxlPull1 { + @include ms-u-xxxlPull1; + } + .ms-u-xxxlPull0 { + @include ms-u-xxxlPull0; + } + .ms-u-xxxlPush12 { + @include ms-u-xxxlPush12; + } + .ms-u-xxxlPush11 { + @include ms-u-xxxlPush11; + } + .ms-u-xxxlPush10 { + @include ms-u-xxxlPush10; + } + .ms-u-xxxlPush9 { + @include ms-u-xxxlPush9; + } + .ms-u-xxxlPush8 { + @include ms-u-xxxlPush8; + } + .ms-u-xxxlPush7 { + @include ms-u-xxxlPush7; + } + .ms-u-xxxlPush6 { + @include ms-u-xxxlPush6; + } + .ms-u-xxxlPush5 { + @include ms-u-xxxlPush5; + } + .ms-u-xxxlPush4 { + @include ms-u-xxxlPush4; + } + .ms-u-xxxlPush3 { + @include ms-u-xxxlPush3; + } + .ms-u-xxxlPush2 { + @include ms-u-xxxlPush2; + } + .ms-u-xxxlPush1 { + @include ms-u-xxxlPush1; + } + .ms-u-xxxlPush0 { + @include ms-u-xxxlPush0; + } + + // Extra extra extra large Offset classes 0 ... 11 + .ms-u-xxxlOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-xxxlOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-xxxlOffset9 { + margin-left: 75%; + } + .ms-u-xxxlOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-xxxlOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-xxxlOffset6 { + margin-left: 50%; + } + .ms-u-xxxlOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-xxxlOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-xxxlOffset3 { + margin-left: 25%; + } + .ms-u-xxxlOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-xxxlOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-xxxlOffset0 { + margin-left: 0; + } +} diff --git a/dist/sass/Fabric.Typography.Fonts.Extended.Output.scss b/dist/sass/Fabric.Typography.Fonts.Extended.Output.scss new file mode 100644 index 000000000..929f7a19b --- /dev/null +++ b/dist/sass/Fabric.Typography.Fonts.Extended.Output.scss @@ -0,0 +1,67 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- + +// Additional @font-face rules for the Leelawadee font. +@font-face { + font-family: "Leelawadee UI"; + src: local('Leelawadee UI Bold'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff2') format('woff2'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "Leelawadee UI"; + src: local('Leelawadee UI Regular'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff2') format('woff2'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Leelawadee UI"; + src: local('Leelawadee UI Semilight'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff2') format('woff2'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +// Mixins to generate language-specific font faces. +@include SegoeUIArabicLight; +@include SegoeUIArabicRegular; +@include SegoeUIArabicSemibold; +@include SegoeUIArabicSemilight; + +@include SegoeUICyrillicLight; +@include SegoeUICyrillicRegular; +@include SegoeUICyrillicSemibold; +@include SegoeUICyrillicSemilight; + +@include SegoeUIEastEuropeanLight; +@include SegoeUIEastEuropeanRegular; +@include SegoeUIEastEuropeanSemibold; +@include SegoeUIEastEuropeanSemilight; + +@include SegoeUIGreekLight; +@include SegoeUIGreekRegular; +@include SegoeUIGreekSemibold; +@include SegoeUIGreekSemilight; + +@include SegoeUIHebrewLight; +@include SegoeUIHebrewRegular; +@include SegoeUIHebrewSemibold; +@include SegoeUIHebrewSemilight; + +@include SegoeUIVietnameseLight; +@include SegoeUIVietnameseRegular; +@include SegoeUIVietnameseSemibold; +@include SegoeUIVietnameseSemilight; diff --git a/dist/sass/Fabric.Typography.Fonts.Output.scss b/dist/sass/Fabric.Typography.Fonts.Output.scss new file mode 100644 index 000000000..3a6688a38 --- /dev/null +++ b/dist/sass/Fabric.Typography.Fonts.Output.scss @@ -0,0 +1,13 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Font definitions + +@import "Fabric.Typography.Fonts"; + +@include SegoeUIWestEuropeanLight; +@include SegoeUIWestEuropeanRegular; +@include SegoeUIWestEuropeanSemibold; +@include SegoeUIWestEuropeanSemilight; \ No newline at end of file diff --git a/dist/sass/Fabric.Typography.Language.Overrides.Output.scss b/dist/sass/Fabric.Typography.Language.Overrides.Output.scss new file mode 100644 index 000000000..829d7aa24 --- /dev/null +++ b/dist/sass/Fabric.Typography.Language.Overrides.Output.scss @@ -0,0 +1,53 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Language override definitions using ISO 639-3 language codes + +@import "./Fabric.Typography.Language.Overrides"; + +// Generate the override classes for non-distributed fonts. +@include language-override-system-fonts(jpn, $ms-font-stack-japanese); +@include language-override-system-fonts(kor, $ms-font-stack-korean); +@include language-override-system-fonts(cmn, $ms-font-stack-chinese-simplified); +@include language-override-system-fonts(yue, $ms-font-stack-chinese-traditional); +@include language-override-system-fonts(hin, $ms-font-stack-hindi); + +// Generate the override classes for web fonts. +// Thai (Leelawadee) +// tha +@include language-override-system-fonts(tha, $ms-font-stack-leelawadee); + +// Arabic +// ara +@include language-override-system-fonts(ara, $ms-font-stack-arabic); + +// East European +// ces, et, hrv, hun, lit, pl, lat, tur, slk, kaz +@include language-override-system-fonts(ces, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(est, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(hrv, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(hun, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(kaz, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(lav, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(lit, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(pol, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(slk, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(tur, $ms-font-stack-eastEuropean); + +// Cyrillic +// rus +@include language-override-system-fonts(rus, $ms-font-stack-cyrillic); + +// Greek +// ell +@include language-override-system-fonts(ell, $ms-font-stack-greek); + +// Hebrew +// heb +@include language-override-system-fonts(heb, $ms-font-stack-hebrew); + +// Vietnamese +// vie +@include language-override-system-fonts(vie, $ms-font-stack-vietnamese); \ No newline at end of file diff --git a/dist/sass/Fabric.Typography.Output.scss b/dist/sass/Fabric.Typography.Output.scss new file mode 100644 index 000000000..8d2e8285c --- /dev/null +++ b/dist/sass/Fabric.Typography.Output.scss @@ -0,0 +1,389 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Typographic mixins arranged with appropriate size and family combinations. +@import './Fabric.Typography'; + +// Super Styles (LIMITED USE) +// Weights: Light +.ms-font-su { + @include ms-font-su; +} +// No touch class for Super + +// Extra-Extra-Large +// Allowed weights: Light, SemiLight +.ms-font-xxl { + @include ms-font-xxl; +} + +// Extra-Large Styles +// Allowed weights: Light, SemiLight +.ms-font-xl { + @include ms-font-xl; +} + +// Large Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-l { + @include ms-font-l; +} + +// Medium Plus Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-m-plus { + @include ms-font-m-plus; +} + +// Medium Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-m { + @include ms-font-m; +} + +// Small Plus Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-s-plus { + @include ms-font-s-plus; +} + +// Small Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-s { + @include ms-font-s; +} + +// XS Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-xs { + @include ms-font-xs; +} + +// Micro Styles (LIMITED USE) +// Weights: Semibold +.ms-font-mi { + @include ms-font-mi; +} + +//== Helper classes & mixins +// +// Helper mixins to override default type values + +// Font weights +.ms-fontWeight-light, +.ms-fontWeight-light--hover:hover { + @include ms-fontWeight-light; +} + +.ms-fontWeight-semilight, +.ms-fontWeight-semilight--hover:hover { + @include ms-fontWeight-semilight; +} + +.ms-fontWeight-regular, +.ms-fontWeight-regular--hover:hover { + @include ms-fontWeight-regular; +} + +.ms-fontWeight-semibold, +.ms-fontWeight-semibold--hover:hover { + @include ms-fontWeight-semibold; +} + +// Font sizes +.ms-fontSize-su { + @include ms-fontSize-su; +} + +.ms-fontSize-xxl { + @include ms-fontSize-xxl; +} + +.ms-fontSize-xl { + @include ms-fontSize-xl; +} + +.ms-fontSize-l { + @include ms-fontSize-l; +} + +.ms-fontSize-mPlus { + @include ms-fontSize-mPlus; +} + +.ms-fontSize-m { + @include ms-fontSize-m; +} + +.ms-fontSize-sPlus { + @include ms-fontSize-sPlus; +} + +.ms-fontSize-s { + @include ms-fontSize-s; +} + +.ms-fontSize-xs { + @include ms-fontSize-xs; +} + +.ms-fontSize-mi { + @include ms-fontSize-mi; +} + +// Theme colors +.ms-fontColor-themeDarker, +.ms-fontColor-themeDarker--hover:hover { + @include ms-fontColor-themeDarker; +} + +.ms-fontColor-themeDark, +.ms-fontColor-themeDark--hover:hover { + @include ms-fontColor-themeDark; +} + +.ms-fontColor-themeDarkAlt, +.ms-fontColor-themeDarkAlt--hover:hover { + @include ms-fontColor-themeDarkAlt; +} + +.ms-fontColor-themePrimary, +.ms-fontColor-themePrimary--hover:hover { + @include ms-fontColor-themePrimary; +} + +.ms-fontColor-themeSecondary, +.ms-fontColor-themeSecondary--hover:hover { + @include ms-fontColor-themeSecondary; +} + +.ms-fontColor-themeTertiary, +.ms-fontColor-themeTertiary--hover:hover { + @include ms-fontColor-themeTertiary; +} + +.ms-fontColor-themeLight, +.ms-fontColor-themeLight--hover:hover { + @include ms-fontColor-themeLight; +} + +.ms-fontColor-themeLighter, +.ms-fontColor-themeLighter--hover:hover { + @include ms-fontColor-themeLighter; +} + +.ms-fontColor-themeLighterAlt, +.ms-fontColor-themeLighterAlt--hover:hover { + @include ms-fontColor-themeLighterAlt; +} + + +// Neutral colors +.ms-fontColor-black, +.ms-fontColor-black--hover:hover { + @include ms-fontColor-black; +} + +.ms-fontColor-neutralDark, +.ms-fontColor-neutralDark--hover:hover { + @include ms-fontColor-neutralDark; +} + +.ms-fontColor-neutralPrimary, +.ms-fontColor-neutralPrimary--hover:hover { + @include ms-fontColor-neutralPrimary; +} + +.ms-fontColor-neutralPrimaryAlt, +.ms-fontColor-neutralPrimaryAlt--hover:hover { + @include ms-fontColor-neutralPrimaryAlt; +} + +.ms-fontColor-neutralSecondary, +.ms-fontColor-neutralSecondary--hover:hover { + @include ms-fontColor-neutralSecondary; +} + +.ms-fontColor-neutralSecondaryAlt, +.ms-fontColor-neutralSecondaryAlt--hover:hover { + @include ms-fontColor-neutralSecondaryAlt; +} + +.ms-fontColor-neutralTertiary, +.ms-fontColor-neutralTertiary--hover:hover { + @include ms-fontColor-neutralTertiary; +} + +.ms-fontColor-neutralTertiaryAlt, +.ms-fontColor-neutralTertiaryAlt--hover:hover { + @include ms-fontColor-neutralTertiaryAlt; +} + +.ms-fontColor-neutralLight, +.ms-fontColor-neutralLight--hover:hover { + @include ms-fontColor-neutralLight; +} + +.ms-fontColor-neutralLighter, +.ms-fontColor-neutralLighter--hover:hover { + @include ms-fontColor-neutralLighter; +} + +.ms-fontColor-neutralLighterAlt, +.ms-fontColor-neutralLighterAlt--hover:hover { + @include ms-fontColor-neutralLighterAlt; +} + +.ms-fontColor-white, +.ms-fontColor-white--hover:hover { + @include ms-fontColor-white; +} + +// Brand and accent colors +.ms-fontColor-yellow, +.ms-fontColor-yellow--hover:hover { + @include ms-fontColor-yellow; +} + +.ms-fontColor-yellowLight, +.ms-fontColor-yellowLight--hover:hover { + @include ms-fontColor-yellowLight; +} + +.ms-fontColor-orange, +.ms-fontColor-orange--hover:hover { + @include ms-fontColor-orange; +} + +.ms-fontColor-orangeLight, +.ms-fontColor-orangeLight--hover:hover { + @include ms-fontColor-orangeLight; +} + +.ms-fontColor-orangeLighter, +.ms-fontColor-orangeLighter--hover:hover { + @include ms-fontColor-orangeLighter; +} + +.ms-fontColor-redDark, +.ms-fontColor-redDark--hover:hover { + @include ms-fontColor-redDark; +} + +.ms-fontColor-red, +.ms-fontColor-red--hover:hover { + @include ms-fontColor-red; +} + +.ms-fontColor-magentaDark, +.ms-fontColor-magentaDark--hover:hover { + @include ms-fontColor-magentaDark; +} + +.ms-fontColor-magenta, +.ms-fontColor-magenta--hover:hover { + @include ms-fontColor-magenta; +} + +.ms-fontColor-magentaLight, +.ms-fontColor-magentaLight--hover:hover { + @include ms-fontColor-magentaLight; +} + +.ms-fontColor-purpleDark, +.ms-fontColor-purpleDark--hover:hover { + @include ms-fontColor-purpleDark; +} + +.ms-fontColor-purple, +.ms-fontColor-purple--hover:hover { + @include ms-fontColor-purple; +} + +.ms-fontColor-purpleLight, +.ms-fontColor-purpleLight--hover:hover { + @include ms-fontColor-purpleLight; +} + +.ms-fontColor-blueDark, +.ms-fontColor-blueDark--hover:hover { + @include ms-fontColor-blueDark; +} + +.ms-fontColor-blueMid, +.ms-fontColor-blueMid--hover:hover { + @include ms-fontColor-blueMid; +} + +.ms-fontColor-blue, +.ms-fontColor-blue--hover:hover { + @include ms-fontColor-blue; +} + +.ms-fontColor-blueLight, +.ms-fontColor-blueLight--hover:hover { + @include ms-fontColor-blueLight; +} + +.ms-fontColor-tealDark, +.ms-fontColor-tealDark--hover:hover { + @include ms-fontColor-tealDark; +} + +.ms-fontColor-teal, +.ms-fontColor-teal--hover:hover { + @include ms-fontColor-teal; +} + +.ms-fontColor-tealLight, +.ms-fontColor-tealLight--hover:hover { + @include ms-fontColor-tealLight; +} + +.ms-fontColor-greenDark, +.ms-fontColor-greenDark--hover:hover { + @include ms-fontColor-greenDark; +} + +.ms-fontColor-green, +.ms-fontColor-green--hover:hover { + @include ms-fontColor-green; +} + +.ms-fontColor-greenLight, +.ms-fontColor-greenLight--hover:hover { + @include ms-fontColor-greenLight; +} + +// Message colors +.ms-fontColor-info, +.ms-fontColor-info--hover:hover { + @include ms-fontColor-info; +} + +.ms-fontColor-success, +.ms-fontColor-success--hover:hover { + @include ms-fontColor-success; +} + +.ms-fontColor-alert, +.ms-fontColor-alert--hover:hover { // Deprecated: Use ms-fontColor-severeWarning + @include ms-fontColor-alert; +} + +.ms-fontColor-warning, +.ms-fontColor-warning--hover:hover { + @include ms-fontColor-warning; +} + +.ms-fontColor-severeWarning, +.ms-fontColor-severeWarning--hover:hover { + @include ms-fontColor-severeWarning; +} + +.ms-fontColor-error, +.ms-fontColor-error--hover:hover { + @include ms-fontColor-error; +} diff --git a/dist/sass/Fabric.Utilities.Output.scss b/dist/sass/Fabric.Utilities.Output.scss new file mode 100644 index 000000000..036bdfdf4 --- /dev/null +++ b/dist/sass/Fabric.Utilities.Output.scss @@ -0,0 +1,46 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Utility classes and mixins used throughout Fabric. + +@import "Fabric.Utilities"; + +// The best box is a border box. +.ms-u-borderBox, .ms-u-borderBox:before, .ms-u-borderBox:after { + @include ms-u-borderBox; +} + +// To apply border base settings +.ms-u-borderBase { + @include ms-u-borderBase; +} + +// Ensures the block expands to the full height to enclose its floated childen. +.ms-u-clearfix { + @include ms-u-clearfix; +} + +// Basic border-box, margin, and padding reset. +.ms-u-normalize { + @include ms-u-normalize; +} + +// Use to set left, center, right text alignment styles +@include ms-u-textAlign(left, center, right); + +// Use to hide content while still making it readable by screen reader (Accessibility) +.ms-u-screenReaderOnly { + @include ms-u-screenReaderOnly +} + +// Use to add truncation with ellipsis +.ms-u-textTruncate { + @include ms-u-textTruncate +} + +// Use to disable text wrapping +.ms-u-noWrap{ + @include ms-u-noWrap +} \ No newline at end of file diff --git a/dist/sass/Fabric.scss b/dist/sass/Fabric.scss new file mode 100644 index 000000000..822c54a6a --- /dev/null +++ b/dist/sass/Fabric.scss @@ -0,0 +1,36 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// Core Module Loader + + +// Common utilities +@import './Fabric.Utilities.Output'; +@import './Fabric.ZIndex.Variables'; +@import './Fabric.Mixins'; +@import "./Fabric.Mixins.RTL"; + +// Colors +@import './Fabric.Color.Variables'; +@import './Fabric.Color.Mixins.Output'; + +// Typography +@import './Fabric.Typography.Variables'; +@import './Fabric.Typography.Output'; +@import './Fabric.Typography.Fonts.Output'; + +// Icons +@import './Fabric.Icons.Font.Output'; +@import './Fabric.Icons.Output'; + +// Animations +@import './Fabric.Animations.Output'; + +// Responsive +@import './Fabric.Responsive.Variables'; +@import './Fabric.Responsive.Utilities.Variables'; +@import './Fabric.Responsive.Utilities.Output'; + +// Grid +@import './Fabric.Grid.Output'; diff --git a/dist/sass/_Fabric.Animations.RTL.scss b/dist/sass/_Fabric.Animations.RTL.scss new file mode 100644 index 000000000..c6d1a6190 --- /dev/null +++ b/dist/sass/_Fabric.Animations.RTL.scss @@ -0,0 +1,79 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// RTL overrides for Fabric Animations + + +@import 'Fabric.Animations'; + +// slideRightIn10 +@mixin ms-u-slideRightIn10 { + @include animationMix((fadeIn, slideLeft10), $ms-duration3, $ms-ease1); +} + +// slideRightIn20 +@mixin ms-u-slideRightIn20 { + @include animationMix((fadeIn, slideLeft20), $ms-duration3, $ms-ease1); +} + +// slideRightIn40 +@mixin ms-u-slideRightIn40 { + @include animationMix((fadeIn, slideLeft40), $ms-duration3, $ms-ease1); +} + +// slideLeftIn10 +@mixin ms-u-slideLeftIn10 { + @include animationMix((fadeIn, slideRight10), $ms-duration3, $ms-ease1); +} + +// slideLeftIn20 +@mixin ms-u-slideLeftIn20 { + @include animationMix((fadeIn, slideRight20), $ms-duration3, $ms-ease1); +} + +// slideLeftIn40 +@mixin ms-u-slideLeftIn40 { + @include animationMix((fadeIn, slideRight40), $ms-duration3, $ms-ease1); +} + +// slideRightIn400 +@mixin ms-u-slideRightIn400 { + @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1); +} + +// slideLeftIn400 +@mixin ms-u-slideLeftIn400 { + @include animationMix((fadeIn, slideRight400), $ms-duration3, $ms-ease1); +} + +// slideRightOut40 +@mixin ms-u-slideRightOut40 { + @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); +} + +// slideLeftOut40 +@mixin ms-u-slideLeftOut40 { + @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); +} + +// slideRightOut400 +@mixin ms-u-slideRightOut400 { + @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); +} + +// slideLeftOut400 +@mixin ms-u-slideLeftOut400 { + @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); +} + +// rotate90deg +@mixin ms-u-rotate90deg { + @include animationMix(rotateN90, 0.1s, $ms-ease2); +} + +// rotateN90deg +@mixin ms-u-rotateN90deg { + @include animationMix(rotate90, 0.1s, $ms-ease2); +} diff --git a/dist/sass/_Fabric.Animations.scss b/dist/sass/_Fabric.Animations.scss new file mode 100644 index 000000000..5b92983de --- /dev/null +++ b/dist/sass/_Fabric.Animations.scss @@ -0,0 +1,237 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Animations + + +// Note that all animation classes should begin with the "ms-u" utility prefix. +// The original class names are deprecated and will be removed in a future release. + +// Variables +$ms-ease1: cubic-bezier(0.1,0.9,0.2,1); +$ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9); +$ms-duration1: 0.167s; +$ms-duration2: 0.267s; +$ms-duration3: 0.367s; +$ms-duration4: 0.467s; + + +// Animation mixin +@mixin animationMix($ms-name, $ms-duration, $ms-ease: $ms-ease1, $ms-fillMode: both) { + @include animationName($ms-name); + @include animationDuration($ms-duration); + @include animationTiming($ms-ease); + @include animationFillMode($ms-fillMode); +} + +// slideRightIn10 +@mixin ms-u-slideRightIn10 { + @include animationMix((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); +} + +// slideRightIn20 +@mixin ms-u-slideRightIn20 { + @include animationMix((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); +} + +// slideRightIn40 +@mixin ms-u-slideRightIn40 { + @include animationMix((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); +} + +// slideLeftIn10 +@mixin ms-u-slideLeftIn10 { + @include animationMix((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); +} + +// slideLeftIn20 +@mixin ms-u-slideLeftIn20 { + @include animationMix((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); +} + +// slideLeftIn40 +@mixin ms-u-slideLeftIn40 { + @include animationMix((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); +} + +// slideRightIn400 +@mixin ms-u-slideRightIn400 { + @include animationMix((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); +} + +// slideLeftIn400 +@mixin ms-u-slideLeftIn400 { + @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1); +} + +// slideUpIn20 +@mixin ms-u-slideUpIn20 { + @include animationMix((fadeIn, slideUpIn20), $ms-duration3, $ms-ease1); +} + +// slideUpIn10 +@mixin ms-u-slideUpIn10 { + @include animationMix((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2); +} + +// slideDownIn20 +@mixin ms-u-slideDownIn20 { + @include animationMix((fadeIn, slideDownIn20), $ms-duration3, $ms-ease1); +} + +// slideDownIn10 +@mixin ms-u-slideDownIn10 { + @include animationMix((fadeIn, slideDownIn10), $ms-duration1, $ms-ease2); +} + +// slideRightOut40 +@mixin ms-u-slideRightOut40 { + @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); +} + +// slideLeftOut40 +@mixin ms-u-slideLeftOut40 { + @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); +} + +// slideRightOut400 +@mixin ms-u-slideRightOut400 { + @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); +} + +// slideLeftOut400 +@mixin ms-u-slideLeftOut400 { + @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); +} + +// slideUpOut20 +@mixin ms-u-slideUpOut20 { + @include animationMix((fadeOut, slideUpOut20), $ms-duration1, $ms-ease2); +} + +// slideUpOut10 +@mixin ms-u-slideUpOut10 { + @include animationMix((fadeOut, slideUpOut10), $ms-duration1, $ms-ease2); +} + +// slideDownOut20 +@mixin ms-u-slideDownOut20 { + @include animationMix((fadeOut, slideDownOut20), $ms-duration1, $ms-ease2); +} + +// slideDownOut10 +@mixin ms-u-slideDownOut10 { + @include animationMix((fadeOut, slideDownOut10), $ms-duration1, $ms-ease2); +} + +// scaleUpIn100 +@mixin ms-u-scaleUpIn100 { + @include animationMix((fadeIn, scaleUp100), $ms-duration3, $ms-ease1); +} + +// scaleDownIn100 +@mixin ms-u-scaleDownIn100 { + @include animationMix((fadeIn, scaleDown100), $ms-duration3, $ms-ease1); +} + +// scaleUpOut103 +@mixin ms-u-scaleUpOut103 { + @include animationMix((fadeOut, scaleUp103), $ms-duration1, $ms-ease2); +} + +// scaleDownOut98 +@mixin ms-u-scaleDownOut98 { + @include animationMix((fadeOut, scaleDown98), $ms-duration1, $ms-ease2); +} + +// fadeIn +@mixin ms-u-fadeIn400 { + -webkit-animation-duration: $ms-duration3; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: $ms-duration3; + animation-name: fadeIn; + animation-fill-mode: both; +} +@mixin ms-u-fadeIn100 { + @include ms-u-fadeIn400; + -webkit-animation-duration: $ms-duration1; + animation-duration: $ms-duration1; +} +@mixin ms-u-fadeIn200 { + @include ms-u-fadeIn400; + -webkit-animation-duration: $ms-duration2; + animation-duration: $ms-duration2; +} +@mixin ms-u-fadeIn500 { + @include ms-u-fadeIn400; + -webkit-animation-duration: $ms-duration4; + animation-duration: $ms-duration4; +} + +// fadeOut +@mixin ms-u-fadeOut400 { + -webkit-animation-duration: $ms-duration3; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: $ms-duration3; + animation-name: fadeOut; + animation-fill-mode: both; +} +@mixin ms-u-fadeOut100 { + @include ms-u-fadeOut400; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} +@mixin ms-u-fadeOut200 { + @include ms-u-fadeOut400; + -webkit-animation-duration: $ms-duration1; + animation-duration: $ms-duration1; +} +@mixin ms-u-fadeOut500 { + @include ms-u-fadeOut400; + -webkit-animation-duration: $ms-duration4; + animation-duration: $ms-duration4; +} + +// rotate90deg +@mixin ms-u-rotate90deg { + @include animationMix(rotate90, 0.1s, $ms-ease2); +} + +// rotateN90deg +@mixin ms-u-rotateN90deg { + @include animationMix(rotateN90, 0.1s, $ms-ease2); +} + +// expandCollapse400 +@mixin ms-u-expandCollapse400 { + -webkit-transition: height $ms-duration3 $ms-ease2; + transition: height $ms-duration3 $ms-ease2; +} + +// expandCollapse200 +@mixin ms-u-expandCollapse200 { + -webkit-transition: height $ms-duration1 $ms-ease2; + transition: height $ms-duration1 $ms-ease2; +} + +// expandCollapse100 +@mixin ms-u-expandCollapse100 { + -webkit-transition: height 0.1s $ms-ease2; + transition: height 0.1s $ms-ease2; +} + +// delay100 +@mixin ms-u-delay100 { + -webkit-animation-delay: $ms-duration1; + animation-delay: $ms-duration1; +} + +// delay200 +@mixin ms-u-delay200 { + -webkit-animation-delay: 0.267s; + animation-delay: 0.267s; +} diff --git a/dist/sass/_Fabric.Color.Mixins.scss b/dist/sass/_Fabric.Color.Mixins.scss new file mode 100644 index 000000000..2d87a98e1 --- /dev/null +++ b/dist/sass/_Fabric.Color.Mixins.scss @@ -0,0 +1,418 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Color Mixins + + +//== Background colors +// +// Theme colors +@mixin ms-bgColor-themeDark { + background-color: $ms-color-themeDark; +} + +@mixin ms-bgColor-themeDarkAlt { + background-color: $ms-color-themeDarkAlt; +} + +@mixin ms-bgColor-themeDarker { + background-color: $ms-color-themeDarker; +} + +@mixin ms-bgColor-themePrimary { + background-color: $ms-color-themePrimary; +} + +@mixin ms-bgColor-themeSecondary { + background-color: $ms-color-themeSecondary; +} + +@mixin ms-bgColor-themeTertiary { + background-color: $ms-color-themeTertiary; +} + +@mixin ms-bgColor-themeLight { + background-color: $ms-color-themeLight; +} + +@mixin ms-bgColor-themeLighter { + background-color: $ms-color-themeLighter; +} + +@mixin ms-bgColor-themeLighterAlt { + background-color: $ms-color-themeLighterAlt; +} + +// Neutral colors +@mixin ms-bgColor-black { + background-color: $ms-color-black; +} + +@mixin ms-bgColor-neutralDark { + background-color: $ms-color-neutralDark; +} + +@mixin ms-bgColor-neutralPrimary { + background-color: $ms-color-neutralPrimary; +} + +@mixin ms-bgColor-neutralPrimaryAlt { + background-color: $ms-color-neutralPrimaryAlt; +} + +@mixin ms-bgColor-neutralSecondary { + background-color: $ms-color-neutralSecondary; +} + +@mixin ms-bgColor-neutralSecondaryAlt { + background-color: $ms-color-neutralSecondaryAlt; +} + +@mixin ms-bgColor-neutralTertiary { + background-color: $ms-color-neutralTertiary; +} + +@mixin ms-bgColor-neutralTertiaryAlt { + background-color: $ms-color-neutralTertiaryAlt; +} + +@mixin ms-bgColor-neutralLight { + background-color: $ms-color-neutralLight; +} + +@mixin ms-bgColor-neutralLighter { + background-color: $ms-color-neutralLighter; +} + +@mixin ms-bgColor-neutralLighterAlt { + background-color: $ms-color-neutralLighterAlt; +} + +@mixin ms-bgColor-white { + background-color: $ms-color-white; +} + + +// Brand and accent colors +@mixin ms-bgColor-yellow { + background-color: $ms-color-yellow; +} + +@mixin ms-bgColor-yellowLight { + background-color: $ms-color-yellowLight; +} + +@mixin ms-bgColor-orange { + background-color: $ms-color-orange; +} + +@mixin ms-bgColor-orangeLight { + background-color: $ms-color-orangeLight; +} + +@mixin ms-bgColor-orangeLighter { + background-color: $ms-color-orangeLighter; +} + +@mixin ms-bgColor-redDark { + background-color: $ms-color-redDark; +} + +@mixin ms-bgColor-red { + background-color: $ms-color-red; +} + +@mixin ms-bgColor-magentaDark { + background-color: $ms-color-magentaDark; +} + +@mixin ms-bgColor-magenta { + background-color: $ms-color-magenta; +} + +@mixin ms-bgColor-magentaLight { + background-color: $ms-color-magentaLight; +} + +@mixin ms-bgColor-purpleDark { + background-color: $ms-color-purpleDark; +} + +@mixin ms-bgColor-purple { + background-color: $ms-color-purple; +} + +@mixin ms-bgColor-purpleLight { + background-color: $ms-color-purpleLight; +} + +@mixin ms-bgColor-blueDark { + background-color: $ms-color-blueDark; +} + +@mixin ms-bgColor-blueMid { + background-color: $ms-color-blueMid; +} + +@mixin ms-bgColor-blue { + background-color: $ms-color-blue; +} + +@mixin ms-bgColor-blueLight { + background-color: $ms-color-blueLight; +} + +@mixin ms-bgColor-tealDark { + background-color: $ms-color-tealDark; +} + +@mixin ms-bgColor-teal { + background-color: $ms-color-teal; +} + +@mixin ms-bgColor-tealLight { + background-color: $ms-color-tealLight; +} + +@mixin ms-bgColor-greenDark { + background-color: $ms-color-greenDark; +} + +@mixin ms-bgColor-green { + background-color: $ms-color-green; +} + +@mixin ms-bgColor-greenLight { + background-color: $ms-color-greenLight; +} + +// Message colors +@mixin ms-bgColor-info { + background-color: $ms-color-infoBackground; +} + +@mixin ms-bgColor-success { + background-color: $ms-color-successBackground; +} + +@mixin ms-bgColor-severeWarning { + background-color: $ms-color-severeWarningBackground; +} + +@mixin ms-bgColor-warning { + background-color: $ms-color-warningBackground; +} + +@mixin ms-bgColor-error { + background-color: $ms-color-errorBackground; +} + + +//== Border colors +// + +// Theme colors +@mixin ms-borderColor-themeDark { + border-color: $ms-color-themeDark; +} + +@mixin ms-borderColor-themeDarkAlt { + border-color: $ms-color-themeDarkAlt; +} + +@mixin ms-borderColor-themeDarker { + border-color: $ms-color-themeDarker; +} + +@mixin ms-borderColor-themePrimary { + border-color: $ms-color-themePrimary; +} + +@mixin ms-borderColor-themeSecondary { + border-color: $ms-color-themeSecondary; +} + +@mixin ms-borderColor-themeTertiary { + border-color: $ms-color-themeTertiary; +} + +@mixin ms-borderColor-themeLight { + border-color: $ms-color-themeLight; +} + +@mixin ms-borderColor-themeLighter { + border-color: $ms-color-themeLighter; +} + +@mixin ms-borderColor-themeLighterAlt { + border-color: $ms-color-themeLighterAlt; +} + + +// Neutral colors +@mixin ms-borderColor-black { + border-color: $ms-color-black; +} + +@mixin ms-borderColor-neutralDark { + border-color: $ms-color-neutralDark; +} + +@mixin ms-borderColor-neutralPrimary { + border-color: $ms-color-neutralPrimary; +} + +@mixin ms-borderColor-neutralPrimaryAlt { + border-color: $ms-color-neutralPrimaryAlt; +} + +@mixin ms-borderColor-neutralSecondary { + border-color: $ms-color-neutralSecondary; +} + +@mixin ms-borderColor-neutralSecondaryAlt { + border-color: $ms-color-neutralSecondaryAlt; +} + +@mixin ms-borderColor-neutralTertiary { + border-color: $ms-color-neutralTertiary; +} + +@mixin ms-borderColor-neutralTertiaryAlt { + border-color: $ms-color-neutralTertiaryAlt; +} + +@mixin ms-borderColor-neutralLight { + border-color: $ms-color-neutralLight; +} + +@mixin ms-borderColor-neutralLighter { + border-color: $ms-color-neutralLighter; +} + +@mixin ms-borderColor-neutralLighterAlt { + border-color: $ms-color-neutralLighterAlt; +} + +@mixin ms-borderColor-white { + border-color: $ms-color-white; +} + +// Brand and accent colors +@mixin ms-borderColor-yellow { + border-color: $ms-color-yellow; +} + +@mixin ms-borderColor-yellowLight { + border-color: $ms-color-yellowLight; +} + +@mixin ms-borderColor-orange { + border-color: $ms-color-orange; +} + +@mixin ms-borderColor-orangeLight { + border-color: $ms-color-orangeLight; +} + +@mixin ms-borderColor-orangeLighter { + border-color: $ms-color-orangeLighter; +} + +@mixin ms-borderColor-redDark { + border-color: $ms-color-redDark; +} + +@mixin ms-borderColor-red { + border-color: $ms-color-red; +} + +@mixin ms-borderColor-magentaDark { + border-color: $ms-color-magentaDark; +} + +@mixin ms-borderColor-magenta { + border-color: $ms-color-magenta; +} + +@mixin ms-borderColor-magentaLight { + border-color: $ms-color-magentaLight; +} + +@mixin ms-borderColor-purpleDark { + border-color: $ms-color-purpleDark; +} + +@mixin ms-borderColor-purple { + border-color: $ms-color-purple; +} + +@mixin ms-borderColor-purpleLight { + border-color: $ms-color-purpleLight; +} + +@mixin ms-borderColor-blueDark { + border-color: $ms-color-blueDark; +} + +@mixin ms-borderColor-blueMid { + border-color: $ms-color-blueMid; +} + +@mixin ms-borderColor-blue { + border-color: $ms-color-blue; +} + +@mixin ms-borderColor-blueLight { + border-color: $ms-color-blueLight; +} + +@mixin ms-borderColor-tealDark { + border-color: $ms-color-tealDark; +} + +@mixin ms-borderColor-teal { + border-color: $ms-color-teal; +} + +@mixin ms-borderColor-tealLight { + border-color: $ms-color-tealLight; +} + +@mixin ms-borderColor-greenDark { + border-color: $ms-color-greenDark; +} + +@mixin ms-borderColor-green { + border-color: $ms-color-green; +} + +@mixin ms-borderColor-greenLight { + border-color: $ms-color-greenLight; +} + + +// Message colors +@mixin ms-borderColor-info { + border-color: $ms-color-info; +} + +@mixin ms-borderColor-success { + border-color: $ms-color-success; +} + +@mixin ms-borderColor-alert { + border-color: $ms-color-alert; +} + +@mixin ms-borderColor-error { + border-color: $ms-color-error; +} + + +// Individual borders, by request +@mixin ms-borderColorTop-themePrimary { + border-top-color: $ms-color-themePrimary; +} diff --git a/dist/sass/_Fabric.Color.Variables.scss b/dist/sass/_Fabric.Color.Variables.scss new file mode 100644 index 000000000..08f990cf4 --- /dev/null +++ b/dist/sass/_Fabric.Color.Variables.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. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Color Variables + + +//== Theme Colors +// +$ms-color-themeDarker: #004578; +$ms-color-themeDark: #005a9e; +$ms-color-themeDarkAlt: #106ebe; +$ms-color-themePrimary: #0078d7; +$ms-color-themeSecondary: #2b88d8; +$ms-color-themeTertiary: #71afe5; +$ms-color-themeLight: #c7e0f4; +$ms-color-themeLighter: #deecf9; +$ms-color-themeLighterAlt: #eff6fc; + + +//== Grayscale Colors +// +$ms-color-black: #000000; +$ms-color-neutralDark: #212121; +$ms-color-neutralPrimary: #333333; +$ms-color-neutralPrimaryAlt: #3C3C3C; +$ms-color-neutralSecondary: #666666; +$ms-color-neutralSecondaryAlt: #767676; +$ms-color-neutralTertiary: #a6a6a6; +$ms-color-neutralTertiaryAlt: #c8c8c8; +$ms-color-neutralLight: #eaeaea; +$ms-color-neutralLighter: #f4f4f4; +$ms-color-neutralLighterAlt: #f8f8f8; +$ms-color-white: #ffffff; + + +//== Translucent Colors +// +$ms-color-blackTranslucent40: rgba(0,0,0,.4); +$ms-color-whiteTranslucent40: rgba(255,255,255,.4); + + +//== Core brand and accent colors +// +$ms-color-yellow: #ffb900; +$ms-color-yellowLight: #fff100; +$ms-color-orange: #d83b01; +$ms-color-orangeLight: #ea4300; +$ms-color-orangeLighter: #ff8c00; +$ms-color-redDark: #a80000; +$ms-color-red: #e81123; +$ms-color-magentaDark: #5c005c; +$ms-color-magenta: #b4009e; +$ms-color-magentaLight: #e3008c; +$ms-color-purpleDark: #32145a; +$ms-color-purple: #5c2d91; +$ms-color-purpleLight: #b4a0ff; +$ms-color-blueDark: #002050; +$ms-color-blueMid: #00188f; +$ms-color-blue: #0078d7; +$ms-color-blueLight: #00bcf2; +$ms-color-tealDark: #004b50; +$ms-color-teal: #008272; +$ms-color-tealLight: #00b294; +$ms-color-greenDark: #004b1c; +$ms-color-green: #107c10; +$ms-color-greenLight: #bad80a; + + +//== Message colors +// +$ms-color-info: $ms-color-neutralSecondaryAlt; +$ms-color-infoBackground: $ms-color-neutralLighter; +$ms-color-success: $ms-color-green; +$ms-color-successBackground: #dff6dd; +$ms-color-severeWarning: $ms-color-orange; +$ms-color-severeWarningBackground: #fed9cc; +$ms-color-alert: $ms-color-severeWarning; // Deprecated: Use $ms-color-severeWarning +$ms-color-alertBackground: $ms-color-severeWarningBackground; // Deprecated: Use $ms-color-severeWarningBackground +$ms-color-warning: $ms-color-neutralSecondaryAlt; +$ms-color-warningBackground: #fff4ce; +$ms-color-error: $ms-color-redDark; +$ms-color-errorBackground: #fde7e9; + + +//== High contrast colors +// +$ms-color-contrastBlackDisabled: #00ff00; +$ms-color-contrastWhiteDisabled: #600000; +$ms-color-contrastBlackSelected: #1AEBFF; +$ms-color-contrastWhiteSelected: #37006E; +$ms-color-contrastBlackLink: #8080ff; +$ms-color-contrastWhiteLink: #00009F; diff --git a/dist/sass/_Fabric.Common.scss b/dist/sass/_Fabric.Common.scss new file mode 100644 index 000000000..eef83565c --- /dev/null +++ b/dist/sass/_Fabric.Common.scss @@ -0,0 +1,14 @@ +@import "./Fabric.Animations"; +@import "./Fabric.Color.Mixins"; +@import "./Fabric.Color.Variables"; +@import "./Fabric.Grid"; +@import "./Fabric.Icons"; +@import "./Fabric.Mixins"; +@import "./Fabric.Mixins.RTL"; +@import './Fabric.Responsive.Utilities.Variables'; +@import "./Fabric.Responsive.Variables"; +@import "./Fabric.Typography"; +@import "./Fabric.Typography.Fonts"; +@import "./Fabric.Typography.Variables"; +@import "./Fabric.Utilities"; +@import "./Fabric.ZIndex.Variables"; diff --git a/dist/sass/_Fabric.Grid.scss b/dist/sass/_Fabric.Grid.scss new file mode 100644 index 000000000..14430d2d8 --- /dev/null +++ b/dist/sass/_Fabric.Grid.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. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fluid 12-column grids for small, medium, and large devices + + +//== Grid container (same for all sizes) +// +@mixin ms-Grid { + @include ms-u-borderBox; + @include ms-u-clearfix; + padding: 0 8px; +} + +//== Grid rows (pull first and last column out) +// +@mixin ms-Grid-row { + margin: 0 -8px; + @include ms-u-borderBox; + @include ms-u-clearfix; +} + +//== Grid cells +// +@mixin ms-Grid-col { + position: relative; + min-height: 1px; + padding-left: 8px; + padding-right: 8px; + @include ms-u-borderBox; + float: left; +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Icons.scss b/dist/sass/_Fabric.Icons.scss new file mode 100644 index 000000000..a5d54c264 --- /dev/null +++ b/dist/sass/_Fabric.Icons.scss @@ -0,0 +1,403 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Icon definitions + +@mixin ms-Icon { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} + +// Modifiers: Each of the icons. +@mixin ms-Icon--circleEmpty { content: '\e000'; } // '๎€€' +@mixin ms-Icon--circleFill { content: '\e001'; } // '๎€' +@mixin ms-Icon--placeholder { content: '\e002'; } // '๎€‚' +@mixin ms-Icon--star { content: '\e003'; } // '๎€ƒ' +@mixin ms-Icon--plus { content: '\e004'; } // '๎€„' +@mixin ms-Icon--minus { content: '\e005'; } // '๎€…' +@mixin ms-Icon--question { content: '\e006'; } // '๎€†' +@mixin ms-Icon--exclamation { content: '\e007'; } // '๎€‡' +@mixin ms-Icon--person { content: '\e008'; } // '๎€ˆ' +@mixin ms-Icon--mail { content: '\e009'; } // '๎€‰' +@mixin ms-Icon--infoCircle { content: '\e00a'; } // '๎€Š' +@mixin ms-Icon--alert { content: '\e00b'; } // '๎€‹' +@mixin ms-Icon--xCircle { content: '\e00c'; } // '๎€Œ' +@mixin ms-Icon--mailOpen { content: '\e00d'; } // '๎€' +@mixin ms-Icon--people { content: '\e00e'; } // '๎€Ž' +@mixin ms-Icon--bell { content: '\e010'; } // '๎€' +@mixin ms-Icon--calendar { content: '\e011'; } // '๎€‘' +@mixin ms-Icon--scheduling { content: '\e012'; } // '๎€’' +@mixin ms-Icon--event { content: '\e013'; } // '๎€“' +@mixin ms-Icon--folder { content: '\e014'; } // '๎€”' +@mixin ms-Icon--documents { content: '\e015'; } // '๎€•' +@mixin ms-Icon--onedrive { content: '\e016'; } // '๎€–' +@mixin ms-Icon--chat { content: '\e017'; } // '๎€—' +@mixin ms-Icon--sites { content: '\e018'; } // '๎€˜' +@mixin ms-Icon--listBullets { content: '\e019'; } // '๎€™' +@mixin ms-Icon--calendarWeek { content: '\e01a'; } // '๎€š' +@mixin ms-Icon--calendarWorkWeek { content: '\e01b'; } // '๎€›' +@mixin ms-Icon--calendarDay { content: '\e01c'; } // '๎€œ' +@mixin ms-Icon--folderMove { content: '\e01d'; } // '๎€' +@mixin ms-Icon--panel { content: '\e01e'; } // '๎€ž' +@mixin ms-Icon--popout { content: '\e01f'; } // '๎€Ÿ' +@mixin ms-Icon--menu { content: '\e020'; } // '๎€ ' +@mixin ms-Icon--home { content: '\e021'; } // '๎€ก' +@mixin ms-Icon--favorites { content: '\e022'; } // '๎€ข' +@mixin ms-Icon--phone { content: '\e023'; } // '๎€ฃ' +@mixin ms-Icon--mailSend { content: '\e024'; } // '๎€ค' +@mixin ms-Icon--save { content: '\e025'; } // '๎€ฅ' +@mixin ms-Icon--trash { content: '\e026'; } // '๎€ฆ' +@mixin ms-Icon--pencil { content: '\e027'; } // '๎€ง' +@mixin ms-Icon--flag { content: '\e028'; } // '๎€จ' +@mixin ms-Icon--reply { content: '\e029'; } // '๎€ฉ' +@mixin ms-Icon--miniatures { content: '\e02a'; } // '๎€ช' +@mixin ms-Icon--voicemail { content: '\e02b'; } // '๎€ซ' +@mixin ms-Icon--play { content: '\e02c'; } // '๎€ฌ' +@mixin ms-Icon--pause { content: '\e02d'; } // '๎€ญ' +@mixin ms-Icon--onlineAdd { content: '\e02e'; } // '๎€ฎ' +@mixin ms-Icon--onlineJoin { content: '\e02f'; } // '๎€ฏ' +@mixin ms-Icon--replyAll { content: '\e030'; } // '๎€ฐ' +@mixin ms-Icon--attachment { content: '\e031'; } // '๎€ฑ' +@mixin ms-Icon--drm { content: '\e032'; } // '๎€ฒ' +@mixin ms-Icon--pinDown { content: '\e033'; } // '๎€ณ' +@mixin ms-Icon--refresh { content: '\e034'; } // '๎€ด' +@mixin ms-Icon--gear { content: '\e035'; } // '๎€ต' +@mixin ms-Icon--smiley { content: '\e036'; } // '๎€ถ' +@mixin ms-Icon--info { content: '\e037'; } // '๎€ท' +@mixin ms-Icon--lock { content: '\e038'; } // '๎€ธ' +@mixin ms-Icon--search { content: '\e039'; } // '๎€น' +@mixin ms-Icon--questionReverse { content: '\e03a'; } // '๎€บ' +@mixin ms-Icon--notRecurring { content: '\e03b'; } // '๎€ป' +@mixin ms-Icon--tasks { content: '\e040'; } // '๎€' +@mixin ms-Icon--check { content: '\e041'; } // '๎' +@mixin ms-Icon--x { content: '\e042'; } // '๎‚' +@mixin ms-Icon--ellipsis { content: '\e045'; } // '๎…' +@mixin ms-Icon--dot { content: '\e046'; } // '๎†' +@mixin ms-Icon--arrowUp { content: '\e047'; } // '๎‡' +@mixin ms-Icon--arrowDown { content: '\e048'; } // '๎ˆ' +@mixin ms-Icon--arrowLeft { content: '\e049'; } // '๎‰' +@mixin ms-Icon--arrowRight { content: '\e04a'; } // '๎Š' +@mixin ms-Icon--download { content: '\e04b'; } // '๎‹' +@mixin ms-Icon--directions { content: '\e04c'; } // '๎Œ' +@mixin ms-Icon--microphone { content: '\e04f'; } // '๎' +@mixin ms-Icon--caretUp { content: '\e051'; } // '๎‘' +@mixin ms-Icon--caretDown { content: '\e052'; } // '๎’' +@mixin ms-Icon--caretLeft { content: '\e053'; } // '๎“' +@mixin ms-Icon--caretRight { content: '\e054'; } // '๎”' +@mixin ms-Icon--caretUpLeft { content: '\e05a'; } // '๎š' +@mixin ms-Icon--caretUpRight { content: '\e05b'; } // '๎›' +@mixin ms-Icon--caretDownRight { content: '\e05c'; } // '๎œ' +@mixin ms-Icon--caretDownLeft { content: '\e05d'; } // '๎' +@mixin ms-Icon--note { content: '\e06a'; } // '๎ช' +@mixin ms-Icon--noteReply { content: '\e06b'; } // '๎ซ' +@mixin ms-Icon--noteForward { content: '\e06c'; } // '๎ฌ' +@mixin ms-Icon--key { content: '\e06f'; } // '๎ฏ' +@mixin ms-Icon--tile { content: '\e070'; } // '๎ฐ' +@mixin ms-Icon--taskRecurring { content: '\e071'; } // '๎ฑ' +@mixin ms-Icon--starEmpty { content: '\e073'; } // '๎ณ' +@mixin ms-Icon--upload { content: '\e076'; } // '๎ถ' +@mixin ms-Icon--wrench { content: '\e077'; } // '๎ท' +@mixin ms-Icon--share { content: '\e078'; } // '๎ธ' +@mixin ms-Icon--documentReply { content: '\e079'; } // '๎น' +@mixin ms-Icon--documentForward { content: '\e07a'; } // '๎บ' +@mixin ms-Icon--partner { content: '\e080'; } // '๎‚€' +@mixin ms-Icon--reactivate { content: '\e084'; } // '๎‚„' +@mixin ms-Icon--sort { content: '\e085'; } // '๎‚…' +@mixin ms-Icon--personAdd { content: '\e086'; } // '๎‚†' +@mixin ms-Icon--chevronUp { content: '\e087'; } // '๎‚‡' +@mixin ms-Icon--chevronDown { content: '\e088'; } // '๎‚ˆ' +@mixin ms-Icon--chevronLeft { content: '\e089'; } // '๎‚‰' +@mixin ms-Icon--chevronRight { content: '\e08a'; } // '๎‚Š' +@mixin ms-Icon--peopleAdd { content: '\e08c'; } // '๎‚Œ' +@mixin ms-Icon--newsfeed { content: '\e08d'; } // '๎‚' +@mixin ms-Icon--notebook { content: '\e08e'; } // '๎‚Ž' +@mixin ms-Icon--link { content: '\e08f'; } // '๎‚' +@mixin ms-Icon--chevronsUp { content: '\e090'; } // '๎‚' +@mixin ms-Icon--chevronsDown { content: '\e091'; } // '๎‚‘' +@mixin ms-Icon--chevronsLeft { content: '\e092'; } // '๎‚’' +@mixin ms-Icon--chevronsRight { content: '\e093'; } // '๎‚“' +@mixin ms-Icon--clutter { content: '\e09a'; } // '๎‚š' +@mixin ms-Icon--subscribe { content: '\e09c'; } // '๎‚œ' +@mixin ms-Icon--unsubscribe { content: '\e09d'; } // '๎‚' +@mixin ms-Icon--personRemove { content: '\e09e'; } // '๎‚ž' +@mixin ms-Icon--receiptForward { content: '\e0a0'; } // '๎‚ ' +@mixin ms-Icon--receiptReply { content: '\e0a1'; } // '๎‚ก' +@mixin ms-Icon--receiptCheck { content: '\e0a2'; } // '๎‚ข' +@mixin ms-Icon--peopleRemove { content: '\e0a3'; } // '๎‚ฃ' +@mixin ms-Icon--merge { content: '\e0a4'; } // '๎‚ค' +@mixin ms-Icon--split { content: '\e0a5'; } // '๎‚ฅ' +@mixin ms-Icon--eventCancel { content: '\e0a6'; } // '๎‚ฆ' +@mixin ms-Icon--eventShare { content: '\e0a7'; } // '๎‚ง' +@mixin ms-Icon--today { content: '\e0a9'; } // '๎‚ฉ' +@mixin ms-Icon--oofReply { content: '\e0aa'; } // '๎‚ช' +@mixin ms-Icon--voicemailReply { content: '\e0ac'; } // '๎‚ฌ' +@mixin ms-Icon--voicemailForward { content: '\e0ad'; } // '๎‚ญ' +@mixin ms-Icon--ribbon { content: '\e0af'; } // '๎‚ฏ' +@mixin ms-Icon--contact { content: '\e0b0'; } // '๎‚ฐ' +@mixin ms-Icon--eye { content: '\e0b1'; } // '๎‚ฑ' +@mixin ms-Icon--glasses { content: '\e0b2'; } // '๎‚ฒ' +@mixin ms-Icon--print { content: '\e100'; } // '๎„€' +@mixin ms-Icon--room { content: '\e101'; } // '๎„' +@mixin ms-Icon--post { content: '\e102'; } // '๎„‚' +@mixin ms-Icon--toggle { content: '\e103'; } // '๎„ƒ' +@mixin ms-Icon--touch { content: '\e104'; } // '๎„„' +@mixin ms-Icon--clock { content: '\e105'; } // '๎„…' +@mixin ms-Icon--fax { content: '\e106'; } // '๎„†' +@mixin ms-Icon--lightning { content: '\e110'; } // '๎„' +@mixin ms-Icon--dialpad { content: '\e111'; } // '๎„‘' +@mixin ms-Icon--phoneTransfer { content: '\e112'; } // '๎„’' +@mixin ms-Icon--phoneAdd { content: '\e113'; } // '๎„“' +@mixin ms-Icon--late { content: '\e114'; } // '๎„”' +@mixin ms-Icon--chatAdd { content: '\e115'; } // '๎„•' +@mixin ms-Icon--conflict { content: '\e116'; } // '๎„–' +@mixin ms-Icon--navigate { content: '\e117'; } // '๎„—' +@mixin ms-Icon--camera { content: '\e119'; } // '๎„™' +@mixin ms-Icon--filter { content: '\e11a'; } // '๎„š' +@mixin ms-Icon--fullscreen { content: '\e11b'; } // '๎„›' +@mixin ms-Icon--new { content: '\e11c'; } // '๎„œ' +@mixin ms-Icon--mailEmpty { content: '\e11d'; } // '๎„' +@mixin ms-Icon--editBox { content: '\e11e'; } // '๎„ž' +@mixin ms-Icon--waffle { content: '\e11f'; } // '๎„Ÿ' +@mixin ms-Icon--work { content: '\e120'; } // '๎„ ' +@mixin ms-Icon--eventRecurring { content: '\e121'; } // '๎„ก' +@mixin ms-Icon--cart { content: '\e122'; } // '๎„ข' +@mixin ms-Icon--socialListening { content: '\e123'; } // '๎„ฃ' +@mixin ms-Icon--mapMarker { content: '\e124'; } // '๎„ค' +@mixin ms-Icon--org { content: '\e125'; } // '๎„ฅ' +@mixin ms-Icon--replyAlt { content: '\e150'; } // '๎…' +@mixin ms-Icon--replyAllAlt { content: '\e152'; } // '๎…’' +@mixin ms-Icon--eventInfo { content: '\e154'; } // '๎…”' +@mixin ms-Icon--group { content: '\e155'; } // '๎…•' +@mixin ms-Icon--money { content: '\e161'; } // '๎…ก' +@mixin ms-Icon--graph { content: '\e162'; } // '๎…ข' +@mixin ms-Icon--noteEdit { content: '\e163'; } // '๎…ฃ' +@mixin ms-Icon--dashboard { content: '\e164'; } // '๎…ค' +@mixin ms-Icon--mailEdit { content: '\e165'; } // '๎…ฅ' +@mixin ms-Icon--pinLeft { content: '\e167'; } // '๎…ง' +@mixin ms-Icon--heart { content: '\e16a'; } // '๎…ช' +@mixin ms-Icon--heartEmpty { content: '\e16b'; } // '๎…ซ' +@mixin ms-Icon--picture { content: '\e16c'; } // '๎…ฌ' +@mixin ms-Icon--cake { content: '\e16d'; } // '๎…ญ' +@mixin ms-Icon--books { content: '\e16e'; } // '๎…ฎ' +@mixin ms-Icon--chart { content: '\e16f'; } // '๎…ฏ' +@mixin ms-Icon--video { content: '\e170'; } // '๎…ฐ' +@mixin ms-Icon--soccer { content: '\e171'; } // '๎…ฑ' +@mixin ms-Icon--meal { content: '\e172'; } // '๎…ฒ' +@mixin ms-Icon--balloon { content: '\e173'; } // '๎…ณ' +@mixin ms-Icon--cat { content: '\e174'; } // '๎…ด' +@mixin ms-Icon--dog { content: '\e175'; } // '๎…ต' +@mixin ms-Icon--bag { content: '\e176'; } // '๎…ถ' +@mixin ms-Icon--music { content: '\e177'; } // '๎…ท' +@mixin ms-Icon--stopwatch { content: '\e178'; } // '๎…ธ' +@mixin ms-Icon--coffee { content: '\e179'; } // '๎…น' +@mixin ms-Icon--briefcase { content: '\e17a'; } // '๎…บ' +@mixin ms-Icon--pill { content: '\e17b'; } // '๎…ป' +@mixin ms-Icon--trophy { content: '\e17c'; } // '๎…ผ' +@mixin ms-Icon--firstAid { content: '\e17d'; } // '๎…ฝ' +@mixin ms-Icon--plane { content: '\e17e'; } // '๎…พ' +@mixin ms-Icon--page { content: '\e17f'; } // '๎…ฟ' +@mixin ms-Icon--car { content: '\e180'; } // '๎†€' +@mixin ms-Icon--dogAlt { content: '\e181'; } // '๎†' +@mixin ms-Icon--document { content: '\e182'; } // '๎†‚' +@mixin ms-Icon--metadata { content: '\e183'; } // '๎†ƒ' +@mixin ms-Icon--pointItem { content: '\e184'; } // '๎†„' +@mixin ms-Icon--text { content: '\e185'; } // '๎†…' +@mixin ms-Icon--fieldText { content: '\e186'; } // '๎††' +@mixin ms-Icon--fieldNumber { content: '\e187'; } // '๎†‡' +@mixin ms-Icon--dropdown { content: '\e188'; } // '๎†ˆ' +@mixin ms-Icon--radioButton { content: '\e189'; } // '๎†‰' +@mixin ms-Icon--checkbox { content: '\e18a'; } // '๎†Š' +@mixin ms-Icon--story { content: '\e18b'; } // '๎†‹' +@mixin ms-Icon--bold { content: '\e18c'; } // '๎†Œ' +@mixin ms-Icon--italic { content: '\e18d'; } // '๎†' +@mixin ms-Icon--underline { content: '\e18e'; } // '๎†Ž' +@mixin ms-Icon--quote { content: '\e18f'; } // '๎†' +@mixin ms-Icon--styleRemove { content: '\e190'; } // '๎†' +@mixin ms-Icon--pictureAdd { content: '\e191'; } // '๎†‘' +@mixin ms-Icon--pictureRemove { content: '\e192'; } // '๎†’' +@mixin ms-Icon--desktop { content: '\e193'; } // '๎†“' +@mixin ms-Icon--tablet { content: '\e194'; } // '๎†”' +@mixin ms-Icon--mobile { content: '\e195'; } // '๎†•' +@mixin ms-Icon--table { content: '\e196'; } // '๎†–' +@mixin ms-Icon--hide { content: '\e197'; } // '๎†—' +@mixin ms-Icon--shield { content: '\e198'; } // '๎†˜' +@mixin ms-Icon--header { content: '\e19a'; } // '๎†š' +@mixin ms-Icon--paint { content: '\e19b'; } // '๎†›' +@mixin ms-Icon--support { content: '\e19c'; } // '๎†œ' +@mixin ms-Icon--settings { content: '\e19d'; } // '๎†' +@mixin ms-Icon--creditCard { content: '\e19e'; } // '๎†ž' +@mixin ms-Icon--reload { content: '\e19f'; } // '๎†Ÿ' +@mixin ms-Icon--peopleSecurity { content: '\e200'; } // '๎ˆ€' +@mixin ms-Icon--fieldTextBox { content: '\e203'; } // '๎ˆƒ' +@mixin ms-Icon--multiChoice { content: '\e204'; } // '๎ˆ„' +@mixin ms-Icon--fieldMail { content: '\e205'; } // '๎ˆ…' +@mixin ms-Icon--contactForm { content: '\e206'; } // '๎ˆ†' +@mixin ms-Icon--circleHalfFilled { content: '\e207'; } // '๎ˆ‡' +@mixin ms-Icon--documentPDF { content: '\e208'; } // '๎ˆˆ' +@mixin ms-Icon--bookmark { content: '\e209'; } // '๎ˆ‰' +@mixin ms-Icon--circleUnfilled { content: '\e20b'; } // '๎ˆ‹' +@mixin ms-Icon--circleFilled { content: '\e20c'; } // '๎ˆŒ' +@mixin ms-Icon--textBox { content: '\e20e'; } // '๎ˆŽ' +@mixin ms-Icon--drop { content: '\e20f'; } // '๎ˆ' +@mixin ms-Icon--sun { content: '\e210'; } // '๎ˆ' +@mixin ms-Icon--lifesaver { content: '\e211'; } // '๎ˆ‘' +@mixin ms-Icon--lifesaverLock { content: '\e212'; } // '๎ˆ’' +@mixin ms-Icon--mailUnread { content: '\e213'; } // '๎ˆ“' +@mixin ms-Icon--mailRead { content: '\e214'; } // '๎ˆ”' +@mixin ms-Icon--inboxCheck { content: '\e215'; } // '๎ˆ•' +@mixin ms-Icon--folderSearch { content: '\e216'; } // '๎ˆ–' +@mixin ms-Icon--collapse { content: '\e217'; } // '๎ˆ—' +@mixin ms-Icon--expand { content: '\e218'; } // '๎ˆ˜' +@mixin ms-Icon--ascending { content: '\e219'; } // '๎ˆ™' +@mixin ms-Icon--descending { content: '\e21a'; } // '๎ˆš' +@mixin ms-Icon--filterClear { content: '\e21b'; } // '๎ˆ›' +@mixin ms-Icon--checkboxEmpty { content: '\e21c'; } // '๎ˆœ' +@mixin ms-Icon--checkboxMixed { content: '\e21d'; } // '๎ˆ' +@mixin ms-Icon--boards { content: '\e21e'; } // '๎ˆž' +@mixin ms-Icon--checkboxCheck { content: '\e21f'; } // '๎ˆŸ' +@mixin ms-Icon--frowny { content: '\e220'; } // '๎ˆ ' +@mixin ms-Icon--lightBulb { content: '\e221'; } // '๎ˆก' +@mixin ms-Icon--globe { content: '\e222'; } // '๎ˆข' +@mixin ms-Icon--deviceWipe { content: '\e223'; } // '๎ˆฃ' +@mixin ms-Icon--listCheck { content: '\e226'; } // '๎ˆฆ' +@mixin ms-Icon--listGroup { content: '\e227'; } // '๎ˆง' +@mixin ms-Icon--timeline { content: '\e228'; } // '๎ˆจ' +@mixin ms-Icon--fontIncrease { content: '\e229'; } // '๎ˆฉ' +@mixin ms-Icon--fontDecrease { content: '\e22a'; } // '๎ˆช' +@mixin ms-Icon--fontColor { content: '\e22b'; } // '๎ˆซ' +@mixin ms-Icon--mailCheck { content: '\e22c'; } // '๎ˆฌ' +@mixin ms-Icon--mailDown { content: '\e22d'; } // '๎ˆญ' +@mixin ms-Icon--listCheckbox { content: '\e22e'; } // '๎ˆฎ' +@mixin ms-Icon--sunAdd { content: '\e22f'; } // '๎ˆฏ' +@mixin ms-Icon--sunQuestion { content: '\e230'; } // '๎ˆฐ' +@mixin ms-Icon--chevronThinUp { content: '\e231'; } // '๎ˆฑ' +@mixin ms-Icon--chevronThinDown { content: '\e232'; } // '๎ˆฒ' +@mixin ms-Icon--chevronThinLeft { content: '\e233'; } // '๎ˆณ' +@mixin ms-Icon--chevronThinRight { content: '\e234'; } // '๎ˆด' +@mixin ms-Icon--chevronThickUp { content: '\e235'; } // '๎ˆต' +@mixin ms-Icon--chevronThickDown { content: '\e236'; } // '๎ˆถ' +@mixin ms-Icon--chevronThickLeft { content: '\e237'; } // '๎ˆท' +@mixin ms-Icon--chevronThickRight { content: '\e238'; } // '๎ˆธ' +@mixin ms-Icon--linkRemove { content: '\e239'; } // '๎ˆน' +@mixin ms-Icon--alertOutline { content: '\e23b'; } // '๎ˆป' +@mixin ms-Icon--documentLandscape { content: '\e23c'; } // '๎ˆผ' +@mixin ms-Icon--documentAdd { content: '\e23d'; } // '๎ˆฝ' +@mixin ms-Icon--toggleMiddle { content: '\e23e'; } // '๎ˆพ' +@mixin ms-Icon--embed { content: '\e23f'; } // '๎ˆฟ' +@mixin ms-Icon--listNumbered { content: '\e240'; } // '๎‰€' +@mixin ms-Icon--peopleCheck { content: '\e242'; } // '๎‰‚' +@mixin ms-Icon--caretUpOutline { content: '\e243'; } // '๎‰ƒ' +@mixin ms-Icon--caretDownOutline { content: '\e244'; } // '๎‰„' +@mixin ms-Icon--caretLeftOutline { content: '\e245'; } // '๎‰…' +@mixin ms-Icon--caretRightOutline { content: '\e246'; } // '๎‰†' +@mixin ms-Icon--mailSync { content: '\e248'; } // '๎‰ˆ' +@mixin ms-Icon--mailError { content: '\e249'; } // '๎‰‰' +@mixin ms-Icon--mailPause { content: '\e24a'; } // '๎‰Š' +@mixin ms-Icon--peopleSync { content: '\e24b'; } // '๎‰‹' +@mixin ms-Icon--peopleError { content: '\e24c'; } // '๎‰Œ' +@mixin ms-Icon--peoplePause { content: '\e24d'; } // '๎‰' +@mixin ms-Icon--circleBall { content: '\e24e'; } // '๎‰Ž' +@mixin ms-Icon--circleBalloons { content: '\e24f'; } // '๎‰' +@mixin ms-Icon--circleCar { content: '\e250'; } // '๎‰' +@mixin ms-Icon--circleCat { content: '\e251'; } // '๎‰‘' +@mixin ms-Icon--circleCoffee { content: '\e252'; } // '๎‰’' +@mixin ms-Icon--circleDog { content: '\e253'; } // '๎‰“' +@mixin ms-Icon--circleLightning { content: '\e254'; } // '๎‰”' +@mixin ms-Icon--circlePill { content: '\e255'; } // '๎‰•' +@mixin ms-Icon--circlePlane { content: '\e256'; } // '๎‰–' +@mixin ms-Icon--circlePoodle { content: '\e257'; } // '๎‰—' +@mixin ms-Icon--checkPeople { content: '\e259'; } // '๎‰™' +@mixin ms-Icon--documentSearch { content: '\e25a'; } // '๎‰š' +@mixin ms-Icon--sortLines { content: '\e25c'; } // '๎‰œ' +@mixin ms-Icon--calendarPublic { content: '\e25d'; } // '๎‰' +@mixin ms-Icon--contactPublic { content: '\e25e'; } // '๎‰ž' +@mixin ms-Icon--classNotebook { content: '\e25f'; } // '๎‰Ÿ' +@mixin ms-Icon--triangleUp { content: '\e260'; } // '๎‰ ' +@mixin ms-Icon--triangleRight { content: '\e261'; } // '๎‰ก' +@mixin ms-Icon--triangleDown { content: '\e262'; } // '๎‰ข' +@mixin ms-Icon--triangleLeft { content: '\e263'; } // '๎‰ฃ' +@mixin ms-Icon--triangleEmptyUp { content: '\e264'; } // '๎‰ค' +@mixin ms-Icon--triangleEmptyRight { content: '\e265'; } // '๎‰ฅ' +@mixin ms-Icon--triangleEmptyDown { content: '\e266'; } // '๎‰ฆ' +@mixin ms-Icon--triangleEmptyLeft { content: '\e267'; } // '๎‰ง' +@mixin ms-Icon--filePDF { content: '\e268'; } // '๎‰จ' +@mixin ms-Icon--fileImage { content: '\e26c'; } // '๎‰ฌ' +@mixin ms-Icon--fileDocument { content: '\e26d'; } // '๎‰ญ' +@mixin ms-Icon--listGroup2 { content: '\e26e'; } // '๎‰ฎ' +@mixin ms-Icon--copy { content: '\e26f'; } // '๎‰ฏ' +@mixin ms-Icon--creditCardOutline { content: '\e270'; } // '๎‰ฐ' +@mixin ms-Icon--mailPublic { content: '\e272'; } // '๎‰ฒ' +@mixin ms-Icon--folderPublic { content: '\e273'; } // '๎‰ณ' +@mixin ms-Icon--teamwork { content: '\e274'; } // '๎‰ด' +@mixin ms-Icon--move { content: '\e275'; } // '๎‰ต' +@mixin ms-Icon--classroom { content: '\e276'; } // '๎‰ถ' +@mixin ms-Icon--menu2 { content: '\e277'; } // '๎‰ท' +@mixin ms-Icon--plus2 { content: '\e278'; } // '๎‰ธ' +@mixin ms-Icon--tag { content: '\e279'; } // '๎‰น' +@mixin ms-Icon--arrowUp2 { content: '\e27a'; } // '๎‰บ' +@mixin ms-Icon--arrowDown2 { content: '\e27b'; } // '๎‰ป' +@mixin ms-Icon--circlePlus { content: '\e27c'; } // '๎‰ผ' +@mixin ms-Icon--circleInfo { content: '\e27d'; } // '๎‰ฝ' +@mixin ms-Icon--section { content: '\e27e'; } // '๎‰พ' +@mixin ms-Icon--sections { content: '\e27f'; } // '๎‰ฟ' +@mixin ms-Icon--at { content: '\e282'; } // '๎Š‚' +@mixin ms-Icon--arrowUpRight { content: '\e283'; } // '๎Šƒ' +@mixin ms-Icon--arrowDownRight { content: '\e284'; } // '๎Š„' +@mixin ms-Icon--arrowDownLeft { content: '\e285'; } // '๎Š…' +@mixin ms-Icon--arrowUpLeft { content: '\e286'; } // '๎Š†' +@mixin ms-Icon--bundle { content: '\e287'; } // '๎Š‡' +@mixin ms-Icon--pictureEdit { content: '\e288'; } // '๎Šˆ' +@mixin ms-Icon--protectionCenter { content: '\e289'; } // '๎Š‰' +@mixin ms-Icon--alert2 { content: '\e28a'; } // '๎ŠŠ' +@mixin ms-Icon--skypeCircleCheck { content: '\e310'; } // '๎ŠŠ' +@mixin ms-Icon--skypeCircleClock { content: '\e311'; } // '๎ŠŠ' +@mixin ms-Icon--skypeCircleMinus { content: '\e312'; } // '๎ŠŠ' +@mixin ms-Icon--skypeCheck { content: '\e315'; } // '๎ŠŠ' +@mixin ms-Icon--skypeClock { content: '\e316'; } // '๎ŠŠ' +@mixin ms-Icon--skypeMinus { content: '\e317'; } // '๎ŠŠ' + + +@mixin ms-Icon--circle { + position: relative; + display: inline-block; + font-size: 1rem; + width: 1em; + height: 1em; + margin: 0 0.5em 0 0; + padding: 0; + text-align: left; + -webkit-font-smoothing: antialiased; + + &:before, &:after { + line-height: 1; + font-size: inherit; + } + + &:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; + } + + &:after { + content: '\e000'; + position: absolute; + top: 0; + left: 0; + transform: scale(2); + transform-origin: 50% 50%; + z-index: $ms-zIndex-back; + } +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Mixins.RTL.scss b/dist/sass/_Fabric.Mixins.RTL.scss new file mode 100644 index 000000000..daec15d09 --- /dev/null +++ b/dist/sass/_Fabric.Mixins.RTL.scss @@ -0,0 +1,325 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Internationalization mixins + + +// Base left-to-right mixin definition. +@mixin LTR { + [dir='ltr'] & { + @content; + } +} + +// Base right-to-left mixin definition. +@mixin RTL { + [dir='rtl'] & { + @content; + } +} + +// Use baseRTL on a root element (e.g. page or region) that needs RTL support. +@mixin baseRtl { + @include RTL { + direction: rtl; + unicode-bidi: bidi-override; + } +} + + +// Common CSS property mixins with support for RTL. +// Use to automatically create RTL versions of your properties. + +// Border styles. +@mixin border-color($top, $right, $bottom, $left) { + border-color: $top $right $bottom $left; + + @include RTL { + border-color: $top $left $bottom $right; + } +} + +@mixin border-left($width, $style, $color) { + @include LTR { + border-left: $width $style $color; + } + + @include RTL { + border-right: $width $style $color; + } +} + +@mixin border-left-color($color) { + @include LTR { + border-left-color: $color; + } + + @include RTL { + border-right-color: $color; + } +} + +@mixin border-left-style($style) { + @include LTR { + border-left-style: $style; + } + + @include RTL { + border-right-style: $style; + } +} + +@mixin border-left-width($width) { + @include LTR { + border-left-width: $width; + } + + @include RTL { + border-right-width: $width; + } +} + +@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) { + border-radius: $topLeft $topRight $bottomRight $bottomLeft; + + @include RTL { + border-radius: $topRight $topLeft $bottomLeft $bottomRight; + } +} + +@mixin border-right($width, $style, $color) { + @include LTR { + border-right: $width $style $color; + } + + @include RTL { + border-left: $width $style $color; + } +} + +@mixin border-right-color($color) { + @include LTR { + border-right-color: $color; + } + + @include RTL { + border-left-color: $color; + } +} + +@mixin border-right-style($style) { + @include LTR { + border-right-style: $style; + } + + @include RTL { + border-left-style: $style; + } +} + +@mixin border-right-width($width) { + @include LTR { + border-right-width: $width; + } + + @include RTL { + border-left-width: $width; + } +} + +// Floats. +@mixin clear($side) { + @if $side == left { + @include LTR { + clear: $side; + } + + @include RTL { + clear: right; + } + } @else if $side == right { + @include LTR { + clear: $side; + } + + @include RTL { + clear: left; + } + } @else { + clear: $side; + } +} + +@mixin float($direction) { + @if $direction == left { + @include LTR { + float: left; + } + + @include RTL { + float: right; + } + } @else { + @include LTR { + float: right; + } + + @include RTL { + float: left; + } + } +} + +// Positioning. +@mixin left($distance) { + @include LTR { + left: $distance; + } + + @include RTL { + right: $distance; + } +} + +@mixin right($distance) { + @include LTR { + right: $distance; + } + + @include RTL { + left: $distance; + } +} + +// Margins. +@mixin margin($top, $right, $bottom, $left) { + margin: $top $right $bottom $left; + + @include RTL { + margin: $top $left $bottom $right; + } +} + +@mixin margin-left($distance) { + @include LTR { + margin-left: $distance; + } + + @include RTL { + margin-right: $distance; + } +} + +@mixin margin-right($distance) { + @include LTR { + margin-right: $distance; + } + @include RTL { + margin-left: $distance; + } +} + +// Padding. +@mixin padding($top, $right, $bottom, $left) { + padding: $top $right $bottom $left; + + @include RTL { + padding: $top $left $bottom $right; + } +} + +@mixin padding-left($distance) { + @include LTR { + padding-left: $distance; + } + + @include RTL { + padding-right: $distance; + } +} + +@mixin padding-right($distance) { + @include LTR { + padding-right: $distance; + } + + @include RTL { + padding-left: $distance; + } +} + +// Text-alignment. +@mixin text-align($direction) { + @if $direction == left { + @include LTR { + text-align: left; + } + + @include RTL { + text-align: right; + } + } @else { + @include LTR { + text-align: right; + } + + @include RTL { + text-align: left; + } + } +} + +// Box-shadow. +@mixin box-shadow($left, $etc) { + @include LTR { + box-shadow: $left $etc; + } + + @include RTL { + box-shadow: -$left $etc; + } +} + +// Transforms. +@mixin transform-scaleX($scaleX: 1) { + @include LTR { + transform: scaleX($scaleX); + } + + @include RTL { + transform: scaleX(-$scaleX); + } +} + +@mixin transform-translateX($distance) { + @include LTR { + transform: translateX($distance); + } + + @include RTL { + transform: translateX(-$distance); + } +} + +// Transitions. Only supported when ONLY left/right are declared +@mixin transition-property($direction) { + @if $direction == left { + @include LTR { + transition-property: left; + } + + @include RTL { + transition-property: right; + } + } @else { + @include LTR { + transition-property: right; + } + + @include RTL { + transition-property: left; + } + } +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Mixins.scss b/dist/sass/_Fabric.Mixins.scss new file mode 100644 index 000000000..518d9bf04 --- /dev/null +++ b/dist/sass/_Fabric.Mixins.scss @@ -0,0 +1,274 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Vendor-prefixed mixins + + +// Border radius. +@mixin border-radius($ms-radius: 5px) { + border-radius: $ms-radius; + background-clip: padding-box; +} + +// Drop shadow. +@mixin drop-shadow($ms-x-offset: 0, $ms-y-offset: 0, $ms-blur: 5px, $ms-spread: 0, $ms-alpha: 0.4) { + box-shadow: $ms-x-offset $ms-y-offset $ms-blur $ms-spread rgba(0, 0, 0, $ms-alpha); +} + +// Background gradient. +@mixin background-gradient($ms-origin: left, $ms-start: #000, $ms-start-location: 0%, $ms-stop: #FFF, $ms-stop-location: 100%) { + background-color: $ms-start; + background-image: linear-gradient($ms-origin, $ms-start $ms-start-location, $ms-stop $ms-stop-location); +} + +// Rotation. +@mixin rotate($ms-deg) { + transform: rotate($ms-deg); +} + +// Reset button styles. +@mixin button-reset() { + background: none; + border: 0; + cursor: pointer; +} + +@mixin resetAnimation() { + -webkit-animation: none; + -moz-animation: none; + -ms-animation: none; + -o-animation: none; + animation: none; +} + +@mixin resetBackface() { + backface-visibility: visible; +} + +@mixin resetBackground() { + background: 0; + background-clip: border-box; + background-origin: padding-box; +} + +@mixin resetBorder() { + border: 0; + border-collapse: separate; + border-image: none; + border-radius: 0; + border-spacing: 0; +} + +@mixin resetBoxShadow() { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +@mixin resetBoxSizing() { + box-sizing: content-box; +} + +@mixin resetColumns() { + columns: auto; + column-count: auto; + column-fill: balance; + column-gap: normal; + column-rule: medium none currentColor; + column-rule-color: currentColor; + column-rule-style: none; + column-rule-width: none; + column-span: 1; + column-width: auto; +} + + +// Fonts and Typography Resets +@mixin resetFont() { + font: normal; + font-family: inherit; + font-size: normal; + font-style: normal; + font-variant: normal; + font-weight: normal; +} + +@mixin resetTextStyling() { + text-align: inherit; + text-align-last: auto; + text-decoration: none; + text-decoration-color: inherit; + text-decoration-line: none; + text-decoration-style: solid; + text-indent: 0; + text-shadow: none; + text-transform: none; + line-height: normal; + letter-spacing: normal; + word-spacing: normal; +} + + +// Box Model Resets +@mixin resetPadding() { + padding: 0; +} + +@mixin resetMargins() { + margin: 0; +} + +@mixin resetOverflow() { + overflow: visible; +} + +@mixin resetMax() { + max-height: none; + max-width: none; +} + +@mixin resetMin() { + min-height: 0; + min-width: 0; +} + +@mixin resetPositioning() { + bottom: auto; + left: auto; + top: auto; + left: auto; +} + +@mixin resetFloat() { + float: none; +} + +@mixin resetHeight($ms-useMaxMin: false) { + height: auto; + @if $ms-useMaxMin == true { + min-height: 0; + max-height: 0; + } +} + +@mixin resetWidth($ms-useMaxMin: false) { + width: auto; + @if $ms-useMaxMin == true { + min-width: 0; + max-width: 0; + } +} + +@mixin resetPosition() { + position: static; +} + +@mixin resetPerspective() { + -webkit-perspective: none; + -webkit-perspective-origin: 50% 50%; + perspective: none; + perspective-origin: 50% 50%; + +} + +@mixin resetTransition() { + -webkit-transition: none; + transition: none; +} + +@mixin resetListStyle() { + list-style: none; +} + +@mixin resetTransform() { + -ms-transform: none; + -webkit-transform: none; + -webkit-transform-style: flat; + transform: none; + transform-style: flat; +} + +@mixin resetOutline() { + outline: 0; +} + +@mixin resetPageBreak() { + page-break-after: auto; + page-break-before: auto; + page-break-inside: auto; +} + +@mixin resetDisplay() { + display: block; +} + +@mixin resetVerticalAlign() { + vertical-align: baseline; +} + +// Prevents the text within a block element from wrapping to second line. +@mixin noWrap() { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Input placehoder +@mixin input-placeholder { + &::-webkit-input-placeholder, + &::-moz-placeholder, + &:-moz-placeholder, + &:-ms-input-placeholder { + @content; + } +} + +// Animations +@mixin animationName($ms-name) { + -webkit-animation-name: $ms-name; + -moz-animation-name: $ms-name; + -ms-animation-name: $ms-name; + -o-animation-name: $ms-name; + animation-name: $ms-name; +} + +@mixin animationDuration($ms-duration) { + -webkit-animation-duration: $ms-duration; + -moz-animation-duration: $ms-duration; + -ms-animation-duration: $ms-duration; + -o-animation-duration: $ms-duration; +} + +@mixin animationTiming($ms-function) { + -webkit-animation-timing-function: $ms-function; + -moz-animation-timing-function: $ms-function; + -ms-animation-timing-function: $ms-function; + -o-animation-timing-function: $ms-function; + animation-timing-function: $ms-function; +} + +@mixin animationFillMode($ms-mode) { + -webkit-animation-fill-mode: $ms-mode; + -moz-animation-fill-mode: $ms-mode; + -ms-animation-fill-mode: $ms-mode; + -o-animation-fill-mode: $ms-mode; + animation-fill-mode: $ms-mode; +} + +// Flexbox +@mixin flexBox() { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +@mixin alignItems($ms-mode) { + -webkit-box-align: $ms-mode; + -moz-box-align: $ms-mode; + -ms-flex-align: $ms-mode; + -webkit-align-items: $ms-mode; + align-items: $ms-mode; +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Responsive.Utilities.Variables.scss b/dist/sass/_Fabric.Responsive.Utilities.Variables.scss new file mode 100644 index 000000000..ab234df8f --- /dev/null +++ b/dist/sass/_Fabric.Responsive.Utilities.Variables.scss @@ -0,0 +1,697 @@ +// Small Screens +@mixin ms-u-sm12 { + width: 100%; +} +@mixin ms-u-sm11 { + width: 91.66666666666666%; +} +@mixin ms-u-sm10 { + width: 83.33333333333334%; +} +@mixin ms-u-sm9 { + width: 75%; +} +@mixin ms-u-sm8 { + width: 66.66666666666666%; +} +@mixin ms-u-sm7 { + width: 58.333333333333336%; +} +@mixin ms-u-sm6 { + width: 50%; +} +@mixin ms-u-sm5 { + width: 41.66666666666667%; +} +@mixin ms-u-sm4 { + width: 33.33333333333333%; +} +@mixin ms-u-sm3 { + width: 25%; +} +@mixin ms-u-sm2 { + width: 16.666666666666664%; +} +@mixin ms-u-sm1 { + width: 8.333333333333332%; +} +@mixin ms-u-smPull12 { + right: 100%; +} +@mixin ms-u-smPull11 { + right: 91.66666666666666%; +} +@mixin ms-u-smPull10 { + right: 83.33333333333334%; +} +@mixin ms-u-smPull9 { + right: 75%; +} +@mixin ms-u-smPull8 { + right: 66.66666666666666%; +} +@mixin ms-u-smPull7 { + right: 58.333333333333336%; +} +@mixin ms-u-smPull6 { + right: 50%; +} +@mixin ms-u-smPull5 { + right: 41.66666666666667%; +} +@mixin ms-u-smPull4 { + right: 33.33333333333333%; +} +@mixin ms-u-smPull3 { + right: 25%; +} +@mixin ms-u-smPull2 { + right: 16.666666666666664%; +} +@mixin ms-u-smPull1 { + right: 8.333333333333332%; +} +@mixin ms-u-smPull0 { + right: auto; +} +@mixin ms-u-smPush12 { + left: 100%; +} +@mixin ms-u-smPush11 { + left: 91.66666666666666%; +} +@mixin ms-u-smPush10 { + left: 83.33333333333334%; +} +@mixin ms-u-smPush9 { + left: 75%; +} +@mixin ms-u-smPush8 { + left: 66.66666666666666%; +} +@mixin ms-u-smPush7 { + left: 58.333333333333336%; +} +@mixin ms-u-smPush6 { + left: 50%; +} +@mixin ms-u-smPush5 { + left: 41.66666666666667%; +} +@mixin ms-u-smPush4 { + left: 33.33333333333333%; +} +@mixin ms-u-smPush3 { + left: 25%; +} +@mixin ms-u-smPush2 { + left: 16.666666666666664%; +} +@mixin ms-u-smPush1 { + left: 8.333333333333332%; +} +@mixin ms-u-smPush0 { + left: auto; +} + +// Medium Screens +@mixin ms-u-md12 { +width: 100%; +} +@mixin ms-u-md11 { +width: 91.66666666666666%; +} +@mixin ms-u-md10 { +width: 83.33333333333334%; +} +@mixin ms-u-md9 { +width: 75%; +} +@mixin ms-u-md8 { +width: 66.66666666666666%; +} +@mixin ms-u-md7 { +width: 58.333333333333336%; +} +@mixin ms-u-md6 { +width: 50%; +} +@mixin ms-u-md5 { +width: 41.66666666666667%; +} +@mixin ms-u-md4 { +width: 33.33333333333333%; +} +@mixin ms-u-md3 { +width: 25%; +} +@mixin ms-u-md2 { +width: 16.666666666666664%; +} +@mixin ms-u-md1 { +width: 8.333333333333332%; +} +@mixin ms-u-mdPull12 { +right: 100%; +} +@mixin ms-u-mdPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-mdPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-mdPull9 { +right: 75%; +} +@mixin ms-u-mdPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-mdPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-mdPull6 { +right: 50%; +} +@mixin ms-u-mdPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-mdPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-mdPull3 { +right: 25%; +} +@mixin ms-u-mdPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-mdPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-mdPull0 { +right: auto; +} +@mixin ms-u-mdPush12 { +left: 100%; +} +@mixin ms-u-mdPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-mdPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-mdPush9 { +left: 75%; +} +@mixin ms-u-mdPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-mdPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-mdPush6 { +left: 50%; +} +@mixin ms-u-mdPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-mdPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-mdPush3 { +left: 25%; +} +@mixin ms-u-mdPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-mdPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-mdPush0 { +left: auto; +} + +// Large screens +@mixin ms-u-lg12 { +width: 100%; +} +@mixin ms-u-lg11 { +width: 91.66666666666666%; +} +@mixin ms-u-lg10 { +width: 83.33333333333334%; +} +@mixin ms-u-lg9 { +width: 75%; +} +@mixin ms-u-lg8 { +width: 66.66666666666666%; +} +@mixin ms-u-lg7 { +width: 58.333333333333336%; +} +@mixin ms-u-lg6 { +width: 50%; +} +@mixin ms-u-lg5 { +width: 41.66666666666667%; +} +@mixin ms-u-lg4 { +width: 33.33333333333333%; +} +@mixin ms-u-lg3 { +width: 25%; +} +@mixin ms-u-lg2 { +width: 16.666666666666664%; +} +@mixin ms-u-lg1 { +width: 8.333333333333332%; +} +@mixin ms-u-lgPull12 { +right: 100%; +} +@mixin ms-u-lgPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-lgPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-lgPull9 { +right: 75%; +} +@mixin ms-u-lgPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-lgPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-lgPull6 { +right: 50%; +} +@mixin ms-u-lgPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-lgPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-lgPull3 { +right: 25%; +} +@mixin ms-u-lgPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-lgPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-lgPull0 { +right: auto; +} +@mixin ms-u-lgPush12 { +left: 100%; +} +@mixin ms-u-lgPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-lgPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-lgPush9 { +left: 75%; +} +@mixin ms-u-lgPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-lgPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-lgPush6 { +left: 50%; +} +@mixin ms-u-lgPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-lgPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-lgPush3 { +left: 25%; +} +@mixin ms-u-lgPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-lgPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-lgPush0 { +left: auto; +} + +// Extra Large Screens +@mixin ms-u-xl12 { +width: 100%; +} +@mixin ms-u-xl11 { +width: 91.66666666666666%; +} +@mixin ms-u-xl10 { +width: 83.33333333333334%; +} +@mixin ms-u-xl9 { +width: 75%; +} +@mixin ms-u-xl8 { +width: 66.66666666666666%; +} +@mixin ms-u-xl7 { +width: 58.333333333333336%; +} +@mixin ms-u-xl6 { +width: 50%; +} +@mixin ms-u-xl5 { +width: 41.66666666666667%; +} +@mixin ms-u-xl4 { +width: 33.33333333333333%; +} +@mixin ms-u-xl3 { +width: 25%; +} +@mixin ms-u-xl2 { +width: 16.666666666666664%; +} +@mixin ms-u-xl1 { +width: 8.333333333333332%; +} +@mixin ms-u-xlPull12 { +right: 100%; +} +@mixin ms-u-xlPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-xlPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-xlPull9 { +right: 75%; +} +@mixin ms-u-xlPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-xlPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-xlPull6 { +right: 50%; +} +@mixin ms-u-xlPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-xlPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-xlPull3 { +right: 25%; +} +@mixin ms-u-xlPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-xlPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-xlPull0 { +right: auto; +} +@mixin ms-u-xlPush12 { +left: 100%; +} +@mixin ms-u-xlPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-xlPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-xlPush9 { +left: 75%; +} +@mixin ms-u-xlPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-xlPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-xlPush6 { +left: 50%; +} +@mixin ms-u-xlPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-xlPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-xlPush3 { +left: 25%; +} +@mixin ms-u-xlPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-xlPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-xlPush0 { +left: auto; +} + + +// XXL Screens +@mixin ms-u-xxl12 { +width: 100%; +} +@mixin ms-u-xxl11 { +width: 91.66666666666666%; +} +@mixin ms-u-xxl10 { +width: 83.33333333333334%; +} +@mixin ms-u-xxl9 { +width: 75%; +} +@mixin ms-u-xxl8 { +width: 66.66666666666666%; +} +@mixin ms-u-xxl7 { +width: 58.333333333333336%; +} +@mixin ms-u-xxl6 { +width: 50%; +} +@mixin ms-u-xxl5 { +width: 41.66666666666667%; +} +@mixin ms-u-xxl4 { +width: 33.33333333333333%; +} +@mixin ms-u-xxl3 { +width: 25%; +} +@mixin ms-u-xxl2 { +width: 16.666666666666664%; +} +@mixin ms-u-xxl1 { +width: 8.333333333333332%; +} +@mixin ms-u-xxlPull12 { +right: 100%; +} +@mixin ms-u-xxlPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-xxlPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-xxlPull9 { +right: 75%; +} +@mixin ms-u-xxlPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-xxlPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-xxlPull6 { +right: 50%; +} +@mixin ms-u-xxlPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-xxlPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-xxlPull3 { +right: 25%; +} +@mixin ms-u-xxlPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-xxlPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-xxlPull0 { +right: auto; +} +@mixin ms-u-xxlPush12 { +left: 100%; +} +@mixin ms-u-xxlPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-xxlPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-xxlPush9 { +left: 75%; +} +@mixin ms-u-xxlPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-xxlPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-xxlPush6 { +left: 50%; +} +@mixin ms-u-xxlPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-xxlPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-xxlPush3 { +left: 25%; +} +@mixin ms-u-xxlPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-xxlPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-xxlPush0 { +left: auto; +} + +// Extra extra extra large screens + +@mixin ms-u-xxxl12 { +width: 100%; +} +@mixin ms-u-xxxl11 { +width: 91.66666666666666%; +} +@mixin ms-u-xxxl10 { +width: 83.33333333333334%; +} +@mixin ms-u-xxxl9 { +width: 75%; +} +@mixin ms-u-xxxl8 { +width: 66.66666666666666%; +} +@mixin ms-u-xxxl7 { +width: 58.333333333333336%; +} +@mixin ms-u-xxxl6 { +width: 50%; +} +@mixin ms-u-xxxl5 { +width: 41.66666666666667%; +} +@mixin ms-u-xxxl4 { +width: 33.33333333333333%; +} +@mixin ms-u-xxxl3 { +width: 25%; +} +@mixin ms-u-xxxl2 { +width: 16.666666666666664%; +} +@mixin ms-u-xxxl1 { +width: 8.333333333333332%; +} +@mixin ms-u-xxxlPull12 { +right: 100%; +} +@mixin ms-u-xxxlPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-xxxlPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-xxxlPull9 { +right: 75%; +} +@mixin ms-u-xxxlPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-xxxlPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-xxxlPull6 { +right: 50%; +} +@mixin ms-u-xxxlPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-xxxlPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-xxxlPull3 { +right: 25%; +} +@mixin ms-u-xxxlPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-xxxlPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-xxxlPull0 { +right: auto; +} +@mixin ms-u-xxxlPush12 { +left: 100%; +} +@mixin ms-u-xxxlPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-xxxlPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-xxxlPush9 { +left: 75%; +} +@mixin ms-u-xxxlPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-xxxlPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-xxxlPush6 { +left: 50%; +} +@mixin ms-u-xxxlPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-xxxlPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-xxxlPush3 { +left: 25%; +} +@mixin ms-u-xxxlPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-xxxlPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-xxxlPush0 { +left: auto; +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Responsive.Variables.scss b/dist/sass/_Fabric.Responsive.Variables.scss new file mode 100644 index 000000000..e553f6a8f --- /dev/null +++ b/dist/sass/_Fabric.Responsive.Variables.scss @@ -0,0 +1,35 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric responsive variables + + +//== Variables for responsive breakpoints +// + +// Small screen / phone (320px - 479px) +$ms-screen-sm-min: 320px; + +// Medium screen / tablet (480px - 639px) +$ms-screen-md-min: 480px; + +// Large screen / tablet (640px - 1023px) +$ms-screen-lg-min: 640px; + +// Extra large screen / tablet (1024px - 1365px) +$ms-screen-xl-min: 1024px; + +// Extra extra large screen / desktop (1366px - 1919px) +$ms-screen-xxl-min: 1366px; + +// Extra extra extra large screen / desktop (1366px and up) +$ms-screen-xxxl-min: 1920px; + +// Set all maxes since order matters in SASS +$ms-screen-sm-max: ($ms-screen-md-min - 1); +$ms-screen-md-max: ($ms-screen-lg-min - 1); +$ms-screen-lg-max: ($ms-screen-xl-min - 1); +$ms-screen-xl-max: ($ms-screen-xxl-min - 1); +$ms-screen-xxl-max: ($ms-screen-xxxl-min - 1); \ No newline at end of file diff --git a/dist/sass/_Fabric.Typography.Fonts.scss b/dist/sass/_Fabric.Typography.Fonts.scss new file mode 100644 index 000000000..4794ff715 --- /dev/null +++ b/dist/sass/_Fabric.Typography.Fonts.scss @@ -0,0 +1,167 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Font definitions + + +// Font weights. +$ms-font-name: "Segoe UI"; + + +// Font paths. +$ms-font-directory: "https://appsforoffice.microsoft.com/fabric/fonts"; +$ms-font-path-arabic: "SegoeUI-Arabic"; +$ms-font-path-cyrillic: "SegoeUI-Cyrillic"; +$ms-font-path-easteuropean: "SegoeUI-EastEuropean"; +$ms-font-path-greek: "SegoeUI-Greek"; +$ms-font-path-hebrew: "SegoeUI-Hebrew"; +$ms-font-path-vietnamese: "SegoeUI-Vietnamese"; +$ms-font-path-westeuropean: "SegoeUI-WestEuropean"; + + +/* + 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 +*/ + +// Mixins to generate @font-face rules for unique languages. +@mixin SegoeUILight($ms-font-language, $ms-font-path) { + @font-face { + font-family: "#{$ms-font-name} #{$ms-font-language}"; + src: local("Segoe UI Light"), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff2') format('woff2'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff') format('woff'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.ttf') format('truetype'); + font-weight: 100; + font-style: normal; + } +} + +@mixin SegoeUISemilight($ms-font-language, $ms-font-path) { + @font-face { + font-family: "#{$ms-font-name} #{$ms-font-language}"; + src: local("Segoe UI Semilight"), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff2') format('woff2'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff') format('woff'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; + } +} + +@mixin SegoeUIRegular($ms-font-language, $ms-font-path) { + @font-face { + font-family: "#{$ms-font-name} #{$ms-font-language}"; + src: local("Segoe UI"), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff2') format('woff2'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff') format('woff'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + } +} + +@mixin SegoeUISemibold($ms-font-language, $ms-font-path) { + @font-face { + font-family: "#{$ms-font-name} #{$ms-font-language}"; + src: local("Segoe UI Semibold"), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff2') format('woff2'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff') format('woff'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + } +} + +// Mixins to generate language-specific font faces. +@mixin SegoeUIArabicLight { + @include SegoeUILight("Arabic", $ms-font-path-arabic); +} +@mixin SegoeUIArabicRegular { + @include SegoeUIRegular("Arabic", $ms-font-path-arabic); +} +@mixin SegoeUIArabicSemibold { + @include SegoeUISemibold("Arabic", $ms-font-path-arabic); +} +@mixin SegoeUIArabicSemilight { + @include SegoeUISemilight("Arabic", $ms-font-path-arabic); +} + +@mixin SegoeUICyrillicLight { + @include SegoeUILight("Cyrillic", $ms-font-path-cyrillic); +} +@mixin SegoeUICyrillicRegular { + @include SegoeUIRegular("Cyrillic", $ms-font-path-cyrillic); +} +@mixin SegoeUICyrillicSemibold { + @include SegoeUISemibold("Cyrillic", $ms-font-path-cyrillic); +} +@mixin SegoeUICyrillicSemilight { + @include SegoeUISemilight("Cyrillic", $ms-font-path-cyrillic); +} + +@mixin SegoeUIEastEuropeanLight { + @include SegoeUILight("EastEuropean", $ms-font-path-easteuropean); +} +@mixin SegoeUIEastEuropeanRegular { + @include SegoeUIRegular("EastEuropean", $ms-font-path-easteuropean); +} +@mixin SegoeUIEastEuropeanSemibold { + @include SegoeUISemibold("EastEuropean", $ms-font-path-easteuropean); +} +@mixin SegoeUIEastEuropeanSemilight { + @include SegoeUISemilight("EastEuropean", $ms-font-path-easteuropean); +} + +@mixin SegoeUIGreekLight { + @include SegoeUILight("Greek", $ms-font-path-greek); +} +@mixin SegoeUIGreekRegular { + @include SegoeUIRegular("Greek", $ms-font-path-greek); +} +@mixin SegoeUIGreekSemibold { + @include SegoeUISemibold("Greek", $ms-font-path-greek); +} +@mixin SegoeUIGreekSemilight { + @include SegoeUISemilight("Greek", $ms-font-path-greek); +} + +@mixin SegoeUIHebrewLight { + @include SegoeUILight("Hebrew", $ms-font-path-hebrew); +} +@mixin SegoeUIHebrewRegular { + @include SegoeUIRegular("Hebrew", $ms-font-path-hebrew); +} +@mixin SegoeUIHebrewSemibold { + @include SegoeUISemibold("Hebrew", $ms-font-path-hebrew); +} +@mixin SegoeUIHebrewSemilight { + @include SegoeUISemilight("Hebrew", $ms-font-path-hebrew); +} + +@mixin SegoeUIVietnameseLight { + @include SegoeUILight("Vietnamese", $ms-font-path-vietnamese); +} +@mixin SegoeUIVietnameseRegular { + @include SegoeUIRegular("Vietnamese", $ms-font-path-vietnamese); +} +@mixin SegoeUIVietnameseSemibold { + @include SegoeUISemibold("Vietnamese", $ms-font-path-vietnamese); +} +@mixin SegoeUIVietnameseSemilight { + @include SegoeUISemilight("Vietnamese", $ms-font-path-vietnamese); +} + +@mixin SegoeUIWestEuropeanLight { + @include SegoeUILight("WestEuropean", $ms-font-path-westeuropean); +} +@mixin SegoeUIWestEuropeanRegular { + @include SegoeUIRegular("WestEuropean", $ms-font-path-westeuropean); +} +@mixin SegoeUIWestEuropeanSemibold { + @include SegoeUISemibold("WestEuropean", $ms-font-path-westeuropean); +} +@mixin SegoeUIWestEuropeanSemilight { + @include SegoeUISemilight("WestEuropean", $ms-font-path-westeuropean); +} diff --git a/dist/sass/_Fabric.Typography.Language.Overrides.scss b/dist/sass/_Fabric.Typography.Language.Overrides.scss new file mode 100644 index 000000000..332e91c14 --- /dev/null +++ b/dist/sass/_Fabric.Typography.Language.Overrides.scss @@ -0,0 +1,50 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Language override definitions + + +// A mixin that overrides all of the font classes for languages that +// use system fonts. A single font-family is used for all weights. +@mixin language-override-system-fonts($lang-code, $font-family) { + *[lang="#{$lang-code}"] { + .ms-font-mi, + .ms-font-xs, + .ms-font-s, + .ms-font-s-plus, + .ms-font-m, + .ms-font-m-plus, + .ms-font-l, + .ms-font-xl, + .ms-font-xxl, + .ms-font-su, + .ms-fontWeight-light, + .ms-fontWeight-light-hover:hover, + .ms-fontWeight-semilight, + .ms-fontWeight-semilight-hover:hover, + .ms-fontWeight-regular, + .ms-fontWeight-regular-hover:hover, + .ms-fontWeight-semibold, + .ms-fontWeight-semibold-hover:hover { + font-family: $font-family; + } + } +} + +// Variables for each of the non-distributed (native) font stacks. +$ms-font-stack-japanese: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-system-base; +$ms-font-stack-korean: 'Malgun Gothic', Gulim, $ms-font-system-base; +$ms-font-stack-chinese-simplified: 'Microsoft Yahei', Verdana, Simsun, $ms-font-system-base; +$ms-font-stack-chinese-traditional: 'Microsoft Jhenghei', Pmingliu, $ms-font-system-base; +$ms-font-stack-hindi: 'Nirmala UI', $ms-font-system-base; + +// Variables for each of the web font stacks. +$ms-font-stack-arabic: 'Segoe UI Arabic', $ms-font-family-base; +$ms-font-stack-cyrillic: 'Segoe UI Cyrillic', $ms-font-family-base; +$ms-font-stack-eastEuropean: 'Segoe UI EastEuropean', $ms-font-family-base; +$ms-font-stack-greek: 'Segoe UI Greek', $ms-font-family-base; +$ms-font-stack-hebrew: 'Segoe UI Hebrew', $ms-font-family-base; +$ms-font-stack-vietnamese: 'Segoe UI Vietnamese', $ms-font-family-base; +$ms-font-stack-leelawadee: 'Leelawadee UI', 'Kmer UI', $ms-font-family-base; \ No newline at end of file diff --git a/dist/sass/_Fabric.Typography.Variables.scss b/dist/sass/_Fabric.Typography.Variables.scss new file mode 100644 index 000000000..fa273adda --- /dev/null +++ b/dist/sass/_Fabric.Typography.Variables.scss @@ -0,0 +1,29 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Typography variables + +$ms-font-system-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; +$ms-font-family-base: 'Segoe UI WestEuropean', $ms-font-system-base; + +$ms-font-weight-light: 100; +$ms-font-weight-regular: 400; +$ms-font-weight-semilight: 300; +$ms-font-weight-semibold: 600; + + +//== Type sizes +// + +$ms-font-size-su: 42px; +$ms-font-size-xxl: 28px; +$ms-font-size-xl: 21px; +$ms-font-size-l: 17px; +$ms-font-size-m-plus: 15px; +$ms-font-size-m: 14px; +$ms-font-size-s-plus: 13px; +$ms-font-size-s: 12px; +$ms-font-size-xs: 11px; +$ms-font-size-mi: 10px; diff --git a/dist/sass/_Fabric.Typography.scss b/dist/sass/_Fabric.Typography.scss new file mode 100644 index 000000000..5c8c4b3c7 --- /dev/null +++ b/dist/sass/_Fabric.Typography.scss @@ -0,0 +1,354 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Typographic mixins arranged with appropriate size and family combinations. +@import 'Fabric.Typography.Variables'; + +// Super Styles (LIMITED USE) +@mixin ms-font-su { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-su; + font-weight: $ms-font-weight-light; +} + +// Extra-Extra-Large +@mixin ms-font-xxl { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-xxl; + font-weight: $ms-font-weight-light; +} + +// Extra-Large Styles +@mixin ms-font-xl { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-xl; + font-weight: $ms-font-weight-light; +} + +// Large Styles +@mixin ms-font-l { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-l; + font-weight: $ms-font-weight-semilight; +} + +// Medium Plus Styles +@mixin ms-font-m-plus { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m-plus; + font-weight: $ms-font-weight-regular; +} + +// Medium Styles +@mixin ms-font-m { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-m; + font-weight: $ms-font-weight-regular; +} + +// Small Plus Styles +@mixin ms-font-s-plus { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-s-plus; + font-weight: $ms-font-weight-regular; +} + +// Small Styles +@mixin ms-font-s { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-s; + font-weight: $ms-font-weight-regular; +} + +// XS Styles +@mixin ms-font-xs { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-xs; + font-weight: $ms-font-weight-regular; +} + +// Micro Styles (LIMITED USE) +@mixin ms-font-mi { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-base; + font-size: $ms-font-size-mi; + font-weight: $ms-font-weight-semibold; +} + +//== Helper classes & mixins +// +// Helper mixins to override default type values + +// Font weights +@mixin ms-fontWeight-light { + font-weight: $ms-font-weight-light; +} + +@mixin ms-fontWeight-semilight { + font-weight: $ms-font-weight-semilight; +} + +@mixin ms-fontWeight-regular { + font-weight: $ms-font-weight-regular; +} + +@mixin ms-fontWeight-semibold { + font-weight: $ms-font-weight-semibold; +} + +// Font sizes +@mixin ms-fontSize-su { + font-size: $ms-font-size-su; +} + +@mixin ms-fontSize-xxl { + font-size: $ms-font-size-xxl; +} + +@mixin ms-fontSize-xl { + font-size: $ms-font-size-xl; +} + +@mixin ms-fontSize-l { + font-size: $ms-font-size-l; +} + +@mixin ms-fontSize-mPlus { + font-size: $ms-font-size-m-plus; +} + +@mixin ms-fontSize-m { + font-size: $ms-font-size-m; +} + +@mixin ms-fontSize-sPlus { + font-size: $ms-font-size-s-plus; +} + +@mixin ms-fontSize-s { + font-size: $ms-font-size-s; +} + +@mixin ms-fontSize-xs { + font-size: $ms-font-size-xs; +} + +@mixin ms-fontSize-mi { + font-size: $ms-font-size-mi; +} + +// Theme colors +@mixin ms-fontColor-themeDarker { + color: $ms-color-themeDarker; +} + +@mixin ms-fontColor-themeDark { + color: $ms-color-themeDark; +} + +@mixin ms-fontColor-themeDarkAlt { + color: $ms-color-themeDarkAlt; +} + +@mixin ms-fontColor-themePrimary { + color: $ms-color-themePrimary; +} + +@mixin ms-fontColor-themeSecondary { + color: $ms-color-themeSecondary; +} + +@mixin ms-fontColor-themeTertiary { + color: $ms-color-themeTertiary; +} + +@mixin ms-fontColor-themeLight { + color: $ms-color-themeLight; +} + +@mixin ms-fontColor-themeLighter { + color: $ms-color-themeLighter; +} + +@mixin ms-fontColor-themeLighterAlt { + color: $ms-color-themeLighterAlt; +} + + +// Neutral colors +@mixin ms-fontColor-black { + color: $ms-color-black; +} + +@mixin ms-fontColor-neutralDark { + color: $ms-color-neutralDark; +} + +@mixin ms-fontColor-neutralPrimary { + color: $ms-color-neutralPrimary; +} + +@mixin ms-fontColor-neutralPrimaryAlt { + color: $ms-color-neutralPrimaryAlt; +} + +@mixin ms-fontColor-neutralSecondary { + color: $ms-color-neutralSecondary; +} + +@mixin ms-fontColor-neutralSecondaryAlt { + color: $ms-color-neutralSecondaryAlt; +} + +@mixin ms-fontColor-neutralTertiary { + color: $ms-color-neutralTertiary; +} + +@mixin ms-fontColor-neutralTertiaryAlt { + color: $ms-color-neutralTertiaryAlt; +} + +@mixin ms-fontColor-neutralLight { + color: $ms-color-neutralLight; +} + +@mixin ms-fontColor-neutralLighter { + color: $ms-color-neutralLighter; +} + +@mixin ms-fontColor-neutralLighterAlt { + color: $ms-color-neutralLighterAlt; +} + +@mixin ms-fontColor-white { + color: $ms-color-white; +} + +// Brand and accent colors +@mixin ms-fontColor-yellow { + color: $ms-color-yellow; +} + +@mixin ms-fontColor-yellowLight { + color: $ms-color-yellowLight; +} + +@mixin ms-fontColor-orange { + color: $ms-color-orange; +} + +@mixin ms-fontColor-orangeLight { + color: $ms-color-orangeLight; +} + +@mixin ms-fontColor-orangeLighter { + color: $ms-color-orangeLighter; +} + +@mixin ms-fontColor-redDark { + color: $ms-color-redDark; +} + +@mixin ms-fontColor-red { + color: $ms-color-red; +} + +@mixin ms-fontColor-magentaDark { + color: $ms-color-magentaDark; +} + +@mixin ms-fontColor-magenta { + color: $ms-color-magenta; +} + +@mixin ms-fontColor-magentaLight { + color: $ms-color-magentaLight; +} + +@mixin ms-fontColor-purpleDark { + color: $ms-color-purpleDark; +} + +@mixin ms-fontColor-purple { + color: $ms-color-purple; +} + +@mixin ms-fontColor-purpleLight { + color: $ms-color-purpleLight; +} + +@mixin ms-fontColor-blueDark { + color: $ms-color-blueDark; +} + +@mixin ms-fontColor-blueMid { + color: $ms-color-blueMid; +} + +@mixin ms-fontColor-blue { + color: $ms-color-blue; +} + +@mixin ms-fontColor-blueLight { + color: $ms-color-blueLight; +} + +@mixin ms-fontColor-tealDark { + color: $ms-color-tealDark; +} + +@mixin ms-fontColor-teal { + color: $ms-color-teal; +} + +@mixin ms-fontColor-tealLight { + color: $ms-color-tealLight; +} + +@mixin ms-fontColor-greenDark { + color: $ms-color-greenDark; +} + +@mixin ms-fontColor-green { + color: $ms-color-green; +} + +@mixin ms-fontColor-greenLight { + color: $ms-color-greenLight; +} + +// Message colors +@mixin ms-fontColor-info { + color: $ms-color-info; +} + +@mixin ms-fontColor-success { + color: $ms-color-success; +} + +@mixin ms-fontColor-alert { // Deprecated: Use ms-fontColor-severeWarning + color: $ms-color-alert; +} + +@mixin ms-fontColor-warning { + color: $ms-color-warning; +} + +@mixin ms-fontColor-severeWarning { + color: $ms-color-severeWarning; +} + +@mixin ms-fontColor-error { + color: $ms-color-error; +} diff --git a/dist/sass/_Fabric.Utilities.scss b/dist/sass/_Fabric.Utilities.scss new file mode 100644 index 000000000..da0e5fe0a --- /dev/null +++ b/dist/sass/_Fabric.Utilities.scss @@ -0,0 +1,76 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Utility classes and mixins used throughout Fabric. + +@import "Fabric.Mixins"; + +// The best box is a border box. +@mixin ms-u-borderBox { + box-sizing: border-box; +} + +// For setting the border base width +@mixin ms-u-borderBase { + border: 1px solid; +} + +// Ensures the block expands to the full height to enclose its floated childen. +@mixin ms-u-clearfix { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + line-height: 0; + } + &:after { + clear: both; + } +} + +// Basic border-box, margin, and padding reset. +@mixin ms-u-normalize { + @include ms-u-borderBox; + @include resetMargins; + @include resetPadding; + @include resetBoxShadow; +} + +// To set various text alignment styles +// @param [variable list] $alignments +@mixin ms-u-textAlign($alignments...) { + @each $align in $alignments { + $alignStr: inspect($align); + .ms-u-textAlign#{to-upper-case(str-slice($alignStr, 1, 1)) + str-slice($alignStr, 2)} { + text-align: $align; + } + } +} + +// To hide content while still making it readable by screen readers (Accessibility) +@mixin ms-u-screenReaderOnly { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +// To add truncation with ellipsis +@mixin ms-u-textTruncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; // Fix for IE 8/9 in case 'word-wrap: break-word' is set on parent nodes +} + +// To disable text wrapping +@mixin ms-u-noWrap { + white-space: nowrap; +} \ No newline at end of file diff --git a/dist/sass/_Fabric.ZIndex.Variables.scss b/dist/sass/_Fabric.ZIndex.Variables.scss new file mode 100644 index 000000000..4855d7cd0 --- /dev/null +++ b/dist/sass/_Fabric.ZIndex.Variables.scss @@ -0,0 +1,32 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Z-Index Layeringz + + +// Base Layer Variables +$ms-zIndex-0: 0; +$ms-zIndex-1: 100; +$ms-zIndex-2: 200; +$ms-zIndex-3: 300; +$ms-zIndex-4: 400; +$ms-zIndex-5: 500; + +// Base Layer Modifier Variables +$ms-zIndex-back: 0; +$ms-zIndex-middle: 5; +$ms-zIndex-front: 10; + + +// Fabric Component Base Layer Assignments + +$ms-zIndex-Callout: $ms-zIndex-1; +$ms-zIndex-ContextualMenu: $ms-zIndex-1; +$ms-zIndex-Overlay: $ms-zIndex-2; +$ms-zIndex-Panel: $ms-zIndex-3; +$ms-zIndex-DatePicker: $ms-zIndex-3; +$ms-zIndex-Dialog: $ms-zIndex-3; +$ms-zIndex-PeoplePicker: $ms-zIndex-3; +$ms-zIndex-Dropdown: $ms-zIndex-4;